Switch to version 1: modified src/app/page.tsx

Merge version_2 into main

src/app/layout.tsx

@@ -11,8 +11,8 @@ import { Libre_Baskerville, Inter } from "next/font/google";
 
 
 export const metadata: Metadata = {
-  title: 'Welcome to Our Platform',
-  description: 'Experience the future of digital solutions today.',
+  title: 'Innovation Driven Website',
+  description: 'Explore our signature products and expert services.',
   openGraph: {
     "title": "L.B.'s Family Restaurant | Where Every Table Feels Like Home",
     "description": "Thompson's staple diner since day one. Quality food, hearty portions, and community spirit.",

src/app/page.tsx

@@ -1,127 +1,51 @@
-'use client';
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
-import TeamCardOne from '@/components/sections/team/TeamCardOne';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
+"use client";
 
-const navItems = [{ name: "Home", id: "/" }];
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
+import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
+import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
+import ProductCardThree from "@/components/sections/product/ProductCardThree";
+import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
+import TeamCardOne from "@/components/sections/team/TeamCardOne";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
 
 export default function Page() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
+    { name: "Contact", id: "/contact" }
+  ];
+
   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">
-        <NavbarStyleFullscreen 
-          navItems={navItems}
-          logoSrc="/logo.svg"
-          logoAlt="Logo"
-        />
+        <NavbarStyleFullscreen navItems={navItems} />
       </div>
       <div id="hero" data-section="hero">
-        <HeroSplitDoubleCarousel 
-          title="Welcome to Our Platform"
-          description="Experience the future of digital solutions today."
-          background={{ variant: "glowing-orb" }}
-          leftCarouselItems={[{ imageSrc: "/placeholder.jpg", imageAlt: "Hero" }]}
-          rightCarouselItems={[{ imageSrc: "/placeholder.jpg", imageAlt: "Hero" }]}
-        />
+        <HeroSplitDoubleCarousel title="Welcome" description="Experience excellence" background={{ variant: "plain" }} leftCarouselItems={[]} rightCarouselItems={[]} />
       </div>
       <div id="about" data-section="about">
-        <TextSplitAbout 
-          title="About Us"
-          description={["We are a team dedicated to excellence.", "Building the future with passion."]}
-          useInvertedBackground={false}
-        />
+        <TextSplitAbout title="About Us" description={["Leading the industry with innovation."]} useInvertedBackground={false} />
       </div>
       <div id="menu" data-section="menu">
-        <FeatureCardNineteen 
-          title="Our Services"
-          description="Comprehensive services tailored to your needs."
-          textboxLayout="split"
-          useInvertedBackground={false}
-          features={[
-            { tag: "Fast", title: "Service 1", subtitle: "Subtitle", description: "High-speed performance", imageSrc: "/placeholder.jpg" },
-            { tag: "Secure", title: "Service 2", subtitle: "Subtitle", description: "Enterprise-grade security", imageSrc: "/placeholder.jpg" }
-          ]}
-        />
+        <FeatureCardNineteen features={[{ tag: "New", title: "Menu Item", subtitle: "Delicious", description: "Taste our signature dishes" }]} title="Our Menu" description="Handcrafted selection" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="signatures" data-section="signatures">
-        <ProductCardThree 
-          title="Signatures"
-          description="Unique products curated for you."
-          textboxLayout="default"
-          gridVariant="asymmetric-60-wide-40-narrow"
-          animationType="blur-reveal"
-          useInvertedBackground={false}
-          products={[
-            { id: "p1", name: "Signature 1", price: "$10", imageSrc: "/placeholder.jpg" },
-            { id: "p2", name: "Signature 2", price: "$20", imageSrc: "/placeholder.jpg" },
-            { id: "p3", name: "Signature 3", price: "$30", imageSrc: "/placeholder.jpg" }
-          ]}
-        />
+        <ProductCardThree products={[{ id: "1", name: "Signature Dish", price: "$25", imageSrc: "/placeholder.jpg" }, { id: "2", name: "Delight Plate", price: "$30", imageSrc: "/placeholder.jpg" }, { id: "3", name: "Specialty Bowl", price: "$20", imageSrc: "/placeholder.jpg" }]} gridVariant="three-columns-all-equal-width" animationType="slide-up" title="Signatures" description="Must try" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="reviews" data-section="reviews">
-        <TestimonialCardOne 
-          title="Testimonials"
-          description="What our clients say about us."
-          textboxLayout="default"
-          gridVariant="uniform-all-items-equal"
-          animationType="blur-reveal"
-          useInvertedBackground={false}
-          testimonials={[
-            { id: "t1", name: "Client 1", role: "CEO", company: "Comp A", rating: 5 },
-            { id: "t2", name: "Client 2", role: "CTO", company: "Comp B", rating: 5 }
-          ]}
-        />
+        <TestimonialCardOne testimonials={[{ id: "1", name: "Jane Doe", role: "CEO", company: "TechCorp", rating: 5 }]} gridVariant="three-columns-all-equal-width" animationType="slide-up" title="Testimonials" description="What they say" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="atmosphere" data-section="atmosphere">
-        <TeamCardOne 
-          title="Our Team"
-          description="Meet the experts behind our success."
-          textboxLayout="default"
-          gridVariant="uniform-all-items-equal"
-          animationType="blur-reveal"
-          useInvertedBackground={false}
-          members={[
-            { id: "m1", name: "John", role: "Founder", imageSrc: "/placeholder.jpg" },
-            { id: "m2", name: "Jane", role: "Engineer", imageSrc: "/placeholder.jpg" }
-          ]}
-        />
+        <TeamCardOne members={[{ id: "1", name: "John Smith", role: "Chef" }]} gridVariant="three-columns-all-equal-width" animationType="slide-up" title="Our Team" description="Meet the experts" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="contact" data-section="contact">
-        <ContactSplitForm 
-          title="Contact Us"
-          description="Get in touch with our team."
-          useInvertedBackground={false}
-          inputs={[
-            { name: "name", type: "text", placeholder: "Name", required: true },
-            { name: "email", type: "email", placeholder: "Email", required: true }
-          ]}
-          buttonText="Submit"
-        />
+        <ContactSplitForm title="Contact Us" description="Get in touch with our team" inputs={[{ name: "name", type: "text", placeholder: "Your Name", required: true }, { name: "email", type: "email", placeholder: "Your Email", required: true }]} useInvertedBackground={false} />
       </div>
       <div id="footer" data-section="footer">
-        <FooterSimple 
-          bottomLeftText="© 2024 Webild"
-          bottomRightText="All Rights Reserved"
-          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
-        />
+        <FooterSimple columns={[]} bottomLeftText="© 2024 Webild" bottomRightText="hello@example.com" />
       </div>
     </ThemeProvider>
   );