453 lines
29 KiB
TypeScript
453 lines
29 KiB
TypeScript
/**
|
|
* ╔══════════════════════════════════════════════════════════════════╗
|
|
* ║ ║
|
|
* ║ +-+-+-+-+-+-+-+-+ ║
|
|
* ║ |H|e|x|a|H|o|s|t| ║
|
|
* ║ +-+-+-+-+-+-+-+-+ ║
|
|
* ║ ║
|
|
* ║ © 2026 HexaHost — All Rights Reserved ║
|
|
* ║ ║
|
|
* ║ discord ── https://discord.gg/hexahost ║
|
|
* ║ github ── https://github.com/theoneandonlymace ║
|
|
* ║ ║
|
|
* ╚══════════════════════════════════════════════════════════════════╝
|
|
*/
|
|
"use client";
|
|
|
|
import React from "react";
|
|
import Link from "next/link";
|
|
import { signIn } from "next-auth/react";
|
|
import {
|
|
ShieldCheck,
|
|
Zap,
|
|
BarChart4,
|
|
MessageSquare,
|
|
ChevronRight,
|
|
LayoutDashboard,
|
|
LogIn,
|
|
Layers,
|
|
Sparkles,
|
|
Bot,
|
|
Activity,
|
|
History,
|
|
CheckCircle2,
|
|
ShieldAlert,
|
|
Globe,
|
|
Terminal,
|
|
Cpu,
|
|
Users2,
|
|
Lock,
|
|
Radio,
|
|
Gamepad2,
|
|
Music4,
|
|
User
|
|
} from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<div className="min-h-screen bg-[#020617] text-slate-200 selection:bg-red-500/30 font-sans overflow-x-hidden">
|
|
{/* Dynamic Background */}
|
|
<div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
|
|
<div className="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-red-500/[0.03] blur-[150px] rounded-full animate-pulse" />
|
|
<div className="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] bg-red-600/[0.03] blur-[150px] rounded-full animate-pulse [animation-delay:2s]" />
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="fixed top-0 w-full z-50 border-b border-white/[0.03] bg-[#020617]/80 backdrop-blur-3xl transition-all duration-500">
|
|
<div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
|
<div className="flex items-center gap-4 group cursor-pointer">
|
|
<div className="h-11 w-11 rounded-2xl bg-gradient-to-br from-red-500 to-red-800 flex items-center justify-center shadow-lg shadow-red-500/25 border border-white/20 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500">
|
|
<Bot className="h-6 w-6 text-white" />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<h1 className="text-lg font-bold tracking-tight text-white font-outfit leading-none">{process.env.NEXT_PUBLIC_BRAND_NAME || "HexaHost"}</h1>
|
|
<span className="text-[9px] font-black uppercase tracking-[0.2em] text-red-500/80 mt-1">Dashboard</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="hidden lg:flex items-center gap-10 text-[11px] font-black uppercase tracking-widest text-slate-500">
|
|
<Link href="#features" className="hover:text-red-500 transition-colors">Features</Link>
|
|
<Link href="#architecture" className="hover:text-red-500 transition-colors">Architecture</Link>
|
|
<Link href="#modules" className="hover:text-red-500 transition-colors">Modules</Link>
|
|
<Link href="#network" className="hover:text-red-500 transition-colors">Network</Link>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
onClick={() => signIn('discord', { callbackUrl: '/dashboard' })}
|
|
className="rounded-xl px-7 h-11 font-black uppercase tracking-widest text-[10px] gap-2.5 shadow-2xl shadow-red-500/20 hover:scale-[1.05] active:scale-95 transition-all bg-gradient-to-r from-red-500 to-red-700 border-none"
|
|
>
|
|
<LogIn className="h-3.5 w-3.5" />
|
|
Initialize Console
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero Section */}
|
|
<header className="relative z-10 pt-56 pb-32 px-6">
|
|
<div className="max-w-7xl mx-auto text-center">
|
|
<div className="inline-flex items-center gap-3 px-6 py-2.5 rounded-2xl bg-red-500/[0.03] border border-red-500/10 text-red-500 text-[10px] font-black uppercase tracking-[0.3em] mb-16 animate-in fade-in slide-in-from-bottom-8 duration-1000 backdrop-blur-md">
|
|
<span className="relative flex h-2 w-2">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75"></span>
|
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-red-600"></span>
|
|
</span>
|
|
Neural Core v2 Active • Global Shard 07
|
|
</div>
|
|
|
|
<h1 className="text-6xl sm:text-8xl md:text-[10rem] font-bold text-white tracking-tighter leading-[0.8] mb-12 font-outfit animate-in fade-in slide-in-from-bottom-12 duration-1000 delay-100 uppercase">
|
|
Evolution <br />
|
|
<span className="bg-gradient-to-r from-red-500 via-red-400 to-orange-500 bg-clip-text text-transparent italic font-black">Moderated.</span>
|
|
</h1>
|
|
|
|
<p className="text-lg md:text-2xl text-slate-500 max-w-3xl mx-auto leading-relaxed mb-20 animate-in fade-in slide-in-from-bottom-12 duration-1000 delay-200 font-medium">
|
|
The hyper-performance Discord engine.
|
|
Automated security, cinematic leveling, and precision tools for the world's most elite communities.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-6 animate-in fade-in slide-in-from-bottom-12 duration-1000 delay-300">
|
|
<Button
|
|
onClick={() => signIn('discord', { callbackUrl: '/dashboard' })}
|
|
className="w-full sm:w-auto rounded-2xl px-14 py-9 text-lg font-black uppercase gap-4 group shadow-[0_0_50px_rgba(239,68,68,0.2)] bg-red-600 text-white hover:bg-red-500 border-none transition-all hover:scale-105"
|
|
>
|
|
<LayoutDashboard className="h-6 w-6 group-hover:rotate-12 transition-transform" />
|
|
Open Dashboard
|
|
</Button>
|
|
<Button variant="outline" className="w-full sm:w-auto rounded-2xl px-14 py-9 text-lg font-bold border-white/5 bg-white/[0.02] backdrop-blur-3xl hover:bg-white/[0.05] gap-3 text-white transition-all">
|
|
Add to Server
|
|
<ChevronRight className="h-5 w-5 opacity-40 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Cinematic Dashboard Mockup */}
|
|
<div className="max-w-6xl mx-auto mt-40 relative group animate-in fade-in zoom-in-95 duration-1000 delay-500">
|
|
<div className="absolute -inset-4 bg-gradient-to-r from-red-500/20 to-transparent rounded-[60px] blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-1000" />
|
|
<div className="relative bg-[#020617] border border-white/[0.05] rounded-[50px] overflow-hidden shadow-[0_30px_100px_rgba(0,0,0,0.8)]">
|
|
{/* Fake Window Controls */}
|
|
<div className="h-16 border-b border-white/[0.03] flex items-center justify-between px-10 bg-white/[0.01]">
|
|
<div className="flex items-center gap-3">
|
|
<div className="h-3 w-3 rounded-full bg-red-500/40" />
|
|
<div className="h-3 w-3 rounded-full bg-white/10" />
|
|
<div className="h-3 w-3 rounded-full bg-white/5" />
|
|
</div>
|
|
<div className="px-6 py-2 rounded-2xl bg-white/[0.03] border border-white/[0.05] text-[10px] font-black text-slate-500 tracking-[0.2em] uppercase">
|
|
sec.neural.core // active_node_01
|
|
</div>
|
|
<div className="w-12" />
|
|
</div>
|
|
{/* Content Placeholder with High Contrast */}
|
|
<div className="aspect-[16/10] p-16 flex flex-col gap-16 relative overflow-hidden bg-gradient-to-br from-[#020617] to-[#0a0f1e]">
|
|
<div className="flex items-center justify-between z-10 relative">
|
|
<div className="space-y-6">
|
|
<div className="h-12 w-64 bg-red-500/10 rounded-[20px] border border-red-500/20" />
|
|
<div className="h-6 w-[500px] bg-white/[0.02] rounded-xl" />
|
|
</div>
|
|
<div className="h-20 w-20 rounded-[30px] bg-red-500/10 border border-red-500/20 flex items-center justify-center shadow-[0_0_30px_rgba(239,68,68,0.2)]">
|
|
<Activity className="h-8 w-8 text-red-500 animate-pulse" />
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-10 z-10">
|
|
{[1, 2, 3].map(i => (
|
|
<div key={i} className="h-40 bg-white/[0.02] border border-white/[0.04] rounded-[40px] p-8 space-y-6 hover:border-red-500/20 transition-colors">
|
|
<div className="h-10 w-10 rounded-2xl bg-red-500/10 border border-red-500/20" />
|
|
<div className="h-4 w-2/3 bg-white/5 rounded-lg" />
|
|
<div className="h-3 w-1/2 bg-white/[0.02] rounded-lg" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/* Visual Glow Layer */}
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] h-[90%] bg-red-500/[0.02] blur-[150px] pointer-events-none" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Grid Section */}
|
|
<section id="features" className="py-48 px-6 relative">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex flex-col md:flex-row md:items-end justify-between mb-32 gap-12 px-4">
|
|
<div className="max-w-3xl">
|
|
<h2 className="text-6xl md:text-8xl font-bold text-white tracking-tighter font-outfit mb-8 uppercase italic leading-none">High-Scale <br /><span className="text-red-500 not-italic">Infrastructure.</span></h2>
|
|
<p className="text-2xl text-slate-500 font-medium leading-relaxed">Global redundancy delivers sub-millisecond dispatch times across 20+ edge regions. Zero lag, zero downtime.</p>
|
|
</div>
|
|
<div className="flex items-center gap-10 pb-4">
|
|
<div className="text-right">
|
|
<p className="text-[10px] font-black uppercase text-slate-600 tracking-[0.3em] mb-3">Ping Latency</p>
|
|
<p className="text-5xl font-black text-red-500 font-outfit">12ms</p>
|
|
</div>
|
|
<div className="h-16 w-[1px] bg-white/5" />
|
|
<div className="text-right">
|
|
<p className="text-[10px] font-black uppercase text-slate-600 tracking-[0.3em] mb-3">Global Uptime</p>
|
|
<p className="text-5xl font-black text-white font-outfit">99.9<span className="text-slate-700">9</span>%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{[
|
|
{
|
|
title: "Neuro-Security",
|
|
desc: "Contextual AI analysis detects raids and token-logging attempts in real-time.",
|
|
icon: ShieldCheck,
|
|
color: "bg-red-500/10 border-red-500/20 text-red-500"
|
|
},
|
|
{
|
|
title: "Edge Dispatch",
|
|
desc: "Distributed command execution ensuring your commands work everywhere, instantly.",
|
|
icon: Zap,
|
|
color: "bg-orange-500/10 border-orange-500/20 text-orange-500"
|
|
},
|
|
{
|
|
title: "Leveling Engine",
|
|
desc: "Premium rendered rewards with 4K rank card generation and multi-role hierarchies.",
|
|
icon: BarChart4,
|
|
color: "bg-red-600/10 border-red-600/20 text-red-600"
|
|
},
|
|
{
|
|
title: "Threaded Support",
|
|
desc: "High-volume ticket systems with enterprise encryption and lifetime transcripts.",
|
|
icon: MessageSquare,
|
|
color: "bg-slate-500/10 border-slate-500/20 text-slate-400"
|
|
},
|
|
{
|
|
title: "Real-time Flux",
|
|
desc: "Watch server events live with zero-latency WebSocket data streaming.",
|
|
icon: History,
|
|
color: "bg-red-800/10 border-red-800/20 text-red-700"
|
|
},
|
|
{
|
|
title: "Cloud Integrity",
|
|
desc: "Encrypted backups of all server configurations stored in off-site neural vaults.",
|
|
icon: Layers,
|
|
color: "bg-white/10 border-white/20 text-white"
|
|
}
|
|
].map((feature, i) => (
|
|
<div key={i} className="group glass border-white/5 p-12 rounded-[50px] hover:border-red-500/30 transition-all duration-700 relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 p-12 opacity-0 group-hover:opacity-5 scale-50 group-hover:scale-110 transition-all duration-1000">
|
|
<feature.icon className="h-64 w-64 text-white" />
|
|
</div>
|
|
<div className={cn("h-20 w-20 rounded-3xl flex items-center justify-center mb-10 border transition-all duration-700 group-hover:scale-110 group-hover:rotate-6 shadow-2xl shadow-black/40", feature.color)}>
|
|
<feature.icon className="h-10 w-10 shadow-lg" />
|
|
</div>
|
|
<h3 className="text-3xl font-bold text-white mb-6 tracking-tight font-outfit relative z-10">{feature.title}</h3>
|
|
<p className="text-slate-500 leading-relaxed font-bold relative z-10 group-hover:text-slate-400 transition-colors uppercase text-[10px] tracking-[0.2em]">{feature.desc}</p>
|
|
<div className="mt-8 h-[2px] w-0 bg-red-500 group-hover:w-full transition-all duration-700" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Architecture Section */}
|
|
<section id="architecture" className="py-48 px-6 bg-white/[0.01]">
|
|
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
|
|
<div className="space-y-12">
|
|
<div className="inline-flex px-4 py-1.5 rounded-full bg-red-500/10 border border-red-500/20 text-red-500 text-[10px] font-black uppercase tracking-[0.3em]">
|
|
The Stack
|
|
</div>
|
|
<h2 className="text-6xl md:text-7xl font-bold text-white tracking-tighter font-outfit uppercase">Neural Core <br /><span className="text-slate-600 italic">Technology.</span></h2>
|
|
<p className="text-xl text-slate-500 leading-relaxed font-medium">
|
|
Our proprietary engine is built on a custom Rust-based microkernel that handles millions of events with a footprint smaller than a typical Discord bot.
|
|
</p>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8 pt-8">
|
|
{[
|
|
{ icon: Terminal, title: "Custom DSL", desc: "Write advanced logic with our intuitive HexaHost scripting language." },
|
|
{ icon: Cpu, title: "FPGA Ready", desc: "Hardware-accelerated pattern matching for instant response." },
|
|
{ icon: Lock, title: "Zero Trust", desc: "Every command execution is sandboxed and cryptographically verified." },
|
|
{ icon: Radio, title: "Low Entropy", desc: "Optimized for minimal CPU jitter and maximum reliability." }
|
|
].map((item, i) => (
|
|
<div key={i} className="space-y-4 p-6 rounded-[30px] border border-white/[0.03] hover:bg-white/[0.02] transition-colors">
|
|
<item.icon className="h-6 w-6 text-red-500" />
|
|
<h4 className="text-lg font-bold text-white font-outfit uppercase tracking-tight">{item.title}</h4>
|
|
<p className="text-sm text-slate-600 font-bold leading-relaxed">{item.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="relative aspect-square flex items-center justify-center group">
|
|
<div className="absolute inset-0 bg-red-500/5 blur-[120px] rounded-full animate-pulse" />
|
|
<div className="h-[80%] w-[80%] border-2 border-white/[0.05] rounded-full animate-[spin_60s_linear_infinite] flex items-center justify-center relative">
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 h-4 w-4 rounded-full bg-red-500 shadow-[0_0_20px_rgba(239,68,68,0.5)]" />
|
|
<div className="h-[70%] w-[70%] border border-white/[0.05] rounded-full animate-[spin_40s_linear_infinite_reverse] flex items-center justify-center">
|
|
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 h-3 w-3 rounded-full bg-white/20 shadow-[0_0_20px_rgba(255,255,255,0.2)]" />
|
|
<div className="h-[60%] w-[60%] border border-white/[0.05] rounded-full animate-[spin_20s_linear_infinite] flex items-center justify-center">
|
|
<Bot className="h-20 w-20 text-red-500/40 group-hover:text-red-500 transition-all duration-700 group-hover:scale-125" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Modules Grid */}
|
|
<section id="modules" className="py-48 px-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="text-center mb-32 space-y-6">
|
|
<h2 className="text-6xl md:text-8xl font-bold text-white tracking-tighter font-outfit uppercase">The Matrix <br /><span className="bg-gradient-to-r from-red-600 to-red-400 bg-clip-text text-transparent italic">Complete.</span></h2>
|
|
<p className="text-2xl text-slate-500 max-w-3xl mx-auto font-medium lowercase">Every module you need. Redefined for the modern era.</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
{[
|
|
{ name: "Anti-Nuke", desc: "Absolute server lockdown.", icon: ShieldAlert },
|
|
{ name: "Verification", desc: "Bot-free onboarding.", icon: CheckCircle2 },
|
|
{ name: "Welcome", desc: "Cinematic entries.", icon: Sparkles },
|
|
{ name: "Vanity Roles", desc: "Custom server identity.", icon: Gamepad2 },
|
|
{ name: "Auto Role", desc: "Instant rank assignment.", icon: User },
|
|
{ name: "Join to Create", desc: "Self-service voice channels.", icon: Music4 },
|
|
{ name: "Tracking", desc: "Predictive user metrics.", icon: Activity },
|
|
{ name: "Invites", desc: "Advanced growth tracking.", icon: Globe },
|
|
{ name: "Custom Roles", desc: "User-defined permissions.", icon: Lock },
|
|
{ name: "Reaction Roles", desc: "Interactive role menus.", icon: Layers },
|
|
{ name: "Tickets", desc: "Support at lightspeed.", icon: MessageSquare },
|
|
{ name: "Join DM", desc: "Personalized welcomes.", icon: MessageSquare }
|
|
].map((mod, i) => (
|
|
<div key={i} className="group p-8 rounded-[40px] bg-white/[0.01] border border-white/[0.03] hover:bg-red-500/[0.02] hover:border-red-500/20 transition-all duration-500">
|
|
<div className="h-14 w-14 rounded-2xl bg-white/[0.03] flex items-center justify-center mb-6 group-hover:bg-red-500/10 transition-colors">
|
|
<mod.icon className="h-6 w-6 text-slate-600 group-hover:text-red-500 transition-colors" />
|
|
</div>
|
|
<h4 className="text-xl font-bold text-white font-outfit mb-2 tracking-tight">{mod.name}</h4>
|
|
<p className="text-xs text-slate-600 font-bold uppercase tracking-widest">{mod.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Network / Global Section */}
|
|
<section id="network" className="py-48 px-6 bg-red-600/[0.01] relative overflow-hidden">
|
|
<div className="max-w-7xl mx-auto relative z-10">
|
|
<div className="flex flex-col lg:flex-row items-center gap-24">
|
|
<div className="flex-1 space-y-12">
|
|
<h2 className="text-6xl md:text-8xl font-bold text-white tracking-tighter font-outfit uppercase">Global <br /><span className="text-red-500">Reach.</span></h2>
|
|
<p className="text-2xl text-slate-500 leading-relaxed font-medium">
|
|
Powering servers with over 12 million combined users. Our network spans every continent, bringing your community closer together.
|
|
</p>
|
|
<div className="space-y-8">
|
|
{[
|
|
{ stat: "12M+", label: "Users Protected" },
|
|
{ stat: "24", label: "Edge Clusters" },
|
|
{ stat: "5.2K", label: "Verified Communities" }
|
|
].map((item, i) => (
|
|
<div key={i} className="flex items-center gap-8">
|
|
<div className="text-5xl font-black text-white font-outfit">{item.stat}</div>
|
|
<div className="h-[1px] flex-1 bg-white/5" />
|
|
<div className="text-[11px] font-black uppercase text-red-500 tracking-[0.3em]">{item.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 relative group">
|
|
<div className="absolute inset-0 bg-red-500/10 blur-[150px] opacity-0 group-hover:opacity-100 transition-opacity duration-1000" />
|
|
<div className="aspect-square bg-[#020617] border border-white/[0.05] rounded-[60px] p-12 relative overflow-hidden flex items-center justify-center">
|
|
<Globe className="h-64 w-64 text-red-500/10 animate-pulse" />
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="h-32 w-32 bg-red-500/20 blur-[60px] rounded-full" />
|
|
</div>
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 space-y-12">
|
|
<Bot className="h-20 w-20 text-red-500 shadow-[0_0_50px_rgba(239,68,68,0.5)] bg-[#020617] rounded-3xl p-4 border border-red-500/50" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FAQ Section */}
|
|
<section className="py-48 px-6">
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="text-center mb-24">
|
|
<h2 className="text-5xl md:text-6xl font-black text-white font-outfit tracking-tighter uppercase mb-6">Knowledge Base</h2>
|
|
<p className="text-slate-600 font-bold uppercase tracking-widest text-xs">Frequently Asked Questions</p>
|
|
</div>
|
|
<div className="space-y-6">
|
|
{[
|
|
{ q: "Is the HexaHost Engine free to use?", a: "The core engine is 100% free for all communities. We offer premium clusters for ultra-high-scale enterprise servers." },
|
|
{ q: "How secure is my server data?", a: "Every byte of configuration data is AES-256 encrypted at rest. We never store personal user data beyond Discord's standard requirements." },
|
|
{ q: "Can I migrate from other bots?", a: "Yes, our Migration Matrix tool allows you to import leveling and configuration data from most popular bots in minutes." },
|
|
{ q: "What is the 'Neural Core'?", a: "It's our advanced event-processing architecture that uses predictive analysis to moderate raids before they escalate." }
|
|
].map((item, i) => (
|
|
<div key={i} className="p-10 rounded-[40px] border border-white/[0.03] hover:border-white/10 transition-all bg-white/[0.01] group">
|
|
<h4 className="text-xl font-bold text-white mb-6 font-outfit uppercase tracking-tight flex items-center gap-4">
|
|
<div className="h-2 w-2 rounded-full bg-red-500 opacity-20 group-hover:opacity-100 transition-all" />
|
|
{item.q}
|
|
</h4>
|
|
<p className="text-slate-500 font-bold leading-relaxed">{item.a}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-48 px-6">
|
|
<div className="max-w-6xl mx-auto relative rounded-[80px] p-24 md:p-32 overflow-hidden bg-gradient-to-br from-red-600 to-red-900 text-center shadow-[0_40px_100px_rgba(0,0,0,0.6)]">
|
|
<div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 mix-blend-overlay" />
|
|
<div className="relative z-10">
|
|
<h2 className="text-7xl md:text-[9rem] font-bold text-white tracking-tighter font-outfit mb-12 uppercase leading-[0.8] italic">Ready to <br />Evolve?</h2>
|
|
<p className="text-2xl text-white/70 max-w-3xl mx-auto mb-20 font-medium">Join 5,000+ communities scaling their automation with the HexaHost Engine. Setup takes less than 30 seconds.</p>
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-8 tracking-widest uppercase text-xs font-black">
|
|
<Button
|
|
onClick={() => signIn('discord', { callbackUrl: '/dashboard' })}
|
|
className="w-full sm:w-auto rounded-3xl px-16 py-10 bg-white text-black hover:bg-slate-100 border-none shadow-[0_20px_50px_rgba(0,0,0,0.4)] font-black text-lg transition-transform hover:scale-105 active:scale-95"
|
|
>
|
|
Get Started Free
|
|
</Button>
|
|
<div className="flex items-center gap-3 text-white">
|
|
<div className="h-3 w-3 rounded-full bg-white animate-pulse" />
|
|
Neural Uplink: Stable
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="py-32 border-t border-white/[0.03] bg-[#020617] relative z-20">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-20 mb-32">
|
|
<div className="col-span-1 md:col-span-2 space-y-12">
|
|
<div className="flex items-center gap-4 group">
|
|
<span className="text-3xl font-bold text-white font-outfit uppercase tracking-tighter">{process.env.NEXT_PUBLIC_BRAND_NAME || "HexaHost"} Engine</span>
|
|
</div>
|
|
<p className="text-slate-600 max-w-sm font-bold leading-relaxed uppercase text-xs tracking-widest">
|
|
The high-performance Discord engine for communities that demand excellence. Open-source, secure, and infinitely scalable.
|
|
</p>
|
|
</div>
|
|
<div className="space-y-8">
|
|
<h4 className="text-[10px] font-black uppercase tracking-[0.4em] text-white opacity-40">System</h4>
|
|
<ul className="space-y-5 text-[11px] font-black uppercase tracking-widest text-slate-500">
|
|
<li><Link href="#" className="hover:text-red-500 transition-colors">GitHub Repository</Link></li>
|
|
<li><Link href="/docs" className="hover:text-red-500 transition-colors">Documentation</Link></li>
|
|
<li><Link href="#" className="hover:text-red-500 transition-colors">API References</Link></li>
|
|
</ul>
|
|
</div>
|
|
<div className="space-y-8">
|
|
<h4 className="text-[10px] font-black uppercase tracking-[0.4em] text-white opacity-40">Identity</h4>
|
|
<ul className="space-y-5 text-[11px] font-black uppercase tracking-widest text-slate-500">
|
|
<li><Link href="/privacy" className="hover:text-red-500 transition-colors">Privacy Shield</Link></li>
|
|
<li><Link href="/terms" className="hover:text-red-500 transition-colors">Terms of Service</Link></li>
|
|
<li><Link href="#" className="hover:text-red-500 transition-colors">Discord Server</Link></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="pt-12 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-6 opacity-40">
|
|
<p className="text-slate-700 text-[10px] font-black uppercase tracking-[0.4em]">
|
|
© 2026 {process.env.NEXT_PUBLIC_BRAND_NAME || "HexaHost"} Development // Advanced Neural Infrastructure.
|
|
</p>
|
|
<div className="flex items-center gap-8">
|
|
<div className="flex items-center gap-3 text-[10px] font-black text-red-500 uppercase tracking-[0.3em]">
|
|
<div className="h-2 w-2 rounded-full bg-red-500 animate-pulse" />
|
|
All Nodes Operational
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|