Add src/app/services/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -6,7 +6,7 @@ import ContactText from '@/components/sections/contact/ContactText';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
@@ -30,89 +30,27 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Services", id: "/services" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="Ohio Green Pros"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroCentered
-      background={{
-        variant: "gradient-bars",
-      }}
+      <HeroSplit
+      background={{ variant: "gradient-bars" }}
       title="Your Trusted Landscaping & Snow Removal Experts in Ohio"
       description="From spring yard cleanup to emergency winter snow removal, we keep your property pristine year-round."
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-happy-young-man-pointing-camera_1262-3266.jpg",
-          alt: "Client 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/man-with-rake-cleaning-leaves-looking-camera_259150-58542.jpg",
-          alt: "Client 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/male-wearing-red-winter-jacket-with-his-hands-snow-shovel_181624-8138.jpg",
-          alt: "Client 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/man-servant-caring-garden_23-2149530843.jpg",
-          alt: "Client 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/concentrated-woman-working-with-flowers-pots-greenhouse-professional-gardeners-aprons-caring-blooming-plants-garden-selective-focus-gardening-activity-summer-concept_74855-12741.jpg",
-          alt: "Client 5",
-        },
-      ]}
-      avatarText="Trusted by 500+ Local Ohio Homeowners"
       buttons={[
-        {
-          text: "Get a Free Quote",
-          href: "#contact",
-        },
-        {
-          text: "Our Services",
-          href: "#features",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Yard Cleanup",
-        },
-        {
-          type: "text",
-          text: "Snow Removal",
-        },
-        {
-          type: "text",
-          text: "Lawn Mowing",
-        },
-        {
-          type: "text",
-          text: "Mulching",
-        },
-        {
-          type: "text",
-          text: "Leaf Removal",
-        },
+        { text: "Get a Free Quote", href: "#contact" },
+        { text: "Our Services", href: "/services" },
       ]}
+      imageSrc="http://img.b2bpic.net/free-photo/man-with-rake-cleaning-leaves-looking-camera_259150-58542.jpg"
+      imageAlt="Landscaping professional in action"
+      imagePosition="right"
     />
   </div>
 
@@ -120,53 +58,10 @@ export default function LandingPage() {
       <InlineImageSplitTextAbout
       useInvertedBackground={true}
       heading={[
-        {
-          type: "text",
-          content: "Professional Landscaping Since 2010",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/someone-trimming-bushes-with-garden-scissors_1157-37101.jpg",
-          alt: "Our professional landscaping crew",
-        },
+        { type: "text", content: "Professional Landscaping Since 2010" },
+        { type: "image", src: "http://img.b2bpic.net/free-photo/someone-trimming-bushes-with-garden-scissors_1157-37101.jpg", alt: "Our professional landscaping crew" },
       ]}
-      buttons={[
-        {
-          text: "Learn More",
-          href: "#contact",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="features" data-section="features">
-      <FeatureCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Spring & Fall Yard Cleanup",
-          description: "Leaf removal, mulching, pruning, and seasonal debris clearing.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-covering-base-hole-after-planting-small-tree-woods_482257-84589.jpg",
-          imageAlt: "Yard Cleanup",
-        },
-        {
-          title: "Emergency Snow Removal",
-          description: "Fast-response plowing and salting for driveways and sidewalks.",
-          imageSrc: "http://img.b2bpic.net/free-photo/stunning-view-footprints-snowy-street-heading-big-house-with-big-windows-trees_181624-11801.jpg",
-          imageAlt: "Snow Removal",
-        },
-        {
-          title: "Lawn Maintenance",
-          description: "Regular mowing, edging, and nutrient treatment for a vibrant lawn.",
-          imageSrc: "http://img.b2bpic.net/free-photo/back-view-man-working-eco-friendly-wind-power-project-with-wind-turbines_23-2148847776.jpg",
-          imageAlt: "Lawn Maintenance",
-        },
-      ]}
-      title="Our Specialized Services"
-      description="Premium seasonal maintenance solutions tailored for Ohio climates."
+      buttons={[{ text: "Learn More", href: "#contact" }]}
     />
   </div>
 
@@ -176,27 +71,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       metrics={[
-        {
-          id: "1",
-          value: "15+",
-          title: "Years Experience",
-          description: "Serving the Ohio community.",
-          imageSrc: "http://img.b2bpic.net/free-photo/male-feet-lawn-rake-near-leaves_259150-58539.jpg",
-        },
-        {
-          id: "2",
-          value: "2k+",
-          title: "Properties Cleared",
-          description: "Successfully cleared yards.",
-          imageSrc: "http://img.b2bpic.net/free-photo/road-way-snow-weather_1150-11181.jpg",
-        },
-        {
-          id: "3",
-          value: "98%",
-          title: "Customer Retention",
-          description: "Satisfied long-term partners.",
-          imageSrc: "http://img.b2bpic.net/free-photo/pile-dry-autumn-leaves-grass-lawn-with-plastic-leaf-rake-sunny-day-close-up-leaf-rake_7502-10271.jpg",
-        },
+        { id: "1", value: "15+", title: "Years Experience", description: "Serving the Ohio community.", imageSrc: "http://img.b2bpic.net/free-photo/male-feet-lawn-rake-near-leaves_259150-58539.jpg" },
+        { id: "2", value: "2k+", title: "Properties Cleared", description: "Successfully cleared yards.", imageSrc: "http://img.b2bpic.net/free-photo/road-way-snow-weather_1150-11181.jpg" },
+        { id: "3", value: "98%", title: "Customer Retention", description: "Satisfied long-term partners.", imageSrc: "http://img.b2bpic.net/free-photo/pile-dry-autumn-leaves-grass-lawn-with-plastic-leaf-rake-sunny-day-close-up-leaf-rake_7502-10271.jpg" },
       ]}
       title="Our Impact in Numbers"
       description="Proven results for residential properties."
@@ -209,41 +86,11 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "1",
-          name: "John Doe",
-          role: "Homeowner",
-          testimonial: "Excellent service. My yard has never looked better.",
-          imageSrc: "http://img.b2bpic.net/free-photo/confident-hispanic-expert-explaining-his-idea_1262-16155.jpg",
-        },
-        {
-          id: "2",
-          name: "Jane Smith",
-          role: "Homeowner",
-          testimonial: "Fast and reliable snow removal. Saved my morning routine.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-woman-holding-blanket_23-2148231823.jpg",
-        },
-        {
-          id: "3",
-          name: "Robert Brown",
-          role: "Property Manager",
-          testimonial: "The cleanup team was incredibly thorough.",
-          imageSrc: "http://img.b2bpic.net/free-photo/friends-going-hiking-winter_23-2150198236.jpg",
-        },
-        {
-          id: "4",
-          name: "Emily Davis",
-          role: "Homeowner",
-          testimonial: "Consistent, professional, and fair pricing.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-goodlooking-bearded-gardener-with-garden-tools-smiling-standing-trees-shadow-crossing-hands-looking-camera-with-relaxed-face-expression_176420-55230.jpg",
-        },
-        {
-          id: "5",
-          name: "Michael Wilson",
-          role: "Homeowner",
-          testimonial: "Highly recommended for seasonal maintenance.",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-inspired-female-florist-standing-greenhouse-holding-potted-plant-looking-purple-flowers-smiling-professional-portrait-copy-space-gardening-job-botany-concept_74855-12858.jpg",
-        },
+        { id: "1", name: "John Doe", role: "Homeowner", testimonial: "Excellent service. My yard has never looked better.", imageSrc: "http://img.b2bpic.net/free-photo/confident-hispanic-expert-explaining-his-idea_1262-16155.jpg" },
+        { id: "2", name: "Jane Smith", role: "Homeowner", testimonial: "Fast and reliable snow removal. Saved my morning routine.", imageSrc: "http://img.b2bpic.net/free-photo/man-woman-holding-blanket_23-2148231823.jpg" },
+        { id: "3", name: "Robert Brown", role: "Property Manager", testimonial: "The cleanup team was incredibly thorough.", imageSrc: "http://img.b2bpic.net/free-photo/friends-going-hiking-winter_23-2150198236.jpg" },
+        { id: "4", name: "Emily Davis", role: "Homeowner", testimonial: "Consistent, professional, and fair pricing.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-goodlooking-bearded-gardener-with-garden-tools-smiling-standing-trees-shadow-crossing-hands-looking-camera-with-relaxed-face-expression_176420-55230.jpg" },
+        { id: "5", name: "Michael Wilson", role: "Homeowner", testimonial: "Highly recommended for seasonal maintenance.", imageSrc: "http://img.b2bpic.net/free-photo/happy-inspired-female-florist-standing-greenhouse-holding-potted-plant-looking-purple-flowers-smiling-professional-portrait-copy-space-gardening-job-botany-concept_74855-12858.jpg" },
       ]}
       title="What Homeowners Say"
       description="Trusted by hundreds across the region."
@@ -255,21 +102,9 @@ export default function LandingPage() {
       textboxLayout="split-description"
       useInvertedBackground={true}
       faqs={[
-        {
-          id: "1",
-          title: "Do you offer free quotes?",
-          content: "Yes, we provide no-obligation free quotes for all projects.",
-        },
-        {
-          id: "2",
-          title: "How does snow removal work?",
-          content: "We arrive within 24 hours of snowfall accumulation.",
-        },
-        {
-          id: "3",
-          title: "Do you operate year-round?",
-          content: "Yes, we handle lawn care in summer and snow removal in winter.",
-        },
+        { id: "1", title: "Do you offer free quotes?", content: "Yes, we provide no-obligation free quotes for all projects." },
+        { id: "2", title: "How does snow removal work?", content: "We arrive within 24 hours of snowfall accumulation." },
+        { id: "3", title: "Do you operate year-round?", content: "Yes, we handle lawn care in summer and snow removal in winter." },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/close-up-hands-holding-smartphone_23-2148683725.jpg"
       mediaAnimation="slide-up"
@@ -282,15 +117,10 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={false}
-      background={{
-        variant: "rotated-rays-animated",
-      }}
+      background={{ variant: "rotated-rays-animated" }}
       text="Ready to get started? Contact us today for a free consultation or a quote."
       buttons={[
-        {
-          text: "Contact Us Now",
-          href: "mailto:info@ohiogreenpros.com",
-        },
+        { text: "Contact Us Now", href: "mailto:info@ohiogreenpros.com" },
       ]}
     />
   </div>
@@ -299,32 +129,8 @@ export default function LandingPage() {
       <FooterBaseReveal
       logoText="Ohio Green Pros"
       columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Services",
-              href: "#features",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Services", href: "/services" }] },
+        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
       ]}
       copyrightText="© 2024 Ohio Green Pros. All rights reserved."
     />
@@ -332,4 +138,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/services/page.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import { useLayoutEffect } from 'react';
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="compact"
+        sizing="largeSmall"
+        background="circleGradient"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/#about" },
+              { name: "Services", id: "/services" },
+              { name: "Contact", id: "/#contact" },
+            ]}
+            brandName="Ohio Green Pros"
+          />
+        </div>
+
+        <div id="services" data-section="features" className="pt-24">
+          <FeatureCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            features={[
+              {
+                title: "Spring & Fall Yard Cleanup",                description: "Leaf removal, mulching, pruning, and seasonal debris clearing.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DIXHmTGT1RD6BIu8pJQeplufOA/uploaded-1778516670956-rv3b4i3h.png",                imageAlt: "Yard Cleanup"
+              },
+              {
+                title: "Emergency Snow Removal",                description: "Fast-response plowing and salting for driveways and sidewalks.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DIXHmTGT1RD6BIu8pJQeplufOA/uploaded-1778516679514-6d058bc9.png",                imageAlt: "Snow Removal"
+              },
+              {
+                title: "Lawn Maintenance",                description: "Regular mowing, edging, and nutrient treatment for a vibrant lawn.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DIXHmTGT1RD6BIu8pJQeplufOA/uploaded-1778516696700-4e0klpju.png",                imageAlt: "Lawn Maintenance"
+              },
+            ]}
+            title="Our Specialized Services"
+            description="Premium seasonal maintenance solutions tailored for Ohio climates."
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Ohio Green Pros"
+            columns={[
+              { title: "Company", items: [{ label: "About Us", href: "/#about" }, { label: "Services", href: "/services" }] },
+              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
+            ]}
+            copyrightText="© 2024 Ohio Green Pros. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fafffb;
-  --card: #f7fffa;
-  --foreground: #001a0a;
-  --primary-cta: #0a7039;
-  --primary-cta-text: #fafffb;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #001a0a;
-  --accent: #a8d9be;
-  --background-accent: #6bbf8e;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #fff5f5e6;
+  --primary-cta: #ff7a7a;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #fff5f5e6;
+  --accent: #737373;
+  --background-accent: #737373;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);