348 lines
11 KiB
TypeScript
348 lines
11 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Link } from "react-router-dom";
|
|
import {
|
|
BookOpen,
|
|
Code,
|
|
Terminal,
|
|
Video,
|
|
FileText,
|
|
ArrowRight,
|
|
Rocket,
|
|
Zap,
|
|
Shield,
|
|
Users,
|
|
Play,
|
|
Download,
|
|
Github,
|
|
ExternalLink,
|
|
} from "lucide-react";
|
|
|
|
const quickStartCards = [
|
|
{
|
|
title: "Platform Overview",
|
|
description: "Get familiar with AeThex platform features and capabilities",
|
|
icon: Rocket,
|
|
href: "/docs/getting-started",
|
|
duration: "5 min read",
|
|
difficulty: "Beginner",
|
|
},
|
|
{
|
|
title: "First Tutorial",
|
|
description:
|
|
"Follow your first interactive tutorial to build something amazing",
|
|
icon: Play,
|
|
href: "/docs/tutorials",
|
|
duration: "15 min",
|
|
difficulty: "Beginner",
|
|
isNew: true,
|
|
},
|
|
{
|
|
title: "API Integration",
|
|
description: "Learn how to integrate with AeThex APIs and services",
|
|
icon: Code,
|
|
href: "/docs/api",
|
|
duration: "10 min read",
|
|
difficulty: "Intermediate",
|
|
},
|
|
{
|
|
title: "CLI Tools",
|
|
description: "Master the command line tools for efficient development",
|
|
icon: Terminal,
|
|
href: "/docs/cli",
|
|
duration: "8 min read",
|
|
difficulty: "Intermediate",
|
|
},
|
|
];
|
|
|
|
const resourceSections = [
|
|
{
|
|
title: "Tutorials & Guides",
|
|
description: "Step-by-step tutorials and comprehensive guides",
|
|
icon: Video,
|
|
href: "/docs/tutorials",
|
|
items: [
|
|
"Platform Quick Start",
|
|
"Game Development",
|
|
"AI Integration",
|
|
"Performance Optimization",
|
|
],
|
|
badge: "6 tutorials",
|
|
},
|
|
{
|
|
title: "API Reference",
|
|
description: "Complete API documentation with examples",
|
|
icon: Code,
|
|
href: "/docs/api",
|
|
items: ["Authentication", "Project Management", "User APIs", "Webhooks"],
|
|
badge: "40+ endpoints",
|
|
},
|
|
{
|
|
title: "Examples",
|
|
description: "Ready-to-use code examples and templates",
|
|
icon: FileText,
|
|
href: "/docs/examples",
|
|
items: [
|
|
"React Components",
|
|
"Game Templates",
|
|
"API Integration",
|
|
"Deployment Scripts",
|
|
],
|
|
badge: "25+ examples",
|
|
},
|
|
];
|
|
|
|
const featuredUpdates = [
|
|
{
|
|
title: "New AI Integration Tutorials",
|
|
description: "Learn how to integrate cutting-edge AI features",
|
|
date: "2 days ago",
|
|
type: "Tutorial",
|
|
isNew: true,
|
|
},
|
|
{
|
|
title: "API v2.1 Documentation",
|
|
description: "Updated API docs with new endpoints and features",
|
|
date: "1 week ago",
|
|
type: "API",
|
|
},
|
|
{
|
|
title: "Performance Best Practices",
|
|
description: "New guide on optimizing application performance",
|
|
date: "2 weeks ago",
|
|
type: "Guide",
|
|
},
|
|
];
|
|
|
|
export default function DocsOverview() {
|
|
return (
|
|
<div>
|
|
{/* Hero Section */}
|
|
<div className="mb-12 text-center">
|
|
<h2 className="text-3xl font-bold text-white mb-4">
|
|
Welcome to AeThex Documentation
|
|
</h2>
|
|
<p className="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
|
|
Everything you need to build, deploy, and scale amazing projects with
|
|
AeThex. Get started with our guides, explore our APIs, and learn from
|
|
comprehensive tutorials.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="bg-purple-600 hover:bg-purple-700"
|
|
>
|
|
<Link to="/docs/getting-started">
|
|
<Rocket className="h-5 w-5 mr-2" />
|
|
Get Started
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="lg"
|
|
className="border-slate-600 text-white hover:bg-slate-800"
|
|
>
|
|
<Link to="/docs/tutorials">
|
|
<Play className="h-5 w-5 mr-2" />
|
|
Watch Tutorials
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Start Cards */}
|
|
<div className="mb-12">
|
|
<h3 className="text-2xl font-bold text-white mb-6">Quick Start</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{quickStartCards.map((card, index) => {
|
|
const Icon = card.icon;
|
|
return (
|
|
<Card
|
|
key={index}
|
|
className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 hover:scale-105 cursor-pointer group"
|
|
>
|
|
<Link to={card.href}>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<Icon className="h-8 w-8 text-purple-400" />
|
|
{card.isNew && (
|
|
<Badge className="bg-green-600 text-white text-xs">
|
|
New
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<CardTitle className="text-white text-lg group-hover:text-purple-400 transition-colors">
|
|
{card.title}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<CardDescription className="text-gray-400 mb-3">
|
|
{card.description}
|
|
</CardDescription>
|
|
<div className="flex items-center justify-between text-xs text-gray-500">
|
|
<span>{card.duration}</span>
|
|
<Badge variant="outline" className="text-xs">
|
|
{card.difficulty}
|
|
</Badge>
|
|
</div>
|
|
</CardContent>
|
|
</Link>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Resource Sections */}
|
|
<div className="mb-12">
|
|
<h3 className="text-2xl font-bold text-white mb-6">
|
|
Documentation Sections
|
|
</h3>
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{resourceSections.map((section, index) => {
|
|
const Icon = section.icon;
|
|
return (
|
|
<Card
|
|
key={index}
|
|
className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer group"
|
|
>
|
|
<Link to={section.href}>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<Icon className="h-8 w-8 text-purple-400" />
|
|
<Badge variant="outline">{section.badge}</Badge>
|
|
</div>
|
|
<CardTitle className="text-white group-hover:text-purple-400 transition-colors">
|
|
{section.title}
|
|
</CardTitle>
|
|
<CardDescription className="text-gray-400">
|
|
{section.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ul className="space-y-2 mb-4">
|
|
{section.items.map((item, itemIndex) => (
|
|
<li
|
|
key={itemIndex}
|
|
className="text-sm text-gray-400 flex items-center"
|
|
>
|
|
<ArrowRight className="h-3 w-3 mr-2 text-purple-400" />
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="flex items-center text-purple-400 text-sm group-hover:text-purple-300 transition-colors">
|
|
Explore section
|
|
<ArrowRight className="h-4 w-4 ml-1" />
|
|
</div>
|
|
</CardContent>
|
|
</Link>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Featured Updates */}
|
|
<div className="mb-12">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-2xl font-bold text-white">Recent Updates</h3>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-slate-600 text-white hover:bg-slate-800"
|
|
>
|
|
View All Updates
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-4">
|
|
{featuredUpdates.map((update, index) => (
|
|
<Card
|
|
key={index}
|
|
className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer"
|
|
>
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="flex items-center space-x-3 mb-2">
|
|
<h4 className="text-white font-medium">{update.title}</h4>
|
|
{update.isNew && (
|
|
<Badge className="bg-green-600 text-white text-xs">
|
|
New
|
|
</Badge>
|
|
)}
|
|
<Badge variant="outline" className="text-xs">
|
|
{update.type}
|
|
</Badge>
|
|
</div>
|
|
<p className="text-gray-400 text-sm">
|
|
{update.description}
|
|
</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-xs text-gray-500">{update.date}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Additional Resources */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<Card className="bg-slate-800/50 border-slate-700">
|
|
<CardHeader>
|
|
<CardTitle className="text-white flex items-center">
|
|
<Github className="h-5 w-5 mr-2" />
|
|
GitHub Repository
|
|
</CardTitle>
|
|
<CardDescription className="text-gray-400">
|
|
Explore our open-source projects and contribute to the community
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button
|
|
variant="outline"
|
|
className="border-slate-600 text-white hover:bg-slate-800"
|
|
>
|
|
<ExternalLink className="h-4 w-4 mr-2" />
|
|
View on GitHub
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-slate-800/50 border-slate-700">
|
|
<CardHeader>
|
|
<CardTitle className="text-white flex items-center">
|
|
<Users className="h-5 w-5 mr-2" />
|
|
Community Support
|
|
</CardTitle>
|
|
<CardDescription className="text-gray-400">
|
|
Join our community for help, discussions, and collaboration
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button
|
|
variant="outline"
|
|
className="border-slate-600 text-white hover:bg-slate-800"
|
|
>
|
|
<ExternalLink className="h-4 w-4 mr-2" />
|
|
Join Community
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|