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

Merge version_4 into main

src/app/layout.tsx

@@ -11,8 +11,8 @@ import { Playfair_Display, Inter } from "next/font/google";
 
 
 export const metadata: Metadata = {
-  title: 'Welcome',
-  description: 'Welcome to our website',
+  title: 'Osogbo Dining | Elegant Experiences',
+  description: 'Experience the finest dining in Osogbo. Perfect for dates, celebrations, and culinary adventures.',
 };
 
 const playfair = Playfair_Display({ variable: "--font-playfair", subsets: ["latin"] });

src/app/page.tsx

@@ -1,91 +1,101 @@
-"use client";
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
-import MediaAbout from "@/components/sections/about/MediaAbout";
-import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
-import ProductCardFour from "@/components/sections/product/ProductCardFour";
-import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
-import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
-import ContactText from "@/components/sections/contact/ContactText";
-import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+'use client';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
-const navItems = [{ name: "Home", id: "/" }];
-
-export default function HomePage() {
+export default function Page() {
+  const navItems = [{ name: 'Home', id: '/' }];
   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">
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingOverlay navItems={navItems} />
+        <NavbarLayoutFloatingOverlay navItems={navItems} brandName="Webild" />
       </div>
       <div id="hero" data-section="hero">
         <HeroBillboardRotatedCarousel 
-          title="Welcome"
-          description="Experience the best services."
-          background={{ variant: "gradient-bars" }}
-          carouselItems={Array.from({ length: 6 }).map((_, i) => ({ id: `h${i}`, imageSrc: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=2070&auto=format&fit=crop" }))}
+          title="Elevate Your Space"
+          description="Discover our curated collection of premium designs."
+          background={{ variant: 'animated-grid' }}
+          carouselItems={Array(6).fill({ id: '1', imageSrc: 'https://images.unsplash.com/photo-1513519245088-0e12902e5a38?q=80&w=2000' })}
         />
       </div>
       <div id="about" data-section="about">
         <MediaAbout 
-          title="About Us"
-          description="Dedicated to excellence."
+          title="Our Story"
+          description="We craft excellence for your lifestyle."
+          imageSrc="https://images.unsplash.com/photo-1524758631624-e2822e304c36?q=80&w=2000"
           useInvertedBackground={false}
         />
       </div>
       <div id="features" data-section="features">
         <FeatureCardMedia 
-          title="Features"
-          description="Key highlights."
-          animationType="slide-up"
+          title="Key Features"
+          description="Why choose us?"
+          animationType="blur-reveal"
+          features={[{ id: '1', title: 'Quality', description: 'Best materials', tag: 'Top' }, { id: '2', title: 'Design', description: 'Modern aesthetics', tag: 'New' }]}
           textboxLayout="default"
           useInvertedBackground={false}
-          features={[{ id: "f1", title: "Quality", description: "High quality standards.", tag: "Quality" }, { id: "f2", title: "Support", description: "24/7 assistance.", tag: "Support" }]}
         />
       </div>
       <div id="menu" data-section="menu">
         <ProductCardFour 
-          title="Products"
-          description="Browse our collection."
+          title="Our Catalog"
+          description="Hand-picked items for your home."
           gridVariant="bento-grid"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          products={[{ id: "p1", name: "Product 1", price: "$10", variant: "Standard", imageSrc: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=2070&auto=format&fit=crop" }, { id: "p2", name: "Product 2", price: "$20", variant: "Pro", imageSrc: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=2070&auto=format&fit=crop" }, { id: "p3", name: "Product 3", price: "$30", variant: "Elite", imageSrc: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=2070&auto=format&fit=crop" }]}
+          products={[
+            { id: '1', name: 'Chair', price: '$100', variant: 'Oak', imageSrc: 'https://images.unsplash.com/photo-1503602642458-232111445657?q=80&w=800' },
+            { id: '2', name: 'Table', price: '$200', variant: 'Pine', imageSrc: 'https://images.unsplash.com/photo-1533090161767-e6ffed986c88?q=80&w=800' },
+            { id: '3', name: 'Lamp', price: '$50', variant: 'Brass', imageSrc: 'https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?q=80&w=800' }
+          ]}
         />
       </div>
       <div id="reviews" data-section="reviews">
         <TestimonialCardTwo 
-          title="Reviews"
+          title="Testimonials"
           description="What our clients say."
-          animationType="slide-up"
+          animationType="depth-3d"
           textboxLayout="default"
           useInvertedBackground={false}
-          testimonials={[{ id: "t1", name: "John", role: "CEO", testimonial: "Great service!" }, { id: "t2", name: "Jane", role: "CTO", testimonial: "Outstanding experience." }]}
+          testimonials={[
+            { id: '1', name: 'Jane Doe', role: 'Designer', testimonial: 'Absolutely stunning work!' },
+            { id: '2', name: 'John Smith', role: 'Architect', testimonial: 'Quality is unmatched.' }
+          ]}
         />
       </div>
       <div id="metrics" data-section="metrics">
         <MetricCardTwo 
-          title="Impact"
-          description="Our reach."
-          gridVariant="bento-grid"
-          animationType="slide-up"
+          title="Our Impact"
+          description="Building value through design."
+          gridVariant="uniform-all-items-equal"
+          animationType="scale-rotate"
           textboxLayout="default"
           useInvertedBackground={false}
-          metrics={[{ id: "m1", value: "100%", description: "Satisfaction" }, { id: "m2", value: "10k+", description: "Users" }]}
+          metrics={[
+            { id: '1', value: '100+', description: 'Projects Completed' },
+            { id: '2', value: '50+', description: 'Happy Clients' }
+          ]}
         />
       </div>
       <div id="location" data-section="location">
         <ContactText 
           text="Get in touch with us today!"
-          background={{ variant: "gradient-bars" }}
+          background={{ variant: 'gradient-bars' }}
           useInvertedBackground={false}
         />
       </div>
       <div id="footer" data-section="footer">
         <FooterBaseReveal 
-          logoText="Brand"
-          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
+          logoText="Webild"
+          columns={[{ title: 'Links', items: [{ label: 'Home', href: '/' }] }]}
         />
       </div>
     </ThemeProvider>