diff --git a/src/components/Features.tsx b/src/components/Features.tsx
index b8b2092..52ded26 100644
--- a/src/components/Features.tsx
+++ b/src/components/Features.tsx
@@ -6,75 +6,196 @@ const Features = () => {
       icon: BarChart3,
       title: 'Activity Analytics',
       description: 'Comprehensive charts and graphs showing commit patterns, contribution streaks, and repository activity over time.',
-      bgColor: 'bg-blue-100',
-      iconColor: 'text-blue-600'
+      bgColor: 'bg-blue-100 dark:bg-blue-900/30',
+      iconColor: 'text-blue-600 dark:text-blue-400',
+      hoverColor: 'hover:bg-blue-50 dark:hover:bg-blue-900/50'
     },
     {
       icon: Users,
       title: 'Multi-User Tracking',
       description: 'Monitor multiple GitHub users simultaneously and compare their activity levels and contribution patterns.',
-      bgColor: 'bg-green-100',
-      iconColor: 'text-green-600'
+      bgColor: 'bg-green-100 dark:bg-green-900/30',
+      iconColor: 'text-green-600 dark:text-green-400',
+      hoverColor: 'hover:bg-green-50 dark:hover:bg-green-900/50'
     },
     {
       icon: Search,
       title: 'Smart Search',
       description: 'Quickly find and add users to your tracking list with intelligent search and auto-suggestions.',
-      bgColor: 'bg-purple-100',
-      iconColor: 'text-purple-600'
+      bgColor: 'bg-purple-100 dark:bg-purple-900/30',
+      iconColor: 'text-purple-600 dark:text-purple-400',
+      hoverColor: 'hover:bg-purple-50 dark:hover:bg-purple-900/50'
     },
     {
       icon: Zap,
       title: 'Real-time Updates',
       description: 'Get instant notifications and updates when tracked users make new contributions or repositories.',
-      bgColor: 'bg-orange-100',
-      iconColor: 'text-orange-600'
+      bgColor: 'bg-orange-100 dark:bg-orange-900/30',
+      iconColor: 'text-orange-600 dark:text-orange-400',
+      hoverColor: 'hover:bg-orange-50 dark:hover:bg-orange-900/50'
     },
     {
       icon: Shield,
       title: 'Privacy First',
       description: 'All data is fetched from public GitHub APIs. We don\'t store personal information or require GitHub access.',
-      bgColor: 'bg-red-100',
-      iconColor: 'text-red-600'
+      bgColor: 'bg-red-100 dark:bg-red-900/30',
+      iconColor: 'text-red-600 dark:text-red-400',
+      hoverColor: 'hover:bg-red-50 dark:hover:bg-red-900/50'
     },
     {
       icon: Globe,
       title: 'Export & Share',
       description: 'Export activity reports and share insights with your team through various formats and integrations.',
-      bgColor: 'bg-indigo-100',
-      iconColor: 'text-indigo-600'
+      bgColor: 'bg-indigo-100 dark:bg-indigo-900/30',
+      iconColor: 'text-indigo-600 dark:text-indigo-400',
+      hoverColor: 'hover:bg-indigo-50 dark:hover:bg-indigo-900/50'
     }
   ];
 
