src/app/layout.tsx

@@ -11,8 +11,8 @@ import { Playfair_Display, Inter } from "next/font/google";
 
 
 export const metadata: Metadata = {
-  title: 'Webild | Digital Innovation',
-  description: 'Experience the future of digital innovation with Webild.',
+  title: 'Home | Webild',
+  description: 'Welcome to our platform. Discover our services and features.',
   openGraph: {
     "title": "Cafe Mollie | Your Sanctuary",
     "description": "A place for those starting fresh, catching up, or quietly putting themselves back together.",

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 NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
@@ -7,32 +8,74 @@ import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import { Linkedin, Twitter, Instagram } from 'lucide-react';
 
-export default function Page() {
-  const navItems = [{ name: "Home", id: "/" }];
+export default function HomePage() {
+  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>
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline navItems={navItems} brandName="Webild" button={{ text: "Get Started" }} />
+        <NavbarLayoutFloatingInline navItems={navItems} />
       </div>
       <div id="hero" data-section="hero">
-        <HeroBillboardTestimonial title="Welcome to Webild" description="Experience the future of digital innovation." background={{ variant: "gradient-bars" }} testimonials={[{ name: "Jane Doe", handle: "@janedoe", testimonial: "Fantastic experience!", rating: 5 }]} />
+        <HeroBillboardTestimonial 
+          title="Welcome to Our Platform" 
+          description="Experience the best services tailored for your needs."
+          background={{ variant: "gradient-bars" }}
+          testimonials={[]}
+        />
       </div>
       <div id="about" data-section="about">
-        <MetricSplitMediaAbout title="Our Journey" description="We are committed to delivering excellence through cutting-edge solutions." metrics={[{ value: "10+", title: "Years Experience" }, { value: "500+", title: "Projects Completed" }]} useInvertedBackground={false} mediaAnimation="slide-up" metricsAnimation="slide-up" />
+        <MetricSplitMediaAbout 
+          title="About Us" 
+          description="We provide excellent solutions for our global clients."
+          metrics={[{ value: "10k+", title: "Customers" }, { value: "50+", title: "Countries" }]}
+          useInvertedBackground={false}
+          mediaAnimation="slide-up"
+          metricsAnimation="slide-up"
+        />
       </div>
       <div id="features" data-section="features">
-        <FeatureCardSeven title="Key Features" description="Powerful tools to accelerate your growth." animationType="slide-up" textboxLayout="default" useInvertedBackground={false} features={[{ title: "Scalable Infrastructure", description: "Built to handle high traffic and growth effortlessly."}, { title: "Secure Data", description: "Enterprise-grade security for your peace of mind." }]} />
+        <FeatureCardSeven 
+          title="Our Key Features" 
+          description="Discover what makes us unique."
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          features={[]}
+        />
       </div>
       <div id="menu" data-section="menu">
-        <ProductCardFour title="Our Products" description="Explore our latest offerings." gridVariant="bento-grid" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} products={[{ id: "1", name: "Basic Plan", price: "$19", variant: "Standard", imageSrc: "/placeholder.png" }, { id: "2", name: "Pro Plan", price: "$49", variant: "Advanced", imageSrc: "/placeholder.png" }, { id: "3", name: "Enterprise", price: "$99", variant: "Custom", imageSrc: "/placeholder.png" }]} />
+        <ProductCardFour 
+          title="Our Products" 
+          description="Explore our curated collection of high-quality products."
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          products={[
+            { id: "p1", name: "Basic Plan", price: "$10", variant: "Standard", imageSrc: "/img1.jpg" },
+            { id: "p2", name: "Pro Plan", price: "$20", variant: "Advanced", imageSrc: "/img2.jpg" },
+            { id: "p3", name: "Enterprise", price: "$50", variant: "Custom", imageSrc: "/img3.jpg" }
+          ]}
+        />
       </div>
       <div id="contact" data-section="contact">
-        <ContactSplitForm title="Get in Touch" description="We would love to hear from you." inputs={[{ name: "name", type: "text", placeholder: "Name", required: true }, { name: "email", type: "email", placeholder: "Email", required: true }]} useInvertedBackground={true} />
+        <ContactSplitForm 
+          title="Get in Touch" 
+          description="We are here to help. Send us a message!"
+          inputs={[{ name: "name", type: "text", placeholder: "Name" }, { name: "email", type: "email", placeholder: "Email" }]}
+          useInvertedBackground={false}
+        />
       </div>
       <div id="footer" data-section="footer">
-        <FooterCard logoText="Webild" socialLinks={[{ icon: Linkedin, href: "#", ariaLabel: "LinkedIn" }, { icon: Twitter, href: "#", ariaLabel: "Twitter" }, { icon: Instagram, href: "#", ariaLabel: "Instagram" }]} />
+        <FooterCard 
+          logoText="Webild" 
+        />
       </div>
     </ThemeProvider>
   );