From b9c71c0ac86c33644fa38d3bf808dee4958ee534 Mon Sep 17 00:00:00 2001
From: phthallo <annabelquach13@gmail.com>
Date: Thu, 23 Jan 2025 12:41:29 -0500
Subject: [PATCH] feat: overlapping screens

- add: user profiles for cac winners
- add: exclamation sticker but actually on the button this time
---
 .../customButton.js                           |  6 +-
 .../congressional-app-challenge/polaroid.js   |  2 +-
 .../congressional-app-challenge/screen.js     | 17 +++--
 .../userProfile.js                            | 19 ++++++
 pages/congressional-app-challenge.js          | 67 ++++++++++++++-----
 5 files changed, 88 insertions(+), 23 deletions(-)
 create mode 100644 components/congressional-app-challenge/userProfile.js

diff --git a/components/congressional-app-challenge/customButton.js b/components/congressional-app-challenge/customButton.js
index 616dc5c1..4bd68d46 100644
--- a/components/congressional-app-challenge/customButton.js
+++ b/components/congressional-app-challenge/customButton.js
@@ -4,7 +4,8 @@ export default function CustomButton({
     link,
     color, 
     textColor, // 🤓
-    sxProps
+    sxProps,
+    children
 }){ return (
     <Box sx= {sxProps}>
     <Button as="a" className="gaegu" href={link} sx = {{
@@ -23,7 +24,10 @@ export default function CustomButton({
         borderColor: "#000"
         }}>
                 {text}
+        
+        <Box sx = {{position: "absolute", right: -12, top: -3 }}>{children}</Box>
         </Button>
+
     </Box>
 
 )}
\ No newline at end of file
diff --git a/components/congressional-app-challenge/polaroid.js b/components/congressional-app-challenge/polaroid.js
index 1e7ff8c1..e1e81d95 100644
--- a/components/congressional-app-challenge/polaroid.js
+++ b/components/congressional-app-challenge/polaroid.js
@@ -8,7 +8,7 @@ export default function Polaroid({
     return (
         <Box sx = {sxProps}>
             <Box sx = {{margin: 2, backgroundColor: "#fff", border: "2px", width: 200, boxShadow: "1px 1px 1px 1px #9E9E9E"}}>
-                <Image src = {image} sx= {{paddingX: 3, paddingTop: 3}}/>
+                <Image src = {image} sx= {{paddingX: 3, paddingTop: 3, objectFit: "cover"}}/>
                 <Box variant = "caption" sx={{width: "100%", textAlign: "center", paddingBottom: 4, marginBottom: 3}}>{caption}</Box>
             </Box>
         </Box>
diff --git a/components/congressional-app-challenge/screen.js b/components/congressional-app-challenge/screen.js
index 95376096..38480ded 100644
--- a/components/congressional-app-challenge/screen.js
+++ b/components/congressional-app-challenge/screen.js
@@ -1,11 +1,13 @@
 import { Box, Text, Image, Link } from 'theme-ui'
 
-const Screen = ({ backgroundImage }) => {
+const Screen = ({ backgroundImage, title, sxProps, children, expand }) => {
     let color = backgroundImage ? "" : "#fff"
+    let expan = expand ? ["100%", null, null, '58vh'] : "58vh"
+    let props = Object.assign({},{display: "flex", flexDirection: "column", width: ["100%", null, null, "55%"]}, sxProps )
     return (
-              <Box sx  = {{display: "flex", flexDirection: "column", width: ["100%", null, null, "55%"]}}>
+              <Box sx  = {props}>
                   <Box sx = {{
-                    width: ['100%'], 
+                    width: "100%", 
                     borderColor: "black", 
                     border: "2px solid", 
                     borderRadius: "6px 6px 0 0", 
@@ -28,7 +30,7 @@ const Screen = ({ backgroundImage }) => {
                         paddingX: 2,
                         height: "80%"
                         }}>
-                          <Text variant="caption" sx = {{width: "80%", fontSize: "12px"}}>Hack Club - Congressional App Challenge</Text></Box>
+                          <Text variant="caption" sx = {{width: "80%", fontSize: "12px"}}>{title}</Text></Box>
                     </Box>
                 </Box>
                 <Box sx = {{
@@ -39,9 +41,12 @@ const Screen = ({ backgroundImage }) => {
                       borderLeft: "2px solid",
                       borderRight: "2px solid", 
                       borderRadius: "0 0 6px 6px", 
-                      height:'58vh',
+                      padding: 3,
+                      height: expan,
                       backgroundImage: `url(${backgroundImage})`,
-                      backgroundSize: "cover"}}/>
+                      backgroundSize: "cover"}}>
+                        {children}
+                      </Box>
                 </Box>
     )
 }
diff --git a/components/congressional-app-challenge/userProfile.js b/components/congressional-app-challenge/userProfile.js
new file mode 100644
index 00000000..569f4088
--- /dev/null
+++ b/components/congressional-app-challenge/userProfile.js
@@ -0,0 +1,19 @@
+import { Box, Image, Text } from 'theme-ui'
+
+export default function UserProfile({
+    image,
+    name,
+    age, 
+    state,
+    description
+}){
+    return (
+        <Box sx = {{display: "flex", flexDirection: "column", padding: 2, width: 200}}>
+            <Image src = {image} sx = {{objectFit: "cover", borderRadius: 6}}/>
+            <Box sx={{display: "flex", flexDirection: "column", width: "100%", textAlign: "left", paddingBottom: 1, marginBottom: 1}}>
+                <Text variant = "subtitle" className="gaegu">{name} ({age}, {state})</Text>
+                <Text variant = "text" className="gaegu">{description}</Text>
+            </Box>
+        </Box>
+    )
+}
\ No newline at end of file
diff --git a/pages/congressional-app-challenge.js b/pages/congressional-app-challenge.js
index ba9c3289..818f7996 100644
--- a/pages/congressional-app-challenge.js
+++ b/pages/congressional-app-challenge.js
@@ -15,6 +15,7 @@ import Footer from '../components/footer'
 import Screen from '../components/congressional-app-challenge/screen'
 import CustomButton from '../components/congressional-app-challenge/customButton'
 import Polaroid from '../components/congressional-app-challenge/polaroid'
+import UserProfile from '../components/congressional-app-challenge/userProfile'
 import ForceTheme from '../components/force-theme'
 
 const styled = `
@@ -104,9 +105,9 @@ function Page({
             display: "flex", flexDirection: ["column", null, null, "row"],
             justifyContent: "center",
             alignItems: "space-between",
-              mx: "5",
+              mx: ["4", null, "5"],
               }}>
-            <Screen title="Hack Club - Congressional App Challenge" backgroundImage="https://cloud-qqz8uj8y5-hack-club-bot.vercel.app/027544281748_b641f43479_o-1.jpg"/>
+            <Screen title="Hack Club - Congressional App Challenge" backgroundImage="https://cloud-qqz8uj8y5-hack-club-bot.vercel.app/027544281748_b641f43479_o-1.jpg" sxProps={{height: ["40vh", null, null, "100%"]}}/>
             <Box sx = {{display: "flex", flexDirection: "column", width: ["100%", null, null, "45%"], textAlign: ["center", null, null, "right"], alignItems: ['center', null, null, 'flex-end'], marginLeft: [null, null, null, 5], marginTop: [5, null, null, 0], justifyContent: "flex-end"}}>
               <Box sx = {{display: "flex", flexDirection: "row", alignContent: "space-between"}}>
                 <Image src = "https://assets.hackclub.com/icon-rounded.svg" sx = {{height: 54, px: 1}}/> 
@@ -116,8 +117,9 @@ function Page({
               <Heading className="gaegu" variant="subtitle">Hack Club presents the</Heading>
               <Heading as="h1" variant="title" sx={{textShadow: "2px 2px #413cf2, 4px 4px #facb2d, 6px 6px #e15ba6"}}>Congressional App Challenge</Heading>
               <Box sx = {{width: "100%", marginTop: 4, display: 'flex', flexDirection: ['column', null, null, 'row'], rowGap: 3, columnGap: 3}}>
-                <CustomButton text="FREE STICKERS" color={palette['pink']} textColor={palette["white"]} link="#" sxProps = {{width: ["100%", null, null, "50%"], position: 'relative'}}/>
-                <Image src = "/congressional-app-challenge/notify.svg" sx = {{position: "absolute"}}/>
+                <CustomButton text="FREE STICKERS" color={palette['pink']} textColor={palette["white"]} link="#" sxProps = {{width: ["100%", null, null, "50%"], position: 'relative'}}>
+                  <Image src = "/congressional-app-challenge/notify.svg" sx = {{zIndex: "1"}}/>
+                </CustomButton>
                 <CustomButton text="JOIN HACK CLUB" color={palette['white']} textColor={palette["black"]} link="#" sxProps = {{width: ["100%", null, null, "50%"]}}/>
               
               </Box>
@@ -127,7 +129,7 @@ function Page({
 
       <Box id="info" className = "gridlines" sx={{backgroundColor: palette['yellow']}}>
           <Box sx = {{
-            marginX: 5, 
+            marginX: [3, 4, 4, 5], 
             padding: 4, 
             backgroundColor: "#fff",
             border: "1px solid black"}}>
@@ -138,9 +140,6 @@ function Page({
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </Text>
             <Box sx = {{width: ["100%", null, null, "50%"], marginTop: [3, 3, 3, 0]}}>
-
-
-
             </Box>
           </Box>
 
@@ -150,11 +149,11 @@ function Page({
               <Polaroid 
                 image="https://static.vecteezy.com/system/resources/thumbnails/004/511/281/small/default-avatar-photo-placeholder-profile-picture-vector.jpg" 
                 caption="sdfjds"
-                sxProps={{transform: 'rotate(12deg)', zIndex: 1, position: 'absolute', top: -3, left: [4, 80, 300, 20]}}/>
+                sxProps={{transform: 'rotate(12deg)', zIndex: 1, position: 'absolute', top: -3, left: [4, 160, 300, 20]}}/>
               <Polaroid 
                 image="https://static.vecteezy.com/system/resources/thumbnails/004/511/281/small/default-avatar-photo-placeholder-profile-picture-vector.jpg" 
                 caption="sdfjds"
-                sxProps={{transform: 'rotate(350deg)', zIndex: 0, position: 'absolute', top: -3, left: [4, 60, 220, 6]}}/>
+                sxProps={{transform: 'rotate(350deg)', zIndex: 0, position: 'absolute', top: -3, left: [4,30, 220, 6]}}/>
             </Box>
             <Text sx = {{width: ["100%", null, null, "50%"], marginLeft: [0, 0, 0, 3], textAlign: "right", paddingTop: [3, 4, 4, 0]}}>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -162,20 +161,58 @@ function Page({
           </Box>
         </Box>
       </Box>
-      <Box id="winners" sx={{backgroundColor: palette["cream"], padding: 5}}>
-          <Box sx = {{paddingX: 4}}>
+      <Box id="winners" sx={{backgroundColor: palette["cream"], padding: [3, 4, 4, 5]}}>
+          <Box sx = {{padding: 4, height: ["100%", null, null, "90vh"]}}>
             <Heading as="h1" sx={{pb: 4}}>Meet <span class = "pink">past winners</span></Heading>
-            <Image src = "https://cloud-plfhs012c-hack-club-bot.vercel.app/0windows.png"/>
+            <Box sx = {{position: "relative"}}>
+              <Screen 
+                expand
+                title = "Hack Club - Challenge Winners v2 FINAL THIS ONE" 
+                sxProps = {{
+                  position: ["relative", null, null, "absolute"],
+                  top: [0, 0, 0, 40],
+                  marginBottom: [2, 2, 2, 0],
+                  zIndex: 1
+                  }}>
+                  <Box sx = {{
+                    display: "flex",
+                    flexDirection: ["column", "row", "row", "row"],
+                    justifyContent: "space-around",
+                    alignItems: "center"
+                  }}>
+                    <UserProfile name = "sdf" age="17" state="vt" description="sdfsdfsd" image="https://static.vecteezy.com/system/resources/thumbnails/004/511/281/small/default-avatar-photo-placeholder-profile-picture-vector.jpg"/>
+                    <UserProfile name = "sdf" age="17" state="vt" description="sdfsdfsd" image="https://static.vecteezy.com/system/resources/thumbnails/004/511/281/small/default-avatar-photo-placeholder-profile-picture-vector.jpg"/>
+                  </Box>
+                  </Screen>
+
+                <Screen 
+                expand
+                title = "Hack Club - Challenge Winners (draft)" 
+                sxProps = {{
+                  position:  ["relative", null, null, "absolute"], 
+                  right: [0, 0, 0, 10],
+                  top: [0, 0, 0, -10],
+                  zIndex: 0}}>
+                  <Box sx = {{
+                    display: "flex",
+                    flexDirection: ["column", "row", "row", "row"],
+                    justifyContent: "space-around",
+                    alignItems: "center"
+                  }}>
+                    <UserProfile name = "sdf" age="17" state="vt" description="sdfsdfsd" image="https://static.vecteezy.com/system/resources/thumbnails/004/511/281/small/default-avatar-photo-placeholder-profile-picture-vector.jpg"/>
+                  </Box>
+                  </Screen>
+            </Box>
           </Box>
         </Box>
 
         <Box id="info" className = "gridlines" sx={{backgroundColor: palette['blurple']}}>
           <Box sx = {{
-            marginX: 5, 
+            marginX: [3, 4, 4, 5], 
             padding: 4, 
             backgroundColor: "#fff",
             border: "1px solid black"}}>
-            <Text as="h1" className="gaegu" sx={{textAlign: "center"}}>submissions for the 2025 Congressional App Challenge close</Text>
+            <Text as="h2" className="gaegu" sx={{textAlign: "center"}}>submissions for the 2025 Congressional App Challenge close</Text>
             <Heading variant="title" sx={{textShadow: "2px 2px #413cf2, 4px 4px #facb2d, 6px 6px #e15ba6", textAlign: 'center'}}>What are you waiting for?</Heading>
             <Box sx = {{marginTop: 4, display: 'flex', flexDirection: ['column', null, null, 'row'], rowGap: 2, columnGap: 2, alignContent: 'space-around', width: "100%"}}>
                 <CustomButton text="FREE STICKERS" color={palette['pink']} textColor={palette["white"]} link="#" sxProps = {{width: ["100%", null, null, "50%"]}}/>