import React from "react"; import { Container } from "@/components/ui/container"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { ArrowRight, Sparkles, Shield, Zap, Globe, ChevronDown, Star, Layers, CheckCircle2, } from "lucide-react"; // ── Tilt Card Hook ─────────────────────────────────────────────────── function useTilt(ref: React.RefObject, maxTilt = 8) { React.useEffect(() => { const el = ref.current; if (!el) return; const onMove = (e: MouseEvent) => { const rect = el.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const midX = rect.width / 2; const midY = rect.height / 2; const tiltX = ((y - midY) / midY) * maxTilt; const tiltY = ((x - midX) / midX) * -maxTilt; el.style.transform = `perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) scale3d(1.02,1.02,1.02)`; }; const onLeave = () => { el.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1,1,1)`; }; el.addEventListener("mousemove", onMove); el.addEventListener("mouseleave", onLeave); return () => { el.removeEventListener("mousemove", onMove); el.removeEventListener("mouseleave", onLeave); }; }, [ref, maxTilt]); } // ── Animated floating orbs (background decoration) ────────────────── function FloatingOrbs() { return (

); } // ── 3D Geometric Cube (pure CSS) ──────────────────────────────────── function GeometricCube({ tiltRef }: { tiltRef: React.RefObject }) { return (

{/* Outer glow */}

{/* Main cube body */}

{/* Inner geometric rings */}

{/* Center icon cluster */}

{/* Orbiting dots */} {[0, 1, 2, 3].map((i) => (

))} {/* Corner accents */}

); } // ── Stats Bar ────────────────────────────────────────────────────── function StatsRow() { const stats = [ { label: "Active Users", value: "12K+", icon: Zap }, { label: "Uptime", value: "99.9%", icon: Shield }, { label: "Countries", value: "48+", icon: Globe }, ]; return (

{stats.map((s) => (

{s.value}

{s.label}

))}

); } // ── Trusted By ───────────────────────────────────────────────────── function TrustedBy() { const brands = ["Vercel", "Linear", "Railway", "Supabase", "Netlify"]; return (

{brands.map((b) => ( {b} ))}

); } // ── Testimonial Preview ──────────────────────────────────────────── function TestimonialPreview() { return (

{[1, 5, 12, 20].map((n) => (

))}

{Array.from({ length: 5 }).map((_, i) => ( ))}

Loved by 200+ teams

); } // ── Floating Feature Cards ───────────────────────────────────────── function FloatingFeature({ icon: Icon, label, desc, className = "" }: { icon: React.ElementType; label: string; desc: string; className?: string; }) { return ( ); } // ═══════════════════════════════════════════════════════════════════ // MAIN COMPONENT // ═══════════════════════════════════════════════════════════════════ export default function App() { const cubeRef = React.useRef(null); useTilt(cubeRef, 10); return (

{/* ── Hero ────────────────────────────────────────────────── */}

{/* Floating feature cards */}

{/* Left: Content */}

Now in Public Beta v2.0

Build{" "} Faster
Than Light.

Nexus is the next-gen infrastructure platform that lets you ship production-ready apps in minutes, not days. Deploy globally with zero config.

{/* Right: 3D Cube */}

{/* Scroll indicator */}

Scroll

{/* ── Key Features ──────────────────────────────────────────── */}

); } // ── Play Icon ────────────────────────────────────────────────────── function PlayIcon({ className = "" }: { className?: string }) { return ( ); } // ── Features Section ─────────────────────────────────────────────── function FeaturesSection() { const features = [ { icon: Zap, title: "Blazing Speed", desc: "Edge-optimized infrastructure with sub-50ms response times globally.", }, { icon: Shield, title: "Zero-Trust Security", desc: "End-to-end encryption, SOC 2 Type II, and automated compliance.", }, { icon: Globe, title: "Global by Default", desc: "Deploy to 48+ regions with automatic failover and load balancing.", }, { icon: Layers, title: "Unified Stack", desc: "One platform for databases, queues, storage, and serverless functions.", }, ]; return (

Why Nexus

Everything you need to{" "} ship at scale

No more stitching together a dozen services. One platform, one workflow, infinite possibilities.

{features.map((f) => (

{f.title}

{f.desc}

))}

); }

Build{" "} Faster Than Light.

Everything you need to{" "} ship at scale

{f.title}

Build{" "} Faster
Than Light.

3D Geometric Cube with Interactive Tilt Effect