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

Enhance stats section with animations and loading

Browse source 
cgen-a19aff77258e4294ae118bfaab95e797
This commit is contained in:
Builder.io 2025-08-05 22:56:50 +00:00
parent 2083f34586
commit 19ba84cb2e
1 changed files with 24 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
client/pages/Index.tsx
View file

@ -149,24 +149,32 @@ export default function Index() {
{/* Stats Section */} {/* Stats Section */}
<section className="py-16 border-y border-border/40"> <section className="py-16 border-y border-border/40">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8"> {!statsVisible ? (
{stats.map((stat, index) => { <SkeletonStats />
const Icon = stat.icon; ) : (
return ( <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
<div key={index} className="text-center space-y-3"> {stats.map((stat, index) => {
<div className="flex justify-center"> const Icon = stat.icon;
<div className="p-3 rounded-lg bg-gradient-to-r from-aethex-500/20 to-neon-blue/20 border border-aethex-400/20"> return (
<Icon className="h-6 w-6 text-aethex-400" /> <div
key={index}
className="text-center space-y-3 animate-scale-in hover-lift interactive-scale"
style={{ animationDelay: `${index * 0.2}s` }}
>
<div className="flex justify-center">
<div className="p-3 rounded-lg bg-gradient-to-r from-aethex-500/20 to-neon-blue/20 border border-aethex-400/20 hover:border-aethex-400/50 transition-all duration-300 hover-glow">
<Icon className="h-6 w-6 text-aethex-400 animate-pulse-glow" />
</div>
</div>
<div>
<div className="text-3xl font-bold text-gradient animate-bounce-gentle">{stat.value}</div>
<p className="text-sm text-muted-foreground uppercase tracking-wide">{stat.label}</p>
</div> </div>
</div> </div>
<div> );
<div className="text-3xl font-bold text-gradient">{stat.value}</div> })}
<p className="text-sm text-muted-foreground uppercase tracking-wide">{stat.label}</p> </div>
</div> )}
</div>
);
})}
</div>
</div> </div>
</section> </section>