From 81d1a96352b269cc357275482052fc1941ac4205 Mon Sep 17 00:00:00 2001 From: Yaoyao Date: Thu, 1 Jan 2026 04:04:57 +0100 Subject: [PATCH] provide --- public/Provide/food.svg | 19 ++++ public/Provide/sleeping.svg | 64 +++++++++++ public/Provide/sponsors.svg | 13 +++ src/app/components/Provide.tsx | 199 +++++++++++++++++++++------------ 4 files changed, 221 insertions(+), 74 deletions(-) create mode 100644 public/Provide/food.svg create mode 100644 public/Provide/sleeping.svg create mode 100644 public/Provide/sponsors.svg diff --git a/public/Provide/food.svg b/public/Provide/food.svg new file mode 100644 index 0000000..0e8ddd4 --- /dev/null +++ b/public/Provide/food.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/Provide/sleeping.svg b/public/Provide/sleeping.svg new file mode 100644 index 0000000..9c12c13 --- /dev/null +++ b/public/Provide/sleeping.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Provide/sponsors.svg b/public/Provide/sponsors.svg new file mode 100644 index 0000000..ccf637a --- /dev/null +++ b/public/Provide/sponsors.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/app/components/Provide.tsx b/src/app/components/Provide.tsx index f101e9b..ead810d 100644 --- a/src/app/components/Provide.tsx +++ b/src/app/components/Provide.tsx @@ -1,128 +1,179 @@ import styled from "styled-components"; -import { - MobileBreakpoint, - SpacingL, - SpacingM, -} from "@/app/genericComponents/tokens"; +import { SpacingL, SpacingM } from "@/app/genericComponents/tokens"; import { Body, BodyLink, SectionTitle, } from "@/app/genericComponents/Typography"; -import { lora } from "@/app/genericComponents/fonts"; +import { lora, montserrat } from "@/app/genericComponents/fonts"; import { Section } from "@/app/genericComponents/General"; +const ProvideBreakpoint = "1080px"; + const ProvideSectionWrapper = styled.div` padding-top: ${SpacingL}; + padding-bottom: ${SpacingL}; + background-size: cover; + background-position: center; + background-repeat: repeat; `; const ProvideHeader = styled(SectionTitle)` text-transform: uppercase; - padding-bottom: ${SpacingM}; + text-align: center; + color: #000000; + font-size: 36px; + font-weight: 400; + line-height: 1.2; + margin-bottom: 40px; + + @media (max-width: ${ProvideBreakpoint}) { + font-size: 30px; + } `; -const ProvideBlockWrapper = styled.div` +const ProvideWrapper = styled.div` display: flex; - flex-direction: column; - align-items: center; - max-width: 750px; - margin: auto; + gap: calc(${SpacingM} + 10px); + justify-content: center; + align-items: flex-end; + max-width: 1200px; + margin: 0 auto; + padding: 0 ${SpacingM}; + + @media (max-width: ${ProvideBreakpoint}) { + flex-direction: column; + align-items: center; + gap: ${SpacingL}; + } `; -const ProvideWrapper = styled.div` +const ProvideCard = styled.div` + position: relative; + width: 100%; + max-width: 360px; + + @media (max-width: ${ProvideBreakpoint}) { + max-width: 300px; + } +`; + +const ProvideBackground = styled.img` + width: 105%; + height: auto; + display: block; + margin-left: -2.5%; +`; + +const ProvideContent = styled.div` + position: absolute; + top: 10%; + left: 7%; + right: 7%; + bottom: 20%; display: flex; - gap: ${SpacingL}; flex-direction: column; align-items: center; - margin: auto; -`; - -const ProvideBlock = styled.div` - border-radius: 15px; - padding: 25px; + justify-content: center; + padding: 0 25px; text-align: center; - min-width: 80%; - @media (max-width: ${MobileBreakpoint}) { - margin: 0 40px; + @media (max-width: ${ProvideBreakpoint}) { + top: 6%; + bottom: 18%; + padding: 0 28px; } `; -const ProvideSubTitle = styled.div` - border-radius: 10px; - padding: 0; - z-index: 1; - text-align: center; +const ProvideLabel = styled.div<{ + $isSponsors?: boolean; + $isSleeping?: boolean; +}>` position: absolute; - min-width: 20%; - margin-top: -14px; + bottom: ${(props) => + props.$isSponsors ? "-3px" : props.$isSleeping ? "14%" : "0"}; + left: 0; + right: 0; + height: 15.7%; + display: flex; + align-items: center; + justify-content: center; + color: #000000; + font-size: 20px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; - @media (max-width: ${MobileBreakpoint}) { - min-width: 50%; + @media (max-width: ${ProvideBreakpoint}) { + font-size: 16px; + height: 16%; } `; const ProvideBody = styled(Body)` - font-size: 16px; - line-height: 1.1; - white-space: pre-line; -`; - -const ProvideSubTitleText = styled(Body)` - font-size: 18px; - font-weight: bold; + font-size: 14px; line-height: 1.5; + color: #000000; + margin: 0; + + @media (max-width: ${ProvideBreakpoint}) { + font-size: 13px; + } `; -const BodyLinkStyled = styled(BodyLink)``; +const BodyLinkStyled = styled(BodyLink)` + color: #000000; + text-decoration: underline; +`; export default function Provide() { return (
- We Also
- Provide... + We Also Provide - - - FOOD - - - - We've got you covered, we even have midnight snacks. - Occasionally there will be snacks, drinks or coffee to boost + + + + + We've got you covered, we even have midnight snacks. Throughout + the event there will be snacks, drinks, and coffee to revive your energy. - - - - - - SLEEPING - - - - We will provide air mattresses both nights so you can boost your - energy levels. Check out the{" "} + + Food + + + + + + + We will provide some air mattresses both nights so you may + descend into a deep slumber. While supplies last! Check out the{" "} FAQs for more info. - - - - - NETWORKING - - - - You can also visit our sponsors’ stands or meet them remotely! + + + Sleeping + + + + + + + + You can also visit our sponsors' stands or meet them remotely! They'll be available during the day and would love to talk to - you! (you may even get some swag as well) + you! (You might get some swag as well) - - + + + Sponsors + +