---
import EventList from "../components/react/EventList.jsx";
import Layout from "../layouts/Layout.astro";
const CALENDAR_API_KEY = import.meta.env.CALENDAR_API_KEY;
---

<Layout>
    <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]">
                Here is our timeline for the IEEE UCSD events:
            </div>
        </div>
    </div>

    <EventList client:load CALENDAR_API_KEY={CALENDAR_API_KEY} />
</Layout>
