From ef31fc7123c798070070dd54963efb425b10529d Mon Sep 17 00:00:00 2001 From: AmirAgassi Date: Sun, 10 Mar 2024 22:55:58 -0400 Subject: [PATCH 1/3] Update Initiative Card to Fit Figma Design --- src/assets/down_arrow.svg | 9 + src/assets/index.tsx | 4 + src/assets/plant.svg | 63 +++ .../InitiativesSection/initiatives/PODS.tsx | 367 +++++++++--------- .../initiatives/ReviewSessions.tsx | 209 +++++----- .../InitiativesSection/initiatives/styles.ts | 337 +++++++++++----- 6 files changed, 602 insertions(+), 387 deletions(-) create mode 100644 src/assets/down_arrow.svg create mode 100644 src/assets/plant.svg diff --git a/src/assets/down_arrow.svg b/src/assets/down_arrow.svg new file mode 100644 index 0000000..ef33a23 --- /dev/null +++ b/src/assets/down_arrow.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/index.tsx b/src/assets/index.tsx index a930082..acc5171 100644 --- a/src/assets/index.tsx +++ b/src/assets/index.tsx @@ -6,6 +6,8 @@ import HHPartnerLogo from "./hh_partner_logo.png"; import Dug from "./dug.svg"; import Heart from "./heart.svg"; import FratBoiDug from "./frat_boi_dug.svg"; +import DownArrowIcon from "./down_arrow.svg" +import Plant from "./plant.svg" export { IconLogo, @@ -16,4 +18,6 @@ export { Dug, Heart, FratBoiDug, + DownArrowIcon, + Plant }; diff --git a/src/assets/plant.svg b/src/assets/plant.svg new file mode 100644 index 0000000..873f123 --- /dev/null +++ b/src/assets/plant.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/InitiativesSection/initiatives/PODS.tsx b/src/components/InitiativesSection/initiatives/PODS.tsx index 8588a30..9fd95df 100644 --- a/src/components/InitiativesSection/initiatives/PODS.tsx +++ b/src/components/InitiativesSection/initiatives/PODS.tsx @@ -1,201 +1,202 @@ import { useEffect, useState } from "react"; import { doc, getDoc } from "firebase/firestore"; import { useDisclosure } from "@mantine/hooks"; -import { Title, Text, Box, Flex, Button, Modal } from "@mantine/core"; -import { PodsLogo, IconLogo, C3PartnerLogo, HHPartnerLogo } from "@/assets"; +import { Title, Text, Box, Flex, Button, Collapse } from "@mantine/core"; +import { + PodsLogo, + IconLogo, + C3PartnerLogo, + HHPartnerLogo, + DownArrowIcon, + Plant, +} from "@/assets"; import { useCommonStyles } from "./styles"; import dayjs from "@utils/day"; import { store } from "@services/firebase"; const PODS = () => { - const { classes } = useCommonStyles(); - const [opened, { open, close }] = useDisclosure(false); - const [data, setData] = useState({ - applicable: false, - openDate: "TBD", - description: "", - typeform: "", - }); + const { classes } = useCommonStyles(); - const getData = async () => { - try { - const docSnap = await getDoc(doc(store, "initiatives", "pods")); - if (docSnap.exists()) { - const docData = docSnap.data(); - const date = docData.openDate.toDate(); - setData({ - applicable: docData.applicable, - openDate: dayjs(date).format("MMMM Do, YYYY"), - description: docData.description, - typeform: docData.typeform, - }); - } - } catch (error) { - console.error(error); - } - }; + const [opened, { toggle }] = useDisclosure(false); + const [data, setData] = useState({ + applicable: false, + openDate: "TBD", + description: "", + typeform: "", + }); - useEffect(() => { - getData(); - }, []); + const getData = async () => { + try { + const docSnap = await getDoc(doc(store, "initiatives", "pods")); + if (docSnap.exists()) { + const docData = docSnap.data(); + const date = docData.openDate.toDate(); + setData({ + applicable: docData.applicable, + openDate: dayjs(date).format("MMMM Do, YYYY"), + description: docData.description, + typeform: docData.typeform, + }); + } + } catch (error) { + console.error(error); + } + }; - return ( - ({ - boxShadow: theme.shadows.lg, - })} - > - - - - LCS Logo - HawkHacks Logo - C Cubed Logo - - LCS PODS - - ({ - display: "none", + useEffect(() => { + getData(); + }, []); - [theme.fn.smallerThan("md")]: { - display: "block", - }, - })} - > - PODS Logo - - - - ({ - gap: 32, - [theme.fn.smallerThan("sm")]: { - gap: 0, - }, - })} - direction="row-reverse" - > - - - {data.description} - - - - PODS Logo - - - {!data.applicable && ( - - {`Applications open on ${data.openDate}`} - - )} - - - opens a modal with more description about PODS - - - {data.applicable && ( - - - opens form to apply to PODS - - - - )} - + return ( + + + + + LCS Logo + HawkHacks Logo + C Cubed Logo + + + LCS PODS + + + + PODS Logo - + + + + - -

- PODS has 5 major development phases -{" "} - - Brainstorming, Design, Prototyping, MVP - {" "} - and Launch. -

-

- PODS teams are curated based on skill level, based on - your application's test. Our goal is for{" "} - everyone to learn - not - just one hardcarry. -

-

- Each POD will work on one project over the course of the - next three months. These projects can be{" "} - websites - , video games,  - machine learning models - , or whatever else the team is interested in! -

- - + {data.description} + + + + PODS Logo + + + + {!opened ? ( + <> + + opens a dropdown with more description about PODS + + + + ) : ( + + + + )} + + + + + + + +

+ PODS has 5 major development phases -{" "} + + Brainstorming, Design, Prototyping, MVP + {" "} + and Launch. +

+

+ PODS teams are curated based on skill level, based on your + application's test. Our goal is for{" "} + everyone to learn - not + just one hardcarry. +

+

+ Each POD will work on one project over the course of the next + three months. These projects can be{" "} + websites,  + video games,  + machine learning models + , or whatever else the team is interested in! +

+ + + + Plant + + + + + + + - ); + + + ); }; export default PODS; diff --git a/src/components/InitiativesSection/initiatives/ReviewSessions.tsx b/src/components/InitiativesSection/initiatives/ReviewSessions.tsx index 84bb52d..bd57977 100644 --- a/src/components/InitiativesSection/initiatives/ReviewSessions.tsx +++ b/src/components/InitiativesSection/initiatives/ReviewSessions.tsx @@ -1,117 +1,116 @@ import { Title, Text, Box, Flex, Button } from "@mantine/core"; import { FaYoutube, FaTwitch } from "react-icons/fa"; import { IconLogo } from "@/assets"; -import { Link } from "react-scroll"; import { useCommonStyles } from "./styles"; -import { navbarHeight } from "../../Navbar/Navbar"; const ReviewSessions = () => { - const { classes } = useCommonStyles(); - const { classes: commonClasses } = useCommonStyles(); + const { classes } = useCommonStyles(); - return ( - ({ boxShadow: theme.shadows.lg })}> - - - ({ - [theme.fn.smallerThan("xs")]: { - gridColumn: "span 1", - }, - })} - > - LCS Logo - - - Review Sessions - - ({ - height: "100%", - [theme.fn.smallerThan("xs")]: { - gridColumn: "span 1", - }, - })} - > - ({ - display: "none", - - [theme.fn.smallerThan("md")]: { - display: "block", - }, - })} - > - 📝 - - - - - 📝 - - - Review Sessions are events hosted in-person and/or - online by LCS which offer fun and interactive way to - review course content through games of Kahoot and - slide shows. Keep an eye on our{" "} - - upcoming events - {" "} - to not miss out on any Review Session! - - - - - Feel free to take a look at previous Review - Sessions and follow us on Twitch for live - streams! - - - - - - + return ( + + + + + LCS Logo + + Review Sessions + + + 📝 + - ); + + 📝 + + + + Review Sessions are events hosted in-person and/or online by LCS + which offer fun and interactive way to review course content + through games of Kahoot and slide shows. Keep an eye on our{" "} + { + e.stopPropagation(); + const eventsSection = document.getElementById("Events"); + if (eventsSection) { + eventsSection.scrollIntoView({ behavior: "smooth" }); + } + }} + > + upcoming events + {" "} + to not miss out on any Review Session! + + + + + + Feel free to take a look at previous Review Sessions and + follow us on Twitch for live streams! + + + + + + + + + + + + ); }; export default ReviewSessions; diff --git a/src/components/InitiativesSection/initiatives/styles.ts b/src/components/InitiativesSection/initiatives/styles.ts index 2364ac8..ec244c6 100644 --- a/src/components/InitiativesSection/initiatives/styles.ts +++ b/src/components/InitiativesSection/initiatives/styles.ts @@ -1,140 +1,279 @@ import { createStyles, MantineTheme } from "@mantine/core"; export const useCommonStyles = createStyles((theme: MantineTheme) => ({ - lcsLogo: { - width: "3rem", + lcsLogo: { + width: "4rem", + marginRight: "0.3rem", + }, + + hhLogo: { + width: "3rem", + marginRight: "1rem", + }, + + c3Logo: { + width: "3rem", + }, + + partnerLogoContainer: { + position: "absolute", + left: 0, + top: 0, + + [theme.fn.smallerThan("md")]: { + position: "initial", }, - hhLogo: { - width: "2rem", - marginLeft: "-0.7rem", + [theme.fn.smallerThan("xs")]: { + gridColumn: "span 2", }, + }, - c3Logo: { - width: "2rem", + title: { + fontSize: "3rem", + color: "#E7EBF5", + textAlign: "center", + marginBottom: "2rem", + [theme.fn.smallerThan("md")]: { + fontSize: "2.5rem", }, + [theme.fn.smallerThan("sm")]: { + gridColumn: "span 2", + gridRow: 1, + fontSize: "2rem", + }, + }, + + outerBox: { + boxShadow: theme.shadows.lg, + overflow: "hidden", + padding: "2rem", + borderRadius: "19px", + backgroundColor: "#2C3844", + width: "100%", + border: "2px solid #12181B", - partnerLogoContainer: { - position: "absolute", - left: 0, - top: 0, + [theme.fn.smallerThan("sm")]: { + padding: "1rem", + }, + }, - [theme.fn.smallerThan("md")]: { - position: "initial", - }, + innerBox: { + marginBottom: "1rem", + position: "relative", - [theme.fn.smallerThan("xs")]: { - gridColumn: "span 2", - }, + [theme.fn.smallerThan("md")]: { + display: "grid", + gridTemplateColumns: "auto 1fr auto", }, - title: { - fontSize: "3rem", - color: "#E7EBF5", - textAlign: "center", - [theme.fn.smallerThan("md")]: { - fontSize: "2.5rem", - }, - [theme.fn.smallerThan("sm")]: { - gridColumn: "span 2", - gridRow: 1, - fontSize: "2rem", - }, + [theme.fn.smallerThan("sm")]: { + gridTemplateColumns: "1fr 1fr", + gap: "0.5rem", }, + }, - outerBox: { - padding: "2rem", - borderRadius: "19px", - backgroundColor: "#2C3844", - width: "100%", - border: "2px solid #6cb3ff", + actionBox: { + justifyContent: "flex-end", + paddingRight: "37%", + marginTop: "2rem", + gap: theme.spacing.md, - [theme.fn.smallerThan("sm")]: { - padding: "1rem", - }, + [theme.fn.smallerThan(400)]: { + flexDirection: "column", + alignItems: "center", }, + }, - innerBox: { - marginBottom: "1rem", - position: "relative", + description: { + fontSize: "1.5rem", + color: "#E7EBF5", + textAlign: "right", - [theme.fn.smallerThan("md")]: { - display: "grid", - gridTemplateColumns: "auto 1fr auto", - }, - - [theme.fn.smallerThan("sm")]: { - gridTemplateColumns: "1fr 1fr", - gap: "0.5rem", - }, + [theme.fn.smallerThan("sm")]: { + fontSize: "1rem", }, + }, - actionBtn: { - color: "#1A1B1E", + descriptionContainer: { + gap: 32, + flexDirection: "row", + justifyContent: "flex-end", + [theme.fn.smallerThan("sm")]: { + gap: 0, + flexDirection: "column", }, + }, - actionBox: { - justifyContent: "center", + bodyLogo: { + maxWidth: "34rem", + margin: "auto", + display: "block", - [theme.fn.smallerThan(400)]: { - flexDirection: "column", - alignItems: "center", - }, + [theme.fn.smallerThan("md")]: { + display: "none", }, + }, - description: { - fontSize: "1.5rem", - color: "#E7EBF5", - textAlign: "left", + showMoreButton: { + color: "#E7EBF5", + width: "fit-content", + }, - [theme.fn.smallerThan("sm")]: { - fontSize: "1rem", - }, + headerLogoBox: { + height: "10%", + [theme.fn.smallerThan("xs")]: { + gridColumn: "span 2", + }, + }, + emojiLogo: { + fontSize: "18rem", + marginRight: "2rem", + [theme.fn.smallerThan("md")]: { + display: "none", }, + }, - bodyLogo: { - maxWidth: "23rem", - margin: "auto", - display: "block", + buttonContainer: { + display: "flex", + justifyContent: "flex-end", + position: "relative", + zIndex: 2, - [theme.fn.smallerThan("md")]: { - display: "none", - }, + "& > button:not(:last-child)": { + marginRight: theme.spacing.md, }, + }, - headerLogoBox: { - height: "100%", - [theme.fn.smallerThan("xs")]: { - gridColumn: "span 2", - }, + emojiHeaderLogo: { + fontSize: "4rem", + [theme.fn.smallerThan("md")]: { + fontSize: "3rem", }, - - headerLogo: { - maxHeight: "2rem", + }, + headerLogoWrapper: { + display: "none", + [theme.fn.smallerThan("md")]: { + display: "block", }, + }, - smallText: { - fontSize: "1rem", - textAlign: "center", - color: "white", - marginTop: "1rem", - }, + headerLogo: { + maxHeight: "2rem", + }, - emojiLogo: { - fontSize: "300px", - [theme.fn.smallerThan("md")]: { - display: "none", - }, - }, + hiddenBox: { + width: "fit-content", + height: "fit-content", + visibility: "hidden", + }, + + collapseContent: { + padding: "2rem", + display: "flex", + flexDirection: "column", + color: "white", + background: "linear-gradient(to right, #4F8FCC, #6ABFC1)", + borderBottomLeftRadius: theme.radius.lg, + borderBottomRightRadius: theme.radius.lg, + marginTop: "-2px", + marginLeft: "-2px", + marginRight: "-2px", + marginBottom: "-2px", + overflow: "hidden", + }, - emojiHeaderLogo: { - fontSize: "2rem", + collapseWrapper: { + "& .mantine-Collapse-root": { + margin: 0, + padding: 0, + border: "none", + borderRadius: "0", }, + }, + podsContainer: { + boxShadow: theme.shadows.lg, + overflow: "hidden", + position: "relative", + borderRadius: theme.radius.lg, + "&:before": { + content: '""', + position: "absolute", + top: 0, + left: 0, + width: "100%", + height: "100%", + backgroundColor: "rgba(0, 0, 0, 0.4)", + opacity: 1, + transition: "opacity 0.3s ease-in-out", + zIndex: 1, + }, + "&:hover:before": { + opacity: 0, + }, + "& button": { + position: "relative", + zIndex: 2, + opacity: 0.6, + transition: "opacity 0.3s ease-in-out", + }, + "&:hover button": { + opacity: 1, + }, + "&.overlay-removed:before": { + display: "none", + }, + }, + link: { + position: "relative", + zIndex: 2, + cursor: "pointer", + color: "rgba(98,193,244, 0.5)", + "&:hover": { + color: "#62c1f4", + }, + }, - link: { - textTransform: "capitalize", - cursor: "pointer", - textDecoration: "underline", - color: theme.colors.blue[2], + collapseContainer: { + gap: 32, + flexDirection: "row", + justifyContent: "flex-end", + [theme.fn.smallerThan("sm")]: { + gap: 0, + flexDirection: "column", }, + }, + + collapseText: { + textAlign: "right", + fontSize: "1.35rem", + lineHeight: "2", + marginBottom: "1rem", + marginLeft: "0rem", + paddingRight: "5rem", + }, + + collapseParagraph: { + marginBottom: "2rem", + }, + + bold: { + fontWeight: "bold", + }, + + collapseLogo: { + maxWidth: "34rem", + paddingBottom: "4rem", + paddingRight: "4rem", + paddingLeft: "3rem", + }, + + collapseBtnContainer: { + width: "auto", + paddingRight: "37%", + }, + + arrowUp: { + transform: "rotate(180deg)", + }, })); From f9d9cd107d5609ae03a86198a5b8c026254e0236 Mon Sep 17 00:00:00 2001 From: AmirAgassi Date: Mon, 11 Mar 2024 17:24:49 -0400 Subject: [PATCH 2/3] Escape apostrophe in PODS.tsx to fix ESLint error --- src/components/InitiativesSection/initiatives/PODS.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/InitiativesSection/initiatives/PODS.tsx b/src/components/InitiativesSection/initiatives/PODS.tsx index 9fd95df..5ce372f 100644 --- a/src/components/InitiativesSection/initiatives/PODS.tsx +++ b/src/components/InitiativesSection/initiatives/PODS.tsx @@ -155,7 +155,7 @@ const PODS = () => {

PODS teams are curated based on skill level, based on your - application's test. Our goal is for{" "} + application's test. Our goal is for{" "} everyone to learn - not just one hardcarry.

From 369af850aa1e276ac24725600a8f602cfa2ed5e6 Mon Sep 17 00:00:00 2001 From: AmirAgassi Date: Mon, 11 Mar 2024 17:28:37 -0400 Subject: [PATCH 3/3] Apply ESLint auto-fixes --- src/assets/index.tsx | 4 +- .../InitiativesSection/initiatives/PODS.tsx | 336 ++++++------- .../initiatives/ReviewSessions.tsx | 192 +++---- .../InitiativesSection/initiatives/styles.ts | 474 +++++++++--------- 4 files changed, 503 insertions(+), 503 deletions(-) diff --git a/src/assets/index.tsx b/src/assets/index.tsx index acc5171..35156d4 100644 --- a/src/assets/index.tsx +++ b/src/assets/index.tsx @@ -6,8 +6,8 @@ import HHPartnerLogo from "./hh_partner_logo.png"; import Dug from "./dug.svg"; import Heart from "./heart.svg"; import FratBoiDug from "./frat_boi_dug.svg"; -import DownArrowIcon from "./down_arrow.svg" -import Plant from "./plant.svg" +import DownArrowIcon from "./down_arrow.svg"; +import Plant from "./plant.svg"; export { IconLogo, diff --git a/src/components/InitiativesSection/initiatives/PODS.tsx b/src/components/InitiativesSection/initiatives/PODS.tsx index 5ce372f..ce0a4c9 100644 --- a/src/components/InitiativesSection/initiatives/PODS.tsx +++ b/src/components/InitiativesSection/initiatives/PODS.tsx @@ -3,200 +3,200 @@ import { doc, getDoc } from "firebase/firestore"; import { useDisclosure } from "@mantine/hooks"; import { Title, Text, Box, Flex, Button, Collapse } from "@mantine/core"; import { - PodsLogo, - IconLogo, - C3PartnerLogo, - HHPartnerLogo, - DownArrowIcon, - Plant, + PodsLogo, + IconLogo, + C3PartnerLogo, + HHPartnerLogo, + DownArrowIcon, + Plant, } from "@/assets"; import { useCommonStyles } from "./styles"; import dayjs from "@utils/day"; import { store } from "@services/firebase"; const PODS = () => { - const { classes } = useCommonStyles(); + const { classes } = useCommonStyles(); - const [opened, { toggle }] = useDisclosure(false); - const [data, setData] = useState({ - applicable: false, - openDate: "TBD", - description: "", - typeform: "", - }); + const [opened, { toggle }] = useDisclosure(false); + const [data, setData] = useState({ + applicable: false, + openDate: "TBD", + description: "", + typeform: "", + }); - const getData = async () => { - try { - const docSnap = await getDoc(doc(store, "initiatives", "pods")); - if (docSnap.exists()) { - const docData = docSnap.data(); - const date = docData.openDate.toDate(); - setData({ - applicable: docData.applicable, - openDate: dayjs(date).format("MMMM Do, YYYY"), - description: docData.description, - typeform: docData.typeform, - }); - } - } catch (error) { - console.error(error); - } - }; + const getData = async () => { + try { + const docSnap = await getDoc(doc(store, "initiatives", "pods")); + if (docSnap.exists()) { + const docData = docSnap.data(); + const date = docData.openDate.toDate(); + setData({ + applicable: docData.applicable, + openDate: dayjs(date).format("MMMM Do, YYYY"), + description: docData.description, + typeform: docData.typeform, + }); + } + } catch (error) { + console.error(error); + } + }; - useEffect(() => { - getData(); - }, []); + useEffect(() => { + getData(); + }, []); - return ( - - - - - LCS Logo - HawkHacks Logo - C Cubed Logo - - - LCS PODS - - - - PODS Logo - - - - - - + - {data.description} - - - - PODS Logo - - - - {!opened ? ( - <> - + + + LCS Logo + HawkHacks Logo + C Cubed Logo + + + LCS PODS + + + + PODS Logo + + + + + + + {data.description} + + + + PODS Logo + + + + {!opened ? ( + <> + opens a dropdown with more description about PODS - - - - ) : ( - - + + ) : ( + + + + + )} + - )} - - - - - - - -

+ + + + + +

PODS has 5 major development phases -{" "} - + Brainstorming, Design, Prototyping, MVP - {" "} + {" "} and Launch. -

-

+

+

PODS teams are curated based on skill level, based on your application's test. Our goal is for{" "} - everyone to learn - not + everyone to learn - not just one hardcarry. -

-

+

+

Each POD will work on one project over the course of the next three months. These projects can be{" "} - websites,  - video games,  - machine learning models + websites,  + video games,  + machine learning models , or whatever else the team is interested in! -

- - - - Plant - - - - - - - + + + + + - - - ); + ); }; export default PODS; diff --git a/src/components/InitiativesSection/initiatives/ReviewSessions.tsx b/src/components/InitiativesSection/initiatives/ReviewSessions.tsx index bd57977..74601fb 100644 --- a/src/components/InitiativesSection/initiatives/ReviewSessions.tsx +++ b/src/components/InitiativesSection/initiatives/ReviewSessions.tsx @@ -4,113 +4,113 @@ import { IconLogo } from "@/assets"; import { useCommonStyles } from "./styles"; const ReviewSessions = () => { - const { classes } = useCommonStyles(); + const { classes } = useCommonStyles(); - return ( - - - - - LCS Logo - - Review Sessions - - - 📝 - - - - - 📝 - - - + return ( + + + + + LCS Logo + + Review Sessions + + + 📝 + + + + + 📝 + + + Review Sessions are events hosted in-person and/or online by LCS which offer fun and interactive way to review course content through games of Kahoot and slide shows. Keep an eye on our{" "} - { - e.stopPropagation(); - const eventsSection = document.getElementById("Events"); - if (eventsSection) { - eventsSection.scrollIntoView({ behavior: "smooth" }); - } - }} - > + { + e.stopPropagation(); + const eventsSection = document.getElementById("Events"); + if (eventsSection) { + eventsSection.scrollIntoView({ behavior: "smooth" }); + } + }} + > upcoming events - {" "} + {" "} to not miss out on any Review Session! - - - - - + + + + + Feel free to take a look at previous Review Sessions and follow us on Twitch for live streams! - - - - - + - + + + + + - - - - - ); + + ); }; export default ReviewSessions; diff --git a/src/components/InitiativesSection/initiatives/styles.ts b/src/components/InitiativesSection/initiatives/styles.ts index ec244c6..d03f0a2 100644 --- a/src/components/InitiativesSection/initiatives/styles.ts +++ b/src/components/InitiativesSection/initiatives/styles.ts @@ -1,279 +1,279 @@ import { createStyles, MantineTheme } from "@mantine/core"; export const useCommonStyles = createStyles((theme: MantineTheme) => ({ - lcsLogo: { - width: "4rem", - marginRight: "0.3rem", - }, - - hhLogo: { - width: "3rem", - marginRight: "1rem", - }, - - c3Logo: { - width: "3rem", - }, - - partnerLogoContainer: { - position: "absolute", - left: 0, - top: 0, - - [theme.fn.smallerThan("md")]: { - position: "initial", + lcsLogo: { + width: "4rem", + marginRight: "0.3rem", }, - [theme.fn.smallerThan("xs")]: { - gridColumn: "span 2", + hhLogo: { + width: "3rem", + marginRight: "1rem", }, - }, - - title: { - fontSize: "3rem", - color: "#E7EBF5", - textAlign: "center", - marginBottom: "2rem", - [theme.fn.smallerThan("md")]: { - fontSize: "2.5rem", - }, - [theme.fn.smallerThan("sm")]: { - gridColumn: "span 2", - gridRow: 1, - fontSize: "2rem", + + c3Logo: { + width: "3rem", }, - }, - - outerBox: { - boxShadow: theme.shadows.lg, - overflow: "hidden", - padding: "2rem", - borderRadius: "19px", - backgroundColor: "#2C3844", - width: "100%", - border: "2px solid #12181B", - - [theme.fn.smallerThan("sm")]: { - padding: "1rem", + + partnerLogoContainer: { + position: "absolute", + left: 0, + top: 0, + + [theme.fn.smallerThan("md")]: { + position: "initial", + }, + + [theme.fn.smallerThan("xs")]: { + gridColumn: "span 2", + }, }, - }, - innerBox: { - marginBottom: "1rem", - position: "relative", + title: { + fontSize: "3rem", + color: "#E7EBF5", + textAlign: "center", + marginBottom: "2rem", + [theme.fn.smallerThan("md")]: { + fontSize: "2.5rem", + }, + [theme.fn.smallerThan("sm")]: { + gridColumn: "span 2", + gridRow: 1, + fontSize: "2rem", + }, + }, - [theme.fn.smallerThan("md")]: { - display: "grid", - gridTemplateColumns: "auto 1fr auto", + outerBox: { + boxShadow: theme.shadows.lg, + overflow: "hidden", + padding: "2rem", + borderRadius: "19px", + backgroundColor: "#2C3844", + width: "100%", + border: "2px solid #12181B", + + [theme.fn.smallerThan("sm")]: { + padding: "1rem", + }, }, - [theme.fn.smallerThan("sm")]: { - gridTemplateColumns: "1fr 1fr", - gap: "0.5rem", + innerBox: { + marginBottom: "1rem", + position: "relative", + + [theme.fn.smallerThan("md")]: { + display: "grid", + gridTemplateColumns: "auto 1fr auto", + }, + + [theme.fn.smallerThan("sm")]: { + gridTemplateColumns: "1fr 1fr", + gap: "0.5rem", + }, }, - }, - actionBox: { - justifyContent: "flex-end", - paddingRight: "37%", - marginTop: "2rem", - gap: theme.spacing.md, + actionBox: { + justifyContent: "flex-end", + paddingRight: "37%", + marginTop: "2rem", + gap: theme.spacing.md, - [theme.fn.smallerThan(400)]: { - flexDirection: "column", - alignItems: "center", + [theme.fn.smallerThan(400)]: { + flexDirection: "column", + alignItems: "center", + }, }, - }, - description: { - fontSize: "1.5rem", - color: "#E7EBF5", - textAlign: "right", + description: { + fontSize: "1.5rem", + color: "#E7EBF5", + textAlign: "right", + + [theme.fn.smallerThan("sm")]: { + fontSize: "1rem", + }, + }, - [theme.fn.smallerThan("sm")]: { - fontSize: "1rem", + descriptionContainer: { + gap: 32, + flexDirection: "row", + justifyContent: "flex-end", + [theme.fn.smallerThan("sm")]: { + gap: 0, + flexDirection: "column", + }, }, - }, - - descriptionContainer: { - gap: 32, - flexDirection: "row", - justifyContent: "flex-end", - [theme.fn.smallerThan("sm")]: { - gap: 0, - flexDirection: "column", + + bodyLogo: { + maxWidth: "34rem", + margin: "auto", + display: "block", + + [theme.fn.smallerThan("md")]: { + display: "none", + }, }, - }, - bodyLogo: { - maxWidth: "34rem", - margin: "auto", - display: "block", + showMoreButton: { + color: "#E7EBF5", + width: "fit-content", + }, - [theme.fn.smallerThan("md")]: { - display: "none", + headerLogoBox: { + height: "10%", + [theme.fn.smallerThan("xs")]: { + gridColumn: "span 2", + }, }, - }, + emojiLogo: { + fontSize: "18rem", + marginRight: "2rem", + [theme.fn.smallerThan("md")]: { + display: "none", + }, + }, + + buttonContainer: { + display: "flex", + justifyContent: "flex-end", + position: "relative", + zIndex: 2, - showMoreButton: { - color: "#E7EBF5", - width: "fit-content", - }, + "& > button:not(:last-child)": { + marginRight: theme.spacing.md, + }, + }, - headerLogoBox: { - height: "10%", - [theme.fn.smallerThan("xs")]: { - gridColumn: "span 2", + emojiHeaderLogo: { + fontSize: "4rem", + [theme.fn.smallerThan("md")]: { + fontSize: "3rem", + }, }, - }, - emojiLogo: { - fontSize: "18rem", - marginRight: "2rem", - [theme.fn.smallerThan("md")]: { - display: "none", + headerLogoWrapper: { + display: "none", + [theme.fn.smallerThan("md")]: { + display: "block", + }, }, - }, - buttonContainer: { - display: "flex", - justifyContent: "flex-end", - position: "relative", - zIndex: 2, + headerLogo: { + maxHeight: "2rem", + }, - "& > button:not(:last-child)": { - marginRight: theme.spacing.md, + hiddenBox: { + width: "fit-content", + height: "fit-content", + visibility: "hidden", }, - }, - emojiHeaderLogo: { - fontSize: "4rem", - [theme.fn.smallerThan("md")]: { - fontSize: "3rem", + collapseContent: { + padding: "2rem", + display: "flex", + flexDirection: "column", + color: "white", + background: "linear-gradient(to right, #4F8FCC, #6ABFC1)", + borderBottomLeftRadius: theme.radius.lg, + borderBottomRightRadius: theme.radius.lg, + marginTop: "-2px", + marginLeft: "-2px", + marginRight: "-2px", + marginBottom: "-2px", + overflow: "hidden", }, - }, - headerLogoWrapper: { - display: "none", - [theme.fn.smallerThan("md")]: { - display: "block", + + collapseWrapper: { + "& .mantine-Collapse-root": { + margin: 0, + padding: 0, + border: "none", + borderRadius: "0", + }, }, - }, - - headerLogo: { - maxHeight: "2rem", - }, - - hiddenBox: { - width: "fit-content", - height: "fit-content", - visibility: "hidden", - }, - - collapseContent: { - padding: "2rem", - display: "flex", - flexDirection: "column", - color: "white", - background: "linear-gradient(to right, #4F8FCC, #6ABFC1)", - borderBottomLeftRadius: theme.radius.lg, - borderBottomRightRadius: theme.radius.lg, - marginTop: "-2px", - marginLeft: "-2px", - marginRight: "-2px", - marginBottom: "-2px", - overflow: "hidden", - }, - - collapseWrapper: { - "& .mantine-Collapse-root": { - margin: 0, - padding: 0, - border: "none", - borderRadius: "0", + podsContainer: { + boxShadow: theme.shadows.lg, + overflow: "hidden", + position: "relative", + borderRadius: theme.radius.lg, + "&:before": { + content: "\"\"", + position: "absolute", + top: 0, + left: 0, + width: "100%", + height: "100%", + backgroundColor: "rgba(0, 0, 0, 0.4)", + opacity: 1, + transition: "opacity 0.3s ease-in-out", + zIndex: 1, + }, + "&:hover:before": { + opacity: 0, + }, + "& button": { + position: "relative", + zIndex: 2, + opacity: 0.6, + transition: "opacity 0.3s ease-in-out", + }, + "&:hover button": { + opacity: 1, + }, + "&.overlay-removed:before": { + display: "none", + }, }, - }, - podsContainer: { - boxShadow: theme.shadows.lg, - overflow: "hidden", - position: "relative", - borderRadius: theme.radius.lg, - "&:before": { - content: '""', - position: "absolute", - top: 0, - left: 0, - width: "100%", - height: "100%", - backgroundColor: "rgba(0, 0, 0, 0.4)", - opacity: 1, - transition: "opacity 0.3s ease-in-out", - zIndex: 1, + link: { + position: "relative", + zIndex: 2, + cursor: "pointer", + color: "rgba(98,193,244, 0.5)", + "&:hover": { + color: "#62c1f4", + }, }, - "&:hover:before": { - opacity: 0, + + collapseContainer: { + gap: 32, + flexDirection: "row", + justifyContent: "flex-end", + [theme.fn.smallerThan("sm")]: { + gap: 0, + flexDirection: "column", + }, }, - "& button": { - position: "relative", - zIndex: 2, - opacity: 0.6, - transition: "opacity 0.3s ease-in-out", + + collapseText: { + textAlign: "right", + fontSize: "1.35rem", + lineHeight: "2", + marginBottom: "1rem", + marginLeft: "0rem", + paddingRight: "5rem", }, - "&:hover button": { - opacity: 1, + + collapseParagraph: { + marginBottom: "2rem", + }, + + bold: { + fontWeight: "bold", }, - "&.overlay-removed:before": { - display: "none", + + collapseLogo: { + maxWidth: "34rem", + paddingBottom: "4rem", + paddingRight: "4rem", + paddingLeft: "3rem", }, - }, - link: { - position: "relative", - zIndex: 2, - cursor: "pointer", - color: "rgba(98,193,244, 0.5)", - "&:hover": { - color: "#62c1f4", + + collapseBtnContainer: { + width: "auto", + paddingRight: "37%", }, - }, - - collapseContainer: { - gap: 32, - flexDirection: "row", - justifyContent: "flex-end", - [theme.fn.smallerThan("sm")]: { - gap: 0, - flexDirection: "column", + + arrowUp: { + transform: "rotate(180deg)", }, - }, - - collapseText: { - textAlign: "right", - fontSize: "1.35rem", - lineHeight: "2", - marginBottom: "1rem", - marginLeft: "0rem", - paddingRight: "5rem", - }, - - collapseParagraph: { - marginBottom: "2rem", - }, - - bold: { - fontWeight: "bold", - }, - - collapseLogo: { - maxWidth: "34rem", - paddingBottom: "4rem", - paddingRight: "4rem", - paddingLeft: "3rem", - }, - - collapseBtnContainer: { - width: "auto", - paddingRight: "37%", - }, - - arrowUp: { - transform: "rotate(180deg)", - }, }));