Update src/app/menu/page.tsx

Merge version_2 into main

src/app/about/page.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+
+export default function AboutPage() {
+  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">
+      <NavbarStyleCentered
+        navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Pricing", id: "/pricing" }, { name: "Contact", id: "/contact" }, { name: "Login", id: "/login" }]}
+        brandName="Elite Fence Pro"
+      />
+      <div className="pt-32">
+        <TextSplitAbout
+          title="About Our Company"
+          description={["Elite Fence Pro provides top-tier fencing services to residential and commercial clients across the nation. We believe in quality, reliability, and security."]}
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/cart/page.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ReactLenis from "lenis/react";
+
+export default function CartPage() {
+  const [cart] = useState([{ id: "p1", name: "Cedar Planks", price: "$45", quantity: 1, imageSrc: "" }]);
+
+  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">
+      <ReactLenis root>
+        <NavbarStyleCentered 
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Menu", id: "/menu" },
+            { name: "Cart", id: "/cart" }
+          ]} 
+          brandName="Elite Fence Pro"
+        />
+        <div className="container mx-auto py-20 px-6">
+          <h1 className="text-4xl font-bold mb-8">Your Cart</h1>
+          {cart.map(item => (
+            <div key={item.id} className="flex items-center justify-between p-6 border-b">
+              <div>{item.name} - {item.price}</div>
+              <div className="flex items-center gap-4">Qty: {item.quantity}</div>
+            </div>
+          ))}
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+
+export default function ContactPage() {
+  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">
+      <NavbarStyleCentered
+        navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Pricing", id: "/pricing" }, { name: "Contact", id: "/contact" }, { name: "Login", id: "/login" }]}
+        brandName="Elite Fence Pro"
+      />
+      <div className="pt-32">
+        <ContactCTA
+          tag="Contact Us"
+          title="Get in Touch"
+          description="We're ready to help you secure your property. Contact us today for a free assessment."
+          buttons={[{ text: "Call (555) 012-3456", href: "tel:5550123456" }]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/login/page.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+
+export default function LoginPage() {
+  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">
+      <NavbarStyleCentered
+        navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Pricing", id: "/pricing" }, { name: "Contact", id: "/contact" }, { name: "Login", id: "/login" }]}
+        brandName="Elite Fence Pro"
+      />
+      <div className="pt-32 flex justify-center items-center min-h-[50vh]">
+        <h1 className="text-4xl font-bold">Login or Register</h1>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/menu/page.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ReactLenis from "lenis/react";
+
+export default function MenuPage() {
+  const [filter, setFilter] = useState("all");
+  const categories = ["all", "wood", "metal", "vinyl"];
+  const items = [
+    { id: 1, name: "Cedar Planks", category: "wood" },
+    { id: 2, name: "Wrought Iron", category: "metal" },
+    { id: 3, name: "Vinyl Panels", category: "vinyl" }
+  ];
+
+  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">
+      <ReactLenis root>
+        <NavbarStyleCentered 
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Menu", id: "/menu" },
+            { name: "Cart", id: "/cart" }
+          ]} 
+          brandName="Elite Fence Pro"
+        />
+        <div className="container mx-auto py-20 px-6">
+          <h1 className="text-4xl font-bold mb-8">Our Catalog</h1>
+          <div className="flex gap-4 mb-8">
+            {categories.map(cat => (
+              <button key={cat} onClick={() => setFilter(cat)} className="px-4 py-2 bg-gray-100 rounded capitalize">{cat}</button>
+            ))}
+          </div>
+          <div className="grid grid-cols-3 gap-6">
+            {items.filter(i => filter === "all" || i.category === filter).map(item => (
+              <div key={item.id} className="p-6 border rounded shadow">{item.name}</div>
+            ))}
+          </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -31,16 +31,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "About",          id: "about"},
-        {
-          name: "Services",          id: "features"},
-        {
-          name: "Products",          id: "products"},
-        {
-          name: "Pricing",          id: "pricing"},
-        {
-          name: "Contact",          id: "contact"},
+        { name: "Home", id: "/" },
+        { name: "About", id: "/about" },
+        { name: "Pricing", id: "/pricing" },
+        { name: "Contact", id: "/contact" },
+        { name: "Login", id: "/login" }
       ]}
       brandName="Elite Fence Pro"
     />
@@ -48,25 +43,14 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardGallery
-      background={{
-        variant: "gradient-bars"}}
+      background={{ variant: "gradient-bars" }}
       title="Secure Your Sanctuary with Elite Fencing"
       description="Professional residential and commercial fencing solutions built to last, providing security and beauty to every property."
-      buttons={[
-        {
-          text: "Get a Quote",          href: "#contact"},
-      ]}
+      buttons={[{ text: "Get a Quote", href: "/contact" }]}
       mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/girl-gray-coat-with-sunglasses-handbag-walking-street-against-iron-fence_627829-8822.jpg?_wi=1",          imageAlt: "Modern residential fence installation"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-female-tourist-carrying-camera-shoulder-looking-building-city_23-2148027183.jpg?_wi=1",          imageAlt: "Wood picket fence backyard"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-japanese-garden_23-2149359734.jpg",          imageAlt: "Ornamental metal fencing"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/architecture-resort-lifestyles-phangan-sunny_1253-673.jpg",          imageAlt: "Beautiful sunny residential fence garden"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/fashion-bearded-hipster-posing-fence-style-diversity_482257-40662.jpg",          imageAlt: "Modern home garden fencing style"},
+        { imageSrc: "http://img.b2bpic.net/free-photo/girl-gray-coat-with-sunglasses-handbag-walking-street-against-iron-fence_627829-8822.jpg?_wi=1", imageAlt: "Modern residential fence installation" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/young-female-tourist-carrying-camera-shoulder-looking-building-city_23-2148027183.jpg?_wi=1", imageAlt: "Wood picket fence backyard" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-japanese-garden_23-2149359734.jpg", imageAlt: "Ornamental metal fencing" }
       ]}
       mediaAnimation="slide-up"
     />
