package.json

@@ -1,40 +1,34 @@
 {
-  "name": "webild-components",
+  "name": "vite-react-ts-tailwind-starter",
   "private": true,
-  "version": "0.0.1",
+  "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "typecheck": "tsc --noEmit --project tsconfig.app.json"
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.2.2",
-    "clsx": "^2.1.1",
-    "embla-carousel": "^8.6.0",
-    "embla-carousel-react": "^8.6.0",
-    "motion": "^12.38.0",
-    "lucide-react": "^1.7.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-router-dom": "^7.14.0",
-    "tailwind-merge": "^3.5.0",
-    "tailwindcss": "^4.2.2"
+    "animejs": "^3.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.2.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.4",
-    "@types/node": "^24.12.2",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "eslint": "^9.39.4",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^17.4.0",
-    "typescript": "~6.0.2",
-    "typescript-eslint": "^8.58.0",
-    "vite": "^8.0.4"
+    "@types/animejs": "^3.1.12",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
   }
 }

src/components/sections/hero/HeroBillboardTiltedCarousel.tsx

@@ -1,5 +1,6 @@
+import { useEffect } from "react";
+import anime from "animejs";
 import Button from "@/components/ui/Button";
-import TextAnimation from "@/components/ui/TextAnimation";
 import TiltedCarousel from "@/components/ui/TiltedCarousel";
 
 type HeroBillboardTiltedCarouselProps = {
@@ -19,6 +20,31 @@ const HeroBillboardTiltedCarousel = ({
   secondaryButton,
   items,
 }: HeroBillboardTiltedCarouselProps) => {
+  useEffect(() => {
+    anime.timeline({
+      easing: 'easeOutExpo',
+      duration: 900,
+    })
+    .add({
+      targets: '.hero-title',
+      opacity: [0, 1],
+      translateY: [20, 0],
+      delay: 200,
+    })
+    .add({
+      targets: '.hero-description',
+      opacity: [0, 1],
+      translateY: [20, 0],
+      delay: 100,
+    })
+    .add({
+      targets: '.hero-button',
+      opacity: [0, 1],
+      translateY: [20, 0],
+      delay: anime.stagger(100),
+    });
+  }, []);
+
   return (
     <section
       aria-label="Hero section"
@@ -27,23 +53,17 @@ const HeroBillboardTiltedCarousel = ({
       <div className="flex flex-col items-center gap-3 w-content-width mx-auto text-center">
         <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
 
-        <TextAnimation
-          text={title}
-          variant="slide-up"
-          tag="h1"
-          className="text-6xl font-medium text-balance"
-        />
+        <h1 className="hero-title opacity-0 text-6xl font-medium text-balance">
+          {title}
+        </h1>
 
-        <TextAnimation
-          text={description}
-          variant="slide-up"
-          tag="p"
-          className="text-base md:text-lg leading-tight text-balance"
-        />
+        <p className="hero-description opacity-0 text-base md:text-lg leading-tight text-balance">
+          {description}
+        </p>
 
         <div className="flex flex-wrap justify-center gap-3 mt-2">
-          <Button text={primaryButton.text} href={primaryButton.href} variant="primary" animate />
-          <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} />
+          <Button text={primaryButton.text} href={primaryButton.href} variant="primary" className="hero-button opacity-0" />
+          <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" className="hero-button opacity-0" />
         </div>
       </div>