Update src/app/page.tsx

src/app/page.tsx

@@ -1,5 +1,6 @@
-'use client';
-import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
 import SplitAbout from '@/components/sections/about/SplitAbout';
@@ -9,79 +10,88 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
-export default function Page() {
+const navItems = [{ name: "Home", id: "/" }];
+
+export default function HomePage() {
   return (
-    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
       <div id="nav" data-section="nav">
-        <NavbarStyleApple navItems={[{ name: "Home", id: "/" }]} brandName="Webild" />
+        <NavbarStyleApple navItems={navItems} brandName="Webild" />
       </div>
       <div id="hero" data-section="hero">
         <HeroBillboardTestimonial 
-          title="Welcome"
-          description="This is our hero section."
-          background={{ variant: "plain" }}
-          testimonials={[]}
+          title="Elevate Your Brand" 
+          description="We build high-performance digital experiences that convert." 
+          background={{ variant: "animated-grid" }} 
+          testimonials={[{ name: "Jane Doe", handle: "@janedoe", testimonial: "Fantastic service!", rating: 5 }]}
         />
       </div>
       <div id="about" data-section="about">
         <SplitAbout 
-          title="About Us"
-          description="Learn more about us."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          mediaAnimation="none"
-          bulletPoints={[]}
+          title="Our Story" 
+          description="Dedicated to excellence in design and development." 
+          textboxLayout="default" 
+          useInvertedBackground={false} 
+          mediaAnimation="opacity" 
+          bulletPoints={[{ title: "Quality", description: "High standards" }, { title: "Speed", description: "Fast delivery" }]}
         />
       </div>
       <div id="menu" data-section="menu">
         <ProductCardFour 
-          title="Our Menu"
-          description="Delicious products."
-          gridVariant="bento-grid"
-          animationType="none"
-          textboxLayout="default"
+          title="Our Services" 
+          description="Explore our offerings" 
+          gridVariant="bento-grid" 
+          animationType="slide-up" 
+          textboxLayout="default" 
           useInvertedBackground={false}
-          products={[
-            { id: "1", name: "Product 1", price: "$10", variant: "A", imageSrc: "/placeholder.png" },
-            { id: "2", name: "Product 2", price: "$20", variant: "B", imageSrc: "/placeholder.png" },
-            { id: "3", name: "Product 3", price: "$30", variant: "C", imageSrc: "/placeholder.png" }
-          ]}
+          products={[{ id: "1", name: "Web Design", price: "$99", variant: "Pro", imageSrc: "/img1.jpg" }, { id: "2", name: "SEO", price: "$49", variant: "Basic", imageSrc: "/img2.jpg" }, { id: "3", name: "Marketing", price: "$199", variant: "Elite", imageSrc: "/img3.jpg" }]}
         />
       </div>
       <div id="faq" data-section="faq">
         <FaqSplitText 
-          faqs={[{ id: "1", title: "Question", content: "Answer" }]}
+          faqs={[{ id: "1", title: "How do I start?", content: "Contact us today!" }, { id: "2", title: "Pricing?", content: "Custom quotes." }]}
           sideTitle="FAQ"
-          faqsAnimation="none"
+          faqsAnimation="slide-up"
           useInvertedBackground={false}
         />
       </div>
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardFifteen 
-          testimonial="Great service!"
-          rating={5}
-          author="John Doe"
-          avatars={[]}
-          ratingAnimation="none"
-          avatarsAnimation="none"
+          testimonial="Best team ever!" 
+          rating={5} 
+          author="John Smith" 
+          avatars={[{ src: "/avatar.jpg", alt: "Author" }]} 
+          ratingAnimation="slide-up" 
+          avatarsAnimation="slide-up" 
           useInvertedBackground={false}
         />
       </div>
       <div id="contact" data-section="contact">
         <ContactCenter 
-          tag="Contact"
-          title="Get in touch"
-          description="Let's talk."
+          tag="Contact" 
+          title="Get in touch" 
+          description="Let's build something great." 
           background={{ variant: "plain" }}
           useInvertedBackground={false}
         />
       </div>
       <div id="footer" data-section="footer">
         <FooterBaseReveal 
-          logoText="Webild"
-          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
+          logoText="Webild" 
+          columns={[{ title: "Navigate", items: [{ label: "Home", href: "/" }] }]}
         />
       </div>
     </ThemeProvider>
   );
-}
+}