added frontend + securing beta server invites

2026-01-02 22:50:02 +05:30
parent cb12b8ef75
commit 9b17a99456
52 changed files with 5409 additions and 5 deletions
--- a/web/components/Hero.tsx
+++ b/web/components/Hero.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import React, { useRef } from "react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import Link from "next/link";
+
+gsap.registerPlugin(useGSAP);
+
+interface HeroProps {
+    authButton?: React.ReactNode;
+}
+
+const Hero = ({ authButton }: HeroProps) => {
+    const container = useRef(null);
+    const titleRef = useRef(null);
+    const textRef = useRef(null);
+    const btnRef = useRef(null);
+
+    useGSAP(
+        () => {
+            const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
+
+            tl.from(titleRef.current, {
+                y: 50,
+                opacity: 0,
+                duration: 1,
+                stagger: 0.2,
+            })
+                .from(
+                    textRef.current,
+                    {
+                        y: 30,
+                        opacity: 0,
+                        duration: 0.8,
+                    },
+                    "-=0.5"
+                )
+                .from(
+                    btnRef.current,
+                    {
+                        y: 20,
+                        opacity: 0,
+                        duration: 0.6,
+                    },
+                    "-=0.4"
+                );
+        },
+        { scope: container }
+    );
+
+    return (
+        <section
+            ref={container}
+            className="min-h-screen flex flex-col items-center justify-center text-center px-4 relative"
+        >
+            <div className="max-w-4xl mx-auto space-y-8">
+                <div className="inline-block px-4 py-1 mb-4 border border-blue-500/30 rounded-full bg-blue-500/10 backdrop-blur-sm">
+                    <span className="text-sm font-medium text-blue-300">Under Development - If you want pre-release access, contact <span className="font-bold">_void_x_</span> on Discord.</span>
+                </div>
+                <h1
+                    ref={titleRef}
+                    className="text-6xl md:text-8xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-white via-blue-200 to-slate-400"
+                >
+                    VOID SENTINEL
+                </h1>
+                <p
+                    ref={textRef}
+                    className="text-xl md:text-2xl text-gray-400 max-w-2xl mx-auto italic"
+                >
+                    &ldquo;I am the sentinel at the edge of the void. A warden against the shadows and an echo of light for those within. I protect, I entertain, I watch.&rdquo;
+                </p>
+                <div
+                    ref={btnRef}
+                    className="flex flex-col sm:flex-row gap-4 justify-center items-center"
+                >
+                    {authButton}
+                    <Link href="/docs" className="px-8 py-2 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 text-white rounded-full font-semibold transition-all hover:scale-105 flex items-center gap-2 backdrop-blur-sm">
+                        Documentation
+                    </Link>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default Hero;