+  // Duplicate features array for seamless loop
+  const duplicatedFeatures = [...features, ...features];
+
   return (
-    <section id="features" className="px-6 py-6 bg-white dark:bg-gray-900 transition-colors duration-300">
-      <div className="mx-auto">
-        <div className="text-center mb-16">
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Powerful Features</h2>
-          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
-            Everything you need to track, analyze, and understand GitHub activity patterns
-          </p>
-        </div>
+    <>
+      <style>{`
+        @keyframes marquee {
+          0% {
+            transform: translateX(0%);
+          }
+          100% {
+            transform: translateX(-50%);
+          }
+        }
+        
+        @keyframes float {
+          0%, 100% {
+            transform: translateY(0px);
+          }
+          50% {
+            transform: translateY(-5px);
+          }
+        }
+        
+        @keyframes shimmer {
+          0% {
+            background-position: -200% center;
+          }
+          100% {
+            background-position: 200% center;
+          }
+        }
+        
+        .animate-marquee {
+          animation: marquee 30s linear infinite;
+        }
+        
+        .animate-marquee:hover {
+          animation-play-state: paused;
+        }
+        
+        .animate-float {
+          animation: float 3s ease-in-out infinite;
+        }
+        
+        .shimmer-effect {
+          background: linear-gradient(
+            90deg,
+            transparent,
+            rgba(255, 255, 255, 0.4),
+            transparent
+          );
+          background-size: 200% 100%;
+        }
+        
+        .dark .shimmer-effect {
+          background: linear-gradient(
+            90deg,
+            transparent,
+            rgba(255, 255, 255, 0.1),
+            transparent
+          );
+        }
+        
+        .group:hover .shimmer-effect {
+          animation: shimmer 1.5s ease-in-out;
+        }
+      `}</style>
+
+      <section id="features" className="px-6 py-16 bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-950 transition-colors duration-300 overflow-hidden">
+        <div className="max-w-7xl mx-auto">
+          {/* Section Header */}
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">
+              <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+                Powerful Features
+              </span>
+            </h2>
+            <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
+              Everything you need to track, analyze, and understand GitHub activity patterns with advanced insights and real-time monitoring
+            </p>
+          </div>
+
+          {/* Marquee Container */}
+          <div className="relative">
+            {/* Marquee Track */}
+            <div className="flex animate-marquee gap-8 py-4">
+              {duplicatedFeatures.map((feature, index) => {
+                const IconComponent = feature.icon;
+                return (
+                  <div
+                    key={index}
+                    className={`group min-w-[380px] bg-transparent p-8 rounded-3xl 
+                      ${feature.hoverColor} transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 
+                      backdrop-blur-sm relative overflow-hidden animate-float`}
+                    style={{ animationDelay: `${index * 0.2}s` }}
+                  >
+                    {/* Shimmer effect overlay */}
+                    <div className="absolute inset-0 shimmer-effect opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    
+                    {/* Content */}
+                    <div className="relative z-10">
+                      {/* Icon container with enhanced styling */}
+                      <div className={`${feature.bgColor} w-16 h-16 rounded-2xl flex items-center justify-center mb-6 
+                        group-hover:scale-110 transition-all duration-300 group-hover:shadow-lg`}>
+                        <IconComponent className={`h-8 w-8 ${feature.iconColor} group-hover:scale-110 transition-transform duration-300`} />
+                      </div>
+                      
+                      {/* Title with gradient on hover */}
+                      <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4 group-hover:text-transparent 
+                        group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-purple-600 
+                        group-hover:bg-clip-text transition-all duration-300">
+                        {feature.title}
+                      </h3>
+                      
+                      {/* Description */}
+                      <p className="text-gray-600 dark:text-gray-300 leading-relaxed text-sm group-hover:text-gray-700 
+                        dark:group-hover:text-gray-200 transition-colors duration-300">
+                        {feature.description}
+                      </p>
+                    </div>
+
+                    {/* Decorative corner accent */}
+                    <div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-transparent via-transparent 
+                      to-blue-500/5 dark:to-blue-400/10 rounded-bl-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    
+                    {/* Bottom accent line */}
+                    <div className={`absolute bottom-0 left-0 h-1 bg-gradient-to-r ${feature.iconColor.replace('text-', 'from-')} 
+                      to-transparent w-0 group-hover:w-full transition-all duration-500 rounded-full`}></div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
 
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {features.map((feature, index) => {
-            const IconComponent = feature.icon;
-            return (
-              <div key={index} className="bg-gray-50 dark:bg-gray-800 p-8 rounded-2xl hover:shadow-lg transition-all duration-300">
-                <div className={`${feature.bgColor} w-12 h-12 rounded-lg flex items-center justify-center mb-6`}>
-                  <IconComponent className={`h-6 w-6 ${feature.iconColor}`} />
-                </div>
-                <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">{feature.title}</h3>
-                <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
-                  {feature.description}
-                </p>
-              </div>
-            );
-          })}
         </div>
-      </div>
-    </section>
+
+        {/* Background decorative elements */}
+        <div className="absolute top-20 left-20 w-32 h-32 bg-blue-500/5 dark:bg-blue-400/10 rounded-full blur-xl animate-pulse"></div>
+        <div className="absolute bottom-20 right-20 w-24 h-24 bg-purple-500/5 dark:bg-purple-400/10 rounded-full blur-xl animate-pulse" style={{ animationDelay: '1s' }}></div>
+      </section>
+    </>
   );
 };
 
-export default Features;
+export default Features;
\ No newline at end of file
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 1549f8e..a76594c 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,34 +1,204 @@
 import { Search } from 'lucide-react';
-import { Link } from 'react-router-dom';
+import { useState, useEffect } from 'react';
 
 const Hero = () => {
+  const [displayText, setDisplayText] = useState('');
+  const [showSecondLine, setShowSecondLine] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const fullText = 'Track GitHub Activity';
+
+  useEffect(() => {
+    if (currentIndex < fullText.length) {
+      const timer = setTimeout(() => {
+        setDisplayText(prev => prev + fullText[currentIndex]);
+        setCurrentIndex(prev => prev + 1);
+      }, 100);
+      return () => clearTimeout(timer);
+    } else {
+      // Show second line after first line is complete
+      const timer = setTimeout(() => {
+        setShowSecondLine(true);
+      }, 500);
+      return () => clearTimeout(timer);
+    }
+  }, [currentIndex, fullText]);
+
   return (
-    <section className="relative bg-gradient-to-br px-6 py-10">
-      <div className="max-w-7xl mx-auto">
-        <div className="text-center">
-          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
-            Track GitHub Activity
-            <span className="block text-blue-600">Like Never Before</span>
-          </h1>
-          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
-            Monitor and analyze GitHub user activity with powerful insights. Perfect for developers,
-            project managers, and teams who want to understand contribution patterns and repository engagement.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-            <button className="bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-blue-700 transition-all transform hover:scale-105 shadow-lg flex items-center space-x-2">
-              <Search className="h-5 w-5" />
-              <Link to='/track'>Start Tracking</Link>
-            </button>
-            {/*
-            <button className="border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 px-8 py-4 rounded-lg font-semibold hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors flex items-center space-x-2">
-              <span>View Demo</span>
-              <ArrowRight className="h-5 w-5" />
-            </button>*/}
+    <>
+      <style>{`
+        @keyframes typewriter {
+          from { width: 0; }
+          to { width: 100%; }
+        }
+        
+        @keyframes blink {
+          0%, 50% { opacity: 1; }
+          51%, 100% { opacity: 0; }
+        }
+        
+        @keyframes float {
+          0%, 100% { transform: translateY(0px); }
+          50% { transform: translateY(-10px); }
+        }
+        
+        @keyframes slideInUp {
+          0% {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          100% {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        
+        @keyframes blob {
+          0% { transform: translate(0px, 0px) scale(1); }
+          33% { transform: translate(30px, -50px) scale(1.1); }
+          66% { transform: translate(-20px, 20px) scale(0.9); }
+          100% { transform: translate(0px, 0px) scale(1); }
+        }
+        
+        @keyframes gradient {
+          0%, 100% { background-position: 0% 50%; }
+          50% { background-position: 100% 50%; }
+        }
+        
+        @keyframes shimmer {
+          0% { background-position: -200% 0; }
+          100% { background-position: 200% 0; }
+        }
+        
+        .typewriter-cursor {
+          animation: blink 1s infinite;
+        }
+        
+        .animate-float {
+          animation: float 6s ease-in-out infinite;
+        }
+        
+        .animate-slide-up {
+          animation: slideInUp 0.8s ease-out forwards;
+        }
+        
+        .animate-blob {
+          animation: blob 7s infinite;
+        }
+        
+        .animation-delay-2000 {
+          animation-delay: 2s;
+        }
+        
+        .animation-delay-4000 {
+          animation-delay: 4s;
+        }
+        
+        .animate-gradient {
+          background: linear-gradient(-45deg, #3b82f6, #8b5cf6, #06b6d4, #10b981);
+          background-size: 400% 400%;
+          animation: gradient 4s ease infinite;
+        }
+        
+        .animate-shimmer {
+          background: linear-gradient(
+            90deg,
+            transparent,
+            rgba(255, 255, 255, 0.2),
+            transparent
+          );
+          background-size: 200% 100%;
+          animation: shimmer 2s infinite;
+        }
+      `}</style>
+      
+      <section className="relative bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:from-gray-900 dark:via-blue-900 dark:to-indigo-900 px-6 py-16 overflow-hidden">
+        {/* Animated background blobs */}
+        <div className="absolute inset-0">
+          <div className="absolute -top-40 -right-40 w-80 h-80 bg-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob"></div>
+          <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-400 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000"></div>
+          <div className="absolute top-40 left-1/2 w-80 h-80 bg-indigo-400 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000"></div>
+        </div>
+
+        {/* Floating particles */}
+        <div className="absolute inset-0 pointer-events-none">
+          <div className="absolute top-20 left-20 w-2 h-2 bg-blue-500 rounded-full opacity-60 animate-float"></div>
+          <div className="absolute top-32 right-32 w-1 h-1 bg-purple-500 rounded-full opacity-40 animate-pulse"></div>
+          <div className="absolute bottom-32 left-32 w-3 h-3 bg-indigo-500 rounded-full opacity-50 animate-bounce"></div>
+          <div className="absolute bottom-20 right-20 w-1.5 h-1.5 bg-pink-500 rounded-full opacity-60 animate-float"></div>
+        </div>
+
+        <div className="max-w-7xl mx-auto relative z-10">
+          <div className="text-center">
+            <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6 leading-tight min-h-[120px] md:min-h-[100px]">
+              <div className="inline-block overflow-hidden">
+                <span className="inline-block">
+                  {displayText}
+                  <span className="typewriter-cursor text-blue-600">|</span>
+                </span>
+              </div>
+              <div className={`block mt-2 transition-all duration-1000 ease-out ${
+                showSecondLine 
+                  ? 'translate-y-0 opacity-100 scale-100' 
+                  : 'translate-y-8 opacity-0 scale-95'
+              }`}>
+                <span className="text-blue-600 dark:text-blue-400 font-extrabold">
+                  Like Never Before
+                </span>
+              </div>
+            </h1>
+            
+            <div className={`transition-all duration-1000 delay-1000 ${
+              showSecondLine ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'
+            }`}>
+              <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed animate-slide-up">
+                Monitor and analyze GitHub user activity with powerful insights. Perfect for developers,
+                project managers, and teams who want to understand contribution patterns and repository engagement.
+              </p>
+            </div>
+            
+            <div className={`flex flex-col sm:flex-row gap-4 justify-center items-center transition-all duration-1000 delay-1500 ${
+              showSecondLine ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'
+            }`}>
+              <button className="group relative bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 hover:-translate-y-1 shadow-lg hover:shadow-2xl dark:shadow-blue-900/50 flex items-center space-x-2 overflow-hidden">
+                {/* Button background effects */}
+                <div className="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-700 dark:to-purple-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                <div className="absolute inset-0 animate-shimmer opacity-0 group-hover:opacity-100"></div>
+                
+                {/* Button content */}
+                <Search className="h-5 w-5 transform group-hover:rotate-12 transition-all duration-300 relative z-10" />
+                <span className="relative z-10">Start Tracking</span>
+                
+                {/* Bottom border effect */}
+                <div className="absolute bottom-0 left-0 w-full h-0.5 bg-white dark:bg-blue-200 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
+                
+                {/* Side glow effect */}
+                <div className="absolute -inset-1 bg-blue-600 dark:bg-blue-500 rounded-lg blur opacity-30 group-hover:opacity-60 transition-opacity duration-300 -z-10"></div>
+              </button>
+              
+              {/* Demo button (commented out in original, styled for completeness) */}
+              <button className="group border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 px-8 py-4 rounded-lg font-semibold hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 flex items-center space-x-2 relative overflow-hidden opacity-50 cursor-not-allowed">
+                <span>View Demo</span>
+                <svg className="h-5 w-5 transform group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-    </section>
+
+        {/* Additional decorative elements */}
+        <div className="absolute top-10 left-10 w-20 h-20 border border-blue-200 dark:border-blue-800 rounded-full opacity-20 animate-spin" style={{animationDuration: '20s'}}></div>
+        <div className="absolute bottom-10 right-10 w-16 h-16 border border-purple-200 dark:border-purple-800 rounded-full opacity-30 animate-pulse"></div>
+        
+        {/* Grid pattern overlay */}
+        <div className="absolute inset-0 opacity-5 dark:opacity-10">
+          <div className="absolute inset-0" style={{
+            backgroundImage: `url("data:image/svg+xml,%3csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3e%3cdefs%3e%3cpattern id='grid' width='60' height='60' patternUnits='userSpaceOnUse'%3e%3cpath d='m 60 0 l 0 60 l -60 0 z' fill='none' stroke='%23000000' stroke-width='1'/%3e%3c/pattern%3e%3c/defs%3e%3crect width='100%25' height='100%25' fill='url(%23grid)' /%3e%3c/svg%3e")`,
+          }}></div>
+        </div>
+      </section>
+    </>
   );
 };
 
-export default Hero;
+export default Hero;
\ No newline at end of file
diff --git a/src/components/HowItWorks.tsx b/src/components/HowItWorks.tsx
index 8abf1e1..fd51eb2 100644
--- a/src/components/HowItWorks.tsx
+++ b/src/components/HowItWorks.tsx
@@ -1,49 +1,186 @@
+import { Search, BarChart3, TrendingUp, ArrowRight } from 'lucide-react';
+import { useState } from 'react';
 
 const HowItWorks = () => {
+  const [activeStep, setActiveStep] = useState(0);
+  
   const steps = [
     {
       number: 1,
       title: 'Search Users',
-      description: 'Enter GitHub usernames or search for users by name. Add them to your tracking dashboard.'
+      description: 'Enter GitHub usernames or search for users by name. Add them to your tracking dashboard with intelligent auto-suggestions.',
+      icon: Search,
+      blueShade: 'from-blue-400 to-blue-600',
+      bgColor: 'bg-blue-50 dark:bg-blue-950/30',
+      borderColor: 'border-blue-200 dark:border-blue-800',
+      hoverBorderColor: 'hover:border-blue-300 dark:hover:border-blue-700'
     },
     {
       number: 2,
       title: 'Monitor Activity',
-      description: 'Watch insights of commits, pull requests, issues, and other GitHub activities.'
+      description: 'Watch real-time insights of commits, pull requests, issues, and other GitHub activities with comprehensive analytics.',
+      icon: BarChart3,
+      blueShade: 'from-blue-500 to-blue-700',
+      bgColor: 'bg-blue-50 dark:bg-blue-950/30',
+      borderColor: 'border-blue-200 dark:border-blue-800',
+      hoverBorderColor: 'hover:border-blue-300 dark:hover:border-blue-700'
     },
     {
       number: 3,
       title: 'Analyze Insights',
-      description: 'Review detailed analytics, export reports, and gain valuable insights into development patterns.'
+      description: 'Review detailed analytics, export comprehensive reports, and gain valuable insights into development patterns and trends.',
+      icon: TrendingUp,
+      blueShade: 'from-blue-600 to-blue-800',
+      bgColor: 'bg-blue-50 dark:bg-blue-950/30',
+      borderColor: 'border-blue-200 dark:border-blue-800',
+      hoverBorderColor: 'hover:border-blue-300 dark:hover:border-blue-700'
     }
   ];
 
   return (
-    <section id="how-it-works" className="px-6 py-10 bg-gray-50 dark:bg-gray-800 transition-colors duration-300">
-      <div className="mx-auto">
-        <div className="text-center mb-16">
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">How It Works</h2>
-          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
-            Get started in minutes with our simple three-step process
+    <section id="how-it-works" className="px-6 py-20 bg-gradient-to-b from-blue-50 via-white to-blue-50 dark:from-blue-950 dark:via-gray-950 dark:to-blue-950 transition-colors duration-300 relative">
+      
+      {/* Subtle background decoration */}
+      <div className="absolute inset-0 pointer-events-none opacity-20 dark:opacity-10">
+        <div className="absolute top-20 left-10 w-64 h-64 bg-blue-200 dark:bg-blue-900/50 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-20 right-10 w-48 h-48 bg-blue-300 dark:bg-blue-800/50 rounded-full blur-3xl"></div>
+      </div>
+
+      <div className="max-w-7xl mx-auto relative">
+        {/* Header */}
+        <div className="text-center mb-20">
+          <h2 className="text-5xl font-bold mb-6">
+            <span className="bg-gradient-to-r from-blue-600 via-blue-700 to-blue-800 bg-clip-text text-transparent dark:from-blue-400 dark:via-blue-500 dark:to-blue-600">
+              How It Works
+            </span>
+          </h2>
+          <p className="text-xl text-blue-700 dark:text-blue-300 max-w-3xl mx-auto leading-relaxed">
+            Get started in minutes with our intuitive three-step process designed for developers and teams
           </p>
         </div>
 
-        <div className="grid md:grid-cols-3 gap-8">
-          {steps.map((step, index) => (
-            <div key={index} className="text-center">
-              <div className="bg-blue-600 text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl font-bold">
-                {step.number}
+        {/* Desktop Layout */}
+        <div className="hidden lg:block">
+          <div className="relative">
+            {/* Connection Lines */}
+            <div className="absolute top-32 left-0 right-0 flex items-center justify-center">
+              <div className="flex items-center space-x-8 w-full max-w-4xl">
+                <div className="flex-1 h-px bg-gradient-to-r from-transparent via-blue-300 dark:via-blue-600 to-transparent opacity-60"></div>
+                <div className="flex-1 h-px bg-gradient-to-r from-transparent via-blue-300 dark:via-blue-600 to-transparent opacity-60"></div>
               </div>
-              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">{step.title}</h3>
-              <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
-                {step.description}
-              </p>
             </div>
-          ))}
+
+            {/* Steps */}
+            <div className="grid grid-cols-3 gap-12 relative z-10">
+              {steps.map((step, index) => {
+                const IconComponent = step.icon;
+                return (
+                  <div 
+                    key={index}
+                    className="group cursor-pointer"
+                    onMouseEnter={() => setActiveStep(index)}
+                  >
+                    {/* Card */}
+                    <div className={`relative p-8 rounded-3xl transition-all duration-300 
+                      ${step.bgColor} backdrop-blur-sm
+                      border-2 ${step.borderColor} ${step.hoverBorderColor}
+                      hover:shadow-2xl hover:shadow-blue-500/10 hover:-translate-y-1
+                      ${activeStep === index ? 'shadow-2xl shadow-blue-500/10 -translate-y-1 border-blue-300 dark:border-blue-700' : 'shadow-lg'}`}>
+                      
+                      {/* Icon Container */}
+                      <div className="relative mb-8">
+                        <div className={`relative w-20 h-20 bg-gradient-to-r ${step.blueShade} rounded-2xl flex items-center justify-center mx-auto shadow-lg transition-all duration-300 group-hover:shadow-xl group-hover:shadow-blue-500/25 group-hover:scale-105`}>
+                          <IconComponent className="h-10 w-10 text-white" />
+                        </div>
+                        <div className="absolute -top-2 -right-2 w-8 h-8 bg-blue-600 dark:bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-bold shadow-lg transform -translate-x-6">
+                          {step.number}
+                        </div>
+                      </div>
+
+                      {/* Content */}
+                      <div className="text-center">
+                        <h3 className="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4 transition-colors duration-300 group-hover:text-blue-800 dark:group-hover:text-blue-50">
+                          {step.title}
+                        </h3>
+                        <p className="text-blue-700 dark:text-blue-300 leading-relaxed text-lg transition-colors duration-300 group-hover:text-blue-800 dark:group-hover:text-blue-200">
+                          {step.description}
+                        </p>
+                      </div>
+
+                      {/* Subtle decorative elements */}
+                      <div className={`absolute top-0 right-0 w-16 h-16 bg-gradient-to-br ${step.blueShade} opacity-5 dark:opacity-10 rounded-bl-3xl rounded-tr-3xl`}></div>
+                      
+                      {/* Bottom accent */}
+                      <div className={`absolute bottom-0 left-1/2 transform -translate-x-1/2 w-16 h-1 bg-gradient-to-r ${step.blueShade} rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300`}></div>
+                    </div>
+
+                    {/* Arrow connector */}
+                    {index < steps.length - 1 && (
+                      <div className="absolute top-32 -right-6 transform translate-x-full">
+                        <div className="w-10 h-10 bg-white dark:bg-blue-900 rounded-full border-2 border-blue-200 dark:border-blue-700 flex items-center justify-center shadow-md transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20 hover:scale-105 hover:border-blue-300 dark:hover:border-blue-600">
+                          <ArrowRight className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* Mobile Layout */}
+        <div className="lg:hidden space-y-12">
+          {steps.map((step, index) => {
+            const IconComponent = step.icon;
+            return (
+              <div key={index} className="relative">
+                {/* Step Card */}
+                <div className={`p-8 rounded-3xl ${step.bgColor} backdrop-blur-sm border-2 ${step.borderColor} shadow-lg hover:shadow-xl hover:shadow-blue-500/10 transition-all duration-300 hover:-translate-y-1 ${step.hoverBorderColor}`}>
+                  <div className="flex items-start space-x-6">
+                    {/* Icon */}
+                    <div className="flex-shrink-0">
+                      <div className={`relative w-16 h-16 bg-gradient-to-r ${step.blueShade} rounded-2xl flex items-center justify-center shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-blue-500/25`}>
+                        <IconComponent className="h-8 w-8 text-white" />
+                        <div className="absolute -top-1 -right-1 w-6 h-6 bg-blue-600 dark:bg-blue-500 rounded-full flex items-center justify-center text-white text-xs font-bold">
+                          {step.number}
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Content */}
+                    <div className="flex-1">
+                      <h3 className="text-xl font-bold text-blue-900 dark:text-blue-100 mb-3">
+                        {step.title}
+                      </h3>
+                      <p className="text-blue-700 dark:text-blue-300 leading-relaxed">
+                        {step.description}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Mobile connector */}
+                {index < steps.length - 1 && (
+                  <div className="flex justify-center my-6">
+                    <div className="w-px h-8 bg-gradient-to-b from-blue-300 dark:from-blue-600 to-transparent opacity-50"></div>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Bottom CTA */}
+        <div className="text-center mt-16">
+          <div className="inline-flex items-center space-x-2 text-gray-700 dark:text-gray-300 font-semibold text-lg hover:text-gray-900 dark:hover:text-white transition-colors duration-300 cursor-pointer group">
+            <span>Ready to get started?</span>
+            <ArrowRight className="h-5 w-5 transition-transform duration-300 group-hover:translate-x-1" />
+          </div>
         </div>
       </div>
     </section>
   );
 };
 
-export default HowItWorks;
+export default HowItWorks;
\ No newline at end of file