refactor: improve HomeContent tailwind and add animationDelay utils

Author: rgilks

app/[lang]/HomeContent.tsx

@@ -26,20 +26,17 @@ const HomeContent = () => {
         </div>
 
         <div className="text-center py-6 md:py-16 fade-in">
-          <h1 className="text-4xl md:text-5xl font-extrabold text-center mb-6 bg-gradient-to-br from-blue-500 via-indigo-500 to-green-500 bg-clip-text text-transparent">
+          <h1 className="text-4xl md:text-5xl font-extrabold mb-6 bg-gradient-to-br from-blue-500 via-indigo-500 to-green-500 bg-clip-text text-transparent">
             Comprehendo
           </h1>
           <p className="text-xl mb-3 text-gray-300 max-w-2xl mx-auto">{t('subtitle')}</p>
         </div>
 
-        <div className="fade-in" style={{ animationDelay: '0.2s' }}>
+        <div className="fade-in animate-delay-200">
           <TextGenerator />
         </div>
 
-        <footer
-          className="mt-8 md:mt-16 text-center text-sm text-gray-500 fade-in"
-          style={{ animationDelay: '0.3s' }}
-        >
+        <footer className="mt-8 md:mt-16 text-center text-sm text-gray-500 fade-in animate-delay-300">
           <p>
             {t('powered_by')} |{' '}
             <Link
@@ -54,7 +51,7 @@ const HomeContent = () => {
               <Image
                 width={145}
                 height={36}
-                style={{ display: 'block', margin: 'auto' }}
+                className="block mx-auto"
                 src="https://storage.ko-fi.com/cdn/kofi2.png?v=6"
                 alt="Buy Me a Coffee at ko-fi.com"
               />

tailwind.config.js

@@ -19,6 +19,10 @@ const config = {
       animation: {
         'scale-up': 'scaleUp 0.3s ease-out forwards',
       },
+      animationDelay: {
+        200: '0.2s',
+        300: '0.3s',
+      },
     },
   },
   plugins: [],