updating homepage

Gather307 · Aug 20, 2024 · f1763c6 · f1763c6
1 parent b30f96d
commit f1763c6
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 18 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -11,3 +11,5 @@
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
+<!-- In your index.html -->
+<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -12,6 +12,7 @@ import IndividualGroupPage from "./pages/IndividualGroupPage";
 import { IUser } from "../../backend/models/userSchema";
 import MoveLetters from "./components/moveLetters";
 import theme from "./theme";
+import HomePage from "./pages/HomePage";
 
 //const vite_backend_url = import.meta.env.VITE_BACKEND_URL as string;
 const vite_backend_url = "https://gather-app-307.azurewebsites.net";
@@ -69,7 +70,7 @@ function App() {
             <NavbarSignedOut />
           )}
           <Routes>
-            <Route path="/" element={<MoveLetters />} />
+            <Route path="/" element={<HomePage />} />
             <Route
               path="/login"
               element={<LoginPage updateState={{ setUser, setToken }} />}

diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
@@ -1,24 +1,101 @@
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Image,
+  Stack,
+} from "@chakra-ui/react";
+import { Link } from "react-router-dom";
+
 const HomePage = () => {
   return (
-    <div
-      style={{
-        height: "100vh",
-        width: "100vw",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        background: "#DCE1DE",
-        color: "#216869",
-        fontSize: "24px",
-        padding: "0 20px",
-        flex: 1,
-        textAlign: "center",
+    <Box
+      bgGradient="radial(at center, #D9E1E2, #9CC5A1, #49A078)"
+      minH="90%"
+      color="white"
+      position="relative"
+      overflow="hidden"
+      animation="gradientAnimation 4s ease infinite"
+      bgSize="200% 200%"
+      sx={{
+        "@keyframes gradientAnimation": {
+          "0%": { backgroundPosition: "0% 0%" },
+          "25%": { backgroundPosition: "100% 25%" },
+          "50%": { backgroundPosition: "50% 50%" },
+          "75%": { backgroundPosition: "100% 75%" },
+          "100%": { backgroundPosition: "0% 0%" },
+        },
       }}
     >
-      <h1>Welcome to Gather!</h1>
-      <p>Your go to place to keep track of your stuff</p>
-    </div>
+      <Box
+        position="absolute"
+        top="50%"
+        left="50%"
+        width="600px"
+        height="600px"
+        bg="green.200"
+        borderRadius="50%"
+        opacity="0.4"
+        transform="translate(-50%, -50%)"
+        filter="blur(150px)"
+        zIndex={1}
+      />
+
+      <Container maxW="container.md" py={14} zIndex={2} position="relative">
+        <Stack spacing={4} textAlign="center" alignItems="center">
+          <Heading
+            fontSize="7xl"
+            fontWeight="bold"
+            textShadow="4px 4px 12px rgba(0, 0, 0, 0.3)"
+            fontFamily="'Bebas Neue', sans-serif"
+            color="white"
+            letterSpacing="wide"
+          >
+            Gather
+          </Heading>
+
+          <Heading
+            fontSize="3xl"
+            fontWeight="medium"
+            fontFamily="'Bebas Neue', sans-serif"
+            color="white"
+            textShadow="2px 2px 6px rgba(0, 0, 0, 0.2)"
+            letterSpacing="wide"
+          >
+            Simplify your plans, amplify your gatherings
+          </Heading>
+          <Button
+            as={Link}
+            to="/signup"
+            bg="#49A078"
+            textColor="white"
+            size="lg"
+            py={3}
+            mt={4}
+            // borderRadius="full"
+            _hover={{
+              bg: "green.600",
+              color: "white",
+              transform: "scale(1.05)",
+            }}
+          >
+            Get Started with Gather
+          </Button>
+        </Stack>
+      </Container>
+
+      <Box mt={4} textAlign="center">
+        <Image
+          src="../../public/TheLeaf.png"
+          alt="Gather Logo"
+          maxH="750px"
+          mx="auto"
+          transition="transform 0.3s ease-in-out"
+          _hover={{ transform: "scale(1.1)" }}
+        />
+      </Box>
+    </Box>
   );
 };