prizes

src/app/prizes/page.module.scss

@@ -0,0 +1,39 @@
+.container {
+  margin-top: 8rem;
+  display: flex;
+  flex-direction: column;
+  gap: 5rem;
+  align-items: center;
+  max-width: 100rem;
+
+  h2 {
+    margin: 0;
+    font-size: 4rem;
+    font-weight: 700;
+
+    @media screen and (width <= 768px) {
+      font-size: 3rem;
+    }
+  }
+
+  .topThree {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr;
+    gap: 5rem;
+    width: 60%;
+
+    @media screen and (width <= 1400px) {
+      width: 100%;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    }
+  }
+
+  .prizes {
+    width: 100%;
+    gap: 5rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-rows: 1fr;
+  }
+}

src/app/prizes/page.tsx

@@ -0,0 +1,34 @@
+import PrizeCard from '@/components/PrizeCard';
+import styles from './page.module.scss';
+import { PRIZES, TOP_PRIZES } from './prizes';
+
+export default function Prizes() {
+  return (
+    <main>
+      <div className={styles.container}>
+        <h2>Prizes</h2>
+        <div className={styles.topThree}>
+          {TOP_PRIZES.map(prize => (
+            <PrizeCard
+              variant={prize.variant}
+              title={prize.title}
+              descriptions={prize.descriptions}
+              images={prize.images}
+              key={prize.title}
+            />
+          ))}
+        </div>
+        <div className={styles.prizes}>
+          {PRIZES.map(prize => (
+            <PrizeCard
+              title={prize.title}
+              descriptions={prize.descriptions}
+              images={prize.images}
+              key={prize.title}
+            />
+          ))}
+        </div>
+      </div>
+    </main>
+  );
+}

src/app/prizes/prizes.ts

@@ -0,0 +1,39 @@
+interface Prize {
+  description: string;
+  image: string;
+}
+
+interface Rewards {
+  title: string;
+  descriptions: string[];
+  images: string[];
+  variant?: 'first' | 'second' | 'third';
+}
+
+const newReward = (
+  title: string,
+  descriptions: string[],
+  images: string[],
+  variant?: 'first' | 'second' | 'third'
+) => ({
+  title,
+  descriptions,
+  images,
+  variant,
+});
+
+export const TOP_PRIZES = [
+  newReward('1st Overall', ['4x HHKB Keyboards', 'CoCalc Credits'], ['hhkb.png'], 'first'),
+  newReward('2nd Overall', ['4x Polulu Robots', 'CoCalc Credits'], ['polulu.png'], 'second'),
+  newReward('3rd Overall', ['4x RC Drones', 'CoCalc Credits'], ['drone.png'], 'third'),
+];
+
+export const PRIZES = [
+  newReward('Best Solo Hack', ['Wireless Earbuds', '1Password Swag Bag'], ['earbuds.png']),
+  newReward('Best Duo Hack', ['2x $50 Fan-Fan Gift Cards'], ['fanfan.png']),
+  newReward('Best Beginner Hack', ['4x Squishmallows', 'Desmos Swag Bag'], ['squishmallow.png']),
+  newReward('Track: Lost at Sea', ['4x Amazon Echo Pop'], ['echopop.png']),
+  newReward('Track: X Marks the Spot', ['4x Speaker'], ['anker.png']),
+  newReward('Track: All Hands on Deck', ['4x Wireless Charging Desk Lamp'], ['lamp.jpg']),
+  newReward("Track: Captain's Classroom", ['4x Portable Power Bank'], ['powerbank.jpg']),
+];

src/components/PrizeCard/index.tsx

@@ -0,0 +1,62 @@
+'use client';
+import styles from './style.module.scss';
+import RedDiamond from '@/public/graphics/red-diamond.png';
+import BlueDiamond from '@/public/graphics/blue-diamond.png';
+import GreenDiamond from '@/public/graphics/green-diamond.png';
+import Image from 'next/image';
+
+interface PrizeCardProps {
+  variant?: 'first' | 'second' | 'third' | 'default';
+  title: string;
+  descriptions: string[];
+  images: string[];
+}
+
+const PrizeCard = ({ title, descriptions, images, variant = 'default' }: PrizeCardProps) => {
+  let src = undefined;
+  switch (variant) {
+    case 'first':
+      src = BlueDiamond;
+      break;
+    case 'second':
+      src = RedDiamond;
+      break;
+    case 'third':
+      src = GreenDiamond;
+      break;
+  }
+  return (
+    <div className={styles.container}>
+      {src !== undefined ? (
+        <Image src={src} alt={`${variant} place`} className={styles.image} />
+      ) : null}
+      <div className={styles.card}>
+        <div className={styles.header} data-variant={variant}>
+          {title}
+        </div>
+        <div className={styles.body}>
+          <div>
+            {descriptions.map(d => (
+              <div key={d}>{d}</div>
+            ))}
+          </div>
+          <div className={styles.images}>
+            {images.map(d => (
+              <Image
+                key={d}
+                src={`/prizes/${d}`}
+                alt={d}
+                width={0}
+                height={0}
+                sizes="100vw"
+                style={{ width: '100%', height: 'auto' }}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PrizeCard;

src/components/PrizeCard/style.module.scss

@@ -0,0 +1,60 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .image {
+    width: 80%;
+    max-width: 200px;
+    height: auto;
+  }
+
+  .card {
+    border-radius: 0.875rem;
+    overflow: hidden;
+    width: 100%;
+    text-align: center;
+    background-color: #fff;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+
+    .header {
+      background-color: #d6e5f8;
+      font-size: 1.5rem;
+      font-weight: 500;
+      line-height: 2rem;
+      color: #142e52;
+      padding: 0.5rem 3rem;
+
+      &[data-variant='first'] {
+        color: #fff;
+        background-color: #3070c7;
+      }
+      &[data-variant='second'] {
+        color: #fff;
+        background-color: #e35e77;
+      }
+      &[data-variant='third'] {
+        color: #fff;
+        background-color: #4ca98f;
+      }
+    }
+
+    .body {
+      padding: 1rem 1.5rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-size: 1.5rem;
+      line-height: 2rem;
+      flex: 1 1 auto;
+    }
+
+    .images {
+      display: flex;
+      align-items: center;
+      flex: 1 1 auto;
+    }
+  }
+}

src/components/navbar/index.tsx

@@ -20,6 +20,10 @@ const LINKS = [
     name: 'Sponsors',
     href: '/#sponsors',
   },
+  {
+    name: 'Prizes',
+    href: '/prizes',
+  },
   {
     name: 'FAQs',
     href: '/faq',