about.html

@@ -377,14 +377,22 @@
               <span class="wave"></span>
             </div>
             <div class="menu-outline" aria-hidden="true"></div>
-            <div class="relative" id="menuGrid">
+            <div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
-              <img src="assets/icons/closed_petal.png" alt="closed petal" class="w-6 h-6" />
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
             </div>
             <div
               id="menuPetal"
               class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
             >
-              <img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
+              <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
             </div>
           </div>
         </div>
@@ -484,7 +492,7 @@
     </section>
 
       <!-- Dream Design Deliver Section -->
-      <section class="py-20 bg-kh3-black text-white relative dream-design-deliver hidden md:block">
+      <section class="py-20 bg-kh3-black text-white relative dream-design-deliver">
       <div class="container mx-auto px-8 max-w-6xl">
           <div class="text-center">
             <!-- Elegant horizontal layout -->

contact.html

@@ -379,14 +379,22 @@
             <span class="wave"></span>
           </div>
           <div class="menu-outline" aria-hidden="true"></div>
-          <div class="relative" id="menuGrid">
+          <div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
-            <img src="assets/icons/closed_petal.png" alt="closed petal" class="w-6 h-6" />
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
           </div>
           <div
             id="menuPetal"
             class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
           >
-                          <img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
+            <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
           </div>
         </div>
         
@@ -953,6 +961,142 @@
       }
     </script>
 
-    <script src="js/contact.js"></script>
+      // Form submission
+      const contactForm = document.getElementById("contactForm");
+      if (contactForm) {
+        contactForm.addEventListener("submit", (e) => {
+          e.preventDefault();
+          // Add your form submission logic here
+          alert(
+            "Thank you for your message! We'll get back to you within 24 hours."
+          );
+          contactForm.reset();
+        });
+      }
+
+      // Staggered entrance for hero and sections
+      window.addEventListener("load", () => {
+        const heroTitle = document.querySelector(
+          "section.relative h1.masked-reveal"
+        );
+        const heroSub = document.querySelector("section.relative div.text-xl");
+        if (heroTitle) {
+          heroTitle.style.animation =
+            "maskReveal 900ms ease-out 150ms forwards";
+        }
+        if (heroSub) {
+          heroSub.style.opacity = "0";
+          heroSub.style.animation = "fadeUp 700ms ease-out 320ms forwards";
+        }
+        const contactSection = document.querySelector("section.py-20.bg-white");
+        if (contactSection) {
+          contactSection.style.opacity = "0";
+          contactSection.style.animation =
+            "fadeUp 800ms ease-out 600ms forwards";
+        }
+        const mapSection = document.querySelector("section.py-20.bg-kh3-black");
+        if (mapSection) {
+          mapSection.style.opacity = "0";
+          mapSection.style.animation = "fadeUp 800ms ease-out 850ms forwards";
+        }
+      });
+
+      // Auto-scroll to contact section after 2.5 seconds with custom smooth animation
+      setTimeout(() => {
+        const contactSection = document.querySelector("section:nth-of-type(2)"); // Contact Section
+        if (contactSection) {
+          const targetPosition = contactSection.offsetTop;
+          const startPosition = window.pageYOffset;
+          const distance = targetPosition - startPosition;
+          const duration = 2000; // 2 seconds for the scroll animation
+          let start = null;
+
+          function animation(currentTime) {
+            if (start === null) start = currentTime;
+            const timeElapsed = currentTime - start;
+            const run = easeInOutCubic(
+              timeElapsed,
+              startPosition,
+              distance,
+              duration
+            );
+            window.scrollTo(0, run);
+            if (timeElapsed < duration) requestAnimationFrame(animation);
+          }
+
+          // Easing function for smooth animation
+          function easeInOutCubic(t, b, c, d) {
+            t /= d / 2;
+            if (t < 1) return (c / 2) * t * t * t + b;
+            t -= 2;
+            return (c / 2) * (t * t * t + 2) + b;
+          }
+
+          requestAnimationFrame(animation);
+        }
+      }, 2500);
+
+      // Page transition functionality
+      function handlePageTransition(e) {
+        e.preventDefault();
+        const targetUrl = e.currentTarget.href;
+        const transitionType = e.currentTarget.getAttribute('data-trans') || 'crossfade';
+
+        // Get all elements to animate out
+        const elementsToAnimate = [
+          document.querySelector('.hero-section'),
+          document.querySelector('.contact-form-section'),
+          document.querySelector('.map-section'),
+          document.querySelector('main')
+        ].filter(el => el);
+
+        // Animate elements out in order
+        elementsToAnimate.forEach((element, index) => {
+          setTimeout(() => {
+            if (element) {
+              element.style.animation = 'staggerFadeOut 0.6s ease-in-out forwards';
+            }
+          }, index * 100);
+        });
+
+        // Navigate after animations complete
+        setTimeout(() => {
+          window.location.href = targetUrl;
+        }, elementsToAnimate.length * 100 + 600);
+      }
+
+      // Add event listeners for page transitions
+      document.addEventListener('DOMContentLoaded', function() {
+        const transitionLinks = document.querySelectorAll('[data-trans]');
+        transitionLinks.forEach(link => {
+          link.addEventListener('click', handlePageTransition);
+        });
+      });
+
+      // Handle back/forward navigation
+      window.addEventListener('pageshow', function(event) {
+        if (event.persisted) {
+          // Page was loaded from cache (back/forward)
+          window.location.reload();
+        }
+      });
+    </script>
+    <script>
+      // Ensure clean state on back/forward cache restores
+      window.addEventListener('pageshow', () => {
+        const nav = document.getElementById('navMenu');
+        const wrap = document.getElementById('menuWrap');
+        if (nav) nav.classList.add('hidden');
+        if (wrap) wrap.classList.remove('open');
+      });
+
+      // Cleanup before bfcache snapshot
+      window.addEventListener('pagehide', () => {
+        const nav = document.getElementById('navMenu');
+        const wrap = document.getElementById('menuWrap');
+        if (nav) nav.classList.add('hidden');
+        if (wrap) wrap.classList.remove('open');
+      });
+    </script>
   </body>
 </html>

