La imagen de fond cambiarla por una con letras, palabras, etc. Vamos a hacer el apartado de servicios mas discreto, con los servicios en tarjetas uno al lado del otro. Quiero que las categorías del blog estén más organizadas en una sección con pestañas nombradas como las etiquetas principales: idiomas, lectura, música, otros. Quiero poder ver el header y el footer

README.md

@@ -1,10 +1,13 @@
 ---
-title: Wordsmith Forge
-emoji: 📈
-colorFrom: yellow
-colorTo: green
+title: WordSmith Forge 🔥
+colorFrom: gray
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,72 @@
+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>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,170 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    background-color: rgba(17, 24, 39, 0.9);
+                    backdrop-filter: blur(10px);
+                    transition: all 0.3s ease;
+                }
+                
+                nav.scrolled {
+                    background-color: rgba(17, 24, 39, 0.98);
+                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                }
+                
+                .nav-link {
+                    position: relative;
+                }
+                
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -2px;
+                    left: 0;
+                    width: 0;
+                    height: 2px;
+                    background-color: #b45309;
+                    transition: width 0.3s ease;
+                }
+                
+                .nav-link:hover::after {
+                    width: 100%;
+                }
+                
+                .language-selector {
+                    position: relative;
+                }
+                
+                .language-dropdown {
+                    display: none;
+                    position: absolute;
+                    right: 0;
+                    background-color: #1a1a1a;
+                    min-width: 160px;
+                    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
+                    z-index: 1;
+                    border-radius: 4px;
+                }
+                
+                .language-selector:hover .language-dropdown {
+                    display: block;
+                }
+                
+                .language-option {
+                    padding: 12px 16px;
+                    display: flex;
+                    align-items: center;
+                    transition: background-color 0.3s;
+                }
+                
+                .language-option:hover {
+                    background-color: #b45309;
+                }
+                
+                .active {
+                    color: #b45309;
+                }
+            </style>
+            
+            <nav class="fixed w-full z-50 py-4 px-6 md:px-12 transition-all duration-300">
+                <div class="max-w-7xl mx-auto flex justify-between items-center">
+                    <a href="index.html" class="text-2xl font-playfair font-bold text-amber-100 hover:text-amber-200 transition duration-300">
+                        La Fragua del Logos
+                    </a>
+                    
+                    <div class="hidden md:flex items-center space-x-8">
+                        <a href="index.html" class="nav-link text-amber-100 hover:text-amber-200" data-i18n="nav_home">Home</a>
+                        <a href="about.html" class="nav-link text-amber-100 hover:text-amber-200 text-sm" data-i18n="nav_about">About Me</a>
+                        <a href="#services" class="nav-link text-amber-100 hover:text-amber-200" data-i18n="nav_services">Services</a>
+                        <a href="blog.html" class="nav-link text-amber-100 hover:text-amber-200" data-i18n="nav_blog">Blog</a>
+                        <a href="#contact" class="nav-link text-amber-100 hover:text-amber-200" data-i18n="nav_contact">Contact</a>
+                        
+                        <div class="language-selector ml-4">
+                            <button class="flex items-center text-amber-100 hover:text-amber-200">
+                                <i data-feather="globe" class="w-5 h-5 mr-2"></i>
+                                <span class="language-label">ES</span>
+                                <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
+                            </button>
+                            <div class="language-dropdown">
+                                <div class="language-option active" data-lang="es">
+                                    <span class="mr-2">🇪🇸</span>
+                                    <span data-i18n="lang_es">Español</span>
+                                </div>
+                                <div class="language-option" data-lang="en">
+                                    <span class="mr-2">🇬🇧</span>
+                                    <span data-i18n="lang_en">English</span>
+                                </div>
+                                <div class="language-option" data-lang="fr">
+                                    <span class="mr-2">🇫🇷</span>
+                                    <span data-i18n="lang_fr">Français</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <button class="md:hidden text-amber-100 focus:outline-none">
+                        <i data-feather="menu" class="w-6 h-6"></i>
+                    </button>
+                </div>
+                
+                <!-- Mobile menu -->
+                <div class="md:hidden hidden bg-gray-900 mt-4 py-4 px-6 rounded-lg">
+                    <a href="index.html" class="block py-2 text-amber-100 hover:text-amber-200" data-i18n="nav_home">Home</a>
+                    <a href="about.html" class="block py-2 text-amber-100 hover:text-amber-200 text-sm" data-i18n="nav_about">About Me</a>
+                    <a href="#services" class="block py-2 text-amber-100 hover:text-amber-200" data-i18n="nav_services">Services</a>
+                    <a href="blog.html" class="block py-2 text-amber-100 hover:text-amber-200" data-i18n="nav_blog">Blog</a>
+                    <a href="#contact" class="block py-2 text-amber-100 hover:text-amber-200" data-i18n="nav_contact">Contact</a>
+                    
+                    <div class="pt-4 border-t border-gray-700 mt-4">
+                        <div class="language-option active" data-lang="es">
+                            <span class="mr-2">🇪🇸</span>
+                            <span data-i18n="lang_es">Español</span>
+                        </div>
+                        <div class="language-option" data-lang="en">
+                            <span class="mr-2">🇬🇧</span>
+                            <span data-i18n="lang_en">English</span>
+                        </div>
+                        <div class="language-option" data-lang="fr">
+                            <span class="mr-2">🇫🇷</span>
+                            <span data-i18n="lang_fr">Français</span>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+            
+            <script>
+                // Mobile menu toggle
+                document.addEventListener('DOMContentLoaded', function() {
+                    const mobileMenuButton = this.shadowRoot.querySelector('button[class*="md:hidden"]');
+                    const mobileMenu = this.shadowRoot.querySelector('div[class*="md:hidden"]');
+                    
+                    mobileMenuButton.addEventListener('click', function() {
+                        const isHidden = mobileMenu.classList.contains('hidden');
+                        if (isHidden) {
+                            mobileMenu.classList.remove('hidden');
+                            feather.replace();
+                        } else {
+                            mobileMenu.classList.add('hidden');
+                        }
+                    });
+                    
+                    // Scroll effect for navbar
+                    window.addEventListener('scroll', function() {
+                        const nav = this.shadowRoot.querySelector('nav');
+                        if (window.scrollY > 50) {
+                            nav.classList.add('scrolled');
+                        } else {
+                            nav.classList.remove('scrolled');
+                        }
+                    });
+                    
+                    feather.replace();
+                });
+            </script>
+        `;
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,245 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="es" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>La Fragua del Logos</title>
+    <link rel="stylesheet" href="style.css">
+    <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/footer.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>
+        <!-- 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>
+<div class="relative z-10 text-center px-4 max-w-4xl">
+                <h1 class="text-5xl md:text-7xl font-playfair font-bold text-amber-100 mb-6">
+                    <span class="block" data-i18n="hero_title">Where words are forged into ideas</span>
+                </h1>
+                <p class="text-xl md:text-2xl text-amber-200 mb-8" data-i18n="hero_subtitle">
+                    And ideas into meaning at the anvil of language
+                </p>
+                <a href="#services" class="inline-block px-8 py-3 bg-amber-700 hover:bg-amber-600 text-white font-medium rounded-lg transition duration-300">
+                    <span data-i18n="hero_button">Discover my craft</span>
+                </a>
+            </div>
+        </section>
+        <!-- Services Section -->
+        <section id="services" class="py-12 bg-amber-50">
+            <div class="container mx-auto px-4 max-w-5xl">
+                <h2 class="text-3xl font-playfair font-bold text-center text-gray-900 mb-8" data-i18n="services_title">
+                    My Linguistic Services
+                </h2>
+                
+                <div class="flex flex-col md:flex-row gap-6 justify-center">
+                    <!-- Translation Card -->
+                    <div class="bg-white rounded-lg shadow-md p-6 w-full md:w-1/3 flex flex-col">
+                        <div class="flex justify-center mb-4">
+                            <i data-feather="globe" class="w-12 h-12 text-amber-700"></i>
+                        </div>
+                        <h3 class="text-lg font-playfair font-bold mb-2 text-center" data-i18n="service1_title">Translation</h3>
+                        <p class="text-gray-700 mb-4 text-sm text-center" data-i18n="service1_desc">
+                            Precise and culturally adapted translations.
+                        </p>
+                    </div>
+
+                    <!-- Transcription Card -->
+                    <div class="bg-white rounded-lg shadow-md p-6 w-full md:w-1/3 flex flex-col">
+                        <div class="flex justify-center mb-4">
+                            <i data-feather="headphones" class="w-12 h-12 text-amber-700"></i>
+                        </div>
+                        <h3 class="text-lg font-playfair font-bold mb-2 text-center" data-i18n="service2_title">Transcription</h3>
+                        <p class="text-gray-700 mb-4 text-sm text-center" data-i18n="service2_desc">
+                            Accurate verbatim or edited transcriptions.
+                        </p>
+                    </div>
+
+                    <!-- Subtitling Card -->
+                    <div class="bg-white rounded-lg shadow-md p-6 w-full md:w-1/3 flex flex-col">
+                        <div class="flex justify-center mb-4">
+                            <i data-feather="film" class="w-12 h-12 text-amber-700"></i>
+                        </div>
+                        <h3 class="text-lg font-playfair font-bold mb-2 text-center" data-i18n="service3_title">Subtitling</h3>
+                        <p class="text-gray-700 mb-4 text-sm text-center" data-i18n="service3_desc">
+                            Professional subtitles with perfect timing.
+                        </p>
+                    </div>
+                </div>
+                <div class="text-center mt-8">
+                    <a href="#contact" class="inline-block px-6 py-2 bg-amber-700 hover:bg-amber-600 text-white text-sm font-medium rounded-lg transition duration-300">
+                        <span data-i18n="service_cta">Get in touch</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+
+        <!-- Blog Preview Section -->
+        <section class="py-16 bg-gray-100">
+            <div class="container mx-auto px-4">
+                <h2 class="text-3xl font-playfair font-bold text-center text-gray-900 mb-4" data-i18n="blog_title">
+                    From the Forge
+                </h2>
+                <p class="text-center text-gray-700 max-w-2xl mx-auto mb-6" data-i18n="blog_subtitle">
+                    Thoughts on language, translation, and the power of words
+                </p>
+
+                <!-- Blog Categories -->
+                <div class="flex justify-center mb-8">
+                    <div class="inline-flex rounded-md shadow-sm" role="group">
+                        <button type="button" class="px-4 py-2 text-sm font-medium rounded-l-lg bg-amber-700 text-white" data-category="languages">
+                            <span data-i18n="blog_category_languages">Languages</span>
+                        </button>
+                        <button type="button" class="px-4 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50" data-category="reading">
+                            <span data-i18n="blog_category_reading">Reading</span>
+                        </button>
+                        <button type="button" class="px-4 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50" data-category="music">
+                            <span data-i18n="blog_category_music">Music</span>
+                        </button>
+                        <button type="button" class="px-4 py-2 text-sm font-medium rounded-r-lg bg-white text-gray-700 hover:bg-gray-50" data-category="other">
+                            <span data-i18n="blog_category_other">Other</span>
+                        </button>
+                    </div>
+                </div>
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <!-- Blog Post 1 -->
+                    <article class="bg-white rounded-lg shadow-md overflow-hidden">
+                        <img src="http://static.photos/education/640x360/1" alt="Blog post image" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <div class="flex items-center text-sm text-gray-600 mb-2">
+                                <span data-i18n="blog_date">May 15, 2023</span>
+                                <span class="mx-2">•</span>
+                                <span class="text-amber-700" data-i18n="blog_category1">Etymology</span>
+                            </div>
+                            <h3 class="text-xl font-playfair font-bold mb-3" data-i18n="blog_title1">
+                                The Fiery Origins of Common Phrases
+                            </h3>
+                            <p class="text-gray-700 mb-4" data-i18n="blog_excerpt1">
+                                Exploring how blacksmithing terminology forged its way into everyday language...
+                            </p>
+                            <a href="blog-post1.html" class="text-amber-700 hover:text-amber-600 font-medium flex items-center" data-i18n="blog_readmore">
+                                Read more
+                                <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                            </a>
+                        </div>
+                    </article>
+
+                    <!-- Blog Post 2 -->
+                    <article class="bg-white rounded-lg shadow-md overflow-hidden">
+                        <img src="http://static.photos/technology/640x360/2" alt="Blog post image" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <div class="flex items-center text-sm text-gray-600 mb-2">
+                                <span data-i18n="blog_date">April 28, 2023</span>
+                                <span class="mx-2">•</span>
+                                <span class="text-amber-700" data-i18n="blog_category2">Technology</span>
+                            </div>
+                            <h3 class="text-xl font-playfair font-bold mb-3" data-i18n="blog_title2">
+                                When Machines Translate Poetry
+                            </h3>
+                            <p class="text-gray-700 mb-4" data-i18n="blog_excerpt2">
+                                The challenges and occasional triumphs of AI in literary translation...
+                            </p>
+                            <a href="blog-post2.html" class="text-amber-700 hover:text-amber-600 font-medium flex items-center" data-i18n="blog_readmore">
+                                Read more
+                                <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                            </a>
+                        </div>
+                    </article>
+
+                    <!-- Blog Post 3 -->
+                    <article class="bg-white rounded-lg shadow-md overflow-hidden">
+                        <img src="http://static.photos/people/640x360/3" alt="Blog post image" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <div class="flex items-center text-sm text-gray-600 mb-2">
+                                <span data-i18n="blog_date">March 10, 2023</span>
+                                <span class="mx-2">•</span>
+                                <span class="text-amber-700" data-i18n="blog_category3">Culture</span>
+                            </div>
+                            <h3 class="text-xl font-playfair font-bold mb-3" data-i18n="blog_title3">
+                                Lost in Translation: Cultural Nuances
+                            </h3>
+                            <p class="text-gray-700 mb-4" data-i18n="blog_excerpt3">
+                                How idioms and cultural references present unique challenges for translators...
+                            </p>
+                            <a href="blog-post3.html" class="text-amber-700 hover:text-amber-600 font-medium flex items-center" data-i18n="blog_readmore">
+                                Read more
+                                <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                            </a>
+                        </div>
+                    </article>
+                </div>
+
+                <div class="text-center mt-12">
+                    <a href="blog.html" class="inline-block px-8 py-3 bg-amber-700 hover:bg-amber-600 text-white font-medium rounded-lg transition duration-300" data-i18n="blog_viewall">
+                        View all articles
+                    </a>
+                </div>
+            </div>
+        </section>
+
+        <!-- Contact Section -->
+        <section id="contact" class="py-20 bg-gray-900 text-white">
+            <div class="container mx-auto px-4">
+                <h2 class="text-3xl md:text-4xl font-playfair font-bold text-center mb-4" data-i18n="contact_title">
+                    Let's Forge Something Together
+                </h2>
+                <p class="text-center text-amber-200 max-w-2xl mx-auto mb-12" data-i18n="contact_subtitle">
+                    Send me a message about your project and I'll respond within 24 hours
+                </p>
+                
+                <form action="https://formsubmit.co/your-email@example.com" method="POST" class="max-w-2xl mx-auto">
+                    <input type="hidden" name="_subject" value="New message from La Fragua del Logos!">
+                    <input type="hidden" name="_next" value="https://yourdomain.com/thanks.html">
+                    
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                        <div>
+                            <label for="name" class="block mb-2 font-medium" data-i18n="contact_name">Your Name</label>
+                            <input type="text" id="name" name="name" required class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
+                        </div>
+                        <div>
+                            <label for="email" class="block mb-2 font-medium" data-i18n="contact_email">Email Address</label>
+                            <input type="email" id="email" name="email" required class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
+                        </div>
+                    </div>
+                    
+                    <div class="mb-6">
+                        <label for="subject" class="block mb-2 font-medium" data-i18n="contact_subject">Subject</label>
+                        <select id="subject" name="subject" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
+                            <option value="Translation" data-i18n="contact_option1">Translation Services</option>
+                            <option value="Transcription" data-i18n="contact_option2">Transcription Services</option>
+                            <option value="Subtitling" data-i18n="contact_option3">Subtitling Services</option>
+                            <option value="Other" data-i18n="contact_option4">Other Inquiry</option>
+                        </select>
+                    </div>
+                    
+                    <div class="mb-6">
+                        <label for="message" class="block mb-2 font-medium" data-i18n="contact_message">Your Message</label>
+                        <textarea id="message" name="message" rows="5" required class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
+                    </div>
+                    
+                    <button type="submit" class="w-full md:w-auto px-8 py-3 bg-amber-700 hover:bg-amber-600 text-white font-medium rounded-lg transition duration-300" data-i18n="contact_button">
+                        Send Message
+                    </button>
+                </form>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,81 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize language
+    const defaultLanguage = 'es';
+    let currentLanguage = localStorage.getItem('language') || defaultLanguage;
+    updateLanguage(currentLanguage);
+
+    // Language selector functionality
+    const languageSelectors = document.querySelectorAll('.language-option');
+    languageSelectors.forEach(selector => {
+        selector.addEventListener('click', function() {
+            const selectedLanguage = this.getAttribute('data-lang');
+            currentLanguage = selectedLanguage;
+            localStorage.setItem('language', selectedLanguage);
+            updateLanguage(selectedLanguage);
+        });
+    });
+    // Blog filter functionality
+    const blogFilterButtons = document.querySelectorAll('[data-category]');
+    blogFilterButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const category = this.getAttribute('data-category');
+            filterBlogPosts(category);
+            
+            // Update active state
+            blogFilterButtons.forEach(btn => {
+                btn.classList.remove('bg-amber-700', 'text-white');
+                btn.classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-50');
+            });
+            this.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-50');
+            this.classList.add('bg-amber-700', 'text-white');
+        });
+    });
+// Form submission handling
+    const contactForm = document.getElementById('contact-form');
+    if (contactForm) {
+        contactForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            // Here you would typically send the form data
+            // For demo purposes, we'll just show an alert
+            alert('Thank you for your message! I will get back to you soon.');
+            this.reset();
+        });
+    }
+});
+
+function updateLanguage(language) {
+    // Update all elements with data-i18n attributes
+    document.querySelectorAll('[data-i18n]').forEach(element => {
+        const key = element.getAttribute('data-i18n');
+        if (translations[language] && translations[language][key]) {
+            element.textContent = translations[language][key];
+        } else if (translations['es'][key]) {
+            // Fallback to Spanish if translation missing
+            element.textContent = translations['es'][key];
+        }
+    });
+
+    // Update HTML lang attribute
+    document.documentElement.lang = language;
+
+    // Update active language in selector
+    document.querySelectorAll('.language-option').forEach(option => {
+        if (option.getAttribute('data-lang') === language) {
+            option.classList.add('active');
+        } else {
+            option.classList.remove('active');
+        }
+    });
+}
+
+function filterBlogPosts(category) {
+    const blogPosts = document.querySelectorAll('.blog-post');
+    blogPosts.forEach(post => {
+        const postCategories = post.getAttribute('data-categories').split(' ');
+        if (category === 'all' || postCategories.includes(category)) {
+            post.style.display = 'block';
+        } else {
+            post.style.display = 'none';
+        }
+    });
+}

scripts/languages.js

@@ -0,0 +1,162 @@
+const translations = {
+    'es': {
+        'hero_title': 'Donde las palabras se forjan en ideas',
+        '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',
+        'service1_desc': 'Traducciones precisas y culturalmente adaptadas que preservan la esencia de tu mensaje.',
+        'service2_title': 'Transcripción',
+        'service2_desc': 'Transcripciones exactas literales o editadas para tu contenido de audio y video.',
+        'service3_title': 'Subtitulación',
+        'service3_desc': 'Subtítulos profesionales con sincronización perfecta y legibilidad para tus videos.',
+        'service_cta': 'Consultar sin compromiso',
+        'blog_title': 'Desde la Fragua',
+        'blog_subtitle': 'Reflexiones sobre lenguaje, traducción y el poder de las palabras',
+        'blog_date': '15 de mayo, 2023',
+        'blog_category1': 'Etimología',
+        'blog_title1': 'Los Orígenes Ardientes de Frases Comunes',
+        'blog_excerpt1': 'Explorando cómo la terminología de herrería se forjó en el lenguaje cotidiano...',
+        'blog_category2': 'Tecnología',
+        'blog_title2': 'Cuando las Máquinas Traducen Poesía',
+        'blog_excerpt2': 'Los desafíos y ocasionales triunfos de la IA en la traducción literaria...',
+        'blog_category3': 'Cultura',
+        'blog_title3': 'Perdido en la Traducción: Matices Culturales',
+        'blog_excerpt3': 'Cómo los modismos y referencias culturales presentan desafíos únicos para los traductores...',
+        'blog_readmore': 'Leer más',
+        'blog_viewall': 'Ver todos los artículos',
+        'contact_title': 'Forjemos Algo Juntos',
+        'contact_subtitle': 'Envíame un mensaje sobre tu proyecto y responderé en 24 horas',
+        'contact_name': 'Tu Nombre',
+        'contact_email': 'Correo Electrónico',
+        'contact_subject': 'Asunto',
+        'contact_option1': 'Servicios de Traducción',
+        'contact_option2': 'Servicios de Transcripción',
+        'contact_option3': 'Servicios de Subtitulación',
+        'contact_option4': 'Otra Consulta',
+        'contact_message': 'Tu Mensaje',
+        'contact_button': 'Enviar Mensaje',
+        'nav_home': 'Inicio',
+        'nav_about': 'Sobre Mí',
+        'nav_services': 'Servicios',
+        'nav_blog': 'Blog',
+        'nav_contact': 'Contacto',
+        'lang_es': 'Español',
+        'lang_en': 'Inglés',
+        'lang_fr': 'Francés',
+        'footer_about': 'Sobre La Fragua',
+        'footer_about_text': 'Un taller lingüístico donde las palabras se forjan con precisión y pasión.',
+        'footer_learnmore': 'Conoce más sobre mí',
+        '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.'
+    },
+    'en': {
+        'hero_title': 'Where words are forged into ideas',
+        'hero_subtitle': 'And ideas into meaning at the anvil of language',
+        'hero_button': 'Discover my craft',
+        'services_title': 'My Linguistic Craftsmanship',
+        'service1_title': 'Translation',
+        'service1_desc': 'Precise and culturally adapted translations that preserve the essence of your message.',
+        'service2_title': 'Transcription',
+        'service2_desc': 'Accurate verbatim or edited transcriptions for your audio and video content.',
+        'service3_title': 'Subtitling',
+        'service3_desc': 'Professional subtitles with perfect timing and readability for your videos.',
+        'service_cta': 'Consult without commitment',
+        'blog_title': 'From the Forge',
+        'blog_subtitle': 'Thoughts on language, translation, and the power of words',
+        'blog_date': 'May 15, 2023',
+        'blog_category_languages': 'Languages',
+        'blog_category_reading': 'Reading',
+        'blog_category_music': 'Music',
+        'blog_category_other': 'Other',
+        'blog_title1': 'The Fiery Origins of Common Phrases',
+        'blog_excerpt1': 'Exploring how blacksmithing terminology forged its way into everyday language...',
+        'blog_title2': 'When Machines Translate Poetry',
+        'blog_excerpt2': 'The challenges and occasional triumphs of AI in literary translation...',
+        'blog_title3': 'Lost in Translation: Cultural Nuances',
+        'blog_excerpt3': 'How idioms and cultural references present unique challenges for translators...',
+'blog_readmore': 'Read more',
+        'blog_viewall': 'View all articles',
+        'contact_title': "Let's Forge Something Together",
+        'contact_subtitle': 'Send me a message about your project and I\'ll respond within 24 hours',
+        'contact_name': 'Your Name',
+        'contact_email': 'Email Address',
+        'contact_subject': 'Subject',
+        'contact_option1': 'Translation Services',
+        'contact_option2': 'Transcription Services',
+        'contact_option3': 'Subtitling Services',
+        'contact_option4': 'Other Inquiry',
+        'contact_message': 'Your Message',
+        'contact_button': 'Send Message',
+        'nav_home': 'Home',
+        'nav_about': 'About Me',
+        'nav_services': 'Services',
+        'nav_blog': 'Blog',
+        'nav_contact': 'Contact',
+        'lang_es': 'Spanish',
+        'lang_en': 'English',
+        'lang_fr': 'French',
+        'footer_about': 'About La Fragua',
+        'footer_about_text': 'A linguistic workshop where words are forged with precision and passion.',
+        'footer_learnmore': 'Learn more about me',
+        '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.'
+    },
+    'fr': {
+        '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_button': 'Découvrez mon métier',
+        'services_title': 'Mon Artisanat Linguistique',
+        'service1_title': 'Traduction',
+        'service1_desc': 'Traductions précises et adaptées culturellement qui préservent l\'essence de votre message.',
+        'service2_title': 'Transcription',
+        'service2_desc': 'Transcriptions verbatim ou éditées précises pour votre contenu audio et vidéo.',
+        'service3_title': 'Sous-titrage',
+        'service3_desc': 'Sous-titres professionnels avec un timing parfait et une bonne lisibilité pour vos vidéos.',
+        'service_cta': 'Consulter sans engagement',
+        'blog_title': 'De la Forge',
+        'blog_subtitle': 'Réflexions sur le langage, la traduction et le pouvoir des mots',
+        'blog_date': '15 mai 2023',
+        'blog_category1': 'Étymologie',
+        'blog_title1': 'Les Origines Ardentes des Expressions Courantes',
+        'blog_excerpt1': 'Exploration de la façon dont la terminologie de la forge s\'est intégrée dans le langage quotidien...',
+        'blog_category2': 'Technologie',
+        'blog_title2': 'Quand les Machines Traduisent la Poésie',
+        'blog_excerpt2': 'Les défis et les succès occasionnels de l\'IA dans la traduction littéraire...',
+        'blog_category3': 'Culture',
+        'blog_title3': 'Perdu en Traduction: Nuances Culturelles',
+        'blog_excerpt3': 'Comment les idiomes et les références culturelles présentent des défis uniques pour les traducteurs...',
+        'blog_readmore': 'Lire la suite',
+        'blog_viewall': 'Voir tous les articles',
+        'contact_title': 'Forgeons Quelque Chose Ensemble',
+        'contact_subtitle': 'Envoyez-moi un message sur votre projet et je répondrai dans les 24 heures',
+        'contact_name': 'Votre Nom',
+        'contact_email': 'Adresse Email',
+        'contact_subject': 'Sujet',
+        'contact_option1': 'Services de Traduction',
+        'contact_option2': 'Services de Transcription',
+        'contact_option3': 'Services de Sous-titrage',
+        'contact_option4': 'Autre Demande',
+        'contact_message': 'Votre Message',
+        'contact_button': 'Envoyer le Message',
+        'nav_home': 'Accueil',
+        'nav_about': 'À Propos',
+        'nav_services': 'Services',
+        'nav_blog': 'Blog',
+        'nav_contact': 'Contact',
+        'lang_es': 'Espagnol',
+        'lang_en': 'Anglais',
+        'lang_fr': 'Français',
+        'footer_about': 'À Propos de La Fragua',
+        'footer_about_text': 'Un atelier linguistique où les mots sont forgés avec précision et passion.',
+        'footer_learnmore': 'En savoir plus sur moi',
+        '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.'
+    }
+};

style.css

@@ -1,28 +1,92 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Lato', sans-serif;
+}
+
+.font-playfair {
+    font-family: 'Playfair Display', serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #b45309;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #92400e;
+}
+
+/* Animation for hero section */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.hero-content {
+    animation: fadeIn 1s ease-out forwards;
+}
+/* Services section */
+#services .flex > div {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+#services .flex > div:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
+}
+/* Language selector dropdown */
+.language-selector {
+    position: relative;
+    display: inline-block;
+}
+
+.language-dropdown {
+    display: none;
+    position: absolute;
+    right: 0;
+    background-color: #1a1a1a;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
+    z-index: 1;
+    border-radius: 4px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.language-selector:hover .language-dropdown {
+    display: block;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.language-option {
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    transition: background-color 0.3s;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.language-option:hover {
+    background-color: #b45309;
+}
+
+/* Form input focus styles */
+.form-input:focus {
+    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.3);
+}
+/* Blog category buttons */
+[data-category] {
+    transition: all 0.3s ease;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+[data-category]:hover:not(.bg-amber-700) {
+    background-color: #f3f4f6 !important;
 }