50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { Link } from "react-router-dom";
|
|
import { Rocket, Play } from "lucide-react";
|
|
|
|
interface DocsHeroSectionProps {
|
|
title?: string;
|
|
description?: string;
|
|
showButtons?: boolean;
|
|
}
|
|
|
|
export default function DocsHeroSection({
|
|
title = "Welcome to AeThex Documentation",
|
|
description = "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.",
|
|
showButtons = true,
|
|
}: DocsHeroSectionProps) {
|
|
return (
|
|
<div className="mb-12 text-center">
|
|
<h2 className="text-3xl font-bold text-white mb-4">{title}</h2>
|
|
<p className="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
|
|
{description}
|
|
</p>
|
|
|
|
{showButtons && (
|
|
<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>
|
|
);
|
|
}
|