index.html

@@ -385,22 +385,25 @@
                 <span class="wave"></span>
               </div>
               <div class="menu-outline" aria-hidden="true"></div>
-              <div class="relative" id="menuGrid">
+              <div
-                <img
+                class="grid grid-cols-3 gap-1 w-6 h-6 relative"
-                  src="assets/icons/closed_petal.png"
+                id="menuGrid"
-                  alt="closed petal"
+              >
-                  class="w-6 h-6"
+                <span class="w-1 h-1 bg-white"></span>
-                />
+                <span class="w-1 h-1 bg-white"></span>
+                <span class="w-1 h-1 bg-white"></span>
+                <span class="w-1 h-1 bg-white"></span>
+                <span class="w-1 h-1 bg-white"></span>
+                <span class="w-1 h-1 bg-white"></span>
+                <span class="w-1 h-1 bg-white"></span>
+                <span class="w-1 h-1 bg-white"></span>
+                <span class="w-1 h-1 bg-white"></span>
               </div>
               <div
                 id="menuPetal"
                 class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
               >
-                <img
+                <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
-                  src="assets/icons/open_petal.png"
-                  alt="petal"
-                  class="w-8 h-8"
-                />
               </div>
             </div>
 

js/contact.js

@@ -1,63 +0,0 @@
-// Contact page specific scripts
-
-// Form submission
-document.addEventListener("DOMContentLoaded", () => {
-  const contactForm = document.getElementById("contactForm");
-  if (contactForm) {
-    contactForm.addEventListener("submit", (e) => {
-      e.preventDefault();
-      alert(
-        "Thank you for your message! We'll get back to you within 24 hours."
-      );
-      contactForm.reset();
-    });
-  }
-
-  // Staggered entrance for hero and sections
-  window.addEventListener("load", () => {
-    const heroTitle = document.querySelector(
-      "section.relative h1.masked-reveal"
-    );
-    const heroSub = document.querySelector("section.relative div.text-xl");
-    if (heroTitle) {
-      heroTitle.style.animation = "maskReveal 900ms ease-out 150ms forwards";
-    }
-    if (heroSub) {
-      heroSub.style.opacity = "0";
-      heroSub.style.animation = "fadeUp 700ms ease-out 320ms forwards";
-    }
-
-    const contactSectionFade = document.querySelector("section.py-20.bg-white");
-    if (contactSectionFade) {
-      contactSectionFade.style.opacity = "0";
-      contactSectionFade.style.animation =
-        "fadeUp 800ms ease-out 600ms forwards";
-    }
-
-    const mapSection = document.querySelector("section.py-20.bg-kh3-black");
-    if (mapSection) {
-      mapSection.style.opacity = "0";
-      mapSection.style.animation = "fadeUp 800ms ease-out 850ms forwards";
-    }
-  });
-
-  // Gentle auto-scroll like WHAT page: nudge ~1.1vh after 3s with easing
-  setTimeout(() => {
-    const startScroll = window.pageYOffset;
-    const targetScroll = window.innerHeight * 1.0;
-    const distance = targetScroll - startScroll;
-    const duration = 2000;
-    let start = null;
-
-    function animateScroll(ts) {
-      if (start === null) start = ts;
-      const elapsed = ts - start;
-      const progress = Math.min(elapsed / duration, 1);
-      const easeOutQuart = 1 - Math.pow(1 - progress, 4);
-      window.scrollTo(0, startScroll + distance * easeOutQuart);
-      if (progress < 1) requestAnimationFrame(animateScroll);
-    }
-
-    requestAnimationFrame(animateScroll);
-  }, 3000);
-});

