diff --git a/public/assets/prize_winners/actually_colab.png b/public/assets/prize_winners/actually_colab.png new file mode 100644 index 0000000..a62488a Binary files /dev/null and b/public/assets/prize_winners/actually_colab.png differ diff --git a/public/assets/prize_winners/breadbox.png b/public/assets/prize_winners/breadbox.png new file mode 100644 index 0000000..9ed84c1 Binary files /dev/null and b/public/assets/prize_winners/breadbox.png differ diff --git a/public/assets/prize_winners/drift.png b/public/assets/prize_winners/drift.png new file mode 100644 index 0000000..a2265f7 Binary files /dev/null and b/public/assets/prize_winners/drift.png differ diff --git a/public/assets/prize_winners/merry_dining.png b/public/assets/prize_winners/merry_dining.png new file mode 100644 index 0000000..d3547fa Binary files /dev/null and b/public/assets/prize_winners/merry_dining.png differ diff --git a/public/assets/prize_winners/trackify.png b/public/assets/prize_winners/trackify.png new file mode 100644 index 0000000..29428c0 Binary files /dev/null and b/public/assets/prize_winners/trackify.png differ diff --git a/src/assets/app_logo.png b/src/assets/app_logo.png new file mode 100644 index 0000000..ae7d818 Binary files /dev/null and b/src/assets/app_logo.png differ diff --git a/src/pages/Prizes/index.tsx b/src/pages/Prizes/index.tsx index a2dae30..3ceaef9 100644 --- a/src/pages/Prizes/index.tsx +++ b/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 => (
+
+
+

Congratulations!

+
+ {winners.map(({ image, prizeName, teamName, dummy, link }) => ( +
+ +
+

{prizeName}

+ {teamName} +
+
+ ))} +
+
+
{categories.map(({ title, prizes, lightColor, darkColor, hideTitle }) => (
diff --git a/src/pages/Prizes/prizes.json b/src/pages/Prizes/prizes.json index 60e0069..7fa6d26 100644 --- a/src/pages/Prizes/prizes.json +++ b/src/pages/Prizes/prizes.json @@ -4,9 +4,6 @@ "lightColor": "#ADD8CD", "darkColor": "#2C9C98", "prizes": [ - { - "dummy": true - }, { "name": "First Place", "description": "", diff --git a/src/pages/Prizes/styles.module.scss b/src/pages/Prizes/styles.module.scss index 92a111b..3145922 100644 --- a/src/pages/Prizes/styles.module.scss +++ b/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; + } } } diff --git a/src/pages/Prizes/winners.json b/src/pages/Prizes/winners.json new file mode 100644 index 0000000..5a8bae7 --- /dev/null +++ b/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" + } +] \ No newline at end of file