tamabahkan lagiii - Follow Up Deployment

index.html

@@ -22,6 +22,11 @@
                         'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                         'float': 'float 6s ease-in-out infinite',
                         'wave': 'wave 1.5s ease-in-out infinite',
+                        'shake': 'shake 0.5s ease-in-out infinite',
+                        'swing': 'swing 2s ease-in-out infinite',
+                        'flash': 'flash 2s ease-in-out infinite',
+                        'jump': 'jump 0.5s ease infinite',
+                        'fade-in': 'fadeIn 1s ease-in forwards',
                     },
                     keyframes: {
                         float: {
@@ -32,6 +37,22 @@
                             '0%, 100%': { transform: 'rotate(0deg)' },
                             '25%': { transform: 'rotate(5deg)' },
                             '75%': { transform: 'rotate(-5deg)' },
+                        },
+                        shake: {
+                            '0%, 100%': { transform: 'translateX(0)' },
+                            '10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-5px)' },
+                            '20%, 40%, 60%, 80%': { transform: 'translateX(5px)' },
+                        },
+                        swing: {
+                            '0%': { transform: 'rotate(0deg)' },
+                            '25%': { transform: 'rotate(10deg)' },
+                            '50%': { transform: 'rotate(-10deg)' },
+                            '75%': { transform: 'rotate(5deg)' },
+                            '100%': { transform: 'rotate(0deg)' },
+                        },
+                        flash: {
+                            '0%, 50%, 100%': { opacity: 1 },
+                            '25%, 75%': { opacity: 0.3 },
                         }
                     }
                 }
@@ -39,12 +60,81 @@
         }
     </script>
     <style>
+        html {
+            scroll-behavior: smooth;
+        }
+        
+        /* Particles animation */
+        .particles {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            overflow: hidden;
+        }
+        
+        .particle {
+            position: absolute;
+            background: rgba(255, 255, 255, 0.5);
+            border-radius: 50%;
+            pointer-events: none;
+        }
+        
+        @keyframes float-up {
+            0% {
+                transform: translateY(100vh) scale(0);
+                opacity: 0;
+            }
+            10% {
+                opacity: 1;
+            }
+            90% {
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(-10vh) scale(1);
+                opacity: 0;
+            }
+        }
+        
+        /* Wave animation */
+        .wave {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 100px;
+            background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%236366f1" opacity=".25"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%238b5cf6" opacity=".5"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,236.83-84.81V0Z" fill="%23e2e8f0"/></svg>');
+            background-size: cover;
+            background-repeat: no-repeat;
+            animation: wave 10s linear infinite;
+        }
+        
+        @keyframes wave {
+            0% {
+                background-position-x: 0;
+            }
+            100% {
+                background-position-x: 1000px;
+            }
+        }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
             font-family: 'Poppins', sans-serif;
         }
+        header {
+            transition: all 0.3s ease;
+            background: rgba(15, 23, 42, 0.8);
+            backdrop-filter: blur(10px);
+        }
+        header.scrolled {
+            padding: 0.5rem 0;
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+        }
         
         body {
             background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
@@ -133,6 +223,24 @@
             }
         }
         
+        @keyframes jump {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-20px);
+            }
+        }
+        
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+        
         .bounce-ball {
             animation: bounce 2s infinite;
         }
@@ -150,6 +258,7 @@
 <body>
     <!-- Header -->
     <header class="fixed w-full z-50">
+        <div class="h-1 bg-gradient-to-r from-primary to-secondary fixed top-0 left-0 right-0 z-50 origin-left scale-x-0" id="progressBar"></div>
         <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
             <div class="text-2xl font-bold">
                 <span class="gradient-text">Anim</span>Magic
@@ -168,10 +277,18 @@
     </header>
 
     <!-- Hero Section -->
-    <section id="home" class="min-h-screen flex items-center hero-pattern">
+    <section id="home" class="min-h-screen flex items-center hero-pattern relative overflow-hidden">
+        <!-- Particles background -->
+        <div class="particles" id="particles"></div>
+        <div class="absolute inset-0 z-0">
+            <div class="absolute top-20 left-20 w-64 h-64 bg-primary/10 rounded-full filter blur-3xl animate-float"></div>
+            <div class="absolute bottom-20 right-20 w-64 h-64 bg-secondary/10 rounded-full filter blur-3xl animate-float delay-2000"></div>
+            <div class="absolute top-1/2 left-1/4 w-32 h-32 bg-primary/20 rounded-full filter blur-xl animate-pulse-slow"></div>
+        </div>
         <div class="container mx-auto px-6 py-20 text-center">
             <h1 class="text-5xl md:text-7xl font-bold mb-6">
