// Import ========================================================================================================================
import { textareaHeightControl } from '/data/www/aia-official-en-main/web/src/js/components/input.js';
import App from '@/layouts/aia/app-layout';
// import '/data/www/aia-official-en-main/www/css/pages/contact-us.css';
import { checkboxButtonDisableToggle, formErrorMessage, formReset, formValidation } from '/data/www/aia-official-en-main/web/src/js/patterns/form.js';
import Button from '@/components/button';
import Input from '@/components/input';
import { useEffect, useRef } from 'react';

import { useForm } from '@inertiajs/react';
import SectionNavigation from '@/components/aia/section-navigation';
import PageMeta from '@/components/aia/page-meta';
import { aboutAIA } from '/data/www/aia-official-en-main/web/src/js/about-aia.js'



export default function About() {
    const elementRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (elementRef.current) {
            aboutAIA();
        }
    }, []);
    return (

        <App
            subNav={
                <SectionNavigation
                    links={
                        [{ name: 'About AIA', href: route('about'), },
                        { name: 'People', href: route('people') },
                        { name: 'Partner with us', href: route('partner') }
                        ]
                    }
                />
            }
            pageMeta={
                <PageMeta
                    title="About AIA"
                />
            }
        >

            <section className="pageContent">
                <div className="keyvisual">
                    <div className="container">
                        <img className="keyvisual-source" src="./images/img-aia-kv.png" alt="" />
                    </div>
                </div>
                <div className="editor">
                    <div className="container pageIndent">
                        <h2><b>Our Story</b></h2>
                        <p>
                            At the heart of Taiwan's AI evolution stands the Taiwan AI Academy (AIA), a catalyst for transformation
                            built upon the nation's exceptional technological prowess and vibrant innovation landscape. Founded in
                            March 2017 by the esteemed Dr. James C. Liao, Dr. H.T. Kung, and the late Dr. Sheng-Wei Chen, AIA emerged
                            from a critical need: to harness AI for solving complex manufacturing challenges. This pivotal initiative
                            underscored the urgent necessity for nurturing AI talent, leading to the establishment of the Taiwan AI
                            Academy Foundation.
                        </p>
                        <blockquote>Fostering a Thriving AI ecosystem in Taiwan</blockquote>
                    </div>
                </div>
                <div className="keyvisual">
                    <div className="container lg:flex lg:justify-end">
                        <img className="keyvisual-source keyvisual-source--right" src="./images/img-aia-kv2.png" alt="" />
                    </div>
                </div>
                <div className="editor">
                    <div className="container pageIndent">
                        <h3><b>Vision​</b></h3>
                        <h2><b>Empowering Taiwan as a Global AI Hub</b></h2>
                        <p>
                            We envision Taiwan as a globally recognized epicenter of AI innovation, driving ethical advancements that
                            elevate industrial competitiveness and foster societal well-being. Through open collaboration and
                            impactful research, we are committed to building an inclusive future—AI for All, All in AI.
                        </p>
                        <blockquote>Fostering a Thriving AI ecosystem in Taiwan</blockquote>
                    </div>
                </div>
                <div className="keyvisual">
                    <div className="container">
                        <img className="keyvisual-source" src="./images/img-aia-kv3.png" alt="" />
                    </div>
                </div>
                <div className="editor">
                    <div className="container pageIndent">
                        <h3><b>Mission​​</b></h3>
                        <h2><b>Ecosystem Architect</b></h2>
                        <p>
                            To forge strategic alliances between industry, government, academia, and research institutions,
                            cultivating a dynamic and interconnected AI ecosystem.
                        </p>
                        <h2><b>Transformation Accelerator</b></h2>
                        <p>
                            To expedite AI-driven transformation within Taiwanese industries by establishing deep-rooted, trusted
                            partnerships and championing responsible, practical AI solutions.
                        </p>
                        <h2><b>Societal Impact Leader</b></h2>
                        <p>
                            To amplify societal value through strategic initiatives and dialogues that ensure AI development
                            positively impacts all communities.
                        </p>
                        <h2><b>Global Talent Nexus</b></h2>
                        <p>
                            To unite leading global AI minds and experts, enhancing Taiwan’s AI capabilities and fostering robust
                            international collaborations.
                        </p>
                    </div>
                </div>
            </section>
            <div ref={elementRef} className="pageStickyContainer">
                <section className="timeline">
                    <div className="container h-full">
                        <div className="timeline-scrollContainer">
                            <div className="timeline-description">
                                <h1 className="text-h1-bold">
                                    Taiwan AI Academy & Global AI Breakthroughs: A Parallel Evolution
                                </h1>
                                <p className="text-t3-medium mt-20 lg:mt-24">
                                    AI is transforming our world, and Taiwan AI Academy is at the heart of
                                    that transformation. This timeline is an invitation to explore the
                                    intertwined stories of global AI breakthroughs and our Academy’s
                                    growth. Discover how we're building a future where innovation and
                                    knowledge converge, and be part of the story.
                                </p>
                            </div>
                            <div className="timeline-control">
                                <p className="timeline-scrollRemind">
                                    <i className="timeline-scrollRemindIcon"></i>
                                    Keep Scrolling
                                </p>
                                <nav className="timeline-controlScrollContainer">
                                    <ul className="timeline-controlContainer">
                                        <li className="timeline-yearControl timeline-yearControl--active">
                                            <button type="button">2024</button>
                                        </li>
                                        <li className="timeline-yearControl">
                                            <button type="button">2023</button>
                                        </li>
                                        <li className="timeline-yearControl">
                                            <button type="button">2022</button>
                                        </li>
                                        <li className="timeline-yearControl">
                                            <button type="button">2021</button>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                            <div className="timeline-yearGroup">
                                <h2 className="text-h2-bold timeline-yearDescription">
                                    2023-2024:
                                    <br />
                                    The Rise of Generative AI and Global AI Competition
                                </h2>
                                <ol className="timeline-yearList">
                                    <li className="timeline-year">
                                        <div>
                                            <figure className="timeline-visual">
                                                <img
                                                    className="object-scale-down object-center opacity-30 bg-black/40"
                                                    src="images/img-timeline.png"
                                                    alt=""
                                                />
                                            </figure>
                                            <p className="text-sp timeline-date">2024</p>
                                        </div>
                                        <ol className="timeline-storyList">
                                            <li className="timeline-story timeline-story--aia">
                                                <span>
                                                    Sheng-Wei Chen Memorial Lecture: Delivering Trust in the AI
                                                    Era by Dr. Wei Chao Chen
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--ai">
                                                <span>
                                                    Global AI Regulation: EU AI Act Enforcement & U.S. AI Safety
                                                    Executive Order
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--aia">
                                                <span>
                                                    U.S. Congressional Aides Visit: AI Development, Policy, and
                                                    Industry-Academia Collaboration
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--ai">
                                                <span>
                                                    AI in Education & Workforce Development: Personalized Learning
                                                    and Corporate Upskilling
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--aia">
                                                <span>
                                                    Train-the-Trainer Program: Upskilling ASEAN Educators in
                                                    Semiconductor Technology
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--aia">
                                                <span>
                                                    Malaysia Delegation Visit: Strengthening AI Industry
                                                    Collaboration with MIDA
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--ai">
                                                <span>
                                                    AI-Driven Industry Collaboration:Strengthening Global Supply
                                                    Chains and Trade Agreements
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--aia">
                                                <span>
                                                    AIATCL™ Launch: Taiwan’s First AI Literacy Certification for
                                                    Professionals
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--aia">
                                                <span>
                                                    GenAI Pilot Workshop: AI Applications Across Industries and
                                                    Workforce Readiness
                                                </span>
                                            </li>
                                        </ol>
                                    </li>
                                    <li className="timeline-year">
                                        <div>
                                            <figure className="timeline-visual">
                                                <img
                                                    className="object-scale-down object-center opacity-30 bg-black/40"
                                                    src="images/img-timeline.png"
                                                    alt=""
                                                />
                                            </figure>
                                            <p className="text-sp timeline-date">2023</p>
                                        </div>
                                        <ol className="timeline-storyList">
                                            <li className="timeline-story timeline-story--aia">
                                                <span>AIGC Impact Workshop Explores AI-Driven Innovation</span>
                                            </li>
                                            <li className="timeline-story timeline-story--ai">
                                                <span>ChatGPT Becomes Fastest-Growing AI App</span>
                                            </li>
                                            <li className="timeline-story timeline-story--aia">
                                                <span>
                                                    AIGC Summer Camp Introduces High Schoolers to Generative AI
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--ai">
                                                <span>LLM Competition Heats Up: Bard, Claude & More</span>
                                            </li>
                                            <li className="timeline-story timeline-story--aia">
                                                <span>
                                                    Annual Conference: Generative AI and Industry Innovation
                                                </span>
                                            </li>
                                        </ol>
                                    </li>
                                </ol>
                            </div>
                            <div className="timeline-yearGroup">
                                <h2 className="text-h2-bold timeline-yearDescription">
                                    2021-2022:
                                    <br />
                                    The Rise of Generative AI and Global AI Competition
                                </h2>
                                <ol className="timeline-yearList">
                                    <li className="timeline-year">
                                        <div>
                                            <figure className="timeline-visual">
                                                <img
                                                    className="object-scale-down object-center opacity-30 bg-black/40"
                                                    src="images/img-timeline.png"
                                                    alt=""
                                                />
                                            </figure>
                                            <p className="text-sp timeline-date">2022</p>
                                        </div>
                                        <ol className="timeline-storyList">
                                            <li className="timeline-story timeline-story--aia">
                                                <span>
                                                    Sheng-Wei Chen Memorial Lecture: Delivering Trust in the AI
                                                    Era by Dr. Wei Chao Chen
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--ai">
                                                <span>
                                                    Global AI Regulation: EU AI Act Enforcement & U.S. AI Safety
                                                    Executive Order
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--aia">
                                                <span>
                                                    U.S. Congressional Aides Visit: AI Development, Policy, and
                                                    Industry-Academia Collaboration
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--ai">
                                                <span>
                                                    AI in Education & Workforce Development: Personalized Learning
                                                    and Corporate Upskilling
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--aia">
                                                <span>
                                                    Train-the-Trainer Program: Upskilling ASEAN Educators in
                                                    Semiconductor Technology
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--aia">
                                                <span>
                                                    Malaysia Delegation Visit: Strengthening AI Industry
                                                    Collaboration with MIDA
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--ai">
                                                <span>
                                                    AI-Driven Industry Collaboration:Strengthening Global Supply
                                                    Chains and Trade Agreements
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--aia">
                                                <span>
                                                    AIATCL™ Launch: Taiwan’s First AI Literacy Certification for
                                                    Professionals
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--aia">
                                                <span>
                                                    GenAI Pilot Workshop: AI Applications Across Industries and
                                                    Workforce Readiness
                                                </span>
                                            </li>
                                        </ol>
                                    </li>
                                    <li className="timeline-year">
                                        <div>
                                            <figure className="timeline-visual">
                                                <img
                                                    className="object-scale-down object-center opacity-30 bg-black/40"
                                                    src="images/img-timeline.png"
                                                    alt=""
                                                />
                                            </figure>
                                            <p className="text-sp timeline-date">2021</p>
                                        </div>
                                        <ol className="timeline-storyList">
                                            <li className="timeline-story timeline-story--aia">
                                                <span>AIGC Impact Workshop Explores AI-Driven Innovation</span>
                                            </li>
                                            <li className="timeline-story timeline-story--ai">
                                                <span>ChatGPT Becomes Fastest-Growing AI App</span>
                                            </li>
                                            <li className="timeline-story timeline-story--aia">
                                                <span>
                                                    AIGC Summer Camp Introduces High Schoolers to Generative AI
                                                </span>
                                            </li>
                                            <li className="timeline-story timeline-story--ai">
                                                <span>LLM Competition Heats Up: Bard, Claude & More</span>
                                            </li>
                                            <li className="timeline-story timeline-story--aia">
                                                <span>
                                                    Annual Conference: Generative AI and Industry Innovation
                                                </span>
                                            </li>
                                        </ol>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <span className="timeline-observerLine timeline-observerLine--endLine"></span>
                </section>
            </div>
        </App >

    );


}