Snigdha-OS/Snigdha-OS.github.io
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/Snigdha-OS.github.io.git synced 2025-09-06 20:55:18 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

⚡️ perf: i forgot

Browse Source
This commit is contained in:
RiO
2025-01-07 03:14:30 +05:30
parent ca1c447ccc
commit b46830f61e
1 changed files with 48 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/home/StatsSection.tsx
View File

@@ -55,46 +55,75 @@ export function StatsSection() {
}, []); }, []);
return ( return (
<section className="py-20 bg-gradient-to-b from-white via-gray-50 to-gray-100"> <section className="py-20 bg-gradient-to-b from-gray-50 via-gray-100 to-gray-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12"> {/* Header Section */}
<h2 className="text-4xl font-bold text-gray-900">Our Impact</h2> <div className="text-center mb-16">
<p className="mt-4 text-lg text-gray-600"> <motion.h2
className="text-5xl font-extrabold text-gray-900"
initial={{ opacity: 0, y: -20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
Our Impact
</motion.h2>
<motion.p
className="mt-4 text-lg text-gray-600"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 1, delay: 0.2 }}
>
A snapshot of our growing community and contributions. A snapshot of our growing community and contributions.
</p> </motion.p>
</div> </div>
{/* Stats Grid */}
{error ? ( {error ? (
<div className="text-center text-red-500 font-medium"> <div className="text-center text-red-500 font-medium">
Unable to fetch data. Please try again later. Unable to fetch data. Please try again later.
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12">
{stats.map((stat, index) => ( {stats.map((stat, index) => (
<motion.div <motion.div
key={stat.label} key={stat.label}
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, scale: 0.8 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, scale: 1 }}
transition={{ delay: index * 0.2, duration: 0.6 }} transition={{
viewport={{ once: true }} delay: index * 0.2,
className="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300" duration: 0.6,
ease: "easeOut",
}}
whileHover={{
scale: 1.1,
boxShadow: "0px 20px 40px rgba(0, 0, 0, 0.2)",
}}
className="flex flex-col items-center p-8 bg-white rounded-xl shadow-lg hover:shadow-2xl transition-transform duration-300"
> >
{/* Icon */}
<motion.div <motion.div
className="p-4 bg-gradient-to-r from-blue-400 to-purple-400 rounded-full mb-6" className="p-4 bg-gradient-to-r from-blue-400 to-purple-400 rounded-full mb-6"
whileHover={{ scale: 1.1 }} whileHover={{ rotate: 360 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.8 }}
> >
<stat.icon className="h-10 w-10 text-white" /> <stat.icon className="h-12 w-12 text-white" />
</motion.div> </motion.div>
{/* Stat Value */}
<motion.p <motion.p
initial={{ scale: 0.8 }}
whileInView={{ scale: 1 }}
transition={{ delay: index * 0.2 + 0.2 }}
viewport={{ once: true }}
className="text-4xl font-extrabold text-gray-900" className="text-4xl font-extrabold text-gray-900"
initial={{ scale: 0.9 }}
whileInView={{ scale: 1 }}
transition={{
delay: index * 0.2 + 0.2,
duration: 0.6,
}}
> >
{stat.value} {stat.value}
</motion.p> </motion.p>
<p className="text-lg font-medium text-gray-600">{stat.label}</p> {/* Stat Label */}
<p className="mt-2 text-lg font-medium text-gray-600">
{stat.label}
</p>
</motion.div> </motion.div>
))} ))}
</div> </div>