src/app/page.tsx

@@ -1,6 +1,5 @@
 'use client';
-
-import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import HeroOverlay from '@/components/sections/hero/HeroOverlay';
 import TextAbout from '@/components/sections/about/TextAbout';
@@ -10,72 +9,31 @@ import FaqBase from '@/components/sections/faq/FaqBase';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
 export default function Page() {
-  const navItems = [{ name: 'Home', id: '/' }];
+  const navItems = [{ name: "Home", id: "/" }];
+  const footerColumns = [{ title: "Company", items: [{ label: "About", href: "/about" }] }];
   
   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>
       <div id="nav" data-section="nav">
         <NavbarStyleApple navItems={navItems} />
       </div>
-      
       <div id="hero" data-section="hero">
-        <HeroOverlay title="Welcome" description="Explore our amazing platform." />
+        <HeroOverlay title="Welcome" description="Explore our cafe" />
       </div>
-      
       <div id="about" data-section="about">
         <TextAbout title="About Us" useInvertedBackground={false} />
       </div>
-      
       <div id="menu" data-section="menu">
-        <ProductCardOne 
-            title="Our Selection" 
-            description="Top quality products" 
-            gridVariant="uniform-all-items-equal"
-            animationType="slide-up"
-            textboxLayout="default"
-            useInvertedBackground={false}
-            products={[
-                { id: '1', name: 'Item 1', price: '$10', imageSrc: 'https://images.unsplash.com/photo-1511556532299-8f662526c06a' },
-                { id: '2', name: 'Item 2', price: '$20', imageSrc: 'https://images.unsplash.com/photo-1511556532299-8f662526c06a' },
-                { id: '3', name: 'Item 3', price: '$30', imageSrc: 'https://images.unsplash.com/photo-1511556532299-8f662526c06a' }
-            ]}
-        />
+        <ProductCardOne title="Our Menu" gridVariant="bento-grid" animationType="slide-up" textboxLayout="default" />
       </div>
-      
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwelve 
-            testimonials={[{ id: '1', name: 'User', imageSrc: 'https://images.unsplash.com/photo-1511556532299-8f662526c06a' }]} 
-            cardTitle="Testimonials" 
-            cardTag="Happy Users" 
-            cardAnimation="slide-up" 
-            useInvertedBackground={false}
-        />
+        <TestimonialCardTwelve testimonials={[]} cardTitle="Reviews" cardAnimation="slide-up" />
       </div>
-      
       <div id="faq" data-section="faq">
-        <FaqBase 
-            title="FAQs" 
-            description="Common questions" 
-            faqs={[{ id: '1', title: 'Question', content: 'Answer' }]} 
-            faqsAnimation="slide-up" 
-            textboxLayout="default" 
-            useInvertedBackground={false}
-        />
+        <FaqBase title="FAQ" faqs={[]} faqsAnimation="slide-up" textboxLayout="default" />
       </div>
-      
       <div id="footer" data-section="footer">
-        <FooterBaseCard columns={[{ title: 'Info', items: [{ label: 'Home', href: '/' }] }]} />
+        <FooterBaseCard columns={footerColumns} />
       </div>
     </ThemeProvider>
   );