AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

completionId: cgen-25ad5640701c4b20a02011b9296ab83f

Browse source 
cgen-25ad5640701c4b20a02011b9296ab83f
This commit is contained in:
Builder.io 2025-11-09 09:27:08 +00:00
parent f31e937977
commit 8a07d5c2e6
1 changed files with 22 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
client/components/docs/QuickStartSection.tsx
View file

@ -16,6 +16,7 @@ import {
Link as LinkIcon, Link as LinkIcon,
LucideIcon, LucideIcon,
} from "lucide-react"; } from "lucide-react";
import { useDocsTheme } from "@/contexts/DocsThemeContext";
export interface QuickStartCard { export interface QuickStartCard {
title: string; title: string;
@ -87,36 +88,51 @@ interface QuickStartSectionProps {
export default function QuickStartSection({ export default function QuickStartSection({
cards = defaultCards, cards = defaultCards,
}: QuickStartSectionProps) { }: QuickStartSectionProps) {
const { colors, theme } = useDocsTheme();
return ( return (
<div className="mb-12"> <div className="mb-12">
<h3 className="text-2xl font-bold text-white mb-6">Quick Start</h3> <h3 className={`text-2xl font-bold ${colors.headingColor} mb-6`}>
Quick Start
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{cards.map((card, index) => { {cards.map((card, index) => {
const Icon = card.icon; const Icon = card.icon;
const hoverBorderColor =
theme === "professional" ? "hover:border-gray-400" : "hover:border-purple-500/50";
const iconColor =
theme === "professional" ? "text-gray-700" : "text-purple-400";
const hoverTitleColor =
theme === "professional" ? "group-hover:text-gray-900" : "group-hover:text-purple-400";
return ( return (
<Card <Card
key={index} 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" className={`${colors.cardBg} border ${colors.cardBorder} ${hoverBorderColor} transition-all duration-300 hover:scale-105 cursor-pointer group`}
> >
<Link to={card.href}> <Link to={card.href}>
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<Icon className="h-8 w-8 text-purple-400" /> <Icon className={`h-8 w-8 ${iconColor}`} />
{card.isNew && ( {card.isNew && (
<Badge className="bg-green-600 text-white text-xs"> <Badge className="bg-green-600 text-white text-xs">
New New
</Badge> </Badge>
)} )}
</div> </div>
<CardTitle className="text-white text-lg group-hover:text-purple-400 transition-colors"> <CardTitle
className={`${colors.headingColor} text-lg ${hoverTitleColor} transition-colors`}
>
{card.title} {card.title}
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<CardDescription className="text-gray-400 mb-3"> <CardDescription className={`${colors.textMuted} mb-3`}>
{card.description} {card.description}
</CardDescription> </CardDescription>
<div className="flex items-center justify-between text-xs text-gray-500"> <div
className={`flex items-center justify-between text-xs ${colors.textMuted}`}
>
<span>{card.duration}</span> <span>{card.duration}</span>
<Badge variant="outline" className="text-xs"> <Badge variant="outline" className="text-xs">
{card.difficulty} {card.difficulty}