Manual changes saved

components/footer.js

@@ -52,7 +52,7 @@ class CustomFooter extends HTMLElement {
           width: 36px;
           height: 36px;
           border-radius: 50%;
-          background: rgba(255, 255, 255, 0.4);
+          background: rgba(255, 255, 255, 0.1);
           display: flex;
           align-items: center;
           justify-content: center;
@@ -85,10 +85,9 @@ class CustomFooter extends HTMLElement {
 </div>
             <p class="text-gray-400">La plataforma IA que revoluciona la gestión de talleres de ciclismo.</p>
             <div class="social-links">
-              <a href="https://www.instagram.com/bikeloapp" target="_blank"><img src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/instagram.svg" width="22" height="22" alt="Instagram"></a>
-              <a href="#demo" target=""><img src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/facebook.svg" width="22" height="22" alt="Facebook"></a>
-              <a href="#demo" target=""><img src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/linkedin.svg" width="22" height="22" alt="LinkedIn"></a>
-              <a href="#"><i data-feather="twitter"></i></a>
+              <a href="https://www.instagram.com/bikeloapp" target="_blank"><i data-feather="instagram"></i></a>
+              <a href="#demo" target=""><i data-feather="facebook"></i></a>
+              <a href="#demo" target=""><i data-feather="linkedin"></i></a>
             </div>
 </div>
           <div>
@@ -108,6 +107,12 @@ class CustomFooter extends HTMLElement {
         </div>
       </footer>
     `;
+    // Reemplazar los iconos dentro del shadowRoot
+    this.shadowRoot.querySelectorAll('[data-feather]').forEach(icon => {
+      const name = icon.getAttribute('data-feather');
+      const svg = feather.icons[name]?.toSvg();
+      if (svg) icon.outerHTML = svg;
+    });
   }
 }
 customElements.define('custom-footer', CustomFooter);