From dede612350a578f54e3874d6b7b14a4e25a1377a Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 24 Mar 2026 03:56:54 +0000
Subject: [PATCH] Update src/app/services/page.tsx

---
 src/app/services/page.tsx | 209 ++++++++++++++++----------------------
 1 file changed, 90 insertions(+), 119 deletions(-)

diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 6d91a18..71d4756 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -2,132 +2,103 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import { Building, Droplet, Feather, Rocket, Wrench } from "lucide-react";
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import { Hammer } from 'lucide-react'; // Fix for Hammer import error
+
+export default function ServicesPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
+    { name: "Services", id: "/services" },
+    { name: "Projects", id: "/before-after" },
+    { name: "Reviews", id: "/reviews" },
+    { name: "Contact", id: "/contact" }
+  ];
 
-export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="rounded"
-        contentWidth="compact"
-        sizing="mediumLargeSizeLargeTitles"
-        background="floatingGradient"
-        cardStyle="layered-gradient"
-        primaryButtonStyle="flat"
-        secondaryButtonStyle="radial-glow"
-        headingFontWeight="bold"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeLargeTitles"
+      background="floatingGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "Home",
-          id: "home",
-          href: "/",
-        },
-        {
-          name: "About",
-          id: "about",
-          href: "/about",
-        },
-        {
-          name: "Services",
-          id: "services",
-          href: "/services",
-        },
-        {
-          name: "Projects",
-          id: "projects",
-          href: "/before-after",
-        },
-        {
-          name: "Reviews",
-          id: "reviews",
-          href: "/reviews",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-          href: "/contact",
-        },
-      ]}
-      brandName="Mr. P Lopez Roofing"
-      button={{
-        text: "Get Free Estimate",
-        href: "/contact",
-      }}
-      animateOnLoad={true}
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={navItems}
+            brandName="Mr. P Lopez Roofing"
+            button={{
+              text: "Get Free Estimate",              href: "/contact"
+            }}
+            animateOnLoad={true}
+          />
+        </div>
+
+        {/* Section: services-section (FeatureCardSix) */}
+        <div id="services-section" data-section="services-section">
+          <FeatureCardSix
+            title="Our Services"
+            description="Comprehensive roofing solutions designed for lasting protection and peace of mind."
+            features={[
+              {
+                id: 1,
+                title: "Roof Repair",                description: "Leak detection & permanent fixes. Emergency repairs when you need them most.",                imageSrc: "http://img.b2bpic.net/free-photo/worker-performs-overhaul-roof-residential-building_181624-61003.jpg",                imageAlt: "Close-up of a roofer repairing a damaged roof"
+              },
+              {
+                id: 2,
+                title: "Flashing Installation",                description: "Expert installation for vents, skylights, and parapet walls to prevent long-term structural damage.",                imageSrc: "http://img.b2bpic.net/free-photo/abstract-daytime-shadows-from-outdoors_23-2149080188.jpg",                imageAlt: "Roofer installing metal flashing around a chimney"
+              },
+              {
+                id: 3,
+                title: "Gutter Solutions",                description: "Replacement & repair, plus drainage correction to eliminate ponding water and protect your foundation.",                imageSrc: "http://img.b2bpic.net/free-photo/bleu-run-scarce-bathroom-washroom_1172-546.jpg",                imageAlt: "Clean rain gutters on a house"
+              },
+              {
+                id: 4,
+                title: "Roof Coating",                description: "Durable aluminum coating to extend your roof's lifespan and enhance energy efficiency.",                imageSrc: "http://img.b2bpic.net/free-photo/modern-skyscrapers-japan-business-district_23-2148836784.jpg",                imageAlt: "Application of protective roof coating"
+              }
+            ]}
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
+
+        {/* Section: services-page-details (FaqSplitMedia) */}
+        <div id="services-page-details" data-section="services-page-details">
+          <FaqSplitMedia
+            title="Comprehensive Roofing Services"
+            description="Learn more about our specialized solutions and how we address common roofing challenges."
+            faqs={[
+              {
+                id: "1",                title: "Flashing Installation",                content: "Why it matters: Flashing is critical for preventing water leaks around chimneys, vents, and skylights. Common mistakes: Many roofers cut corners, leading to long-term structural damage. Our process: We ensure precise, watertight installations that protect your home for years."
+              },
+              {
+                id: "2",                title: "Gutter Repair & Replacement",                content: "Fix drainage issues: We address poor drainage and ponding water to prevent foundation damage. Prevent water damage: Proper gutter function diverts water effectively, safeguarding your home's integrity."
+              },
+              {
+                id: "3",                title: "Roof Repairs",                content: "Leak detection: Our experts precisely locate and permanently fix leaks, even those others miss. Structural fixes: We go beyond surface repairs to ensure the underlying structure is sound and resilient."
+              },
+              {
+                id: "4",                title: "Roof Coating",                content: "Cost-effective alternative: Extend your roof’s lifespan and avoid costly full replacements. Energy efficiency: Our high-quality aluminum coatings also improve insulation and reduce energy bills."
+              }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/man-workbench-using-manual-sandpaper-tool-sander-timber-block_482257-83762.jpg"
+            imageAlt="Close up of roof flashing installation"
+            mediaAnimation="slide-up"
+            mediaPosition="right"
+            faqsAnimation="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="services-overview" data-section="services-overview">
-      <FeatureCardTen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "1",
-          title: "Expert Roof Repair",
-          description: "Swift and reliable repairs for leaks, storm damage, and wear-and-tear to extend your roof's life.",
-          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/man-working-outdoors-high-angle_23-2149714277.jpg",
-            imageAlt: "detailed roof leak detection service",
-          },
-          items: [
-            {
-              icon: Hammer,
-              text: "Leak Detection",
-            },
-            {
-              icon: Droplet,
-              text: "Shingle Replacement",
-            },
-            {
-              icon: Wrench,
-              text: "Emergency Repairs",
-            },
-          ],
-          reverse: false,
-        },
-        {
-          id: "2",
-          title: "New Roof Installation",
-          description: "High-quality new roof installations with a variety of materials tailored to your home's aesthetic and budget.",
-          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/carpenter-man-working-sideways_23-2148748786.jpg?_wi=2",
-            imageAlt: "new roof installation",
-          },
-          items: [
-            {
-              icon: Building,
-              text: "Residential & Commercial",
-            },
-            {
-              icon: Feather,
-              text: "Material Consultation",
-            },
-            {
-              icon: Rocket,
-              text: "Efficient Installation",
-            },
-          ],
-          reverse: true,
-        },
-        {
-          id: "3",
-          title: "Flashing & Chimney Services",
-          description: "Expert flashing installation and repair to prevent water penetration around chimneys, vents, and skylights.",
-        },
-      ]}
-      title="Comprehensive Roofing Solutions for Every Need"
-      description="From minor repairs to complete roof replacements, Mr. P Lopez Roofing provides a full spectrum of services designed to protect and enhance your home. Our expert team uses the latest techniques and highest quality materials to ensure lasting results."
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );