Update src/app/page.tsx

src/app/page.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
@@ -19,7 +20,7 @@ export default function Page() {
           title="Build Your Future" 
           description="Innovation delivered through high-performance components." 
           background={{ variant: "animated-grid" }}
-          carouselItems={[{ id: "1", imageAlt: "Item 1" }, { id: "2" }, { id: "3" }, { id: "4" }, { id: "5" }, { id: "6" }]} 
+          carouselItems={[{ id: "1", imageAlt: "Item 1" }, { id: "2", imageAlt: "Item 2" }, { id: "3", imageAlt: "Item 3" }, { id: "4", imageAlt: "Item 4" }, { id: "5", imageAlt: "Item 5" }, { id: "6", imageAlt: "Item 6" }]} 
         />
       </div>
       <div id="features" data-section="features">
@@ -29,7 +30,7 @@ export default function Page() {
           animationType="slide-up" 
           textboxLayout="default" 
           useInvertedBackground={false}
-          features={[{ id: "1", title: "Speed", author: "Team", description: "Lightning fast performance", tags: ["tech"] }]}
+          features={[{ id: "1", title: "Speed", author: "Team", description: "Lightning fast performance", tags: ["tech"], imageSrc: "https://images.unsplash.com/photo-1506744038136-46273834b3fb" }, { id: "2", title: "Reliability", author: "Team", description: "Always online", tags: ["infra"], imageSrc: "https://images.unsplash.com/photo-1506744038136-46273834b3fb" }]}
         />
       </div>
       <div id="testimonials" data-section="testimonials">
@@ -37,15 +38,18 @@ export default function Page() {
           testimonial="Incredible results!" 
           rating={5} 
           author="Jane Doe" 
+          avatars={[{ src: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde", alt: "Avatar" }]}
           ratingAnimation="slide-up" 
           avatarsAnimation="slide-up" 
+          useInvertedBackground={false}
         />
       </div>
       <div id="faq" data-section="faq">
         <FaqSplitText 
           sideTitle="Questions?" 
-          faqs={[{ id: "1", title: "What is this?", content: "A platform." }]}
+          faqs={[{ id: "1", title: "What is this?", content: "A platform." }, { id: "2", title: "Pricing?", content: "Affordable." }]}
           faqsAnimation="slide-up"
+          useInvertedBackground={false}
         />
       </div>
       <div id="contact" data-section="contact">
@@ -53,7 +57,9 @@ export default function Page() {
           tag="Reach Out" 
           title="Get in Touch" 
           description="We're here to help." 
-          buttons={[{ text: "Email Us" }]} 
+          buttons={[{ text: "Email Us" }]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
         />
       </div>
       <div id="footer" data-section="footer">