diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index a58e36b..dd05ee8 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,25 +1,25 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
-import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
-import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
-import FaqSplitText from "@/components/sections/faq/FaqSplitText";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
+import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
+import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
+import FaqDouble from "@/components/sections/faq/FaqDouble";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 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 { Hammer, Phone, Mail, MapPin, Clock, Users, TrendingUp, Zap, Facebook, Instagram, Linkedin } from "lucide-react";
 
 export default function ContactPage() {
   const navItems = [
-    { name: "Home", id: "home" },
-    { name: "Services", id: "services" },
-    { name: "About", id: "about" },
-    { name: "Portfolio", id: "portfolio" },
-    { name: "Contact", id: "contact" },
+    { name: "Home", id: "/" },
+    { name: "Features", id: "#features" },
+    { name: "Pricing", id: "#pricing" },
+    { name: "Services", id: "/services" },
   ];
 
   const contactButton = {
-    text: "Call Now",    href: "tel:804-938-0669"};
+    text: "Get Started",    href: "#contact"};
 
   return (
     <ThemeProvider
@@ -35,7 +35,7 @@ export default function ContactPage() {
       headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered
+        <NavbarLayoutFloatingInline
           navItems={navItems}
           button={contactButton}
           brandName="Earl Boys Services"
@@ -43,27 +43,13 @@ export default function ContactPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardCarousel
+        <HeroBillboardDashboard
           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"
           tagIcon={Hammer}
           tagAnimation="slide-up"
           background={{ variant: "sparkles-gradient" }}
-          mediaItems={[
-            {
-              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",              imageAlt: "Expert plumbing 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",              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"},
@@ -71,96 +57,110 @@ export default function ContactPage() {
               text: "Quick Contact Form",              href: "#contact-form"},
           ]}
           buttonAnimation="slide-up"
-          ariaLabel="Contact page hero section for Earl Boys Services"
-        />
-      </div>
-
-      <div id="services" data-section="services">
-        <FeatureCardTwentyFive
-          title="How to Reach Us"
-          description="Multiple convenient ways to get in touch with Earl Boys Services. We're ready to discuss your project and provide expert recommendations."
-          tag="Contact Options"
-          tagIcon={Wrench}
-          features={[
-            {
-              title: "Phone Support",              description: "Call us directly for immediate assistance and emergency service requests.",              icon: Phone,
-              mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-receiving-box_23-2149103401.jpg",                  imageAlt: "Customer service support"},
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-man-choosing-color_23-2148903521.jpg",                  imageAlt: "Professional communication"},
-              ],
-            },
-            {
-              title: "Service Area Coverage",              description: "We proudly serve Richmond, VA and all surrounding areas with comprehensive home services.",              icon: Wrench,
-              mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-s-hand-holding-push-pin-blur-map_23-2147958186.jpg",                  imageAlt: "Richmond virginia map location marker"},
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-cleaning-office-together_23-2149345517.jpg",                  imageAlt: "Professional home services team working"},
-              ],
-            },
-            {
-              title: "Free Estimates",              description: "Schedule a free consultation and estimate for your project with our experienced team.",              icon: CheckCircle,
-              mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/young-couple-moving-new-home_23-2149242082.jpg",                  imageAlt: "Home improvement project"},
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-builder-men-with-smartphones_23-2148751993.jpg",                  imageAlt: "Professional consultation"},
-              ],
-            },
-            {
-              title: "Licensed & Insured",              description: "All services fully licensed, insured, and bonded for your peace of mind.",              icon: CheckCircle,
-              mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/cheerful-grey-haired-logistic-worker-hardhat-uniform-standing-shelves-warehouse-with-arms-folded-looking-camera-smiling-vertical-shot-labor-blue-collar-portrait-concept_74855-14227.jpg",                  imageAlt: "Professional tradesman"},
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/view-professional-cleaning-service-person-holding-supplies_23-2150520608.jpg",                  imageAlt: "Professional service team"},
-              ],
-            },
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          buttons={[
-            {
-              text: "Request Service",              href: "tel:804-938-0669"},
-          ]}
-          buttonAnimation="slide-up"
+          dashboard={{
+            title: "Contact Information",            logoIcon: Phone,
+            imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=100&h=100&fit=crop&crop=face",            buttons: [
+              { text: "Call Us", href: "tel:804-938-0669" },
+              { text: "Email", href: "mailto:contact@earlboys.com" },
+            ],
+            sidebarItems: [
+              { icon: Phone, active: true },
+              { icon: Mail },
+              { icon: MapPin },
+            ],
+            stats: [
+              {
+                title: "Response Time",                values: ["<1 hr", "<30 min", "Immediate"],
+                description: "We respond fast"},
+              {
+                title: "Service Area",                values: ["Richmond", "VA", "100+ sq mi"],
+                description: "Coverage zone"},
+              {
+                title: "Experience",                values: [15, 15, 15],
+                valueSuffix: "yrs",                description: "In business"},
+            ],
+            chartTitle: "Contact Volume",            chartData: [
+              { value: 45 },
+              { value: 65 },
+              { value: 75 },
+              { value: 85 },
+              { value: 90 },
+            ],
+            listTitle: "Ways to Reach Us",            listItems: [
+              { icon: Phone, title: "804-938-0669", status: "Available" },
+              { icon: Mail, title: "Email Support", status: "24/7" },
+              { icon: MapPin, title: "Richmond, VA", status: "Local" },
+            ],
+          }}
         />
       </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}
