Update src/app/page.tsx

Merge version_9 into main

src/app/page.tsx

@@ -4,13 +4,13 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 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 HeroSplit from '@/components/sections/hero/HeroSplit';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import SplitAbout from '@/components/sections/about/SplitAbout';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import { Leaf, Award, Users } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -55,14 +55,20 @@ export default function LandingPage() {
   </div>
 
   <div id="about" data-section="about">
-      <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" },
-      ]}
-      buttons={[{ text: "Learn More", href: "#contact" }]}
-    />
+      <SplitAbout
+        title="Professional Landscaping Since 2010"
+        description="We are dedicated to providing top-tier landscaping and maintenance services across Ohio, ensuring your property looks its best in every season."
+        imageSrc="http://img.b2bpic.net/free-photo/someone-trimming-bushes-with-garden-scissors_1157-37101.jpg"
+        imagePosition="right"
+        textboxLayout="default"
+        useInvertedBackground={true}
+        bulletPoints={[
+            { title: "Expert Care", description: "Certified professionals for every project.", icon: Leaf },
+            { title: "Proven Track Record", description: "15+ years of dedicated service.", icon: Award },
+            { title: "Community Focused", description: "Trusted by local families and businesses.", icon: Users }
+        ]}
+        buttons={[{ text: "Learn More", href: "#contact" }]}
+      />
   </div>
 
   <div id="metrics" data-section="metrics">

src/app/services/page.tsx

@@ -5,7 +5,6 @@ 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 (