Please just keep blank space between the header and footer; however, add a looping animation.

index.html

@@ -71,16 +71,21 @@
 </div>
     </nav>
     <!-- Hero Section -->
-    <section class="hero-gradient text-white py-20">
-        <div class="container mx-auto px-4 text-center">
-            <h1 class="text-4xl md:text-5xl font-bold mb-6">CloudShare Haven</h1>
-            <p class="text-xl md:text-2xl mb-8">Simple, secure file sharing</p>
+    <section class="hero-gradient text-white py-20 relative overflow-hidden">
+        <div class="container mx-auto px-4 text-center relative z-10">
+            <h1 class="text-4xl md:text-5xl font-bold mb-6 animate-float">CloudShare Haven</h1>
+            <p class="text-xl md:text-2xl mb-8 animate-float-delay">Simple, secure file sharing</p>
+        </div>
+        <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
+            <div class="bubble absolute rounded-full bg-white opacity-10 animate-bubble"></div>
+            <div class="bubble absolute rounded-full bg-white opacity-10 animate-bubble-delay"></div>
+            <div class="bubble absolute rounded-full bg-white opacity-10 animate-bubble-delay2"></div>
         </div>
     </section>
 
     <!-- File Upload Section -->
     <section class="py-12 bg-white">
-        <div class="container mx-auto px-4 max-w-4xl">
+<div class="container mx-auto px-4 max-w-4xl">
             <div class="border-2 border-dashed border-primary rounded-lg p-8 text-center">
                 <i data-feather="upload-cloud" class="w-16 h-16 mx-auto text-primary mb-4"></i>
                 <h3 class="text-xl font-bold mb-2">Drag & drop files here</h3>
@@ -269,10 +274,41 @@
             </div>
         </div>
     </footer>
+    <style>
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+        @keyframes bubble {
+            0% { transform: translateY(0) scale(0.5); opacity: 0; }
+            50% { opacity: 0.1; }
+            100% { transform: translateY(-100vh) scale(1.5); opacity: 0; }
+        }
+        .animate-float {
+            animation: float 3s ease-in-out infinite;
+        }
+        .animate-float-delay {
+            animation: float 3s ease-in-out 0.5s infinite;
+        }
+        .animate-bubble {
+            animation: bubble 15s linear infinite;
+        }
+        .animate-bubble-delay {
+            animation: bubble 15s linear 5s infinite;
+        }
+        .animate-bubble-delay2 {
+            animation: bubble 15s linear 10s infinite;
+        }
+        .bubble {
+            width: 100px;
+            height: 100px;
+            bottom: -100px;
+        }
+    </style>
 
     <!-- Cookie Consent -->
     <div id="cookie-consent" class="fixed bottom-0 left-0 right-0 bg-white shadow-lg p-4 md:p-6 hidden">
-        <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
+<div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
             <div class="mb-4 md:mb-0 md:mr-6">
                 <p class="text-sm md:text-base">We gebruiken cookies om ervoor te zorgen dat onze site zo soepel mogelijk draait. Als je doorgaat met het gebruiken van deze site, gaan we ervan uit dat je ermee instemt. <a href="https://zorgvooronssamen.nl/privacy-verklaring/" class="text-primary hover:underline">Privacybeleid</a></p>
             </div>
@@ -307,9 +343,15 @@
             localStorage.setItem('cookie-consent', 'true');
             document.getElementById('cookie-consent').classList.add('hidden');
         });
-
         // Initialize feather icons
         feather.replace();
+
+        // Random bubble positioning
+        document.querySelectorAll('.bubble').forEach(bubble => {
+            bubble.style.left = `${Math.random() * 100}%`;
+            bubble.style.width = `${50 + Math.random() * 100}px`;
+            bubble.style.height = bubble.style.width;
+        });
     </script>
 </body>
 </html>