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,6 +80,11 @@ const HeroSignup = ({
     >
       <HeroBackgrounds {...background} />
       <div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
+        <motion.div
+          initial={{ opacity: 0, x: -50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 1 }}
+        >
           <TextBox
             title={title}
             description={description}
@@ -90,6 +96,7 @@ const HeroSignup = ({
             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}