podrían el header y el footer ser más: Header

Concepto: Elegante, minimalista, con un toque de sofisticación tipográfica que recuerde a una imprenta antigua pero con un diseño moderno.

Estructura HTML:
html

<header class="header">
<div class="header-container">
<!-- Logo y nombre -->
<div class="logo">
<a href="index.html" class="logo-link">
<h1 class="logo-text">La Fragua del Logos</h1>
<span class="logo-subtitle">Forjando Palabras, Creando Sentido</span>
</a>
</div>

<!-- Navegación principal -->
<nav class="main-nav">
<ul class="nav-list">
<li class="nav-item"><a href="index.html" class="nav-link">Inicio</a></li>
<li class="nav-item"><a href="servicios.html" class="nav-link">Servicios</a></li>
<li class="nav-item"><a href="blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="contacto.html" class="nav-link">Contacto</a></li>
<!-- Sobre Mí discreto -->
<li class="nav-item subtle">
<a href="sobre-mi.html" class="nav-link subtle-link">Sobre Mí</a>
</li>
</ul>
</nav>

<!-- Selector de idiomas -->
<div class="language-selector">
<button class="language-btn" id="languageToggle">
<span class="flag">🇪🇸</span>
<span class="language-code">ES</span>
</button>
<div class="language-dropdown" id="languageDropdown">
<a href="#" data-lang="es" class="lang-option">🇪🇸 Español</a>
<a href="#" data-lang="en" class="lang-option">🇬🇧 English</a>
<a href="#" data-lang="fr" class="lang-option">🇫🇷 Français</a>
</div>
</div>

<!-- Menú móvil -->
<button class="mobile-menu-btn" id="mobileMenuToggle">
<span></span>
<span></span>
<span></span>
</button>
</div>
</header>

Estilos CSS:
css

/* Header Styles */
.header {
background: rgba(26, 26, 26, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(184, 134, 11, 0.3);
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
padding: 1rem 0;
}

.header-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
}

/* Logo */
.logo-text {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 700;
color: #f4f4f4;
margin: 0;
letter-spacing: -0.5px;
}

.logo-subtitle {
font-family: 'Lato', sans-serif;
font-size: 0.7rem;
color: #b8860b;
letter-spacing: 1.5px;
text-transform: uppercase;
display: block;
margin-top: -2px;
}

.logo-link {
text-decoration: none;
transition: all 0.3s ease;
}

.logo-link:hover {
opacity: 0.8;
}

/* Navegación principal */
.nav-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 2rem;
}

.nav-link {
font-family: 'Lato', sans-serif;
color: #e0e0e0;
text-decoration: none;
font-size: 1rem;
font-weight: 400;
transition: all 0.3s ease;
position: relative;
padding: 0.5rem 0;
}

.nav-link:hover {
color: #b8860b;
}

.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #b8860b;
transition: width 0.3s ease;
}

.nav-link:hover::after {
width: 100%;
}

/* Sobre Mí discreto */
.nav-item.subtle {
margin-left: 1rem;
position: relative;
}

.nav-item.subtle::before {
content: '•';
color: #666;
margin-right: 1rem;
}

.subtle-link {
font-size: 0.9rem;
color: #999 !important;
}

.subtle-link:hover {
color: #b8860b !important;
}

/* Selector de idiomas */
.language-selector {
position: relative;
}

