Bob AI: Add animation to the hero section text

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
+        <motion.div
-          title={title}
+          initial={{ opacity: 0, x: -50 }}
-          description={description}
+          animate={{ opacity: 1, x: 0 }}
-          tag={tag}
+          transition={{ duration: 1 }}
-          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)}
+          <TextBox
-          titleClassName={cls("text-7xl font-medium text-balance", titleClassName)}
+            title={title}
-          descriptionClassName={cls("text-lg md:text-xl leading-tight text-balance", descriptionClassName)}
+            description={description}
-          tagClassName={cls("mb-0", tagClassName)}
+            tag={tag}
-          center={true}
+            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}