Add winners to prizes page

src/pages/Prizes/index.tsx

@@ -11,10 +11,12 @@ import HILLS2 from 'assets/prizes/hills2.svg';
 import STARS from 'assets/prizes/stars.svg';
 import MOON from 'assets/prizes/moon.svg';
 import CAR from 'assets/prizes/car.svg';
+import APP_LOGO from 'assets/app_logo.png';
 import NavBar from 'components/NavBar';
 
 import styles from './styles.module.scss';
 import categories from './prizes.json';
+import winners from './winners.json';
 import PrizeIcon from './PrizeIcon';
 
 type Prize = Partial<{
@@ -46,6 +48,22 @@ const Prizes = (): JSX.Element => (
     </div>
 
     <div className={styles.content}>
+      <div className={styles.winners}>
+        <div className={styles.container}>
+          <h2>Congratulations!</h2>
+          <div className={styles.winnerGrid}>
+            {winners.map(({ image, prizeName, teamName, dummy, link }) => (
+              <div className={clsx(styles.winner, dummy && styles.dummy)}>
+                <img className={styles.projectPreview} src={image || APP_LOGO} alt="" />
+                <div className={styles.text}>
+                  <h3 className={styles.prizeName}>{prizeName}</h3>
+                  <a className={styles.team} href={link} target="_blank" rel="noreferrer">{teamName}</a>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
 
       {categories.map(({ title, prizes, lightColor, darkColor, hideTitle }) => (
         <div className={styles.category}>

src/pages/Prizes/prizes.json

@@ -4,9 +4,6 @@
     "lightColor": "#ADD8CD",
     "darkColor": "#2C9C98",
     "prizes": [
-      {
-        "dummy": true
-      },
       {
         "name": "First Place",
         "description": "",

src/pages/Prizes/styles.module.scss

@@ -26,8 +26,8 @@
       top: 110px;
       @media (max-width: 767px) {
         left: auto;
-        right: 0px;
-        top: 80px
+        right: -10px;
+        top: 50px
       }
     }
 
@@ -133,6 +133,9 @@
         top: 600px;
       }
 
+      @media (max-width: 1100px) {
+        top: 500px;
+      }
 
       @media (max-width: 767px) {
         top: 680px;
@@ -153,6 +156,110 @@
       font-size: .7em;
     }
 
+    .winners {
+      background-color: rgba(255, 255, 255, 0.2);
+      padding: 0 15px;
+      box-sizing: border-box;
+      align-self: flex-end;
+      margin-right: 5%;
+      border-radius: 20px;
+      max-width: 50%;
+      margin-top: 90px;
+      margin-bottom: 50px;
+      @media (max-width: 767px) {
+        max-width: 90%;
+        width: 90%;
+        margin-bottom: 25px;
+        margin-top: 100px;
+      }
+
+      .container {
+        padding: 15px 10px;
+        max-height: 600px;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-color: #ADD8CD transparent;
+        scrollbar-width: thin;
+        &::-webkit-scrollbar {
+          width: 10px;
+          height: 10px;
+        }
+        &::-webkit-scrollbar-thumb {
+          border-radius: 10px;
+          border: 5px solid #add8cd;
+        }
+
+        @media (max-width: 767px) {
+          max-height: none;
+        }
+      }
+
+      h2 {
+        color: white;
+        font-weight: 600;
+        text-transform: uppercase;
+        font-size: 1.9em;
+        margin-bottom: 20px;
+        margin-left: 10px;
+        @media (max-width: 767px) {
+          margin-left: 0;
+          margin-top: 25px;
+          margin-bottom: 25px;
+        }
+      }
+
+      .winnerGrid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 25px;
+        margin-bottom: 5px;
+
+        @media (max-width: 1300px) {
+          grid-template-columns: 1fr;
+          margin-bottom: 20px;
+        }
+
+        .winner {
+          display: flex;
+
+          &.dummy {
+            visibility: hidden;
+            @media (max-width: 1300px) {
+              display: none;
+            }
+          }
+
+          .projectPreview {
+            width: 100px;
+            margin-right: 10px;
+            border-radius: 10px;
+            @media (max-width: 767px) {
+              width: 80px;
+            }
+          }
+
+          .text {
+            .prizeName {
+              color: #FBB63B;
+              font-weight: 600;
+              margin: 5px 0;
+              text-transform: uppercase;
+              font-size: 1.25em;
+              line-height: 1.5em;
+            }
+
+            .team {
+              margin: 5px 0;
+              color: white;
+              font-weight: 600;
+              font-size: 1.35em;
+              line-height: 1.5em;
+            }
+          }
+        }
+      }
+    }
+
     .prize {
       flex: 1;
       margin: 0 15px;
@@ -163,6 +270,9 @@
       border-radius: 25px;
       display: flex;
       flex-direction: column;
+      @media (max-width: 767px) {
+        margin: 0;
+      }
 
       &.dummy {
         visibility: hidden;
@@ -233,10 +343,6 @@
       flex: 1;
       width: 90%;
       max-width: 1300px;
-      margin-top: 200px;
-      &:first-child {
-        margin-top: 150px;
-      }
 
       @media (max-width: 767px) {
         margin-top: 0;
@@ -251,6 +357,9 @@
         font-size: 1.875em;
         &.hide {
           visibility: hidden;
+          @media (max-width: 767px) {
+            display: none;
+          }
         }
       }
 

src/pages/Prizes/winners.json

@@ -0,0 +1,47 @@
+[
+  {
+    "image": "/assets/prize_winners/actually_colab.png",
+    "prizeName": "First Place",
+    "teamName": "Actually Colab",
+    "link": "https://devpost.com/software/actually-colab-real-time-collaborative-jupyter-editor"
+  },
+  {
+    "image": "/assets/prize_winners/breadbox.png",
+    "prizeName": "Second Place",
+    "teamName": "Breadbox",
+    "link": "https://devpost.com/software/breadbox-d1tflk"
+  },
+  {
+    "image": "/assets/prize_winners/merry_dining.png",
+    "prizeName": "Third Place",
+    "teamName": "MerryDining",
+    "link": "https://devpost.com/software/merrydining"
+  },
+  {
+    "dummy": true
+  },
+  {
+    "image": "/assets/prize_winners/trackify.png",
+    "prizeName": "CAT’s Choice",
+    "teamName": "Trackify",
+    "link": "https://devpost.com/software/trackify-gsal28"
+  },
+  {
+    "image": "",
+    "prizeName": "Cargill’s Choice: Best Food Related Hack",
+    "teamName": "Foods Carbonation",
+    "link": "https://devpost.com/software/application1"
+  },
+  {
+    "image": "",
+    "prizeName": "Capital One: Best Financial Hack",
+    "teamName": "Crypto Tracker",
+    "link": "https://devpost.com/software/crypto-tracker-qwuk0m"
+  },
+  {
+    "image": "/assets/prize_winners/drift.png",
+    "prizeName": "Staff Pick",
+    "teamName": "drift",
+    "link": "https://devpost.com/software/drift-thf0rj"
+  }
+]