59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { Link } from "react-router-dom";
|
|
import { Rocket, Play } from "lucide-react";
|
|
import { useDocsTheme } from "@/contexts/DocsThemeContext";
|
|
|
|
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) {
|
|
const { colors, theme } = useDocsTheme();
|
|
const buttonClass =
|
|
theme === "professional"
|
|
? "bg-black hover:bg-gray-900 text-white"
|
|
: "bg-purple-600 hover:bg-purple-700";
|
|
const outlineButtonClass =
|
|
theme === "professional"
|
|
? "border-gray-300 text-black hover:bg-gray-100"
|
|
: "border-slate-600 text-white hover:bg-slate-800";
|
|
|
|
return (
|
|
<div className="mb-12 text-center">
|
|
<h2 className={`text-3xl font-bold ${colors.headingColor} mb-4`}>
|
|
{title}
|
|
</h2>
|
|
<p className={`text-xl ${colors.textMuted} 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={buttonClass}>
|
|
<Link to="/docs/getting-started">
|
|
<Rocket className="h-5 w-5 mr-2" />
|
|
Get Started
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="lg"
|
|
className={outlineButtonClass}
|
|
>
|
|
<Link to="/docs/tutorials">
|
|
<Play className="h-5 w-5 mr-2" />
|
|
Watch Tutorials
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|