Bob AI: Add a hover animation to testimonial cards that expands them

src/app/page.tsx

@@ -42,7 +42,66 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="hero-section" data-section="hero-section">
+      <style>{`
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        @keyframes parallaxShift {
+          0% { transform: translateY(0px); }
+          100% { transform: translateY(-50px); }
+        }
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes slideInLeft {
+          from {
+            opacity: 0;
+            transform: translateX(-40px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+        @keyframes slideInRight {
+          from {
+            opacity: 0;
+            transform: translateX(40px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+        @keyframes scaleIn {
+          from {
+            opacity: 0;
+            transform: scale(0.95);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+        .hero-parallax {
+          animation: parallaxShift 6s ease-in-out infinite;
+        }
+        .fade-in-up {
+          animation: fadeInUp 0.8s ease-out forwards;
+        }
+        .fade-in {
+          animation: fadeIn 0.8s ease-out forwards;
+        }
+      `}</style>
+      <div id="hero-section" data-section="hero-section" className="hero-parallax">
         <HeroOverlay
           title="Artisan Baked Goods Delivered to Your Doorstep"
           description="Experience the warmth of homemade breads, pastries, and desserts crafted with love using time-honored techniques and the finest ingredients. Every bite tells a story of tradition and passion."
@@ -63,7 +122,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="about-section" data-section="about-section">
+      <div id="about-section" data-section="about-section" className="fade-in-up" style={{ animation: 'fadeInUp 0.8s ease-out' }}>
         <TestimonialAboutCard
           tag="Our Story"
           tagIcon={Sparkles}
@@ -72,6 +131,7 @@ export default function LandingPage() {
           description="For over two decades, we've been baking fresh, handcrafted goods using time-honored techniques passed down through generations."
           subdescription="Every loaf, every pastry, and every treat tells a story of passion, dedication, and the joy of sharing good food with loved ones."
           icon={Heart}
+          className="hover:shadow-2xl transition-all duration-300 transform hover:scale-105"
           imageSrc="https://img.b2bpic.net/free-photo/fresh-bread-hands-closeup-old-wooden-background_169016-3155.jpg"
           imageAlt="Baker preparing fresh pastries in a cozy bakery kitchen"
           mediaAnimation="blur-reveal"

src/components/sections/testimonial/TestimonialCardThirteen.tsx

@@ -96,7 +96,7 @@ const TestimonialCard = memo(({
     const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
 
     return (
-        <div className={cls("relative h-full card rounded-theme-capped p-6 flex flex-col justify-between", showRating ? "gap-5" : "gap-16", cardClassName)}>
+        <div className={cls("relative h-full card rounded-theme-capped p-6 flex flex-col justify-between transition-all duration-300 ease-out hover:w-[50vw]", showRating ? "gap-5" : "gap-16", cardClassName)}>
             <div className={cls("flex flex-col gap-5 items-start", contentWrapperClassName)}>
                 {showRating ? (
                     <div className={cls("relative z-1 flex gap-1", ratingClassName)}>