-                <span class="gradient-text">Smooth Animations</span><br>for Modern Web
+                <span class="gradient-text typing" id="typing-text"></span><br>
+                <span class="typing-cursor">|</span>
             </h1>
             <p class="text-xl max-w-3xl mx-auto mb-10 text-slate-300">
                 Enhance user experience with beautiful animations that bring your website to life
@@ -210,7 +327,7 @@
             
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <!-- Card 1 -->
-                <div class="card p-8 transform transition-all duration-500 opacity-0 translate-y-10" data-scroll>
+                <div class="card p-8 transform transition-all duration-500 opacity-0 translate-y-10" data-scroll data-delay="100">
                     <div class="text-5xl text-primary mb-6">
                         <i class="fas fa-fade"></i>
                     </div>
@@ -268,7 +385,8 @@
     </section>
 
     <!-- CSS Animations -->
-    <section id="css" class="py-20">
+    <section id="css" class="py-20 relative">
+        <div class="absolute -bottom-20 left-0 right-0 h-20 bg-gradient-to-t from-slate-900 to-transparent z-10"></div>
         <div class="container mx-auto px-6">
             <h2 class="text-4xl font-bold text-center mb-4">CSS Animations</h2>
             <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16">
@@ -350,7 +468,7 @@
             
             <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                 <div>
-                    <svg viewBox="0 0 200 200" class="w-full max-w-md mx-auto">
+                    <svg viewBox="0 0 200 200" class="w-full max-w-md mx-auto hover:scale-105 transition-transform duration-300 cursor-pointer">
                         <circle cx="100" cy="100" r="80" fill="none" stroke="#6366f1" stroke-width="4" stroke-dasharray="1000" stroke-dashoffset="1000">
                             <animate attributeName="stroke-dashoffset" from="1000" to="0" dur="2s" fill="freeze" repeatCount="indefinite" />
                         </circle>
@@ -406,7 +524,8 @@
                 <div class="card p-8">
                     <h3 class="text-2xl font-semibold mb-6">Like Button</h3>
                     <div class="flex justify-center">
-                        <button id="likeButton" class="w-16 h-16 rounded-full bg-slate-800 flex items-center justify-center group">
+                        <button id="likeButton" class="w-16 h-16 rounded-full bg-slate-800 flex items-center justify-center group relative overflow-hidden">
+                            <div class="absolute inset-0 bg-red-500 opacity-0 scale-0 group-hover:opacity-10 group-hover:scale-100 transition-all duration-300 rounded-full"></div>
                             <i class="fas fa-heart text-3xl text-slate-400 group-hover:text-red-500 transition-colors"></i>
                         </button>
                     </div>
@@ -450,6 +569,42 @@
         </div>
     </section>
 
+    <!-- Advanced Animations -->
+    <section class="py-20 bg-gradient-to-b from-slate-900 to-slate-800">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl font-bold text-center mb-4">Advanced Animations</h2>
+            <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16">
+                More complex animation effects for special moments
+            </p>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="card p-8 text-center group">
+                    <div class="w-24 h-24 mx-auto mb-6 bg-primary rounded-full flex items-center justify-center animate-shake group-hover:animate-swing">
+                        <i class="fas fa-bell text-3xl text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Shake & Swing</h3>
+                    <p class="text-slate-300">Perfect for notification alerts</p>
+                </div>
+                
+                <div class="card p-8 text-center group">
+                    <div class="w-24 h-24 mx-auto mb-6 bg-secondary rounded-full flex items-center justify-center animate-flash group-hover:animate-jump">
+                        <i class="fas fa-bolt text-3xl text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Flash & Jump</h3>
+                    <p class="text-slate-300">Great for important actions</p>
+                </div>
+                
+                <div class="card p-8 text-center group">
+                    <div class="w-24 h-24 mx-auto mb-6 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center animate-float group-hover:animate-spin-slow">
+                        <i class="fas fa-cog text-3xl text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Float & Spin</h3>
+                    <p class="text-slate-300">Ideal for loading indicators</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- Canvas Animation -->
     <section class="py-20">
         <div class="container mx-auto px-6">
@@ -465,7 +620,9 @@
     </section>
 
     <!-- Footer -->
-    <footer class="py-12 border-t border-slate-800">
+    <footer class="py-12 border-t border-slate-800 bg-gradient-to-b from-slate-900/50 to-slate-900 relative overflow-hidden">
+        <div class="wave"></div>
+        <div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent"></div>
         <div class="container mx-auto px-6 text-center">
             <div class="text-3xl font-bold mb-6">
                 <span class="gradient-text">Anim</span>Magic
@@ -474,17 +631,17 @@
                 Creating beautiful web experiences with smooth animations and interactions
             </p>
             <div class="flex justify-center space-x-6 mb-8">
