(v0.3.4-alpha) Trailer + Community Sectopm

Added a cursor trailer just a simple round circle as of now. Also added a COMMUNITY section inspiration: spaces.hackclub.com! It looks very good! OH ALSO removd the glow things cuz many ppl was mistaking this with ai :pf:

Author: rupnil-codes

src/App.jsx

@@ -4,12 +4,35 @@ import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/react"
 import Landing from "./routes/landing.jsx";
 import Navbar from "./components/Navbar.jsx";
+import {useState} from "react";
 
 function App() {
 
+    const [isInteracting, setIsInteracting] = useState(false);
+
+    const trailerFunc = (e) => {
+        const trailer = document.getElementById("trailer");
+
+        const x = e.clientX - trailer.offsetWidth / 2;
+        const y = e.clientY - trailer.offsetHeight / 2;
+
+        const keyframes = {
+            transform: `translate(${x}px, ${y}px) scale(${ isInteracting ? 2.5 : 1 })`
+        }
+
+        trailer.animate(keyframes, {
+            duration: 800,
+            fill: "forwards"
+        });
+    }
+
   return (
     <>
-        <div className="viewport">
+        <div
+            className="viewport"
+            onMouseMove={trailerFunc}
+        >
+            <div id={"trailer"}></div>
             <Navbar />
             <Landing />
 

src/routes/landing.jsx

@@ -46,7 +46,7 @@ function Landing() {
                     </div>
                 </section>
             </section>
-            <section className="content">
+            <section className="ysws">
                 <div className={"divider"}>
                     <div className="track">
                         <span>{generateBinary()}</span>
@@ -109,18 +109,67 @@ function Landing() {
                 </div>
 
             </section>
-            <section
-                style={{
-                    height: "100vh",
-                    width: "100%",
-                }}
-            >
+            <section className={"community"}>
                 <div className={"divider"}>
                     <div className="track">
                         <span>{generateBinary()}</span>
                         <span>{generateBinary()}</span>
                     </div>
                 </div>
+                <div className={"glow"}/>
+
+                <h1>Community</h1>
+                <div className={"small-divider"}/>
+
+                <div className={"container"}>
+                    <div className={"description"}>
+                        <h2>Join the community</h2>
+                        <p>Connect with thousands of teen hackers on Slack, share your projects, and get help when you're stuck.</p>
+                        <div className={"buttons"}>
+                            {/*<div className={"button-container"}>*/}
+                            {/*    Learn More*/}
+                            {/*</div>*/}
+                            <a href={"http://hackclub.com/slack"} target="_blank" rel="noopener noreferrer">
+                                <div className={"button-container-important"}>
+                                    Join Slack
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+                    <div className={"terminal"}>
+                        <div className={"titlebar"}>
+                            <div className={"actions"}>
+                                <div className={"circle red"}></div>
+                                <div className={"circle yellow"}></div>
+                                <div className={"circle green"}></div>
+                            </div>
+                            <div className={"title-container"}>
+                                <div className={"title"}>anon@hackclub - cipher</div>
+                            </div>
+                        </div>
+                        <div className={"body"}>
+                            <p>anon@hackclub ~ % <span className={"bright"}>./connect --community</span></p>
+                            <p>
+                                INIT handshake...<br/>
+                                RESOLVING: <span className="accent">hackclub.com/slack</span><br/>
+                                STATUS: <span className="success">FRIENDLY</span><br/>
+                                NODES: <span className="info">49,567</span><br/>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section style={{
+                height: "100vh",
+                width: "100%",
+            }}>
+                <div className={"divider"}>
+                    <div className="track">
+                        <span>{generateBinary()}</span>
+                        <span>{generateBinary()}</span>
+                    </div>
+                </div>
+                <div className={"glow"}/>
             </section>
         </>
     )

src/styles/App.css

@@ -6,4 +6,29 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+}
+
+#trailer {
+    height: 1.5rem;
+    width: 1.5rem;
+    background-color: white;
+    border-radius: 1.5rem;
+
+    position: fixed;
+
+    top: 0;
+    left: 0;
+    z-index: 100000;
+
+    pointer-events: none;
+    opacity: 0;
+
+    transition: opacity 500ms ease;
+
+    display: grid;
+    place-items: center;
+}
+
+*:hover > #trailer {
+    opacity: 1;
 }