Update dashboard styles and branding to reflect HexaHost theme. Change primary colors, background gradients, and text styles across various components. Enhance layout and navigation elements for improved user experience.
This commit is contained in:
TheOnlyMace
@@ -26,6 +26,7 @@ import { useSession, signIn, signOut } from "next-auth/react";
|
||||
import { cn, isAdmin } from "@/lib/utils";
|
||||
import { api } from "@/lib/api";
|
||||
import { AdminConfig } from "@/types/api";
|
||||
import { BrandLogo } from "@/components/brand-logo";
|
||||
|
||||
export default function DashboardLayout({
|
||||
children,
|
||||
@@ -83,11 +84,9 @@ export default function DashboardLayout({
|
||||
|
||||
if (status === "loading" || status === "unauthenticated") {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0f172a] flex items-center justify-center">
|
||||
<div className="min-h-screen bg-[#0d0821] flex items-center justify-center">
|
||||
<div className="animate-pulse flex flex-col items-center gap-4">
|
||||
<div className="h-12 w-12 rounded-xl bg-primary flex items-center justify-center shadow-lg shadow-primary/20">
|
||||
<span className="font-black text-white italic text-xl">{process.env.NEXT_PUBLIC_BRAND_NAME_WORD || "AX"}</span>
|
||||
</div>
|
||||
<BrandLogo size={56} priority className="drop-shadow-[0_0_24px_rgba(255,81,249,0.4)]" />
|
||||
<p className="text-slate-400 font-bold tracking-widest uppercase text-xs">
|
||||
Authenticating...
|
||||
</p>
|
||||
@@ -159,10 +158,10 @@ export default function DashboardLayout({
|
||||
const BackLinkIcon = backLinkItem?.icon || Server;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#020617] text-slate-200">
|
||||
<div className="min-h-screen bg-[#0d0821] text-slate-200">
|
||||
{/* Liquid Background Elements */}
|
||||
<div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
|
||||
<div className="absolute top-[-10%] right-[-10%] w-[40%] h-[40%] bg-red-500/5 blur-[120px] rounded-full animate-pulse" />
|
||||
<div className="absolute top-[-10%] right-[-10%] w-[40%] h-[40%] bg-primary/5 blur-[120px] rounded-full animate-pulse" />
|
||||
<div className="absolute bottom-[10%] left-[-5%] w-[30%] h-[30%] bg-indigo-500/5 blur-[100px] rounded-full animate-pulse [animation-delay:2s]" />
|
||||
</div>
|
||||
|
||||
@@ -184,15 +183,13 @@ export default function DashboardLayout({
|
||||
{/* Header */}
|
||||
<div className="flex h-16 items-center px-6 mt-4 flex-shrink-0">
|
||||
<div className="flex items-center gap-3 group">
|
||||
<div className="h-9 w-9 rounded-xl bg-gradient-to-br from-red-500 to-red-800 flex items-center justify-center shadow-lg shadow-red-500/20 group-hover:scale-110 transition-transform border border-white/10">
|
||||
<Bot className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<BrandLogo size={36} className="drop-shadow-[0_0_14px_rgba(255,81,249,0.35)] group-hover:scale-110 transition-transform" />
|
||||
<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 || "Axiom"}
|
||||
</h1>
|
||||
<span className="text-[9px] font-black uppercase tracking-[0.2em] text-red-500/80 mt-1">
|
||||
Dashboard
|
||||
<span className="text-[9px] font-black uppercase tracking-[0.2em] text-primary/80 mt-1">
|
||||
by HexaHost
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -223,7 +220,7 @@ export default function DashboardLayout({
|
||||
className={cn(
|
||||
"flex items-center gap-3 px-4 py-2.5 rounded-xl transition-all duration-300 group text-[13px] font-bold",
|
||||
isActive
|
||||
? "bg-red-500/10 text-red-500 border border-red-500/20 shadow-[0_0_20px_rgba(239,68,68,0.1)]"
|
||||
? "bg-primary/10 text-primary border border-primary/20 shadow-[0_0_20px_rgba(239,68,68,0.1)]"
|
||||
: "text-slate-400 hover:bg-white/[0.03] hover:text-slate-200"
|
||||
)}
|
||||
>
|
||||
@@ -231,13 +228,13 @@ export default function DashboardLayout({
|
||||
className={cn(
|
||||
"h-4 w-4 transition-all duration-300",
|
||||
isActive
|
||||
? "text-red-500 scale-110"
|
||||
? "text-primary scale-110"
|
||||
: "text-slate-600 group-hover:text-slate-400"
|
||||
)}
|
||||
/>
|
||||
{subItem.name}
|
||||
{isActive && (
|
||||
<div className="ml-auto w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse shadow-[0_0_10px_rgba(239,68,68,0.5)]" />
|
||||
<div className="ml-auto w-1.5 h-1.5 rounded-full bg-primary animate-pulse shadow-[0_0_10px_rgba(239,68,68,0.5)]" />
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
@@ -255,19 +252,19 @@ export default function DashboardLayout({
|
||||
className={cn(
|
||||
"flex items-center gap-4 px-4 py-3 rounded-2xl transition-all duration-300 group text-[14px] font-bold",
|
||||
isActive
|
||||
? "bg-red-500/10 text-red-500 border border-red-500/20 shadow-[0_0_20px_rgba(239,68,68,0.1)]"
|
||||
? "bg-primary/10 text-primary border border-primary/20 shadow-[0_0_20px_rgba(239,68,68,0.1)]"
|
||||
: "text-slate-400 hover:bg-white/[0.03] hover:text-slate-200"
|
||||
)}
|
||||
>
|
||||
<item.icon
|
||||
className={cn(
|
||||
"h-5 w-5 transition-all duration-300",
|
||||
isActive ? "text-red-500 scale-110" : "text-slate-600 group-hover:text-slate-400"
|
||||
isActive ? "text-primary scale-110" : "text-slate-600 group-hover:text-slate-400"
|
||||
)}
|
||||
/>
|
||||
{item.name}
|
||||
{isActive ? (
|
||||
<ChevronRight className="ml-auto h-4 w-4 text-red-500" />
|
||||
<ChevronRight className="ml-auto h-4 w-4 text-primary" />
|
||||
) : (
|
||||
<ChevronRight className="ml-auto h-4 w-4 opacity-0 group-hover:opacity-30 transition-opacity" />
|
||||
)}
|
||||
@@ -285,7 +282,7 @@ export default function DashboardLayout({
|
||||
className={cn(
|
||||
"flex items-center gap-4 px-4 py-3 rounded-2xl transition-all duration-300 group text-[14px] font-bold",
|
||||
pathname === backLinkItem.href
|
||||
? "bg-red-500/10 text-red-500 border border-red-500/20 shadow-[0_0_20px_rgba(239,68,68,0.1)]"
|
||||
? "bg-primary/10 text-primary border border-primary/20 shadow-[0_0_20px_rgba(239,68,68,0.1)]"
|
||||
: "text-slate-400 hover:bg-white/[0.03] hover:text-slate-200"
|
||||
)}
|
||||
>
|
||||
@@ -293,13 +290,13 @@ export default function DashboardLayout({
|
||||
className={cn(
|
||||
"h-5 w-5 transition-all duration-300",
|
||||
pathname === backLinkItem.href
|
||||
? "text-red-500 scale-110"
|
||||
? "text-primary scale-110"
|
||||
: "text-slate-600 group-hover:text-slate-400"
|
||||
)}
|
||||
/>
|
||||
{backLinkItem.name}
|
||||
{pathname === backLinkItem.href ? (
|
||||
<ChevronRight className="ml-auto h-4 w-4 text-red-500" />
|
||||
<ChevronRight className="ml-auto h-4 w-4 text-primary" />
|
||||
) : (
|
||||
<ChevronRight className="ml-auto h-4 w-4 opacity-0 group-hover:opacity-30 transition-opacity" />
|
||||
)}
|
||||
@@ -308,9 +305,9 @@ export default function DashboardLayout({
|
||||
)}
|
||||
|
||||
{/* User Profile - now a normal flex child, no absolute positioning */}
|
||||
<div className="flex-shrink-0 p-4 border-t border-white/5 glass-red bg-red-500/[0.02]">
|
||||
<div className="flex-shrink-0 p-4 border-t border-white/5 glass-red bg-primary/[0.02]">
|
||||
<div className="flex items-center gap-3 p-2 bg-white/[0.02] rounded-2xl border border-white/[0.05]">
|
||||
<div className="h-10 w-10 rounded-full bg-red-500/10 flex items-center justify-center ring-1 ring-white/10 overflow-hidden border border-red-500/20">
|
||||
<div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center ring-1 ring-white/10 overflow-hidden border border-primary/20">
|
||||
{session?.user?.image ? (
|
||||
<img
|
||||
src={session.user.image}
|
||||
@@ -318,14 +315,14 @@ export default function DashboardLayout({
|
||||
className="h-full w-full object-cover opacity-80"
|
||||
/>
|
||||
) : (
|
||||
<User className="h-6 w-6 text-red-500/50" />
|
||||
<User className="h-6 w-6 text-primary/50" />
|
||||
)}
|
||||
</div>
|
||||
<div className="overflow-hidden">
|
||||
<p className="text-sm font-bold text-white truncate font-outfit">
|
||||
{session?.user?.name || "Administrator"}
|
||||
</p>
|
||||
<p className="text-[10px] font-black uppercase text-red-500/60 truncate tracking-widest">
|
||||
<p className="text-[10px] font-black uppercase text-primary/60 truncate tracking-widest">
|
||||
User
|
||||
</p>
|
||||
</div>
|
||||
@@ -345,11 +342,11 @@ export default function DashboardLayout({
|
||||
</button>
|
||||
|
||||
<div className="hidden md:flex items-center w-96 max-w-full relative group">
|
||||
<Search className="absolute left-4 h-4 w-4 text-slate-500 group-focus-within:text-red-500 transition-colors" />
|
||||
<Search className="absolute left-4 h-4 w-4 text-slate-500 group-focus-within:text-primary transition-colors" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Query neural network..."
|
||||
className="w-full bg-white/[0.03] border border-white/5 rounded-2xl py-2.5 pl-12 pr-4 text-xs font-bold text-slate-300 focus:outline-none focus:ring-1 focus:ring-red-500/30 focus:bg-white/[0.05] transition-all placeholder:text-slate-600"
|
||||
className="w-full bg-white/[0.03] border border-white/5 rounded-2xl py-2.5 pl-12 pr-4 text-xs font-bold text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary/30 focus:bg-white/[0.05] transition-all placeholder:text-slate-600"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -361,7 +358,7 @@ export default function DashboardLayout({
|
||||
>
|
||||
<Bell className="h-5 w-5" />
|
||||
{globalNotification && (
|
||||
<span className="absolute top-2 right-2 h-2 w-2 rounded-full bg-red-500 border-2 border-[#020617] shadow-[0_0_10px_rgba(239,68,68,0.5)]"></span>
|
||||
<span className="absolute top-2 right-2 h-2 w-2 rounded-full bg-primary border-2 border-[#0d0821] shadow-[0_0_10px_rgba(255,81,249,0.5)]"></span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
@@ -371,17 +368,17 @@ export default function DashboardLayout({
|
||||
<p className="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em]">Broadcast Metrics</p>
|
||||
<button
|
||||
onClick={() => setGlobalNotification(null)}
|
||||
className="text-[10px] font-bold text-red-500/60 hover:text-red-500 transition-colors uppercase"
|
||||
className="text-[10px] font-bold text-primary/60 hover:text-primary transition-colors uppercase"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{globalNotification ? (
|
||||
<div className="bg-red-500/5 border border-red-500/10 rounded-2xl p-4">
|
||||
<div className="bg-primary/5 border border-primary/10 rounded-2xl p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Sparkles className="h-3 w-3 text-red-500" />
|
||||
<span className="text-[10px] font-black uppercase text-red-500 tracking-widest">System Broadcast</span>
|
||||
<Sparkles className="h-3 w-3 text-primary" />
|
||||
<span className="text-[10px] font-black uppercase text-primary tracking-widest">System Broadcast</span>
|
||||
</div>
|
||||
<p className="text-xs font-medium text-slate-300 leading-relaxed">
|
||||
{globalNotification}
|
||||
@@ -407,18 +404,18 @@ export default function DashboardLayout({
|
||||
onClick={() => setIsProfileOpen(!isProfileOpen)}
|
||||
className="flex items-center gap-3.5 p-1.5 rounded-2xl hover:bg-white/5 transition-all group border border-transparent hover:border-white/10"
|
||||
>
|
||||
<div className="h-9 w-9 rounded-full bg-red-500/10 flex items-center justify-center overflow-hidden border border-red-500/20 ring-2 ring-transparent group-hover:ring-red-500/30 transition-all">
|
||||
<div className="h-9 w-9 rounded-full bg-primary/10 flex items-center justify-center overflow-hidden border border-primary/20 ring-2 ring-transparent group-hover:ring-primary/30 transition-all">
|
||||
{session?.user?.image ? (
|
||||
<img src={session.user.image} alt="User Avatar" className="h-full w-full object-cover opacity-80" />
|
||||
) : (
|
||||
<User className="h-5 w-5 text-red-500/50" />
|
||||
<User className="h-5 w-5 text-primary/50" />
|
||||
)}
|
||||
</div>
|
||||
<div className="hidden sm:flex flex-col items-start leading-none gap-1">
|
||||
<span className="text-xs font-bold text-slate-200 group-hover:text-white transition-colors">
|
||||
{session?.user?.name?.split(' ')[0] || "Admin"}
|
||||
</span>
|
||||
<span className="text-[9px] font-black uppercase text-red-500/60 tracking-widest">Active</span>
|
||||
<span className="text-[9px] font-black uppercase text-primary/60 tracking-widest">Active</span>
|
||||
</div>
|
||||
<ChevronDown
|
||||
className={cn("h-4 w-4 text-slate-600 transition-transform hidden sm:block", isProfileOpen && "rotate-180")}
|
||||
@@ -433,13 +430,13 @@ export default function DashboardLayout({
|
||||
</div>
|
||||
|
||||
<button className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-xs font-bold text-slate-400 hover:bg-white/5 hover:text-white transition-all group/item">
|
||||
<LifeBuoy className="h-4 w-4 text-slate-600 group-hover/item:text-red-500 transition-colors" />
|
||||
<LifeBuoy className="h-4 w-4 text-slate-600 group-hover/item:text-primary transition-colors" />
|
||||
Support Matrix
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => signOut({ callbackUrl: '/' })}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-xs font-black uppercase tracking-widest text-red-500/80 hover:bg-red-500/10 hover:text-red-500 transition-all group/item"
|
||||
className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-xs font-black uppercase tracking-widest text-primary/80 hover:bg-primary/10 hover:text-primary transition-all group/item"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
Deauthorize
|
||||
|
||||
@@ -56,14 +56,14 @@ export default async function DashboardPage() {
|
||||
<div className="space-y-10 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-6 px-2">
|
||||
<div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white font-outfit tracking-tight">System <span className="text-red-500 italic">Core.</span></h1>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white font-outfit tracking-tight">System <span className="text-primary italic">Core.</span></h1>
|
||||
<p className="text-slate-400 mt-3 font-medium flex items-center gap-2">
|
||||
Status and live metrics for <span className="text-red-500 font-bold px-2 py-0.5 rounded-lg bg-red-500/10 border border-red-500/20">{botInfo.name}</span>
|
||||
Status and live metrics for <span className="text-primary font-bold px-2 py-0.5 rounded-lg bg-primary/10 border border-primary/20">{botInfo.name}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 px-5 py-2.5 glass-red rounded-2xl text-red-500 text-xs font-bold uppercase tracking-widest animate-pulse">
|
||||
<div className="flex items-center gap-2 px-5 py-2.5 glass-red rounded-2xl text-primary text-xs font-bold uppercase tracking-widest animate-pulse">
|
||||
<ShieldAlert className="h-4 w-4" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
@@ -73,21 +73,21 @@ export default async function DashboardPage() {
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{stats.map((stat) => (
|
||||
<div key={stat.name} className="group glass border-white/5 p-7 rounded-[32px] relative overflow-hidden hover:border-red-500/30 transition-all duration-500 shadow-2xl">
|
||||
<div key={stat.name} className="group glass border-white/5 p-7 rounded-[32px] relative overflow-hidden hover:border-primary/30 transition-all duration-500 shadow-2xl">
|
||||
{/* Animated Glow Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-red-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
|
||||
<div className="flex items-center justify-between relative z-10">
|
||||
<div>
|
||||
<p className="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] mb-2">{stat.name}</p>
|
||||
<p className="text-3xl font-bold text-white font-outfit tracking-tight">{stat.value}</p>
|
||||
</div>
|
||||
<div className="p-4 bg-red-500/10 rounded-2xl border border-red-500/20 group-hover:scale-110 group-hover:bg-red-500/20 transition-all duration-500">
|
||||
<stat.icon className="h-6 w-6 text-red-500" />
|
||||
<div className="p-4 bg-primary/10 rounded-2xl border border-primary/20 group-hover:scale-110 group-hover:bg-primary/20 transition-all duration-500">
|
||||
<stat.icon className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-12 right-12 h-[1px] bg-red-500/50 blur-[1px] opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
<div className="absolute bottom-0 left-12 right-12 h-[1px] bg-primary/50 blur-[1px] opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -95,13 +95,13 @@ export default async function DashboardPage() {
|
||||
{/* Featured Modules & Support */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div className="lg:col-span-2 glass border-white/5 rounded-[40px] p-10 relative group overflow-hidden shadow-2xl">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-red-500/[0.03] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/[0.03] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
|
||||
|
||||
<div className="flex items-center justify-between mb-8 relative z-10">
|
||||
<h2 className="text-2xl font-bold text-white font-outfit tracking-tight">Quick Actions</h2>
|
||||
<div className="flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/10 border border-red-500/20">
|
||||
<Zap className="h-3 w-3 text-red-500" />
|
||||
<span className="text-[10px] font-black text-red-500 uppercase tracking-widest">Efficiency</span>
|
||||
<div className="flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20">
|
||||
<Zap className="h-3 w-3 text-primary" />
|
||||
<span className="text-[10px] font-black text-primary uppercase tracking-widest">Efficiency</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -112,12 +112,12 @@ export default async function DashboardPage() {
|
||||
{ title: "Support Matrix", desc: "Get help from our neural support team.", icon: LifeBuoy, href: "#" },
|
||||
{ title: "Documentation", desc: "Learn how to master the Axiom engine.", icon: FileText, href: "#" },
|
||||
].map((item) => (
|
||||
<a key={item.title} href={item.href} className="flex items-center gap-5 p-4 rounded-2xl bg-white/[0.02] border border-white/[0.03] group/item hover:bg-white/[0.05] hover:border-red-500/20 transition-all">
|
||||
<div className="h-12 w-12 rounded-2xl bg-red-500/5 border border-red-500/10 flex items-center justify-center group-hover/item:bg-red-500/10 transition-colors">
|
||||
<item.icon className="h-5 w-5 text-red-500/60 group-hover/item:text-red-500 transition-colors" />
|
||||
<a key={item.title} href={item.href} className="flex items-center gap-5 p-4 rounded-2xl bg-white/[0.02] border border-white/[0.03] group/item hover:bg-white/[0.05] hover:border-primary/20 transition-all">
|
||||
<div className="h-12 w-12 rounded-2xl bg-primary/5 border border-primary/10 flex items-center justify-center group-hover/item:bg-primary/10 transition-colors">
|
||||
<item.icon className="h-5 w-5 text-primary/60 group-hover/item:text-primary transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-white group-hover/item:text-red-500 transition-colors">{item.title}</h4>
|
||||
<h4 className="text-sm font-bold text-white group-hover/item:text-primary transition-colors">{item.title}</h4>
|
||||
<p className="text-[10px] text-slate-500 font-medium uppercase tracking-wider">{item.desc}</p>
|
||||
</div>
|
||||
</a>
|
||||
@@ -126,7 +126,7 @@ export default async function DashboardPage() {
|
||||
</div>
|
||||
|
||||
<div className="glass border-white/5 rounded-[40px] p-10 flex flex-col justify-between relative group shadow-2xl overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-bl from-red-500/[0.05] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
|
||||
<div className="absolute inset-0 bg-gradient-to-bl from-primary/[0.05] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<h2 className="text-2xl font-bold text-white mb-3 font-outfit">Module Status</h2>
|
||||
@@ -138,7 +138,7 @@ export default async function DashboardPage() {
|
||||
{ name: 'Database Cluster', status: 'Synchronized' },
|
||||
{ name: 'Edge Shards', status: 'Operational' }
|
||||
].map((service) => (
|
||||
<div key={service.name} className="flex items-center justify-between p-4 bg-white/[0.02] rounded-2xl border border-white/[0.05] hover:border-red-500/20 transition-colors">
|
||||
<div key={service.name} className="flex items-center justify-between p-4 bg-white/[0.02] rounded-2xl border border-white/[0.05] hover:border-primary/20 transition-colors">
|
||||
<span className="text-xs font-bold text-slate-300">{service.name}</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-1.5 w-1.5 rounded-full bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
|
||||
@@ -149,11 +149,11 @@ export default async function DashboardPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="mt-12 w-full py-4 glass-red hover:bg-red-500/10 text-red-500 rounded-[20px] text-[11px] font-black uppercase tracking-[0.2em] transition-all border border-red-500/20 relative z-10">
|
||||
<button className="mt-12 w-full py-4 glass-red hover:bg-primary/10 text-primary rounded-[20px] text-[11px] font-black uppercase tracking-[0.2em] transition-all border border-primary/20 relative z-10">
|
||||
System Diagnostics
|
||||
</button>
|
||||
{/* Abstract Design Element */}
|
||||
<div className="absolute -bottom-10 -right-10 h-32 w-32 bg-red-500/10 blur-3xl rounded-full" />
|
||||
<div className="absolute -bottom-10 -right-10 h-32 w-32 bg-primary/10 blur-3xl rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -17,7 +17,6 @@
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Bot,
|
||||
ChevronLeft,
|
||||
Search,
|
||||
ShieldCheck,
|
||||
@@ -31,6 +30,7 @@ import {
|
||||
X
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { BrandLogo } from "@/components/brand-logo";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const DOCS_NAV = [
|
||||
@@ -65,28 +65,26 @@ export default function DocsPage() {
|
||||
const [activeTab, setActiveTab] = useState("Introduction");
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#020617] text-slate-200 font-sans">
|
||||
<div className="min-h-screen bg-[#0d0821] text-slate-200 font-sans">
|
||||
{/* Background Decor */}
|
||||
<div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
|
||||
<div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-red-500/[0.02] blur-[150px] rounded-full" />
|
||||
<div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-primary/[0.02] blur-[150px] rounded-full" />
|
||||
</div>
|
||||
|
||||
{/* Nav */}
|
||||
<nav className="fixed top-0 w-full z-50 border-b border-white/[0.03] bg-[#020617]/80 backdrop-blur-3xl px-6 h-20 flex items-center justify-between">
|
||||
<nav className="fixed top-0 w-full z-50 border-b border-white/[0.03] bg-[#0d0821]/80 backdrop-blur-3xl px-6 h-20 flex items-center justify-between">
|
||||
<div className="flex items-center gap-8">
|
||||
<Link href="/" className="flex items-center gap-4 group">
|
||||
<div className="h-8 w-8 rounded-lg bg-red-600 flex items-center justify-center mr-3">
|
||||
<Bot className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<BrandLogo size={32} className="group-hover:scale-110 transition-transform" />
|
||||
<span className="text-xl font-bold text-white font-outfit uppercase tracking-tighter hidden md:block">Axiom Docs</span>
|
||||
</Link>
|
||||
|
||||
<div className="hidden lg:flex items-center w-80 relative group">
|
||||
<SearchIcon className="absolute left-4 h-4 w-4 text-slate-500 group-focus-within:text-red-500 transition-colors" />
|
||||
<SearchIcon className="absolute left-4 h-4 w-4 text-slate-500 group-focus-within:text-primary transition-colors" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search documentation..."
|
||||
className="w-full bg-white/[0.03] border border-white/5 rounded-2xl py-2.5 pl-12 pr-4 text-xs font-bold text-slate-300 focus:outline-none focus:ring-1 focus:ring-red-500/30 focus:bg-white/[0.05] transition-all"
|
||||
className="w-full bg-white/[0.03] border border-white/5 rounded-2xl py-2.5 pl-12 pr-4 text-xs font-bold text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary/30 focus:bg-white/[0.05] transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -109,7 +107,7 @@ export default function DocsPage() {
|
||||
<div className="max-w-7xl mx-auto flex pt-20">
|
||||
{/* Sidebar */}
|
||||
<aside className={cn(
|
||||
"fixed inset-y-0 left-0 z-40 w-80 bg-[#020617] border-r border-white/5 pt-20 transition-transform lg:translate-x-0 lg:static lg:bg-transparent",
|
||||
"fixed inset-y-0 left-0 z-40 w-80 bg-[#0d0821] border-r border-white/5 pt-20 transition-transform lg:translate-x-0 lg:static lg:bg-transparent",
|
||||
isSidebarOpen ? "translate-x-0" : "-translate-x-full"
|
||||
)}>
|
||||
<div className="h-full p-8 overflow-y-auto no-scrollbar">
|
||||
@@ -127,11 +125,11 @@ export default function DocsPage() {
|
||||
className={cn(
|
||||
"w-full flex flex-col items-start gap-1 p-4 rounded-2xl transition-all text-left",
|
||||
activeTab === item.name
|
||||
? "bg-red-500/10 border border-red-500/20 shadow-[0_0_20px_rgba(239,68,68,0.05)]"
|
||||
? "bg-primary/10 border border-primary/20 shadow-[0_0_20px_rgba(239,68,68,0.05)]"
|
||||
: "hover:bg-white/[0.02] border border-transparent"
|
||||
)}
|
||||
>
|
||||
<span className={cn("text-sm font-bold", activeTab === item.name ? "text-red-500" : "text-slate-300")}>{item.name}</span>
|
||||
<span className={cn("text-sm font-bold", activeTab === item.name ? "text-primary" : "text-slate-300")}>{item.name}</span>
|
||||
<span className="text-[10px] text-slate-600 font-bold uppercase tracking-tight">{item.description}</span>
|
||||
</button>
|
||||
))}
|
||||
@@ -143,13 +141,13 @@ export default function DocsPage() {
|
||||
|
||||
{/* Content */}
|
||||
<main className="flex-1 p-8 lg:p-16 relative z-10 max-w-4xl">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/10 border border-red-500/20 text-red-500 text-[10px] font-black uppercase tracking-widest mb-8">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-[10px] font-black uppercase tracking-widest mb-8">
|
||||
<BookOpen className="h-3 w-3" />
|
||||
V2.4 Runtime Environment
|
||||
</div>
|
||||
|
||||
<h1 className="text-6xl font-bold text-white font-outfit tracking-tighter uppercase mb-8 italic">
|
||||
{activeTab}<span className="text-red-500 not-italic">.</span>
|
||||
{activeTab}<span className="text-primary not-italic">.</span>
|
||||
</h1>
|
||||
|
||||
<div className="prose prose-invert max-w-none">
|
||||
@@ -159,7 +157,7 @@ export default function DocsPage() {
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="p-8 rounded-[32px] glass border-white/5 space-y-4">
|
||||
<Zap className="h-6 w-6 text-red-500" />
|
||||
<Zap className="h-6 w-6 text-primary" />
|
||||
<h3 className="text-xl font-bold text-white font-outfit uppercase">Fast Dispatch</h3>
|
||||
<p className="text-sm text-slate-500 font-bold uppercase tracking-tight">Commands are dispatched via our global edge network in under 12ms.</p>
|
||||
</div>
|
||||
@@ -170,16 +168,16 @@ export default function DocsPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8 rounded-[40px] bg-red-500/[0.02] border border-red-500/10 relative overflow-hidden">
|
||||
<div className="p-8 rounded-[40px] bg-primary/[0.02] border border-primary/10 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 p-8 opacity-10">
|
||||
<Layers className="h-32 w-32 text-red-500" />
|
||||
<Layers className="h-32 w-32 text-primary" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-white font-outfit uppercase tracking-tight mb-4">Neural Architecture</h2>
|
||||
<h3 className="text-white font-bold">Protocol Overview</h3>
|
||||
<p className="text-slate-500 font-bold leading-relaxed mb-8">
|
||||
The Axiom Engine utilizes a decentralized event stream processing model. When a Discord event is received, it is instantly routed to the nearest edge cluster.
|
||||
</p>
|
||||
<div className="bg-black/40 p-6 rounded-2xl border border-white/5 font-mono text-sm text-red-500 mb-8">
|
||||
<div className="bg-black/40 p-6 rounded-2xl border border-white/5 font-mono text-sm text-primary mb-8">
|
||||
$ hexahost initialize --cluster-shard [neural_07] --mode enterprise
|
||||
</div>
|
||||
</div>
|
||||
@@ -191,8 +189,8 @@ export default function DocsPage() {
|
||||
<p className="text-sm font-bold text-slate-400">DOC-ID: CX_7749_B</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-2 w-2 rounded-full bg-red-500 animate-pulse" />
|
||||
<span className="text-[10px] font-black uppercase text-red-500 tracking-[0.2em]">Live Stream Active</span>
|
||||
<div className="h-2 w-2 rounded-full bg-primary animate-pulse" />
|
||||
<span className="text-[10px] font-black uppercase text-primary tracking-[0.2em]">Live Stream Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -2,20 +2,28 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* HexaHost.de palette — Axiom product UI */
|
||||
:root {
|
||||
--background: #020617;
|
||||
--foreground: #f8fafc;
|
||||
--primary: #ef4444;
|
||||
--primary-glow: rgba(239, 68, 68, 0.15);
|
||||
--glass-bg: rgba(15, 23, 42, 0.6);
|
||||
--glass-border: rgba(255, 255, 255, 0.05);
|
||||
--glass-red-border: rgba(239, 68, 68, 0.2);
|
||||
--background: #0d0821;
|
||||
--foreground: #ffffff;
|
||||
--primary: #ff51f9;
|
||||
--primary-hover: #c31adf;
|
||||
--primary-glow: rgba(255, 81, 249, 0.18);
|
||||
--accent: #a348ff;
|
||||
--accent-blue: #3978ff;
|
||||
--accent-neon: #00cfff;
|
||||
--highlight: #f093ff;
|
||||
--neutral-light: #1a1230;
|
||||
--text-secondary: #cfc9dd;
|
||||
--glass-bg: rgba(255, 255, 255, 0.05);
|
||||
--glass-border: rgba(255, 255, 255, 0.1);
|
||||
--glass-primary-border: rgba(255, 81, 249, 0.25);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #020617;
|
||||
--foreground: #f8fafc;
|
||||
--background: #0d0821;
|
||||
--foreground: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,23 +40,23 @@ body {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #020617;
|
||||
background: #0d0821;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #1e293b;
|
||||
background: #1a1230;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #020617;
|
||||
border: 2px solid #0d0821;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #ef4444; /* Primary Red */
|
||||
background: #ff51f9;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #1e293b #020617;
|
||||
scrollbar-color: #1a1230 #0d0821;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
@@ -66,12 +74,14 @@ body {
|
||||
@apply backdrop-blur-xl bg-white/[0.02] border border-white/[0.05];
|
||||
}
|
||||
.glass-red {
|
||||
@apply backdrop-blur-xl bg-red-500/[0.02] border border-red-500/[0.1];
|
||||
@apply backdrop-blur-xl border;
|
||||
background: rgba(255, 81, 249, 0.03);
|
||||
border-color: rgba(255, 81, 249, 0.12);
|
||||
}
|
||||
.liquid-glass {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
||||
box-shadow: 0 8px 32px 0 rgba(255, 81, 249, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,8 +25,17 @@ const outfit = Outfit({ subsets: ["latin"], variable: "--font-outfit" });
|
||||
const brandName = process.env.NEXT_PUBLIC_BRAND_NAME || "Axiom";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: `${brandName} - Ultimate Discord Bot`,
|
||||
description: "Advanced Discord community management and security.",
|
||||
title: `${brandName} — by HexaHost`,
|
||||
description: "Axiom Discord Bot Dashboard — powered by HexaHost.",
|
||||
icons: {
|
||||
icon: [
|
||||
{ url: "/favicon.svg", type: "image/svg+xml" },
|
||||
{ url: "/favicon.ico" },
|
||||
{ url: "/favicon-32.png", sizes: "32x32", type: "image/png" },
|
||||
],
|
||||
apple: [{ url: "/apple-touch-icon.png", sizes: "180x180" }],
|
||||
shortcut: "/favicon.ico",
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
@@ -43,41 +43,40 @@ import {
|
||||
User
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { BrandLogo } from "@/components/brand-logo";
|
||||
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">
|
||||
<div className="min-h-screen bg-[#0d0821] text-slate-200 selection:bg-primary/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 className="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-primary/[0.03] blur-[150px] rounded-full animate-pulse" />
|
||||
<div className="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] bg-accent/[0.05] 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">
|
||||
<nav className="fixed top-0 w-full z-50 border-b border-white/[0.03] bg-[#0d0821]/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>
|
||||
<BrandLogo size={44} priority className="drop-shadow-[0_0_18px_rgba(255,81,249,0.35)] group-hover:scale-110 group-hover:rotate-6 transition-all duration-500" />
|
||||
<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 || "Axiom"}</h1>
|
||||
<span className="text-[9px] font-black uppercase tracking-[0.2em] text-red-500/80 mt-1">Dashboard</span>
|
||||
<span className="text-[9px] font-black uppercase tracking-[0.2em] text-primary/80 mt-1">by HexaHost</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>
|
||||
<Link href="#features" className="hover:text-primary transition-colors">Features</Link>
|
||||
<Link href="#architecture" className="hover:text-primary transition-colors">Architecture</Link>
|
||||
<Link href="#modules" className="hover:text-primary transition-colors">Modules</Link>
|
||||
<Link href="#network" className="hover:text-primary 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"
|
||||
className="rounded-xl px-7 h-11 font-black uppercase tracking-widest text-[10px] gap-2.5 shadow-2xl shadow-primary/20 hover:scale-[1.05] active:scale-95 transition-all bg-gradient-to-r from-primary to-accent border-none"
|
||||
>
|
||||
<LogIn className="h-3.5 w-3.5" />
|
||||
Initialize Console
|
||||
@@ -89,17 +88,17 @@ export default function LandingPage() {
|
||||
{/* 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">
|
||||
<div className="inline-flex items-center gap-3 px-6 py-2.5 rounded-2xl bg-primary/[0.03] border border-primary/10 text-primary 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 className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary-hover"></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>
|
||||
<span className="bg-gradient-to-r from-primary 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">
|
||||
@@ -110,7 +109,7 @@ export default function LandingPage() {
|
||||
<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"
|
||||
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-primary-hover text-white hover:bg-primary border-none transition-all hover:scale-105"
|
||||
>
|
||||
<LayoutDashboard className="h-6 w-6 group-hover:rotate-12 transition-transform" />
|
||||
Open Dashboard
|
||||
@@ -124,12 +123,12 @@ export default function LandingPage() {
|
||||
|
||||
{/* 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)]">
|
||||
<div className="absolute -inset-4 bg-gradient-to-r from-primary/20 to-transparent rounded-[60px] blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-1000" />
|
||||
<div className="relative bg-[#0d0821] 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-primary/40" />
|
||||
<div className="h-3 w-3 rounded-full bg-white/10" />
|
||||
<div className="h-3 w-3 rounded-full bg-white/5" />
|
||||
</div>
|
||||
@@ -139,27 +138,27 @@ export default function LandingPage() {
|
||||
<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="aspect-[16/10] p-16 flex flex-col gap-16 relative overflow-hidden bg-gradient-to-br from-[#0d0821] to-[#1a1230]">
|
||||
<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-12 w-64 bg-primary/10 rounded-[20px] border border-primary/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 className="h-20 w-20 rounded-[30px] bg-primary/10 border border-primary/20 flex items-center justify-center shadow-[0_0_30px_rgba(239,68,68,0.2)]">
|
||||
<Activity className="h-8 w-8 text-primary 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 key={i} className="h-40 bg-white/[0.02] border border-white/[0.04] rounded-[40px] p-8 space-y-6 hover:border-primary/20 transition-colors">
|
||||
<div className="h-10 w-10 rounded-2xl bg-primary/10 border border-primary/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 className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] h-[90%] bg-primary/[0.02] blur-[150px] pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -170,13 +169,13 @@ export default function LandingPage() {
|
||||
<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>
|
||||
<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-primary 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>
|
||||
<p className="text-5xl font-black text-primary font-outfit">12ms</p>
|
||||
</div>
|
||||
<div className="h-16 w-[1px] bg-white/5" />
|
||||
<div className="text-right">
|
||||
@@ -192,7 +191,7 @@ export default function LandingPage() {
|
||||
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"
|
||||
color: "bg-primary/10 border-primary/20 text-primary"
|
||||
},
|
||||
{
|
||||
title: "Edge Dispatch",
|
||||
@@ -204,7 +203,7 @@ export default function LandingPage() {
|
||||
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"
|
||||
color: "bg-primary/10 border-primary/20 text-primary"
|
||||
},
|
||||
{
|
||||
title: "Threaded Support",
|
||||
@@ -216,7 +215,7 @@ export default function LandingPage() {
|
||||
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"
|
||||
color: "bg-accent/10 border-accent/20 text-accent"
|
||||
},
|
||||
{
|
||||
title: "Cloud Integrity",
|
||||
@@ -225,7 +224,7 @@ export default function LandingPage() {
|
||||
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 key={i} className="group glass border-white/5 p-12 rounded-[50px] hover:border-primary/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>
|
||||
@@ -234,7 +233,7 @@ export default function LandingPage() {
|
||||
</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 className="mt-8 h-[2px] w-0 bg-primary group-hover:w-full transition-all duration-700" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -245,7 +244,7 @@ export default function LandingPage() {
|
||||
<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]">
|
||||
<div className="inline-flex px-4 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary 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>
|
||||
@@ -260,7 +259,7 @@ export default function LandingPage() {
|
||||
{ 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" />
|
||||
<item.icon className="h-6 w-6 text-primary" />
|
||||
<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>
|
||||
@@ -268,13 +267,13 @@ export default function LandingPage() {
|
||||
</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="absolute inset-0 bg-primary/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="absolute top-0 left-1/2 -translate-x-1/2 h-4 w-4 rounded-full bg-primary 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" />
|
||||
<Bot className="h-20 w-20 text-primary/40 group-hover:text-primary transition-all duration-700 group-hover:scale-125" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -286,7 +285,7 @@ export default function LandingPage() {
|
||||
<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>
|
||||
<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-primary to-[#f093ff] 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>
|
||||
|
||||
@@ -305,9 +304,9 @@ export default function LandingPage() {
|
||||
{ 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 key={i} className="group p-8 rounded-[40px] bg-white/[0.01] border border-white/[0.03] hover:bg-primary/[0.02] hover:border-primary/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-primary/10 transition-colors">
|
||||
<mod.icon className="h-6 w-6 text-slate-600 group-hover:text-primary 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>
|
||||
@@ -318,11 +317,11 @@ export default function LandingPage() {
|
||||
</section>
|
||||
|
||||
{/* Network / Global Section */}
|
||||
<section id="network" className="py-48 px-6 bg-red-600/[0.01] relative overflow-hidden">
|
||||
<section id="network" className="py-48 px-6 bg-primary-hover/[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>
|
||||
<h2 className="text-6xl md:text-8xl font-bold text-white tracking-tighter font-outfit uppercase">Global <br /><span className="text-primary">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>
|
||||
@@ -335,20 +334,20 @@ export default function LandingPage() {
|
||||
<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 className="text-[11px] font-black uppercase text-primary 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 bg-primary/10 blur-[150px] opacity-0 group-hover:opacity-100 transition-opacity duration-1000" />
|
||||
<div className="aspect-square bg-[#0d0821] border border-white/[0.05] rounded-[60px] p-12 relative overflow-hidden flex items-center justify-center">
|
||||
<Globe className="h-64 w-64 text-primary/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 className="h-32 w-32 bg-primary/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" />
|
||||
<Bot className="h-20 w-20 text-primary shadow-[0_0_50px_rgba(255,81,249,0.5)] bg-[#0d0821] rounded-3xl p-4 border border-primary/50" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -372,7 +371,7 @@ export default function LandingPage() {
|
||||
].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" />
|
||||
<div className="h-2 w-2 rounded-full bg-primary opacity-20 group-hover:opacity-100 transition-all" />
|
||||
{item.q}
|
||||
</h4>
|
||||
<p className="text-slate-500 font-bold leading-relaxed">{item.a}</p>
|
||||
@@ -384,7 +383,7 @@ export default function LandingPage() {
|
||||
|
||||
{/* 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="max-w-6xl mx-auto relative rounded-[80px] p-24 md:p-32 overflow-hidden bg-gradient-to-br from-primary to-[#6b2aff] 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>
|
||||
@@ -406,7 +405,7 @@ export default function LandingPage() {
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-32 border-t border-white/[0.03] bg-[#020617] relative z-20">
|
||||
<footer className="py-32 border-t border-white/[0.03] bg-[#0d0821] 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">
|
||||
@@ -420,17 +419,17 @@ export default function LandingPage() {
|
||||
<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>
|
||||
<li><Link href="#" className="hover:text-primary transition-colors">GitHub Repository</Link></li>
|
||||
<li><Link href="/docs" className="hover:text-primary transition-colors">Documentation</Link></li>
|
||||
<li><Link href="#" className="hover:text-primary 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>
|
||||
<li><Link href="/privacy" className="hover:text-primary transition-colors">Privacy Shield</Link></li>
|
||||
<li><Link href="/terms" className="hover:text-primary transition-colors">Terms of Service</Link></li>
|
||||
<li><Link href="#" className="hover:text-primary transition-colors">Discord Server</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -439,8 +438,8 @@ export default function LandingPage() {
|
||||
© 2026 HexaHost // Axiom // 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" />
|
||||
<div className="flex items-center gap-3 text-[10px] font-black text-primary uppercase tracking-[0.3em]">
|
||||
<div className="h-2 w-2 rounded-full bg-primary animate-pulse" />
|
||||
All Nodes Operational
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,22 +16,21 @@
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { Bot, ChevronLeft, ShieldCheck, Lock, Eye, FileText } from "lucide-react";
|
||||
import { ChevronLeft, ShieldCheck, Lock, Eye, FileText } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { BrandLogo } from "@/components/brand-logo";
|
||||
|
||||
export default function PrivacyPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#020617] text-slate-200 font-sans">
|
||||
<div className="min-h-screen bg-[#0d0821] text-slate-200 font-sans">
|
||||
{/* Background Decor */}
|
||||
<div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
|
||||
<div className="absolute top-[-10%] right-[-5%] w-[40%] h-[40%] bg-red-500/[0.03] blur-[120px] rounded-full" />
|
||||
<div className="absolute top-[-10%] right-[-5%] w-[40%] h-[40%] bg-primary/[0.03] blur-[120px] rounded-full" />
|
||||
</div>
|
||||
|
||||
<nav className="fixed top-0 w-full z-50 border-b border-white/[0.03] bg-[#020617]/80 backdrop-blur-3xl px-6 h-20 flex items-center justify-between">
|
||||
<nav className="fixed top-0 w-full z-50 border-b border-white/[0.03] bg-[#0d0821]/80 backdrop-blur-3xl px-6 h-20 flex items-center justify-between">
|
||||
<Link href="/" className="flex items-center gap-4 group">
|
||||
<div className="h-9 w-9 rounded-xl bg-red-600 flex items-center justify-center mr-4">
|
||||
<Bot className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<BrandLogo size={36} className="group-hover:scale-110 transition-transform" />
|
||||
<span className="text-xl font-bold text-white font-outfit uppercase tracking-tighter">Axiom Engine</span>
|
||||
</Link>
|
||||
<Link href="/">
|
||||
@@ -44,19 +43,19 @@ export default function PrivacyPage() {
|
||||
|
||||
<main className="relative z-10 pt-40 pb-32 px-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/10 border border-red-500/20 text-red-500 text-[10px] font-black uppercase tracking-widest mb-8">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-[10px] font-black uppercase tracking-widest mb-8">
|
||||
<ShieldCheck className="h-3 w-3" />
|
||||
Privacy Shield v2.0
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-white font-outfit tracking-tighter uppercase mb-12 italic">
|
||||
Privacy <span className="text-red-500 not-italic">Policy.</span>
|
||||
Privacy <span className="text-primary not-italic">Policy.</span>
|
||||
</h1>
|
||||
|
||||
<div className="glass border-white/5 rounded-[40px] p-10 md:p-16 space-y-12">
|
||||
<section className="space-y-6">
|
||||
<div className="flex items-center gap-4 text-white">
|
||||
<div className="h-10 w-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-red-500">
|
||||
<div className="h-10 w-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-primary">
|
||||
<Eye className="h-5 w-5" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold font-outfit uppercase tracking-tight">Data Collection</h2>
|
||||
@@ -68,7 +67,7 @@ export default function PrivacyPage() {
|
||||
|
||||
<section className="space-y-6">
|
||||
<div className="flex items-center gap-4 text-white">
|
||||
<div className="h-10 w-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-red-500">
|
||||
<div className="h-10 w-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-primary">
|
||||
<Lock className="h-5 w-5" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold font-outfit uppercase tracking-tight">Data Integrity</h2>
|
||||
@@ -80,7 +79,7 @@ export default function PrivacyPage() {
|
||||
|
||||
<section className="space-y-6">
|
||||
<div className="flex items-center gap-4 text-white">
|
||||
<div className="h-10 w-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-red-500">
|
||||
<div className="h-10 w-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-primary">
|
||||
<FileText className="h-5 w-5" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold font-outfit uppercase tracking-tight">User Rights</h2>
|
||||
|
||||
@@ -16,22 +16,21 @@
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { Bot, ChevronLeft, Scale, Terminal, ShieldAlert, Cpu } from "lucide-react";
|
||||
import { ChevronLeft, Scale, Terminal, ShieldAlert, Cpu } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { BrandLogo } from "@/components/brand-logo";
|
||||
|
||||
export default function TermsPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#020617] text-slate-200 font-sans">
|
||||
<div className="min-h-screen bg-[#0d0821] text-slate-200 font-sans">
|
||||
{/* Background Decor */}
|
||||
<div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
|
||||
<div className="absolute bottom-[-10%] left-[-5%] w-[40%] h-[40%] bg-red-600/[0.03] blur-[120px] rounded-full" />
|
||||
<div className="absolute bottom-[-10%] left-[-5%] w-[40%] h-[40%] bg-accent/[0.05] blur-[120px] rounded-full" />
|
||||
</div>
|
||||
|
||||
<nav className="fixed top-0 w-full z-50 border-b border-white/[0.03] bg-[#020617]/80 backdrop-blur-3xl px-6 h-20 flex items-center justify-between">
|
||||
<nav className="fixed top-0 w-full z-50 border-b border-white/[0.03] bg-[#0d0821]/80 backdrop-blur-3xl px-6 h-20 flex items-center justify-between">
|
||||
<Link href="/" className="flex items-center gap-4 group">
|
||||
<div className="h-10 w-10 rounded-xl bg-red-600 flex items-center justify-center group-hover:rotate-12 transition-transform">
|
||||
<Bot className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<BrandLogo size={40} className="group-hover:rotate-12 transition-transform" />
|
||||
<span className="text-xl font-bold text-white font-outfit uppercase tracking-tighter">{process.env.NEXT_PUBLIC_BRAND_NAME || "Axiom"} Engine</span>
|
||||
</Link>
|
||||
<Link href="/">
|
||||
@@ -44,19 +43,19 @@ export default function TermsPage() {
|
||||
|
||||
<main className="relative z-10 pt-40 pb-32 px-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/10 border border-red-500/20 text-red-500 text-[10px] font-black uppercase tracking-widest mb-8">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-[10px] font-black uppercase tracking-widest mb-8">
|
||||
<Scale className="h-3 w-3" />
|
||||
Neural Protocol v2.4
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-white font-outfit tracking-tighter uppercase mb-12 italic text-right">
|
||||
Terms of <span className="text-red-500 not-italic">Service.</span>
|
||||
Terms of <span className="text-primary not-italic">Service.</span>
|
||||
</h1>
|
||||
|
||||
<div className="glass border-white/5 rounded-[40px] p-10 md:p-16 space-y-12 bg-gradient-to-br from-white/[0.01] to-transparent">
|
||||
<section className="space-y-6">
|
||||
<div className="flex items-center gap-4 text-white">
|
||||
<div className="h-10 w-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-red-500">
|
||||
<div className="h-10 w-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-primary">
|
||||
<Terminal className="h-5 w-5" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold font-outfit uppercase tracking-tight">Acceptance of Protocol</h2>
|
||||
@@ -68,7 +67,7 @@ export default function TermsPage() {
|
||||
|
||||
<section className="space-y-6">
|
||||
<div className="flex items-center gap-4 text-white">
|
||||
<div className="h-10 w-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-red-500">
|
||||
<div className="h-10 w-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-primary">
|
||||
<ShieldAlert className="h-5 w-5" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold font-outfit uppercase tracking-tight">Usage Constraints</h2>
|
||||
@@ -80,7 +79,7 @@ export default function TermsPage() {
|
||||
|
||||
<section className="space-y-6">
|
||||
<div className="flex items-center gap-4 text-white">
|
||||
<div className="h-10 w-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-red-500">
|
||||
<div className="h-10 w-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-primary">
|
||||
<Cpu className="h-5 w-5" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold font-outfit uppercase tracking-tight">API & Scaling</h2>
|
||||
|
||||
Reference in New Issue
Block a user