---
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]">
                    Gain hands-on experience to make your resume stand out! No
                    experience required!
                </div>
            </div>
        </div>

        <!-- white bg -->
        <div
            class="bg-white max-h-max my-32 flex flex-col items-center justify-center align-center bg-center"
        >
            <!-- Continuous Projects -->
            <div class="flex sm:flex-col 2xl:flex-row pb-32">
                <div
                    class="sm:order-2 2xl:order-1 flex flex-col justify-center items-center"
                >
                    <div
                        class="flex items-center justify-center mb-4 text-ieee font-bold text-[3em]"
                    >
                        Continuous Projects
                    </div>
                    <div
                        class="flex items-center justify-center max-w-3xl text-center font-bold text-[1.8em]"
                    >
                        Looking to use your developed skills or get involved in
                        a project that competes with other schools? Annual
                        projects allow students to become more acquainted with
                        computer vision and embedded systems while building
                        connections with other schools and students.
                    </div>
                </div>
                <div
                    class="sm:order-1 sm:pb-24 2xl:pb-0 2xl:order-2 flex flex-col justify-center items-center"
                >
                    <img
                        src="/backgrounds/micromouse.png"
                        width="75%"
                        height="75%"
                    />
                </div>
            </div>
            <!-- Quarterly Projects -->
            <div class="flex sm:flex-col 2xl:flex-row">
                <div
                    class="sm:order-2 2xl:order-1 flex flex-col justify-center items-center"
                >
                    <div
                        class="flex items-center justify-center mb-4 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]"
                    >
                        Getting started on hardware development or want to make
                        your own project? IEEE's Quarterly Projects aims to
                        provide students with project experience in a span of 10
                        weeks. During QP, students will acquire skills used in
                        the industry such as C++ and the prototyping process
                        with the assistance of our mentors.
                    </div>
                </div>
                <div
                    class="sm:order-1 sm:pb-24 2xl:pb-0 2xl:order-2 flex flex-col justify-center items-center"
                >
                    <img
                        class="justify-center items-center"
                        src="/backgrounds/sp22qp.png"
                        width="75%"
                        height="75%"
                    />
                </div>
            </div>
        </div>
    </div>
</Layout>
