Bob AI: Add fancy animations and visual effects across the website.

src/app/page.tsx

@@ -42,7 +42,193 @@ 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;
+        }
+        @keyframes parallaxShift {
+          0%, 100% { transform: translateY(0px); }
+          50% { transform: translateY(-20px); }
+        }
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes slideInLeft {
+          from {
+            opacity: 0;
+            transform: translateX(-50px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+        @keyframes slideInRight {
+          from {
+            opacity: 0;
+            transform: translateX(50px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+        @keyframes scaleUp {
+          from {
+            opacity: 0;
+            transform: scale(0.95);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+        @keyframes shimmer {
+          0% { background-position: -1000px 0; }
+          100% { background-position: 1000px 0; }
+        }
+        @keyframes float {
+          0%, 100% { transform: translateY(0px); }
+          50% { transform: translateY(-10px); }
+        }
+        .features-section {
+          animation: fadeInUp 1s ease-out forwards;
+        }
+        .feature-card {
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          position: relative;
+          overflow: hidden;
+        }
+        .feature-card::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: -100%;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+          transition: left 0.5s ease;
+        }
+        .feature-card:hover {
+          transform: translateY(-8px) scale(1.02);
+          box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+        }
+        .feature-card:hover::before {
+          left: 100%;
+        }
+        .testimonial-card {
+          animation: fadeInUp 0.8s ease-out forwards;
+          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+          position: relative;
+          background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
+        }
+        .testimonial-card:hover {
+          transform: translateY(-12px) rotateX(5deg);
+          box-shadow: 0 25px 50px rgba(0,0,0,0.2);
+        }
+        .product-card {
+          animation: scaleUp 0.6s ease-out forwards;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          position: relative;
+          overflow: hidden;
+        }
+        .product-card::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,165,0,0.1));
+          opacity: 0;
+          transition: opacity 0.3s ease;
+        }
+        .product-card:hover {
+          transform: translateY(-10px) scale(1.03);
+          box-shadow: 0 30px 60px rgba(0,0,0,0.2);
+        }
+        .product-card:hover::after {
+          opacity: 1;
+        }
+        .gradient-overlay {
+          background: linear-gradient(135deg, rgba(139,69,19,0.7), rgba(210,180,140,0.7));
+          transition: all 0.4s ease;
+        }
+        .smooth-transition {
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .stagger-delay-1 { animation-delay: 0.1s; }
+        .stagger-delay-2 { animation-delay: 0.2s; }
+        .stagger-delay-3 { animation-delay: 0.3s; }
+        .stagger-delay-4 { animation-delay: 0.4s; }
+        .stagger-delay-5 { animation-delay: 0.5s; }
+      `}</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 +249,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 testimonial-card" style={{ animation: 'fadeInUp 0.8s ease-out' }}>
         <TestimonialAboutCard
           tag="Our Story"
           tagIcon={Sparkles}
@@ -72,6 +258,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)}>