@@ -76,8 +60,7 @@ export default function LandingPage() {
       <TextSplitAbout
       useInvertedBackground={false}
       title="Craftsmanship You Can Trust"
-      description={[
-        "With over 20 years of experience, we specialize in high-quality fencing that combines durability with aesthetic appeal.",        "Our team is dedicated to professional installation and top-tier customer service, ensuring your property is both secure and visually stunning."]}
+      description={["With over 20 years of experience, we specialize in high-quality fencing that combines durability with aesthetic appeal.", "Our team is dedicated to professional installation and top-tier customer service, ensuring your property is both secure and visually stunning."]}
     />
   </div>
 
@@ -86,146 +69,26 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          title: "Wood Fencing",          description: "Classic and customizable wood fences for natural beauty.",          imageSrc: "http://img.b2bpic.net/free-photo/white-wooden-fence_1122-2087.jpg?_wi=1",          imageAlt: "Wood fence example"},
-        {
-          title: "Metal Fencing",          description: "Strong, durable, and secure metal solutions.",          imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-posed-outdoor-street-style-rap-singer_627829-2761.jpg",          imageAlt: "Metal fence example"},
-        {
-          title: "Vinyl Fencing",          description: "Low-maintenance and long-lasting vinyl designs.",          imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-japanese-building-with-fence_23-2149301121.jpg",          imageAlt: "Vinyl fence example"},
+        { title: "Wood Fencing", description: "Classic and customizable wood fences for natural beauty.", imageSrc: "http://img.b2bpic.net/free-photo/white-wooden-fence_1122-2087.jpg?_wi=1" },
+        { title: "Metal Fencing", description: "Strong, durable, and secure metal solutions.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-posed-outdoor-street-style-rap-singer_627829-2761.jpg" },
+        { title: "Vinyl Fencing", description: "Low-maintenance and long-lasting vinyl designs.", imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-japanese-building-with-fence_23-2149301121.jpg" }
       ]}
       title="Our Fencing Solutions"
       description="We offer a diverse range of fencing options to meet every security and style need."
     />
   </div>
 
-  <div id="products" data-section="products">
-      <ProductCardFour
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",          name: "Cedar Planks",          price: "From $45",          variant: "Premium Wood",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-detail-wood-texture_23-2151870253.jpg"},
-        {
-          id: "p2",          name: "Wrought Iron Panels",          price: "From $120",          variant: "Ornamental",          imageSrc: "http://img.b2bpic.net/free-photo/gridlike-fence-pattern-garden_346278-1300.jpg"},
-        {
-          id: "p3",          name: "White Vinyl Panels",          price: "From $85",          variant: "Low Maintenance",          imageSrc: "http://img.b2bpic.net/free-photo/content-woman-carrying-girlfriend-piggyback_23-2147762457.jpg"},
-        {
-          id: "p4",          name: "Aluminum Posts",          price: "From $55",          variant: "Modern",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-city-building-shadows_23-2149283256.jpg"},
-        {
-          id: "p5",          name: "Chain Link Rolls",          price: "From $25",          variant: "Industrial",          imageSrc: "http://img.b2bpic.net/free-photo/basketball-court_1137-169.jpg"},
-        {
-          id: "p6",          name: "Agricultural Wire",          price: "From $30",          variant: "Heavy Duty",          imageSrc: "http://img.b2bpic.net/free-photo/welded-mesh-fence-night_53876-14864.jpg"},
-      ]}
-      title="Explore Our Materials"
-      description="Premium materials selected for their longevity and performance."
-    />
-  </div>
-
-  <div id="pricing" data-section="pricing">
-      <PricingCardNine
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "basic",          title: "Starter Package",          price: "$1,500",          period: "/ project",          features: [
-            "Consultation",            "Site measurement",            "Basic wood install"],
-          button: {
-            text: "Contact us",            href: "#contact"},
-          imageSrc: "http://img.b2bpic.net/free-photo/carpenter-process-professional-tool-precision-drilling-wood_169016-52999.jpg",          imageAlt: "fence contractors working in garden"},
-        {
-          id: "standard",          title: "Professional Package",          price: "$3,200",          period: "/ project",          features: [
-            "Design consultation",            "Custom metal/vinyl",            "Professional install"],
-          button: {
-            text: "Contact us",            href: "#contact"},
-          imageSrc: "http://img.b2bpic.net/free-photo/girl-gray-coat-with-sunglasses-handbag-walking-street-against-iron-fence_627829-8822.jpg?_wi=2",          imageAlt: "fence contractors working in garden"},
-        {
-          id: "premium",          title: "Elite Package",          price: "$5,500+",          period: "/ project",          features: [
-            "Full design",            "Premium materials",            "Priority scheduling"],
-          button: {
-            text: "Contact us",            href: "#contact"},
-          imageSrc: "http://img.b2bpic.net/free-photo/young-female-tourist-carrying-camera-shoulder-looking-building-city_23-2148027183.jpg?_wi=2",          imageAlt: "fence contractors working in garden"},
-      ]}
-      title="Installation Packages"
-      description="Standard service packages tailored to your property size."
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",          name: "John Doe",          imageSrc: "http://img.b2bpic.net/free-photo/charming-student-girl-good-mood-relaxing-home_343059-139.jpg"},
-        {
-          id: "2",          name: "Jane Smith",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-beautiful-blond-hair-gentle-smile-dressed-green-robe-with-belt-is-working-greenhouse_197531-12315.jpg"},
-        {
-          id: "3",          name: "Robert Brown",          imageSrc: "http://img.b2bpic.net/free-photo/attractive-blonde-girl-tulle-skirt-having-fun-stairs-she-is-smiling-down_197531-617.jpg"},
-        {
-          id: "4",          name: "Alice Wilson",          imageSrc: "http://img.b2bpic.net/free-photo/low-angle-woman-enjoying-music_23-2148602721.jpg"},
-        {
-          id: "5",          name: "Mark Davis",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-smiling-garden_23-2150771019.jpg"},
-      ]}
-      cardTitle="Client Reviews"
-      cardTag="Satisfied Customers"
-      cardAnimation="slide-up"
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "q1",          title: "How long does installation take?",          content: "Installation time depends on the project size, typically between 1-3 days."},
-        {
-          id: "q2",          title: "Do you provide permits?",          content: "Yes, we handle all necessary permitting processes for your peace of mind."},
-        {
-          id: "q3",          title: "Do you offer a warranty?",          content: "We offer a 5-year workmanship warranty on all our fence installations."},
-      ]}
-      title="Frequently Asked Questions"
-      description="Common questions about our fencing services."
-      faqsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactCTA
-      tag="Contact Us"
-      title="Let's Discuss Your Project"
-      description="Request a free site assessment and installation quote from our fencing experts."
-      buttons={[
-        {
-            text: "Call (555) 012-3456",            href: "tel:5550123456"
-        }
-      ]}
-      background={{ variant: "plain" }}
-      useInvertedBackground={false}
-    />
-  </div>
-
   <div id="footer" data-section="footer">
       <FooterMedia
       logoText="Elite Fence Pro"
       imageSrc="http://img.b2bpic.net/free-photo/white-wooden-fence_1122-2087.jpg?_wi=2"
       columns={[
-        {
-          title: "Services",          items: [
-            { label: "Wood Fencing", href: "#features" },
-            { label: "Metal Fencing", href: "#features" },
-            { label: "Vinyl Fencing", href: "#features" },
-          ],
-        },
-        {
-          title: "Company",          items: [
-            { label: "About Us", href: "#about" },
-            { label: "Reviews", href: "#testimonials" },
-            { label: "FAQ", href: "#faq" },
-          ],
-        },
+        { title: "Services", items: [{ label: "Fencing", href: "/" }] },
+        { title: "Company", items: [
+          { label: "About Us", href: "/about" },
+          { label: "Contact", href: "/contact" },
+          { label: "Login", href: "/login" }
+        ] }
       ]}
       copyrightText="© 2025 Elite Fence Pro. All rights reserved."
     />