From 7634c4d51061412ba69e74939c49c5cc007992c5 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 10 Mar 2026 09:43:05 +0000
Subject: [PATCH 1/3] Update src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 109 +++++++++++++++++----------------------
 1 file changed, 47 insertions(+), 62 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index a58e36b..976926f 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,26 +1,22 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
 import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
-import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
-import FaqSplitText from "@/components/sections/faq/FaqSplitText";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import { Hammer, Wrench, Droplet, Paintbrush, Zap, MonitorPlay, Armchair, Layers, TrendingUp, Clock, Users, CheckCircle, Star, Facebook, Instagram, Phone } from "lucide-react";
+import ContactFaq from "@/components/sections/contact/ContactFaq";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Hammer, Wrench, Phone, Mail, MessageCircle, CheckCircle } from "lucide-react";
 
 export default function ContactPage() {
   const navItems = [
-    { name: "Home", id: "home" },
+    { name: "Home", id: "/" },
     { name: "Services", id: "services" },
     { name: "About", id: "about" },
-    { name: "Portfolio", id: "portfolio" },
+    { name: "Testimonials", id: "testimonials" },
     { name: "Contact", id: "contact" },
   ];
 
-  const contactButton = {
-    text: "Call Now",    href: "tel:804-938-0669"};
-
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -35,15 +31,16 @@ export default function ContactPage() {
       headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered
+        <NavbarStyleFullscreen
           navItems={navItems}
-          button={contactButton}
           brandName="Earl Boys Services"
+          bottomLeftText="Richmond, VA"
+          bottomRightText="804-938-0669"
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardCarousel
+        <HeroBillboardGallery
           title="Contact Earl Boys Services"
           description="Get in touch with our team for all your home service needs. We're here to help transform your home with professional, reliable service."
           tag="Earl Boys Services"
@@ -61,14 +58,12 @@ export default function ContactPage() {
               imageSrc: "http://img.b2bpic.net/free-photo/woman-electrician-checks-switchboard-tablet-night-shift-smart-service_169016-70936.jpg",              imageAlt: "Licensed electrical work"},
             {
               imageSrc: "http://img.b2bpic.net/free-photo/mechanics-checking-planning-workshop_329181-11868.jpg",              imageAlt: "General maintenance services"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/circular-saw-carpenter-using-circular-saw-wood_169016-17039.jpg",              imageAlt: "Professional flooring installation"},
           ]}
           buttons={[
             {
               text: "Call Now: 804-938-0669",              href: "tel:804-938-0669"},
             {
-              text: "Quick Contact Form",              href: "#contact-form"},
+              text: "Get Free Estimate",              href: "#contact-form"},
           ]}
           buttonAnimation="slide-up"
           ariaLabel="Contact page hero section for Earl Boys Services"
