Merge version_3 into main

Merge version_3 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

@@ -2,10 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
@@ -31,26 +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"
     />
@@ -58,38 +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"
     />
@@ -99,10 +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>
 
@@ -111,241 +69,31 @@ 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",
-          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">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars",
-      }}
-      text="Ready to transform your property? Contact us today for a free consultation and professional installation estimate."
-      buttons={[
-        {
-          text: "Call (555) 012-3456",
-          href: "tel:5550123456",
-        },
-      ]}
-    />
-  </div>
-
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterMedia
       logoText="Elite Fence Pro"
-      leftLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Terms of Service",
-        href: "#",
-      }}
+      imageSrc="http://img.b2bpic.net/free-photo/white-wooden-fence_1122-2087.jpg?_wi=2"
+      columns={[
+        { 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."
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}