fix(theme): mejoras en las animaciones de transición claro/oscuro

web/src/components/layout/Footer.astro

@@ -55,18 +55,18 @@ const FOOTER_LINKS = [
 ---
 
 <footer
-  class='relative mt-32 overflow-hidden border-t border-slate-200 bg-slate-50/50 pt-20 pb-10 dark:border-slate-800 dark:bg-[#080808]/50'
+  class='relative mt-32 overflow-hidden border-t border-slate-200 bg-slate-50/50 pt-20 pb-10 dark:border-slate-800 dark:bg-[#080808]/50 transition-colors duration-300 ease-in-out'
 >
   <div
-    class='absolute top-0 left-1/2 h-px w-full -translate-x-1/2 bg-linear-to-r from-transparent via-blue-500/20 to-transparent dark:via-blue-500/10'
+    class='absolute top-0 left-1/2 h-px w-full -translate-x-1/2 bg-linear-to-r from-transparent via-blue-500/20 to-transparent dark:via-blue-500/10 transition-colors duration-300 ease-in-out'
   >
   </div>
   <div
-    class='absolute -top-24 left-1/4 size-64 rounded-full bg-blue-500/5 blur-[100px] dark:bg-blue-600/5'
+    class='absolute -top-24 left-1/4 size-64 rounded-full bg-blue-500/5 blur-[100px] dark:bg-blue-600/5 transition-colors duration-300 ease-in-out'
   >
   </div>
   <div
-    class='absolute right-1/4 -bottom-24 size-64 rounded-full bg-blue-500/5 blur-[100px] dark:bg-blue-600/5'
+    class='absolute right-1/4 -bottom-24 size-64 rounded-full bg-blue-500/5 blur-[100px] dark:bg-blue-600/5 transition-colors duration-300 ease-in-out'
   >
   </div>
 
@@ -80,14 +80,14 @@ const FOOTER_LINKS = [
             iconClass='size-6 animate-float-subtle group-hover:animate-pulse'
           />
           <span
-            class='text-2xl font-bold tracking-tight text-slate-900 transition-colors group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400'
+            class='text-2xl font-bold tracking-tight text-slate-900 transition-colors duration-300 ease-in-out group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400'
           >
             Tailwind <span class='text-blue-500'>Animations</span>
           </span>
         </div>
 
         <p
-          class='max-w-sm text-base leading-relaxed text-slate-600 dark:text-slate-400'
+          class='max-w-sm text-base leading-relaxed text-slate-600 dark:text-slate-400 transition-colors duration-300 ease-in-out'
         >
           Elevate your user experience with high-performance animations. Open
           source, community-driven, and designed for Tailwind CSS.
@@ -99,7 +99,7 @@ const FOOTER_LINKS = [
             target='_blank'
             rel='noopener noreferrer'
             aria-label='GitHub'
-            class='group flex items-center justify-center rounded-full bg-white p-2.5 text-slate-400 shadow-sm ring-1 ring-slate-200 transition-all hover:text-slate-900 hover:ring-slate-300 dark:bg-slate-900 dark:text-slate-500 dark:ring-slate-800 dark:hover:text-white dark:hover:ring-slate-700'
+            class='group flex items-center justify-center rounded-full bg-white p-2.5 text-slate-400 shadow-sm ring-1 ring-slate-200 transition-all duration-300 ease-in-out hover:text-slate-900 hover:ring-slate-300 dark:bg-slate-900 dark:text-slate-500 dark:ring-slate-800 dark:hover:text-white dark:hover:ring-slate-700'
           >
             <Github class='size-5' />
           </a>
@@ -108,7 +108,7 @@ const FOOTER_LINKS = [
             target='_blank'
             rel='noopener noreferrer'
             aria-label='X (Twitter)'
-            class='group flex items-center justify-center rounded-full bg-white p-2.5 text-slate-400 shadow-sm ring-1 ring-slate-200 transition-all hover:text-slate-900 hover:ring-slate-300 dark:bg-slate-900 dark:text-slate-500 dark:ring-slate-800 dark:hover:text-white dark:hover:ring-slate-700'
+            class='group flex items-center justify-center rounded-full bg-white p-2.5 text-slate-400 shadow-sm ring-1 ring-slate-200 transition-all duration-300 ease-in-out hover:text-slate-900 hover:ring-slate-300 dark:bg-slate-900 dark:text-slate-500 dark:ring-slate-800 dark:hover:text-white dark:hover:ring-slate-700'
           >
             <svg viewBox='0 0 24 24' class='size-5' fill='currentColor'>
               <path
@@ -124,7 +124,7 @@ const FOOTER_LINKS = [
         {
           FOOTER_LINKS.map((section) => (
             <div class='flex flex-col gap-4'>
-              <h3 class='text-xs font-bold tracking-[0.2em] whitespace-nowrap text-slate-900 uppercase dark:text-white'>
+              <h3 class='text-xs font-bold tracking-[0.2em] whitespace-nowrap text-slate-900 uppercase transition-colors duration-300 ease-in-out dark:text-white'>
                 {section.title}
               </h3>
               <ul class='flex flex-col gap-3'>
@@ -134,8 +134,10 @@ const FOOTER_LINKS = [
                     <li>
                       <a
                         href={link.href}
-                        class='text-sm text-slate-500 transition-colors hover:text-blue-500 dark:text-slate-400 dark:hover:text-white'
-                        {...(isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+                        class='text-sm text-slate-500 transition-colors duration-300 ease-in-out hover:text-blue-500 dark:text-slate-400 dark:hover:text-white'
+                        {...(isExternal
+                          ? { target: '_blank', rel: 'noopener noreferrer' }
+                          : {})}
                       >
                         {link.name}
                         {isExternal && (
@@ -154,7 +156,7 @@ const FOOTER_LINKS = [
 
     <!-- Bottom Section -->
     <div
-      class='mt-20 flex flex-col items-center justify-between gap-6 border-t border-dashed border-slate-200 pt-10 md:flex-row dark:border-slate-800'
+      class='mt-20 flex flex-col items-center justify-between gap-6 border-t border-dashed border-slate-200 pt-10 md:flex-row dark:border-slate-800 transition-colors duration-300 ease-in-out'
     >
       <a
         href='https://discord.gg/midudev'
@@ -163,7 +165,7 @@ const FOOTER_LINKS = [
         class='group/community flex flex-col items-center gap-2 md:items-start'
       >
         <p
-          class='text-sm font-bold text-slate-900 transition-colors group-hover/community:text-blue-500 dark:text-white dark:group-hover/community:text-blue-400'
+          class='text-sm font-bold text-slate-900 transition-colors duration-300 ease-in-out group-hover/community:text-blue-500 dark:text-white dark:group-hover/community:text-blue-400'
         >
           Join our community!
         </p>
@@ -176,15 +178,15 @@ const FOOTER_LINKS = [
       </a>
 
       <div class='flex flex-col items-center gap-4 md:items-end'>
-        <div class='flex items-center gap-2 text-sm text-slate-500'>
+        <div class='flex items-center gap-2 text-sm text-slate-500 transition-colors duration-300 ease-in-out'>
           <span>Created with</span>
           <span class='animate-pulse text-red-500'>❤️</span>
           <span>by</span>
           <a
             href='https://x.com/midudev'
             target='_blank'
             rel='noopener noreferrer'
-            class='font-bold text-slate-900 transition-all hover:scale-105 hover:text-blue-500 dark:text-white'
+            class='font-bold text-slate-900 transition-all duration-300 ease-in-out hover:scale-105 hover:text-blue-500 dark:text-white'
           >
             midudev
           </a>

web/src/components/layout/Header.astro

@@ -58,6 +58,16 @@ import Enlace from '@components/ui/Enlace.astro'
     const progress = Math.min(scrollY / 100, 1)
     header?.style.setProperty('--header-opacity', String(progress))
     logoContainer?.style.setProperty('--logo-opacity', String(progress))
+
+    if (progress >= 0.1) {
+      header?.classList.add('transition-colors', 'duration-300', 'ease-in-out')
+    } else {
+      header?.classList.remove(
+        'transition-colors',
+        'duration-300',
+        'ease-in-out'
+      )
+    }
   }
 
   window.addEventListener('scroll', handleScroll)
@@ -72,21 +82,21 @@ import Enlace from '@components/ui/Enlace.astro'
 
 <header
   id='header'
-  class='fixed z-20 w-screen border-b px-3 py-5 header-scroll'
+  class='header-scroll fixed z-20 w-screen border-b px-3 py-5'
   role='banner'
 >
   <div class='mx-auto grid w-full max-w-6xl grid-cols-2 grid-cols-[auto_auto]'>
     <!-- Title of Web -->
     <div
       id='logo-container'
-      class='flex items-center gap-1 sm:gap-2 logo-scroll'
+      class='logo-scroll flex items-center gap-1 sm:gap-2'
     >
       <Logo
         class='aspect-square size-7 shrink-0 sm:size-9'
         iconClass='size-4 sm:size-6 animate-float-subtle'
       />
       <span
-        class='text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-white'
+        class='text-2xl font-bold tracking-tight text-slate-900 transition-colors duration-300 ease-in-out sm:text-3xl dark:text-white'
         aria-hidden='true'
       >
         Tailwind <span class='text-blue-500'>Animations</span>
@@ -131,7 +141,7 @@ import Enlace from '@components/ui/Enlace.astro'
           href='https://github.com/midudev/tailwind-animations'
           target='_blank'
           rel='noopener noreferrer'
-          class='text-slate-400 transition-colors hover:text-slate-600 dark:hover:text-slate-200'
+          class='text-slate-400 transition-colors duration-300 ease-in-out hover:text-slate-600 dark:hover:text-slate-200'
         >
           <Github class='size-7' />
         </a>

web/src/components/ui/Enlace.astro

@@ -8,7 +8,7 @@ const { href, target = '_self', className = '' } = Astro.props
   href={href}
   target={target}
   draggable='false'
-  class='text-slate-600 transition-colors select-none hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200'
+  class='text-slate-600 transition-colors duration-300 ease-in-out select-none hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200'
   data-enlace
 >
   <slot />

web/src/components/ui/Logo.astro

@@ -9,7 +9,7 @@ const { class: className, iconClass } = Astro.props
 
 <div
   class:list={[
-    'flex items-center justify-center rounded-xl bg-blue-500 shadow-lg shadow-blue-500/20 transition-all duration-300',
+    'flex items-center justify-center rounded-xl bg-blue-500 shadow-lg shadow-blue-500/20 transition-all duration-300 ease-in-out',
     className
   ]}
 >

web/src/components/ui/ToggleTheme.astro

@@ -5,7 +5,7 @@ import MoonIcon from '../icons/moon.astro'
 
 <button
   id='theme-toggle'
-  class='inline-flex cursor-pointer text-slate-400 transition-colors hover:text-slate-600 dark:hover:text-slate-200'
+  class='inline-flex cursor-pointer text-slate-400 transition-colors duration-300 ease-in-out hover:text-slate-600 dark:hover:text-slate-200'
   aria-label='Toggle theme'
 >
   <SunIcon id='sun-icon' class='hidden size-6 dark:block' />

web/src/layouts/Layout.astro

@@ -54,7 +54,7 @@ const ogImage = `${siteUrl}/og.jpg`
     </script>
   </head>
   <body
-    class='relative h-fit w-full bg-white text-slate-900 transition-colors duration-300 dark:bg-[#050505] dark:text-slate-50'
+    class='relative h-fit w-full bg-white text-slate-900 transition-colors duration-300 ease-in-out dark:bg-[#050505] dark:text-slate-50'
   >
     <slot />
   </body>