new landing page template

app/(landing)/page.tsx

@@ -0,0 +1,21 @@
+import AcmeLogo from '@/app/ui/acme-logo';
+import { ArrowRightIcon } from '@heroicons/react/24/outline';
+import Link from 'next/link';
+import { lusitana } from '@/app/ui/fonts';
+import Image from 'next/image';
+import Hero from './sections/Hero';
+import Schedule from './sections/Schedule';
+import { Suspense } from 'react';
+
+export default function Page() {
+  return (
+    <main className="flex min-h-screen flex-col p-6">
+      <div>
+        <Hero />
+        <Suspense fallback={<>Loading Schedule!</>}>
+          <Schedule />
+        </Suspense>
+      </div>
+    </main>
+  );
+}

app/(landing)/sections/Hero.tsx

@@ -0,0 +1,15 @@
+export default function Hero() {
+  return (
+    <div
+      className="bg-gray-100 w-full h-[100vh] max-h-[1300px]
+      flex flex-col justify-center items-center"
+    >
+      <h1 className="font-extrabold text-5xl">
+        HackRU!
+      </h1>
+      <span>
+        Hack all knight looonnnggg
+      </span>
+    </div>
+  );
+}

app/(landing)/sections/Schedule.tsx

@@ -0,0 +1,43 @@
+import { getSchedule } from "@/app/lib/data";
+
+function ScheduleOfTheDay(props: { dayInfo: DayInfo }) {
+  const { dayInfo } = props;
+  const { day, times } = dayInfo;
+  return (
+    <div className="flex flex-col w-full my-5">
+      <div className="text-5xl md:text-7xl w-full text-center mb-4 font-semibold glow-subtitles text-textSubtitle">{dayInfo.day}</div>
+      <div className="w-full">
+        {times.map((timeInfo, index) => (
+          <div className="flex flex-row w-full text-xl my-2 md:my-5 md:px-3 pr-4"
+            key={`${day}-${index}`}
+          >
+            <div className="w-2/5 h-fit text-right pr-2 font-black">{timeInfo.time}</div>
+            <div className="w-3/5">
+              {timeInfo.event}
+            </div>
+
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+
+}
+
+export default async function Schedule() {
+  const schedule = await getSchedule();
+
+  return (
+    <div className="w-full flex justify-center px-4 mb-20 relative"
+      id="Schedule">
+      <div className="w-full max-w-7xl h-fit flex flex-col items-center">
+        <div className="transparent-black-background w-full text-text rounded-3xl
+                              flex flex-col items-center md:flex-row md:items-start relative">
+          <ScheduleOfTheDay dayInfo={schedule["Saturday"]} />
+          <div className="w-20 h-2 bg-text md:invisible md:absolute rounded-sm" />
+          <ScheduleOfTheDay dayInfo={schedule["Sunday"]} />
+        </div>
+      </div>
+    </div>
+  );
+}

app/lib/data.ts

@@ -11,6 +11,48 @@ import {
 import { formatCurrency } from './utils';
 import { unstable_noStore as noStore } from 'next/cache';
 
+export async function getSchedule() {
+  //a fake delay to simulate a real api call
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  const schedule: Schedule = {
+    "Saturday": {
+      "day": "Saturday",
+      "times": [
+        { "time": "10:00 AM", "event": "Check-in starts" },
+        { "time": "11:00 AM", "event": "Opening Ceremony", },
+        { "time": "12:00 PM", "event": "Team Building Event" },
+        { "time": "12:00 PM", "event": "Hacking Starts" },
+        { "time": "12:30 PM", "event": "Lunch" },
+        { "time": "1:30 PM", "event": "NJ TRANSIT API Demo" },
+        { "time": "2:00 PM", "event": "Algorithms in Society Workshop by Ethitech" },
+        { "time": "2:30 PM", "event": "MLH Mini Event" },
+        { "time": "5:30 PM", "event": "Tech Talk by NJ TRANSIT" },
+        { "time": "8:00 PM", "event": "Dinner" },
+
+      ],
+    },
+
+    "Sunday": {
+      "day": "Sunday",
+      "times": [
+        { "time": "12:00 AM", "event": "Midnight Surprise" },
+        { "time": "8:00 AM", "event": "Breakfast", },
+        // { "time": "11:00 AM", "event": "Event" },
+        { "time": "12:00 PM", "event": "Submissions Due" },
+        { "time": "12:30 PM", "event": "Lunch", },
+        { "time": "1:00 PM", "event": "Judging Begins" },
+        { "time": "3:00 PM", "event": "Judging Ends" },
+        { "time": "3:30 PM", "event": "Closing Ceremony", },
+        // { "time": "7:00 PM", "event": "Dinner", "reactIcon": <FaUtensils /> },
+        // { "time": "9:00 PM", "event": "Venue closes" },
+      ],
+    }
+  };
+
+  return schedule;
+}
+
 export async function fetchRevenue() {
   // Add noStore() here prevent the response from being cached.
   // This is equivalent to in fetch(..., {cache: 'no-store'}).

types/global.d.ts

@@ -0,0 +1,7 @@
+interface DayInfo {
+  day: string,
+  times: { time: string, event: string }[]
+}
+
+type day = string
+type Schedule = Record<day, DayInfo>;