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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user