From a8110dd84e4dae8e6e3ac33159df0cdba46fb267 Mon Sep 17 00:00:00 2001 From: "Builder.io" Date: Tue, 5 Aug 2025 23:24:19 +0000 Subject: [PATCH] Create Documentation page cgen-74f10a605a534c1eaf3f818dcad14667 --- client/pages/Documentation.tsx | 344 +++++++++++++++++++++++++++++++++ 1 file changed, 344 insertions(+) create mode 100644 client/pages/Documentation.tsx diff --git a/client/pages/Documentation.tsx b/client/pages/Documentation.tsx new file mode 100644 index 00000000..ec4b7edf --- /dev/null +++ b/client/pages/Documentation.tsx @@ -0,0 +1,344 @@ +import { useState, useEffect } 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(""); + + useEffect(() => { + const timer = setTimeout(() => { + setIsLoading(false); + aethexToast.system("Documentation center loaded"); + }, 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. +

+ +
+ + +
+
+
+
+
+ + ); +}