---
import Layout from "../layouts/Layout.astro";
---

<Layout>
    <div class="flex flex-col">
        <div
            class="bg-ieee h-[35em] rounded-b-[10%] my-auto flex flex-col items-center justify-center bg-blend-overlay bg-no-repeat bg-cover align-center bg-center"
            style="background-image: url('/backgrounds/robocar.png');"
        >
            <!-- BLUE BG -->
            <div class="flex flex-col items-center justify-center text-center">
                <div class="text-[3.2em] text-white font-bold mb-4 w-[11em]">
                    The backbone of IEEE. Come help make a difference!
                </div>
            </div>
        </div>
        <div class="flex flex-col justify-center items-center">
            <div
                class="flex items-center justify-center mt-12 text-ieee font-bold text-[3em]"
            >
                Quarterly Projects
            </div>
            <div
                class="flex items-center justify-center max-w-3xl text-center font-bold text-[1.8em]"
            >
                Interested in gaining experience in event planning and
                development, meeting new friends, and learning more about IEEE?
                Join one of our committees as an IEEEntern!
            </div>

            <div class="flex flex-wrap my-12">
                <div
                    class="flex flex-row flex-wrap justify-center items-center"
                >
                    <!-- Technical -->
                    <div
                        class="w-[40rem] h-[30rem] rounded-2xl flex flex-col mx-6 my-6 justify-center items-center bg-ieee bg-blend-multiply bg-cover bg-center bg-no-repeat bg-opacity-80 group overflow-hidden p-6"
                        style="background-image: url('/backgrounds/technical.png');"
                    >
                        <div
                            class="absolute text-white font-bold text-[3em] text-center transition-transform duration-500 opacity-100 group-hover:translate-y-[-150%]"
                        >
                            Technical Committee
                        </div>
                        <div
                            class="text-white font-bold text-[1.2em] text-center transition-trasnform duration-700 opacity-0 group-hover:opacity-100 pt-16"
                        >
                            The Technical Committee is responsible for
                            maintaining and improving the organization's
                            technical skills program. Through developing,
                            planning, and executing a minimum of six technical
                            events throughout the year, this chair seeks to
                            improve students' technical skills. Events can
                            include PCB, soldering, hardware, and software. You
                            can build anything with students!
                        </div>
                    </div>

                    <!-- Social -->

                    <div
                        class="w-[40rem] h-[30rem] rounded-2xl flex flex-col mx-6 my-6 justify-center items-center bg-ieee bg-blend-multiply bg-cover bg-center bg-no-repeat bg-opacity-80 group overflow-hidden p-6"
                        style="background-image: url('/backgrounds/social.png');"
                    >
                        <div
                            class="absolute text-white font-bold text-[3em] text-center transition-transform duration-500 opacity-100 group-hover:translate-y-[-125%]"
                        >
                            Social Committee
                        </div>
                        <div
                            class="text-white font-bold text-[1.2em] text-center transition-trasnform duration-700 opacity-0 group-hover:opacity-100 pt-16"
                        >
                            The Social Committee is in charge of planning and
                            executing social events that create bonding
                            opportunities for officers and our student members.
                            Interested in arranging a hike at Torrey Pines?
                            Sharing some free food and drinks in Warren Mall?
                            Going out for an escape room challenge? There are
                            tons of ideas waiting for you to implement!
                        </div>
                    </div>

                    <!-- Professional -->

                    <div
                        class="w-[40rem] h-[30rem] rounded-2xl flex flex-col mx-6 my-6 justify-center items-center bg-ieee bg-blend-multiply bg-cover bg-center bg-no-repeat bg-opacity-80 group overflow-hidden p-6"
                        style="background-image: url('/backgrounds/professional.png');"
                    >
                        <div
                            class="absolute text-white font-bold text-[3em] text-center transition-transform duration-500 opacity-100 group-hover:translate-y-[-175%]"
                        >
                            Professional Committee
                        </div>
                        <div
                            class="text-white font-bold text-[1.2em] text-center transition-trasnform duration-700 opacity-0 group-hover:opacity-100 pt-24"
                        >
                            The Professional Committee is responsible for
                            maintaining and improving the organization's
                            professional development program. Through
                            developing, planning, and executing a minimum of six
                            professional events throughout the year, such as,
                            workshops on developing professional skills, company
                            (sponsor) information sessions, tech talks, tours,
                            and the annual ECE day (partnered with the VC
                            External), this committee seeks to improve students'
                            professional skills.
                        </div>
                    </div>
                    <!-- PR -->

                    <div
                        class="w-[40rem] h-[30rem] rounded-2xl flex flex-col mx-6 my-6 justify-center items-center bg-ieee bg-blend-multiply bg-cover bg-center bg-no-repeat bg-opacity-80 group overflow-hidden p-6"
                        style="background-image: url('/backgrounds/professional.png');"
                    >
                        <div
                            class="absolute text-white font-bold text-[3em] text-center transition-transform duration-500 opacity-100 group-hover:translate-y-[-110%]"
                        >
                            PR Committee
                        </div>
                        <div
                            class="text-white font-bold text-[1.2em] text-center transition-trasnform duration-700 opacity-0 group-hover:opacity-100 pt-12"
                        >
                            The PR Comittee is responsible for creating and
                            printing flyers, photographs, and other media. They
                            also aid in managing the Branch's social media
                            presence by distributing the news of the Branch's
                            events, projects, and outreach.
                        </div>
                    </div>
                    <!-- PR -->
                    <div
                        class="w-[40rem] h-[30rem] rounded-2xl flex flex-col mx-6 my-6 justify-center items-center bg-ieee bg-blend-multiply bg-cover bg-center bg-no-repeat bg-opacity-80 group overflow-hidden p-6"
                        style="background-image: url('/backgrounds/professional.png');"
                    >
                        <div
                            class="absolute text-white font-bold text-[3em] text-center transition-transform duration-500 opacity-100 group-hover:translate-y-[-125%]"
                        >
                            Outreach Committee
                        </div>
                        <div
                            class="text-white font-bold text-[1.2em] text-center transition-trasnform duration-700 opacity-0 group-hover:opacity-100 pt-16"
                        >
                            The Outreach Committee is responsible for hosting
                            outreach events that will benefit K-12 students
                            within the STEM fields including the annual Boy
                            Scout STEM Merit Badge Fair, Girls STEM Fair, and
                            Sumobot Robotics Competition. Up for the challenge
                            to explain Ohm's Law to a 10-year-old?
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div></Layout
>