+        <MetricCardEleven
           metrics={[
             {
-              id: "1",              value: "804",              title: "938",              description: "Call us directly - Call Now",              icon: Phone,
-            },
+              id: "1",              value: "804-938-0669",              title: "Direct Phone Line",              description: "Available during business hours",              imageSrc: "https://images.unsplash.com/photo-1634017303134-b69a4aacbfbb?w=500&h=500&fit=crop",              imageAlt: "Phone support"},
             {
-              id: "2",              value: "15",              title: "Years",              description: "Experience serving Richmond VA",              icon: Clock,
-            },
+              id: "2",              value: "Richmond",              title: "Service Area",              description: "Plus surrounding Virginia areas",              imageSrc: "https://images.unsplash.com/photo-1524661135-423995f22d0b?w=500&h=500&fit=crop",              imageAlt: "Richmond Virginia map"},
             {
-              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,
-            },
+              id: "3",              value: "24/7",              title: "Emergency Support",              description: "On-call for urgent issues",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop",              imageAlt: "Emergency services team"},
           ]}
+          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}
           animationType="slide-up"
-          gridVariant="uniform-all-items-equal"
           textboxLayout="default"
           useInvertedBackground={true}
         />
       </div>
 
+      <div id="trust" data-section="trust">
+        <SocialProofOne
+          names={["Licensed", "Insured", "Bonded", "Certified", "Trusted"]}
+          title="Why Homeowners Trust Us"
+          description="Proven reliability with years of excellent service in Richmond and surrounding areas"
+          tag="Credentials",          tagIcon={Users}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          speed={40}
+          showCard={true}
+        />
+      </div>
+
+      <div id="contact-form" data-section="contact-form">
+        <ContactSplitForm
+          title="Get Your Free Estimate"
+          description="Tell us about your project and we'll get back to you within 24 hours with a detailed estimate. No obligation, no pressure."
+          inputs={[
+            {
+              name: "name",              type: "text",              placeholder: "Your Name",              required: true,
+            },
+            {
+              name: "email",              type: "email",              placeholder: "Your Email",              required: true,
+            },
+            {
+              name: "phone",              type: "tel",              placeholder: "Your Phone Number",              required: true,
+            },
+            {
+              name: "service",              type: "text",              placeholder: "Service Needed",              required: false,
+            },
+          ]}
+          textarea={{
+            name: "message",            placeholder: "Describe your project in detail...",            rows: 5,
+            required: true,
+          }}
+          useInvertedBackground={false}
+          imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop",          mediaAnimation="slide-up"
+          mediaPosition="right"
+          buttonText="Request Estimate"
+          onSubmit={(data) => {
+            console.log("Form submitted:", data);
+          }}
+        />
+      </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."
+        <FaqDouble
           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,10 +175,12 @@ 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"
+          title="Questions About Our Services?"
+          description="Find answers to common questions about contacting Earl Boys Services, scheduling appointments, and our service offerings."
+          tag="Support",          tagIcon={Mail}
           faqsAnimation="slide-up"
+          textboxLayout="default"
           useInvertedBackground={false}
-          animationType="smooth"
         />
       </div>
 
@@ -201,4 +203,4 @@ export default function ContactPage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 52e371d..a0cd7f1 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,1433 +1,37 @@
 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";
+import { DM_Sans } from "next/font/google";
+import "./styles/variables.css";
+import "./styles/base.css";
 
