Create Documentation page
cgen-74f10a605a534c1eaf3f818dcad14667
This commit is contained in:
Builder.io
parent
a34b647683
commit
a8110dd84e
1 changed files with 344 additions and 0 deletions
344
client/pages/Documentation.tsx
Normal file
344
client/pages/Documentation.tsx
Normal file
|
|
@ -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 <LoadingScreen message="Loading Documentation..." showProgress={true} duration={1000} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-aethex-gradient">
|
||||
{/* Hero Section */}
|
||||
<section className="relative py-20 lg:py-32">
|
||||
<div className="container mx-auto px-4 text-center relative z-10">
|
||||
<div className="max-w-4xl mx-auto space-y-8">
|
||||
<Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle">
|
||||
<FileText className="h-3 w-3 mr-1" />
|
||||
Documentation Center
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-4xl lg:text-6xl font-bold leading-tight">
|
||||
<span className="text-gradient-purple">Developer Documentation</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||
Comprehensive guides, API references, and tutorials to help you build
|
||||
amazing applications with AeThex technologies.
|
||||
</p>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="relative max-w-lg mx-auto">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search documentation..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Documentation Categories */}
|
||||
<section className="py-20 bg-background/30">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-16 animate-slide-up">
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
||||
Browse Documentation
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
Find the information you need organized by category
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 max-w-6xl mx-auto">
|
||||
{docCategories.map((category, index) => {
|
||||
const Icon = category.icon;
|
||||
return (
|
||||
<Card
|
||||
key={index}
|
||||
className="border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift animate-scale-in"
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className={`p-3 rounded-lg bg-gradient-to-r ${category.color}`}>
|
||||
<Icon className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-xl">{category.title}</CardTitle>
|
||||
<Badge variant="outline">{category.docs} docs</Badge>
|
||||
</div>
|
||||
<CardDescription className="mt-1">
|
||||
{category.description}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{category.sections.map((section, sectionIndex) => (
|
||||
<Button
|
||||
key={sectionIndex}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="justify-start text-xs h-8"
|
||||
>
|
||||
{section}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Button asChild className="w-full">
|
||||
<Link to={`/docs/${category.title.toLowerCase().replace(' ', '-')}`}>
|
||||
View {category.title}
|
||||
<ArrowRight className="h-4 w-4 ml-2" />
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Quick Start */}
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-16 animate-slide-up">
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
||||
Quick Start Guide
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
Get up and running with AeThex in minutes
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-3xl mx-auto space-y-6">
|
||||
{quickStart.map((step, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 animate-slide-right"
|
||||
style={{ animationDelay: `${index * 0.2}s` }}
|
||||
>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-gradient-to-r from-aethex-500 to-neon-blue flex items-center justify-center text-white font-bold text-sm">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-lg text-gradient mb-2">{step.title}</h3>
|
||||
<p className="text-sm text-muted-foreground mb-3">{step.description}</p>
|
||||
<div className="bg-background/50 border border-border/30 rounded-lg p-3 font-mono text-sm">
|
||||
<span className="text-muted-foreground">$ </span>
|
||||
<span className="text-aethex-400">{step.command}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Resources */}
|
||||
<section className="py-20 bg-background/30">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-16 animate-slide-up">
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
||||
Learning Resources
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
Multiple ways to learn and master AeThex technologies
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
|
||||
{resources.map((resource, index) => {
|
||||
const Icon = resource.icon;
|
||||
return (
|
||||
<Card
|
||||
key={index}
|
||||
className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
<CardHeader>
|
||||
<div className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${resource.color} flex items-center justify-center mb-4`}>
|
||||
<Icon className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">{resource.title}</CardTitle>
|
||||
<CardDescription>{resource.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Badge variant="outline" className="mb-4">{resource.count}</Badge>
|
||||
<Button asChild size="sm" className="w-full">
|
||||
<Link to={resource.link}>
|
||||
Explore
|
||||
<ExternalLink className="h-3 w-3 ml-1" />
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<div className="max-w-3xl mx-auto space-y-8 animate-scale-in">
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-gradient-purple">
|
||||
Need Help Getting Started?
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground">
|
||||
Our documentation is continuously updated. Can't find what you're looking for?
|
||||
Our support team is here to help.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<Button asChild size="lg" className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6">
|
||||
<Link to="/support" className="flex items-center space-x-2">
|
||||
<BookOpen className="h-5 w-5" />
|
||||
<span>Get Support</span>
|
||||
<ArrowRight className="h-5 w-5" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6">
|
||||
<Link to="/community">Join Community</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue