Update resource offerings grid with colorful cards

cgen-8c67072d3ab64ca99f6279dde03154be
This commit is contained in:
Builder.io 2025-10-04 10:53:59 +00:00
parent d5c094fdaa
commit 305068a6cc

View file

@ -426,56 +426,42 @@ export default function Index() {
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
<Card className="bg-card/50 border-border/50"> {resourceOfferings.map((offering) => (
<CardHeader> <Card
<CardTitle>Documentation</CardTitle> key={offering.title}
<CardDescription>Guides and tutorials</CardDescription> className={`relative overflow-hidden border transition-all duration-500 group hover:-translate-y-1 ${offering.cardClass}`}
</CardHeader> >
<CardContent> <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-white/10 via-transparent to-transparent opacity-0 group-hover:opacity-35 transition-opacity duration-500" />
<div className="flex gap-2"> <CardHeader className="relative space-y-2">
<Button asChild variant="outline"> <CardTitle className={`text-lg ${offering.titleClass}`}>
<Link to="/docs">Docs</Link> {offering.title}
</Button> </CardTitle>
<Button asChild variant="outline"> <CardDescription className={`text-sm ${offering.descriptionClass}`}>
<Link to="/docs/tutorials">Tutorials</Link> {offering.description}
</Button> </CardDescription>
</div> </CardHeader>
</CardContent> <CardContent className="relative">
</Card> <div className="flex flex-wrap gap-2">
{offering.actions.map((action) => (
<Card className="bg-card/50 border-border/50"> <Button
<CardHeader> key={action.label}
<CardTitle>Community</CardTitle> asChild
<CardDescription>News and discussions</CardDescription> variant={action.variant}
</CardHeader> className={`flex-1 min-w-[120px] ${action.buttonClass}`}
<CardContent> >
<div className="flex gap-2"> {action.external ? (
<Button asChild variant="outline"> <a href={action.href} target="_blank" rel="noreferrer">
<Link to="/community">Community</Link> {action.label}
</Button> </a>
<Button asChild variant="outline"> ) : (
<Link to="/blog">Blog</Link> <Link to={action.href}>{action.label}</Link>
</Button> )}
</div> </Button>
</CardContent> ))}
</Card> </div>
</CardContent>
<Card className="bg-card/50 border-border/50"> </Card>
<CardHeader> ))}
<CardTitle>Company</CardTitle>
<CardDescription>About and contact</CardDescription>
</CardHeader>
<CardContent>
<div className="flex gap-2">
<Button asChild variant="outline">
<Link to="/about">About</Link>
</Button>
<Button asChild variant="outline">
<Link to="/contact">Contact</Link>
</Button>
</div>
</CardContent>
</Card>
</div> </div>
</div> </div>
</section> </section>