Meerdere links op het menu laden niet zorg ervoor dat geen enkele link dood loopt - Follow Up Deployment

index.html

@@ -101,20 +101,20 @@
                     <h1 class="text-3xl font-bold">Juliette's <span class="text-green-300">Natuur</span> Kabouter Shop</h1>
                 </div>
                 <nav class="flex space-x-1 md:space-x-6">
-                    <a href="index.html" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Home</a>
-                    <a href="kabouters.html" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Kabouters</a>
-                    <a href="accessoires.html" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Accessoires</a>
-                    <a href="collecties.html" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Collecties</a>
+                    <a href="#home" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Home</a>
+                    <a href="#kabouters" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Kabouters</a>
+                    <a href="#accessoires" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Accessoires</a>
+                    <a href="#collecties" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Collecties</a>
                     <a href="#over-ons" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Over Ons</a>
-                    <a href="contact.html" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Contact</a>
-                    <a href="blog.html" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Blog</a>
+                    <a href="#contact" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Contact</a>
+                    <a href="#blog" class="px-3 py-2 rounded-lg hover:bg-green-600 transition">Blog</a>
                 </nav>
             </div>
         </div>
     </header>
 
     <!-- Hero sectie met bewegende kabouter -->
-    <section class="bg-gradient-to-br from-green-100 to-green-50 py-16 border-t-2 border-black">
+    <section id="home" class="bg-gradient-to-br from-green-100 to-green-50 py-16 border-t-2 border-black">
         <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
             <div class="md:w-1/2 mb-8 md:mb-0">
                 <h2 class="text-4xl md:text-5xl font-bold text-green-800 mb-4">Ontdek onze <span class="text-red-500">kleinste</span> tuinkabouters!</h2>
@@ -140,7 +140,7 @@
     </section>
 
     <!-- Populaire kabouters -->
-    <section class="py-12 bg-green-50 border-t-2 border-b-2 border-black">
+    <section id="kabouters" class="py-12 bg-green-50 border-t-2 border-b-2 border-black">
         <div class="container mx-auto px-4">
             <h2 class="text-3xl font-bold text-center text-green-800 mb-12">Onze <span class="text-red-500">Kleinste</span> Kabouter Sterren</h2>
             
@@ -215,7 +215,7 @@
     </section>
 
     <!-- Kabouter accessoires -->
-    <section class="py-12 bg-green-100 border-t-2 border-b-2 border-black">
+    <section id="accessoires" class="py-12 bg-green-100 border-t-2 border-b-2 border-black">
         <div class="container mx-auto px-4">
             <h2 class="text-3xl font-bold text-center text-green-800 mb-12">Kabouter <span class="text-red-500">Accessoires</span></h2>
             
@@ -269,7 +269,7 @@
     </section>
 
     <!-- Testimonials -->
-    <section class="py-12 bg-green-50 border-t-2 border-b-2 border-black">
+    <section id="collecties" class="py-12 bg-green-50 border-t-2 border-b-2 border-black">
         <div class="container mx-auto px-4">
             <h2 class="text-3xl font-bold text-center text-green-800 mb-12">Wat zeggen onze <span class="text-red-500">klanten</span>?</h2>
             
@@ -390,6 +390,51 @@
         </div>
     </section>
 
+    <!-- Contact Sectie -->
+    <section id="contact" class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center text-green-800 mb-8">Contact</h2>
+            <div class="max-w-2xl mx-auto bg-green-50 p-8 rounded-lg shadow-md">
+                <form class="space-y-4">
+                    <div>
+                        <label class="block text-green-700 mb-2">Naam</label>
+                        <input type="text" class="w-full px-4 py-2 rounded-lg border border-green-300 focus:outline-none focus:ring-2 focus:ring-green-500">
+                    </div>
+                    <div>
+                        <label class="block text-green-700 mb-2">Email</label>
+                        <input type="email" class="w-full px-4 py-2 rounded-lg border border-green-300 focus:outline-none focus:ring-2 focus:ring-green-500">
+                    </div>
+                    <div>
+                        <label class="block text-green-700 mb-2">Bericht</label>
+                        <textarea rows="4" class="w-full px-4 py-2 rounded-lg border border-green-300 focus:outline-none focus:ring-2 focus:ring-green-500"></textarea>
+                    </div>
+                    <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-bold w-full">
+                        Verstuur Bericht
+                    </button>
+                </form>
+            </div>
+        </div>
+    </section>
+
+    <!-- Blog Sectie -->
+    <section id="blog" class="py-16 bg-green-50">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center text-green-800 mb-8">Kabouter Blog</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <h3 class="text-xl font-bold text-green-700 mb-2">Kabouter Verzorgingstips</h3>
+                    <p class="text-gray-600 mb-4">Leer hoe je je kabouters het beste kunt onderhouden en schoonmaken.</p>
+                    <a href="#" class="text-green-600 font-bold hover:text-green-800">Lees meer →</a>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <h3 class="text-xl font-bold text-green-700 mb-2">Kabouter Plaatsing Ideeën</h3>
+                    <p class="text-gray-600 mb-4">Creatieve manieren om je kabouters in huis en tuin te plaatsen.</p>
+                    <a href="#" class="text-green-600 font-bold hover:text-green-800">Lees meer →</a>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- Footer -->
     <footer class="bg-gradient-to-br from-green-900 to-green-700 text-white py-12 rounded-t-3xl">
         <div class="container mx-auto px-4">