Update src/app/portfolio/page.tsx

Merge version_3 into main

src/app/contact/page.tsx

@@ -1,26 +1,25 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
+import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
-import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
+import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
-import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
+import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
-import FaqDouble from "@/components/sections/faq/FaqDouble";
+import FaqSplitText from "@/components/sections/faq/FaqSplitText";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import FooterCard from "@/components/sections/footer/FooterCard";
-import { Hammer, Phone, Mail, MapPin, Clock, Users, TrendingUp, Zap, Facebook, Instagram, Linkedin } from "lucide-react";
+import { Hammer, Wrench, Droplet, Paintbrush, Zap, MonitorPlay, Armchair, Layers, TrendingUp, Clock, Users, CheckCircle, Star, Facebook, Instagram, Phone } from "lucide-react";
 
 export default function ContactPage() {
   const navItems = [
-    { name: "Home", id: "/" },
+    { name: "Home", id: "home" },
-    { name: "Features", id: "#features" },
+    { name: "Services", id: "services" },
-    { name: "Pricing", id: "#pricing" },
+    { name: "About", id: "about" },
-    { name: "Services", id: "/services" },
+    { name: "Portfolio", id: "portfolio" },
+    { name: "Contact", id: "contact" },
   ];
 
   const contactButton = {
-    text: "Get Started",    href: "#contact"
+    text: "Call Now",    href: "tel:804-938-0669"};
-  };
 
   return (
     <ThemeProvider
@@ -36,7 +35,7 @@ export default function ContactPage() {
       headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline
+        <NavbarStyleCentered
           navItems={navItems}
           button={contactButton}
           brandName="Earl Boys Services"
@@ -44,162 +43,142 @@ export default function ContactPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardDashboard
+        <HeroBillboardCarousel
           title="Contact Earl Boys Services"
-          description="Get in touch with our team for all your home service needs. We are here to help transform your home with professional, reliable service."
+          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"
+              text: "Call Now: 804-938-0669",              href: "tel:804-938-0669"},
-            },
             {
-              text: "Quick Contact Form",              href: "#contact-form"
+              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, 0.5, 0],
-                description: "We respond fast"
-              },
-              {
-                title: "Service Area",                values: [100, 50, 25],
-                description: "Coverage zone"
-              },
-              {
-                title: "Experience",                values: [15, 10, 5],
-                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">
-        <MetricCardEleven
+        <MetricCardOne
-          metrics={[
-            {
-              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: "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: "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&_wi=1",              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}
+          metrics={[
+            {
+              id: "1",              value: "804",              title: "938",              description: "Call us directly - Call Now",              icon: Phone,
+            },
+            {
+              id: "2",              value: "15",              title: "Years",              description: "Experience serving Richmond VA",              icon: Clock,
+            },
+            {
+              id: "3",              value: "2000",              title: "Customers",              description: "Trust us for their home services",              icon: Users,
+            },
+            {
+              id: "4",              value: "10",              title: "Services",              description: "Available in your area",              icon: Wrench,
+            },
+          ]}
           animationType="slide-up"
+          gridVariant="uniform-all-items-equal"
           textboxLayout="default"
           useInvertedBackground={true}
         />
       </div>
 
-      <div id="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 will 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&_wi=2"
-          mediaAnimation="slide-up"
-          mediaPosition="right"
-          buttonText="Request Estimate"
-          onSubmit={(data) => {
-            console.log("Form submitted:", data);
-          }}
-        />
-      </div>
-
       <div id="faq" data-section="faq">
-        <FaqDouble
+        <FaqSplitText
+          sideTitle="Questions About Our Services?"
+          sideDescription="Find answers to common questions about contacting Earl Boys Services, scheduling appointments, and our service offerings."
           faqs={[
             {
-              id: "1",              title: "What is your phone number?",              content: "You can reach us at 804-938-0669. We are available during business hours and offer emergency service for urgent issues."
+              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."},
-            },
             {
-              id: "2",              title: "How quickly can you respond to my request?",              content: "We typically respond to service requests within 24 hours. For emergency issues, call us immediately at 804-938-0669."
+              id: "2",              title: "How quickly can you respond to my request?",              content: "We typically respond to service requests within 24 hours. For emergency issues, call us immediately at 804-938-0669."},
-            },
             {
-              id: "3",              title: "What areas do you serve?",              content: "We proudly serve Richmond, VA and all surrounding areas. Our service team covers residential and commercial properties throughout the region."
+              id: "3",              title: "What areas do you serve?",              content: "We proudly serve Richmond, VA and all surrounding areas. Our service team covers residential and commercial properties throughout the region."},
-            },
             {
-              id: "4",              title: "Do you charge for consultations and estimates?",              content: "No! We provide free, no-obligation estimates for all services. Contact us to schedule your consultation."
+              id: "4",              title: "Do you charge for consultations and estimates?",              content: "No! We provide free, no-obligation estimates for all services. Contact us to schedule your consultation."},
-            },
             {
-              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: "What payment methods do you accept?",              content: "We accept cash, check, credit cards, and digital payments. We also offer financing options for larger projects."},
-            },
             {
-              id: "6",              title: "Are you licensed and insured?",              content: "Absolutely. Earl Boys Services is fully licensed, insured, and bonded. We maintain all required certifications."
+              id: "6",              title: "Are you licensed and insured?",              content: "Absolutely. Earl Boys Services is fully licensed, insured, and bonded. We maintain all required certifications."},
-            },
           ]}
