🚀 feat(_followers): add github follower count

removed gitlab and dev.to

src/components/layout/Footer.tsx

@@ -1,7 +1,34 @@
-// import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Github, Gitlab } from 'lucide-react';
 
 export function Footer() {
+  const [githubFollowers, setGithubFollowers] = useState<number | null>(null);
+  const [gitlabFollowers, setGitlabFollowers] = useState<number | null>(null);
+
+  // Fetch GitHub follower count
+  useEffect(() => {
+    async function fetchGithubFollowers() {
+      const response = await fetch('https://api.github.com/users/Snigdha-OS');
+      const data = await response.json();
+      if (data.followers !== undefined) {
+        setGithubFollowers(data.followers);
+      }
+    }
+    fetchGithubFollowers();
+  }, []);
+
+  // Fetch GitLab follower count
+  useEffect(() => {
+    async function fetchGitlabFollowers() {
+      const response = await fetch('https://gitlab.com/api/v4/users/Snigdha-OS');
+      const data = await response.json();
+      if (data[0]?.followers_count !== undefined) {
+        setGitlabFollowers(data[0].followers_count);
+      }
+    }
+    fetchGitlabFollowers();
+  }, []);
+
   return (
     <footer className="bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 text-white py-10">
       <div className="container mx-auto px-6">
@@ -25,7 +52,7 @@ export function Footer() {
               </li>
               <li>
                 <a href="https://forum.snigdhaos.org/" className="hover:text-indigo-400 transition-colors">
-                  Forums<sup> maintainance!</sup>
+                  Forums<sup> maintenance!</sup>
                 </a>
               </li>
               <li>
@@ -46,7 +73,7 @@ export function Footer() {
                   className="hover:text-indigo-400 transition-colors"
                 >
                   Installation Guide <sup>
-                    <a href='https://snigdha-os.github.io/documentation/category/installation'>git-version</a> 
+                    <a href="https://snigdha-os.github.io/documentation/category/installation">git-version</a>
                   </sup>
                 </a>
               </li>
@@ -73,23 +100,44 @@ export function Footer() {
           <div>
             <h3 className="font-extrabold text-lg mb-4">Connect</h3>
             <div className="flex space-x-5">
+              {/* GitHub Follower Count Card */}
+              <div className="bg-gray-800 p-4 rounded-lg shadow-lg flex items-center space-x-3">
                 <a
                   href="https://github.com/Snigdha-OS"
                   className="hover:text-indigo-400 transition-all"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                <Github className="h-7 w-7" />
+                  <Github className="h-7 w-7 text-white" />
                 </a>
+                {githubFollowers !== null && (
+                  <div className="text-white">
+                    <span className="block text-sm">Followers</span>
+                    <span className="text-lg font-bold">{githubFollowers}</span>
+                  </div>
+                )}
+              </div>
+
+              {/* GitLab Follower Count Card */}
+              {/* <div className="bg-gray-800 p-4 rounded-lg shadow-lg flex items-center space-x-3">
                 <a
                   href="https://gitlab.com/Snigdha-OS"
                   className="hover:text-indigo-400 transition-all"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                <Gitlab className="h-7 w-7" />
+                  <Gitlab className="h-7 w-7 text-white" />
                 </a>
-              <a
+                {gitlabFollowers !== null && (
+                  <div className="text-white">
+                    <span className="block text-sm">Followers</span>
+                    <span className="text-lg font-bold">{gitlabFollowers}</span>
+                  </div>
+                )}
+              </div> */}
+
+              {/* Dev.to (No follower count, placeholder) */}
+              {/* <a
                 href="https://dev.to/SnigdhaOS"
                 className="hover:text-indigo-400 transition-all"
                 target="_blank"
@@ -102,7 +150,7 @@ export function Footer() {
                 >
                   <path d="M0 2.7v34.6c0 1.5.6 2.9 1.6 3.9 1 1 2.4 1.6 3.9 1.6h38.9c1.5 0 2.9-.6 3.9-1.6 1-1 1.6-2.4 1.6-3.9V2.7c0-1.5-.6-2.9-1.6-3.9-1-1-2.4-1.6-3.9-1.6H5.5c-1.5 0-2.9.6-3.9 1.6C.6-.2 0 1.2 0 2.7zm21.8 26.7h-3.9V10.6h3.9v18.8zm8.5 0h-3.3l-2.2-6.6h-1.5v6.6h-3.9V10.6h5.5c.7 0 1.3.1 1.9.4s1 .6 1.4 1.1.7 1 .9 1.7c.2.6.3 1.3.3 2v2.6c0 .7-.1 1.4-.3 2s-.5 1.1-.9 1.6c-.4.5-.8.8-1.4 1.1-.6.2-1.2.4-1.9.4h-1.6l2 6.3h2.4l3.5-6.3v6.3zm9.5 0h-3.9v-6.6h-5.6v6.6h-3.9V10.6h3.9v6.2h5.6v-6.2h3.9v18.8z" />
                 </svg>
-              </a>
+              </a> */}
             </div>
           </div>
         </div>

src/pages/Home.tsx

@@ -6,78 +6,107 @@ export function Home() {
   return (
     <div>
       {/* Hero Section */}
-      <section className="bg-gradient-to-r from-indigo-600 to-indigo-700 text-white py-20">
-        <div className="container mx-auto px-4 text-center">
-          <h1 className="text-5xl font-bold mb-6">Welcome to Snigdha OS</h1>
-          <p className="text-xl mb-8">Arch based Linux Distribution for Penetration Testing and Ethical Hacking</p>
-          <div className="flex justify-center space-x-4">
+<section className="bg-gradient-to-r from-indigo-600 to-indigo-700 text-white py-20 relative overflow-hidden">
+  {/* Background Image */}
+  <div className="absolute inset-0 -z-10">
+    <img
+      src="https://via.placeholder.com/1920x1080" // Replace with your desired background image URL
+      alt="Background"
+      className="w-full h-full object-cover opacity-30"
+    />
+  </div>
+
+  <div className="container mx-auto px-4 text-center relative z-10">
+    <h1 className="text-5xl font-extrabold mb-6 text-shadow-md">
+      Welcome to Snigdha OS
+    </h1>
+    <p className="text-xl mb-8 max-w-3xl mx-auto text-shadow-lg">
+      Arch-based Linux Distribution for Penetration Testing and Ethical Hacking.
+      Snigdha OS provides a powerful platform with the latest tools for cybersecurity professionals.
+    </p>
+    <div className="flex justify-center space-x-6 mt-6">
       <Link
         to="/download"
-            className="bg-white text-indigo-700 px-8 py-3 rounded-[5px] font-semibold hover:bg-gray-100 transition-colors inline-flex items-center space-x-2"
+        className="bg-white text-indigo-700 px-8 py-4 rounded-[5px] font-semibold shadow-lg transform hover:scale-105 hover:bg-gray-100 transition-all duration-300 inline-flex items-center space-x-3"
       >
-          <Download className="h-5 w-5" /> {/* Icon */}
+        <Download className="h-5 w-5" />
         <span>Download Now</span>
       </Link>
 
       <Link
         to="/about"
-  className="border-2 border-white text-white px-8 py-3 rounded-[5px] font-semibold hover:bg-white hover:text-indigo-700 transition-colors inline-flex items-center space-x-2"
+        className="border-2 border-white text-white px-8 py-4 rounded-[5px] font-semibold transform hover:scale-105 hover:bg-white hover:text-indigo-700 transition-all duration-300 inline-flex items-center space-x-3"
       >
-  <ArrowRight className="h-5 w-5" /> {/* Icon */}
+        <ArrowRight className="h-5 w-5" />
         <span>Learn More</span>
       </Link>
+    </div>
 
+    {/* Additional Call-to-Action */}
+    <div className="mt-12 max-w-2xl mx-auto">
+      <p className="text-lg text-white opacity-80 mb-4">
+        Join a community of like-minded individuals dedicated to enhancing the security and safety of the digital world. Explore our open-source ecosystem and contribute to the next-gen tools.
+      </p>
+      <Link
+        to="/community"
+        className="border-2 border-white text-white px-8 py-4 rounded-[5px] font-semibold transform hover:scale-105 hover:bg-white hover:text-indigo-700 transition-all duration-300 inline-flex items-center space-x-3"
+      >
+        <Users className="h-5 w-5" />
+        <span>Join Our Community</span>
+      </Link>
     </div>
   </div>
 </section>
 
       {/* Features Section */}
-      <section className="py-16 bg-white">
+<section className="py-16 bg-gradient-to-r from-indigo-50 to-white">
   <div className="container mx-auto px-4">
-    <h2 className="text-3xl font-bold text-center mb-12">Key Features</h2>
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+    <h2 className="text-4xl font-extrabold text-center text-indigo-700 mb-12 tracking-tight">
+      Key Features
+    </h2>
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-12">
       <FeatureCard
-        icon={<Shield className="h-12 w-12 text-indigo-600" />}
+        icon={<Shield className="h-16 w-16 text-red-500" />}
         title="Secure"
         description="Regular security updates and a robust system architecture keep your data safe."
       />
       <FeatureCard
-        icon={<Terminal className="h-12 w-12 text-indigo-600" />}
+        icon={<Terminal className="h-16 w-16 text-green-500" />}
         title="Powerful"
         description="Full access to the terminal and system components for advanced users."
       />
       <FeatureCard
-        icon={<Download className="h-12 w-12 text-indigo-600" />}
+        icon={<Download className="h-16 w-16 text-blue-500" />}
         title="Free Forever"
-        description="Linux Mint is free and open source. No costs, no subscriptions."
+        description="Snigdha OS is free and open source. No costs, no subscriptions."
       />
       <FeatureCard
-        icon={<Award className="h-12 w-12 text-indigo-600" />}
+        icon={<Award className="h-16 w-16 text-yellow-500" />}
         title="Customizable"
         description="Personalize your desktop environment to suit your needs and style."
       />
       <FeatureCard
-        icon={<Users className="h-12 w-12 text-indigo-600" />}
+        icon={<Users className="h-16 w-16 text-pink-500" />}
         title="Community Support"
         description="A vibrant community ready to help and share knowledge."
       />
       <FeatureCard
-        icon={<Star className="h-12 w-12 text-indigo-600" />}
+        icon={<Star className="h-16 w-16 text-indigo-500" />}
         title="Feature Rich"
         description="Pre-installed applications and tools for everyday use."
       />
       <FeatureCard
-        icon={<Coffee className="h-12 w-12 text-indigo-600" />}
+        icon={<Coffee className="h-16 w-16 text-brown-500" />}
         title="Energy Efficient"
         description="Optimized performance to save energy and enhance hardware longevity."
       />
       <FeatureCard
-        icon={<ArrowRight className="h-12 w-12 text-indigo-600" />}
+        icon={<ArrowRight className="h-16 w-16 text-teal-500" />}
         title="Fast Boot"
         description="Experience faster boot times and smooth transitions."
       />
       <FeatureCard
-        icon={<Terminal className="h-12 w-12 text-indigo-600" />}
+        icon={<Terminal className="h-16 w-16 text-purple-500" />}
         title="Advanced Tools"
         description="Access specialized penetration testing and ethical hacking tools."
       />
@@ -86,6 +115,7 @@ export function Home() {
 </section>
 
 
+
       {/* Latest Release Section */}
 <section className="py-16 bg-gray-100">
   <div className="container mx-auto px-4">
@@ -96,14 +126,14 @@ export function Home() {
         <div className="md:w-1/2 mb-8 md:mb-0">
           <img
             src="https://images.unsplash.com/photo-1629654297299-c8506221ca97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80"
-            alt="Linux Mint Desktop"
+            alt="Snigdha OS Desktop"
             className="rounded-lg shadow-md"
           />
         </div>
 
         {/* Details Section */}
         <div className="md:w-1/2 md:pl-8">
-          <h3 className="text-2xl font-bold mb-4">Linux Mint 21.3</h3>
+          <h3 className="text-2xl font-regular mb-4">Snigdha OS | <b>Arctic V</b></h3>
           <p className="text-gray-600 mb-6">
             Experience the latest features and improvements in our newest release. 
             Enjoy enhanced performance, better hardware support, and a refined user interface.
@@ -112,7 +142,7 @@ export function Home() {
           <div className="space-y-6">
             {/* Key Features */}
             <Feature
-              title="New Cinnamon 6.0"
+              title="New Gnome 47.0"
               description="Enjoy a faster and more responsive desktop environment with redesigned animations and improved task handling."
             />
             <Feature
@@ -125,7 +155,7 @@ export function Home() {
             />
             <Feature
               title="Upgraded Kernel and Drivers"
-              description="Leverage the power of the Linux 6.x kernel for optimal system performance."
+              description="Leverage the power of the Linux 6.x Zen kernel for optimal system performance."
             />
             <Feature
               title="System Snapshots with Timeshift"
@@ -138,10 +168,10 @@ export function Home() {
           </div>
 
           {/* Buttons */}
-          <div className="flex mt-6 space-x-4">
+          <div className="flex mt-6 justify-center space-x-4">
             <Link
               to="/download"
-              className="inline-flex items-center space-x-2 bg-indigo-600 text-white px-6 py-2 rounded-[5px] hover:bg-indigo-700 transition-colors"
+              className="inline-flex items-center space-x-3 bg-indigo-600 text-white px-8 py-4 rounded-[5px] hover:bg-indigo-700 transition-colors"
             >
               <span>Download Now</span>
               <ArrowRight className="h-4 w-4" />
@@ -161,15 +191,15 @@ export function Home() {
 </section>
 
 
-{/* Why Choose Linux Mint */}
+{/* Why Choose Snigdha OS */}
 <section className="py-16 bg-white">
   <div className="container mx-auto px-4">
-    <h2 className="text-3xl font-bold text-center mb-12">Why Choose Linux Mint?</h2>
+    <h2 className="text-3xl font-bold text-center mb-12">Why Choose Snigdha OS?</h2>
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
       <ReasonCard
         icon={<Award className="h-10 w-10 text-yellow-500" />}
         title="User-Friendly"
-        description="With its intuitive interface, Linux Mint provides a seamless experience for beginners and experts alike."
+        description="With its intuitive interface, Snigdha OS provides a seamless experience for beginners and experts alike."
       />
       <ReasonCard
         icon={<Users className="h-10 w-10 text-blue-500" />}
@@ -179,7 +209,7 @@ export function Home() {
       <ReasonCard
         icon={<Coffee className="h-10 w-10 text-red-500" />}
         title="Stable & Reliable"
-        description="Built on Ubuntu's LTS base, Linux Mint ensures long-term stability and security updates."
+        description="Built on Ubuntu's LTS base, Snigdha OS ensures long-term stability and security updates."
       />
       <ReasonCard
         icon={<Star className="h-10 w-10 text-purple-500" />}
@@ -189,7 +219,7 @@ export function Home() {
       <ReasonCard
         icon={<Shield className="h-10 w-10 text-green-500" />}
         title="Privacy Focused"
-        description="Unlike many OS options, Linux Mint respects your privacy with no data tracking or telemetry."
+        description="Unlike many OS options, Snigdha OS respects your privacy with no data tracking or telemetry."
       />
       <ReasonCard
         icon={<Terminal className="h-10 w-10 text-indigo-500" />}
@@ -199,7 +229,7 @@ export function Home() {
       <ReasonCard
         icon={<Download className="h-10 w-10 text-orange-500" />}
         title="Free and Open Source"
-        description="Linux Mint is free forever, with its source code available for transparency and community-driven improvements."
+        description="Snigdha OS is free forever, with its source code available for transparency and community-driven improvements."
       />
       <ReasonCard
         icon={<ArrowRight className="h-10 w-10 text-teal-500" />}
@@ -211,22 +241,23 @@ export function Home() {
 </section>
 
       {/* Community Stats */}
-      <section className="py-16 bg-gray-100">
+{/* <section className="py-16 bg-gradient-to-r from-indigo-50 to-indigo-100">
   <div className="container mx-auto px-4">
+    <h2 className="text-3xl font-bold text-center text-indigo-800 mb-12">Join Our Growing Community</h2>
     <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            <StatCard number="15M+" label="Downloads" />
+      <StatCard number="1K+" label="Downloads" />
       <StatCard number="100+" label="Countries" />
       <StatCard number="500K+" label="Active Users" />
     </div>
   </div>
-      </section>
+</section> */}
 
       {/* CTA Section */}
       <section className="py-16 bg-indigo-600 text-white">
         <div className="container mx-auto px-4 text-center">
-          <h2 className="text-3xl font-bold mb-6">Ready to Try Linux Mint?</h2>
+          <h2 className="text-3xl font-bold mb-6">Ready to Try Snigdha OS?</h2>
           <p className="text-xl mb-8 max-w-2xl mx-auto">
-            Join millions of users worldwide and experience the freedom of Linux Mint.
+            Join millions of users worldwide and experience the freedom of <br></br>Snigdha OS.
           </p>
           <Link
             to="/download"
@@ -251,10 +282,10 @@ function FeatureCard({
   description: string;
 }) {
   return (
-    <div className="text-center p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow">
-      <div className="flex justify-center mb-4">{icon}</div>
-      <h3 className="text-xl font-bold mb-2">{title}</h3>
-      <p className="text-gray-600">{description}</p>
+    <div className="text-center p-8 bg-white rounded-lg shadow-xl hover:shadow-2xl hover:scale-105 transition-all duration-300">
+      <div className="flex justify-center mb-6">{icon}</div>
+      <h3 className="text-2xl font-semibold text-indigo-700 mb-3">{title}</h3>
+      <p className="text-gray-600 text-lg">{description}</p>
     </div>
   );
 }
@@ -263,7 +294,7 @@ function Feature({ title, description }: { title: string; description: string })
   return (
     <div className="flex items-start space-x-3">
       <div className="flex-shrink-0">
-        <div className="w-2 h-2 mt-2 rounded-[5px] bg-green-500"></div>
+        <div className="w-2 h-2 mt-2 rounded-[5px] bg-indigo-500"></div>
       </div>
       <div>
         <h4 className="font-semibold">{title}</h4>
@@ -273,6 +304,7 @@ function Feature({ title, description }: { title: string; description: string })
   );
 }
 
+
 function ReasonCard({
   icon,
   title,
@@ -291,11 +323,11 @@ function ReasonCard({
   );
 }
 
-function StatCard({ number, label }: { number: string; label: string }) {
+const StatCard = ({ number, label }: { number: string; label: string }) => {
   return (
-    <div className="bg-white rounded-lg shadow-lg p-8 text-center">
-      <div className="text-4xl font-bold text-indigo-600 mb-2">{number}</div>
-      <div className="text-gray-600">{label}</div>
+    <div className="bg-white rounded-lg shadow-xl transform hover:scale-105 transition-transform p-8 text-center">
+      <div className="text-5xl font-bold text-indigo-700 mb-4">{number}</div>
+      <p className="text-lg text-gray-600 font-medium">{label}</p>
     </div>
   );
-}
+};