Update src/app/services/page.tsx

Merge version_1 into main

src/app/about/page.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="mediumSmall"
+        sizing="mediumLargeSizeMediumTitles"
+        background="aurora"
+        cardStyle="solid"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Service Areas", id: "/service-areas" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="GreenLeaf Landscapes"
+          />
+        </div>
+        <div id="about" data-section="about">
+          <SplitAbout
+            textboxLayout="split"
+            title="The Memphis Homeowners' Trust"
+            description="For over 15 years, we have served Memphis families by transforming ordinary yards into extraordinary sanctuaries. We understand that your home is your greatest investment, and our commitment is to provide the reliable, professional, and high-quality care that Memphis homeowners trust."
+            imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-watering-plants_23-2149098323.jpg"
+            bulletPoints={[]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="GreenLeaf"
+            columns={[
+              { title: "Services", items: [{ label: "Lawn Care", href: "#" }, { label: "Hardscaping", href: "#" }] },
+              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Service Areas", href: "/service-areas" }] }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -32,8 +32,8 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         { name: "Home", id: "hero" },
-        { name: "About", id: "about" },
-        { name: "Services", id: "features" },
+        { name: "About", id: "/about" },
+        { name: "Service Areas", id: "/service-areas" },
         { name: "Contact", id: "contact" }
       ]}
       brandName="GreenLeaf Landscapes"
@@ -166,7 +166,7 @@ export default function LandingPage() {
       logoText="GreenLeaf"
       columns={[
         { title: "Services", items: [{ label: "Lawn Care", href: "#" }, { label: "Hardscaping", href: "#" }] },
-        { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Contact", href: "#" }] }
+        { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Service Areas", href: "/service-areas" }, { label: "Contact", href: "#contact" }] }
       ]}
       copyrightText="© 2024 GreenLeaf Landscapes. All rights reserved."
     />
@@ -174,4 +174,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/portfolio/page.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import ReactLenis from "lenis/react";
+
+export default function PortfolioPage() {
+  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>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "Portfolio", id: "/portfolio" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="GreenLeaf Landscapes"
+          />
+        </div>
+        <div id="products" data-section="products">
+          <ProductCardThree
+            title="Our Portfolio"
+            description="A curated selection of our work across diverse landscape categories."
+            animationType="slide-up"
+            gridVariant="three-columns-all-equal-width"
+            products={[
+              { id: "1", name: "Residential Patio", price: "Hardscape", imageSrc: "http://img.b2bpic.net/free-photo/stone-path-way-garden_74190-3631.jpg" },
+              { id: "2", name: "Commercial Garden", price: "Design", imageSrc: "http://img.b2bpic.net/free-photo/road-surrounded-with-green-tropical-trees-leading-hotel_181624-49537.jpg" },
+              { id: "3", name: "Lush Lawn", price: "Maintenance", imageSrc: "http://img.b2bpic.net/free-photo/worker-is-cutting-grass-with-hose_7502-9835.jpg" }
+            ]}
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="GreenLeaf"
+            columns={[
+              { title: "Portfolio", items: [{ label: "View Gallery", href: "/portfolio" }] },
+              { title: "Company", items: [{ label: "Home", href: "/" }] }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/service-areas/page.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import { MapPin } from 'lucide-react';
+
+export default function ServiceAreasPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="mediumSmall"
+        sizing="mediumLargeSizeMediumTitles"
+        background="aurora"
+        cardStyle="solid"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Service Areas", id: "/service-areas" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="GreenLeaf Landscapes"
+          />
+        </div>
+        <div id="features" data-section="features">
+          <FeatureBorderGlow
+            title="Our Service Areas"
+            description="We proudly serve the Greater Memphis area and surrounding communities."
+            useInvertedBackground={false}
+            animationType="slide-up"
+            textboxLayout="default"
+            features={[
+              { icon: MapPin, title: "Memphis", description: "Serving the heart of the city." },
+              { icon: MapPin, title: "Germantown", description: "High-end landscape design." },
+              { icon: MapPin, title: "Collierville", description: "Reliable maintenance services." },
+              { icon: MapPin, title: "Cordova", description: "Full service landscaping." },
+              { icon: MapPin, title: "Bartlett", description: "Professional garden care." },
+              { icon: MapPin, title: "Arlington", description: "Tailored outdoor solutions." }
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="GreenLeaf"
+            columns={[
+              { title: "Services", items: [{ label: "Lawn Care", href: "#" }, { label: "Hardscaping", href: "#" }] },
+              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Service Areas", href: "/service-areas" }] }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/services/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function ServicesPage() {
+  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>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "Portfolio", id: "/portfolio" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="GreenLeaf Landscapes"
+          />
+        </div>
+        <div id="features" data-section="features">
+          <FeatureCardSeven
+            title="Our Services"
+            description="Expert landscape design and maintenance for your home."
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              { title: "Lawn Care", description: "Professional mowing and maintenance.", imageSrc: "http://img.b2bpic.net/free-photo/lawn-mower-grass.jpg" },
+              { title: "Hardscaping", description: "Custom patios and walkways.", imageSrc: "http://img.b2bpic.net/free-photo/stone-patio.jpg" },
+              { title: "Garden Design", description: "Expert planting and floral design.", imageSrc: "http://img.b2bpic.net/free-photo/garden-design.jpg" }
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="GreenLeaf"
+            columns={[
+              { title: "Services", items: [{ label: "Lawn Care", href: "#" }, { label: "Hardscaping", href: "#" }] },
+              { title: "Company", items: [{ label: "Home", href: "/" }] }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}