v4

index.html

@@ -30,19 +30,14 @@
                         }
                     },
                     animation: {
-                        'fade-in': 'fadeIn 0.5s ease-in-out',
-                        'fade-in-up': 'fadeInUp 0.6s ease-out',
-                        'fade-in-down': 'fadeInDown 0.6s ease-out',
-                        'fade-in-left': 'fadeInLeft 0.6s ease-out',
-                        'fade-in-right': 'fadeInRight 0.6s ease-out',
-                        'slide-up': 'slideUp 0.5s ease-out',
-                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-                        'float': 'float 6s ease-in-out infinite',
-                        'bounce-in': 'bounceIn 0.8s ease-out',
-                        'scale-in': 'scaleIn 0.5s ease-out',
-                        'rotate-in': 'rotateIn 0.8s ease-out',
-                        'shake': 'shake 0.5s ease-in-out',
-                        'glow': 'glow 2s ease-in-out infinite alternate',
+                        'fade-in': 'fadeIn 0.8s ease-out',
+                        'fade-in-up': 'fadeInUp 0.8s ease-out',
+                        'fade-in-down': 'fadeInDown 0.8s ease-out',
+                        'slide-up': 'slideUp 0.6s ease-out',
+                        'slide-down': 'slideDown 0.6s ease-out',
+                        'pulse-subtle': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                        'float-subtle': 'float 8s ease-in-out infinite',
+                        'scale-in': 'scaleIn 0.6s ease-out',
                     }
                 }
             }
@@ -98,13 +93,6 @@
             background: #f97316;
         }
 
