import { useState, useEffect, useRef } from "react"; import Layout from "@/components/Layout"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import LoadingScreen from "@/components/LoadingScreen"; import { aethexToast } from "@/lib/aethex-toast"; import { Link } from "react-router-dom"; import { BookOpen, Code, Terminal, Download, ExternalLink, ArrowRight, Search, FileText, Video, Headphones, Github, Play, } from "lucide-react"; export default function Documentation() { const [isLoading, setIsLoading] = useState(true); const [searchQuery, setSearchQuery] = useState(""); const toastShownRef = useRef(false); useEffect(() => { const timer = setTimeout(() => { setIsLoading(false); if (!toastShownRef.current) { aethexToast.system("Documentation center loaded"); toastShownRef.current = true; } }, 1000); return () => clearTimeout(timer); }, []); const docCategories = [ { title: "Getting Started", description: "Quick start guides and tutorials for beginners", icon: Play, docs: 12, color: "from-green-500 to-emerald-600", sections: [ "Installation", "First Steps", "Basic Concepts", "Hello World", ], }, { title: "API Reference", description: "Complete API documentation with examples", icon: Code, docs: 45, color: "from-blue-500 to-cyan-600", sections: ["Authentication", "Endpoints", "SDKs", "Rate Limits"], }, { title: "Tutorials", description: "Step-by-step guides for common use cases", icon: BookOpen, docs: 28, color: "from-purple-500 to-indigo-600", sections: [ "Game Development", "Web Apps", "Mobile Apps", "AI Integration", ], }, { title: "CLI Tools", description: "Command-line interface documentation", icon: Terminal, docs: 15, color: "from-orange-500 to-red-600", sections: ["Installation", "Commands", "Configuration", "Scripts"], }, ]; const quickStart = [ { title: "Install AeThex SDK", command: "npm install @aethex/sdk", description: "Get started with our JavaScript SDK", }, { title: "Initialize Project", command: "aethex init my-project", description: "Create a new AeThex project", }, { title: "Deploy to Cloud", command: "aethex deploy --env production", description: "Deploy your application to AeThex Cloud", }, ]; const resources = [ { title: "Video Tutorials", description: "Visual learning with step-by-step video guides", icon: Video, count: "50+ videos", link: "/tutorials", color: "from-red-500 to-pink-600", }, { title: "Podcast Series", description: "Deep dives into AeThex technology and best practices", icon: Headphones, count: "20+ episodes", link: "/podcast", color: "from-purple-500 to-indigo-600", }, { title: "Code Examples", description: "Production-ready code samples and templates", icon: Github, count: "100+ repos", link: "/examples", color: "from-green-500 to-emerald-600", }, { title: "Downloads", description: "SDKs, tools, and assets for development", icon: Download, count: "Latest releases", link: "/downloads", color: "from-blue-500 to-cyan-600", }, ]; if (isLoading) { return ( ); } return (
{/* Hero Section */}
Documentation Center

Developer Documentation

Comprehensive guides, API references, and tutorials to help you build amazing applications with AeThex technologies.

{/* Search Bar */}
setSearchQuery(e.target.value)} className="w-full pl-10 pr-4 py-3 rounded-lg border border-border/50 bg-background/50 backdrop-blur-sm focus:border-aethex-400 focus:outline-none text-foreground placeholder:text-muted-foreground" />
{/* Documentation Categories */}

Browse Documentation

Find the information you need organized by category

{docCategories.map((category, index) => { const Icon = category.icon; return (
{category.title} {category.docs} docs
{category.description}
{category.sections.map((section, sectionIndex) => ( ))}
); })}
{/* Quick Start */}

Quick Start Guide

Get up and running with AeThex in minutes

{quickStart.map((step, index) => (
{index + 1}

{step.title}

{step.description}

$ {step.command}
))}
{/* Resources */}

Learning Resources

Multiple ways to learn and master AeThex technologies

{resources.map((resource, index) => { const Icon = resource.icon; return (
{resource.title} {resource.description}
{resource.count}
); })}
{/* CTA Section */}

Need Help Getting Started?

Our documentation is continuously updated. Can't find what you're looking for? Our support team is here to help.

); }