Merge pull request #10 from acmucsd/schedule

schedule

src/app/globals.css

@@ -5,6 +5,10 @@
   --side-padding-small: 30px;
 }
 
+html {
+  scroll-behavior: smooth !important;
+}
+
 html,
 body,
 footer {

src/app/layout.tsx

@@ -1,8 +1,8 @@
-import Footer from '@/sections/footer';
+import Footer from '@/components/footer';
 import './globals.css';
 import type { Metadata } from 'next';
 import { DM_Sans } from 'next/font/google';
-import Navbar from '@/sections/navbar';
+import Navbar from '@/components/navbar';
 
 const dmSans = DM_Sans({ subsets: ['latin'] });
 

src/app/page.tsx

@@ -5,13 +5,15 @@ import Hero from '@/sections/landing/hero';
 import Welcome from '@/sections/landing/welcome';
 import Tracks from '@/sections/landing/tracks';
 import Sponsors from '@/sections/landing/sponsors';
+import Schedule from '@/sections/landing/schedule';
 
 export default function Home() {
   return (
     <main className={styles.main}>
       <Hero />
       <Welcome />
       <Tracks />
+      <Schedule />
       <Sponsors />
     </main>
   );

src/sections/navbar/index.tsx → src/components/navbar/index.tsx

@@ -12,6 +12,14 @@ const LINKS = [
     name: 'Home',
     href: '/',
   },
+  {
+    name: 'Schedule',
+    href: '/#schedule',
+  },
+  {
+    name: 'Sponsors',
+    href: '/#sponsors',
+  },
   {
     name: 'FAQs',
     href: '/faq',

src/sections/navbar/style.module.scss → src/components/navbar/style.module.scss

@@ -18,7 +18,7 @@
 .leftSection,
 .rightSectionDesktop {
   backdrop-filter: blur(2px);
-  background-color: rgba(169, 224, 255, 0.7);
+  background-color: rgba(169, 224, 255, 0.8);
   border-radius: 0.75rem;
 }
 

src/sections/landing/schedule/index.tsx

@@ -0,0 +1,100 @@
+import { useState } from 'react';
+import { LOCATION_MAPS_LINKS, SATURDAY_SCHEDULE, SUNDAY_SCHEDULE, ScheduleItem } from './schedule';
+import styles from './style.module.scss';
+import Link from 'next/link';
+
+interface ScheduleViewProps {
+  schedule: ScheduleItem[];
+}
+
+const ScheduleDesktop = ({ schedule }: ScheduleViewProps) => {
+  return (
+    <table>
+      <tr>
+        <th>Type</th>
+        <th>Time</th>
+        <th>Event</th>
+        <th>Location</th>
+      </tr>
+      {schedule.map(item => (
+        <tr key={item.name}>
+          <td>
+            <div className={styles.tag} data-type={item.type}>
+              {item.type}
+            </div>
+          </td>
+          <td>{item.time}</td>
+          <td>{item.name}</td>
+          <td>
+            {LOCATION_MAPS_LINKS.has(item.location) ? (
+              <Link
+                href={LOCATION_MAPS_LINKS.get(item.location) as string}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {item.location}
+              </Link>
+            ) : (
+              item.location
+            )}
+          </td>
+        </tr>
+      ))}
+    </table>
+  );
+};
+
+const ScheduleMobile = ({ schedule }: ScheduleViewProps) => {
+  return (
+    <div className={styles.mobileContainer}>
+      {schedule.map(item => (
+        <div key={item.name} className={styles.card}>
+          <div className={styles.tag} data-type={item.type}>
+            {item.type}
+          </div>
+          <div className={styles.title}>
+            <strong>{item.name}</strong>
+            <div>
+              {LOCATION_MAPS_LINKS.has(item.location) ? (
+                <Link
+                  href={LOCATION_MAPS_LINKS.get(item.location) as string}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  @ {item.location}
+                </Link>
+              ) : (
+                `@ ${item.location}`
+              )}
+            </div>
+          </div>
+          <div>{item.time}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const Schedule = () => {
+  const [display, setDisplay] = useState<'Saturday' | 'Sunday'>('Saturday');
+  const schedule = display === 'Saturday' ? SATURDAY_SCHEDULE : SUNDAY_SCHEDULE;
+
+  return (
+    <div className={styles.container} id="schedule">
+      <div className={styles.header}>
+        <h2>Schedule</h2>
+        <select
+          value={display}
+          onChange={e => setDisplay(e.target.value === 'Saturday' ? 'Saturday' : 'Sunday')}
+        >
+          <option>Saturday</option>
+          <option>Sunday</option>
+        </select>
+      </div>
+      <ScheduleDesktop schedule={schedule} />
+      <ScheduleMobile schedule={schedule} />
+    </div>
+  );
+};
+
+export default Schedule;

src/sections/landing/schedule/schedule.ts

@@ -0,0 +1,94 @@
+export interface ScheduleItem {
+  type: 'Main Event' | 'Social' | 'Workshop' | 'Info' | 'Deadline';
+  time: string;
+  name: string;
+  location: string;
+}
+
+export const LOCATION_MAPS_LINKS = new Map(
+  Object.entries({
+    'SDSC Auditorium': 'https://maps.app.goo.gl/ufpRChWo2hN9icCR9',
+    'Warren Bear Lawn': 'https://maps.app.goo.gl/ZP7Kuzgd7GmEtYRVA',
+    'Warren Mall': 'https://maps.app.goo.gl/cKE8SEfpLqzuH74r8',
+    'CSE Basement': 'https://maps.app.goo.gl/TWMRfjrCGXBAzE847',
+    'Multipurpose Room': 'https://maps.app.goo.gl/UjQpkzsKZu3iRUDf8',
+    'CSE 1202': 'https://maps.app.goo.gl/TWMRfjrCGXBAzE847',
+  })
+);
+
+const newScheduleItem = (
+  type: 'Main Event' | 'Social' | 'Workshop' | 'Info' | 'Deadline',
+  time: string,
+  name: string,
+  location: string
+): ScheduleItem => ({ type, time, name, location });
+
+export const SATURDAY_SCHEDULE: ScheduleItem[] = [
+  newScheduleItem('Info', '8:30 AM - 9:30 AM', 'Check-in', 'SDSC Auditorium'),
+  newScheduleItem('Main Event', '9:30 AM - 10:15 AM', 'Opening Ceremony', 'SDSC Auditorium'),
+  newScheduleItem('Social', '10:30 AM - 11:00 AM', 'Team Formation', 'Warren Bear Lawn'),
+  newScheduleItem('Info', '11:00 AM', 'Hacking Starts!', 'CSE Basement'),
+  newScheduleItem('Info', '12:00 PM', 'Lunch Distribution', 'Warren Mall'),
+  newScheduleItem(
+    'Workshop',
+    '2:00 PM - 3:00 PM',
+    'Next.js and React (hosted by ACM Hack)',
+    'CSE 1202'
+  ),
+  newScheduleItem('Workshop', '3:00 PM - 4:00 PM', 'Deep Learning (hosted by DS3)', 'CSE 1202'),
+  newScheduleItem('Social', '4:00 PM - 5:00 PM', 'Pirate Charades', 'CSE 1202'),
+  newScheduleItem(
+    'Workshop',
+    '5:00 PM - 6:00 PM',
+    'Machine Learning Prototyping (hosted by ACM)',
+    'CSE 1202'
+  ),
+  newScheduleItem('Info', '6:00 PM', 'Dinner Distribution', 'Warren Mall'),
+  newScheduleItem(
+    'Workshop',
+    '7:00 PM - 8:00 PM',
+    'Intro to Figma (hosted by ACM Design)',
+    'CSE 1202'
+  ),
+  newScheduleItem(
+    'Social',
+    '8:00 PM - 9:00 PM',
+    'Pirates of the Caribbean Watch Party',
+    'CSE 1202'
+  ),
+  newScheduleItem('Info', '9:00 PM', 'Venues Close', 'All Venues'),
+];
+
+export const SUNDAY_SCHEDULE = [
+  newScheduleItem('Info', '8:30 AM', 'Breakfast Distribution', 'Warren Mall'),
+  newScheduleItem('Workshop', '9:00 AM - 10:00 AM', 'Career Talk with CoCalc', 'CSE 1202'),
+  newScheduleItem('Workshop', '10:00 AM - 11:00 AM', 'Intro to RegEx (hosted by TSE)', 'CSE 1202'),
+  newScheduleItem(
+    'Workshop',
+    '11:00 AM - 12:00 PM',
+    'Intro to Backend and APIs (hosted by IEEE)',
+    'CSE 1202'
+  ),
+  newScheduleItem('Info', '12:00 PM', 'Lunch Distribution', 'Warren Mall'),
+  newScheduleItem(
+    'Workshop',
+    '1:00 PM - 2:00 PM',
+    'Intro to Web Security (hosted by ACM Cyber)',
+    'CSE 1202'
+  ),
+  newScheduleItem(
+    'Workshop',
+    '2:00 PM - 3:00 PM',
+    'Intro to Website Design (hosted by DS3)',
+    'CSE 1202'
+  ),
+  newScheduleItem('Workshop', '3:00 PM - 4:00 PM', 'Ethics in AI (hosted by ACM AI)', 'CSE 1202'),
+  newScheduleItem('Deadline', '5:00 PM', 'Project Submissions Due!', 'All Venues'),
+  newScheduleItem('Info', '6:00 PM', 'Dinner Distribution', 'Warren Mall'),
+  newScheduleItem(
+    'Main Event',
+    '7:00 PM - 9:00 PM',
+    'Closing Ceremony & Awards',
+    'Multipurpose Room'
+  ),
+];

src/sections/landing/schedule/style.module.scss

@@ -0,0 +1,135 @@
+.container {
+  margin-top: 8rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+
+  a {
+    text-decoration: none;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    h2 {
+      font-size: 36px;
+    }
+
+    select {
+      padding: 0.625rem 1.5rem;
+      border: 0;
+      border-radius: 0.875rem;
+      font-family: inherit;
+      font-size: 1rem;
+      font-weight: 500;
+      border-right: 16px solid transparent;
+    }
+
+    select:focus {
+      outline: 0;
+    }
+  }
+
+  table {
+    width: 100%;
+    background-color: #fff;
+    border-radius: 0.875rem;
+    border-collapse: collapse;
+
+    th,
+    td {
+      text-align: left;
+      padding: 1.5625rem 3.125rem;
+    }
+
+    tr:first-child {
+      border-bottom: 2px solid #afe1fd;
+    }
+  }
+}
+
+.tag {
+  border-radius: 1.5rem;
+  padding: 0.5rem 0.75rem;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &[data-type='Main Event'] {
+    background: #d6e5f8;
+    color: #142e52;
+  }
+
+  &[data-type='Social'] {
+    background: #d7ede7;
+    color: #00573f;
+  }
+
+  &[data-type='Workshop'] {
+    background: #ece6f9;
+    background: #ece6f9;
+    color: #35118d;
+  }
+
+  &[data-type='Info'] {
+    color: #8f5a26;
+    background: #ffe2c4;
+  }
+
+  &[data-type='Deadline'] {
+    background: #fad5dc;
+    color: #8d0d25;
+  }
+}
+
+.mobileContainer {
+  display: none;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 0.75rem;
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding: 1.5rem;
+    border-bottom: 2px solid #afe1fd;
+
+    &:last-child {
+      border: 0;
+    }
+
+    div {
+      font-size: 1rem;
+      line-height: 1.3125rem;
+      letter-spacing: 0.01563rem;
+    }
+
+    strong {
+      font-size: 1.3125rem;
+      font-weight: 600;
+      line-height: 1.5rem;
+    }
+
+    .title {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+  }
+}
+
+@media screen and (width < 1100px) {
+  .container {
+    table {
+      display: none;
+    }
+  }
+
+  .mobileContainer {
+    display: flex;
+  }
+}