Home Page

frontend/app/globals.css

@@ -29,10 +29,9 @@ body {
 
 a { color: inherit; text-decoration: none; }
 
-::-webkit-scrollbar { width: 8px; height: 8px; }
-::-webkit-scrollbar-track { background: #e0e5ec; }
-::-webkit-scrollbar-thumb { background: #b8bec7; border-radius: 4px; }
-::-webkit-scrollbar-thumb:hover { background: #a0a5ad; }
+/* Hide scrollbars globally */
+::-webkit-scrollbar { display: none; width: 0; height: 0; }
+* { scrollbar-width: none; -ms-overflow-style: none; }
 
 /* ===== NEUMORPHISM ===== */
 .neu-card {
@@ -282,7 +281,7 @@ a { color: inherit; text-decoration: none; }
   display: block;
   width: 22px;
   height: 2px;
-  background: #f1f5f9;
+  background: #4a5568;
   border-radius: 2px;
   transition: all 0.3s ease;
 }

frontend/app/page.tsx

@@ -71,23 +71,17 @@ export default function Home() {
         {mounted && <ParallaxScene />}
 
         <div style={{ position: "relative", zIndex: 1, textAlign: "center", maxWidth: "720px" }}>
-          <div className="anim-fade-up delay-1" style={{ marginBottom: "16px" }}>
-            <span className="badge-blue" style={{ padding: "6px 16px", borderRadius: "9999px", fontSize: "0.7rem", fontWeight: 700, letterSpacing: "0.1em" }}>
-              NEW PLATFORM
-            </span>
-          </div>
-
-          <h1 className="anim-fade-up delay-2" style={{ fontSize: "clamp(2rem, 5vw, 3.2rem)", fontWeight: 900, color: "#f1f5f9", lineHeight: 1.1, marginBottom: "18px", letterSpacing: "-0.02em" }}>
+          <h1 className="anim-fade-up delay-1" style={{ fontSize: "clamp(2rem, 5vw, 3.2rem)", fontWeight: 900, color: "#f1f5f9", lineHeight: 1.1, marginBottom: "18px", letterSpacing: "-0.02em" }}>
             OBJECT
             <span style={{ display: "block", color: "#1E90FF" }}>INTELLIGENCE</span>
           </h1>
 
-          <p className="anim-fade-up delay-3" style={{ color: "#94a3b8", fontSize: "1rem", lineHeight: 1.7, maxWidth: "560px", margin: "0 auto 32px" }}>
+          <p className="anim-fade-up delay-2" style={{ color: "#94a3b8", fontSize: "1rem", lineHeight: 1.7, maxWidth: "560px", margin: "0 auto 32px" }}>
             Real-time multi-pipeline AI detection and recognition platform.
             Powered by RT-DETR, YOLO-World, and visual embeddings.
           </p>
 
-          <div className="anim-fade-up delay-4" style={{ display: "flex", gap: "12px", justifyContent: "center", flexWrap: "wrap" }}>
+          <div className="anim-fade-up delay-3" style={{ display: "flex", gap: "12px", justifyContent: "center", flexWrap: "wrap" }}>
             <Link href="/live" className="neu-btn-primary" style={{ padding: "14px 28px", fontSize: "0.85rem" }}>
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
               Live Testing
@@ -103,11 +97,14 @@ export default function Home() {
       {/* ===== SCROLLING BANNER ===== */}
       <div
         style={{
-          background: "linear-gradient(90deg, var(--bg-dark) 0%, #0f1729 50%, var(--bg-dark) 100%)",
-          borderTop: "1px solid rgba(30, 144, 255, 0.1)",
-          borderBottom: "1px solid rgba(30, 144, 255, 0.1)",
-          overflow: "hidden",
+          background: "#0a0e17",
+          borderTop: "2px solid #1E90FF",
+          borderBottom: "3px solid #1E90FF",
+          boxShadow: "0 4px 24px rgba(30, 144, 255, 0.25)",
+          overflow: "visible",
           padding: "14px 0",
+          position: "relative",
+          zIndex: 5,
         }}
       >
         <div
@@ -125,7 +122,7 @@ export default function Home() {
                 fontSize: "0.75rem",
                 fontWeight: 700,
                 letterSpacing: "0.15em",
-                color: "rgba(30, 144, 255, 0.5)",
+                color: "#1E90FF",
                 whiteSpace: "nowrap",
                 display: "flex",
                 alignItems: "center",
@@ -133,7 +130,7 @@ export default function Home() {
               }}
             >
               {item}
-              <span style={{ width: "4px", height: "4px", borderRadius: "50%", background: "rgba(30, 144, 255, 0.3)" }} />
+              <span style={{ width: "4px", height: "4px", borderRadius: "50%", background: "#64B5F6" }} />
             </span>
           ))}
         </div>
@@ -145,6 +142,9 @@ export default function Home() {
         `}</style>
       </div>
 
+      {/* Divider */}
+      <div style={{ height: "2px", background: "linear-gradient(90deg, transparent 0%, #1E90FF 20%, #1E90FF 80%, transparent 100%)", margin: "0 auto", maxWidth: "400px", opacity: 0.2 }} />
+
       {/* ===== PIPELINE CARDS ===== */}
       <section style={{ maxWidth: "1200px", margin: "0 auto", padding: "80px 24px" }}>
         <div style={{ textAlign: "center", marginBottom: "48px" }}>
@@ -203,14 +203,17 @@ export default function Home() {
         </div>
       </section>
 
+      {/* Divider */}
+      <div style={{ height: "2px", background: "linear-gradient(90deg, transparent 0%, #1E90FF 20%, #1E90FF 80%, transparent 100%)", margin: "0 auto", maxWidth: "400px", opacity: 0.2 }} />
+
       {/* ===== AI PIPELINE ===== */}
-      <section style={{ background: "var(--bg-dark)", padding: "80px 24px" }}>
+      <section style={{ background: "linear-gradient(180deg, #e8edf5 0%, #dbe4f0 100%)", padding: "80px 24px" }}>
         <div style={{ maxWidth: "1200px", margin: "0 auto" }}>
           <div style={{ textAlign: "center", marginBottom: "48px" }}>
             <p className="anim-fade-up" style={{ fontSize: "0.7rem", fontWeight: 700, letterSpacing: "0.2em", color: "#1E90FF", marginBottom: "8px", textTransform: "uppercase" }}>
               How It Works
             </p>
-            <h2 className="anim-fade-up delay-1" style={{ fontSize: "clamp(1.5rem, 3vw, 2rem)", fontWeight: 800, color: "#f1f5f9" }}>
+            <h2 className="anim-fade-up delay-1" style={{ fontSize: "clamp(1.5rem, 3vw, 2rem)", fontWeight: 800, color: "#1a202c" }}>
               AI Processing Pipeline
             </h2>
           </div>
@@ -219,7 +222,7 @@ export default function Home() {
             {STEPS.map((s, i) => (
               <div
                 key={s.num}
-                className={`neu-card-dark anim-scale-in delay-${i + 1}`}
+                className={`neu-card anim-scale-in delay-${i + 1}`}
                 style={{ padding: "28px 20px", textAlign: "center", position: "relative" }}
               >
                 <div
@@ -237,7 +240,7 @@ export default function Home() {
                 <span style={{ fontSize: "0.6rem", fontWeight: 700, letterSpacing: "0.15em", color: "#1E90FF", display: "block", marginBottom: "10px" }}>
                   {s.num}
                 </span>
-                <h4 style={{ fontSize: "0.8rem", fontWeight: 700, color: "#f1f5f9", marginBottom: "6px", letterSpacing: "0.08em" }}>
+                <h4 style={{ fontSize: "0.8rem", fontWeight: 700, color: "#1a202c", marginBottom: "6px", letterSpacing: "0.08em" }}>
                   {s.title}
                 </h4>
                 <p style={{ fontSize: "0.7rem", color: "#64748b" }}>{s.desc}</p>
@@ -247,6 +250,9 @@ export default function Home() {
         </div>
       </section>
 
+      {/* Divider */}
+      <div style={{ height: "2px", background: "linear-gradient(90deg, transparent 0%, #1E90FF 20%, #1E90FF 80%, transparent 100%)", margin: "0 auto", maxWidth: "400px", opacity: 0.2 }} />
+
       {/* ===== LOCK MODE PREVIEW ===== */}
       <section style={{ maxWidth: "1200px", margin: "0 auto", padding: "80px 24px" }}>
         <div
@@ -339,40 +345,43 @@ export default function Home() {
       </section>
 
       {/* ===== BOTTOM CTA ===== */}
-      <section style={{ background: "var(--bg-dark)", padding: "80px 24px" }}>
-        <div style={{ maxWidth: "700px", margin: "0 auto", textAlign: "center" }}>
-          <h2 className="anim-fade-up" style={{ fontSize: "clamp(1.5rem, 3vw, 2rem)", fontWeight: 800, color: "#f1f5f9", marginBottom: "12px" }}>
-            Start Detecting
-          </h2>
-          <p className="anim-fade-up delay-1" style={{ color: "#94a3b8", fontSize: "0.9rem", marginBottom: "32px" }}>
-            Launch real-time detection in your browser.
-          </p>
+      <div style={{ height: "2px", background: "linear-gradient(90deg, transparent 0%, #1E90FF 20%, #1E90FF 80%, transparent 100%)", margin: "0 auto", maxWidth: "400px", opacity: 0.2 }} />
+      <section style={{ background: "linear-gradient(180deg, #e8edf5 0%, #dbe4f0 100%)", padding: "80px 24px" }}>
+        <div style={{ maxWidth: "700px", margin: "0 auto" }}>
+          <div className="neu-card-dark" style={{ padding: "48px 40px", textAlign: "center", border: "1px solid rgba(30, 144, 255, 0.15)" }}>
+            <h2 className="anim-fade-up" style={{ fontSize: "clamp(1.5rem, 3vw, 2rem)", fontWeight: 800, color: "#f1f5f9", marginBottom: "12px" }}>
+              Start Detecting
+            </h2>
+            <p className="anim-fade-up delay-1" style={{ color: "#94a3b8", fontSize: "0.9rem", marginBottom: "32px" }}>
+              Launch real-time detection in your browser.
+            </p>
 
-          <div className="anim-fade-up delay-2" style={{ display: "flex", gap: "16px", justifyContent: "center", flexWrap: "wrap" }}>
-            <Link
-              href="/live"
-              className="neu-btn-primary"
-              style={{ padding: "16px 32px", fontSize: "0.9rem", borderRadius: "14px" }}
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
-              Live Testing
-            </Link>
-            <Link
-              href="/objects"
-              className="neu-btn-primary"
-              style={{ padding: "16px 32px", fontSize: "0.9rem", borderRadius: "14px" }}
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
-              Object Studio
-            </Link>
-            <Link
-              href="/guides"
-              className="neu-btn-primary"
-              style={{ padding: "16px 32px", fontSize: "0.9rem", borderRadius: "14px" }}
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
-              Read Guides
-            </Link>
+            <div className="anim-fade-up delay-2" style={{ display: "flex", gap: "16px", justifyContent: "center", flexWrap: "wrap" }}>
+              <Link
+                href="/live"
+                className="neu-btn-primary"
+                style={{ padding: "16px 32px", fontSize: "0.9rem", borderRadius: "14px" }}
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+                Live Testing
+              </Link>
+              <Link
+                href="/objects"
+                className="neu-btn-primary"
+                style={{ padding: "16px 32px", fontSize: "0.9rem", borderRadius: "14px" }}
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+                Object Studio
+              </Link>
+              <Link
+                href="/guides"
+                className="neu-btn-primary"
+                style={{ padding: "16px 32px", fontSize: "0.9rem", borderRadius: "14px" }}
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
+                Read Guides
+              </Link>
+            </div>
           </div>
         </div>
       </section>

frontend/components/Footer.tsx

@@ -26,11 +26,13 @@ export default function Footer() {
           top: "50%",
           left: "50%",
           transform: "translate(-50%, -50%)",
-          whiteSpace: "nowrap",
-          fontSize: "clamp(3rem, 10vw, 8rem)",
+          width: "1400px",
+          maxWidth: "calc(100% - 48px)",
+          textAlign: "center",
+          fontSize: "clamp(2.5rem, 8vw, 7rem)",
           fontWeight: 900,
-          letterSpacing: "0.06em",
-          color: "rgba(30, 144, 255, 0.04)",
+          letterSpacing: "0.08em",
+          color: "rgba(30, 144, 255, 0.035)",
           userSelect: "none",
           pointerEvents: "none",
           lineHeight: 1,

frontend/components/Navbar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { useState, useEffect } from "react";
 
 const NAV_LINKS = [
@@ -12,20 +13,9 @@ const NAV_LINKS = [
 ];
 
 export default function Navbar() {
-  const [online, setOnline] = useState(false);
+  const pathname = usePathname();
   const [menuOpen, setMenuOpen] = useState(false);
 
-  useEffect(() => {
-    const check = () =>
-      fetch("/backend-api/health", { method: "GET" })
-        .then((r) => r.ok)
-        .then(setOnline)
-        .catch(() => setOnline(false));
-    check();
-    const id = setInterval(check, 8000);
-    return () => clearInterval(id);
-  }, []);
-
   useEffect(() => {
     if (menuOpen) {
       document.body.style.overflow = "hidden";
@@ -42,9 +32,9 @@ export default function Navbar() {
           position: "sticky",
           top: 0,
           zIndex: 100,
-          background: "rgba(10, 14, 23, 0.92)",
-          backdropFilter: "blur(16px)",
-          borderBottom: "1px solid rgba(30, 144, 255, 0.15)",
+          background: "rgba(30, 144, 255, 0.06)",
+          backdropFilter: "blur(12px)",
+          borderBottom: "1px solid rgba(30, 144, 255, 0.1)",
           padding: "0 24px",
           height: "60px",
           display: "flex",
@@ -81,55 +71,47 @@ export default function Navbar() {
                 <path d="M2 12l10 5 10-5" />
               </svg>
             </div>
-            <span style={{ color: "#f1f5f9", fontWeight: 800, fontSize: "0.95rem", letterSpacing: "0.08em" }}>
+            <span style={{ color: "#1a202c", fontWeight: 800, fontSize: "0.95rem", letterSpacing: "0.08em" }}>
               OBJECT INTELLIGENCE
             </span>
           </Link>
 
           {/* Desktop nav right */}
           <div className="desktop-nav" style={{ display: "flex", alignItems: "center", gap: "4px" }}>
-            {NAV_LINKS.map((l) => (
-              <Link
-                key={l.href}
-                href={l.href}
-                style={{
-                  padding: "8px 14px",
-                  fontSize: "0.75rem",
-                  fontWeight: 700,
-                  letterSpacing: "0.1em",
-                  color: "#94a3b8",
-                  borderRadius: "8px",
-                  transition: "all 0.2s ease",
-                }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.color = "#1E90FF";
-                  e.currentTarget.style.background = "rgba(30, 144, 255, 0.08)";
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.color = "#94a3b8";
-                  e.currentTarget.style.background = "transparent";
-                }}
-              >
-                {l.label}
-              </Link>
-            ))}
-
-            {/* Status dot */}
-            <div style={{ display: "flex", alignItems: "center", gap: "6px", marginLeft: "12px", paddingLeft: "12px", borderLeft: "1px solid rgba(255,255,255,0.08)" }}>
-              <div
-                style={{
-                  width: "7px",
-                  height: "7px",
-                  borderRadius: "50%",
-                  background: online ? "#10b981" : "#ef4444",
-                  boxShadow: online ? "0 0 8px rgba(16, 185, 129, 0.6)" : "0 0 8px rgba(239, 68, 68, 0.6)",
-                  animation: online ? "none" : "none",
-                }}
-              />
-              <span style={{ fontSize: "0.65rem", color: "#64748b", fontWeight: 600, letterSpacing: "0.05em" }}>
-                {online ? "ONLINE" : "OFFLINE"}
-              </span>
-            </div>
+            {NAV_LINKS.map((l) => {
+              const isActive = l.href === "/" ? pathname === "/" : pathname.startsWith(l.href);
+              return (
+                <Link
+                  key={l.href}
+                  href={l.href}
+                  style={{
+                    padding: "8px 14px",
+                    fontSize: "0.75rem",
+                    fontWeight: 700,
+                    letterSpacing: "0.1em",
+                    color: isActive ? "#1E90FF" : "#64748b",
+                    borderRadius: "10px",
+                    transition: "all 0.2s ease",
+                    background: isActive ? "rgba(30, 144, 255, 0.1)" : "transparent",
+                    boxShadow: isActive ? "inset 2px 2px 4px #b8bec7, inset -2px -2px 4px #ffffff" : "none",
+                  }}
+                  onMouseEnter={(e) => {
+                    if (!isActive) {
+                      e.currentTarget.style.color = "#1E90FF";
+                      e.currentTarget.style.background = "rgba(30, 144, 255, 0.06)";
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    if (!isActive) {
+                      e.currentTarget.style.color = "#64748b";
+                      e.currentTarget.style.background = "transparent";
+                    }
+                  }}
+                >
+                  {l.label}
+                </Link>
+              );
+            })}
           </div>
 
           {/* Mobile hamburger */}

frontend/components/ParallaxScene.tsx

@@ -3,6 +3,22 @@
 import { useEffect, useRef } from "react";
 import * as THREE from "three";
 
+interface Shape {
+  mesh: THREE.Mesh;
+  vx: number;
+  vy: number;
+  vz: number;
+  rvx: number;
+  rvy: number;
+  baseX: number;
+  baseY: number;
+  baseZ: number;
+  speed: number;
+  scatterX: number;
+  scatterY: number;
+  scatterZ: number;
+}
+
 export default function ParallaxScene() {
   const mountRef = useRef<HTMLDivElement>(null);
   const mouseRef = useRef({ x: 0, y: 0 });
@@ -21,50 +37,178 @@ export default function ParallaxScene() {
     renderer.setClearColor(0x000000, 0);
     el.appendChild(renderer.domElement);
 
-    const blueMat = new THREE.MeshBasicMaterial({ color: 0x1e90ff, wireframe: true, transparent: true, opacity: 0.12 });
-    const blueMatSolid = new THREE.MeshBasicMaterial({ color: 0x1e90ff, transparent: true, opacity: 0.06 });
-    const accentMat = new THREE.MeshBasicMaterial({ color: 0x64b5f6, wireframe: true, transparent: true, opacity: 0.08 });
+    const blueMat = new THREE.MeshBasicMaterial({ color: 0x1e90ff, wireframe: true, transparent: true, opacity: 0.15 });
+    const blueSolid = new THREE.MeshBasicMaterial({ color: 0x1e90ff, transparent: true, opacity: 0.06 });
+    const accentMat = new THREE.MeshBasicMaterial({ color: 0x64b5f6, wireframe: true, transparent: true, opacity: 0.1 });
+    const accentSolid = new THREE.MeshBasicMaterial({ color: 0x64b5f6, transparent: true, opacity: 0.04 });
+    const lineBlue = new THREE.LineBasicMaterial({ color: 0x1e90ff, transparent: true, opacity: 0.12 });
+    const lineAccent = new THREE.LineBasicMaterial({ color: 0x64b5f6, transparent: true, opacity: 0.08 });
 
-    const shapes: { mesh: THREE.Mesh; speed: number; rotSpeed: number }[] = [];
+    const shapes: Shape[] = [];
 
-    const addShape = (geo: THREE.BufferGeometry, mat: THREE.Material, x: number, y: number, z: number, speed: number, rotSpeed: number) => {
-      const mesh = new THREE.Mesh(geo, mat);
+    const addShape = (geo: THREE.BufferGeometry, mat: THREE.Material | THREE.LineBasicMaterial, x: number, y: number, z: number, speed: number) => {
+      const mesh = "isLine" in mat ? new THREE.Line(geo as THREE.BufferGeometry, mat as THREE.LineBasicMaterial) : new THREE.Mesh(geo as THREE.BufferGeometry, mat as THREE.MeshBasicMaterial);
       mesh.position.set(x, y, z);
+      mesh.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI);
       scene.add(mesh);
-      shapes.push({ mesh, speed, rotSpeed });
+      shapes.push({
+        mesh: mesh as unknown as THREE.Mesh,
+        vx: (Math.random() - 0.5) * 0.008 * speed,
+        vy: (Math.random() - 0.5) * 0.006 * speed,
+        vz: (Math.random() - 0.5) * 0.004 * speed,
+        rvx: (Math.random() - 0.5) * 0.01 * speed,
+        rvy: (Math.random() - 0.5) * 0.012 * speed,
+        baseX: x,
+        baseY: y,
+        baseZ: z,
+        speed,
+        scatterX: 0,
+        scatterY: 0,
+        scatterZ: 0,
+      });
     };
 
-    // Background layer - large slow shapes
-    addShape(new THREE.IcosahedronGeometry(4, 0), blueMatSolid, -12, 8, -15, 0.3, 0.1);
-    addShape(new THREE.OctahedronGeometry(3, 0), blueMat, 14, -6, -12, 0.2, 0.15);
-    addShape(new THREE.TetrahedronGeometry(2.5, 0), accentMat, -8, -10, -10, 0.25, 0.2);
-    addShape(new THREE.IcosahedronGeometry(2, 1), blueMat, 10, 10, -8, 0.35, 0.12);
-    addShape(new THREE.BoxGeometry(3, 3, 3), blueMatSolid, 0, -8, -14, 0.15, 0.08);
+    const spread = 35;
+    const spreadY = 20;
+
+    // === LARGE BACKGROUND SHAPES (7) ===
+    addShape(new THREE.IcosahedronGeometry(5, 0), blueSolid, -spread, spreadY, -20, 0.3);
+    addShape(new THREE.OctahedronGeometry(4, 0), blueMat, spread, -spreadY * 0.8, -18, 0.25);
+    addShape(new THREE.TetrahedronGeometry(3.5, 0), accentMat, -spread * 0.7, -spreadY, -16, 0.35);
+    addShape(new THREE.IcosahedronGeometry(3, 1), blueMat, spread * 0.8, spreadY * 0.7, -14, 0.4);
+    addShape(new THREE.BoxGeometry(4, 4, 4), blueSolid, 0, -spreadY * 0.6, -22, 0.2);
+    addShape(new THREE.DodecahedronGeometry(3.5, 0), accentMat, -spread * 0.9, spreadY * 0.3, -17, 0.28);
+    addShape(new THREE.IcosahedronGeometry(2.5, 0), blueSolid, spread * 0.95, -spreadY * 0.4, -19, 0.32);
+
+    // === MID-LAYER SHAPES (14) ===
+    addShape(new THREE.OctahedronGeometry(2.2, 0), blueMat, -spread * 0.5, spreadY * 0.6, -6, 0.5);
+    addShape(new THREE.TetrahedronGeometry(2, 0), accentMat, spread * 0.4, spreadY * 0.3, -5, 0.55);
+    addShape(new THREE.IcosahedronGeometry(1.8, 0), blueSolid, -spread * 0.3, -spreadY * 0.5, -4, 0.45);
+    addShape(new THREE.BoxGeometry(1.8, 1.8, 1.8), accentMat, spread * 0.35, -spreadY * 0.4, -7, 0.48);
+    addShape(new THREE.DodecahedronGeometry(1.6, 0), blueMat, -spread * 0.75, spreadY * 0.15, -8, 0.52);
+    addShape(new THREE.OctahedronGeometry(1.4, 0), accentSolid, spread * 0.85, spreadY * 0.5, -6, 0.6);
+    addShape(new THREE.TetrahedronGeometry(1.2, 0), blueMat, -spread * 0.15, spreadY * 0.8, -5, 0.58);
+    addShape(new THREE.IcosahedronGeometry(1.5, 0), blueSolid, spread * 0.2, -spreadY * 0.7, -9, 0.42);
+    addShape(new THREE.BoxGeometry(1.4, 1.4, 1.4), accentMat, -spread * 0.6, -spreadY * 0.2, -7, 0.5);
+    addShape(new THREE.OctahedronGeometry(1.3, 0), blueMat, spread * 0.65, spreadY * 0.1, -4, 0.53);
+    addShape(new THREE.DodecahedronGeometry(1.1, 0), accentMat, -spread * 0.4, spreadY * 0.45, -8, 0.47);
+    addShape(new THREE.TetrahedronGeometry(1, 0), blueSolid, spread * 0.5, -spreadY * 0.55, -6, 0.56);
+    addShape(new THREE.IcosahedronGeometry(1.2, 0), blueMat, -spread * 0.25, -spreadY * 0.35, -5, 0.44);
+    addShape(new THREE.BoxGeometry(1, 1, 1), accentMat, spread * 0.15, spreadY * 0.65, -7, 0.51);
+
+    // === FRONT LAYER - SMALL FAST (18) ===
+    for (let i = 0; i < 18; i++) {
+      const geos = [
+        new THREE.BoxGeometry(0.5, 0.5, 0.5),
+        new THREE.OctahedronGeometry(0.4, 0),
+        new THREE.TetrahedronGeometry(0.35, 0),
+        new THREE.IcosahedronGeometry(0.3, 0),
+        new THREE.DodecahedronGeometry(0.35, 0),
+      ];
+      const mats = [blueMat, accentMat, blueSolid, accentSolid];
+      const x = (Math.random() - 0.5) * spread * 2;
+      const y = (Math.random() - 0.5) * spreadY * 2;
+      const z = Math.random() * 8 - 2;
+      addShape(geos[i % geos.length], mats[i % mats.length], x, y, z, 0.7 + Math.random() * 0.5);
+    }
+
+    // === TINY SCATTERED SHAPES (20) ===
+    for (let i = 0; i < 20; i++) {
+      const geos = [
+        new THREE.BoxGeometry(0.2, 0.2, 0.2),
+        new THREE.TetrahedronGeometry(0.15, 0),
+        new THREE.OctahedronGeometry(0.18, 0),
+      ];
+      const mats = [accentMat, blueSolid, accentSolid];
+      const x = (Math.random() - 0.5) * spread * 2;
+      const y = (Math.random() - 0.5) * spreadY * 2;
+      const z = Math.random() * 10;
+      addShape(geos[i % geos.length], mats[i % mats.length], x, y, z, 0.9 + Math.random() * 0.4);
+    }
 
-    // Middle layer
-    addShape(new THREE.OctahedronGeometry(1.8, 0), blueMat, -6, 4, -4, 0.5, 0.2);
-    addShape(new THREE.TetrahedronGeometry(1.5, 0), accentMat, 8, 2, -3, 0.6, 0.25);
-    addShape(new THREE.IcosahedronGeometry(1.2, 0), blueMatSolid, -3, -4, -2, 0.4, 0.18);
+    // === CV-RELATED: Bounding box outlines (6) ===
+    for (let i = 0; i < 6; i++) {
+      const size = 1.5 + Math.random() * 3;
+      const corners = new Float32Array([
+        -size, -size, 0, size, -size, 0,
+        size, -size, 0, size, size, 0,
+        size, size, 0, -size, size, 0,
+        -size, size, 0, -size, -size, 0,
+      ]);
+      const geo = new THREE.BufferGeometry();
+      geo.setAttribute("position", new THREE.BufferAttribute(corners, 3));
+      const x = (Math.random() - 0.5) * spread * 1.8;
+      const y = (Math.random() - 0.5) * spreadY * 1.8;
+      const z = Math.random() * 6 - 3;
+      addShape(geo, i % 2 === 0 ? lineBlue : lineAccent, x, y, z, 0.4 + Math.random() * 0.3);
+    }
+
+    // === CV-RELATED: Crosshairs (4) ===
+    for (let i = 0; i < 4; i++) {
+      const s = 0.8 + Math.random() * 1.5;
+      const pts = new Float32Array([
+        -s, 0, 0, s, 0, 0,
+        0, -s, 0, 0, s, 0,
+      ]);
+      const geo = new THREE.BufferGeometry();
+      geo.setAttribute("position", new THREE.BufferAttribute(pts, 3));
+      const x = (Math.random() - 0.5) * spread * 1.6;
+      const y = (Math.random() - 0.5) * spreadY * 1.6;
+      const z = Math.random() * 5 - 1;
+      addShape(geo, lineBlue, x, y, z, 0.6 + Math.random() * 0.3);
+    }
 
-    // Front layer - small fast shapes
-    addShape(new THREE.BoxGeometry(0.8, 0.8, 0.8), blueMat, 5, -3, 5, 0.8, 0.4);
-    addShape(new THREE.OctahedronGeometry(0.6, 0), accentMat, -7, 6, 4, 0.9, 0.35);
-    addShape(new THREE.TetrahedronGeometry(0.5, 0), blueMatSolid, 3, 8, 6, 1.0, 0.5);
+    // === CV-RELATED: Diamond detection markers (4) ===
+    for (let i = 0; i < 4; i++) {
+      const s = 0.4 + Math.random() * 0.8;
+      const pts = new Float32Array([
+        0, s, 0, s, 0, 0,
+        s, 0, 0, 0, -s, 0,
+        0, -s, 0, -s, 0, 0,
+        -s, 0, 0, 0, s, 0,
+      ]);
+      const geo = new THREE.BufferGeometry();
+      geo.setAttribute("position", new THREE.BufferAttribute(pts, 3));
+      const x = (Math.random() - 0.5) * spread * 1.5;
+      const y = (Math.random() - 0.5) * spreadY * 1.5;
+      const z = Math.random() * 4;
+      addShape(geo, lineAccent, x, y, z, 0.5 + Math.random() * 0.3);
+    }
 
-    // Particles
+    // === PARTICLES (300) ===
     const particleGeo = new THREE.BufferGeometry();
-    const particleCount = 60;
+    const particleCount = 300;
     const positions = new Float32Array(particleCount * 3);
+    const sizes = new Float32Array(particleCount);
     for (let i = 0; i < particleCount; i++) {
-      positions[i * 3] = (Math.random() - 0.5) * 50;
-      positions[i * 3 + 1] = (Math.random() - 0.5) * 30;
-      positions[i * 3 + 2] = (Math.random() - 0.5) * 30 - 5;
+      positions[i * 3] = (Math.random() - 0.5) * 90;
+      positions[i * 3 + 1] = (Math.random() - 0.5) * 60;
+      positions[i * 3 + 2] = (Math.random() - 0.5) * 35 - 5;
+      sizes[i] = 0.08 + Math.random() * 0.12;
     }
     particleGeo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
-    const particleMat = new THREE.PointsMaterial({ color: 0x1e90ff, size: 0.1, transparent: true, opacity: 0.4 });
+    particleGeo.setAttribute("size", new THREE.BufferAttribute(sizes, 1));
+    const particleMat = new THREE.PointsMaterial({ color: 0x1e90ff, size: 0.14, transparent: true, opacity: 0.5 });
     const particles = new THREE.Points(particleGeo, particleMat);
     scene.add(particles);
 
+    // === TWINKLING STARS (120) ===
+    const starGeo = new THREE.BufferGeometry();
+    const starCount = 120;
+    const starPositions = new Float32Array(starCount * 3);
+    const starPhases = new Float32Array(starCount);
+    for (let i = 0; i < starCount; i++) {
+      starPositions[i * 3] = (Math.random() - 0.5) * 100;
+      starPositions[i * 3 + 1] = (Math.random() - 0.5) * 70;
+      starPositions[i * 3 + 2] = (Math.random() - 0.5) * 20 - 10;
+      starPhases[i] = Math.random() * Math.PI * 2;
+    }
+    starGeo.setAttribute("position", new THREE.BufferAttribute(starPositions, 3));
+    const starMat = new THREE.PointsMaterial({ color: 0xffffff, size: 0.08, transparent: true, opacity: 0.6 });
+    const stars = new THREE.Points(starGeo, starMat);
+    scene.add(stars);
+
+    // Mouse
     const onMouseMove = (e: MouseEvent) => {
       const rect = el.getBoundingClientRect();
       mouseRef.current.x = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
@@ -72,28 +216,75 @@ export default function ParallaxScene() {
     };
     window.addEventListener("mousemove", onMouseMove);
 
+    // Click scatter
+    const onClick = (e: MouseEvent) => {
+      const rect = el.getBoundingClientRect();
+      const cx = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
+      const cy = -((e.clientY - rect.top) / rect.height - 0.5) * 2;
+      shapes.forEach((s) => {
+        const dx = s.mesh.position.x - cx * 15;
+        const dy = s.mesh.position.y - cy * 10;
+        const dist = Math.sqrt(dx * dx + dy * dy) + 1;
+        const force = 4 / dist;
+        s.scatterX += (dx / dist) * force * s.speed;
+        s.scatterY += (dy / dist) * force * s.speed;
+        s.scatterZ += (Math.random() - 0.5) * force;
+      });
+    };
+    el.addEventListener("click", onClick);
+
     let raf: number;
     const animate = () => {
       raf = requestAnimationFrame(animate);
-      const t = Date.now() * 0.001;
       const mx = mouseRef.current.x;
       const my = mouseRef.current.y;
+      const t = Date.now();
 
       shapes.forEach((s) => {
-        s.mesh.rotation.x += s.rotSpeed * 0.008;
-        s.mesh.rotation.y += s.rotSpeed * 0.012;
-        // Parallax offset based on mouse
-        s.mesh.position.x += (s.mesh.position.x * 0.0001 + mx * s.speed * 0.01 - (s.mesh.position.x - s.mesh.position.x)) * 0.02;
+        s.mesh.position.x += s.vx + Math.sin(t * 0.0003 * s.speed + s.baseX) * 0.006;
+        s.mesh.position.y += s.vy + Math.cos(t * 0.0004 * s.speed + s.baseY) * 0.005;
+        s.mesh.position.z += s.vz;
+        s.mesh.rotation.x += s.rvx;
+        s.mesh.rotation.y += s.rvy;
+
+        s.scatterX *= 0.95;
+        s.scatterY *= 0.95;
+        s.scatterZ *= 0.95;
+        s.mesh.position.x += s.scatterX;
+        s.mesh.position.y += s.scatterY;
+        s.mesh.position.z += s.scatterZ;
+
+        const dx = s.mesh.position.x - mx * 15;
+        const dy = s.mesh.position.y - (-my) * 10;
+        const dist = Math.sqrt(dx * dx + dy * dy) + 1;
+        if (dist < 8) {
+          const push = (8 - dist) * 0.015 * s.speed;
+          s.mesh.position.x += (dx / dist) * push;
+          s.mesh.position.y += (dy / dist) * push;
+        }
+
+        const bx = spread + 5, by = spreadY + 5, bz = 25;
+        if (s.mesh.position.x > bx) s.mesh.position.x = -bx;
+        if (s.mesh.position.x < -bx) s.mesh.position.x = bx;
+        if (s.mesh.position.y > by) s.mesh.position.y = -by;
+        if (s.mesh.position.y < -by) s.mesh.position.y = by;
+        if (s.mesh.position.z > 10) s.mesh.position.z = -bz;
+        if (s.mesh.position.z < -bz) s.mesh.position.z = 10;
       });
 
-      // Parallax camera
       camera.position.x += (mx * 2 - camera.position.x) * 0.03;
       camera.position.y += (-my * 1.5 - camera.position.y) * 0.03;
       camera.lookAt(0, 0, 0);
 
-      particles.rotation.y += 0.0005;
+      particles.rotation.y += 0.0004;
       particles.rotation.x += 0.0002;
 
+      // Twinkle stars
+      const starPos = stars.geometry.attributes.position as THREE.BufferAttribute;
+      for (let i = 0; i < starCount; i++) {
+        starMat.opacity = 0.3 + Math.sin(t * 0.002 + starPhases[i]) * 0.35;
+      }
+
       renderer.render(scene, camera);
     };
     animate();
@@ -110,6 +301,7 @@ export default function ParallaxScene() {
       cancelAnimationFrame(raf);
       window.removeEventListener("mousemove", onMouseMove);
       window.removeEventListener("resize", onResize);
+      el.removeEventListener("click", onClick);
       el.removeChild(renderer.domElement);
       renderer.dispose();
     };
@@ -122,7 +314,6 @@ export default function ParallaxScene() {
         position: "absolute",
         inset: 0,
         zIndex: 0,
-        pointerEvents: "none",
       }}
     />
   );

frontend/components/StaggeredMenu.css

@@ -1 +0,0 @@
-.sm-wrap{position:fixed;inset:0;width:100dvw;height:100dvh;z-index:55;pointer-events:none;overflow:hidden}.sm-layers,.sm-panel{position:absolute;inset:0;left:auto;width:100%;height:100%;pointer-events:none;transform:translateX(100%)}.sm-layers{z-index:1}.sm-layer{position:absolute;inset:0;background:#fff}.sm-cream{background:#fff1e4}.sm-peach{background:#ffcf9e}.sm-orange{background:#ff7a00}.sm-panel{z-index:2;background:#fff;pointer-events:auto}.sm-inner{height:100%;padding:7.5rem 2rem 2rem;display:flex;flex-direction:column}.sm-kicker{font-size:.7rem;letter-spacing:.32em;font-weight:800;color:#ff7a00;margin:0 0 2.5rem}.sm-item-wrap{overflow:hidden;border-bottom:1px solid rgba(255,122,0,.2)}.sm-item{position:relative;display:inline-block;padding:1rem 3rem 1rem 0;color:#1d1712;text-decoration:none;font-family:Impact,Haettenschweiler,sans-serif;font-size:clamp(2.6rem,12vw,4.6rem);line-height:.95;letter-spacing:.03em}.sm-item:after{content:attr(data-number);position:absolute;right:.25rem;top:1rem;font:500 .7rem ui-monospace;color:#ff7a00}.sm-item:hover{color:#ff7a00}.sm-foot{margin-top:auto;color:#78695e;font-size:.65rem;letter-spacing:.13em;line-height:1.8}.sm-foot b{color:#ff7a00}.sm-toggle{position:fixed;z-index:60;top:15px;right:16px;width:38px;height:38px;border:0;background:transparent;pointer-events:auto;cursor:pointer;display:grid;place-content:center;gap:5px}.sm-toggle i{display:block;width:22px;height:2px;background:#1d1712;border-radius:2px}.sm-wrap[data-open] .sm-toggle i:nth-child(1){transform:translateY(7px) rotate(45deg)}.sm-wrap[data-open] .sm-toggle i:nth-child(2){opacity:0}.sm-wrap[data-open] .sm-toggle i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}@media(min-width:768px){.sm-panel,.sm-layers{width:440px}.sm-toggle{right:calc((100vw - min(1200px,92vw))/2)} }

frontend/components/StaggeredMenu.tsx

@@ -1,68 +0,0 @@
-"use client";
-import Link from "next/link";
-import { gsap } from "gsap";
-import { useLayoutEffect, useRef, useState, useEffect } from "react";
-import "./StaggeredMenu.css";
-type Item = { label: string; ariaLabel: string; link: string };
-export default function StaggeredMenu({ items }: { items: Item[] }) {
-  const [open, setOpen] = useState(false);
-  const [mounted, setMounted] = useState(false);
-  const panel = useRef<HTMLDivElement>(null);
-  const layers = useRef<HTMLDivElement>(null);
-  const button = useRef<HTMLButtonElement>(null);
-  const labels = useRef<HTMLSpanElement[]>([]);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  useLayoutEffect(() => {
-    if (!mounted) return;
-    const all = [panel.current, ...Array.from(layers.current?.children || [])].filter(Boolean);
-    gsap.set(all, { xPercent: 100 });
-    gsap.set(labels.current, { yPercent: 140, rotate: 10 });
-  }, [mounted]);
-
-  function toggle() {
-    const next = !open;
-    setOpen(next);
-    const layerEls = Array.from(layers.current?.children || []);
-    if (next) {
-      const tl = gsap.timeline();
-      tl.to(layerEls, { xPercent: 0, duration: .5, ease: "power4.out", stagger: .07 })
-        .to(panel.current, { xPercent: 0, duration: .65, ease: "power4.out" }, .15)
-        .to(labels.current, { yPercent: 0, rotate: 0, duration: 1, ease: "power4.out", stagger: .1 }, .35)
-        .to(button.current, { rotate: 180, duration: .5, ease: "power4.out" }, 0);
-    } else {
-      gsap.to([panel.current, ...layerEls], { xPercent: 100, duration: .32, ease: "power3.in" });
-      gsap.to(labels.current, { yPercent: 140, rotate: 10, duration: .15 });
-      gsap.to(button.current, { rotate: 0, duration: .35 });
-    }
-  }
-
-  return (
-    <div className="sm-wrap" data-open={open || undefined} style={{ display: mounted ? undefined : 'none' }}>
-      <div ref={layers} className="sm-layers" aria-hidden="true">
-        <div className="sm-layer sm-cream" />
-        <div className="sm-layer sm-peach" />
-        <div className="sm-layer sm-orange" />
-      </div>
-      <aside ref={panel} className="sm-panel" aria-hidden={!open}>
-        <div className="sm-inner">
-          <p className="sm-kicker">FaceAI // NAVIGATION</p>
-          <nav>{items.map((item, i) => (
-            <div className="sm-item-wrap" key={item.link}>
-              <Link href={item.link} aria-label={item.ariaLabel} onClick={toggle} className="sm-item" data-number={`0${i + 1}`}>
-                <span ref={el => { if (el) labels.current[i] = el }}>{item.label}</span>
-              </Link>
-            </div>
-          ))}</nav>
-          <p className="sm-foot">CONSENTED BIOMETRIC RECOGNITION<br/><b>FaceAI //</b></p>
-        </div>
-      </aside>
-      <button ref={button} className="sm-toggle" aria-label={open ? 'Close menu' : 'Open menu'} aria-expanded={open} onClick={toggle}>
-        <i /><i /><i />
-      </button>
-    </div>
-  );
-}