.language-btn {
background: rgba(184, 134, 11, 0.1);
border: 1px solid rgba(184, 134, 11, 0.3);
border-radius: 4px;
padding: 0.5rem 1rem;
color: #e0e0e0;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}

.language-btn:hover {
background: rgba(184, 134, 11, 0.2);
}

.language-dropdown {
position: absolute;
top: 100%;
right: 0;
background: #1a1a1a;
border: 1px solid rgba(184, 134, 11, 0.3);
border-radius: 4px;
padding: 0.5rem;
min-width: 150px;
display: none;
margin-top: 0.5rem;
}

.language-dropdown.show {
display: block;
}

.lang-option {
display: block;
padding: 0.5rem 1rem;
color: #e0e0e0;
text-decoration: none;
transition: all 0.3s ease;
border-radius: 2px;
}

.lang-option:hover {
background: rgba(184, 134, 11, 0.1);
color: #b8860b;
}

/* Menú móvil */
.mobile-menu-btn {
display: none;
flex-direction: column;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}

.mobile-menu-btn span {
width: 25px;
height: 2px;
background: #e0e0e0;
margin: 3px 0;
transition: 0.3s;
}

/* Responsive */


@media
(max-width: 768px) {
.header-container {
padding: 0 1rem;
}

.main-nav, .language-selector {
display: none;
}

.mobile-menu-btn {
display: flex;
}

.logo-text {
font-size: 1.4rem;
}

.logo-subtitle {
font-size: 0.6rem;
}
}

Diseño para el Footer

Concepto: Sólido, elegante y con información de contacto clara, manteniendo la estética del header pero con un tono más terroso y estable.

Estructura HTML:
html

<footer class="footer">
<div class="footer-container">
<!-- Columna 1: Logo y descripción -->
<div class="footer-column">
<div class="footer-logo">
<h3 class="footer-logo-text">La Fragua del Logos</h3>
<p class="footer-tagline">Forjando significado a través de las palabras y el pensamiento.</p>
</div>
<div class="social-links">
<a href="#" class="social-link" aria-label="LinkedIn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" class="social-link" aria-label="Twitter">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 10.016 10.016 0 01-3.127 1.184 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
<a href="#" class="social-link" aria-label="GitHub">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
</a>
</div>
</div>

<!-- Columna 2: Enlaces rápidos -->
<div class="footer-column">
<h4 class="footer-title">Navegación</h4>
<ul class="footer-links">
<li><a href="index.html" class="footer-link">Inicio</a></li>
<li><a href="servicios.html" class="footer-link">Servicios</a></li>
<li><a href="blog.html" class="footer-link">Blog</a></li>
<li><a href="contacto.html" class="footer-link">Contacto</a></li>
<li><a href="sobre-mi.html" class="footer-link subtle-link">Sobre Mí</a></li>
</ul>
</div>

<!-- Columna 3: Servicios -->
<div class="footer-column">
<h4 class="footer-title">Servicios</h4>
<ul class="footer-links">
<li><a href="servicios.html#traduccion" class="footer-link">Traducción</a></li>
<li><a href="servicios.html#transcripcion" class="footer-link">Transcripción</a></li>
<li><a href="servicios.html#subtitulacion" class="footer-link">Subtitulación</a></li>
</ul>
</div>

<!-- Columna 4: Contacto -->
<div class="footer-column">
<h4 class="footer-title">Contacto</h4>
<div class="contact-info">
<p class="contact-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="contact-icon">
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>

components/footer.js

@@ -1,72 +1,250 @@
 class CustomFooter extends HTMLElement {
-    connectedCallback() {
-        this.attachShadow({ mode: 'open' });
-        this.shadowRoot.innerHTML = `
-            <style>
-                footer {
-                    background-color: #111827;
-                }
-                
-                .social-icon {
-                    transition: all 0.3s ease;
-                }
-                
-                .social-icon:hover {
-                    transform: translateY(-3px);
-                    color: #b45309;
-                }
-            </style>
-            
-            <footer class="py-12 px-6 md:px-12 text-amber-100">
-                <div class="max-w-7xl mx-auto">
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                        <div>
-                            <h3 class="text-xl font-playfair font-bold mb-4" data-i18n="footer_about">About La Fragua</h3>
-                            <p class="mb-4" data-i18n="footer_about_text">A linguistic workshop where words are forged with precision and passion.</p>
-                            <a href="about.html" class="text-amber-300 hover:text-amber-200 inline-flex items-center" data-i18n="footer_learnmore">
-                                Learn more about me
-                                <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
-                            </a>
-                        </div>
-                        
-                        <div>
-                            <h3 class="text-xl font-playfair font-bold mb-4" data-i18n="footer_quicklinks">Quick Links</h3>
-                            <ul class="space-y-2">
-                                <li><a href="index.html" class="hover:text-amber-300 transition duration-300" data-i18n="nav_home">Home</a></li>
-                                <li><a href="#services" class="hover:text-amber-300 transition duration-300" data-i18n="nav_services">Services</a></li>
-                                <li><a href="blog.html" class="hover:text-amber-300 transition duration-300" data-i18n="nav_blog">Blog</a></li>
-                                <li><a href="#contact" class="hover:text-amber-300 transition duration-300" data-i18n="nav_contact">Contact</a></li>
-                            </ul>
-                        </div>
-                        
-                        <div>
-                            <h3 class="text-xl font-playfair font-bold mb-4" data-i18n="footer_connect">Connect</h3>
-                            <div class="flex space-x-4 mb-4">
-                                <a href="#" class="social-icon">
-                                    <i data-feather="twitter" class="w-5 h-5"></i>
-                                </a>
-                                <a href="#" class="social-icon">
-                                    <i data-feather="linkedin" class="w-5 h-5"></i>
-                                </a>
-                                <a href="#" class="social-icon">
-                                    <i data-feather="instagram" class="w-5 h-5"></i>
-                                </a>
-                            </div>
-                            <p data-i18n="footer_email">Email: info@lafraguadelogos.com</p>
-                        </div>
-                    </div>
-                    
-                    <div class="border-t border-gray-700 mt-12 pt-8 text-center">
-                        <p data-i18n="footer_copyright">© ${new Date().getFullYear()} La Fragua del Logos. Forged with words and ideas.</p>
-                    </div>
-                </div>
-            </footer>
-            
-            <script>
-                feather.replace();
-            </script>
-        `;
-    }
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #1a1a1a;
+          border-top: 1px solid rgba(184, 134, 11, 0.3);
+          color: #e0e0e0;
+        }
+        
+        .footer-container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 3rem 2rem;
+          display: grid;
+          grid-template-columns: 2fr 1fr 1fr 1.5fr;
+          gap: 3rem;
+        }
+        
+        .footer-column {
+          display: flex;
+          flex-direction: column;
+          gap: 1.5rem;
+        }
+        
+        .footer-logo-text {
+          font-family: 'Playfair Display', serif;
+          font-size: 1.5rem;
+          color: #f4f4f4;
+          margin: 0;
+        }
+        
+        .footer-tagline {
+          font-family: 'Lato', sans-serif;
+          font-size: 0.9rem;
+          color: #999;
+          line-height: 1.5;
+          margin: 0;
+        }
+        
+        .footer-title {
+          font-family: 'Lato', sans-serif;
+          font-size: 1.1rem;
+          color: #b8860b;
+          margin: 0 0 1rem 0;
+          text-transform: uppercase;
+          letter-spacing: 1px;
+        }
+        
+        .footer-links {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          display: flex;
+          flex-direction: column;
+          gap: 0.8rem;
+        }
+        
+        .footer-link {
+          font-family: 'Lato', sans-serif;
+          color: #e0e0e0;
+          text-decoration: none;
+          font-size: 0.95rem;
+          transition: all 0.3s ease;
+        }
+        
+        .footer-link:hover {
+          color: #b8860b;
+          padding-left: 5px;
+        }
+        
+        .social-links {
+          display: flex;
+          gap: 1rem;
+        }
+        
+        .social-link {
+          color: #999;
+          transition: all 0.3s ease;
+          padding: 0.5rem;
+          border-radius: 4px;
+        }
+        
+        .social-link:hover {
+          color: #b8860b;
+          background: rgba(184, 134, 11, 0.1);
+        }
+        
+        .contact-info {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+        
+        .contact-item {
+          display: flex;
+          align-items: center;
+          gap: 0.8rem;
+          margin: 0;
+          font-size: 0.95rem;
+        }
+        
+        .contact-icon {
+          color: #b8860b;
+          flex-shrink: 0;
+        }
+        
+        .footer-bottom {
+          border-top: 1px solid #333;
+          padding: 1.5rem 0;
+        }
+        
+        .footer-bottom-container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        
+        .copyright {
+          font-family: 'Lato', sans-serif;
+          font-size: 0.9rem;
+          color: #999;
+          margin: 0;
+        }
+        
+        .legal-links {
+          display: flex;
+          gap: 1.5rem;
+        }
+        
+        .legal-link {
+          font-family: 'Lato', sans-serif;
+          font-size: 0.8rem;
+          color: #666;
+          text-decoration: none;
+          transition: color 0.3s ease;
+        }
+        
+        .legal-link:hover {
+          color: #b8860b;
+        }
+        
+        @media (max-width: 968px) {
+          .footer-container {
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+          }
+        }
+        
+        @media (max-width: 768px) {
+          .footer-container {
+            grid-template-columns: 1fr;
+            gap: 2rem;
+            padding: 2rem 1rem;
+          }
+        
+          .footer-bottom-container {
+            flex-direction: column;
+            gap: 1rem;
+            text-align: center;
+          }
+        
+          .legal-links {
+            justify-content: center;
+          }
+        }
+      </style>
+      
+      <footer class="footer">
+        <div class="footer-container">
+          <div class="footer-column">
+            <div class="footer-logo">
+              <h3 class="footer-logo-text" data-i18n="site_title">La Fragua del Logos</h3>
+              <p class="footer-tagline" data-i18n="footer_tagline">Forjando significado a través de las palabras y el pensamiento.</p>
+            </div>
+            <div class="social-links">
+              <a href="#" class="social-link" aria-label="LinkedIn">
+                <i data-feather="linkedin" class="w-5 h-5"></i>
+              </a>
+              <a href="#" class="social-link" aria-label="Twitter">
+                <i data-feather="twitter" class="w-5 h-5"></i>
+              </a>
+              <a href="#" class="social-link" aria-label="GitHub">
+                <i data-feather="github" class="w-5 h-5"></i>
+              </a>
+            </div>
+          </div>
+
+          <div class="footer-column">
+            <h4 class="footer-title" data-i18n="footer_navigation">Navegación</h4>
+            <ul class="footer-links">
+              <li><a href="index.html" class="footer-link" data-i18n="nav_home">Inicio</a></li>
+              <li><a href="#services" class="footer-link" data-i18n="nav_services">Servicios</a></li>
+              <li><a href="blog.html" class="footer-link" data-i18n="nav_blog">Blog</a></li>
+              <li><a href="#contact" class="footer-link" data-i18n="nav_contact">Contacto</a></li>
+              <li><a href="about.html" class="footer-link subtle-link" data-i18n="nav_about">Sobre Mí</a></li>
+            </ul>
+          </div>
+
+          <div class="footer-column">
+            <h4 class="footer-title" data-i18n="footer_services">Servicios</h4>
+            <ul class="footer-links">
+              <li><a href="#services" class="footer-link" data-i18n="service1_title">Traducción</a></li>
+              <li><a href="#services" class="footer-link" data-i18n="service2_title">Transcripción</a></li>
+              <li><a href="#services" class="footer-link" data-i18n="service3_title">Subtitulación</a></li>
+            </ul>
+          </div>
+
+          <div class="footer-column">
+            <h4 class="footer-title" data-i18n="footer_contact">Contacto</h4>
+            <div class="contact-info">
+              <p class="contact-item">
+                <i data-feather="mail" class="contact-icon w-4 h-4"></i>
+                <a href="mailto:info@lafraguadelogos.com" class="footer-link">info@lafraguadelogos.com</a>
+              </p>
+              <p class="contact-item">
+                <i data-feather="phone" class="contact-icon w-4 h-4"></i>
+                <a href="tel:+34123456789" class="footer-link">+34 123 456 789</a>
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="footer-bottom">
+          <div class="footer-bottom-container">
+            <p class="copyright">
+              &copy; <span id="currentYear"></span> <span data-i18n="footer_copyright">La Fragua del Logos. Todos los derechos reservados.</span>
+            </p>
+            <div class="legal-links">
+              <a href="privacy.html" class="legal-link" data-i18n="footer_privacy">Política de Privacidad</a>
+              <a href="terms.html" class="legal-link" data-i18n="footer_terms">Términos</a>
+              <a href="cookies.html" class="legal-link" data-i18n="footer_cookies">Cookies</a>
+            </div>
+          </div>
+        </div>
+      </footer>
+
+      <script>
+        document.getElementById('currentYear').textContent = new Date().getFullYear();
+        feather.replace();
+      </script>
+    `;
+  }
 }
 
 customElements.define('custom-footer', CustomFooter);

components/header.js

@@ -0,0 +1,275 @@
+class CustomHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        header {
+          background: rgba(26, 26, 26, 0.95);
+          backdrop-filter: blur(10px);
+          border-bottom: 1px solid rgba(184, 134, 11, 0.3);
+          position: fixed;
+          top: 0;
+          width: 100%;
+          z-index: 1000;
+          padding: 1rem 0;
+        }
+        
+        .header-container {
+          max-width: 1200px;
+          margin: 0 auto;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 2rem;
+        }
+        
+        .logo-text {
+          font-family: 'Playfair Display', serif;
+          font-size: 1.8rem;
+          font-weight: 700;
+          color: #f4f4f4;
+          margin: 0;
+          letter-spacing: -0.5px;
+        }
+        
+        .logo-subtitle {
+          font-family: 'Lato', sans-serif;
+          font-size: 0.7rem;
+          color: #b8860b;
+          letter-spacing: 1.5px;
+          text-transform: uppercase;
+          display: block;
+          margin-top: -2px;
+        }
+        
+        .logo-link {
+          text-decoration: none;
+          transition: all 0.3s ease;
+        }
+        
+        .logo-link:hover {
+          opacity: 0.8;
+        }
+        
+        .nav-list {
+          display: flex;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          gap: 2rem;
+        }
+        
+        .nav-link {
+          font-family: 'Lato', sans-serif;
+          color: #e0e0e0;
+          text-decoration: none;
+          font-size: 1rem;
+          font-weight: 400;
+          transition: all 0.3s ease;
+          position: relative;
+          padding: 0.5rem 0;
+        }
+        
+        .nav-link:hover {
+          color: #b8860b;
+        }
+        
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: #b8860b;
+          transition: width 0.3s ease;
+        }
+        
+        .nav-link:hover::after {
+          width: 100%;
+        }
+        
+        .nav-item.subtle {
+          margin-left: 1rem;
+          position: relative;
+        }
+        
+        .nav-item.subtle::before {
+          content: '•';
+          color: #666;
+          margin-right: 1rem;
+        }
+        
+        .subtle-link {
+          font-size: 0.9rem;
+          color: #999 !important;
+        }
+        
+        .subtle-link:hover {
+          color: #b8860b !important;
+        }
+        
+        .language-selector {
+          position: relative;
+        }
+        
+        .language-btn {
+          background: rgba(184, 134, 11, 0.1);
+          border: 1px solid rgba(184, 134, 11, 0.3);
+          border-radius: 4px;
+          padding: 0.5rem 1rem;
+          color: #e0e0e0;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          transition: all 0.3s ease;
+        }
+        
+        .language-btn:hover {
+          background: rgba(184, 134, 11, 0.2);
+        }
+        
+        .language-dropdown {
+          position: absolute;
+          top: 100%;
+          right: 0;
+          background: #1a1a1a;
+          border: 1px solid rgba(184, 134, 11, 0.3);
+          border-radius: 4px;
+          padding: 0.5rem;
+          min-width: 150px;
+          display: none;
+          margin-top: 0.5rem;
+        }
+        
+        .language-dropdown.show {
+          display: block;
+        }
+        
+        .lang-option {
+          display: block;
+          padding: 0.5rem 1rem;
+          color: #e0e0e0;
+          text-decoration: none;
+          transition: all 0.3s ease;
+          border-radius: 2px;
+        }
+        
+        .lang-option:hover {
+          background: rgba(184, 134, 11, 0.1);
+          color: #b8860b;
+        }
+        
+        .mobile-menu-btn {
+          display: none;
+          flex-direction: column;
+          background: none;
+          border: none;
+          cursor: pointer;
+          padding: 0.5rem;
+        }
+        
+        .mobile-menu-btn span {
+          width: 25px;
+          height: 2px;
+          background: #e0e0e0;
+          margin: 3px 0;
+          transition: 0.3s;
+        }
+        
+        @media (max-width: 768px) {
+          .header-container {
+            padding: 0 1rem;
+          }
+        
+          .main-nav, .language-selector {
+            display: none;
+          }
+        
+          .mobile-menu-btn {
+            display: flex;
+          }
+        
+          .logo-text {
+            font-size: 1.4rem;
+          }
+        
+          .logo-subtitle {
+            font-size: 0.6rem;
+          }
+        }
+      </style>
+      
+      <header class="header">
+        <div class="header-container">
+          <div class="logo">
+            <a href="index.html" class="logo-link">
+              <h1 class="logo-text" data-i18n="site_title">La Fragua del Logos</h1>
+              <span class="logo-subtitle" data-i18n="site_subtitle">Forjando Palabras, Creando Sentido</span>
+            </a>
+          </div>
+
+          <nav class="main-nav">
+            <ul class="nav-list">
+              <li class="nav-item"><a href="index.html" class="nav-link" data-i18n="nav_home">Inicio</a></li>
+              <li class="nav-item"><a href="#services" class="nav-link" data-i18n="nav_services">Servicios</a></li>
+              <li class="nav-item"><a href="blog.html" class="nav-link" data-i18n="nav_blog">Blog</a></li>
+              <li class="nav-item"><a href="#contact" class="nav-link" data-i18n="nav_contact">Contacto</a></li>
+              <li class="nav-item subtle">
+                <a href="about.html" class="nav-link subtle-link" data-i18n="nav_about">Sobre Mí</a>
+              </li>
+            </ul>
+          </nav>
+
+          <div class="language-selector">
+            <button class="language-btn" id="languageToggle">
+              <span class="flag">🇪🇸</span>
+              <span class="language-code">ES</span>
+            </button>
+            <div class="language-dropdown" id="languageDropdown">
+              <a href="#" data-lang="es" class="lang-option">🇪🇸 Español</a>
+              <a href="#" data-lang="en" class="lang-option">🇬🇧 English</a>
+              <a href="#" data-lang="fr" class="lang-option">🇫🇷 Français</a>
+            </div>
+          </div>
+
+          <button class="mobile-menu-btn" id="mobileMenuToggle">
+            <span></span>
+            <span></span>
+            <span></span>
+          </button>
+        </div>
+      </header>
+
+      <script>
+        document.addEventListener('DOMContentLoaded', function() {
+          const languageToggle = this.shadowRoot.getElementById('languageToggle');
+          const languageDropdown = this.shadowRoot.getElementById('languageDropdown');
+          
+          languageToggle.addEventListener('click', function() {
+            languageDropdown.classList.toggle('show');
+          });
+
+          // Close dropdown when clicking outside
+          document.addEventListener('click', function(event) {
+            if (!event.target.closest('.language-selector')) {
+              languageDropdown.classList.remove('show');
+            }
+          });
+
+          // Mobile menu toggle
+          const mobileMenuToggle = this.shadowRoot.getElementById('mobileMenuToggle');
+          const mainNav = this.shadowRoot.querySelector('.main-nav');
+          
+          mobileMenuToggle.addEventListener('click', function() {
+            mainNav.style.display = mainNav.style.display === 'none' ? 'block' : 'none';
+            languageDropdown.style.display = languageDropdown.style.display === 'none' ? 'block' : 'none';
+          });
+        });
+      </script>
+    `;
+  }
+}
+
+customElements.define('custom-header', CustomHeader);

