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 }) => (
+
+
+
+
+ ))}
+
+
+
{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