-                <a href="#" class="text-slate-400 hover:text-primary transition-colors">
-                    <i class="fab fa-twitter text-xl"></i>
+                <a href="#" class="text-slate-400 hover:text-primary transition-colors group">
+                    <i class="fab fa-twitter text-xl group-hover:animate-bounce-slow"></i>
                 </a>
-                <a href="#" class="text-slate-400 hover:text-primary transition-colors">
-                    <i class="fab fa-github text-xl"></i>
+                <a href="#" class="text-slate-400 hover:text-primary transition-colors group">
+                    <i class="fab fa-github text-xl group-hover:animate-float"></i>
                 </a>
-                <a href="#" class="text-slate-400 hover:text-primary transition-colors">
-                    <i class="fab fa-linkedin text-xl"></i>
+                <a href="#" class="text-slate-400 hover:text-primary transition-colors group">
+                    <i class="fab fa-linkedin text-xl group-hover:animate-pulse-slow"></i>
                 </a>
-                <a href="#" class="text-slate-400 hover:text-primary transition-colors">
-                    <i class="fab fa-codepen text-xl"></i>
+                <a href="#" class="text-slate-400 hover:text-primary transition-colors group">
+                    <i class="fab fa-codepen text-xl group-hover:animate-spin-slow"></i>
                 </a>
             </div>
             <p class="text-slate-500 text-sm">
@@ -494,8 +651,84 @@
     </footer>
 
     <script>
-        // Scroll animations
+        // Enhanced animations
+        // Typing animation
+        const typingText = document.getElementById('typing-text');
+        const texts = ["Smooth Animations", "Interactive Elements", "Engaging UX", "Modern Web"];
+        let textIndex = 0;
+        let charIndex = 0;
+        let isDeleting = false;
+        
+        function type() {
+            const currentText = texts[textIndex];
+            
+            if (isDeleting) {
+                typingText.textContent = currentText.substring(0, charIndex - 1);
+                charIndex--;
+            } else {
+                typingText.textContent = currentText.substring(0, charIndex + 1);
+                charIndex++;
+            }
+            
+            if (!isDeleting && charIndex === currentText.length) {
+                setTimeout(() => isDeleting = true, 1000);
+            } else if (isDeleting && charIndex === 0) {
+                isDeleting = false;
+                textIndex = (textIndex + 1) % texts.length;
+            }
+            
+            setTimeout(type, isDeleting ? 50 : 100);
+        }
+        
+        // Start typing animation
+        setTimeout(type, 1000);
+        
+        // Particles animation
+        function createParticles() {
+            const particlesContainer = document.getElementById('particles');
+            const particleCount = Math.floor(window.innerWidth / 10);
+            
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.classList.add('particle');
+                
+                const size = Math.random() * 5 + 1;
+                const posX = Math.random() * window.innerWidth;
+                const delay = Math.random() * 10;
+                const duration = Math.random() * 20 + 10;
+                
+                particle.style.width = `${size}px`;
+                particle.style.height = `${size}px`;
+                particle.style.left = `${posX}px`;
+                particle.style.animation = `float-up ${duration}s linear ${delay}s infinite`;
+                particle.style.opacity = Math.random() * 0.5 + 0.1;
+                
+                particlesContainer.appendChild(particle);
+            }
+        }
+        
+        createParticles();
         document.addEventListener('DOMContentLoaded', function() {
+            // Header scroll effect
+            const header = document.querySelector('header');
+            window.addEventListener('scroll', () => {
+                if (window.scrollY > 50) {
+                    header.classList.add('scrolled');
+                } else {
+                    header.classList.remove('scrolled');
+                }
+            });
+
+            // Initialize GSAP for smoother animations
+            const gsap = window.gsap;
+            if (gsap) {
+                gsap.from(".hero-content", {
+                    duration: 1.5,
+                    y: 50,
+                    opacity: 0,
+                    ease: "power3.out"
+                });
+            }
             // Scroll animation for cards
             const scrollElements = document.querySelectorAll('[data-scroll]');
             
@@ -574,6 +807,16 @@
                 }, 600);
             });
             
+            // Scroll progress bar
+            const progressBar = document.getElementById('progressBar');
+            window.addEventListener('scroll', () => {
+                const scrollTop = document.documentElement.scrollTop;
+                const scrollHeight = document.documentElement.scrollHeight;
+                const clientHeight = document.documentElement.clientHeight;
+                const scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100;
+                progressBar.style.transform = `scaleX(${scrollPercent / 100})`;
+            });
+
             // Canvas animation
             const canvas = document.getElementById('animationCanvas');
             const ctx = canvas.getContext('2d');