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

Add spotlight tab content

Browse source 
cgen-7214b6702df14c159fcf359fc18657ac
This commit is contained in:
Builder.io 2025-10-13 22:57:15 +00:00
parent f27c1d05df
commit 23dec583dd
1 changed files with 66 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
client/pages/Community.tsx
View file

@ -3157,6 +3157,72 @@ export default function Community() {
</div>
</section>
</TabsContent>
<TabsContent value="spotlight" className="mt-0">
{/* Creator Spotlight */}
<section className="py-20">
<div className="container mx-auto px-4">
<SectionHeader
badge="Creator Spotlight"
title="Recognising standout community creators"
description="Spotlight creators whose mods, art, and systems elevate the AeThex ecosystem."
align="center"
/>
<div className="grid gap-6 lg:grid-cols-2 max-w-6xl mx-auto">
{spotlightCreators.map((creator) => (
<Card
key={creator.id}
className="border-border/50 bg-background/80 backdrop-blur"
>
<CardContent className="p-6 space-y-5">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex items-center gap-3">
<img
src={creator.avatar}
alt={creator.name}
className="h-14 w-14 rounded-full ring-4 ring-aethex-400/20"
/>
<div>
<p className="text-lg font-semibold text-gradient">
{creator.name}
</p>
<p className="text-sm text-muted-foreground">
{creator.role}
</p>
</div>
</div>
<Badge className="bg-aethex-500/10 border-aethex-400/40 text-aethex-200">
Featured creator
</Badge>
</div>
<p className="text-sm text-muted-foreground leading-relaxed">
{creator.highlight}
</p>
<div className="grid grid-cols-3 gap-3">
{creator.metrics.map((metric) => (
<div
key={`${creator.id}-${metric.label}`}
className="rounded-lg border border-border/40 bg-background/80 p-3 text-center"
>
<p className="text-xs text-muted-foreground uppercase tracking-wide">
{metric.label}
</p>
<p className="text-lg font-semibold text-foreground">
{metric.value}
</p>
</div>
))}
</div>
<Button asChild className="w-full">
<Link to={creator.link}>View creator profile</Link>
</Button>
</CardContent>
</Card>
))}
</div>
</div>
</section>
</TabsContent>
</Tabs>
{/* Community Stats */}