Bob AI: Add animations across multiple sections: fade-in animations

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
@@ -227,31 +227,87 @@ export default function LandingPage() {
         .stagger-delay-3 { animation-delay: 0.3s; }
         .stagger-delay-4 { animation-delay: 0.4s; }
         .stagger-delay-5 { animation-delay: 0.5s; }
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        @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);
+          }
+        }
+        .fade-in-section {
+          animation: fadeInUp 0.8s ease-out forwards;
+          opacity: 0;
+        }
+        .slide-in-card {
+          animation: slideInLeft 0.6s ease-out forwards;
+          opacity: 0;
+        }
+        .scale-on-hover {
+          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .scale-on-hover:hover {
+          transform: scale(1.05);
+        }
+        .card-stagger {
+          animation: slideInLeft 0.6s ease-out forwards;
+          opacity: 0;
+        }
       `}</style>
-      <div id="hero-section" data-section="hero-section">
-        <HeroBillboardCarousel
+      <div id="hero-section" data-section="hero-section" className="fade-in-section">
+        <HeroOverlay
           title="Смакуйте свіжість кожного дня"
           description="Наші ремісничі хлібобулочні вироби готуються з найкращих інгредієнтів та традиційних рецептів. Від хрустких батонів до м'яких тістечок - кожен продукт створений з любов'ю для вас."
-          background={{ variant: "radial-gradient" }}
           tag="Свіжий хліб щодня"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Замовити зараз", href: "#products-section", dataWebildId: "hero_order_btn" },
-            { text: "Дізнатися більше", href: "#about-section", dataWebildId: "hero_learn_btn" }
+            { text: "Замовити зараз", href: "#products-section", dataWebildId: "hero_overlay_order_btn" },
+            { text: "Дізнатися більше", href: "#about-section", dataWebildId: "hero_overlay_learn_btn" }
           ]}
           buttonAnimation="slide-up"
-          mediaItems={[
-            { imageSrc: "https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg", imageAlt: "Свіжий хліб" },
-            { imageSrc: "https://img.b2bpic.net/free-photo/futuristic-moon-background_23-2150930890.jpg", imageAlt: "Тістечка" },
-            { imageSrc: "https://img.b2bpic.net/free-photo/futuristic-city-architecture_23-2151918947.jpg", imageAlt: "Десерти" },
-            { imageSrc: "https://img.b2bpic.net/free-photo/beautiful-landscape-with-mountains_23-2151151078.jpg", imageAlt: "Пекарня" }
-          ]}
+          imageSrc="https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg"
+          imageAlt="Свіжий хліб Теплої Скоринки Пекарні"
+          textPosition="bottom-left"
+          showDimOverlay={true}
+          showBlur={true}
           ariaLabel="Ласкаво просимо до Теплої Скоринки Пекарні"
         />
       </div>
 
-      <div id="about-section" data-section="about-section" className="fade-in-up testimonial-card" style={{ animation: 'fadeInUp 0.8s ease-out' }}>
+       <div id="about-section" data-section="about-section" className="fade-in-section testimonial-card">
         <TestimonialAboutCard
           tag="Наша історія"
           tagIcon={Sparkles}