utiliza esto como inspiración para los botones del blog, porque no se visualizan bien:

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 desc

index.html

@@ -92,29 +92,29 @@
                     El mundo que me inspira y enriquece mi trabajo como traductora
                 </p>
                     <div class="max-w-6xl mx-auto">
-                        <div class="flex flex-wrap justify-center gap-2 mb-8">
-                            <button data-category="mitologia" class="category-btn active-category flex items-center gap-2 px-4 py-2 bg-amber-700 text-white rounded-lg font-medium">
+                        <div class="flex flex-wrap justify-center gap-3 mb-8">
+                            <button data-category="mitologia" class="category-btn active-category flex items-center gap-2 bg-amber-700 text-white font-medium">
                                 <i data-feather="award" class="w-4 h-4"></i>
                                 <span>Mitología</span>
                             </button>
-                            <button data-category="lectura" class="category-btn flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-lg font-medium">
+                            <button data-category="lectura" class="category-btn flex items-center gap-2 bg-white text-gray-700 font-medium">
                                 <i data-feather="book-open" class="w-4 h-4"></i>
-                                <span>Lectura</span>
+                                <span data-i18n="blog_reading">Lectura</span>
                             </button>
-                            <button data-category="musica" class="category-btn flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-lg font-medium">
+                            <button data-category="musica" class="category-btn flex items-center gap-2 bg-white text-gray-700 font-medium">
                                 <i data-feather="music" class="w-4 h-4"></i>
                                 <span data-i18n="blog_music">Música</span>
                             </button>
-                            <button data-category="etimologia" class="category-btn flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-lg font-medium">
+                            <button data-category="etimologia" class="category-btn flex items-center gap-2 bg-white text-gray-700 font-medium">
                                 <i data-feather="type" class="w-4 h-4"></i>
                                 <span data-i18n="blog_etymology">Etimología</span>
                             </button>
-                            <button data-category="idiomas" class="category-btn flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-lg font-medium">
+                            <button data-category="idiomas" class="category-btn flex items-center gap-2 bg-white text-gray-700 font-medium">
                                 <i data-feather="globe" class="w-4 h-4"></i>
                                 <span data-i18n="blog_languages">Idiomas</span>
                             </button>
                         </div>
-                    <!-- Mythology Content -->
+<!-- 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>

script.js

@@ -16,18 +16,16 @@ document.addEventListener('DOMContentLoaded', function() {
         if (e.target.closest('[data-category]')) {
             const button = e.target.closest('[data-category]');
             const category = button.getAttribute('data-category');
-            
             // Update all buttons in the document
             document.querySelectorAll('[data-category]').forEach(btn => {
-                btn.classList.remove('bg-amber-700', 'text-white');
+                btn.classList.remove('active-category');
                 btn.classList.add('bg-white', 'text-gray-700');
             });
             
             // Update clicked button
             button.classList.remove('bg-white', 'text-gray-700');
-            button.classList.add('bg-amber-700', 'text-white');
-            
-            // Update category contents
+            button.classList.add('active-category');
+// Update category contents
             document.querySelectorAll('[data-category-content]').forEach(content => {
                 content.classList.add('hidden');
                 if (content.getAttribute('data-category-content') === category) {

style.css

@@ -113,23 +113,53 @@ body {
 /* Category Buttons */
 [data-category] {
     transition: all 0.3s ease;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    border-radius: 9999px;
+    padding: 0.7rem 1.25rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 500;
+    border: 1px solid transparent;
 }
 
-[data-category]:hover:not(.bg-amber-700) {
+[data-category]:hover:not(.active-category) {
     background-color: #f3f4f6 !important;
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    border-color: rgba(180, 83, 9, 0.1);
+}
+
+.active-category {
+    background-color: #b45309 !important;
+    color: white !important;
+    box-shadow: 0 4px 6px rgba(180, 83, 9, 0.2);
+}
+
+[data-category] i {
+    width: 16px;
+    height: 16px;
+    stroke-width: 2.5px;
 }
 /* Category Content */
 [data-category-content] {
     display: none;
     animation: fadeIn 0.5s ease-out;
+    border-radius: 1rem;
+    background: white;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
 }
 
 [data-category-content="mitologia"] {
     display: block;
 }
 
+/* Category buttons container */
+#blog .max-w-6xl .flex {
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-bottom: 2.5rem;
+}
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(10px); }
     to { opacity: 1; transform: translateY(0); }