Update index.html

index.html

@@ -28,6 +28,21 @@
                             800: '#9a3412',
                             900: '#7c2d12',
                         }
+                    },
+                    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',
                     }
                 }
             }
@@ -65,18 +80,6 @@
             will-change: transform;
         }
 
-        /* Custom animations - optimized for performance */
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY3d(30px, 0, 0);
-            }
-            to {
-                opacity: 1;
-                transform: translateY3d(0, 0, 0);
-            }
-        }
-
         /* Custom scrollbar */
         ::-webkit-scrollbar {
             width: 6px;
@@ -119,16 +122,203 @@
         .orange-shadow {
             box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.2);
         }
+        
+        /* Custom animations */
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        
+        @keyframes fadeInUp {
+            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); }
+        }
+        
+        @keyframes fadeInRight {
+            from { opacity: 0; transform: translateX(30px); }
+            to { opacity: 1; transform: translateX(0); }
+        }
+        
+        @keyframes slideUp {
+            from { transform: translateY(100%); }
+            to { transform: translateY(0); }
+        }
+        
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            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); }
+        }
+        
+        /* Staggered animation delays */
+        .stagger-1 { animation-delay: 0.1s; }
+        .stagger-2 { animation-delay: 0.2s; }
+        .stagger-3 { animation-delay: 0.3s; }
+        .stagger-4 { animation-delay: 0.4s; }
+        .stagger-5 { animation-delay: 0.5s; }
+        
+        /* Hover effects */
+        .hover-lift {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        
+        .hover-lift:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        }
+        
+        /* Button animations */
+        .btn-animate {
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease;
+        }
+        
+        .btn-animate::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.2);
+            transition: left 0.5s ease;
+        }
+        
+        .btn-animate:hover::before {
+            left: 100%;
+        }
+        
+        /* Text reveal animation */
+        .text-reveal {
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .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;
+        }
+        
+        @keyframes textReveal {
+            to { transform: translateX(100%); }
+        }
+        
+        /* Card hover effects */
+        .card-hover {
+            transition: all 0.3s ease;
+        }
+        
+        .card-hover:hover {
+            transform: translateY(-10px) scale(1.02);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        }
+        
+        /* Form input animations */
+        .input-animate {
+            position: relative;
+            transition: all 0.3s ease;
+        }
+        
+        .input-animate:focus {
+            transform: scale(1.02);
+            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
+        }
+        
+        /* Loading animation */
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 1s ease-in-out infinite;
+        }
+        
+        @keyframes spin {
+            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;
+        }
+        
+        .scroll-animate.animated {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        
+        /* Staggered scroll animations */
+        .scroll-animate.stagger-1 { transition-delay: 0.1s; }
+        .scroll-animate.stagger-2 { transition-delay: 0.2s; }
+        .scroll-animate.stagger-3 { transition-delay: 0.3s; }
+        .scroll-animate.stagger-4 { transition-delay: 0.4s; }
+        .scroll-animate.stagger-5 { transition-delay: 0.5s; }
     </style>
 </head>
 <body class="bg-white text-gray-900 transition-colors duration-300">
 
     <!-- Header -->
-    <header class="border-b border-gray-200 sticky top-0 bg-white/95 backdrop-blur-sm z-50 transition-colors duration-300">
+    <header class="border-b border-gray-200 sticky top-0 bg-white/95 backdrop-blur-sm z-50 transition-colors duration-300 animate-fade-in-down">
         <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">
+                    <div class="flex-shrink-0 flex items-center animate-bounce-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>
@@ -138,30 +328,30 @@
                 
                 <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">Home</a>
-                        <a href="#about" class="text-gray-600 hover:text-orange-500 px-3 py-2 text-sm font-medium transition-colors">About</a>
-                        <a href="#work" class="text-gray-600 hover:text-orange-500 px-3 py-2 text-sm font-medium transition-colors">Work</a>
-                        <a href="#services" class="text-gray-600 hover:text-orange-500 px-3 py-2 text-sm font-medium transition-colors">Services</a>
-                        <a href="#contact" class="text-gray-600 hover:text-orange-500 px-3 py-2 text-sm font-medium transition-colors">Contact</a>
+                        <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>
                     </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-colors">
+                    <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">
                         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">
+                    <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">
                         <i data-feather="menu" class="w-6 h-6"></i>
                     </button>
                 </div>
             </div>
             
             <!-- Mobile menu -->
-            <div class="mobile-menu hidden md:hidden">
+            <div class="mobile-menu hidden md:hidden animate-slide-up">
                 <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>
@@ -182,19 +372,19 @@
     <section id="home" class="pt-16 pb-32 bg-gradient-to-br from-orange-50 to-white transition-colors duration-300">
         <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">
+                <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">modern products</span>
+                    <span class="orange-text-gradient animate-pulse-slow">modern products</span>
                 </h1>
-                <p class="text-xl sm:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto">
+                <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">
-                    <a href="#contact" class="orange-gradient text-white hover:opacity-90 px-8 py-4 rounded-lg text-lg font-medium transition-colors">
+                <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">
                         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-colors">
+                    <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">
                         View Work
                     </a>
                 </div>
@@ -205,7 +395,7 @@
     <!-- Features Section -->
     <section id="services" class="py-24 bg-white transition-colors duration-300">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-20">
+            <div class="text-center mb-20 scroll-animate">
                 <h2 class="text-4xl font-bold text-gray-900 mb-6">
                     Made for modern product teams
                 </h2>
@@ -216,8 +406,8 @@
             
             <div class="grid md:grid-cols-3 gap-12">
                 <!-- Feature 1 -->
-                <div class="text-center">
-                    <div class="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-colors">
+                <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">
                         <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>
@@ -227,8 +417,8 @@
                 </div>
                 
                 <!-- Feature 2 -->
-                <div class="text-center">
-                    <div class="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-colors">
+                <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">
                         <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>
@@ -238,8 +428,8 @@
                 </div>
                 
                 <!-- Feature 3 -->
-                <div class="text-center">
-                    <div class="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-colors">
+                <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">
                         <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>
@@ -255,9 +445,9 @@
     <section class="py-24 bg-gray-50 transition-colors duration-300">
         <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>
-                    <div class="inline-flex items-center bg-white border border-orange-200 rounded-full px-4 py-2 mb-6 transition-colors">
-                        <span class="w-2 h-2 bg-orange-500 rounded-full mr-2"></span>
+                <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>
                         <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">
@@ -266,24 +456,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-colors">
+                    <a href="#contact" class="inline-flex items-center text-orange-600 font-medium hover:text-orange-700 transition-all hover:translate-x-2">
                         Learn more
                         <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
                     </a>
                 </div>
-                <div class="relative">
-                    <div class="bg-white rounded-2xl border border-orange-200 p-8 shadow-sm orange-shadow transition-colors">
+                <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="space-y-4">
-                            <div class="flex items-center justify-between p-4 bg-orange-50 rounded-lg transition-colors">
+                            <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">
-                                    <div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center transition-colors">
+                                    <div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center transition-all hover:scale-110">
                                         <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"></div>
+                                <div class="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
                             </div>
-                            <div class="p-4 border border-orange-200 rounded-lg transition-colors">
+                            <div class="p-4 border border-orange-200 rounded-lg transition-all 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>
@@ -297,7 +487,7 @@
     <!-- Work Section -->
     <section id="work" class="py-24 bg-white transition-colors duration-300">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-20">
+            <div class="text-center mb-20 scroll-animate">
                 <h2 class="text-4xl font-bold text-gray-900 mb-6">
                     Manage projects end-to-end
                 </h2>
@@ -308,8 +498,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-colors">
-                    <div class="w-12 h-12 orange-gradient rounded-xl flex items-center justify-center mb-6 transition-colors">
+                <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">
                         <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>
@@ -323,8 +513,8 @@
                 </div>
                 
                 <!-- Project 2 -->
-                <div class="bg-gray-50 rounded-2xl p-8 hover:bg-orange-50 transition-colors">
-                    <div class="w-12 h-12 orange-gradient rounded-xl flex items-center justify-center mb-6 transition-colors">
+                <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">
                         <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>
@@ -338,8 +528,8 @@
                 </div>
                 
                 <!-- Project 3 -->
-                <div class="bg-gray-50 rounded-2xl p-8 hover:bg-orange-50 transition-colors">
-                    <div class="w-12 h-12 orange-gradient rounded-xl flex items-center justify-center mb-6 transition-colors">
+                <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">
                         <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>
@@ -359,7 +549,7 @@
     <section id="about" class="py-24 bg-gray-50 transition-colors duration-300">
         <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>
+                <div class="scroll-animate">
                     <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
                         Built for developers
                     </h2>
@@ -367,8 +557,8 @@
                         Every tool and workflow is designed with developer experience in mind. From lightning-fast performance to intuitive interfaces, everything is crafted to enhance your productivity.
                     </p>
                     <div class="space-y-6">
-                        <div class="flex items-start">
-                            <div class="flex-shrink-0 w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center mt-1 transition-colors">
+                        <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">
                                 <i data-feather="check" class="w-3 h-3 text-orange-600"></i>
                             </div>
                             <div class="ml-4">
@@ -376,8 +566,8 @@
                                 <p class="text-gray-600">Optimized for speed and efficiency to keep you in flow state.</p>
                             </div>
                         </div>
-                        <div class="flex items-start">
-                            <div class="flex-shrink-0 w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center mt-1 transition-colors">
+                        <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">
                                 <i data-feather="check" class="w-3 h-3 text-orange-600"></i>
                             </div>
                             <div class="ml-4">
@@ -385,8 +575,8 @@
                                 <p class="text-gray-600">Clean, minimal interfaces that get out of your way.</p>
                             </div>
                         </div>
-                        <div class="flex items-start">
-                            <div class="flex-shrink-0 w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center mt-1 transition-colors">
+                        <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">
                                 <i data-feather="check" class="w-3 h-3 text-orange-600"></i>
                             </div>
                             <div class="ml-4">
@@ -396,24 +586,24 @@
                         </div>
                     </div>
                 </div>
-                <div class="relative">
-                    <div class="bg-white rounded-2xl border border-orange-200 p-8 shadow-sm orange-shadow transition-colors">
+                <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="space-y-4">
-                            <div class="flex items-center justify-between p-4 bg-orange-50 rounded-lg transition-colors">
+                            <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">
-                                    <div class="w-8 h-8 bg-gray-900 rounded-full flex items-center justify-center transition-colors">
+                                    <div class="w-8 h-8 bg-gray-900 rounded-full flex items-center justify-center transition-all hover:scale-110">
                                         <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">+340%</span>
+                                <span class="text-2xl font-bold text-orange-600 animate-pulse-slow">+340%</span>
                             </div>
                             <div class="grid grid-cols-2 gap-4">
-                                <div class="p-4 border border-orange-200 rounded-lg text-center transition-colors">
+                                <div class="p-4 border border-orange-200 rounded-lg text-center transition-all hover:bg-orange-50 hover:scale-105">
                                     <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-colors">
+                                <div class="p-4 border border-orange-200 rounded-lg text-center transition-all hover:bg-orange-50 hover:scale-105">
                                     <div class="text-2xl font-bold text-gray-900">95%</div>
                                     <div class="text-sm text-gray-600">Developer Satisfaction</div>
                                 </div>
@@ -428,7 +618,7 @@
     <!-- Contact Section -->
     <section id="contact" class="py-24 bg-white transition-colors duration-300">
         <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-16">
+            <div class="text-center mb-16 scroll-animate">
                 <h2 class="text-4xl font-bold text-gray-900 mb-6">
                     Let's build something great together
                 </h2>
@@ -437,27 +627,27 @@
                 </p>
             </div>
             
-            <form class="space-y-6 max-w-2xl mx-auto">
+            <form class="space-y-6 max-w-2xl mx-auto scroll-animate stagger-2">
                 <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-colors">
+                        <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">
                     </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-colors">
+                        <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">
                     </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-colors">
+                    <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">
                 </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-colors"></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 transition-all 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-colors">
+                    <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">
                         Send Message
                     </button>
                 </div>
@@ -480,13 +670,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-colors">
+                        <a href="#" class="text-gray-400 hover:text-white transition-all hover:scale-110">
                             <i data-feather="github" class="w-5 h-5"></i>
                         </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
+                        <a href="#" class="text-gray-400 hover:text-white transition-all hover:scale-110">
                             <i data-feather="twitter" class="w-5 h-5"></i>
                         </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
+                        <a href="#" class="text-gray-400 hover:text-white transition-all hover:scale-110">
                             <i data-feather="linkedin" class="w-5 h-5"></i>
                         </a>
                     </div>
@@ -566,6 +756,80 @@
                     }
                 });
             });