@@ -130,37 +125,8 @@ export default function ContactPage() {
         />
       </div>
 
-      <div id="metrics" data-section="metrics">
-        <MetricCardOne
-          title="Ready to Transform Your Home?"
-          description="Join thousands of satisfied customers who have trusted Earl Boys Services with their most important projects."
-          tag="Contact Details"
-          tagIcon={TrendingUp}
-          metrics={[
-            {
-              id: "1",              value: "804",              title: "938",              description: "Call us directly - Call Now",              icon: Phone,
-            },
-            {
-              id: "2",              value: "15",              title: "Years",              description: "Experience serving Richmond VA",              icon: Clock,
-            },
-            {
-              id: "3",              value: "2000",              title: "Customers",              description: "Trust us for their home services",              icon: Users,
-            },
-            {
-              id: "4",              value: "10",              title: "Services",              description: "Available in your area",              icon: Wrench,
-            },
-          ]}
-          animationType="slide-up"
-          gridVariant="uniform-all-items-equal"
-          textboxLayout="default"
-          useInvertedBackground={true}
-        />
-      </div>
-
-      <div id="faq" data-section="faq">
-        <FaqSplitText
-          sideTitle="Questions About Our Services?"
-          sideDescription="Find answers to common questions about contacting Earl Boys Services, scheduling appointments, and our service offerings."
+      <div id="contact-form" data-section="contact-form">
+        <ContactFaq
           faqs={[
             {
               id: "1",              title: "What is your phone number?",              content: "You can reach us at 804-938-0669. We're available during business hours and offer emergency service for urgent issues."},
@@ -175,30 +141,49 @@ export default function ContactPage() {
             {
               id: "6",              title: "Are you licensed and insured?",              content: "Absolutely. Earl Boys Services is fully licensed, insured, and bonded. We maintain all required certifications."},
           ]}
-          textPosition="left"
-          faqsAnimation="slide-up"
+          ctaTitle="Ready to Get Started?"
+          ctaDescription="Contact Earl Boys Services today for a free estimate and professional home service solutions."
+          ctaButton={{ text: "Call Now", href: "tel:804-938-0669" }}
+          ctaIcon={Phone}
           useInvertedBackground={false}
-          animationType="smooth"
+          animationType="slide-up"
+          accordionAnimationType="smooth"
+          showCard={true}
         />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterCard
-          logoText="Earl Boys Services"
-          copyrightText="© 2025 Earl Boys Services LLC. All rights reserved. Licensed & Insured."
-          socialLinks={[
+        <FooterSimple
+          columns={[
             {
-              icon: Facebook,
-              href: "https://facebook.com",              ariaLabel: "Facebook"},
+              title: "Services",              items: [
+                { label: "Plumbing", href: "/" },
+                { label: "Electrical", href: "/" },
+                { label: "Painting", href: "/" },
+                { label: "Maintenance", href: "/" },
+              ],
+            },
             {
-              icon: Instagram,
-              href: "https://instagram.com",              ariaLabel: "Instagram"},
+              title: "Company",              items: [
+                { label: "About Us", href: "/" },
+                { label: "Contact", href: "/contact" },
+                { label: "Testimonials", href: "/" },
+                { label: "Get Estimate", href: "tel:804-938-0669" },
+              ],
+            },
             {
-              icon: Phone,
-              href: "tel:804-938-0669",              ariaLabel: "Call us"},
+              title: "Contact",              items: [
+                { label: "Phone: 804-938-0669", href: "tel:804-938-0669" },
+                { label: "Richmond, VA", href: "#" },
+                { label: "Licensed & Insured", href: "#" },
+                { label: "Available 24/7", href: "#" },
+              ],
+            },
           ]}
+          bottomLeftText="© 2025 Earl Boys Services LLC. All rights reserved. Licensed & Insured."
+          bottomRightText="Professional Home Services"
         />
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1


From cde48202923630f61f80638a487ddf1f8f9c425f Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 10 Mar 2026 09:43:06 +0000
Subject: [PATCH 2/3] Update src/app/layout.tsx

---
 src/app/layout.tsx | 1435 +-------------------------------------------
 1 file changed, 21 insertions(+), 1414 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 52e371d..9d48c10 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,1433 +1,41 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
 import { Inter } from "next/font/google";
-import { Mulish } from "next/font/google";
-import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
-
-const halant = Halant({
-  variable: "--font-halant",
-  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
+import "./styles/variables.css";
+import "./styles/base.css";
+import { ServiceWrapper } from "@/providers/serviceWrapper/ServiceWrapper";
+import { Tag } from "@/components/tag/Tag";
 
 const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-});
-
-const mulish = Mulish({
-  variable: "--font-mulish",
-  subsets: ["latin"],
+  variable: "--font-inter",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Earl Boys Services - Professional Home Services in Richmond, VA",
-  description: "Expert home services in Richmond, VA. Plumbing, painting, electrical, flooring & more. 15 years trusted service. Call 804-938-0669 for free estimates.",
-  keywords: "home services Richmond VA, plumbing, painting, electrical, home repair, maintenance",
-  robots: {
-    index: true,
-    follow: true,
-  },
-  openGraph: {
-    title: "Earl Boys Services - Home Services in Richmond, VA",
-    description: "Professional home services including plumbing, painting, electrical, flooring & more.",
-    type: "website",
-    siteName: "Earl Boys Services LLC",
-    images: [
-      {
-        url: "http://img.b2bpic.net/free-photo/young-cute-family-repairs-room_1157-24897.jpg",
-        alt: "Earl Boys Services - Professional Home Services",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "Earl Boys Services - Home Services in Richmond, VA",
-    description: "Professional home services including plumbing, painting, electrical, flooring & more. Call 804-938-0669",
-    images: ["http://img.b2bpic.net/free-photo/young-cute-family-repairs-room_1157-24897.jpg"],
-  },
-};
+  title: "Earl Boys Services - Professional Home Services in Richmond VA",  description: "Earl Boys Services offers professional home services including plumbing, electrical, painting, and general maintenance in Richmond, VA and surrounding areas."};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} ${mulish.variable} antialiased`}
-        >
+      <body className={`${inter.variable}`}>
+        <ServiceWrapper>
           <Tag />
           {children}
-        
+        </ServiceWrapper>
         <script
           dangerouslySetInnerHTML={{
             __html: `
-(function() {
-  if (window.self === window.top) return;
-
-  if (window.__webildEditorInitialized) return;
-  window.__webildEditorInitialized = true;
-
-  let isActive = false;
-  let hoveredElement = null;
-  let selectedElement = null;
-  let originalContent = null;
-  let isEditing = false;
-  let elementTypeLabel = null;
-  let hoverOverlay = null;
-  let scrollTimeout = null;
-  let isScrolling = false;
-
-  const invalidElements = ['html', 'body', 'script', 'style', 'meta', 'link', 'head', 'noscript', 'title'];
-  const hoverClass = 'webild-hover';
-  const selectedClass = 'webild-selected';
-
-  const style = document.createElement('style');
-  style.id = 'webild-inspector-styles';
-  style.textContent = '' +
-    '.webild-hover {' +
-    '  outline: 2px dashed #4d96ff80 !important;' +
-    '  border-radius: 0 !important;' +
-    '  outline-offset: 2px !important;' +
-    '  cursor: pointer !important;' +
-    '  transition: outline 0.15s ease !important;' +
-    '  background-color: #4d96ff05 !important;' +
-    '}' +
-    '.webild-selected {' +
-    '  outline: 2px solid #4d96ff !important;' +
-    '  outline-offset: 2px !important;' +
-    '  transition: outline 0.15s ease !important;' +
-    '  background-color: #4d96ff05 !important;' +
-    '  border-radius: 0 !important;' +
-    '}' +
-    '[contenteditable="true"].webild-selected {' +
-    '  outline: 2px solid #4d96ff !important;' +
-    '  background-color: #4d96ff05 !important;' +
-    '}' +
-    'img.webild-hover,' +
-    'img.webild-selected,' +
-    'video.webild-hover,' +
-    'video.webild-selected {' +
-    '  outline-offset: 2px !important;' +
-    '}' +
-    '.webild-element-type-label {' +
-    '  position: fixed !important;' +
-    '  z-index: 999999 !important;' +
-    '  background: #4d96ff !important;' +
-    '  color: white !important;' +
-    '  padding: 4px 8px !important;' +
-    '  font-size: 11px !important;' +
-    '  font-weight: 600 !important;' +
-    '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;' +
-    '  pointer-events: none !important;' +
-    '  white-space: nowrap !important;' +
-    '  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;' +
-    '  letter-spacing: 0.3px !important;' +
-    '  border: 1px solid #4d96ff20 !important;' +
-    '}' +
-    '.webild-element-type-label.label-top {' +
-    '  border-radius: 6px 6px 0 0 !important;' +
-    '}' +
-    '.webild-element-type-label.label-bottom {' +
-    '  border-radius: 0 0 6px 6px !important;' +
-    '}' +
-    '.webild-hover-overlay {' +
-    '  position: fixed !important;' +
-    '  background-color: #4d96ff15 !important;' +
-    '  pointer-events: none !important;' +
-    '  z-index: 999998 !important;' +
-    '  transition: all 0.15s ease !important;' +
-    '}';
-  document.head.appendChild(style);
-  
-  const getUniqueSelector = (element, assignId = false) => {
-    if (element.dataset && element.dataset.webildSelector) {
-      return element.dataset.webildSelector;
-    }
-    
-    const existingId = element.getAttribute('data-webild-id');
-    if (existingId) {
-      return '[data-webild-id="' + existingId + '"]';
-    }
-    
-    if (assignId) {
-      const uniqueId = 'webild-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
-      element.setAttribute('data-webild-id', uniqueId);
-      return '[data-webild-id="' + uniqueId + '"]';
-    }
-    
-    return null;
-  };
-  
-  const getSectionId = (element) => {
-    let current = element;
-    while (current && current !== document.body) {
-      const sectionId = current.getAttribute('data-section');
-      if (sectionId) {
-        return sectionId;
-      }
-      current = current.parentElement;
-    }
-    return 'hero';
-  };
-  
-  const getElementType = (element) => {
-  const tagName = element.tagName.toLowerCase();
-  const computedStyle = window.getComputedStyle(element);
-
-  if (tagName === 'img') {
-    return 'Image';
-  }
-
-  if (tagName === 'video') {
-    return 'Video';
-  }
-
-  const backgroundImage = computedStyle.backgroundImage;
-  if (backgroundImage && backgroundImage !== 'none') {
-    const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
-    if (urlMatch && urlMatch[1] && !urlMatch[1].includes('gradient')) {
-      const area = element.offsetWidth * element.offsetHeight;
-      const hasReasonableSize = area > 1000;
-      const hasFewChildren = element.children.length <= 2;
-      
-      if (hasReasonableSize && hasFewChildren) {
-        return 'Image';
-      }
-    }
-  }
-
-    if (tagName === 'button') return 'Button';
-    if (tagName === 'a' && element.getAttribute('href')) return 'Button';
-    if (element.getAttribute('role') === 'button') return 'Button';
-
-    const buttonClasses = ['btn', 'button', 'cta', 'action-button'];
-    const hasButtonClass = buttonClasses.some(cls =>
-      element.classList.contains(cls) || element.classList.contains(\`btn-\${cls}\`)
-    );
-
-    if (hasButtonClass && element.textContent && element.textContent.trim().length > 0) {
-      return 'Button';
-    }
-
-    const textTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label', 'li'];
-    if (textTags.includes(tagName)) {
-      return 'Text';
-    }
-
-    if (tagName === 'div') {
-      const hasDirectText = Array.from(element.childNodes).some(node => 
-        node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim().length > 0
-      );
-      
-      if (hasDirectText && !element.querySelector('div, section, article, main, header, footer')) {
-        return 'Text';
-      }
-      
-      return 'Div';
-    }
-
-    if (tagName === 'article') {
-      return 'Article';
-    }
-
-    if (tagName === 'a' && !element.getAttribute('href')) {
-      return 'Text';
-    }
-
-    return 'Section';
-  };
-
-  const extractOriginalUrl = (url) => {
-    if (!url) return url;
-
-    if (url.includes('/_next/')) {
-      try {
-        const urlObj = new URL(url);
-        const originalPath = urlObj.searchParams.get('url');
-        if (originalPath) {
-          return originalPath;
-        }
-      } catch (e) {
-        return url;
-      }
-    }
-    
-    if (url.includes('.webild.io/')) {
-      try {
-        const urlObj = new URL(url);
-        return urlObj.pathname;
-      } catch (e) {
-        return url;
-      }
-    }
-
-    return url;
-  };
-
-  const getMediaTypeFromUrl = (url) => {
-    const videoExts = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv', '.m4v', '.wmv'];
-    const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp', '.ico', '.tiff', '.avif'];
-    try {
-      const pathname = new URL(url).pathname.toLowerCase();
-      if (videoExts.some(function(ext) { return pathname.endsWith(ext); })) return 'video';
-      if (imageExts.some(function(ext) { return pathname.endsWith(ext); })) return 'image';
-    } catch(e) {}
-    return 'unknown';
-  };
-
-  const swapMediaElement = (oldEl, newTag, newSrc) => {
-    const newEl = document.createElement(newTag);
-    Array.from(oldEl.attributes).forEach(function(attr) {
-      if (attr.name !== 'src' && attr.name !== 'alt' && attr.name !== 'srcset' && attr.name !== 'autoplay' && attr.name !== 'loop' && attr.name !== 'muted' && attr.name !== 'playsinline') {
-        try { newEl.setAttribute(attr.name, attr.value); } catch(e) {}
-      }
-    });
-    newEl.style.cssText = oldEl.style.cssText;
-    if (newTag === 'video') {
-      newEl.setAttribute('autoplay', '');
-      newEl.setAttribute('loop', '');
-      newEl.setAttribute('muted', '');
-      newEl.setAttribute('playsinline', '');
-    }
-    newEl.src = newSrc;
-    if (oldEl.parentNode) {
-      oldEl.parentNode.replaceChild(newEl, oldEl);
-    }
-    return newEl;
-  };
-
-  const getElementInfo = (element, assignId = false) => {
-    const rect = element.getBoundingClientRect();
-    const tagName = element.tagName.toLowerCase();
-    const selector = getUniqueSelector(element, assignId);
-    const sectionId = getSectionId(element);
-    
-    let className = undefined;
-    try {
-      if (element.className) {
-        if (typeof element.className === 'string') {
-          className = element.className;
-        } else if (element.className.baseVal !== undefined) {
-          className = element.className.baseVal;
-        }
-      }
-    } catch (e) {}
-    
-    const info = {
-      tagName: tagName,
-      id: element.id || undefined,
-      className: className,
-      selector: selector,
-      elementType: null,
-      sectionId: sectionId,
-      boundingBox: {
-        x: rect.left,
-        y: rect.top,
-        width: rect.width,
-        height: rect.height
-      }
-    };
-    
-    if (tagName === 'img') {
-      const originalSrc = extractOriginalUrl(element.src);
-      info.imageData = {
-        src: originalSrc,
-        alt: element.alt || undefined,
-        naturalWidth: element.naturalWidth,
-        naturalHeight: element.naturalHeight,
-        isBackground: false
-      };
-    }
-
-    if (tagName === 'video') {
-      const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
-      const resolvedSrc = extractOriginalUrl(rawSrc);
-      info.imageData = {
-        src: resolvedSrc,
-        alt: element.getAttribute('aria-label') || undefined,
-        isBackground: false,
-        isVideo: true
-      };
-    }
-
-    const computedStyle = window.getComputedStyle(element);
-    const backgroundImage = computedStyle.backgroundImage;
-    if (backgroundImage && backgroundImage !== 'none') {
-      const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
-      if (urlMatch) {
-        const originalBgSrc = extractOriginalUrl(urlMatch[1]);
-        if (tagName !== 'img') {
-          info.imageData = {
-            src: originalBgSrc,
-            isBackground: true
-          };
-        } else {
-          if (!info.imageData) info.imageData = {};
-          info.imageData.backgroundImageSrc = originalBgSrc;
-        }
-      }
-    }
-    
-    const elementType = getElementType(element);
-    info.elementType = elementType;
-    
-    if (elementType === 'Button') {
-      const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
-      const buttonHref = element.getAttribute('href') ||
-                        element.getAttribute('data-href') ||
-                        element.getAttribute('onclick') ||
-                        element.dataset?.link ||
-                        undefined;
-
-      info.buttonData = {
-        text: buttonText,
-        href: buttonHref
-      };
-    }
-
-    if (elementType === 'Text') {
-      info.textContent = element.textContent || '';
-    }
-    
-    return info;
-  };
-  
-  const isValidElement = (element) => {
-    if (!isActive) return false;
-    const tagName = element.tagName?.toLowerCase();
-    if (invalidElements.includes(tagName)) return false;
-    const isImage = tagName === 'img';
-    const isVideo = tagName === 'video';
-    if (isImage || isVideo) return true;
-    const hasInnerHTML = element.innerHTML && element.innerHTML.trim().length > 0;
-    const hasTextContent = element.textContent && element.textContent.trim().length > 0;
-    const hasChildren = element.children && element.children.length > 0;
-    if (!hasInnerHTML && !hasTextContent && !hasChildren) {
-      return false;
-    }
-    const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
-    if (hasBackgroundImage && !hasChildren && !hasTextContent) {
-      return false;
-    }
-    
-    return true;
-  };
-
-  const getMostSpecificElement = (x, y) => {
-    const elements = document.elementsFromPoint(x, y);
-    const validElements = elements.filter(el =>
-      isValidElement(el) &&
-      !el.classList.contains('webild-hover-overlay') &&
-      !el.classList.contains('webild-element-type-label')
-    );
-
-    if (validElements.length === 0) return null;
-    const scoredElements = validElements.map(element => {
-      let score = 0;
-      const rect = element.getBoundingClientRect();
-      const tagName = element.tagName.toLowerCase();
-      const computedStyle = window.getComputedStyle(element);
-      let depth = 0;
-      let current = element;
-      while (current && current !== document.body) {
-        depth++;
-        current = current.parentElement;
-      }
-      score += depth * 2;
-      const hasDirectText = Array.from(element.childNodes).some(node => 
-        node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim().length > 0
-      );
-
-      const hasImages = element.tagName === 'IMG' || element.tagName === 'VIDEO' || computedStyle.backgroundImage !== 'none' || element.querySelector('img') || element.querySelector('video');
-      const isInteractive = ['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(element.tagName);
-      const hasFewChildren = element.children.length <= 3;
-      const area = rect.width * rect.height;
-      const viewportArea = window.innerWidth * window.innerHeight;
-      const isSmallElement = area < viewportArea * 0.1;
-      if (hasDirectText) score += 20;
-      if (hasImages) score += 15;
-      if (isInteractive) score += 25;
-      if (hasFewChildren) score += 10;
-      if (isSmallElement) score += 5;
-      if (area > viewportArea * 0.3) score -= 30;
-      if (element.hasAttribute('data-section')) score -= 15;
-      if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName)) score += 20;
-      if (['p', 'span', 'label'].includes(tagName)) score += 15;
-      if (tagName === 'div' && !hasDirectText && element.children.length > 2) score -= 10;
-
-      return { element, score };
-    });
-    scoredElements.sort((a, b) => b.score - a.score);
-    return scoredElements[0]?.element || validElements[0];
-  };
-
-  const isTextElement = (element) => {
-    const elementType = getElementType(element);
-    return elementType === 'Text';
-  };
-
-  const isButtonElement = (element) => {
-    const elementType = getElementType(element);
-    return elementType === 'Button';
-  };
-
-  const updateButtonText = (element, newText) => {
-    const textNodes = [];
-    const walker = document.createTreeWalker(
-      element,
-      NodeFilter.SHOW_TEXT,
-      null
-    );
-
-    let node;
-    while (node = walker.nextNode()) {
-      if (node.textContent && node.textContent.trim()) {
-        textNodes.push(node);
-      }
-    }
-
-    if (textNodes.length > 0) {
-      textNodes[0].textContent = newText;
-      for (let i = 1; i < textNodes.length; i++) {
-        textNodes[i].textContent = '';
-      }
-    } else {
-      element.textContent = newText;
-    }
-  };
-
-  const makeEditable = (element, clickEvent) => {
-    if (!isTextElement(element)) return;
-    
-    originalContent = element.textContent;
-    element.contentEditable = 'true';
-    
-    if (!element.dataset.webildOriginalWhiteSpace) {
-      const computedStyle = window.getComputedStyle(element);
-      element.dataset.webildOriginalWhiteSpace = computedStyle.whiteSpace;
-      element.dataset.webildOriginalWordWrap = computedStyle.wordWrap;
-      element.dataset.webildOriginalOverflowWrap = computedStyle.overflowWrap;
-      element.dataset.webildOriginalOverflow = computedStyle.overflow;
-    }
-    
-    element.style.whiteSpace = 'pre-wrap';
-    element.style.wordWrap = 'break-word';
-    element.style.overflowWrap = 'break-word';
-    element.style.overflow = 'visible';
-    
-    element.focus();
-    isEditing = true;
-    
-    window.parent.postMessage({
-      type: 'webild-text-editing-started',
-      data: { selector: getElementInfo(element).selector }
-    }, '*');
-    
-    const handleBeforeInput = (e) => {
-      // Prevent deletion if it would leave the element empty
-      const currentText = element.textContent || '';
-      const inputType = e.inputType;
-      
-      // Check if this is a delete operation that would leave the element empty
-      if ((inputType === 'deleteContentBackward' || inputType === 'deleteContentForward' || inputType === 'deleteByCut') && currentText.length <= 1) {
-        e.preventDefault();
-        element.textContent = ' ';
-        // Move cursor to the beginning
-        const range = document.createRange();
-        const sel = window.getSelection();
-        range.setStart(element.firstChild || element, 0);
-        range.collapse(true);
-        sel.removeAllRanges();
-        sel.addRange(range);
-      }
-    };
-    
-    const handleInput = () => {
-      const elementInfo = getElementInfo(element);
-      let currentText = element.textContent;
-      
-      // Ensure there's always at least a space to keep the element editable
-      if (currentText === '' || currentText === null || currentText.length === 0) {
-        element.textContent = ' ';
-        currentText = ' ';
-        // Move cursor to the beginning
-        try {
-          const range = document.createRange();
-          const sel = window.getSelection();
-          range.setStart(element.firstChild || element, 0);
-          range.collapse(true);
-          sel.removeAllRanges();
-          sel.addRange(range);
-        } catch (e) {
-          // Ignore cursor positioning errors
-        }
-      }
-
-      window.parent.postMessage({
-        type: 'webild-element-changed',
-        data: {
-          type: 'updateText',
-          selector: elementInfo.selector,
-          oldValue: originalContent,
-          newValue: currentText,
-          elementType: elementInfo.elementType,
-          sectionId: elementInfo.sectionId,
-          timestamp: Date.now()
-        }
-      }, '*');
-      
-      if (currentText !== originalContent) {
-        window.parent.postMessage({
-          type: 'webild-text-changed',
-          data: { 
-            selector: elementInfo.selector,
-            hasChanges: true
-          }
-        }, '*');
-      }
-    };
-    
-    element.addEventListener('beforeinput', handleBeforeInput);
-    element.addEventListener('input', handleInput);
-    element.dataset.inputHandler = 'true';
-    element.dataset.beforeInputHandler = 'true';
-    
-    if (clickEvent && element.childNodes.length > 0) {
-      try {
-        let range = null;
-        
-        if (document.caretRangeFromPoint) {
-          range = document.caretRangeFromPoint(clickEvent.clientX, clickEvent.clientY);
-        } else if (document.caretPositionFromPoint) {
-          const position = document.caretPositionFromPoint(clickEvent.clientX, clickEvent.clientY);
-          if (position) {
-            range = document.createRange();
-            range.setStart(position.offsetNode, position.offset);
-            range.collapse(true);
-          }
-        }
-        
-        if (range) {
-          const selection = window.getSelection();
-          selection.removeAllRanges();
-          selection.addRange(range);
-        }
-      } catch (e) {
-        console.warn('[Webild] Could not set caret position:', e);
-      }
-    }
-  };
-  
-  const makeUneditable = (element, save = false) => {
-    if (!element || element.contentEditable !== 'true') return;
-    
-    element.contentEditable = 'false';
-    isEditing = false;
-    
-    if (element.dataset.webildOriginalWhiteSpace) {
-      element.style.whiteSpace = element.dataset.webildOriginalWhiteSpace === 'normal' ? '' : element.dataset.webildOriginalWhiteSpace;
-      delete element.dataset.webildOriginalWhiteSpace;
-    }
-    if (element.dataset.webildOriginalWordWrap) {
-      element.style.wordWrap = element.dataset.webildOriginalWordWrap === 'normal' ? '' : element.dataset.webildOriginalWordWrap;
-      delete element.dataset.webildOriginalWordWrap;
-    }
-    if (element.dataset.webildOriginalOverflowWrap) {
-      element.style.overflowWrap = element.dataset.webildOriginalOverflowWrap === 'normal' ? '' : element.dataset.webildOriginalOverflowWrap;
-      delete element.dataset.webildOriginalOverflowWrap;
-    }
-    if (element.dataset.webildOriginalOverflow) {
-      element.style.overflow = element.dataset.webildOriginalOverflow === 'visible' ? '' : element.dataset.webildOriginalOverflow;
-      delete element.dataset.webildOriginalOverflow;
-    }
-    
-    if (element.dataset.beforeInputHandler === 'true') {
-      element.removeEventListener('beforeinput', () => {});
-      delete element.dataset.beforeInputHandler;
-    }
-    
-    if (element.dataset.inputHandler === 'true') {
-      element.removeEventListener('input', () => {});
-      delete element.dataset.inputHandler;
-    }
-    
-    window.parent.postMessage({
-      type: 'webild-text-editing-ended',
-      data: { selector: getElementInfo(element).selector }
-    }, '*');
-    
-    if (save && originalContent !== element.textContent) {
-      const elementInfo = getElementInfo(element);
-      let finalText = element.textContent;
-      
-      // Trim the final text and convert space-only to empty string for saving
-      if (finalText === ' ' || finalText.trim() === '') {
-        finalText = '';
-        // Update the actual element text to empty for display
-        element.textContent = '';
-      }
-      
-      const change = {
-        type: 'updateText',
-        selector: elementInfo.selector,
-        oldValue: originalContent,
-        newValue: finalText,
-        elementType: elementInfo.elementType,
-        sectionId: elementInfo.sectionId,
-        timestamp: Date.now()
-      };
-
-      saveChangeToStorage(change);
-
-      window.parent.postMessage({
-        type: 'webild-element-changed',
-        data: change
-      }, '*');
-    } else if (!save && originalContent !== null) {
-      element.textContent = originalContent;
-    }
-    
-    originalContent = null;
-  };
-  
-  const createHoverOverlay = (element) => {
-    const rect = element.getBoundingClientRect();
-    const overlay = document.createElement('div');
-    overlay.className = 'webild-hover-overlay';
-    overlay.style.cssText = \`
-      position: fixed !important;
-      top: \${rect.top - 2}px !important;
-      left: \${rect.left - 2}px !important;
-      width: \${rect.width + 4}px !important;
-      height: \${rect.height + 4}px !important;
-      background-color: rgba(90, 113, 230, 0.15) !important;
-      pointer-events: none !important;
-      z-index: 999998 !important;
-      transition: all 0.15s ease !important;
-    \`;
-    document.body.appendChild(overlay);
-    return overlay;
-  };
-  
-  const removeHoverOverlay = () => {
-    if (hoverOverlay) {
-      hoverOverlay.remove();
-      hoverOverlay = null;
-    }
-  };
-  
-  const showElementTypeLabel = (element, elementType) => {
-    if (!elementType) return;
-
-    removeElementTypeLabel();
-
-    const rect = element.getBoundingClientRect();
-    elementTypeLabel = document.createElement('div');
-    elementTypeLabel.className = 'webild-element-type-label';
-    const ariaLabel = element.getAttribute('aria-label');
-    let labelText;
-    
-    if (elementType === 'Div') {
-      labelText = 'Div';
-    } else if (elementType === 'Article') {
-      labelText = 'Article';
-    } else if (elementType === 'Section') {
-      labelText = ariaLabel || 'Section';
-    } else {
-      labelText = elementType;
-    }
-    
-    elementTypeLabel.textContent = labelText;
-    document.body.appendChild(elementTypeLabel);
-    const labelRect = elementTypeLabel.getBoundingClientRect();
-    let labelTop = rect.top - labelRect.height - 2;
-    let labelLeft = rect.left - 3;
-    let isLabelOnTop = true;
-    if (labelTop < 0) {
-      labelTop = rect.bottom + 1;
-      isLabelOnTop = false;
-    }
-    if (labelTop + labelRect.height > window.innerHeight) {
-      labelTop = rect.bottom - labelRect.height;
-      isLabelOnTop = false;
-      if (labelTop < 0) {
-        labelTop = rect.top;
-        isLabelOnTop = true;
-      }
-    }
-    if (labelLeft + labelRect.width > window.innerWidth) {
-      labelLeft = window.innerWidth - labelRect.width;
-    }
-    if (labelLeft < 0) {
-      labelLeft = 0;
-    }
-    if (isLabelOnTop) {
-      elementTypeLabel.classList.add('label-top');
-    } else {
-      elementTypeLabel.classList.add('label-bottom');
-    }
-
-    elementTypeLabel.style.cssText = \`
-      left: \${labelLeft}px !important;
-      top: \${labelTop}px !important;
-      transform: none !important;
-    \`;
-  };
-  
-  const removeElementTypeLabel = () => {
-    if (elementTypeLabel) {
-      elementTypeLabel.remove();
-      elementTypeLabel = null;
-    }
-  };
-  
-  const handleMouseOver = (e) => {
-    if (!isActive) return;
-
-    lastMouseX = e.clientX;
-    lastMouseY = e.clientY;
-
-    const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
-
-    if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
-      return;
-    }
-    
-    if (hoveredElement && hoveredElement !== selectedElement) {
-      hoveredElement.classList.remove(hoverClass);
-      if (hoveredElement.dataset.webildOriginalPosition) {
-        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
-        delete hoveredElement.dataset.webildOriginalPosition;
-      }
-      removeHoverOverlay();
-      removeElementTypeLabel();
-    }
-    
-    hoveredElement = target;
-    
-    const computedStyle = window.getComputedStyle(target);
-    const currentPosition = computedStyle.position;
-    
-    if (currentPosition === 'static' || currentPosition === '') {
-      hoveredElement.dataset.webildOriginalPosition = currentPosition || 'none';
-      hoveredElement.style.position = 'relative';
-    }
-    
-    hoveredElement.classList.add(hoverClass);
-    
-    if ((!selectedElement || selectedElement !== target) && !isScrolling) {
-      hoverOverlay = createHoverOverlay(target);
-    }
-    
-    const elementType = getElementType(target);
-    showElementTypeLabel(target, elementType);
-    
-    window.parent.postMessage({
-      type: 'webild-element-hover',
-      data: getElementInfo(target, false)
-    }, '*');
-  };
-  
-  const handleMouseOut = (e) => {
-    if (!isActive) return;
-    
-    if (hoveredElement && hoveredElement !== selectedElement) {
-      hoveredElement.classList.remove(hoverClass);
-      
-      if (hoveredElement.dataset.webildOriginalPosition) {
-        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
-        delete hoveredElement.dataset.webildOriginalPosition;
-      }
-      
-      removeHoverOverlay();
-      removeElementTypeLabel();
-      
-      hoveredElement = null;
-      
-      window.parent.postMessage({
-        type: 'webild-element-hover',
-        data: null
-      }, '*');
-    }
-  };
-  
-  const handleClick = (e) => {
-  if (!isActive) return;
-
-  if (isEditing) {
-    e.stopPropagation();
-    return;
-  }
-
-  e.preventDefault();
-  e.stopPropagation();
-
-  const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;  
-  if (!isValidElement(target)) return;
-    
-    if (selectedElement && selectedElement !== target) {
-      makeUneditable(selectedElement, false);
-      selectedElement.classList.remove(selectedClass);
-      selectedElement.classList.remove(hoverClass);
-      
-      if (selectedElement.dataset.webildOriginalPosition) {
-        selectedElement.style.position = selectedElement.dataset.webildOriginalPosition === 'none' ? '' : selectedElement.dataset.webildOriginalPosition;
-        delete selectedElement.dataset.webildOriginalPosition;
-      }
-      
-      removeHoverOverlay();
-      removeElementTypeLabel();
-    }
-    
-    if (selectedElement === target) {
-      if (target.dataset.webildOriginalPosition) {
-        target.style.position = target.dataset.webildOriginalPosition === 'none' ? '' : target.dataset.webildOriginalPosition;
-        delete target.dataset.webildOriginalPosition;
-      }
-      
-      removeHoverOverlay();
-      removeElementTypeLabel();
-      
-      selectedElement = null;
-      window.parent.postMessage({
-        type: 'webild-element-selected',
-        data: null
-      }, '*');
-      return;
-    }
-    
-    selectedElement = target;
-    selectedElement.classList.add(selectedClass);
-    
-    removeHoverOverlay();
-    removeElementTypeLabel();
-    
-    if (hoveredElement === target) {
-      hoveredElement.classList.remove(hoverClass);
-      hoveredElement = null;
-    }
-    
-    const elementInfo = getElementInfo(target, true);
-    selectedElement.dataset.webildSelector = elementInfo.selector;
-    showElementTypeLabel(target, elementInfo.elementType);
-    
-    window.parent.postMessage({
-      type: 'webild-element-selected',
-      data: elementInfo
-    }, '*');
-    
-    if (isTextElement(target)) {
-      setTimeout(() => makeEditable(target, e), 50);
-    }
-  };
-  
-  const handleKeyDown = (e) => {
-    if (!isActive) return;
-    if (!isEditing || !selectedElement) return;
-    
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      makeUneditable(selectedElement, true);
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      makeUneditable(selectedElement, false);
-    }
-  };
-  
-  const handleBlur = (e) => {
-    if (!isActive) return;
-    if (isEditing && selectedElement && e.target === selectedElement) {
-      makeUneditable(selectedElement, true);
-    }
-  };
-  
-  let lastMouseX = 0;
-  let lastMouseY = 0;
-
-  const handleScroll = () => {
-    if (!isActive) return;
-    
-    if (isEditing) return;
-    
-    if (selectedElement) {
-      makeUneditable(selectedElement, false);
-      selectedElement.classList.remove(selectedClass);
-      if (selectedElement.dataset.webildOriginalPosition) {
-        selectedElement.style.position = selectedElement.dataset.webildOriginalPosition === 'none' ? '' : selectedElement.dataset.webildOriginalPosition;
-        delete selectedElement.dataset.webildOriginalPosition;
-      }
-      selectedElement = null;
-
-      window.parent.postMessage({
-        type: 'webild-element-selected',
-        data: null
-      }, '*');
-    }
-
-    if (hoveredElement) {
-      hoveredElement.classList.remove(hoverClass);
-      if (hoveredElement.dataset.webildOriginalPosition) {
-        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
-        delete hoveredElement.dataset.webildOriginalPosition;
-      }
-      hoveredElement = null;
-
-      window.parent.postMessage({
-        type: 'webild-element-hover',
-        data: null
-      }, '*');
-    }
-
-    removeHoverOverlay();
-    removeElementTypeLabel();
-
-    isScrolling = true;
-
-    if (scrollTimeout) {
-      clearTimeout(scrollTimeout);
-    }
-
-    scrollTimeout = setTimeout(() => {
-      isScrolling = false;
-
-      if (lastMouseX > 0 && lastMouseY > 0) {
-        const target = getMostSpecificElement(lastMouseX, lastMouseY);
-        if (target && isValidElement(target) && target !== selectedElement) {
-          hoveredElement = target;
-
-          const computedStyle = window.getComputedStyle(target);
-          const currentPosition = computedStyle.position;
-
-          if (currentPosition === 'static' || currentPosition === '') {
-            hoveredElement.dataset.webildOriginalPosition = currentPosition || 'none';
-            hoveredElement.style.position = 'relative';
-          }
-
-          hoveredElement.classList.add(hoverClass);
-          hoverOverlay = createHoverOverlay(target);
-
-          const elementType = getElementType(target);
-          showElementTypeLabel(target, elementType);
-
-          window.parent.postMessage({
-            type: 'webild-element-hover',
-            data: getElementInfo(target, false)
-          }, '*');
-        }
-      }
-    }, 150);
-
-    window.parent.postMessage({
-      type: 'webild-iframe-scroll'
-    }, '*');
-  };
-  
-  const getStorageKey = () => {
-    const url = new URL(window.location.href);
-    const pathParts = url.pathname.split('/').filter(Boolean);
-    return \`webild-changes-\${pathParts.join('-')}\`;
-  };
-
-  const saveChangeToStorage = (change) => {
-    try {
-      const storageKey = getStorageKey();
-      const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
-
-      const filteredChanges = existingChanges.filter(c => {
-        return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
-      });
-      filteredChanges.push(change);
-
-      localStorage.setItem(storageKey, JSON.stringify(filteredChanges));
-
-      window.parent.postMessage({
-        type: 'webild-change-saved-locally',
-        data: { change, allChanges: filteredChanges }
-      }, '*');
-    } catch (error) {
-      console.error('Failed to save change to localStorage:', error);
-    }
-  };
-
-  const clearLocalChanges = () => {
-    try {
-      const storageKey = getStorageKey();
-      localStorage.removeItem(storageKey);
-      window.parent.postMessage({
-        type: 'webild-local-changes-cleared',
-        data: {}
-      }, '*');
-    } catch (error) {
-      console.error('Failed to clear local changes:', error);
-    }
-  };
-
-  const handleMessage = (e) => {
-    if (!e.data || !e.data.type) return;
-
-    if (e.data.type === 'webild-activate-editor') {
-      if (!isActive) {
-        isActive = true;
-        window.parent.postMessage({ type: 'webild-editor-activated' }, '*');
-      }
-      return;
-    }
-
-    if (e.data.type === 'webild-deactivate-editor') {
-      if (isActive) {
-        isActive = false;
-
-        if (selectedElement) {
-          makeUneditable(selectedElement, false);
-          selectedElement.classList.remove(selectedClass);
-          selectedElement = null;
-        }
-        if (hoveredElement) {
-          hoveredElement.classList.remove(hoverClass);
-          hoveredElement = null;
-        }
-
-        removeHoverOverlay();
-        removeElementTypeLabel();
-        window.parent.postMessage({ type: 'webild-editor-deactivated' }, '*');
-      }
-      return;
-    }
-
-    if (e.data.type === 'webild-clear-local-changes') {
-      clearLocalChanges();
-      return;
-    }
-
-    if (e.data.type === 'webild-cancel-changes') {
-      try {
-        const storageKey = getStorageKey();
-        const savedChanges = localStorage.getItem(storageKey);
-        if (savedChanges) {
-          const changes = JSON.parse(savedChanges);
-          changes.forEach(change => {
-            try {
-              const element = document.querySelector(change.selector);
-              if (!element) return;
-
-              if (change.type === 'updateText') {
-                if (isTextElement(element)) {
-                  element.textContent = change.oldValue;
-                }
-              } else if (change.type === 'updateButton') {
-                if (isButtonElement(element)) {
-                  updateButtonText(element, change.oldValue);
-                }
-              } else if (change.type === 'replaceImage') {
-                const revertTag = element.tagName.toLowerCase();
-                const isBackground = revertTag !== 'img' && revertTag !== 'video';
-                if (isBackground) {
-                  element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
-                } else {
-                  const oldMediaType = getMediaTypeFromUrl(change.oldValue);
-                  if (revertTag === 'video' && oldMediaType === 'image') {
-                    swapMediaElement(element, 'img', change.oldValue);
-                  } else if (revertTag === 'img' && oldMediaType === 'video') {
-                    swapMediaElement(element, 'video', change.oldValue);
-                  } else if (revertTag === 'video') {
-                    element.src = change.oldValue;
-                    element.load();
-                  } else {
-                    element.src = change.oldValue;
-                  }
-                }
-              }
-            } catch (err) {
-              console.warn('[Webild] Failed to revert change:', err);
-            }
-          });
-        }
-        clearLocalChanges();
-      } catch (error) {
-        console.error('[Webild] Failed to cancel changes:', error);
-      }
-      return;
-    }
-
-    if (e.data.type === 'webild-update-text') {
-      const { selector, newValue, oldValue, sectionId } = e.data.data;
-      try {
-        let element = null;
-        
-        if (selectedElement && isTextElement(selectedElement)) {
-          element = selectedElement;
-        }
-        else if (selector) {
-          try {
-            element = document.querySelector(selector);
-          } catch (err) {
-            console.warn('[Webild] Invalid selector:', selector);
-          }
-        }
-        
-        if (!element && sectionId) {
-          const sectionElement = document.querySelector('[data-section="' + sectionId + '"]');
-          if (sectionElement) {
-            const textElements = sectionElement.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span, a, button, div');
-            for (let i = 0; i < textElements.length; i++) {
-              const el = textElements[i];
-              if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
-                element = el;
-                const newSelector = getUniqueSelector(element, true);
-                if (newSelector) {
-                  element.dataset.webildSelector = newSelector;
-                }
-                break;
-              }
-            }
-          }
-        }
-        
-        if (element && isTextElement(element)) {
-          element.textContent = newValue;
-          const finalSelector = element.dataset.webildSelector || getUniqueSelector(element, true);
-          
-          window.parent.postMessage({
-            type: 'webild-text-update-success',
-            data: {
-              selector: finalSelector,
-              newValue: newValue
-            }
-          }, '*');
-        } else {
-          window.parent.postMessage({
-            type: 'webild-text-update-failed',
-            data: { selector, newValue }
-          }, '*');
-        }
-      } catch (error) {
-        window.parent.postMessage({
-          type: 'webild-text-update-failed',
-          data: { selector, newValue, error: error.message }
-        }, '*');
-      }
-      return;
-    }
-
-    if (e.data.type === 'webild-update-button') {
-      const { selector, text, href } = e.data.data;
-      try {
-        const element = document.querySelector(selector);
-        if (element && isButtonElement(element)) {
-          if (text !== undefined) {
-            updateButtonText(element, text);
-          }
-          if (href !== undefined) {
-            if (element.tagName.toLowerCase() === 'a') {
-              element.href = href;
-            } else {
-              element.setAttribute('data-href', href);
-            }
-          }
-        }
-      } catch (error) {
-        console.error('[Webild] Invalid selector for button update:', selector, error);
-      }
-      return;
-    }
-
-    if (!isActive) return;
-
-    if (e.data.type === 'webild-replace-image') {
-      const { selector, newSrc, isBackground, allowMediaTypeSwap } = e.data.data;
-      let element = null;
-
-      try {
-        element = document.querySelector(selector);
-      } catch {
-        window.parent.postMessage({
-          type: 'webild-image-replacement-error',
-          data: { selector, message: 'Invalid selector: ' + error.message, success: false }
-        }, '*');
-        return;
-      }
-
-      if (!element) {
-        window.parent.postMessage({
-          type: 'webild-image-replacement-error',
-          data: { selector, message: 'Element not found', success: false }
-        }, '*');
-        return;
-      }
-
-      try {
-        let replaced = false;
-        let oldValue = '';
-
-        if (isBackground) {
-          oldValue = window.getComputedStyle(element).backgroundImage;
-          element.style.backgroundImage = \`url('\${newSrc}')\`;
-          replaced = true;
-        } else if (element.tagName.toLowerCase() === 'img') {
-          oldValue = element.src;
-          const newMediaType = getMediaTypeFromUrl(newSrc);
-          if (newMediaType === 'video' && allowMediaTypeSwap) {
-            const swapped = swapMediaElement(element, 'video', newSrc);
-            if (selectedElement === element) selectedElement = swapped;
-            element = swapped;
-          } else {
-            element.src = newSrc;
-          }
-          replaced = true;
-        } else if (element.tagName.toLowerCase() === 'video') {
-          oldValue = element.src || element.currentSrc || '';
-          const newMediaType = getMediaTypeFromUrl(newSrc);
-          const sources = element.querySelectorAll('source');
-          if (newMediaType === 'image' && allowMediaTypeSwap) {
-            const swapped = swapMediaElement(element, 'img', newSrc);
-            if (selectedElement === element) selectedElement = swapped;
-            element = swapped;
-          } else {
-            if (sources.length > 0) {
-              sources.forEach(function(source) { source.src = newSrc; });
-              element.load();
-            } else {
-              element.src = newSrc;
-              element.load();
-            }
-          }
-          replaced = true;
-        } else {
-          const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
-          if (hasBackgroundImage) {
-            oldValue = window.getComputedStyle(element).backgroundImage;
-            element.style.backgroundImage = \`url('\${newSrc}')\`;
-            replaced = true;
-          }
-        }
-
-        if (replaced) {
-          const elementInfo = getElementInfo(element);
-
-          let cleanOldValue = oldValue;
-          if (oldValue.includes('url(')) {
-            const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
-            if (urlMatch) {
-              cleanOldValue = urlMatch[1];
-            }
-          }
-
-          cleanOldValue = extractOriginalUrl(cleanOldValue);
-
-          const change = {
-            type: 'replaceImage',
-            selector: selector,
-            oldValue: cleanOldValue,
-            newValue: newSrc,
-            elementType: elementInfo.elementType,
-            sectionId: elementInfo.sectionId,
-            timestamp: Date.now()
-          };
-
-          saveChangeToStorage(change);
-
-          window.parent.postMessage({
-            type: 'webild-element-changed',
-            data: change
-          }, '*');
-
-          window.parent.postMessage({
-            type: 'webild-image-replaced',
-            data: { selector, newSrc, success: true }
-          }, '*');
-        } else {
-          window.parent.postMessage({
-            type: 'webild-image-replacement-error',
-            data: { selector, message: 'Could not determine how to replace image', success: false }
-          }, '*');
-        }
-      } catch (error) {
-        window.parent.postMessage({
-          type: 'webild-image-replacement-error',
-          data: { selector, message: error.message || 'Failed to replace image', success: false }
-        }, '*');
-      }
-    }
-  };
-  
-  document.addEventListener('mouseover', handleMouseOver, true);
-  document.addEventListener('mouseout', handleMouseOut, true);
-  document.addEventListener('click', handleClick, true);
-  document.addEventListener('keydown', handleKeyDown, true);
-  document.addEventListener('blur', handleBlur, true);
-  window.addEventListener('scroll', handleScroll, true);
-  window.addEventListener('message', handleMessage, true);
-  
-  let lastPathname = window.location.pathname;
-  
-  const notifyPageChange = () => {
-    window.parent.postMessage({
-      type: 'webild-page-changed',
-      data: { pathname: window.location.pathname }
-    }, '*');
-  };
-  
-  window.addEventListener('popstate', () => {
-    if (lastPathname !== window.location.pathname) {
-      lastPathname = window.location.pathname;
-      notifyPageChange();
-    }
-  }, true);
-  
-  const urlCheckInterval = setInterval(() => {
-    if (lastPathname !== window.location.pathname) {
-      lastPathname = window.location.pathname;
-      notifyPageChange();
-    }
-  }, 500);
-  
-  notifyPageChange();
-  
-  window.webildCleanup = () => {
-    isActive = false;
-    
-    if (selectedElement) {
-      makeUneditable(selectedElement, false);
-    }
-    
-    removeHoverOverlay();
-    removeElementTypeLabel();
-    
-    if (urlCheckInterval) {
-      clearInterval(urlCheckInterval);
-    }
-    
-    document.removeEventListener('mouseover', handleMouseOver, true);
-    document.removeEventListener('mouseout', handleMouseOut, true);
-    document.removeEventListener('click', handleClick, true);
-    document.removeEventListener('keydown', handleKeyDown, true);
-    document.removeEventListener('blur', handleBlur, true);
-    window.removeEventListener('scroll', handleScroll, true);
-    window.removeEventListener('message', handleMessage, true);
-    
-    document.querySelectorAll('.' + hoverClass).forEach(el => {
-      el.classList.remove(hoverClass);
-    });
-    document.querySelectorAll('.' + selectedClass).forEach(el => {
-      el.classList.remove(selectedClass);
-    });
-    
-    const styleEl = document.getElementById('webild-inspector-styles');
-    if (styleEl) styleEl.remove();
-    
-    hoveredElement = null;
-    selectedElement = null;
-  };
-  
-  window.parent.postMessage({ type: 'webild-editor-ready' }, '*');
-})();
-`
+              let scrollTimeout;
+              window.addEventListener('scroll', () => {
+                clearTimeout(scrollTimeout);
+                document.documentElement.style.scrollBehavior = 'auto';
+                scrollTimeout = setTimeout(() => {
+                  document.documentElement.style.scrollBehavior = 'smooth';
+                }, 150);
+              }, { passive: true });
+            `,
           }}
         />
       
@@ -2798,7 +1406,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1


From 9af23a3939ffd3b5a00e5e0598321886bf4cb9d2 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 10 Mar 2026 09:43:06 +0000
Subject: [PATCH 3/3] Update src/app/page.tsx

---
 src/app/page.tsx | 358 ++++++++++++++---------------------------------
 1 file changed, 105 insertions(+), 253 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9f2d841..80fb007 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,34 +1,24 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
+import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
 import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
 import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
-import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
-import FaqSplitText from "@/components/sections/faq/FaqSplitText";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import Link from "next/link";
-import {
-  Hammer,
-  Wrench,
-  Droplet,
-  Paintbrush,
-  Zap,
-  MonitorPlay,
-  Armchair,
-  Layers,
-  Clock,
-  Users,
-  CheckCircle,
-  TrendingUp,
-  Star,
-  Facebook,
-  Instagram,
-  Phone,
-} from "lucide-react";
+import ContactFaq from "@/components/sections/contact/ContactFaq";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Hammer, Wrench, Droplet, Paintbrush, Zap, MonitorPlay, CheckCircle, Phone, Mail, MessageCircle } from "lucide-react";
 
 export default function HomePage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Services", id: "services" },
+    { name: "About", id: "about" },
+    { name: "Testimonials", id: "testimonials" },
+    { name: "Contact", id: "contact" },
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -36,184 +26,117 @@ export default function HomePage() {
       borderRadius="rounded"
       contentWidth="smallMedium"
       sizing="mediumLargeSizeLargeTitles"
-      background="noise"
+      background="circleGradient"
       cardStyle="solid"
       primaryButtonStyle="primary-glow"
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered
+        <NavbarStyleFullscreen
+          navItems={navItems}
           brandName="Earl Boys Services"
-          navItems={[
-            { name: "Home", id: "home" },
-            { name: "Services", id: "services" },
-            { name: "About", id: "about" },
-            { name: "Portfolio", id: "portfolio" },
-            { name: "Contact", id: "contact" },
-          ]}
-          button={{
-            text: "Call Now",
-            href: "tel:804-938-0669",
-          }}
+          bottomLeftText="Richmond, VA"
+          bottomRightText="804-938-0669"
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardCarousel
-          title="Professional Home Services in Richmond, VA"
-          description="Expert solutions for all your home improvement, repair, and maintenance needs. 10+ services to transform your home. Call 804-938-0669"
+        <HeroBillboardGallery
+          title="Professional Home Services You Can Trust"
+          description="Earl Boys Services delivers expert plumbing, electrical, painting, and maintenance solutions for your home. With over 15 years of experience serving Richmond, VA, we're committed to quality workmanship and customer satisfaction."
           tag="Earl Boys Services"
           tagIcon={Hammer}
           tagAnimation="slide-up"
-          background={{ variant: "plain" }}
+          background={{ variant: "radial-gradient" }}
           mediaItems={[
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/young-cute-family-repairs-room_1157-24897.jpg?_wi=1",
-              imageAlt: "Professional home services team",
-            },
+              imageSrc: "http://img.b2bpic.net/free-photo/young-cute-family-repairs-room_1157-24897.jpg",              imageAlt: "Professional home services team"},
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721573.jpg?_wi=1",
-              imageAlt: "Expert plumbing services",
-            },
+              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721573.jpg",              imageAlt: "Expert plumbing services"},
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-painting-wall-home_23-2149098981.jpg?_wi=1",
-              imageAlt: "Professional painting services",
-            },
+              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-painting-wall-home_23-2149098981.jpg",              imageAlt: "Professional painting services"},
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/woman-electrician-checks-switchboard-tablet-night-shift-smart-service_169016-70936.jpg?_wi=1",
-              imageAlt: "Licensed electrical work",
-            },
+              imageSrc: "http://img.b2bpic.net/free-photo/woman-electrician-checks-switchboard-tablet-night-shift-smart-service_169016-70936.jpg",              imageAlt: "Licensed electrical work"},
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/mechanics-checking-planning-workshop_329181-11868.jpg?_wi=1",
-              imageAlt: "General maintenance services",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/circular-saw-carpenter-using-circular-saw-wood_169016-17039.jpg?_wi=1",
-              imageAlt: "Professional flooring installation",
-            },
+              imageSrc: "http://img.b2bpic.net/free-photo/mechanics-checking-planning-workshop_329181-11868.jpg",              imageAlt: "General maintenance services"},
           ]}
           buttons={[
             {
-              text: "Call Now: 804-938-0669",
-              href: "tel:804-938-0669",
-            },
+              text: "Call Now",              href: "tel:804-938-0669"},
             {
-              text: "Book a Service",
-              href: "contact",
-            },
+              text: "Get Free Estimate",              href: "#contact"},
           ]}
           buttonAnimation="slide-up"
           ariaLabel="Hero section for Earl Boys Services"
         />
       </div>
 
-      <div id="services-home" data-section="services-home">
+      <div id="social-proof" data-section="social-proof">
+        <SocialProofOne
+          title="Trusted by Homeowners Throughout Richmond"
+          description="Join thousands of satisfied customers who have transformed their homes with Earl Boys Services"
+          tag="Social Proof"
+          tagAnimation="slide-up"
+          names={[
+            "Family Homes",            "Small Businesses",            "Property Managers",            "Real Estate Agents",            "Contractors",            "Building Owners"]}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          speed={40}
+          showCard={true}
+        />
+      </div>
+
+      <div id="services" data-section="services">
         <FeatureCardTwentyFive
+          title="Our Professional Services"
+          description="We provide comprehensive home services to keep your property in top condition"
+          tag="What We Do"
+          tagIcon={Wrench}
           features={[
             {
-              title: "Plumbing Services",
-              description: "Expert plumbing repairs, installations, and maintenance for all your home water systems.",
-              icon: Droplet,
+              title: "Plumbing Services",              description: "Expert repairs, installations, and maintenance for all your plumbing needs.",              icon: Droplet,
               mediaItems: [
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721573.jpg?_wi=2",
-                  imageAlt: "Professional plumbing work",
-                },
+                  imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721573.jpg",                  imageAlt: "Professional plumbing repair"},
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-receiving-box_23-2149103401.jpg?_wi=1",
-                  imageAlt: "Plumbing project completed",
-                },
+                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-s-hand-holding-push-pin-blur-map_23-2147958186.jpg",                  imageAlt: "Plumbing installation work"},
               ],
             },
             {
-              title: "Painting Services",
-              description: "Interior and exterior painting with premium finishes for residential and commercial spaces.",
-              icon: Paintbrush,
+              title: "Electrical Work",              description: "Licensed electrical services including repairs, upgrades, and installations.",              icon: Zap,
               mediaItems: [
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-painting-wall-home_23-2149098981.jpg?_wi=2",
-                  imageAlt: "Professional painting service",
-                },
+                  imageSrc: "http://img.b2bpic.net/free-photo/woman-electrician-checks-switchboard-tablet-night-shift-smart-service_169016-70936.jpg",                  imageAlt: "Electrical panel inspection"},
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-man-choosing-color_23-2148903521.jpg?_wi=1",
-                  imageAlt: "Painting transformation",
-                },
+                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-man-choosing-color_23-2148903521.jpg",                  imageAlt: "Electrical service work"},
               ],
             },
             {
-              title: "Electrical Work",
-              description: "Licensed electrical services including installations, repairs, and safety inspections.",
-              icon: Zap,
+              title: "Painting & Finishing",              description: "Interior and exterior painting with attention to detail and quality finishes.",              icon: Paintbrush,
               mediaItems: [
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/woman-electrician-checks-switchboard-tablet-night-shift-smart-service_169016-70936.jpg?_wi=2",
-                  imageAlt: "Professional electrical work",
-                },
+                  imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-painting-wall-home_23-2149098981.jpg",                  imageAlt: "Professional painting service"},
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/young-couple-moving-new-home_23-2149242082.jpg?_wi=1",
-                  imageAlt: "Electrical project completed",
-                },
+                  imageSrc: "http://img.b2bpic.net/free-photo/young-couple-moving-new-home_23-2149242082.jpg",                  imageAlt: "Interior painting project"},
               ],
             },
             {
-              title: "Wall Mounting",
-              description: "Professional TV mounting, shelving installation, and wall customization services.",
-              icon: MonitorPlay,
+              title: "General Maintenance",              description: "Comprehensive home maintenance and repairs to keep everything running smoothly.",              icon: Wrench,
               mediaItems: [
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-builder-men-with-smartphones_23-2148751993.jpg?_wi=1",
-                  imageAlt: "Professional wall mounting",
-                },
+                  imageSrc: "http://img.b2bpic.net/free-photo/mechanics-checking-planning-workshop_329181-11868.jpg",                  imageAlt: "General maintenance work"},
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-receiving-box_23-2149103401.jpg?_wi=2",
-                  imageAlt: "Wall mounting installation",
-                },
-              ],
-            },
-            {
-              title: "Furniture Assembly",
-              description: "Quick and efficient furniture assembly for residential and commercial installations.",
-              icon: Armchair,
-              mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-hitting-nail-by-hammer_329181-3740.jpg?_wi=1",
-                  imageAlt: "Professional furniture assembly",
-                },
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-man-choosing-color_23-2148903521.jpg?_wi=2",
-                  imageAlt: "Furniture installation completed",
-                },
-              ],
-            },
-            {
-              title: "Flooring Installation",
-              description: "Expert flooring installation for hardwood, tile, laminate, and other materials.",
-              icon: Layers,
-              mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/circular-saw-carpenter-using-circular-saw-wood_169016-17039.jpg?_wi=2",
-                  imageAlt: "Professional flooring installation",
-                },
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/young-couple-moving-new-home_23-2149242082.jpg?_wi=2",
-                  imageAlt: "Flooring project transformation",
-                },
+                  imageSrc: "http://img.b2bpic.net/free-photo/circular-saw-carpenter-using-circular-saw-wood_169016-17039.jpg",                  imageAlt: "General repair services"},
               ],
             },
           ]}
           animationType="slide-up"
-          title="Our Expert Services"
-          description="Comprehensive home services tailored to your needs. From plumbing to painting, we handle it all with professional excellence."
-          tag="10 Services"
-          tagIcon={Wrench}
           textboxLayout="default"
           useInvertedBackground={false}
           buttons={[
             {
-              text: "View All Services",
-              href: "/services",
-            },
+              text: "Request Service",              href: "tel:804-938-0669"},
           ]}
           buttonAnimation="slide-up"
         />
@@ -223,147 +146,76 @@ export default function HomePage() {
         <TestimonialCardTwelve
           testimonials={[
             {
-              id: "1",
-              name: "Sarah Johnson",
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-businessman-close-up_23-2148746290.jpg",
-              imageAlt: "Sarah Johnson testimonial",
-            },
+              id: "1",              name: "Sarah Johnson",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-man-wearing-casual-clothes_23-2149199815.jpg",              imageAlt: "Sarah Johnson testimonial"},
             {
-              id: "2",
-              name: "Michael Chen",
-              imageSrc: "http://img.b2bpic.net/free-photo/happy-man-with-thumbs-up_1187-3144.jpg",
-              imageAlt: "Michael Chen testimonial",
-            },
+              id: "2",              name: "Michael Chen",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-woman-wearing-casual-clothes_23-2149199814.jpg",              imageAlt: "Michael Chen testimonial"},
             {
-              id: "3",
-              name: "Emily Rodriguez",
-              imageSrc: "http://img.b2bpic.net/free-photo/headshot-euphoric-successful-businesswoman_273609-13789.jpg",
-              imageAlt: "Emily Rodriguez testimonial",
-            },
+              id: "3",              name: "Emma Davis",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-man-casual-clothes_23-2149199813.jpg",              imageAlt: "Emma Davis testimonial"},
             {
-              id: "4",
-              name: "David Williams",
-              imageSrc: "http://img.b2bpic.net/free-photo/young-man-holding-house-model-t-shirt-jacket-cap-looking-amazed-front-view_176474-57861.jpg",
-              imageAlt: "David Williams testimonial",
-            },
+              id: "4",              name: "James Wilson",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-casual-clothes_23-2149199812.jpg",              imageAlt: "James Wilson testimonial"},
           ]}
-          cardTitle="Over 2,000+ satisfied customers trust Earl Boys Services for their home improvement needs"
-          cardTag="Customer Reviews"
-          cardTagIcon={Star}
+          cardTitle="Over 2,000 homeowners trust Earl Boys Services for their most important projects"
+          cardTag="Testimonials"
           cardAnimation="slide-up"
           useInvertedBackground={false}
         />
       </div>
 
-      <div id="metrics" data-section="metrics">
-        <MetricCardOne
-          metrics={[
-            {
-              id: "1",
-              value: "15",
-              title: "Years",
-              description: "In business serving Richmond VA",
-              icon: Clock,
-            },
-            {
-              id: "2",
-              value: "2000",
-              title: "Customers",
-              description: "Satisfied homeowners and businesses",
-              icon: Users,
-            },
-            {
-              id: "3",
-              value: "98",
-              title: "Percent",
-              description: "Customer satisfaction rating",
-              icon: CheckCircle,
-            },
-            {
-              id: "4",
-              value: "10",
-              title: "Services",
-              description: "Complete home service solutions",
-              icon: Wrench,
-            },
-          ]}
-          animationType="slide-up"
-          gridVariant="uniform-all-items-equal"
-          title="By The Numbers"
-          description="Earl Boys Services is Richmond's trusted home services leader with proven results."
-          tag="Our Success"
-          tagIcon={TrendingUp}
-          textboxLayout="default"
-          useInvertedBackground={true}
-        />
-      </div>
-
-      <div id="faq" data-section="faq">
-        <FaqSplitText
+      <div id="contact" data-section="contact">
+        <ContactFaq
           faqs={[
             {
-              id: "1",
-              title: "What areas of Richmond do you serve?",
-              content: "We proudly serve all of Richmond, VA and surrounding areas. Our service team covers residential and commercial properties throughout the region.",
-            },
+              id: "1",              title: "What areas do you serve?",              content: "We proudly serve Richmond, VA and all surrounding areas. Our service team covers residential and commercial properties throughout the region."},
             {
-              id: "2",
-              title: "How quickly can you respond to service requests?",
-              content: "We typically respond to service requests within 24 hours. For urgent issues, call us at 804-938-0669 for immediate assistance.",
-            },
+              id: "2",              title: "Do you charge for estimates?",              content: "No! We provide free, no-obligation estimates for all services. Contact us to schedule your consultation."},
             {
-              id: "3",
-              title: "Do you offer warranty on your work?",
-              content: "Yes! We stand behind our workmanship with comprehensive warranties on all services. Details vary by service type.",
-            },
+              id: "3",              title: "Are you licensed and insured?",              content: "Absolutely. Earl Boys Services is fully licensed, insured, and bonded. We maintain all required certifications."},
             {
-              id: "4",
-              title: "Are you licensed and insured?",
-              content: "Absolutely. Earl Boys Services is fully licensed, insured, and bonded. We maintain all required certifications for electrical, plumbing, and other specialized services.",
-            },
-            {
-              id: "5",
-              title: "What payment methods do you accept?",
-              content: "We accept cash, check, credit cards, and digital payments. We also offer financing options for larger projects.",
-            },
-            {
-              id: "6",
-              title: "Do you provide free estimates?",
-              content: "Yes! We provide free, no-obligation estimates for all services. Contact us to schedule your consultation.",
-            },
+              id: "4",              title: "How quickly can you respond?",              content: "We typically respond to service requests within 24 hours. For emergency issues, call us immediately at 804-938-0669."},
           ]}
-          sideTitle="Frequently Asked Questions"
-          sideDescription="Find answers to common questions about our home services, pricing, and availability."
-          textPosition="left"
-          faqsAnimation="slide-up"
+          ctaTitle="Get Your Free Estimate Today"
+          ctaDescription="Contact Earl Boys Services for professional, reliable home services. We're ready to help transform your home."
+          ctaButton={{ text: "Call Now", href: "tel:804-938-0669" }}
+          ctaIcon={Phone}
           useInvertedBackground={false}
-          animationType="smooth"
+          animationType="slide-up"
+          accordionAnimationType="smooth"
+          showCard={true}
         />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterCard
-          logoText="Earl Boys Services"
-          copyrightText="© 2025 Earl Boys Services LLC. All rights reserved. Licensed & Insured."
-          socialLinks={[
+        <FooterSimple
+          columns={[
             {
-              icon: Facebook,
-              href: "https://facebook.com",
-              ariaLabel: "Facebook",
+              title: "Services",              items: [
+                { label: "Plumbing", href: "#services" },
+                { label: "Electrical", href: "#services" },
+                { label: "Painting", href: "#services" },
+                { label: "Maintenance", href: "#services" },
+              ],
             },
             {
-              icon: Instagram,
-              href: "https://instagram.com",
-              ariaLabel: "Instagram",
+              title: "Company",              items: [
+                { label: "About Us", href: "#about" },
+                { label: "Contact", href: "#contact" },
+                { label: "Testimonials", href: "#testimonials" },
+                { label: "Get Estimate", href: "tel:804-938-0669" },
+              ],
             },
             {
-              icon: Phone,
-              href: "tel:804-938-0669",
-              ariaLabel: "Call us",
+              title: "Contact",              items: [
+                { label: "Phone: 804-938-0669", href: "tel:804-938-0669" },
+                { label: "Richmond, VA", href: "#" },
+                { label: "Licensed & Insured", href: "#" },
+                { label: "Available 24/7", href: "#" },
+              ],
             },
           ]}
+          bottomLeftText="© 2025 Earl Boys Services LLC. All rights reserved. Licensed & Insured."
+          bottomRightText="Professional Home Services"
         />
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1