la seccion de blog se podría parecer mas a esto?:

import { useState } from 'react';
import { Card } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Badge } from '@/components/ui/badge';
import { Sparkles, BookOpen, Music, Languages, Globe } from 'lucide-react';

export default function Passions() {
const [activeTab, setActiveTab] = useState('mitologia');

const books = [
{
title: 'Cien Años de Soledad',
author: 'Gabriel García Márquez',
review: 'Una obra maestra del realismo mágico que explora la historia de la familia Buendía.',
},
{
title: 'El Nombre de la Rosa',
author: 'Umberto Eco',
review: 'Una fascinante novela histórica que combina misterio, filosofía y semiótica medieval.',
},
{
title: 'La Odisea',
author: 'Homero',
review: 'El viaje épico de Odiseo, lleno de aventuras mitológicas y lecciones atemporales.',
},
];

const musicGenres = [
'Rock Clásico',
'Jazz',
'Música Clásica',
'Folk',
'Indie',
'World Music',
];

return (
<section id="pasiones" className="py-20 bg-gradient-to-b from-muted/30 to-white">
<div className="container mx-auto px-4">
<h2 className="text-4xl md:text-5xl font-bold text-center mb-4 text-primary">
Más Allá de las Palabras
</h2>
<div className="w-24 h-1 bg-accent mx-auto mb-4"></div>
<p className="text-center text-lg text-muted-foreground mb-12 max-w-2xl mx-auto">
El mundo que me inspira y enriquece mi trabajo como traductora
</p>

<div className="max-w-6xl mx-auto">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsList className="grid w-full grid-cols-2 md:grid-cols-5 mb-8 h-auto">
<TabsTrigger value="mitologia" className="flex items-center gap-2 py-3">
<Sparkles className="w-4 h-4" />
<span className="hidden sm:inline">Mitología</span>
</TabsTrigger>
<TabsTrigger value="lectura" className="flex items-center gap-2 py-3">
<BookOpen className="w-4 h-4" />
<span className="hidden sm:inline">Lectura</span>
</TabsTrigger>
<TabsTrigger value="musica" className="flex items-center gap-2 py-3">
<Music className="w-4 h-4" />
<span className="hidden sm:inline">Música</span>
</TabsTrigger>
<TabsTrigger value="etimologia" className="flex items-center gap-2 py-3">
<Languages className="w-4 h-4" />
<span className="hidden sm:inline">Etimología</span>
</TabsTrigger>
<TabsTrigger value="idiomas" className="flex items-center gap-2 py-3">
<Globe className="w-4 h-4" />
<span className="hidden sm:inline">Idiomas</span>
</TabsTrigger>
</TabsList>

<TabsContent value="mitologia" className="mt-6">
<Card className="p-8 md:p-12">
<div className="grid md:grid-cols-2 gap-8 items-center">
<div>
<h3 className="text-3xl font-bold mb-4 text-primary">El Poder de los Mitos</h3>
<p className="text-lg leading-relaxed mb-4">
La mitología ha sido mi pasión desde la infancia. Los mitos antiguos no son solo historias
fascinantes, sino ventanas a la comprensión de diferentes culturas y la psique humana.
</p>
<p className="text-lg leading-relaxed mb-4">
Cada mito encierra lecciones universales sobre el valor, el amor, la traición y la redención.
Mi favorito es el mito de Orfeo y Eurídice, una historia sobre el amor que trasciende la muerte
y el poder transformador de la música.
</p>
<p className="text-muted-foreground italic">
"Los mitos son historias que nunca sucedieron pero siempre están sucediendo." - Salustio
</p>
</div>
<div className="rounded-lg overflow-hidden shadow-xl">
<img
src="/assets/mythology-theme.jpg"
alt="Mitología"
className="w-full h-full object-cover"
/>
</div>
</div>
</Card>
</TabsContent>

<TabsContent value="lectura" className="mt-6">
<Card className="p-8 md:p-12">
<div className="grid md:grid-cols-2 gap-8 items-center">
<div className="rounded-lg overflow-hidden shadow-xl order-2 md:order-1">
<img
src="/assets/books-reading.jpg"
alt="Lectura"
className="w-full h-full object-cover"
/>
</div>
<div className="order-1 md:order-2">
<h3 className="text-3xl font-bold mb-4 text-primary">Mi Estante de Libros</h3>
<p className="text-lg leading-relaxed mb-6">
La lectura es mi refugio y mi fuente constante de inspiración. Aquí algunos de mis libros favoritos:
</p>
<div className="space-y-4">
{books.map((book, index) => (
<div key={index} className="border-l-4 border-accent pl-4 py-2">
<h4 className="font-semibold text-lg">{book.title}</h4>
<p className="text-sm text-muted-foreground mb-1">{book.author}</p>
<p className="text-sm">{book.review}</p>
</div>
))}
</div>
</div>
</div>
</Card>
</TabsContent>

<TabsContent value="musica" className="mt-6">
<Card className="p-8 md:p-12">
<div className="grid md:grid-cols-2 gap-8 items-center">
<div>
<h3 className="text-3xl font-bold mb-4 text-primary">La Banda Sonora de Mi Vida</h3>
<p className="text-lg leading-relaxed mb-6">
La música es el lenguaje universal que trasciende las barreras culturales.
Me acompaña en cada traducción, inspirando creatividad y concentración.
</p>
<h4 className="font-semibold text-xl mb-4">Mis Géneros Favoritos:</h4>
<div className="flex flex-wrap gap-3 mb-6">
{musicGenres.map((genre, index) => (
<Badge key={index} variant="secondary" className="text-base px-4 py-2">
{genre}
</Badge>
))}
</div>
<p className="text-muted-foreground italic">
"La música es el arte más directo, entra por el oído y va al corazón." - Magdalena Martínez
</p>
</div>
<div className="rounded-lg overflow-hidden shadow-xl">
<img
src="/assets/music-passion.jpg"
alt="Música"
className="w-full h-full object-cover"
/>
</div>
</div>
</Card>
</TabsContent>

<TabsContent value="etimologia" className="mt-6">
<Card className="p-8 md:p-12">
<div className="grid md:grid-cols-2 gap-8 items-center">
<div className="rounded-lg overflow-hidden shadow-xl order-2 md:order-1">
<img
src="/assets/etymology-words.jpg"
alt="Etimología"
className="w-full h-full object-cover"
/>
</div>
<div className="order-1 md:order-2">
<h3 className="text-3xl font-bold mb-4 text-primary">El Rincón de la Etimología</h3>
<p className="text-lg leading-relaxed mb-6">
Cada palabra tiene una historia fascinante. La etimología me permite entender
el viaje de las palabras a través del tiempo y las culturas.
</p>
<div className="bg-muted/50 p-6 rounded-lg mb-4">
<h4 className="font-semibold text-xl mb-2 text-accent">Palabra del Día: "Nostalgia"</h4>
<p className="mb-2">
<strong>Origen:</strong> Del griego <em>nostos</em> (regreso) + <em>algos</em> (dolor)
</p>
<p className="text-muted-foreground">
Literalmente significa "el dolor del regreso". Originalmente era un término médico
para describir la melancolía de los soldados suizos que añoraban su hogar.
</p>
</div>
<p className="text-muted-foreground italic">
"Las palabras son las huellas del pensamiento humano a través de la historia."
</p>
</div>
</div>
</Card>
</TabsContent>

<TabsContent value="idiomas" className="mt-6">
<Card className="p-8 md:p-12">
<div className="grid md:grid-cols-2 gap-8 items-center">
<div>
<h3 className="text-3xl font-bold mb-4 text-primary">El Arte de Aprender Idiomas</h3>
<p className="text-lg leading-relaxed mb-4">
Cada idioma que aprendo es una nueva ventana al mundo. No solo adquiero vocabulario
y gramática, sino que descubro nuevas formas de pensar y expre

index.html

@@ -82,111 +82,156 @@
                 </div>
             </div>
         </section>
-
-        <!-- Blog Preview Section -->
-        <section class="py-16 bg-gray-100">
+        <!-- Blog Section -->
+        <section id="pasiones" class="py-20 bg-gradient-to-b from-amber-50 to-white">
             <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 class="text-4xl md:text-5xl font-playfair font-bold text-center mb-4 text-gray-900" data-i18n="blog_title">
+                    Más Allá de las Palabras
                 </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
+                <div class="w-24 h-1 bg-amber-700 mx-auto mb-4"></div>
+                <p class="text-center text-lg text-gray-700 mb-12 max-w-2xl mx-auto" data-i18n="blog_subtitle">
+                    El mundo que me inspira y enriquece mi trabajo como traductora
                 </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>
+                <div class="max-w-6xl mx-auto">
+                    <div class="flex flex-wrap justify-center gap-2 mb-8">
+                        <button data-category="mitologia" class="flex items-center gap-2 px-4 py-2 bg-amber-700 text-white rounded-lg font-medium">
+                            <i data-feather="award" class="w-4 h-4"></i>
+                            <span data-i18n="blog_mythology">Mitología</span>
+                        </button>
+                        <button data-category="lectura" class="flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-lg font-medium">
+                            <i data-feather="book-open" class="w-4 h-4"></i>
+                            <span data-i18n="blog_reading">Lectura</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 data-category="musica" class="flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-lg font-medium">
+                            <i data-feather="music" class="w-4 h-4"></i>
+                            <span data-i18n="blog_music">Música</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 data-category="etimologia" class="flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-lg font-medium">
+                            <i data-feather="type" class="w-4 h-4"></i>
+                            <span data-i18n="blog_etymology">Etimología</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 data-category="idiomas" class="flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-lg font-medium">
+                            <i data-feather="globe" class="w-4 h-4"></i>
+                            <span data-i18n="blog_languages">Idiomas</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>
+
+                    <!-- Mythology Content -->
+                    <div class="bg-white rounded-xl shadow-lg p-8 md:p-12 mb-12" data-category-content="mitologia">
+                        <div class="grid md:grid-cols-2 gap-8 items-center">
+                            <div>
+                                <h3 class="text-3xl font-playfair font-bold mb-4 text-gray-900" data-i18n="blog_mythology_title">El Poder de los Mitos</h3>
+                                <p class="text-lg leading-relaxed mb-4" data-i18n="blog_mythology_p1">
+                                    La mitología ha sido mi pasión desde la infancia. Los mitos antiguos no son solo historias 
+                                    fascinantes, sino ventanas a la comprensión de diferentes culturas y la psique humana.
+                                </p>
+                                <p class="text-lg leading-relaxed mb-4" data-i18n="blog_mythology_p2">
+                                    Cada mito encierra lecciones universales sobre el valor, el amor, la traición y la redención. 
+                                    Mi favorito es el mito de Orfeo y Eurídice, una historia sobre el amor que trasciende la muerte 
+                                    y el poder transformador de la música.
+                                </p>
+                                <p class="text-gray-600 italic" data-i18n="blog_mythology_quote">
+                                    "Los mitos son historias que nunca sucedieron pero siempre están sucediendo." - Salustio
+                                </p>
+                            </div>
+                            <div class="rounded-lg overflow-hidden shadow-xl">
+                                <img src="http://static.photos/education/1200x630/10" alt="Mitología" class="w-full h-full object-cover">
                             </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>
+                    </div>
 
-                    <!-- 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>
+                    <!-- Blog Posts Grid -->
+                    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                        <!-- Blog Post 1 -->
+                        <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 group cursor-pointer">
+                            <div class="relative h-48 overflow-hidden">
+                                <img src="http://static.photos/education/640x360/1" alt="Blog post image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
+                                <div class="absolute top-4 left-4 flex flex-wrap gap-2">
+                                    <span class="bg-amber-700 text-white px-3 py-1 rounded-full text-xs font-medium">Mitología</span>
+                                </div>
+                            </div>
+                            <div class="p-6">
+                                <div class="flex items-center text-sm text-gray-600 mb-3">
+                                    <i data-feather="calendar" class="w-4 h-4 mr-2"></i>
+                                    <span data-i18n="blog_date1">May 15, 2023</span>
+                                </div>
+                                <h3 class="text-xl font-playfair font-bold mb-3 group-hover:text-amber-700 transition-colors" data-i18n="blog_title1">
+                                    Los Orígenes Ardientes de Frases Comunes
+                                </h3>
+                                <p class="text-gray-700 mb-4" data-i18n="blog_excerpt1">
+                                    Explorando cómo la terminología de herrería se forjó en el lenguaje cotidiano...
+                                </p>
+                                <div class="flex items-center text-amber-700 font-medium group-hover:gap-2 transition-all">
+                                    <span data-i18n="blog_readmore">Leer más</span>
+                                    <i data-feather="arrow-right" class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform"></i>
+                                </div>
                             </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>
+                        <!-- Blog Post 2 -->
+                        <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 group cursor-pointer">
+                            <div class="relative h-48 overflow-hidden">
+                                <img src="http://static.photos/technology/640x360/2" alt="Blog post image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
+                                <div class="absolute top-4 left-4 flex flex-wrap gap-2">
+                                    <span class="bg-amber-700 text-white px-3 py-1 rounded-full text-xs font-medium">Tecnología</span>
+                                </div>
+                            </div>
+                            <div class="p-6">
+                                <div class="flex items-center text-sm text-gray-600 mb-3">
+                                    <i data-feather="calendar" class="w-4 h-4 mr-2"></i>
+                                    <span data-i18n="blog_date2">April 28, 2023</span>
+                                </div>
+                                <h3 class="text-xl font-playfair font-bold mb-3 group-hover:text-amber-700 transition-colors" data-i18n="blog_title2">
+                                    Cuando las Máquinas Traducen Poesía
+                                </h3>
+                                <p class="text-gray-700 mb-4" data-i18n="blog_excerpt2">
+                                    Los desafíos y ocasionales triunfos de la IA en la traducción literaria...
+                                </p>
+                                <div class="flex items-center text-amber-700 font-medium group-hover:gap-2 transition-all">
+                                    <span data-i18n="blog_readmore">Leer más</span>
+                                    <i data-feather="arrow-right" class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform"></i>
+                                </div>
                             </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>
+                        <!-- Blog Post 3 -->
+                        <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 group cursor-pointer">
+                            <div class="relative h-48 overflow-hidden">
+                                <img src="http://static.photos/people/640x360/3" alt="Blog post image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
+                                <div class="absolute top-4 left-4 flex flex-wrap gap-2">
+                                    <span class="bg-amber-700 text-white px-3 py-1 rounded-full text-xs font-medium">Cultura</span>
+                                </div>
+                            </div>
+                            <div class="p-6">
+                                <div class="flex items-center text-sm text-gray-600 mb-3">
+                                    <i data-feather="calendar" class="w-4 h-4 mr-2"></i>
+                                    <span data-i18n="blog_date3">March 10, 2023</span>
+                                </div>
+                                <h3 class="text-xl font-playfair font-bold mb-3 group-hover:text-amber-700 transition-colors" data-i18n="blog_title3">
+                                    Perdido en la Traducción: Matices Culturales
+                                </h3>
+                                <p class="text-gray-700 mb-4" data-i18n="blog_excerpt3">
+                                    Cómo los modismos y referencias culturales presentan desafíos únicos para los traductores...
+                                </p>
+                                <div class="flex items-center text-amber-700 font-medium group-hover:gap-2 transition-all">
+                                    <span data-i18n="blog_readmore">Leer más</span>
+                                    <i data-feather="arrow-right" class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="text-center mt-12">
+                        <a href="blog.html" class="inline-flex items-center px-8 py-3 bg-amber-700 hover:bg-amber-600 text-white font-medium rounded-lg transition-all duration-300 group">
+                            <span data-i18n="blog_viewall">Ver todos los artículos</span>
+                            <i data-feather="arrow-right" class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform"></i>
+                        </a>
+                    </div>
                 </div>
             </div>
         </section>
-
-        <!-- Contact 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">

script.js

@@ -16,18 +16,28 @@ document.addEventListener('DOMContentLoaded', function() {
     });
     // Blog filter functionality
     const blogFilterButtons = document.querySelectorAll('[data-category]');
+    const blogCategoryContents = document.querySelectorAll('[data-category-content]');
+    
     blogFilterButtons.forEach(button => {
         button.addEventListener('click', function() {
             const category = this.getAttribute('data-category');
-            filterBlogPosts(category);
             
-            // Update active state
+            // Update button states
             blogFilterButtons.forEach(btn => {
                 btn.classList.remove('bg-amber-700', 'text-white');
-                btn.classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-50');
+                btn.classList.add('bg-white', 'text-gray-700');
             });
-            this.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-50');
+            this.classList.remove('bg-white', 'text-gray-700');
             this.classList.add('bg-amber-700', 'text-white');
+            
+            // Show/hide category contents
+            blogCategoryContents.forEach(content => {
+                if(content.getAttribute('data-category-content') === category) {
+                    content.classList.remove('hidden');
+                } else {
+                    content.classList.add('hidden');
+                }
+            });
         });
     });
 // Form submission handling

scripts/languages.js

@@ -16,16 +16,22 @@ const translations = {
         '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_mythology': 'Mitología',
+        'blog_reading': 'Lectura',
+        'blog_music': 'Música',
+        'blog_etymology': 'Etimología',
+        'blog_languages': 'Idiomas',
+        'blog_mythology_title': 'El Poder de los Mitos',
+        'blog_mythology_p1': 'La mitología ha sido mi pasión desde la infancia...',
+        'blog_mythology_p2': 'Cada mito encierra lecciones universales...',
+        'blog_mythology_quote': '"Los mitos son historias que nunca sucedieron pero siempre están sucediendo." - Salustio',
         '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_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',
@@ -78,10 +84,15 @@ const translations = {
         '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_mythology': 'Mythology',
+        'blog_reading': 'Reading',
+        'blog_music': 'Music',
+        'blog_etymology': 'Etymology',
+        'blog_languages': 'Languages',
+        'blog_mythology_title': 'The Power of Myths',
+        'blog_mythology_p1': 'Mythology has been my passion since childhood...',
+        'blog_mythology_p2': 'Each myth contains universal lessons about...',
+        'blog_mythology_quote': '"Myths are stories that never happened but are always happening." - Salustius',
         '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',
@@ -141,16 +152,22 @@ const translations = {
         '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_mythology': 'Mythologie',
+        'blog_reading': 'Lecture',
+        'blog_music': 'Musique',
+        'blog_etymology': 'Étymologie',
+        'blog_languages': 'Langues',
+        'blog_mythology_title': 'Le Pouvoir des Mythes',
+        'blog_mythology_p1': 'La mythologie est ma passion depuis l\'enfance...',
+        'blog_mythology_p2': 'Chaque mythe contient des leçons universelles...',
+        'blog_mythology_quote': '"Les mythes sont des histoires qui ne sont jamais arrivées mais qui arrivent toujours." - Saloustios',
         '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_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',

style.css

@@ -82,11 +82,33 @@ body {
 .form-input:focus {
     box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.3);
 }
-/* Blog category buttons */
+/* Blog Section */
+#pasiones {
+    scroll-margin-top: 100px;
+}
+
+/* Blog Cards */
+#pasiones .bg-white:hover {
+    transform: translateY(-5px);
+}
+
+/* Category Buttons */
 [data-category] {
     transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 [data-category]:hover:not(.bg-amber-700) {
     background-color: #f3f4f6 !important;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+/* Category Content */
+[data-category-content] {
+    display: none;
+}
+
+[data-category-content="mitologia"] {
+    display: block;
 }
+