+            
+            // Intersection Observer for scroll animations
+            const observerOptions = {
+                root: null,
+                rootMargin: '0px',
+                threshold: 0.1
+            };
+            
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('animated');
+                    }
+                });
+            }, observerOptions);
+            
+            // Observe all elements with scroll-animate class
+            const scrollElements = document.querySelectorAll('.scroll-animate');
+            scrollElements.forEach(el => {
+                observer.observe(el);
+            });
+            
+            // Form submission animation
+            const form = document.querySelector('form');
+            if (form) {
+                form.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    
+                    const submitButton = form.querySelector('button[type="submit"]');
+                    const originalText = submitButton.innerHTML;
+                    
+                    // Show loading state
+                    submitButton.innerHTML = '<span class="loading"></span> Sending...';
+                    submitButton.disabled = true;
+                    
+                    // Simulate form submission
+                    setTimeout(() => {
+                        submitButton.innerHTML = '✓ Message Sent!';
+                        submitButton.classList.add('bg-green-500');
+                        
+                        // Reset form
+                        setTimeout(() => {
+                            form.reset();
+                            submitButton.innerHTML = originalText;
+                            submitButton.disabled = false;
+                            submitButton.classList.remove('bg-green-500');
+                        }, 2000);
+                    }, 1500);
+                });
+            }
+            
+            // Add parallax effect to hero section
+            window.addEventListener('scroll', () => {
+                const scrolled = window.pageYOffset;
+                const parallax = document.querySelector('#home');
+                if (parallax) {
+                    const speed = 0.5;
+                    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
+                });
+            });
         });
     </script>
 </body>