il faut ajouter un navbar et un boton de shat de whatsap

components/navbar.js

@@ -80,8 +80,31 @@ class CustomNavbar extends HTMLElement {
           .mobile-menu-btn {
             display: block;
           }
+          .whatsapp-btn {
+            display: none;
+          }
+        }
+        .whatsapp-btn {
+          background: #25D366;
+          color: white;
+          width: 50px;
+          height: 50px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: fixed;
+          bottom: 20px;
+          right: 20px;
+          box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
+          transition: all 0.3s ease;
+          z-index: 999;
         }
-      </style>
+        .whatsapp-btn:hover {
+          transform: scale(1.1);
+          box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
+        }
+</style>
       <nav>
         <a href="/" class="logo">
           <span>SEWODA KB</span>
@@ -96,8 +119,11 @@ class CustomNavbar extends HTMLElement {
         <button class="mobile-menu-btn">
           <i data-feather="menu"></i>
         </button>
+        <a href="https://wa.me/228XXXXXXXXX" target="_blank" class="whatsapp-btn">
+          <i data-feather="message-circle"></i>
+        </a>
       </nav>
-    `;
+`;
 
     // Mobile menu toggle
     const mobileBtn = this.shadowRoot.querySelector('.mobile-menu-btn');

index.html

@@ -41,6 +41,9 @@
 <body class="bg-gradient-to-br from-[#0F0C29] via-[#302B63] to-[#24243E] min-h-screen font-poppins text-white">
     <script src="components/navbar.js"></script>
     <custom-navbar></custom-navbar>
+    <a href="https://wa.me/228XXXXXXXXX" target="_blank" class="whatsapp-btn-mobile md:hidden">
+      <i data-feather="message-circle"></i>
+    </a>
 <!-- Hero Section -->
     <section class="container mx-auto px-6 py-20 md:py-32 text-center">
         <div class="max-w-4xl mx-auto animate-fade-up">

style.css

@@ -1,8 +1,36 @@
+
 body {
 	padding: 2rem;
 	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 
+.whatsapp-btn-mobile {
+  background: #25D366;
+  color: white;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
+  transition: all 0.3s ease;
+  z-index: 999;
+}
+
+.whatsapp-btn-mobile:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
+}
+
+@media (min-width: 768px) {
+  .whatsapp-btn-mobile {
+    display: none;
+  }
+}
 h1 {
 	font-size: 16px;
 	margin-top: 0;