From c5f60311223a19329fabb6070157755bce25692f Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Fri, 29 Mar 2024 14:10:35 -0700 Subject: [PATCH] feat: des24 rules section (#68) --- .../Designathon24/Designathon24.js | 4 +- .../Designathon24/assets/data}/rules.json | 0 .../assets/graphics/rules/cream.svg | 3 + .../assets/graphics/rules/cream_hot_pink.svg | 4 + .../assets/graphics/rules/hearts.svg | 30 +++++ .../assets/graphics/rules/peach_cream.svg | 4 + .../assets/graphics/rules/pink.svg | 3 + .../components/Rules/Rules.module.scss | 107 +++++++++++++++++- .../Designathon24/components/Rules/index.jsx | 68 +++++++---- 9 files changed, 193 insertions(+), 30 deletions(-) rename src/{assets/data/designathon/2024 => app/pages/Designathons/Designathon24/assets/data}/rules.json (100%) create mode 100644 src/app/pages/Designathons/Designathon24/assets/graphics/rules/cream.svg create mode 100644 src/app/pages/Designathons/Designathon24/assets/graphics/rules/cream_hot_pink.svg create mode 100644 src/app/pages/Designathons/Designathon24/assets/graphics/rules/hearts.svg create mode 100644 src/app/pages/Designathons/Designathon24/assets/graphics/rules/peach_cream.svg create mode 100644 src/app/pages/Designathons/Designathon24/assets/graphics/rules/pink.svg diff --git a/src/app/pages/Designathons/Designathon24/Designathon24.js b/src/app/pages/Designathons/Designathon24/Designathon24.js index acf4ed1d..0a11b5cc 100644 --- a/src/app/pages/Designathons/Designathon24/Designathon24.js +++ b/src/app/pages/Designathons/Designathon24/Designathon24.js @@ -7,7 +7,6 @@ import JUDGES_2024 from "assets/data/designathon/2024/judges.json"; import KEYNOTE_2024 from "assets/data/designathon/2024/keynote.json"; import PRIZES_2024 from "assets/data/designathon/2024/prizes.json"; import WORKSHOP_HOSTS_2024 from "assets/data/designathon/2024/workshop-hosts.json"; -import RULES_2024 from "assets/data/designathon/2024/rules.json"; import cn from "./Designathon24.module.scss"; import FOF from "./assets/FOF.png"; import notion from "./assets/notion.png"; @@ -50,7 +49,6 @@ const Designathon24 = () => ( -
@@ -74,7 +72,7 @@ const Designathon24 = () => (
- +
diff --git a/src/assets/data/designathon/2024/rules.json b/src/app/pages/Designathons/Designathon24/assets/data/rules.json similarity index 100% rename from src/assets/data/designathon/2024/rules.json rename to src/app/pages/Designathons/Designathon24/assets/data/rules.json diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/rules/cream.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/rules/cream.svg new file mode 100644 index 00000000..46232d1b --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/assets/graphics/rules/cream.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/rules/cream_hot_pink.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/rules/cream_hot_pink.svg new file mode 100644 index 00000000..8fa6083b --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/assets/graphics/rules/cream_hot_pink.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/rules/hearts.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/rules/hearts.svg new file mode 100644 index 00000000..2dbf4528 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/assets/graphics/rules/hearts.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/rules/peach_cream.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/rules/peach_cream.svg new file mode 100644 index 00000000..763f1c4e --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/assets/graphics/rules/peach_cream.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/rules/pink.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/rules/pink.svg new file mode 100644 index 00000000..8124c889 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/assets/graphics/rules/pink.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/pages/Designathons/Designathon24/components/Rules/Rules.module.scss b/src/app/pages/Designathons/Designathon24/components/Rules/Rules.module.scss index a13c5862..4bc06278 100644 --- a/src/app/pages/Designathons/Designathon24/components/Rules/Rules.module.scss +++ b/src/app/pages/Designathons/Designathon24/components/Rules/Rules.module.scss @@ -1,9 +1,106 @@ .container { - background-color: var(--silver); + position: relative; + background-color: var(--des24-black); - & h2 { - padding-bottom: 20px; - font-size: 3em; - font-weight: bold; + padding: 5rem 2rem; + font-size: 1em; + + .heading { + color: var(--des24-hot-pink); + font-size: 3rem; + font-weight: 700; + margin-bottom: 4rem; + + @media screen and (min-width: 640px) { + font-size: 5rem; + } + + @media screen and (min-width: 1280px) { + font-size: 6rem; + } + } + + .rules { + height: 100%; + min-height: 100%; + + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: 1.5rem; + + @media screen and (min-width: 768px) { + grid-template-columns: repeat(2, 1fr); + gap: 3rem; + } + + @media screen and (min-width: 1280px) { + grid-template-columns: repeat(3, 1fr); + gap: 5rem; + } + + .rule { + width: 100%; + max-width: 400px; + aspect-ratio: 1; + + position: relative; + display: flex; + justify-content: center; + margin: auto; + + .text { + color: var(--des24-black); + width: 75%; + margin: auto 10%; + + font-size: 0.75rem; + + display: flex; + flex-direction: column; + gap: 0.5rem; + + font-size: 1rem; + + @media screen and (min-width: 1280px) { + font-size: 1.5rem; + } + + .number { + font-size: 1.5rem; + text-align: center; + + @media screen and (min-width: 1024px) { + font-size: 2rem; + } + } + } + + .bg { + position: absolute; + z-index: -1; + + height: 100%; + + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + } + + @media screen and (min-width: 768px) { + padding: 6rem 5rem; + } +} + +.hearts { + position: absolute; + width: 25%; + + top: 2.5%; + right: 2.5%; + + @media screen and (min-width: 768px) { + width: 15%; } } diff --git a/src/app/pages/Designathons/Designathon24/components/Rules/index.jsx b/src/app/pages/Designathons/Designathon24/components/Rules/index.jsx index 37bf73d7..f784c788 100644 --- a/src/app/pages/Designathons/Designathon24/components/Rules/index.jsx +++ b/src/app/pages/Designathons/Designathon24/components/Rules/index.jsx @@ -1,28 +1,52 @@ -import { Text } from "app/components"; -import { Section } from "app/Symbols"; import cn from "./Rules.module.scss"; +import clsx from "clsx"; -const Rules = ({ rules }) => { +import RULES from "../../assets/data/rules.json"; + +import cream_hot_pink from "../../assets/graphics/rules/cream_hot_pink.svg"; +import cream from "../../assets/graphics/rules/cream.svg"; +import peach_cream from "../../assets/graphics/rules/peach_cream.svg"; +import pink from "../../assets/graphics/rules/pink.svg"; +import hearts from "../../assets/graphics/rules/hearts.svg"; + +const BACKGROUND_MAP = { + 0: cream_hot_pink, + 1: peach_cream, + 2: pink, + 3: pink, + 4: cream, + 5: peach_cream, + 6: peach_cream, +}; + +const Rules = () => { return ( -
-

Rules

- {rules.map((rule, i) => ( -
- - {i + 1} - - {rule} -
- ))} -
+
+

Rules

+ +
+ {RULES.map((rule, index) => ( +
+
+ {index + 1}. + {rule} +
+ + +
+ ))} +
+ + +
); };