-        /* Performance optimization class */
-        .gpu-accelerated {
-            transform: translateZ(0);
-            -webkit-transform: translateZ(0);
-            will-change: transform;
-        }
-        
         /* Orange gradient for hero section */
         .orange-gradient {
             background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
@@ -130,62 +118,64 @@
         }
         
         @keyframes fadeInUp {
-            from { opacity: 0; transform: translateY(30px); }
-            to { opacity: 1; transform: translateY(0); }
+            from { 
+                opacity: 0; 
+                transform: translateY(30px); 
+            }
+            to { 
+                opacity: 1; 
+                transform: translateY(0); 
+            }
         }
         
         @keyframes fadeInDown {
-            from { opacity: 0; transform: translateY(-30px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        
-        @keyframes fadeInLeft {
-            from { opacity: 0; transform: translateX(-30px); }
-            to { opacity: 1; transform: translateX(0); }
+            from { 
+                opacity: 0; 
+                transform: translateY(-30px); 
+            }
+            to { 
+                opacity: 1; 
+                transform: translateY(0); 
+            }
         }
         
-        @keyframes fadeInRight {
-            from { opacity: 0; transform: translateX(30px); }
-            to { opacity: 1; transform: translateX(0); }
+        @keyframes slideUp {
+            from { 
+                transform: translateY(100%); 
+                opacity: 0;
+            }
+            to { 
+                transform: translateY(0); 
+                opacity: 1;
+            }
         }
         
-        @keyframes slideUp {
-            from { transform: translateY(100%); }
-            to { transform: translateY(0); }
+        @keyframes slideDown {
+            from { 
+                transform: translateY(-100%); 
+                opacity: 0;
+            }
+            to { 
+                transform: translateY(0); 
+                opacity: 1;
+            }
         }
         
         @keyframes float {
             0% { transform: translateY(0px); }
-            50% { transform: translateY(-10px); }
+            50% { transform: translateY(-8px); }
             100% { transform: translateY(0px); }
         }
         
-        @keyframes bounceIn {
-            0% { transform: scale(0.3); opacity: 0; }
-            50% { transform: scale(1.05); }
-            70% { transform: scale(0.9); }
-            100% { transform: scale(1); opacity: 1; }
-        }
-        
         @keyframes scaleIn {
-            from { transform: scale(0); opacity: 0; }
-            to { transform: scale(1); opacity: 1; }
-        }
-        
-        @keyframes rotateIn {
-            from { transform: rotate(-200deg); opacity: 0; }
-            to { transform: rotate(0); opacity: 1; }
-        }
-        
-        @keyframes shake {
-            0%, 100% { transform: translateX(0); }
-            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
-            20%, 40%, 60%, 80% { transform: translateX(5px); }
-        }
-        
-        @keyframes glow {
-            from { box-shadow: 0 0 5px rgba(249, 115, 22, 0.2); }
-            to { box-shadow: 0 0 20px rgba(249, 115, 22, 0.4); }
+            from { 
+                transform: scale(0.95); 
+                opacity: 0;
+            }
+            to { 
+                transform: scale(1); 
+                opacity: 1;
+            }
         }
         
         /* Staggered animation delays */
@@ -195,21 +185,22 @@
         .stagger-4 { animation-delay: 0.4s; }
         .stagger-5 { animation-delay: 0.5s; }
         
-        /* Hover effects */
+        /* Smooth hover effects */
         .hover-lift {
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
+                        box-shadow 0.4s ease;
         }
         
         .hover-lift:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+            transform: translateY(-8px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
         }
         
         /* Button animations */
         .btn-animate {
             position: relative;
             overflow: hidden;
-            transition: all 0.3s ease;
+            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }
         
         .btn-animate::before {
@@ -219,44 +210,36 @@
             left: -100%;
             width: 100%;
             height: 100%;
-            background: rgba(255, 255, 255, 0.2);
-            transition: left 0.5s ease;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: left 0.8s ease;
         }
         
         .btn-animate:hover::before {
             left: 100%;
         }
         
-        /* Text reveal animation */
-        .text-reveal {
-            position: relative;
-            overflow: hidden;
+        .btn-animate:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(249, 115, 22, 0.3);
         }
         
-        .text-reveal::after {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: white;
-            transform: translateX(-100%);
-            animation: textReveal 1.5s ease forwards;
+        /* Card hover effects */
+        .card-hover {
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }
         
-        @keyframes textReveal {
-            to { transform: translateX(100%); }
+        .card-hover:hover {
+            transform: translateY(-12px);
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
         }
         
-        /* Card hover effects */
-        .card-hover {
-            transition: all 0.3s ease;
+        /* Icon hover effects */
+        .icon-hover {
+            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }
         
-        .card-hover:hover {
-            transform: translateY(-10px) scale(1.02);
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        .icon-hover:hover {
+            transform: scale(1.1) rotate(5deg);
         }
         
         /* Form input animations */
@@ -266,8 +249,8 @@
         }
         
         .input-animate:focus {
-            transform: scale(1.02);
-            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(249, 115, 22, 0.2);
         }
         
         /* Loading animation */
@@ -285,17 +268,11 @@
             to { transform: rotate(360deg); }
         }
         
-        /* Parallax effect */
-        .parallax {
-            transform: translateZ(0);
-            will-change: transform;
-        }
-        
         /* Intersection Observer for scroll animations */
         .scroll-animate {
             opacity: 0;
             transform: translateY(30px);
-            transition: opacity 0.6s ease, transform 0.6s ease;
+            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
         }
         
         .scroll-animate.animated {
@@ -309,6 +286,64 @@
         .scroll-animate.stagger-3 { transition-delay: 0.3s; }
         .scroll-animate.stagger-4 { transition-delay: 0.4s; }
         .scroll-animate.stagger-5 { transition-delay: 0.5s; }
+        
+        /* Smooth reveal animation */
+        .reveal {
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .reveal::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: white;
+            transform: translateX(-100%);
+            animation: reveal 1.2s ease-out forwards;
+        }
+        
+        @keyframes reveal {
+            to { transform: translateX(100%); }
+        }
+        
+        /* Subtle glow effect */
+        .glow-subtle {
+            transition: box-shadow 0.4s ease;
+        }
+        
+        .glow-subtle:hover {
+            box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
+        }
+        
+        /* Smooth color transition */
+        .color-transition {
+            transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
+        }
+        
+        /* Parallax effect */
+        .parallax {
+            transform: translateZ(0);
+            will-change: transform;
+        }
+        
+        /* Mobile menu animation */
+        .mobile-menu {
+            transform-origin: top;
+            transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+        }
+        
+        .mobile-menu.show {
+            transform: scaleY(1);
+            opacity: 1;
+        }
+        
+        .mobile-menu.hide {
+            transform: scaleY(0);
+            opacity: 0;
+        }
     </style>
 </head>
 <body class="bg-white text-gray-900 transition-colors duration-300">
@@ -318,7 +353,7 @@
         <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between items-center h-16">
                 <div class="flex items-center">
-                    <div class="flex-shrink-0 flex items-center animate-bounce-in">
+                    <div class="flex-shrink-0 flex items-center animate-scale-in">
                         <div class="w-8 h-8 orange-gradient rounded-lg flex items-center justify-center transition-colors duration-300">
                             <span class="text-white font-bold text-sm">L</span>
                         </div>
@@ -328,36 +363,36 @@
                 
                 <div class="hidden md:block">
                     <div class="ml-10 flex items-baseline space-x-8">
-                        <a href="#home" class="text-gray-900 hover:text-orange-500 px-3 py-2 text-sm font-medium transition-colors animate-fade-in stagger-1">Home</a>
-                        <a href="#about" class="text-gray-600 hover:text-orange-500 px-3 py-2 text-sm font-medium transition-colors animate-fade-in stagger-2">About</a>
-                        <a href="#work" class="text-gray-600 hover:text-orange-500 px-3 py-2 text-sm font-medium transition-colors animate-fade-in stagger-3">Work</a>
-                        <a href="#services" class="text-gray-600 hover:text-orange-500 px-3 py-2 text-sm font-medium transition-colors animate-fade-in stagger-4">Services</a>
-                        <a href="#contact" class="text-gray-600 hover:text-orange-500 px-3 py-2 text-sm font-medium transition-colors animate-fade-in stagger-5">Contact</a>
+                        <a href="#home" class="text-gray-900 hover:text-orange-500 px-3 py-2 text-sm font-medium color-transition animate-fade-in stagger-1">Home</a>
+                        <a href="#about" class="text-gray-600 hover:text-orange-500 px-3 py-2 text-sm font-medium color-transition animate-fade-in stagger-2">About</a>
+                        <a href="#work" class="text-gray-600 hover:text-orange-500 px-3 py-2 text-sm font-medium color-transition animate-fade-in stagger-3">Work</a>
+                        <a href="#services" class="text-gray-600 hover:text-orange-500 px-3 py-2 text-sm font-medium color-transition animate-fade-in stagger-4">Services</a>
+                        <a href="#contact" class="text-gray-600 hover:text-orange-500 px-3 py-2 text-sm font-medium color-transition animate-fade-in stagger-5">Contact</a>
                     </div>
                 </div>
                 
                 <div class="hidden md:flex items-center space-x-4">
-                    <a href="#contact" class="orange-gradient text-white hover:opacity-90 px-4 py-2 rounded-lg text-sm font-medium transition-all transform hover:scale-105 btn-animate animate-fade-in-right">
+                    <a href="#contact" class="orange-gradient text-white hover:opacity-90 px-4 py-2 rounded-lg text-sm font-medium btn-animate animate-fade-in-right">
                         Get Started
                     </a>
                 </div>
                 
                 <!-- Mobile menu button -->
                 <div class="md:hidden flex items-center space-x-2">
-                    <button type="button" class="mobile-menu-button p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors animate-fade-in">
+                    <button type="button" class="mobile-menu-button p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 color-transition animate-fade-in">
                         <i data-feather="menu" class="w-6 h-6"></i>
                     </button>
                 </div>
             </div>
             
             <!-- Mobile menu -->
-            <div class="mobile-menu hidden md:hidden animate-slide-up">
+            <div class="mobile-menu hide md:hidden">
                 <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-                    <a href="#home" class="text-gray-900 block px-3 py-2 text-base font-medium transition-colors">Home</a>
-                    <a href="#about" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium transition-colors">About</a>
-                    <a href="#work" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium transition-colors">Work</a>
-                    <a href="#services" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium transition-colors">Services</a>
-                    <a href="#contact" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium transition-colors">Contact</a>
+                    <a href="#home" class="text-gray-900 block px-3 py-2 text-base font-medium color-transition">Home</a>
+                    <a href="#about" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium color-transition">About</a>
+                    <a href="#work" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium color-transition">Work</a>
+                    <a href="#services" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium color-transition">Services</a>
+                    <a href="#contact" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium color-transition">Contact</a>
                     <div class="pt-4 pb-2 border-t border-gray-200">
                         <a href="#contact" class="orange-gradient text-white hover:opacity-90 px-4 py-2 rounded-lg text-sm font-medium transition-colors block text-center">
                             Get Started
@@ -369,22 +404,22 @@
     </header>
 
     <!-- Hero Section -->
-    <section id="home" class="pt-16 pb-32 bg-gradient-to-br from-orange-50 to-white transition-colors duration-300">
+    <section id="home" class="pt-16 pb-32 bg-gradient-to-br from-orange-50 to-white transition-colors duration-300 parallax">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center max-w-4xl mx-auto">
                 <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-gray-900 mb-8 animate-fade-in-up">
                     Plan and build
                     <br>
-                    <span class="orange-text-gradient animate-pulse-slow">modern products</span>
+                    <span class="orange-text-gradient animate-pulse-subtle">modern products</span>
                 </h1>
                 <p class="text-xl sm:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto animate-fade-in-up stagger-2">
                     Streamline your development workflow with purpose-built tools for planning, tracking, and delivering exceptional products.
                 </p>
                 <div class="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in-up stagger-3">
-                    <a href="#contact" class="orange-gradient text-white hover:opacity-90 px-8 py-4 rounded-lg text-lg font-medium transition-all transform hover:scale-105 btn-animate">
+                    <a href="#contact" class="orange-gradient text-white hover:opacity-90 px-8 py-4 rounded-lg text-lg font-medium btn-animate">
                         Start Building
                     </a>
-                    <a href="#work" class="border border-orange-300 text-orange-600 hover:bg-orange-50 px-8 py-4 rounded-lg text-lg font-medium transition-all transform hover:scale-105">
+                    <a href="#work" class="border border-orange-300 text-orange-600 hover:bg-orange-50 px-8 py-4 rounded-lg text-lg font-medium color-transition hover-lift">
                         View Work
                     </a>
                 </div>
@@ -407,7 +442,7 @@
             <div class="grid md:grid-cols-3 gap-12">
                 <!-- Feature 1 -->
                 <div class="text-center scroll-animate stagger-1 card-hover">
-                    <div class="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-all hover:scale-110 hover:rotate-3">
+                    <div class="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mx-auto mb-6 icon-hover glow-subtle">
                         <i data-feather="cpu" class="w-8 h-8 text-orange-600"></i>
                     </div>
                     <h3 class="text-2xl font-semibold text-gray-900 mb-4">Purpose-built development</h3>
@@ -418,7 +453,7 @@
                 
                 <!-- Feature 2 -->
                 <div class="text-center scroll-animate stagger-2 card-hover">
-                    <div class="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-all hover:scale-110 hover:rotate-3">
+                    <div class="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mx-auto mb-6 icon-hover glow-subtle">
                         <i data-feather="zap" class="w-8 h-8 text-orange-600"></i>
                     </div>
                     <h3 class="text-2xl font-semibold text-gray-900 mb-4">Designed to move fast</h3>
@@ -429,7 +464,7 @@
                 
                 <!-- Feature 3 -->
                 <div class="text-center scroll-animate stagger-3 card-hover">
-                    <div class="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-all hover:scale-110 hover:rotate-3">
+                    <div class="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mx-auto mb-6 icon-hover glow-subtle">
                         <i data-feather="settings" class="w-8 h-8 text-orange-600"></i>
                     </div>
                     <h3 class="text-2xl font-semibold text-gray-900 mb-4">Crafted to perfection</h3>
@@ -446,8 +481,8 @@
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="grid lg:grid-cols-2 gap-16 items-center">
                 <div class="scroll-animate">
-                    <div class="inline-flex items-center bg-white border border-orange-200 rounded-full px-4 py-2 mb-6 transition-all hover:scale-105">
-                        <span class="w-2 h-2 bg-orange-500 rounded-full mr-2 animate-pulse"></span>
+                    <div class="inline-flex items-center bg-white border border-orange-200 rounded-full px-4 py-2 mb-6 color-transition hover-lift">
+                        <span class="w-2 h-2 bg-orange-500 rounded-full mr-2 animate-pulse-subtle"></span>
                         <span class="text-sm font-medium text-gray-700">AI-Powered Development</span>
                     </div>
                     <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
@@ -456,24 +491,24 @@
                     <p class="text-xl text-gray-600 mb-8">
                         Streamline your development workflows with AI assistance for routine, manual tasks. Let AI handle the repetitive work so you can focus on building great products.
                     </p>
-                    <a href="#contact" class="inline-flex items-center text-orange-600 font-medium hover:text-orange-700 transition-all hover:translate-x-2">
+                    <a href="#contact" class="inline-flex items-center text-orange-600 font-medium hover:text-orange-700 color-transition hover:translate-x-2">
                         Learn more
                         <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
                     </a>
                 </div>
                 <div class="relative scroll-animate stagger-2">
-                    <div class="bg-white rounded-2xl border border-orange-200 p-8 shadow-sm orange-shadow transition-all hover:scale-105">
+                    <div class="bg-white rounded-2xl border border-orange-200 p-8 shadow-sm orange-shadow card-hover glow-subtle">
                         <div class="space-y-4">
-                            <div class="flex items-center justify-between p-4 bg-orange-50 rounded-lg transition-all hover:bg-orange-100">
+                            <div class="flex items-center justify-between p-4 bg-orange-50 rounded-lg color-transition hover:bg-orange-100">
                                 <div class="flex items-center">
-                                    <div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center transition-all hover:scale-110">
+                                    <div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center icon-hover">
                                         <span class="text-orange-600 text-sm font-medium">AI</span>
                                     </div>
                                     <span class="ml-3 text-gray-900 font-medium">Smart Suggestions</span>
                                 </div>
-                                <div class="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
+                                <div class="w-3 h-3 bg-green-400 rounded-full animate-pulse-subtle"></div>
                             </div>
-                            <div class="p-4 border border-orange-200 rounded-lg transition-all hover:bg-orange-50">
+                            <div class="p-4 border border-orange-200 rounded-lg color-transition hover:bg-orange-50">
                                 <p class="text-sm text-gray-600 mb-2">Why this assignee was suggested:</p>
                                 <p class="text-sm text-gray-900">This person was the assignee on previous issues related to similar performance problems.</p>
                             </div>
@@ -498,8 +533,8 @@
             
             <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                 <!-- Project 1 -->
-                <div class="bg-gray-50 rounded-2xl p-8 hover:bg-orange-50 transition-all hover-lift scroll-animate stagger-1">
-                    <div class="w-12 h-12 orange-gradient rounded-xl flex items-center justify-center mb-6 transition-all hover:scale-110 hover:rotate-3">
+                <div class="bg-gray-50 rounded-2xl p-8 hover:bg-orange-50 color-transition hover-lift scroll-animate stagger-1">
+                    <div class="w-12 h-12 orange-gradient rounded-xl flex items-center justify-center mb-6 icon-hover">
                         <i data-feather="smartphone" class="w-6 h-6 text-white"></i>
                     </div>
                     <h3 class="text-xl font-semibold text-gray-900 mb-3">Mobile App Development</h3>
@@ -513,8 +548,8 @@
                 </div>
                 
                 <!-- Project 2 -->
-                <div class="bg-gray-50 rounded-2xl p-8 hover:bg-orange-50 transition-all hover-lift scroll-animate stagger-2">
-                    <div class="w-12 h-12 orange-gradient rounded-xl flex items-center justify-center mb-6 transition-all hover:scale-110 hover:rotate-3">
+                <div class="bg-gray-50 rounded-2xl p-8 hover:bg-orange-50 color-transition hover-lift scroll-animate stagger-2">
+                    <div class="w-12 h-12 orange-gradient rounded-xl flex items-center justify-center mb-6 icon-hover">
                         <i data-feather="code" class="w-6 h-6 text-white"></i>
                     </div>
                     <h3 class="text-xl font-semibold text-gray-900 mb-3">API Integration</h3>
@@ -528,8 +563,8 @@
                 </div>
                 
                 <!-- Project 3 -->
-                <div class="bg-gray-50 rounded-2xl p-8 hover:bg-orange-50 transition-all hover-lift scroll-animate stagger-3">
-                    <div class="w-12 h-12 orange-gradient rounded-xl flex items-center justify-center mb-6 transition-all hover:scale-110 hover:rotate-3">
+                <div class="bg-gray-50 rounded-2xl p-8 hover:bg-orange-50 color-transition hover-lift scroll-animate stagger-3">
+                    <div class="w-12 h-12 orange-gradient rounded-xl flex items-center justify-center mb-6 icon-hover">
                         <i data-feather="layout" class="w-6 h-6 text-white"></i>
                     </div>
                     <h3 class="text-xl font-semibold text-gray-900 mb-3">Web Dashboard</h3>
@@ -558,7 +593,7 @@
                     </p>
                     <div class="space-y-6">
                         <div class="flex items-start scroll-animate stagger-1">
-                            <div class="flex-shrink-0 w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center mt-1 transition-all hover:scale-110">
+                            <div class="flex-shrink-0 w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center mt-1 icon-hover">
                                 <i data-feather="check" class="w-3 h-3 text-orange-600"></i>
                             </div>
                             <div class="ml-4">
@@ -567,7 +602,7 @@
                             </div>
                         </div>
                         <div class="flex items-start scroll-animate stagger-2">
-                            <div class="flex-shrink-0 w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center mt-1 transition-all hover:scale-110">
+                            <div class="flex-shrink-0 w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center mt-1 icon-hover">
                                 <i data-feather="check" class="w-3 h-3 text-orange-600"></i>
                             </div>
                             <div class="ml-4">
@@ -576,7 +611,7 @@
                             </div>
                         </div>
                         <div class="flex items-start scroll-animate stagger-3">
-                            <div class="flex-shrink-0 w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center mt-1 transition-all hover:scale-110">
+                            <div class="flex-shrink-0 w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center mt-1 icon-hover">
                                 <i data-feather="check" class="w-3 h-3 text-orange-600"></i>
                             </div>
                             <div class="ml-4">
@@ -587,23 +622,23 @@
                     </div>
                 </div>
                 <div class="relative scroll-animate stagger-4">
-                    <div class="bg-white rounded-2xl border border-orange-200 p-8 shadow-sm orange-shadow transition-all hover:scale-105">
+                    <div class="bg-white rounded-2xl border border-orange-200 p-8 shadow-sm orange-shadow card-hover glow-subtle">
                         <div class="space-y-4">
-                            <div class="flex items-center justify-between p-4 bg-orange-50 rounded-lg transition-all hover:bg-orange-100">
+                            <div class="flex items-center justify-between p-4 bg-orange-50 rounded-lg color-transition hover:bg-orange-100">
                                 <div class="flex items-center">
-                                    <div class="w-8 h-8 bg-gray-900 rounded-full flex items-center justify-center transition-all hover:scale-110">
+                                    <div class="w-8 h-8 bg-gray-900 rounded-full flex items-center justify-center icon-hover">
                                         <span class="text-white text-sm font-medium">DV</span>
                                     </div>
                                     <span class="ml-3 text-gray-900 font-medium">Development Velocity</span>
                                 </div>
-                                <span class="text-2xl font-bold text-orange-600 animate-pulse-slow">+340%</span>
+                                <span class="text-2xl font-bold text-orange-600 animate-pulse-subtle">+340%</span>
                             </div>
                             <div class="grid grid-cols-2 gap-4">
-                                <div class="p-4 border border-orange-200 rounded-lg text-center transition-all hover:bg-orange-50 hover:scale-105">
+                                <div class="p-4 border border-orange-200 rounded-lg text-center color-transition hover:bg-orange-50 hover-lift">
                                     <div class="text-2xl font-bold text-gray-900">2.3x</div>
                                     <div class="text-sm text-gray-600">Faster Shipping</div>
                                 </div>
-                                <div class="p-4 border border-orange-200 rounded-lg text-center transition-all hover:bg-orange-50 hover:scale-105">
+                                <div class="p-4 border border-orange-200 rounded-lg text-center color-transition hover:bg-orange-50 hover-lift">
                                     <div class="text-2xl font-bold text-gray-900">95%</div>
                                     <div class="text-sm text-gray-600">Developer Satisfaction</div>
                                 </div>
@@ -631,23 +666,23 @@
                 <div class="grid md:grid-cols-2 gap-6">
                     <div>
                         <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Name</label>
-                        <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 bg-white text-gray-900 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all input-animate">
+                        <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 bg-white text-gray-900 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 input-animate">
                     </div>
                     <div>
                         <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
-                        <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 bg-white text-gray-900 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all input-animate">
+                        <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 bg-white text-gray-900 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 input-animate">
                     </div>
                 </div>
                 <div>
                     <label for="company" class="block text-sm font-medium text-gray-700 mb-2">Company</label>
-                    <input type="text" id="company" name="company" class="w-full px-4 py-3 border border-gray-300 bg-white text-gray-900 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all input-animate">
+                    <input type="text" id="company" name="company" class="w-full px-4 py-3 border border-gray-300 bg-white text-gray-900 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 input-animate">
                 </div>
                 <div>
                     <label for="project" class="block text-sm font-medium text-gray-700 mb-2">Project Details</label>
-                    <textarea id="project" name="project" rows="4" class="w-full px-4 py-3 border border-gray-300 bg-white text-gray-900 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all input-animate"></textarea>
+                    <textarea id="project" name="project" rows="4" class="w-full px-4 py-3 border border-gray-300 bg-white text-gray-900 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 input-animate"></textarea>
                 </div>
                 <div class="text-center">
-                    <button type="submit" class="orange-gradient text-white hover:opacity-90 px-8 py-4 rounded-lg text-lg font-medium transition-all transform hover:scale-105 btn-animate">
+                    <button type="submit" class="orange-gradient text-white hover:opacity-90 px-8 py-4 rounded-lg text-lg font-medium btn-animate">
                         Send Message
                     </button>
                 </div>
@@ -670,13 +705,13 @@
                         Building modern products with purpose-built tools for efficient development workflows.
                     </p>
                     <div class="flex space-x-4">
-                        <a href="#" class="text-gray-400 hover:text-white transition-all hover:scale-110">
+                        <a href="#" class="text-gray-400 hover:text-white color-transition icon-hover">
                             <i data-feather="github" class="w-5 h-5"></i>
                         </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition-all hover:scale-110">
+                        <a href="#" class="text-gray-400 hover:text-white color-transition icon-hover">
                             <i data-feather="twitter" class="w-5 h-5"></i>
                         </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition-all hover:scale-110">
+                        <a href="#" class="text-gray-400 hover:text-white color-transition icon-hover">
                             <i data-feather="linkedin" class="w-5 h-5"></i>
                         </a>
                     </div>
@@ -685,20 +720,20 @@
                 <div>
                     <h4 class="text-lg font-semibold mb-4">Services</h4>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Web Development</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Mobile Apps</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">API Integration</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Consulting</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white color-transition">Web Development</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white color-transition">Mobile Apps</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white color-transition">API Integration</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white color-transition">Consulting</a></li>
                     </ul>
                 </div>
                 
                 <div>
                     <h4 class="text-lg font-semibold mb-4">Company</h4>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">About</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Work</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Blog</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Contact</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white color-transition">About</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white color-transition">Work</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white color-transition">Blog</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white color-transition">Contact</a></li>
                     </ul>
                 </div>
             </div>
@@ -708,9 +743,9 @@
                     © 2024 Linear Portfolio Template. Built with Tailwind CSS.
                 </p>
                 <div class="flex space-x-6 mt-4 md:mt-0">
-                    <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Privacy</a>
-                    <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Terms</a>
-                    <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Security</a>
+                    <a href="#" class="text-gray-400 hover:text-white text-sm color-transition">Privacy</a>
+                    <a href="#" class="text-gray-400 hover:text-white text-sm color-transition">Terms</a>
+                    <a href="#" class="text-gray-400 hover:text-white text-sm color-transition">Security</a>
                 </div>
             </div>
         </div>
@@ -727,7 +762,14 @@
             
             if (mobileMenuButton && mobileMenu) {
                 mobileMenuButton.addEventListener('click', function() {
-                    mobileMenu.classList.toggle('hidden');
+                    // Toggle the menu visibility with slide down animation
+                    if (mobileMenu.classList.contains('hide')) {
+                        mobileMenu.classList.remove('hide');
+                        mobileMenu.classList.add('show');
+                    } else {
+                        mobileMenu.classList.remove('show');
+                        mobileMenu.classList.add('hide');
+                    }
                 });
             }
             
@@ -735,7 +777,8 @@
             const mobileMenuLinks = document.querySelectorAll('.mobile-menu a');
             mobileMenuLinks.forEach(link => {
                 link.addEventListener('click', function() {
-                    mobileMenu.classList.add('hidden');
+                    mobileMenu.classList.remove('show');
+                    mobileMenu.classList.add('hide');
                 });
             });
             
@@ -807,28 +850,20 @@
                 });
             }
             
-            // Add parallax effect to hero section
+            // Add subtle parallax effect to hero section
             window.addEventListener('scroll', () => {
                 const scrolled = window.pageYOffset;
                 const parallax = document.querySelector('#home');
                 if (parallax) {
-                    const speed = 0.5;
+                    const speed = 0.3; // Reduced speed for subtler effect
                     parallax.style.transform = `translateY(${scrolled * speed}px)`;
                 }
             });
             
-            // Add floating animation to certain elements
-            const floatingElements = document.querySelectorAll('.float-animation');
-            floatingElements.forEach(el => {
-                el.classList.add('animate-float');
-            });
-            
-            // Add hover sound effect (optional)
-            const buttons = document.querySelectorAll('button, a');
-            buttons.forEach(button => {
-                button.addEventListener('mouseenter', () => {
-                    // Add sound effect here if needed
-                });
+            // Add smooth reveal animation for specific elements
+            const revealElements = document.querySelectorAll('.reveal');
+            revealElements.forEach(el => {
+                el.classList.add('reveal');
             });
         });
     </script>