Bob AI: Add animation effects to the text elements in the hero secti

Merge version_1 into main

src/app/page.tsx

@@ -4,7 +4,7 @@ import { Award, Clock, Heart, Sparkles, Star, Users } from "lucide-react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import AboutMetric from '@/components/sections/about/AboutMetric';
-import FeatureCardTwentyTwo from '@/components/sections/feature/FeatureCardTwentyTwo';
+import FaqBase from '@/components/sections/faq/FaqBase';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
@@ -95,34 +95,44 @@ export default function RestaurantPage() {
       </div>
 
       <div id="features-section" data-section="features-section">
-        <FeatureCardTwentyTwo
-          features={[
+        <FaqBase
+          faqs={[
             {
-              id: "feature-1",              category: ["Cuisine", "Experience"],
-              title: "Authentic Homemade Recipes",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-brown-wooden-plate-with-vegetables-eggs-seasonings-dark-background-sugar-color-cake-white-tea-cookie-salad-food-biscuit_140725-160796.jpg",              imageAlt: "Delicious homemade pasta dish"
+              id: "faq-1",
+              title: "What are your operating hours?",
+              content: "We're open Monday to Thursday from 11am to 10pm, Friday and Saturday from 11am to 11pm, and Sunday from 12pm to 9pm. We're closed on major holidays."
             },
             {
-              id: "feature-2",              category: ["Ambiance", "Comfort"],
-              title: "Cozy & Inviting Atmosphere",              imageSrc: "https://img.b2bpic.net/free-photo/table-setting-romantic-dinner-wedding-any-occasion-with-candles-dried-flowers-as-decor_169016-11025.jpg?_wi=1",              imageAlt: "Warm and cozy restaurant interior"
+              id: "faq-2",
+              title: "Do you accommodate dietary restrictions?",
+              content: "Absolutely! We offer vegetarian, vegan, gluten-free, and dairy-free options. Please inform your server of any allergies or dietary preferences when ordering."
             },
             {
-              id: "feature-3",              category: ["Service", "Quality"],
-              title: "Exceptional Customer Service",              imageSrc: "https://img.b2bpic.net/free-photo/small-group-happy-friends-laughing-having-fun-while-eating-dinner-dining-table-home_637285-10338.jpg",              imageAlt: "Friendly staff serving customers"
+              id: "faq-3",
+              title: "Can I make a reservation online?",
+              content: "Yes, you can book a table through our website or call us directly at (555) 123-4567. We recommend reservations during peak hours on weekends."
+            },
+            {
+              id: "faq-4",
+              title: "Do you offer catering services?",
+              content: "Yes! We provide catering for events of all sizes. Contact our catering team at catering@warmbite.com or call (555) 123-4568 for custom quotes and menu options."
             }
           ]}
-          animationType="slide-up"
-          title="Why Choose Our Restaurant"
-          description="We blend traditional flavors with modern techniques to create unforgettable dining experiences that warm your heart and satisfy your taste buds."
-          textboxLayout="inline-image"
-          useInvertedBackground={false}
-          tag="Special Features"
-          tagIcon={Sparkles}
+          title="Frequently Asked Questions"
+          description="Find answers to common questions about WarmBite Restaurant, our services, and dining experience."
+          tag="Got Questions?"
           tagAnimation="blur-reveal"
           buttons={[
-            { text: "View Menu", href: "#product-section" },
-            { text: "Book a Table", href: "#contact-section" }
+            { text: "Contact Us", href: "#contact-section", dataWebildId: "faq_contact_btn" },
+            { text: "View Menu", href: "#menu-section", dataWebildId: "faq_menu_btn" }
           ]}
           buttonAnimation="opacity"
+          faqsAnimation="slide-up"
+          textboxLayout="inline-image"
+          useInvertedBackground={true}
+          animationType="smooth"
+          showCard={true}
+          ariaLabel="Restaurant FAQ section"
         />
       </div>
 

src/components/sections/hero/HeroSplitKpi.tsx

@@ -130,6 +130,8 @@ interface HeroSplitKpiProps {
     imagePosition?: "left" | "right";
     className?: string;
     containerClassName?: string;
+    enableTextAnimation?: boolean;
+    textAnimationType?: "fade-in" | "slide-in-up" | "slide-in-down";
     textBoxClassName?: string;
     titleClassName?: string;
     descriptionClassName?: string;