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-07 13:15:17 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

🐛 fix: ui broken

Browse Source
This commit is contained in:
eshanized
2025-01-02 07:20:55 +05:30
parent 010baf616a
commit 82402a3698
2 changed files with 38 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -63,7 +63,7 @@
<!-- Title --> <!-- Title -->
<title>Snigdha OS - Advanced Penetration Testing Distribution</title> <title>Snigdha OS - Advanced Penetration Testing Distribution</title>
<meta name="google-site-verification" content="V5qnznNqw2N9-yxjFmXvkRYIb6Qh9dAKnzPw6QKv2m4" />
</head> </head>
<body> <body>

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

@@ -15,6 +15,8 @@ export function StatsSection() {
{ label: "GitHub Stars", value: "Loading...", icon: Star }, { label: "GitHub Stars", value: "Loading...", icon: Star },
]); ]);
const [error, setError] = useState(false);
const fetchGitHubStats = async (username: string) => { const fetchGitHubStats = async (username: string) => {
try { try {
const response = await fetch(`https://api.github.com/users/${username}`); const response = await fetch(`https://api.github.com/users/${username}`);
@@ -32,12 +34,7 @@ export function StatsSection() {
]); ]);
} catch (error) { } catch (error) {
console.error("Error fetching GitHub data:", error); console.error("Error fetching GitHub data:", error);
setStats((prevStats) => setError(true);
prevStats.map((stat) => ({
...stat,
value: "N/A",
}))
);
} }
}; };
@@ -47,7 +44,7 @@ export function StatsSection() {
}, []); }, []);
return ( return (
<section className="py-20 bg-gradient-to-b from-white to-gray-50"> <section className="py-20 bg-gradient-to-b from-white via-gray-50 to-gray-100">
<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"> <div className="text-center mb-12">
<h2 className="text-4xl font-bold text-gray-900">Our Impact</h2> <h2 className="text-4xl font-bold text-gray-900">Our Impact</h2>
@@ -55,36 +52,42 @@ export function StatsSection() {
A snapshot of our growing community and contributions. A snapshot of our growing community and contributions.
</p> </p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> {error ? (
{stats.map((stat, index) => ( <div className="text-center text-red-500 font-medium">
<motion.div Unable to fetch data. Please try again later.
key={stat.label} </div>
initial={{ opacity: 0, y: 20 }} ) : (
whileInView={{ opacity: 1, y: 0 }} <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
transition={{ delay: index * 0.2, duration: 0.6 }} {stats.map((stat, index) => (
viewport={{ once: true }}
className="flex flex-col items-center p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300"
>
<motion.div <motion.div
className="p-4 bg-gradient-to-r from-cornflower-blue/10 to-cornflower-blue/30 rounded-full mb-6" key={stat.label}
whileHover={{ scale: 1.1 }} initial={{ opacity: 0, y: 20 }}
transition={{ duration: 0.3 }} whileInView={{ opacity: 1, y: 0 }}
> transition={{ delay: index * 0.2, duration: 0.6 }}
<stat.icon className="h-10 w-10 text-cornflower-blue" />
</motion.div>
<motion.p
initial={{ scale: 0.8 }}
whileInView={{ scale: 1 }}
transition={{ delay: index * 0.2 + 0.2 }}
viewport={{ once: true }} viewport={{ once: true }}
className="text-4xl font-extrabold text-gray-900" className="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300"
> >
{stat.value} <motion.div
</motion.p> className="p-4 bg-gradient-to-r from-blue-400 to-purple-400 rounded-full mb-6"
<p className="text-lg font-medium text-gray-600">{stat.label}</p> whileHover={{ scale: 1.1 }}
</motion.div> transition={{ duration: 0.3 }}
))} >
</div> <stat.icon className="h-10 w-10 text-white" />
</motion.div>
<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"
>
{stat.value}
</motion.p>
<p className="text-lg font-medium text-gray-600">{stat.label}</p>
</motion.div>
))}
</div>
)}
</div> </div>
</section> </section>
); );