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
+
+