-const halant = Halant({
-  variable: "--font-halant",
-  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-});
-
-const mulish = Mulish({
-  variable: "--font-mulish",
-  subsets: ["latin"],
+const dmSans = DM_Sans({
+  variable: "--font-dm-sans",  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",  description: "Professional home services in Richmond, VA"};
 
 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={`${dmSans.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' }, '*');
-})();
-`
+              (function() {
+                try {
+                  const theme = localStorage.getItem('theme') || 'light';
+                  document.documentElement.setAttribute('data-theme', theme);
+                } catch (e) {}
+              })()
+            `,
           }}
         />
       
@@ -2798,7 +1402,14 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
-}
\ No newline at end of file
+}
+
+function ServiceWrapper({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
+
+function Tag() {
+  return null;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9f2d841..e5834aa 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,369 +1,264 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
-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 NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
+import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
+import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
+import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
+import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
+import FaqDouble from "@/components/sections/faq/FaqDouble";
+import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
 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 { Sparkles, CheckCircle, Star, MapPin, Shield, Users, TrendingUp, Zap, Facebook, Instagram, Linkedin } from "lucide-react";
 
 export default function HomePage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Features", id: "#features" },
+    { name: "Pricing", id: "#pricing" },
+    { name: "Services", id: "/services" },
+  ];
+
+  const contactButton = {
+    text: "Get Started",    href: "#contact"};
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="reveal-blur"
       borderRadius="rounded"
-      contentWidth="smallMedium"
+      contentWidth="mediumLarge"
       sizing="mediumLargeSizeLargeTitles"
-      background="noise"
-      cardStyle="solid"
-      primaryButtonStyle="primary-glow"
+      background="aurora"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered
-          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",
-          }}
+        <NavbarLayoutFloatingInline
+          navItems={navItems}
+          button={contactButton}
+          brandName="Demo Site"
         />
       </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"
-          tag="Earl Boys Services"
-          tagIcon={Hammer}
+        <HeroBillboardDashboard
+          title="Real-Time Analytics Platform"
+          description="Monitor your business metrics with our comprehensive dashboard. Real-time data, actionable insights, and beautiful visualizations."
+          tag="Live Analytics"
+          tagIcon={Sparkles}
           tagAnimation="slide-up"
-          background={{ variant: "plain" }}
-          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/plumbing-professional-doing-his-job_23-2150721573.jpg?_wi=1",
-              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/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/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",
-            },
-          ]}
+          background={{ variant: "radial-gradient" }}
           buttons={[
-            {
-              text: "Call Now: 804-938-0669",
-              href: "tel:804-938-0669",
-            },
-            {
-              text: "Book a Service",
-              href: "contact",
-            },
+            { text: "Get Started", href: "#pricing" },
+            { text: "View Demo", href: "#features" },
           ]}
           buttonAnimation="slide-up"
-          ariaLabel="Hero section for Earl Boys Services"
+          dashboard={{
+            title: "Analytics Dashboard",            logoIcon: TrendingUp,
+            imageSrc: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face",            buttons: [
+              { text: "Dashboard", href: "#" },
+              { text: "Export", href: "#" },
+            ],
+            sidebarItems: [
+              { icon: TrendingUp, active: true },
+              { icon: Users },
+              { icon: Zap },
+            ],
+            stats: [
+              {
+                title: "Revenue",                values: [245890, 312750, 428500],
+                valuePrefix: "$",                description: "Monthly recurring."},
+              {
+                title: "Users",                values: [1240, 2150, 3890],
+                description: "Active users online."},
+              {
+                title: "Growth",                values: [12.5, 18.3, 25.6],
+                valueSuffix: "%",                description: "Month-over-month."},
+            ],
+            chartTitle: "Performance Trend",            chartData: [
+              { value: 50 },
+              { value: 30 },
+              { value: 70 },
+              { value: 40 },
+              { value: 90 },
+            ],
+            listTitle: "Recent Transactions",            listItems: [
+              { icon: CheckCircle, title: "Order #12345", status: "Completed" },
+              { icon: TrendingUp, title: "Revenue Report", status: "Generated" },
+              { icon: Users, title: "Team Metrics", status: "Updated" },
+            ],
+          }}
         />
       </div>
 
-      <div id="services-home" data-section="services-home">
-        <FeatureCardTwentyFive
+      <div id="features" data-section="features">
+        <FeatureCardThree
           features={[
             {
-              title: "Plumbing Services",
-              description: "Expert plumbing repairs, installations, and maintenance for all your home water systems.",
-              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/close-up-smiley-man-receiving-box_23-2149103401.jpg?_wi=1",
-                  imageAlt: "Plumbing project completed",
-                },
-              ],
-            },
+              id: "01",              title: "Real-Time Tracking",              description: "Monitor your metrics as they happen with live updates and instant notifications.",              imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=500&h=500&fit=crop",              imageAlt: "Real-time dashboard tracking"},
             {
-              title: "Painting Services",
-              description: "Interior and exterior painting with premium finishes for residential and commercial spaces.",
-              icon: Paintbrush,
-              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/close-up-woman-man-choosing-color_23-2148903521.jpg?_wi=1",
-                  imageAlt: "Painting transformation",
-                },
-              ],
-            },
+              id: "02",              title: "Advanced Analytics",              description: "Deep dive into data with customizable reports and predictive insights.",              imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=500&h=500&fit=crop",              imageAlt: "Advanced analytics interface"},
             {
-              title: "Electrical Work",
-              description: "Licensed electrical services including installations, repairs, and safety inspections.",
-              icon: Zap,
-              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/young-couple-moving-new-home_23-2149242082.jpg?_wi=1",
-                  imageAlt: "Electrical project completed",
-                },
-              ],
-            },
+              id: "03",              title: "Team Collaboration",              description: "Work together seamlessly with shared dashboards and real-time updates.",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop",              imageAlt: "Team collaboration tools"},
             {
-              title: "Wall Mounting",
-              description: "Professional TV mounting, shelving installation, and wall customization services.",
-              icon: MonitorPlay,
-              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/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",
-                },
-              ],
-            },
+              id: "04",              title: "Custom Reports",              description: "Generate detailed reports tailored to your business needs and export easily.",              imageSrc: "https://images.unsplash.com/photo-1611532736592-5a66f6aef2a2?w=500&h=500&fit=crop",              imageAlt: "Custom report generation"},
           ]}
+          title="Powerful Features"
+          description="Everything you need to manage your business effectively"
+          tag="Features"
+          tagIcon={Zap}
+          gridVariant="uniform-all-items-equal"
           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: "Explore All Features", href: "#" },
           ]}
           buttonAnimation="slide-up"
         />
       </div>
 
+      <div id="pricing" data-section="pricing">
+        <PricingCardTwo
+          plans={[
+            {
+              id: "1",              badge: "Starter",              badgeIcon: Sparkles,
+              price: "$29/mo",              subtitle: "Perfect for getting started",              buttons: [
+                { text: "Start Free Trial", href: "#" },
+                { text: "Learn More", href: "#" },
+              ],
+              features: [
+                "Up to 1,000 tracked events",                "Basic analytics dashboard",                "Email support",                "1 team member"],
+            },
+            {
+              id: "2",              badge: "Professional",              badgeIcon: Star,
+              price: "$99/mo",              subtitle: "For growing businesses",              buttons: [
+                { text: "Start Free Trial", href: "#" },
+                { text: "Learn More", href: "#" },
+              ],
+              features: [
+                "Up to 100,000 tracked events",                "Advanced analytics & AI insights",                "Priority email & chat support",                "Up to 10 team members",                "Custom reports"],
+            },
+            {
+              id: "3",              badge: "Enterprise",              badgeIcon: CheckCircle,
+              price: "Custom",              subtitle: "For large-scale operations",              buttons: [
+                { text: "Contact Sales", href: "#" },
+                { text: "Schedule Demo", href: "#" },
+              ],
+              features: [
+                "Unlimited tracked events",                "Full API access",                "Dedicated account manager",                "Custom integrations",                "On-premise deployment",                "SLA guarantee"],
+            },
+          ]}
+          title="Simple, Transparent Pricing"
+          description="Choose the perfect plan for your needs"
+          tag="Pricing"
+          tagIcon={TrendingUp}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          buttons={[
+            { text: "View All Plans", href: "#" },
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="services" data-section="services">
+        <MetricCardEleven
+          metrics={[
+            {
+              id: "1",              value: "99.9%",              title: "Uptime Guarantee",              description: "Enterprise-grade reliability",              imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=500&h=500&fit=crop",              imageAlt: "Server uptime monitoring"},
+            {
+              id: "2",              value: "24/7",              title: "Support Available",              description: "Always here to help",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop",              imageAlt: "Customer support team"},
+            {
+              id: "3",              value: "150K+",              title: "Active Users",              description: "Trusted by businesses worldwide",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop",              imageAlt: "Global user base"},
+          ]}
+          title="Why Choose Us",          description="Industry-leading performance and support"
+          tag="Services",          tagIcon={Shield}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="trust" data-section="trust">
+        <SocialProofOne
+          names={["TechCorp", "DataFlow", "CloudSync", "InnovateLabs", "FutureScale"]}
+          title="Trusted by Industry Leaders"
+          description="Join thousands of companies that rely on our platform for their analytics needs"
+          tag="Trusted Partners"
+          tagIcon={Users}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          speed={40}
+          showCard={true}
+        />
+      </div>
+
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwelve
+        <TestimonialCardFive
           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, CEO of TechCorp",              date: "Date: 15 November 2024",              title: "Transformed our analytics workflow",              quote: "This platform has completely transformed how we analyze business data. The real-time insights have helped us make better decisions faster than ever before.",              tag: "Enterprise Plan",              avatarSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop&crop=face",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop",              imageAlt: "Sarah Johnson speaking at conference"},
             {
-              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, CTO of DataFlow",              date: "Date: 10 November 2024",              title: "Best analytics solution on the market",              quote: "The API is clean, documentation is excellent, and the team is incredibly responsive. We integrated this in just a few days and immediately saw value.",              tag: "Professional Plan",              avatarSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face",              imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=500&h=500&fit=crop",              imageAlt: "Michael Chen coding on laptop"},
             {
-              id: "3",
-              name: "Emily Rodriguez",
-              imageSrc: "http://img.b2bpic.net/free-photo/headshot-euphoric-successful-businesswoman_273609-13789.jpg",
-              imageAlt: "Emily Rodriguez 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: "3",              name: "Emma Rodriguez, Founder of CloudSync",              date: "Date: 5 November 2024",              title: "Outstanding customer support",              quote: "What impressed me most was the customer support team. They went above and beyond to help us optimize our setup. Highly recommended!",              tag: "Starter Plan",              avatarSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop",              imageAlt: "Emma Rodriguez at her desk"},
           ]}
-          cardTitle="Over 2,000+ satisfied customers trust Earl Boys Services for their home improvement needs"
-          cardTag="Customer Reviews"
-          cardTagIcon={Star}
-          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}
+          title="What Our Customers Say"
+          description="Real stories from companies using our platform daily"
+          tag="Testimonials",          tagIcon={Star}
           textboxLayout="default"
-          useInvertedBackground={true}
+          useInvertedBackground={false}
         />
       </div>
 
       <div id="faq" data-section="faq">
-        <FaqSplitText
+        <FaqDouble
           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: "How does the pricing work?",              content: "Our pricing is simple and transparent. We offer three tiers: Starter ($29/mo), Professional ($99/mo), and Enterprise (custom pricing). Each tier includes different features and support levels. You can switch plans anytime."},
             {
-              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: "Is there a free trial?",              content: "Yes! All plans come with a 14-day free trial. No credit card required. You get full access to all features during the trial period."},
             {
-              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: "What kind of support do you offer?",              content: "We provide email support for all plans, priority chat support for Professional plans, and dedicated account managers for Enterprise customers. Our support team is available 24/7."},
             {
-              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: "4",              title: "Can I cancel anytime?",              content: "Absolutely! You can cancel your subscription anytime without penalties. If you cancel mid-month, you'll have access until the end of your billing period."},
             {
-              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: "5",              title: "Do you offer API access?",              content: "Yes, API access is included in Professional and Enterprise plans. We provide comprehensive documentation and SDKs for popular programming languages."},
             {
-              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: "6",              title: "Is my data secure?",              content: "Security is our top priority. We use enterprise-grade encryption, regular security audits, and comply with GDPR, CCPA, and SOC 2. Your data is backed up daily."},
           ]}
-          sideTitle="Frequently Asked Questions"
-          sideDescription="Find answers to common questions about our home services, pricing, and availability."
-          textPosition="left"
+          title="Frequently Asked Questions"
+          description="Find answers to common questions about our service"
+          tag="Support",          tagIcon={CheckCircle}
           faqsAnimation="slide-up"
+          textboxLayout="default"
           useInvertedBackground={false}
-          animationType="smooth"
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterCard
-          logoText="Earl Boys Services"
-          copyrightText="© 2025 Earl Boys Services LLC. All rights reserved. Licensed & Insured."
+          logoText="Demo Site"
+          copyrightText="© 2025 Demo Site. All rights reserved."
           socialLinks={[
             {
               icon: Facebook,
-              href: "https://facebook.com",
-              ariaLabel: "Facebook",
-            },
+              href: "https://facebook.com",              ariaLabel: "Facebook"},
             {
               icon: Instagram,
-              href: "https://instagram.com",
-              ariaLabel: "Instagram",
-            },
+              href: "https://instagram.com",              ariaLabel: "Instagram"},
             {
-              icon: Phone,
-              href: "tel:804-938-0669",
-              ariaLabel: "Call us",
-            },
+              icon: Linkedin,
+              href: "https://linkedin.com",              ariaLabel: "LinkedIn"},
           ]}
         />
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index ae8ec76..21ea140 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -1,283 +1,188 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
-import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
-import FaqSplitText from "@/components/sections/faq/FaqSplitText";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
+import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
+import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
+import FaqDouble from "@/components/sections/faq/FaqDouble";
 import FooterCard from "@/components/sections/footer/FooterCard";
-import Link from "next/link";
-import {
-  Wrench,
-  Droplet,
-  Paintbrush,
-  Zap,
-  MonitorPlay,
-  Armchair,
-  Layers,
-  DoorOpen,
-  BookOpen,
-  Hammer,
-  Clock,
-  Users,
-  CheckCircle,
-  TrendingUp,
-  Facebook,
-  Instagram,
-  Phone,
-} from "lucide-react";
+import { Zap, CheckCircle, Users, Shield, Sparkles, TrendingUp, MapPin, Phone, Mail, Facebook, Instagram, Linkedin } from "lucide-react";
 
 export default function ServicesPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Features", id: "#features" },
+    { name: "Pricing", id: "#pricing" },
+    { name: "Services", id: "/services" },
+  ];
+
+  const contactButton = {
+    text: "Get Started",    href: "#contact"};
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="reveal-blur"
       borderRadius="rounded"
-      contentWidth="smallMedium"
+      contentWidth="mediumLarge"
       sizing="mediumLargeSizeLargeTitles"
-      background="noise"
-      cardStyle="solid"
-      primaryButtonStyle="primary-glow"
+      background="aurora"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered
-          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" },
+        <NavbarLayoutFloatingInline
+          navItems={navItems}
+          button={contactButton}
+          brandName="Demo Site"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardDashboard
+          title="Our Comprehensive Services"
+          description="Explore our full range of solutions designed to help your business succeed. From analytics to support, we've got everything you need."
+          tag="Services"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
+          background={{ variant: "radial-gradient" }}
+          buttons={[
+            { text: "View Pricing", href: "/#pricing" },
+            { text: "Schedule Demo", href: "#" },
           ]}
-          button={{
-            text: "Call Now",
-            href: "tel:804-938-0669",
+          buttonAnimation="slide-up"
+          dashboard={{
+            title: "Service Capabilities",            logoIcon: TrendingUp,
+            imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=100&h=100&fit=crop&crop=face",            buttons: [
+              { text: "Learn More", href: "#" },
+              { text: "Contact Us", href: "#" },
+            ],
+            sidebarItems: [
+              { icon: CheckCircle, active: true },
+              { icon: Users },
+              { icon: Shield },
+            ],
+            stats: [
+              {
+                title: "Services",                values: [5, 8, 12],
+                description: "Available today"},
+              {
+                title: "Coverage",                values: [150, 250, 500],
+                valueSuffix: "k mi²",                description: "Service area"},
+              {
+                title: "Satisfaction",                values: [95, 97, 99],
+                valueSuffix: "%",                description: "Customer rating"},
+            ],
+            chartTitle: "Service Growth",            chartData: [
+              { value: 40 },
+              { value: 60 },
+              { value: 80 },
+              { value: 70 },
+              { value: 95 },
+            ],
+            listTitle: "Recent Implementations",            listItems: [
+              { icon: CheckCircle, title: "Analytics Suite Deployed", status: "Completed" },
+              { icon: Users, title: "Team Training Completed", status: "Completed" },
+              { icon: Zap, title: "API Integration Ready", status: "Active" },
+            ],
           }}
         />
       </div>
 
-      <div id="services-detail" data-section="services-detail">
-        <FeatureCardTwentyFive
+      <div id="features" data-section="features">
+        <FeatureCardThree
           features={[
             {
-              title: "Plumbing Services",
-              description: "Expert plumbing repairs, installations, and maintenance for all your home water systems. From leak detection to full system replacement.",
-              icon: Droplet,
-              mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721573.jpg?_wi=3",
-                  imageAlt: "Professional plumbing work",
-                },
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-receiving-box_23-2149103401.jpg?_wi=3",
-                  imageAlt: "Plumbing project completed",
-                },
-              ],
-            },
+              id: "01",              title: "Data Analytics",              description: "Comprehensive data analysis tools with real-time processing and advanced algorithms.",              imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=500&h=500&fit=crop",              imageAlt: "Data analytics dashboard"},
             {
-              title: "Painting Services",
-              description: "Interior and exterior painting with premium finishes for residential and commercial spaces. Full surface preparation and cleanup included.",
-              icon: Paintbrush,
-              mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-painting-wall-home_23-2149098981.jpg?_wi=3",
-                  imageAlt: "Professional painting service",
-                },
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-man-choosing-color_23-2148903521.jpg?_wi=3",
-                  imageAlt: "Painting transformation",
-                },
-              ],
-            },
+              id: "02",              title: "Cloud Integration",              description: "Seamless integration with leading cloud platforms. Deploy, scale, and manage with ease.",              imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=500&h=500&fit=crop",              imageAlt: "Cloud integration services"},
             {
-              title: "Electrical Work",
-              description: "Licensed electrical services including installations, repairs, and safety inspections. All work meets current electrical codes and standards.",
-              icon: Zap,
-              mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/woman-electrician-checks-switchboard-tablet-night-shift-smart-service_169016-70936.jpg?_wi=3",
-                  imageAlt: "Professional electrical work",
-                },
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/young-couple-moving-new-home_23-2149242082.jpg?_wi=3",
-                  imageAlt: "Electrical project completed",
-                },
-              ],
-            },
+              id: "03",              title: "Custom Development",              description: "Tailored solutions built specifically for your business requirements and goals.",              imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=500&h=500&fit=crop",              imageAlt: "Custom software development"},
             {
-              title: "Wall Mounting & Installation",
-              description: "Professional TV mounting, shelving installation, and wall customization services. Secure mounting with cable management included.",
-              icon: MonitorPlay,
-              mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-builder-men-with-smartphones_23-2148751993.jpg?_wi=2",
-                  imageAlt: "Professional wall mounting",
-                },
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-receiving-box_23-2149103401.jpg?_wi=4",
-                  imageAlt: "Wall mounting installation",
-                },
-              ],
-            },
+              id: "04",              title: "Security & Compliance",              description: "Enterprise-grade security with compliance certifications and regular audits.",              imageSrc: "https://images.unsplash.com/photo-1555949519-f2a6f01c00f5?w=500&h=500&fit=crop",              imageAlt: "Security infrastructure"},
             {
-              title: "Furniture Assembly",
-              description: "Quick and efficient furniture assembly for residential and commercial installations. Expert handling of all furniture types and styles.",
-              icon: Armchair,
-              mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-hitting-nail-by-hammer_329181-3740.jpg?_wi=2",
-                  imageAlt: "Professional furniture assembly",
-                },
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-man-choosing-color_23-2148903521.jpg?_wi=4",
-                  imageAlt: "Furniture installation completed",
-                },
-              ],
-            },
+              id: "05",              title: "Training & Support",              description: "Comprehensive training programs and 24/7 technical support for your team.",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop",              imageAlt: "Team training session"},
             {
-              title: "Flooring Installation",
-              description: "Expert flooring installation for hardwood, tile, laminate, and other materials. Subfloor preparation to final finish included.",
-              icon: Layers,
-              mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/circular-saw-carpenter-using-circular-saw-wood_169016-17039.jpg?_wi=3",
-                  imageAlt: "Professional flooring installation",
-                },
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/young-couple-moving-new-home_23-2149242082.jpg?_wi=4",
-                  imageAlt: "Flooring project transformation",
-                },
-              ],
-            },
+              id: "06",              title: "Consulting Services",              description: "Expert guidance from industry veterans to optimize your operations.",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop",              imageAlt: "Business consulting meeting"},
           ]}
+          title="Detailed Service Offerings"
+          description="Everything you need for complete digital transformation"
+          tag="Services",          tagIcon={Zap}
+          gridVariant="uniform-all-items-equal"
           animationType="slide-up"
-          title="Complete Service Catalog"
-          description="Explore our full range of professional home services. Each service includes consultation, professional execution, and satisfaction guarantee."
-          tag="All 10 Services"
-          tagIcon={Wrench}
           textboxLayout="default"
           useInvertedBackground={false}
           buttons={[
-            {
-              text: "Back to Home",
-              href: "/",
-            },
+            { text: "Explore All Services", href: "#" },
           ]}
           buttonAnimation="slide-up"
         />
       </div>
 
-      <div id="service-benefits" data-section="service-benefits">
-        <MetricCardOne
+      <div id="metrics" data-section="metrics">
+        <MetricCardEleven
           metrics={[
             {
-              id: "1",
-              value: "24",
-              title: "Hour",
-              description: "Response time for service requests",
-              icon: Clock,
-            },
+              id: "1",              value: "50+",              title: "Enterprise Clients",              description: "Trusted by leading companies",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop",              imageAlt: "Enterprise clients working together"},
             {
-              id: "2",
-              value: "15",
-              title: "Years",
-              description: "Of industry expertise and experience",
-              icon: Hammer,
-            },
+              id: "2",              value: "10M+",              title: "Data Points Processed",              description: "Daily analytics processing",              imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=500&h=500&fit=crop",              imageAlt: "Data processing visualization"},
             {
-              id: "3",
-              value: "100",
-              title: "Percent",
-              description: "Licensed, insured, and bonded",
-              icon: CheckCircle,
-            },
-            {
-              id: "4",
-              value: "2000",
-              title: "Plus",
-              description: "Happy customers in Richmond VA",
-              icon: Users,
-            },
+              id: "3",              value: "15",              title: "Years Experience",              description: "Industry leadership",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop",              imageAlt: "Years of service"},
           ]}
+          title="Service Excellence"
+          description="Proven track record of delivering results"
+          tag="Performance",          tagIcon={TrendingUp}
           animationType="slide-up"
-          gridVariant="uniform-all-items-equal"
-          title="Why Choose Our Services"
-          description="We deliver professional excellence backed by years of experience, proper credentials, and unwavering commitment to customer satisfaction."
-          tag="Service Excellence"
-          tagIcon={TrendingUp}
           textboxLayout="default"
           useInvertedBackground={true}
         />
       </div>
 
-      <div id="service-faq" data-section="service-faq">
-        <FaqSplitText
+      <div id="faq" data-section="faq">
+        <FaqDouble
           faqs={[
             {
-              id: "1",
-              title: "Do you provide free estimates for all services?",
-              content: "Yes! We offer free, no-obligation estimates for all services. Our team will assess your project and provide a detailed quote with no hidden fees.",
-            },
+              id: "1",              title: "What services do you offer?",              content: "We offer a comprehensive suite of services including data analytics, cloud integration, custom development, security consulting, training, and 24/7 support. Each service can be tailored to your specific needs."},
             {
-              id: "2",
-              title: "What is your service warranty policy?",
-              content: "We stand behind all our work with comprehensive warranties. Most services include a 1-year warranty on labor, with extended warranties available for specific services.",
-            },
+              id: "2",              title: "How long does implementation take?",              content: "Implementation timelines vary based on service complexity. Basic analytics integration typically takes 2-4 weeks. Custom development projects are assessed individually. We always provide detailed timelines upfront."},
             {
-              id: "3",
-              title: "Can you handle emergency service requests?",
-              content: "Absolutely! We offer emergency services for urgent issues. Call 804-938-0669 to speak with our team about immediate needs.",
-            },
+              id: "3",              title: "Do you work with startups?",              content: "Absolutely! We work with businesses of all sizes, from startups to enterprises. We have flexible engagement models and can scale our services as your business grows."},
             {
-              id: "4",
-              title: "How do you ensure quality and safety?",
-              content: "All our technicians are certified and trained to industry standards. We follow strict safety protocols and use only quality materials and equipment.",
-            },
+              id: "4",              title: "What about ongoing support?",              content: "All our services include ongoing support. Professional and Enterprise plans include priority support, dedicated account managers, and regular optimization reviews."},
             {
-              id: "5",
-              title: "Do you offer service packages or discounts?",
-              content: "Yes! We offer discounted packages for multiple services. Contact us for details on our bundled service options and seasonal promotions.",
-            },
+              id: "5",              title: "Can you migrate data from our existing system?",              content: "Yes, we specialize in data migration. Our team will work with you to ensure a smooth transition with zero downtime. We handle data validation and testing throughout the process."},
             {
-              id: "6",
-              title: "What areas of Richmond do you service?",
-              content: "We serve all of Richmond, VA and surrounding areas. Whether you're downtown or in the suburbs, we can help with your home service needs.",
-            },
+              id: "6",              title: "How do you ensure data security?",              content: "We implement enterprise-grade security protocols including end-to-end encryption, regular security audits, and compliance with GDPR, HIPAA, and SOC 2 standards. Your data is our priority."},
           ]}
-          sideTitle="Service Questions Answered"
-          sideDescription="Learn more about our services, warranties, and availability. Have a specific question? Call us today."
-          textPosition="left"
+          title="Service Questions"
+          description="Common questions about our service offerings"
+          tag="Support",          tagIcon={CheckCircle}
           faqsAnimation="slide-up"
+          textboxLayout="default"
           useInvertedBackground={false}
-          animationType="smooth"
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterCard
-          logoText="Earl Boys Services"
-          copyrightText="© 2025 Earl Boys Services LLC. All rights reserved. Licensed & Insured."
+          logoText="Demo Site"
+          copyrightText="© 2025 Demo Site. All rights reserved."
           socialLinks={[
             {
               icon: Facebook,
-              href: "https://facebook.com",
-              ariaLabel: "Facebook",
-            },
+              href: "https://facebook.com",              ariaLabel: "Facebook"},
             {
               icon: Instagram,
-              href: "https://instagram.com",
-              ariaLabel: "Instagram",
-            },
+              href: "https://instagram.com",              ariaLabel: "Instagram"},
             {
-              icon: Phone,
-              href: "tel:804-938-0669",
-              ariaLabel: "Call us",
-            },
+              icon: Linkedin,
+              href: "https://linkedin.com",              ariaLabel: "LinkedIn"},
           ]}
         />
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}