🛠 refactor: improve user front end

src/components/home/StatsSection.tsx

@@ -1,13 +1,51 @@
+import { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
 import { Users, Wrench, Star } from 'lucide-react';
 
-const stats = [
+// Define a new type for the stats
-  { label: 'Active Users', value: '50K+', icon: Users },
+interface Stat {
-  { label: 'Security Tools', value: '600+', icon: Wrench },
+  label: string;
-  { label: 'GitHub Stars', value: '15K+', icon: Star },
+  value: string;
-];
+  icon: React.ElementType;
+}
 
 export function StatsSection() {
+  // Set initial state for the stats
+  const [stats, setStats] = useState<Stat[]>([
+    { label: 'Active Users', value: 'Loading...', icon: Users },
+    { label: 'Security Tools', value: 'Loading...', icon: Wrench },
+    { label: 'GitHub Stars', value: 'Loading...', icon: Star },
+  ]);
+
+  // Function to fetch stats from GitHub API
+  const fetchGitHubStats = async (username: string) => {
+    try {
+      const response = await fetch(`https://api.github.com/users/${username}`);
+      const userData = await response.json();
+
+      // Fetch repositories to count the stars
+      const reposResponse = await fetch(userData.repos_url);
+      const reposData = await reposResponse.json();
+
+      const starsCount = reposData.reduce((acc: number, repo: any) => acc + repo.stargazers_count, 0);
+      
+      // Set the state with the fetched stats
+      setStats([
+        { label: ' ', value: `${userData.followers} Followers`, icon: Users },
+        { label: ' ', value: `${reposData.length} Repositories`, icon: Wrench },
+        { label: ' ', value: `${starsCount} Stars`, icon: Star },
+      ]);
+    } catch (error) {
+      console.error('Error fetching GitHub data:', error);
+    }
+  };
+
+  // Fetch stats when the component is mounted
+  useEffect(() => {
+    const username = 'Snigdha-OS'; // Replace with the desired GitHub username
+    fetchGitHubStats(username);
+  }, []);
+
   return (
     <section className="py-20 bg-gradient-to-b from-white to-gray-50">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

src/components/home/TestimonialCard.tsx

@@ -13,13 +13,14 @@ export function TestimonialCard({ content, author, role, delay = 0 }: Testimonia
     <motion.div
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
-      transition={{ delay }}
+      transition={{ delay, duration: 0.6 }}
-      className="bg-white/80 backdrop-blur-sm p-6 rounded-lg shadow-lg relative"
+      whileHover={{ scale: 1.05, boxShadow: '0 10px 20px rgba(0, 0, 0, 0.1)' }}
+      className="bg-gradient-to-r from-cornflower-blue/10 to-cornflower-blue/30 p-8 rounded-lg shadow-lg relative transition-transform"
     >
-      <Quote className="absolute top-4 right-4 h-8 w-8 text-cornflower-blue/20" />
+      <Quote className="absolute top-4 right-4 h-10 w-10 text-cornflower-blue/20 transition-transform transform hover:scale-110" />
-      <p className="text-gray-600 mb-4">{content}</p>
+      <p className="text-gray-600 mb-6 text-lg leading-relaxed">{content}</p>
       <div>
-        <p className="font-semibold text-gray-900">{author}</p>
+        <p className="font-semibold text-gray-900 text-lg">{author}</p>
         <p className="text-sm text-gray-500">{role}</p>
       </div>
     </motion.div>

src/components/home/ToolsShowcase.tsx

@@ -27,10 +27,13 @@ export function ToolsShowcase() {
               key={tool.name}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
-              transition={{ delay: index * 0.1 }}
+              transition={{ delay: index * 0.1, duration: 0.5 }}
-              className="flex flex-col items-center p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow"
+              whileHover={{ scale: 1.05, boxShadow: "0 10px 20px rgba(0, 0, 0, 0.1)" }}
+              className="flex flex-col items-center p-6 bg-white rounded-xl shadow-lg hover:shadow-2xl transition-transform duration-300 ease-in-out"
             >
-              <tool.icon className={`h-10 w-10 ${tool.color} mb-4`} />
+              <div className="p-4 bg-gradient-to-r from-cornflower-blue/10 to-cornflower-blue/30 rounded-lg mb-4">
+                <tool.icon className={`h-12 w-12 ${tool.color} transition-all`} />
+              </div>
               <h3 className="text-lg font-semibold text-gray-900">{tool.name}</h3>
             </motion.div>
           ))}