fix: replace framer-motion FadeIn with CSS keyframe animations in hero to fix rendering issue

apps/landing/src/components/hero.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { FadeIn } from "./fade-in";
 import { TypingCursor } from "./typing-cursor";
 
 const wordCloud = [
@@ -115,26 +114,19 @@ export function Hero() {
       </div>
 
       <div className="relative mx-auto max-w-4xl text-center">
-        <FadeIn>
+        <h1 className="animate-[fadeUp_0.6s_ease-out_both] text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
-          <h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
           Your images. Stay yours.
         </h1>
-        </FadeIn>
 
-        <FadeIn delay={0.1}>
+        <p className="mt-4 animate-[fadeUp_0.6s_ease-out_0.1s_both] text-lg text-muted md:text-xl">
-          <p className="mt-4 text-lg text-muted md:text-xl">
           The open-source, self-hosted image processing platform.
         </p>
-        </FadeIn>
 
-        <FadeIn delay={0.15}>
+        <p className="mt-4 animate-[fadeUp_0.6s_ease-out_0.2s_both] text-xl font-medium md:text-2xl">
-          <p className="mt-4 text-xl font-medium md:text-2xl">
           <TypingCursor />
         </p>
-        </FadeIn>
 
-        <FadeIn delay={0.2}>
+        <div className="mt-10 animate-[fadeUp_0.6s_ease-out_0.3s_both]">
-          <div className="mt-10">
           <a
             href="https://github.com/ashim-hq/ashim"
             target="_blank"
@@ -147,7 +139,6 @@ export function Hero() {
             </span>
           </a>
         </div>
-        </FadeIn>
       </div>
     </section>
   );

apps/landing/src/styles/globals.css

@@ -18,3 +18,14 @@
 .tool-card:hover {
   border-color: var(--cat-color);
 }
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}