From 34a568195a8d052020f42e00821d8ea8854d3d2a Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Mon, 9 Feb 2026 18:15:09 +0200
Subject: [PATCH] Bob AI: Add animation to the hero section text

---
 src/components/sections/hero/HeroSignup.tsx | 29 +++++++++++++--------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/sections/hero/HeroSignup.tsx b/src/components/sections/hero/HeroSignup.tsx
index 3325be7..0c3d6b4 100644
--- a/src/components/sections/hero/HeroSignup.tsx
+++ b/src/components/sections/hero/HeroSignup.tsx
@@ -5,6 +5,7 @@ import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/b
 import EmailSignupForm from "@/components/form/EmailSignupForm";
 import { cls } from "@/lib/utils";
 import { LucideIcon } from "lucide-react";
+import { motion } from "framer-motion";
 
 type HeroSignupBackgroundProps = Extract<
   HeroBackgroundVariantProps,
@@ -79,17 +80,23 @@ const HeroSignup = ({
     >
       <HeroBackgrounds {...background} />
       <div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
-        <TextBox
-          title={title}
-          description={description}
-          tag={tag}
-          tagIcon={tagIcon}
-          className={cls("md:max-w-6/10 xl:max-w-45/100 mx-auto flex flex-col gap-3 md:gap-6", textBoxClassName)}
-          titleClassName={cls("text-7xl font-medium text-balance", titleClassName)}
-          descriptionClassName={cls("text-lg md:text-xl leading-tight text-balance", descriptionClassName)}
-          tagClassName={cls("mb-0", tagClassName)}
-          center={true}
-        />
+        <motion.div
+          initial={{ opacity: 0, x: -50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 1 }}
+        >
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            className={cls("md:max-w-6/10 xl:max-w-45/100 mx-auto flex flex-col gap-3 md:gap-6", textBoxClassName)}
+            titleClassName={cls("text-7xl font-medium text-balance", titleClassName)}
+            descriptionClassName={cls("text-lg md:text-xl leading-tight text-balance", descriptionClassName)}
+            tagClassName={cls("mb-0", tagClassName)}
+            center={true}
+          />
+        </motion.div>
         <div className={cls("md:max-w-6/10 xl:max-w-45/100 mx-auto mt-6", formWrapperClassName)}>
           <EmailSignupForm
             inputPlaceholder={inputPlaceholder}