ui changes

nfa1 · Aug 31, 2024 · 9391cfe · 9391cfe
1 parent fe44324
commit 9391cfe
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 25 deletions.
diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
@@ -2,6 +2,6 @@ vite.svg,1713755213475,59ec4b6085a0cb1bf712a5e48dd5f35b08e34830d49c2026c18241be0
 LeetMigo_banner_main_01.png,1723680240000,fd5319e2bdc14bfd8ff24ac90e9ba0ecfc41f881a8b733fafe8441641b9421e6
 leetmigo waifu 1.png,1719180166792,e196e9e48be328b15c212d370e23a5ea33186361619ee1dfe7a6b05136ff4f5a
 gendonotevil1.png,1716715413819,87612e12215c5df3dd01be8177bbdd74734b0f76f7eb0c5ef72dcfa81a7766d9
-index.html,1724983240102,c057d64b0ce524220c650047e3e37d2e540e5cf2be3b43836e477fab0ede5462
-assets/index-DmIjaVRE.js,1724983240114,f53da74e865c2f04635f4f71e8266a02b51aa21b37afd15ab79fed81d76a782b
-assets/LeetMigo_banner_main_01-B7g23Qd-.png,1724983240114,4ada8c13ac119d2ab923d7e00d6def14e3326c0b0938c8a79afa7176075f773a
+index.html,1725004275409,22a76d26712ce2478f66323d34d54b0dcbdea86f8b1c63fa9c399c56fa680649
+assets/index-BHGADhCi.js,1725004275409,455ff97f3b41b5f27a0e525eff115b5e8d44e4686f9f591ed89598a99a7157d4
+assets/LeetMigo_banner_main_01-B7g23Qd-.png,1725004275409,4ada8c13ac119d2ab923d7e00d6def14e3326c0b0938c8a79afa7176075f773a
diff --git a/src/AppContent.jsx b/src/AppContent.jsx
@@ -154,14 +154,27 @@ const AppContent = () => {
         </Text>
       </Box>
 
-      <Container maxW="container.md" pt={8} px={4} pb={24}>
-        <VStack spacing={8} align="center" justify="center">
+      <Container maxW={{ base: "container.sm", md: "container.md", lg: "container.lg" }} pt={8} px={4} pb={24}>
+        <VStack spacing={{ base: 6, md: 8, lg: 10 }} align="center" justify="center">
 
-          <Text fontSize={{ base: "lg", md: "xl" }} textAlign="center">
+          <Box width="100%" overflow="hidden" borderRadius="md">
+            <AspectRatio ratio={{ base: 16 / 9, md: 21 / 9 }}>
+              <Image 
+                src={bannerImage} 
+                alt="LeetMigo Banner" 
+                objectFit="cover" 
+                objectPosition="center"
+                width="100%" 
+                height="100%"
+              />
+            </AspectRatio>
+          </Box>
+
+          <Text fontSize={{ base: "lg", md: "xl", lg: "2xl" }} textAlign="center" mt={{ base: 2, md: 4 }}>
             Yo, weebs and tech otakus! Join the waitlist for LeetMigo - your AI-powered LeetCode sidekick! 🚀🎮
           </Text>
 
-          <Grid templateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }} gap={6} width="100%">
+          <Grid templateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }} gap={{ base: 4, md: 6, lg: 8 }} width="100%">
             {[
               { title: "💾 Secure Local Storage", desc: "Your data's safer than your mom's secret cookie recipe, fr. Passwordless login, cuz who's got time for that?" },
               { title: "💰 Pay with Bitcoin", desc: "Flex on 'em with crypto. We're so web3, even your wallet's feeling FOMO." },
@@ -179,19 +192,6 @@ const AppContent = () => {
             ))}
           </Grid>
 
-          <Box width="100%" overflow="hidden" borderRadius="md">
-            <AspectRatio ratio={16 / 9}>
-              <Image 
-                src={bannerImage} 
-                alt="LeetMigo Banner" 
-                objectFit="cover" 
-                objectPosition="center"
-                width="100%" 
-                height="100%"
-              />
-            </AspectRatio>
-          </Box>
-
           <Text fontSize={{ base: "lg", md: "xl" }} fontWeight="bold" textAlign="center" mt={4}>
             Sign up now for free early access! 🚀
           </Text>
@@ -207,7 +207,7 @@ const AppContent = () => {
                   <FormLabel>Email</FormLabel>
                   <Input name="email" type="email" placeholder="Drop your email here" required />
                 </FormControl>
-                <Button type="submit" {...commonButtonStyles}>
+                <Button type="submit" fontSize={{ base: "md", md: "lg" }} py={{ base: 6, md: 8 }} {...commonButtonStyles}>
                   Let's Goooo! 🔥
                 </Button>
               </VStack>
@@ -249,11 +249,11 @@ const AppContent = () => {
 
       <Modal isOpen={isPrivacyModalOpen} onClose={handleClosePrivacyModal}>
         <ModalOverlay />
-        <ModalContent bg="gray.800" color="white">
-          <ModalHeader>Privacy Stuff</ModalHeader>
+        <ModalContent bg="gray.800" color="white" maxW={{ base: "90%", md: "600px" }}>
+          <ModalHeader fontSize={{ base: "lg", md: "xl" }}>Privacy Stuff</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            <Text>
+            <Text fontSize={{ base: "md", md: "lg" }}>
               Yo, this is where we'd spill the tea on our privacy policy. We'll update this with the real deal soon. Stay tuned!
             </Text>
           </ModalBody>
@@ -265,7 +265,7 @@ const AppContent = () => {
         </ModalContent>
       </Modal>
     </Box>
-  );
+  );  
 };
 
 export default AppContent;