perbaiki sidebar di mobile - Follow Up Deployment

index.html

@@ -99,33 +99,26 @@
             }
         }
         
-        /* 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;
         }
+
+        /* Mobile menu transitions */
+        #mobileMenu {
+            transition: transform 0.3s ease-out;
+        }
+
+        #mobileMenuOverlay {
+            transition: opacity 0.3s ease;
+        }
+
+        /* Prevent scrolling when menu is open */
+        body.menu-open {
+            overflow: hidden;
+        }
         header {
             transition: all 0.3s ease;
             background: rgba(15, 23, 42, 0.8);
@@ -270,9 +263,24 @@
                 <a href="#svg" class="hover:text-primary transition-colors">SVG</a>
                 <a href="#micro" class="hover:text-primary transition-colors">Micro</a>
             </div>
-            <button class="md:hidden text-xl">
+            <button class="md:hidden text-xl" id="mobileMenuButton">
                 <i class="fas fa-bars"></i>
             </button>
+            <div class="md:hidden fixed inset-0 bg-black/50 z-40 hidden" id="mobileMenuOverlay"></div>
+            <div class="md:hidden fixed top-0 right-0 h-full w-64 bg-slate-800 shadow-lg z-50 transform translate-x-full transition-transform duration-300" id="mobileMenu">
+                <div class="flex justify-end p-4">
+                    <button id="closeMenuButton" class="text-xl">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <nav class="flex flex-col space-y-4 p-6">
+                    <a href="#home" class="hover:text-primary transition-colors">Home</a>
+                    <a href="#scroll" class="hover:text-primary transition-colors">Scroll</a>
+                    <a href="#css" class="hover:text-primary transition-colors">CSS</a>
+                    <a href="#svg" class="hover:text-primary transition-colors">SVG</a>
+                    <a href="#micro" class="hover:text-primary transition-colors">Micro</a>
+                </nav>
+            </div>
         </nav>
     </header>
 
@@ -317,6 +325,42 @@
         </div>
     </section>
 
+    <!-- Text Animations -->
+    <section class="py-20 bg-slate-900/50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl font-bold text-center mb-4">Text Animations</h2>
+            <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16">
+                Creative ways to animate text content
+            </p>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Gradient Text -->
+                <div class="card p-8 text-center">
+                    <h3 class="text-2xl font-semibold mb-6">Gradient Text</h3>
+                    <div class="text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                        Colorful Text
+                    </div>
+                </div>
+                
+                <!-- Typing Effect -->
+                <div class="card p-8 text-center">
+                    <h3 class="text-2xl font-semibold mb-6">Typing Effect</h3>
+                    <div class="text-3xl font-mono overflow-hidden whitespace-nowrap border-r-4 border-primary w-0 mx-auto animate-typing">
+                        Hello World!
+                    </div>
+                </div>
+                
+                <!-- Floating Text -->
+                <div class="card p-8 text-center">
+                    <h3 class="text-2xl font-semibold mb-6">Floating Text</h3>
+                    <div class="text-4xl font-bold animate-float">
+                        Float
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- Scroll Animations -->
     <section id="scroll" class="py-20">
         <div class="container mx-auto px-6">
@@ -569,6 +613,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">3D Transformations</h2>
+            <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16">
+                Adding depth and perspective to your elements
+            </p>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="card p-8 text-center transform transition-all duration-500 hover:rotate-y-180">
+                    <div class="text-5xl text-primary mb-6">
+                        <i class="fas fa-cube"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold mb-4">Rotate</h3>
+                    <p class="text-slate-300">3D rotation effects</p>
+                </div>
+                
+                <div class="card p-8 text-center transform transition-all duration-500 hover:perspective-1000 hover:translate-z-50">
+                    <div class="text-5xl text-primary mb-6">
+                        <i class="fas fa-arrows-alt"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold mb-4">Perspective</h3>
+                    <p class="text-slate-300">Depth perception</p>
+                </div>
+                
+                <div class="card p-8 text-center transform transition-all duration-500 hover:skew-y-12 hover:scale-110">
+                    <div class="text-5xl text-primary mb-6">
+                        <i class="fas fa-vector-square"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold mb-4">Skew</h3>
+                    <p class="text-slate-300">Distortion effects</p>
+                </div>
+            </div>
+        </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">
@@ -619,9 +699,39 @@
         </div>
     </section>
 
+    <!-- Background Animations -->
+    <section class="py-20 relative overflow-hidden">
+        <div class="absolute inset-0 z-0">
+            <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-primary/10 to-secondary/10 animate-pulse-slow"></div>
+            <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-primary/20 rounded-full filter blur-3xl animate-float"></div>
+            <div class="absolute bottom-1/4 right-1/4 w-64 h-64 bg-secondary/20 rounded-full filter blur-3xl animate-float delay-2000"></div>
+        </div>
+        
+        <div class="container mx-auto px-6 relative z-10">
+            <h2 class="text-4xl font-bold text-center mb-4">Background Animations</h2>
+            <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16">
+                Subtle animations that enhance the overall design
+            </p>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="card p-8">
+                    <h3 class="text-2xl font-semibold mb-6">Gradient Pulse</h3>
+                    <div class="w-full h-48 rounded-xl bg-gradient-to-br from-primary/30 to-secondary/30 animate-pulse-slow"></div>
+                </div>
+                
+                <div class="card p-8">
+                    <h3 class="text-2xl font-semibold mb-6">Floating Elements</h3>
+                    <div class="relative w-full h-48 rounded-xl overflow-hidden">
+                        <div class="absolute top-8 left-8 w-16 h-16 bg-primary/50 rounded-full animate-float"></div>
+                        <div class="absolute bottom-8 right-8 w-16 h-16 bg-secondary/50 rounded-full animate-float delay-1000"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- Footer -->
-    <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>
+    <footer class="py-12 border-t border-slate-800 bg-gradient-to-b from-slate-900/50 to-slate-900 relative">
         <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">
@@ -651,6 +761,39 @@
     </footer>
 
     <script>
+        // Mobile menu functionality
+        const mobileMenuButton = document.getElementById('mobileMenuButton');
+        const closeMenuButton = document.getElementById('closeMenuButton');
+        const mobileMenu = document.getElementById('mobileMenu');
+        const mobileMenuOverlay = document.getElementById('mobileMenuOverlay');
+
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.remove('translate-x-full');
+            mobileMenuOverlay.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        });
+
+        closeMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.add('translate-x-full');
+            mobileMenuOverlay.classList.add('hidden');
+            document.body.style.overflow = '';
+        });
+
+        mobileMenuOverlay.addEventListener('click', () => {
+            mobileMenu.classList.add('translate-x-full');
+            mobileMenuOverlay.classList.add('hidden');
+            document.body.style.overflow = '';
+        });
+
+        // Close menu when clicking on nav links
+        document.querySelectorAll('#mobileMenu a').forEach(link => {
+            link.addEventListener('click', () => {
+                mobileMenu.classList.add('translate-x-full');
+                mobileMenuOverlay.classList.add('hidden');
+                document.body.style.overflow = '';
+            });
+        });
+
         // Enhanced animations
         // Typing animation
         const typingText = document.getElementById('typing-text');