ui ux changes

nfa1 · Aug 24, 2024 · bb4039e · bb4039e
1 parent 0965909
commit bb4039e
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 57 deletions.
diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
@@ -1,6 +1,6 @@
 vite.svg,1713755213475,59ec4b6085a0cb1bf712a5e48dd5f35b08e34830d49c2026c18241be04e05d5a
 leetmigo waifu 1.png,1719180166792,e196e9e48be328b15c212d370e23a5ea33186361619ee1dfe7a6b05136ff4f5a
 gendonotevil1.png,1716715413819,87612e12215c5df3dd01be8177bbdd74734b0f76f7eb0c5ef72dcfa81a7766d9
-index.html,1724497208416,280caf91078a1906e1d6a55b23ed117e72659d9fdff904c107766f25d8195333
-assets/index-H1gcaRkG.js,1724497208417,d978bb6c7dea793dec14bfff17061dc94d1e15f51cafb9c2a19c45dcc31aa7d8
-assets/LeetMigo_banner_main_01-B7g23Qd-.png,1724497208418,4ada8c13ac119d2ab923d7e00d6def14e3326c0b0938c8a79afa7176075f773a
+index.html,1724497702717,277a77d4f3526e3fb923bd0fa39d2efd5afd6ef55494284875f2f49720e419d7
+assets/index-BXGGUkAa.js,1724497702717,b10ac663dec8398431177eaf9885466b5e7c4f66b9b11de24a4c06c4b7e42c6a
+assets/LeetMigo_banner_main_01-B7g23Qd-.png,1724497702717,4ada8c13ac119d2ab923d7e00d6def14e3326c0b0938c8a79afa7176075f773a
diff --git a/src/AppContent.jsx b/src/AppContent.jsx
@@ -16,6 +16,7 @@ import {
   ModalBody,
   ModalCloseButton,
   Container,
+  AspectRatio,
 } from '@chakra-ui/react';
 import bannerImage from './LeetMigo_banner_main_01.png';
 
@@ -28,7 +29,6 @@ const AppContent = () => {
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    // Add form submission logic here
     toast({
       title: "Waitlist Joined!",
       description: "You've successfully joined the waitlist.",
@@ -48,89 +48,86 @@ const AppContent = () => {
     if (accepted) setGdprAccepted(true);
   }, []);
 
+  // Set a consistent max width for all buttons
+  const buttonMaxWidth = { base: '100%', md: '300px' };
+
   return (
     <Box minH="100vh" color="white" bg="gray.900" position="relative">
-      <Container maxW="container.xl" pt={{ base: 16, md: 20 }} px={{ base: 4, md: 8 }} pb={{ base: 24, md: 20 }}>
-        <VStack spacing={{ base: 8, md: 12 }} align="center" justify="center">
+      <Container maxW="container.md" pt={8} px={4} pb={16}>
+        <VStack spacing={8} align="center" justify="center">
 
           {/* LeetMigo Header and Description */}
           <Box textAlign="center">
-            <Text fontSize={{ base: '3xl', md: '4xl' }} fontWeight="bold" lineHeight="shorter">
+            <Text fontSize={{ base: '2xl', md: '3xl' }} fontWeight="bold" lineHeight="shorter">
               LeetMigo 👾
             </Text>
             <Text fontSize={{ base: 'md', md: 'lg' }} mt={4} lineHeight="tall">
               the world's first decentralized platform for dsa interview prep, made for non-trad, cracked techies and frens
             </Text>
           </Box>
 
-          {/* Banner Image */}
-          <Box width="100%" maxH={{ base: '200px', md: '300px', lg: '400px' }}>
+          {/* Banner Image with Aspect Ratio */}
+          <AspectRatio ratio={16 / 9} width="100%" borderRadius="md">
             <Image 
               src={bannerImage} 
               alt="LeetMigo Banner" 
-              width="100%" 
-              height="auto" 
               objectFit="cover" 
-              maxH="100%"
               loading="lazy"
             />
-          </Box>
+          </AspectRatio>
 
           {/* Waitlist Form */}
-          <Box width="100%" textAlign="center">
-            <Text fontSize="xl" fontWeight="bold" mb={4}>
+          <VStack as="form" onSubmit={handleSubmit} width="100%" spacing={4} textAlign="center">
+            <Text fontSize="lg" fontWeight="bold">
               join the waitlist for free early access
             </Text>
-            <form onSubmit={handleSubmit}>
-              <VStack spacing={4}>
-                <Input
-                  type="text"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  placeholder="your name"
-                  textAlign="center"
-                  color="black"
-                  required
-                />
-                <Input
-                  type="email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  placeholder="[email protected]"
-                  textAlign="center"
-                  color="black"
-                  required
-                />
-                <Button type="submit" width="auto" colorScheme="blue">
-                  sign up
-                </Button>
-              </VStack>
-            </form>
-          </Box>
+            <Input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="your name"
+              textAlign="center"
+              color="black"
+              required
+            />
+            <Input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="[email protected]"
+              textAlign="center"
+              color="black"
+              required
+            />
+            <Button type="submit" colorScheme="blue" width="100%" maxW={buttonMaxWidth}>
+              sign up
+            </Button>
+          </VStack>
 
           {/* Free LeetCode Grind 75 Study Spreadsheet Button */}
-          <Box textAlign="center">
-            <a
-              href="https://docs.google.com/spreadsheets/d/1v0OCKeLa9q8douuR6RQmQ5mOG2piThh50wuGA79g2SY/edit?usp=sharing"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Button colorScheme="green" size="lg">
-                Free LeetCode Grind 75 Study Spreadsheet
-              </Button>
-            </a>
-          </Box>
+          <Button 
+            as="a" 
+            href="https://docs.google.com/spreadsheets/d/1v0OCKeLa9q8douuR6RQmQ5mOG2piThh50wuGA79g2SY/edit?usp=sharing" 
+            colorScheme="green" 
+            size="lg" 
+            target="_blank" 
+            rel="noopener noreferrer" 
+            width="100%" 
+            maxW={buttonMaxWidth}
+          >
+            Free LeetCode Grind 75 Study Spreadsheet
+          </Button>
 
           {/* Features Coming Soon */}
-          <VStack align="center">
+          <VStack align="center" spacing={4} width="100%">
             <Text fontSize="lg" fontWeight="bold" textAlign="center">
               features coming soon:
             </Text>
-            <HStack spacing={4} justify="center">
-              <Button variant="outline" colorScheme="blue">
+            <HStack spacing={4} justify="center" width="100%">
+              <Button variant="outline" colorScheme="blue" width="100%" maxW={buttonMaxWidth}>
                 learn
               </Button>
-              <Button variant="outline" colorScheme="blue">
+              <Button variant="outline" colorScheme="blue" width="100%" maxW={buttonMaxWidth}>
                 collab
               </Button>
             </HStack>
@@ -181,7 +178,7 @@ const AppContent = () => {
             </Button>
           </ModalFooter>
         </ModalContent>
-      </Modal>
+      </Modal>  
     </Box>
   );
 };