index.html

@@ -8,18 +8,17 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
-    <script src="components/navbar.js"></script>
+    <script src="components/header.js"></script>
     <script src="components/footer.js"></script>
-    <script src="scripts/languages.js"></script>
+<script src="scripts/languages.js"></script>
     <script src="script.js"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap');
     </style>
 </head>
 <body class="bg-amber-50 text-gray-900 font-lato">
-    <custom-navbar></custom-navbar>
-
-    <main>
+    <custom-header></custom-header>
+<main>
         <!-- Hero Section -->
         <section class="relative h-screen flex items-center justify-center bg-gradient-to-b from-gray-900 to-amber-900 overflow-hidden">
             <div class="absolute inset-0 bg-[url('http://static.photos/education/1200x630/1')] opacity-20 bg-cover bg-center"></div>
@@ -234,10 +233,8 @@
             </div>
         </section>
     </main>
-
     <custom-footer></custom-footer>
-
-    <script>
+<script>
         feather.replace();
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>

scripts/languages.js

@@ -1,7 +1,9 @@
 const translations = {
     'es': {
+        'site_title': 'La Fragua del Logos',
+        'site_subtitle': 'Forjando Palabras, Creando Sentido',
         'hero_title': 'Donde las palabras se forjan en ideas',
-        'hero_subtitle': 'Y las ideas en significado en el yunque del lenguaje',
+'hero_subtitle': 'Y las ideas en significado en el yunque del lenguaje',
         'hero_button': 'Descubre mi oficio',
         'services_title': 'Mi Artesanía Lingüística',
         'service1_title': 'Traducción',
@@ -50,11 +52,20 @@ const translations = {
         'footer_quicklinks': 'Enlaces Rápidos',
         'footer_connect': 'Conectar',
         'footer_email': 'Email: info@lafraguadelogos.com',
-        'footer_copyright': '© {currentYear} La Fragua del Logos. Forjado con palabras e ideas.'
-    },
+        'footer_copyright': '© {currentYear} La Fragua del Logos. Todos los derechos reservados.',
+        'footer_tagline': 'Forjando significado a través de las palabras y el pensamiento',
+        'footer_navigation': 'Navegación',
+        'footer_services': 'Servicios',
+        'footer_contact': 'Contacto',
+        'footer_privacy': 'Política de Privacidad',
+        'footer_terms': 'Términos',
+        'footer_cookies': 'Cookies'
+},
     'en': {
+        'site_title': 'La Fragua del Logos',
+        'site_subtitle': 'Forging Words, Creating Meaning',
         'hero_title': 'Where words are forged into ideas',
-        'hero_subtitle': 'And ideas into meaning at the anvil of language',
+'hero_subtitle': 'And ideas into meaning at the anvil of language',
         'hero_button': 'Discover my craft',
         'services_title': 'My Linguistic Craftsmanship',
         'service1_title': 'Translation',
@@ -104,11 +115,20 @@ const translations = {
         'footer_quicklinks': 'Quick Links',
         'footer_connect': 'Connect',
         'footer_email': 'Email: info@lafraguadelogos.com',
-        'footer_copyright': '© {currentYear} La Fragua del Logos. Forged with words and ideas.'
-    },
+        'footer_copyright': '© {currentYear} La Fragua del Logos. All rights reserved.',
+        'footer_tagline': 'Forging meaning through words and thought',
+        'footer_navigation': 'Navigation',
+        'footer_services': 'Services',
+        'footer_contact': 'Contact',
+        'footer_privacy': 'Privacy Policy',
+        'footer_terms': 'Terms',
+        'footer_cookies': 'Cookies'
+},
     'fr': {
+        'site_title': 'La Fragua del Logos',
+        'site_subtitle': 'Forger des Mots, Créer du Sens',
         'hero_title': 'Où les mots sont forgés en idées',
-        'hero_subtitle': 'Et les idées en sens sur l\'enclume du langage',
+'hero_subtitle': 'Et les idées en sens sur l\'enclume du langage',
         'hero_button': 'Découvrez mon métier',
         'services_title': 'Mon Artisanat Linguistique',
         'service1_title': 'Traduction',
@@ -157,6 +177,13 @@ const translations = {
         'footer_quicklinks': 'Liens Rapides',
         'footer_connect': 'Se Connecter',
         'footer_email': 'Email: info@lafraguadelogos.com',
-        'footer_copyright': '© {currentYear} La Fragua del Logos. Forgé avec des mots et des idées.'
-    }
+        'footer_copyright': '© {currentYear} La Fragua del Logos. Tous droits réservés.',
+        'footer_tagline': 'Forger du sens à travers les mots et la pensée',
+        'footer_navigation': 'Navigation',
+        'footer_services': 'Services',
+        'footer_contact': 'Contact',
+        'footer_privacy': 'Politique de Confidentialité',
+        'footer_terms': 'Conditions',
+        'footer_cookies': 'Cookies'
+}
 };