-          title="Questions About Our Services?"
+          textPosition="left"
-          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>
 
@@ -210,19 +189,16 @@ export default function ContactPage() {
           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"
+              href: "tel:804-938-0669",              ariaLabel: "Call us"},
-            },
           ]}
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -1,294 +1,196 @@
-"use client";
+'use client';
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
-import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
+import SplitAbout from '@/components/sections/about/SplitAbout';
-import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
-import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
+import ContactSplit from '@/components/sections/contact/ContactSplit';
-import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
+import FooterSimple from '@/components/sections/footer/FooterSimple';
-import FaqDouble from "@/components/sections/faq/FaqDouble";
+import { CheckCircle, Mail } from 'lucide-react';
-import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import { Sparkles, CheckCircle, Star, MapPin, Shield, Users, TrendingUp, Zap, Facebook, Instagram, Linkedin } from "lucide-react";
 
-export default function HomePage() {
+const navItems = [
-  const navItems = [
+  { name: 'Home', id: '/' },
-    { name: "Home", id: "/" },
+  { name: 'Services', id: '#services' },
-    { name: "Features", id: "#features" },
+  { name: 'About', id: '#about' },
-    { name: "Pricing", id: "#pricing" },
+  { name: 'Contact', id: '#contact' },
-    { name: "Services", id: "/services" },
+];
-  ];
 
-  const contactButton = {
+const features = [
-    text: "Get Started",    href: "#contact"
+  {
-  };
+    id: 1,
+    title: 'Professional Plumbing Services',
+    description: 'Expert plumbing solutions for residential and commercial properties. From repairs to full system installations.',
+    imageSrc: 'https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=800&q=80',
+    imageAlt: 'Professional plumbing services',
+    icon: CheckCircle,
+  },
+  {
+    id: 2,
+    title: 'Quality Painting & Finishing',
+    description: 'Interior and exterior painting with premium finishes. Transform your space with professional craftsmanship.',
+    imageSrc: 'https://images.unsplash.com/photo-1564543645419-d59e79b6837d?w=800&q=80',
+    imageAlt: 'Professional painting services',
+    icon: CheckCircle,
+  },
+  {
+    id: 3,
+    title: 'Electrical System Installation',
+    description: 'Licensed electrical work for all your home and business needs. Safety and reliability guaranteed.',
+    imageSrc: 'https://images.unsplash.com/photo-1621905167918-48416bd8575a?w=800&q=80',
+    imageAlt: 'Professional electrical services',
+    icon: CheckCircle,
+  },
+  {
+    id: 4,
+    title: 'Flooring Solutions',
+    description: 'Beautiful and durable flooring installations. Hardwood, tile, laminate, and more.',
+    imageSrc: 'https://images.unsplash.com/photo-1577659645047-f726860106d7?w=800&q=80',
+    imageAlt: 'Professional flooring services',
+    icon: CheckCircle,
+  },
+];
 
+const bulletPoints = [
+  {
+    title: '15 Years Experience',
+    description: 'Trusted by thousands of homeowners in Richmond, VA with consistent quality and reliability.',
+    icon: CheckCircle,
+  },
+  {
+    title: 'Licensed & Insured',
+    description: 'All our technicians are fully licensed, insured, and trained to the highest standards.',
+    icon: CheckCircle,
+  },
+  {
+    title: 'Free Estimates',
+    description: 'No obligation quotes for all services. Transparent pricing with no hidden fees.',
+    icon: CheckCircle,
+  },
+];
+
+const footerColumns = [
+  {
+    title: 'Services',
+    items: [
+      { label: 'Plumbing', href: '#services' },
+      { label: 'Painting', href: '#services' },
+      { label: 'Electrical', href: '#services' },
+      { label: 'Flooring', href: '#services' },
+    ],
+  },
+  {
+    title: 'Company',
+    items: [
+      { label: 'About Us', href: '#about' },
+      { label: 'Contact', href: '#contact' },
+      { label: 'Testimonials', href: '#' },
+      { label: 'Blog', href: '#' },
+    ],
+  },
+  {
+    title: 'Support',
+    items: [
+      { label: 'Help Center', href: '#' },
+      { label: 'FAQ', href: '#' },
+      { label: 'Emergency Service', href: 'tel:804-938-0669' },
+      { label: 'Schedule Service', href: '#contact' },
+    ],
+  },
+];
+
+export default function Home() {
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="reveal-blur"
+      defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="mediumLarge"
+      contentWidth="medium"
-      sizing="mediumLargeSizeLargeTitles"
+      sizing="mediumLarge"
-      background="aurora"
+      background="circleGradient"
       cardStyle="glass-elevated"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <div id="nav" data-section="nav">
+      <NavbarStyleFullscreen
-        <NavbarLayoutFloatingInline
+        navItems={navItems}
-          navItems={navItems}
+        brandName="Earl Boys Services"
-          button={contactButton}
+        bottomLeftText="Richmond, VA"
-          brandName="Demo Site"
+        bottomRightText="804-938-0669"
-        />
+      />
-      </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardDashboard
+        <HeroBillboardGallery
-          title="Real-Time Analytics Platform"
+          background={{ variant: 'radial-gradient' }}
-          description="Monitor your business metrics with our comprehensive dashboard. Real-time data, actionable insights, and beautiful visualizations."
+          title="Professional Home Services in Richmond, VA"
-          tag="Live Analytics"
+          description="Expert plumbing, painting, electrical, and flooring services you can trust. 15 years of excellence."
-          tagIcon={Sparkles}
+          tag="Trusted Local Service"
-          tagAnimation="slide-up"
+          mediaItems={[
-          background={{ variant: "radial-gradient" }}
+            { imageSrc: 'https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&q=80', imageAlt: 'Professional home services' },
+            { imageSrc: 'https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=600&q=80', imageAlt: 'Plumbing expertise' },
+            { imageSrc: 'https://images.unsplash.com/photo-1564543645419-d59e79b6837d?w=600&q=80', imageAlt: 'Quality painting' },
+          ]}
+          mediaAnimation="none"
           buttons={[
-            { text: "Get Started", href: "#pricing" },
+            { text: 'Get Free Estimate', href: '#contact' },
-            { text: "View Demo", href: "#features" },
+            { text: 'Call Now', href: 'tel:804-938-0669' },
           ]}
-          buttonAnimation="slide-up"
-          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="features" data-section="features">
-        <FeatureCardThree
-          features={[
-            {
-              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"
-            },
-            {
-              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"
-            },
-            {
-              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"
-            },
-            {
-              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"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          buttons={[
-            { 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
+        <FeatureCardSeven
-          metrics={[
+          features={features}
-            {
+          title="Our Services"
-              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"
+          description="Comprehensive home services tailored to your needs. Quality workmanship and professional service."
-            },
+          textboxLayout="default"
-            {
-              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">
+      <div id="about" data-section="about">
-        <SocialProofOne
+        <SplitAbout
-          names={["TechCorp", "DataFlow", "CloudSync", "InnovateLabs", "FutureScale"]}
+          title="Why Choose Earl Boys Services?"
-          title="Trusted by Industry Leaders"
+          description="With over 15 years in the home services industry, we've built our reputation on reliability, expertise, and customer satisfaction. Our team of licensed professionals is dedicated to delivering exceptional results on every project."
-          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}
+          mediaAnimation="none"
-          showCard={true}
+          bulletPoints={bulletPoints}
+          imageSrc="https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&q=80"
+          imageAlt="Our team of professionals"
+          imagePosition="right"
+          buttons={[{ text: 'Learn More', href: '#contact' }]}
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
+      <div id="contact" data-section="contact">
-        <TestimonialCardFive
+        <ContactSplit
-          testimonials={[
+          tag="Get In Touch"
-            {
+          title="Schedule Your Free Estimate"
-              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"
+          description="Contact us today for a free, no-obligation estimate. Our team is ready to help with all your home service needs."
-            },
+          background={{ variant: 'sparkles-gradient' }}
-            {
-              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: "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"
-            },
-          ]}
-          title="What Our Customers Say"
-          description="Real stories from companies using our platform daily"
-          tag="Testimonials"
-          tagIcon={Star}
-          textboxLayout="default"
           useInvertedBackground={false}
+          mediaAnimation="none"
+          imageSrc="https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&q=80"
+          imageAlt="Professional team"
+          mediaPosition="right"
+          buttonText="Request Quote"
+          inputPlaceholder="Enter your email"
+          onSubmit={(email) => {
+            console.log('Email submitted:', email);
+          }}
         />
       </div>
 
-      <div id="faq" data-section="faq">
+      <footer data-section="footer">
-        <FaqDouble
+        <FooterSimple
-          faqs={[
+          columns={footerColumns}
-            {
+          bottomLeftText="© 2025 Earl Boys Services LLC. All rights reserved."
-              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."
+          bottomRightText="Serving Richmond, VA with Professional Home Services"
-            },
-            {
-              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: "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: "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: "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: "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."
-            },
-          ]}
-          title="Frequently Asked Questions"
-          description="Find answers to common questions about our service"
-          tag="Support"
-          tagIcon={CheckCircle}
-          faqsAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
         />
-      </div>
+      </footer>
-
-      <div id="footer" data-section="footer">
-        <FooterCard
-          logoText="Demo Site"
-          copyrightText="© 2025 Demo Site. All rights reserved."
-          socialLinks={[
-            {
-              icon: Facebook,
-              href: "https://facebook.com",              ariaLabel: "Facebook"
-            },
-            {
-              icon: Instagram,
-              href: "https://instagram.com",              ariaLabel: "Instagram"
-            },
-            {
-              icon: Linkedin,
-              href: "https://linkedin.com",              ariaLabel: "LinkedIn"
-            },
-          ]}
-        />
-      </div>
     </ThemeProvider>
   );
 }

src/app/portfolio/page.tsx

@@ -1,187 +1,136 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
 import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
-import FooterCard from "@/components/sections/footer/FooterCard";
+import TeamCardEleven from "@/components/sections/team/TeamCardEleven";
-import {
+import { Briefcase, Code, Palette, Users } from "lucide-react";
-  Wrench,
+
-  Paintbrush,
+const Portfolio = () => {
-  Droplet,
+  const navItems = [
-  Zap,
+    { name: "Home", id: "/" },
-  MonitorPlay,
+    { name: "Portfolio", id: "/portfolio" },
-  Facebook,
+    { name: "Contact", id: "contact" },
-  Instagram,
+  ];
-  Phone,
+
-} from "lucide-react";
+  const projects = [
+    {
+      title: "Brand Identity Design",      description: "Complete visual identity system including logo, color palette, and brand guidelines.",      icon: Palette,
+      mediaItems: [
+        {
+          imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=500&h=500&fit=crop&_wi=1",          imageAlt: "Brand design mockup"},
+        {
+          imageSrc: "https://images.unsplash.com/photo-1543632835-a1bf4ab86fef?w=500&h=500&fit=crop",          imageAlt: "Color palette exploration"},
+      ],
+    },
+    {
+      title: "Web Application Development",      description: "Full-stack web application with responsive design and modern architecture.",      icon: Code,
+      mediaItems: [
+        {
+          imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=500&h=500&fit=crop",          imageAlt: "Web application interface"},
+        {
+          imageSrc: "https://images.unsplash.com/photo-1633356122544-f134324ef6db?w=500&h=500&fit=crop",          imageAlt: "Mobile responsive design"},
+      ],
+    },
+    {
+      title: "Strategic Branding",      description: "Comprehensive branding strategy and positioning for market leadership.",      icon: Briefcase,
+      mediaItems: [
+        {
+          imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop&_wi=1",          imageAlt: "Strategy workshop"},
+        {
+          imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop&_wi=2",          imageAlt: "Marketing materials"},
+      ],
+    },
+    {
+      title: "User Experience Design",      description: "Intuitive user interfaces designed with user research and testing.",      icon: Palette,
+      mediaItems: [
+        {
+          imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=500&h=500&fit=crop&_wi=2",          imageAlt: "UX wireframes"},
+        {
+          imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=500&h=500&fit=crop&_wi=3",          imageAlt: "Design iterations"},
+      ],
+    },
+  ];
+
+  const teamMembers = [
+    {
+      id: "leadership",      groupTitle: "Leadership",      members: [
+        {
+          id: "1",          title: "Sarah Johnson",          subtitle: "Creative Director",          detail: "sarah.johnson@company.com",          imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&_wi=1",          imageAlt: "Sarah Johnson"},
+        {
+          id: "2",          title: "Michael Chen",          subtitle: "Lead Strategist",          detail: "michael.chen@company.com",          imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&_wi=1",          imageAlt: "Michael Chen"},
+      ],
+    },
+    {
+      id: "design",      groupTitle: "Design Team",      members: [
+        {
+          id: "3",          title: "Emma Davis",          subtitle: "UI/UX Designer",          detail: "emma.davis@company.com",          imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop",          imageAlt: "Emma Davis"},
+        {
+          id: "4",          title: "James Wilson",          subtitle: "Brand Designer",          detail: "james.wilson@company.com",          imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop",          imageAlt: "James Wilson"},
+        {
+          id: "5",          title: "Sophie Martin",          subtitle: "Graphic Designer",          detail: "sophie.martin@company.com",          imageSrc: "https://images.unsplash.com/photo-1517849845537-1d51a20414de?w=400&h=400&fit=crop",          imageAlt: "Sophie Martin"},
+      ],
+    },
+    {
+      id: "development",      groupTitle: "Development Team",      members: [
+        {
+          id: "6",          title: "Alex Rodriguez",          subtitle: "Full Stack Developer",          detail: "alex.rodriguez@company.com",          imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&_wi=2",          imageAlt: "Alex Rodriguez"},
+        {
+          id: "7",          title: "Lisa Anderson",          subtitle: "Frontend Developer",          detail: "lisa.anderson@company.com",          imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&_wi=2",          imageAlt: "Lisa Anderson"},
+      ],
+    },
+  ];
 
-export default function PortfolioPage() {
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="reveal-blur"
+      defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="smallMedium"
+      contentWidth="medium"
-      sizing="mediumLargeSizeLargeTitles"
+      sizing="medium"
-      background="noise"
+      background="none"
       cardStyle="solid"
-      primaryButtonStyle="primary-glow"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      {/* Navbar */}
+      <NavbarLayoutFloatingOverlay
-      <div id="nav" data-section="nav">
+        navItems={navItems}
-        <NavbarStyleCentered
+        brandName="Portfolio"
-          navItems={[
+        button={{ text: "Contact Us", href: "contact" }}
-            { name: "Home", id: "/" },
+      />
-            { name: "Services", id: "/services" },
+      <div id="portfolio" data-section="portfolio">
-            { name: "About", id: "/about" },
+        <div className="py-20">
-            { name: "Portfolio", id: "/portfolio" },
+          <FeatureCardTwentyFive
-            { name: "Contact", id: "/contact" },
+            title="Featured Projects"
-          ]}
+            description="Explore our latest work and successful client engagements"
-          button={{
+            features={projects.map((project) => ({
-            text: "Call Now",
+              ...project,
-            href: "tel:804-938-0669",
-          }}
-          brandName="Earl Boys Services"
-        />
-      </div>
-
-      {/* Portfolio Hero Section */}
-      <div id="portfolio-hero" data-section="portfolio-hero">
-        <HeroBillboardCarousel
-          title="Our Portfolio"
-          description="Explore our collection of completed projects showcasing professional home services excellence across Richmond, VA."
-          tag="Earl Boys Services"
-          tagIcon={Wrench}
-          tagAnimation="slide-up"
-          background={{ variant: "plain" }}
-          mediaItems={[
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-receiving-box_23-2149103401.jpg?_wi=6",
-              imageAlt: "Before after home renovation transformation",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-man-choosing-color_23-2148903521.jpg?_wi=5",
-              imageAlt: "Kitchen renovation before after transformation",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/young-couple-moving-new-home_23-2149242082.jpg?_wi=5",
-              imageAlt: "Room renovation before after completion",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721573.jpg?_wi=5",
-              imageAlt: "Professional plumbing work",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-painting-wall-home_23-2149098981.jpg?_wi=4",
-              imageAlt: "Professional painting service",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/woman-electrician-checks-switchboard-tablet-night-shift-smart-service_169016-70936.jpg?_wi=5",
-              imageAlt: "Professional electrician electrical work",
-            },
-          ]}
-          buttons={[
-            {
-              text: "View Services",
-              href: "/services",
-            },
-            {
-              text: "Get a Quote",
-              href: "tel:804-938-0669",
-            },
-          ]}
-          buttonAnimation="slide-up"
-          ariaLabel="Portfolio section for Earl Boys Services"
-        />
-      </div>
-
-      {/* Featured Projects Section */}
-      <div id="projects" data-section="projects">
-        <FeatureCardTwentyFive
-          title="Featured Projects"
-          description="A selection of our most successful home improvement and repair projects completed with professional excellence and customer satisfaction."
-          tag="Project Showcase"
-          tagIcon={Wrench}
-          features={[
-            {
-              title: "Plumbing Installation",
-              description: "Complete bathroom and kitchen plumbing system installation with modern fixtures and premium finishes.",
-              icon: Droplet,
               mediaItems: [
-                {
+                project.mediaItems[0],
-                  imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721573.jpg?_wi=6",
+                project.mediaItems[1] || project.mediaItems[0],
-                  imageAlt: "Professional plumbing work",
-                },
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-receiving-box_23-2149103401.jpg?_wi=7",
-                  imageAlt: "Project completed successfully",
-                },
               ],
-            },
+            }))}
-            {
+            animationType="slide-up"
-              title: "Interior Painting",
+            textboxLayout="default"
-              description: "Professional interior painting project transforming living spaces with fresh color and premium finish.",
+            useInvertedBackground={false}
-              icon: Paintbrush,
+          />
-              mediaItems: [
+        </div>
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-painting-wall-home_23-2149098981.jpg?_wi=5",
-                  imageAlt: "Professional painting service",
-                },
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-man-choosing-color_23-2148903521.jpg?_wi=6",
-                  imageAlt: "Color selection and painting results",
-                },
-              ],
-            },
-            {
-              title: "Electrical Upgrades",
-              description: "Licensed electrical work including panel upgrades, outlet installation, and safety inspections for modern homes.",
-              icon: Zap,
-              mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/woman-electrician-checks-switchboard-tablet-night-shift-smart-service_169016-70936.jpg?_wi=6",
-                  imageAlt: "Professional electrician electrical work",
-                },
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/light-switches-near-metal-door-handle-stairs-lighting-control_169016-69323.jpg",
-                  imageAlt: "Professional electrical installation",
-                },
-              ],
-            },
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
       </div>
-
+      <div id="team" data-section="team">
-      {/* Footer */}
+        <div className="py-20">
-      <div id="footer" data-section="footer">
+          <TeamCardEleven
-        <FooterCard
+            title="Our Team"
-          logoText="Earl Boys Services"
+            description="Meet the talented professionals behind our success"
-          copyrightText="© 2025 Earl Boys Services LLC. All rights reserved. Licensed & Insured."
+            groups={teamMembers}
-          socialLinks={[
+            animationType="slide-up"
-            {
+            textboxLayout="default"
-              icon: Facebook,
+            useInvertedBackground={false}
-              href: "https://facebook.com",
+          />
-              ariaLabel: "Facebook",
+        </div>
-            },
-            {
-              icon: Instagram,
-              href: "https://instagram.com",
-              ariaLabel: "Instagram",
-            },
-            {
-              icon: Phone,
-              href: "tel:804-938-0669",
-              ariaLabel: "Call us",
-            },
-          ]}
-        />
       </div>
     </ThemeProvider>
   );
-}
+};
+
+export default Portfolio;

src/app/services/page.tsx

@@ -1,213 +1,283 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
+import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
-import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
+import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
-import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
+import FaqSplitText from "@/components/sections/faq/FaqSplitText";
-import FaqDouble from "@/components/sections/faq/FaqDouble";
 import FooterCard from "@/components/sections/footer/FooterCard";
-import { Zap, CheckCircle, Users, Shield, Sparkles, TrendingUp, MapPin, Phone, Mail, Facebook, Instagram, Linkedin } from "lucide-react";
+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";
 
 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="mediumLarge"
+      contentWidth="smallMedium"
       sizing="mediumLargeSizeLargeTitles"
-      background="aurora"
+      background="noise"
-      cardStyle="glass-elevated"
+      cardStyle="solid"
-      primaryButtonStyle="gradient"
+      primaryButtonStyle="primary-glow"
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline
+        <NavbarStyleCentered
-          navItems={navItems}
+          brandName="Earl Boys Services"
-          button={contactButton}
+          navItems={[
-          brandName="Demo Site"
+            { name: "Home", id: "home" },
-        />
+            { name: "Services", id: "services" },
-      </div>
+            { name: "About", id: "about" },
-
+            { name: "Portfolio", id: "portfolio" },
-      <div id="hero" data-section="hero">
+            { name: "Contact", id: "contact" },
-        <HeroBillboardDashboard
-          title="Our Comprehensive Services"
-          description="Explore our full range of solutions designed to help your business succeed. From analytics to support, we have everything you need."
-          tag="Services"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
-          background={{ variant: "radial-gradient" }}
-          buttons={[
-            { text: "View Pricing", href: "/#pricing" },
-            { text: "Schedule Demo", href: "#" },
           ]}
-          buttonAnimation="slide-up"
+          button={{
-          dashboard={{
+            text: "Call Now",
-            title: "Service Capabilities",            logoIcon: TrendingUp,
+            href: "tel:804-938-0669",
-            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="features" data-section="features">
+      <div id="services-detail" data-section="services-detail">
-        <FeatureCardThree
+        <FeatureCardTwentyFive
           features={[
             {
-              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: "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: "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: "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: "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: "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: "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: "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: "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: "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: "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: "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",
+                },
+              ],
             },
           ]}
-          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: "Explore All Services", href: "#" },
+            {
+              text: "Back to Home",
+              href: "/",
+            },
           ]}
           buttonAnimation="slide-up"
         />
       </div>
 
-      <div id="metrics" data-section="metrics">
+      <div id="service-benefits" data-section="service-benefits">
-        <MetricCardEleven
+        <MetricCardOne
           metrics={[
             {
-              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: "1",
+              value: "24",
+              title: "Hour",
+              description: "Response time for service requests",
+              icon: Clock,
             },
             {
-              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: "2",
+              value: "15",
+              title: "Years",
+              description: "Of industry expertise and experience",
+              icon: Hammer,
             },
             {
-              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"
+              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,
             },
           ]}
-          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="faq" data-section="faq">
+      <div id="service-faq" data-section="service-faq">
-        <FaqDouble
+        <FaqSplitText
           faqs={[
             {
-              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: "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: "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: "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: "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: "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: "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: "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: "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: "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: "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."
+              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.",
             },
           ]}
-          title="Service Questions"
+          sideTitle="Service Questions Answered"
-          description="Common questions about our service offerings"
+          sideDescription="Learn more about our services, warranties, and availability. Have a specific question? Call us today."
-          tag="Support"
+          textPosition="left"
-          tagIcon={CheckCircle}
           faqsAnimation="slide-up"
-          textboxLayout="default"
           useInvertedBackground={false}
+          animationType="smooth"
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterCard
-          logoText="Demo Site"
+          logoText="Earl Boys Services"
-          copyrightText="© 2025 Demo Site. All rights reserved."
+          copyrightText="© 2025 Earl Boys Services LLC. All rights reserved. Licensed & Insured."
           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: Linkedin,
+              icon: Phone,
-              href: "https://linkedin.com",              ariaLabel: "LinkedIn"
+              href: "tel:804-938-0669",
+              ariaLabel: "Call us",
             },
           ]}
         />
       </div>
     </ThemeProvider>
   );
-}
+}