js/main.js

@@ -21,49 +21,42 @@ function initNavigation() {
 
   // Only initialize if elements exist
   if (menuToggle && navMenu && menuGrid) {
-    console.log("Navigation elements found:", {
-      menuToggle,
-      navMenu,
-      menuGrid,
-    });
     let isMenuOpen = false;
-    const menuPetal = document.getElementById("menuPetal");
-    console.log("menuPetal element:", menuPetal);
-    const menuWrap = document.getElementById("menuWrap");
-
-    // Force a known initial state: closed menu shows closed petal
-    if (menuWrap) menuWrap.classList.remove("open");
-    try {
-      if (menuGrid) menuGrid.style.opacity = "1";
-      if (menuPetal) menuPetal.style.opacity = "0";
-    } catch (e) {}
 
     menuToggle.addEventListener("click", () => {
-      console.log("Menu clicked! Current state:", isMenuOpen);
-      console.log("menuPetal element:", menuPetal);
-      console.log("navMenu element:", navMenu);
-
       if (isMenuOpen) {
         // Close menu
-        console.log("Closing menu...");
         navMenu.classList.add("hidden");
-        // Show closed petal, hide open petal
+        // Transform back to full grid
-        if (menuPetal) {
+        menuGrid.innerHTML = `
-          menuGrid.style.opacity = "1";
+          <span class="w-1 h-1 bg-white rounded-full"></span>
-          menuPetal.style.opacity = "0";
+          <span class="w-1 h-1 bg-white rounded-full"></span>
-          console.log("Showing closed petal, hiding open petal");
+          <span class="w-1 h-1 bg-white rounded-full"></span>
-        }
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+        `;
+        menuGrid.style.transform = "scale(1)";
         isMenuOpen = false;
       } else {
         // Open menu
-        console.log("Opening menu...");
         navMenu.classList.remove("hidden");
-        // Hide closed petal, show open petal
+        // Transform to compressed state - only center 5 dots, corner dots disappear
-        if (menuPetal) {
+        menuGrid.innerHTML = `
-          menuGrid.style.opacity = "0";
+          <span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
-          menuPetal.style.opacity = "1";
+          <span class="w-1 h-1 bg-white rounded-full"></span>
-          console.log("Hiding closed petal, showing open petal");
+          <span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
-        }
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
+        `;
+        menuGrid.style.transform = "scale(0.8)";
         isMenuOpen = true;
       }
     });
@@ -72,11 +65,18 @@ function initNavigation() {
     document.addEventListener("click", (e) => {
       if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
         navMenu.classList.add("hidden");
-        // Show closed petal, hide open petal
+        // Transform back to grid
-        if (menuPetal) {
+        menuGrid.innerHTML = `
-          menuGrid.style.opacity = "1";
+          <span class="w-1 h-1 bg-white rounded-full"></span>
-          menuPetal.style.opacity = "0";
+          <span class="w-1 h-1 bg-white rounded-full"></span>
-        }
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+        `;
         isMenuOpen = false;
     }
   });
@@ -85,11 +85,18 @@ function initNavigation() {
   navLinks.forEach((link) => {
     link.addEventListener("click", function () {
         navMenu.classList.add("hidden");
-        // Show closed petal, hide open petal
+        // Transform back to grid
-        if (menuPetal) {
+        menuGrid.innerHTML = `
-          menuGrid.style.opacity = "1";
+          <span class="w-1 h-1 bg-white rounded-full"></span>
-          menuPetal.style.opacity = "0";
+          <span class="w-1 h-1 bg-white rounded-full"></span>
-        }
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+        `;
         isMenuOpen = false;
       });
   });
@@ -98,11 +105,18 @@ function initNavigation() {
   document.addEventListener("keydown", function (e) {
       if (e.key === "Escape" && !navMenu.classList.contains("hidden")) {
         navMenu.classList.add("hidden");
-        // Show closed petal, hide open petal
+        // Transform back to grid
-        if (menuPetal) {
+        menuGrid.innerHTML = `
-          menuGrid.style.opacity = "1";
+          <span class="w-1 h-1 bg-white rounded-full"></span>
-          menuPetal.style.opacity = "0";
+          <span class="w-1 h-1 bg-white rounded-full"></span>
-        }
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+        `;
         isMenuOpen = false;
       }
     });

projects.html

@@ -376,22 +376,22 @@
             <span class="wave"></span>
           </div>
           <div class="menu-outline" aria-hidden="true"></div>
-          <div class="relative" id="menuGrid">
+          <div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
-            <img
+            <span class="w-1 h-1 bg-white"></span>
-              src="assets/icons/closed_petal.png"
+            <span class="w-1 h-1 bg-white"></span>
-              alt="closed petal"
+            <span class="w-1 h-1 bg-white"></span>
-              class="w-6 h-6"
+            <span class="w-1 h-1 bg-white"></span>
-            />
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
           </div>
           <div
             id="menuPetal"
             class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
           >
-            <img
+            <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
-              src="assets/icons/open_petal.png"
-              alt="petal"
-              class="w-8 h-8"
-            />
           </div>
         </div>
 

services.html

@@ -560,14 +560,22 @@
             <span class="wave"></span>
           </div>
           <div class="menu-outline" aria-hidden="true"></div>
-          <div class="relative" id="menuGrid">
+          <div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
-            <img src="assets/icons/closed_petal.png" alt="closed petal" class="w-6 h-6" />
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
           </div>
           <div
             id="menuPetal"
             class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
           >
-                          <img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
+            <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
           </div>
         </div>
         

who.html

@@ -354,9 +354,12 @@
     <!-- Static Logo and Menu -->
     <div class="fixed top-6 left-8 z-40">
           <div class="flex items-center gap-3">
-        <a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
+        <img
-          <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
+                      src="assets/images/kh3_logo.png"
-        </a>
+          alt="KH3"
+          class="w-12 h-12"
+        />
+        
           </div>
     </div>
 
@@ -365,7 +368,7 @@
       class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
     >
       <div class="cursor-pointer" id="menuToggle">
-        <!-- Desktop view: menuWrap with waves and outline (wrapped like WHY page) -->
+        <!-- Desktop view: menuWrap with waves and outline -->
         <div class="relative inline-block hidden md:block" id="menuWrap">
           <div class="menu-waves" aria-hidden="true">
             <span class="wave"></span>
@@ -373,14 +376,22 @@
             <span class="wave"></span>
           </div>
           <div class="menu-outline" aria-hidden="true"></div>
-          <div class="relative z-20" id="menuGrid" style="opacity: 1;">
+          <div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
-            <img src="assets/icons/closed_petal.png" alt="closed petal" class="block w-6 h-6" />
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
+            <span class="w-1 h-1 bg-white"></span>
           </div>
           <div
             id="menuPetal"
-            class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity z-0"
+            class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
           >
-            <img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
+            <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
           </div>
         </div>
         
@@ -1705,12 +1716,16 @@
         const grid = document.getElementById("menuGrid");
         if (nav) nav.classList.add("hidden");
         if (grid) {
-          // Ensure closed state on snapshot
+          grid.innerHTML = `
-          grid.style.opacity = "1";
+            <span class=\"w-1 h-1 bg-white rounded-full\"></span>
-          const wrap = document.getElementById("menuWrap");
+            <span class=\"w-1 h-1 bg-white rounded-full\"></span>
-          if (wrap) wrap.classList.remove("open");
+            <span class=\"w-1 h-1 bg-white rounded-full\"></span>
-          const petal = document.getElementById("menuPetal");
+            <span class=\"w-1 h-1 bg-white rounded-full\"></span>
-          if (petal) petal.style.opacity = "0";
+            <span class=\"w-1 h-1 bg-white rounded-full\"></span>
+            <span class=\"w-1 h-1 bg-white rounded-full\"></span>
+            <span class=\"w-1 h-1 bg-white rounded-full\"></span>
+            <span class=\"w-1 h-1 bg-white rounded-full\"></span>
+            <span class=\"w-1 h-1 bg-white rounded-full\"></span>`;
         }
       });
 
@@ -1724,12 +1739,16 @@
         const grid = document.getElementById("menuGrid");
         if (nav) nav.classList.add("hidden");
         if (grid) {
-          // Ensure closed state on restore
+          grid.innerHTML = `
-          grid.style.opacity = "1";
+            <span class="w-1 h-1 bg-white rounded-full"></span>
-          const wrap = document.getElementById("menuWrap");
+            <span class="w-1 h-1 bg-white rounded-full"></span>
-          if (wrap) wrap.classList.remove("open");
+            <span class="w-1 h-1 bg-white rounded-full"></span>
-          const petal = document.getElementById("menuPetal");
+            <span class="w-1 h-1 bg-white rounded-full"></span>
-          if (petal) petal.style.opacity = "0";
+            <span class="w-1 h-1 bg-white rounded-full"></span>
+            <span class="w-1 h-1 bg-white rounded-full"></span>
+            <span class="w-1 h-1 bg-white rounded-full"></span>
+            <span class="w-1 h-1 bg-white rounded-full"></span>
+            <span class="w-1 h-1 bg-white rounded-full"></span>`;
         }
       });