feat: new home page

package.json

@@ -25,6 +25,7 @@
     "@tiptap/pm": "^2.6.4",
     "@tiptap/react": "^2.6.4",
     "@tiptap/starter-kit": "^2.6.4",
+    "gsap": "^3.12.5",
     "punycode": "^2.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/index.css

@@ -1,15 +1,19 @@
 :root[data-mantine-color-scheme="dark"] {
   --mantine-color-body: #272934;
+  --mantine-color-text: #fff;
 }
 
 * {
   box-sizing: border-box;
+  color: #fff;
 }
 
 body {
-  background: #272934;
+  background: #0d0015;
   margin: 0;
   padding: 0;
+  height: 100vh;
+  overflow-x: hidden;
 }
 
 .server-card {

src/pages/Home.tsx

@@ -3,30 +3,113 @@ import HomeNavbar from "../components/HomeNavbar";
 
 export default function Home() {
   return (
-    <Box>
+    <Flex direction="column" style={{
+      height: "calc(100vh - 63px)",
+      position: "relative"
+    }}>
       <HomeNavbar />
-      <Flex p="40px" h="90%" display="flex" direction="column" justify="center">
-        <Flex direction="column" gap={10}>
-          <Title size="8rem" style={{ transform: "translateX(-6px)" }}>
-            Rannus
-          </Title>
-          <Text style={{ transform: "translateY(-20px)" }} size="xl">
-            Moderate Your Discord Servers And Grow It.
-          </Text>
-          <Box>
+      <Flex px="50px" h="90%" display="flex" direction="column" justify="center" style={{
+        zIndex: '100'
+      }}>
+        <Flex direction="column" align={"center"} gap={10} justify={"center"}>
+          <Flex direction={"column"} align={"center"} style={{
+            transform: "translateY(-20px)"
+          }}>
+            <Title size="8rem" style={{ transform: "translateX(-6px)", color: "#fff" }}>
+              Rannus
+            </Title>
+            <Text style={{ transform: "translateY(-20px)", color: "#cccccc" }} size="lg">
+              Moderate Your Discord Servers And Grow It.
+            </Text>
+          </Flex>
+
+          <Flex style={{
+            marginTop: "10px",
+            width: "100%"
+          }} gap={30} justify={"center"}>
             <Button
-              variant="outline"
+              bg={"#7a0bdb"}
               size="md"
+              radius={"xl"}
               color="#ffffff"
+              style={{
+                boxShadow: "0px 15px 30px rgb(0, 0, 0, 0.3)"
+              }}
               onClick={() => {
                 window.location.href = "https://discord.com/oauth2/authorize?client_id=1276226772026790064";
               }}
             >
               Invite Now
             </Button>
-          </Box>
+            <Button
+              bg={"#0d0015"}
+              size="md"
+              radius={"xl"}
+              color="#ffffff"
+              style={{
+                boxShadow: "0px 15px 30px rgb(0, 0, 0, 0.3)"
+              }}
+              onClick={() => {
+                window.location.href = "https://discord.com/oauth2/authorize?client_id=1276226772026790064";
+              }}
+            >
+              Feedback
+            </Button>
+          </Flex>
         </Flex>
       </Flex>
-    </Box>
+
+      <Flex style={{
+        width: "100%",
+        height: "50%",
+        position: "absolute",
+        bottom: "20%",
+        zIndex: "0"
+      }} justify={"center"}>
+        <Box bg={"#120121"} style={{
+          width: window && window.innerHeight/0.3,
+          height: window && window.innerHeight/0.5,
+          borderRadius: '50%',
+          padding: '100px',
+          display: "flex",
+          justifyContent: "center"
+        }}>
+          <Box bg={"#240242"} style={{
+            width: window && window.innerHeight/0.4,
+            height: window && window.innerHeight/0.5,
+            borderRadius: '50%',
+            padding: '100px',
+            display: "flex",
+            justifyContent: "center"
+          }}>
+            <Box bg={"#370373"} style={{
+              width: window && window.innerHeight/0.5,
+              height: window && window.innerHeight/0.5,
+              borderRadius: '50%',
+              padding: '100px',
+              display: "flex",
+              justifyContent: "center"
+            }}>
+              <Box bg={"#4a2bb9"} style={{
+                width: window && window.innerHeight/0.5,
+                height: window && window.innerHeight/0.5,
+                borderRadius: '50%'
+              }}></Box>
+            </Box>
+          </Box>
+        </Box>
+
+      </Flex>
+      <Box style={{
+        height: window && window.innerHeight/0.5,
+        width: "100%",
+        position: "absolute",
+        background: "#0d0015",
+        top: "98%",
+        boxShadow: '0px -30px 100px #4a2bb9'
+      }}>
+
+      </Box>
+    </Flex>
   );
 }