Update src/app/portfolio/page.tsx

Merge version_4 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 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 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 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: "Features", id: "#features" },
-    { name: "Pricing", id: "#pricing" },
-    { name: "Services", id: "/services" },
+    { name: "Home", id: "home" },
+    { name: "Services", id: "services" },
+    { name: "About", id: "about" },
+    { 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
-          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"
-            },
-          ]}
+        <MetricCardOne
           title="Ready to Transform Your Home?"
           description="Join thousands of satisfied customers who have trusted Earl Boys Services with their most important projects."
           tag="Contact Details"
           tagIcon={TrendingUp}
+          metrics={[
+            {
+              id: "1",              value: "804",              title: "938",              description: "Call us directly - Call Now",              icon: Phone,
+            },
+            {
+              id: "2",              value: "15",              title: "Years",              description: "Experience serving Richmond VA",              icon: Clock,
+            },
+            {
+              id: "3",              value: "2000",              title: "Customers",              description: "Trust us for their home services",              icon: Users,
+            },
+            {
+              id: "4",              value: "10",              title: "Services",              description: "Available in your area",              icon: Wrench,
+            },
+          ]}
           animationType="slide-up"
+          gridVariant="uniform-all-items-equal"
           textboxLayout="default"
           useInvertedBackground={true}
         />
       </div>
 
-      <div id="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?"
-          description="Find answers to common questions about contacting Earl Boys Services, scheduling appointments, and our service offerings."
-          tag="Support"
-          tagIcon={Mail}
+          textPosition="left"
           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,244 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-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 { Sparkles, CheckCircle, Star, MapPin, Shield, Users, TrendingUp, Zap, Facebook, Instagram, Linkedin } from "lucide-react";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroLogo from "@/components/sections/hero/HeroLogo";
+import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
+import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
+import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
+import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
+import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { Zap, Users, TrendingUp, Award } from "lucide-react";
 
-export default function HomePage() {
+const Home = () => {
   const navItems = [
     { name: "Home", id: "/" },
-    { name: "Features", id: "#features" },
-    { name: "Pricing", id: "#pricing" },
-    { name: "Services", id: "/services" },
+    { name: "Portfolio", id: "/portfolio" },
+    { name: "Contact", id: "contact" },
   ];
 
-  const contactButton = {
-    text: "Get Started",    href: "#contact"
-  };
+  const features = [
+    {
+      id: 1,
+      title: "Lightning Fast Performance",      description: "Optimized for speed with advanced caching, lazy loading, and resource optimization. Achieve sub-second page loads.",      imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=500&h=500&fit=crop&_wi=1"},
+    {
+      id: 2,
+      title: "Seamless User Experience",      description: "Intuitive interface with smooth animations and responsive design. Works flawlessly on all devices.",      imageSrc: "https://images.unsplash.com/photo-1633356122544-f134324ef6db?w=500&h=500&fit=crop&_wi=1"},
+    {
+      id: 3,
+      title: "Intelligent Caching",      description: "Smart caching strategies that reduce server load and bandwidth usage while improving response times significantly.",      imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop"},
+    {
+      id: 4,
+      title: "Scalable Infrastructure",      description: "Built to handle growth. Scales automatically to meet demand without compromising performance or reliability.",      imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=500&h=500&fit=crop"},
+  ];
+
+  const plans = [
+    {
+      id: "starter",      badge: "Great for Getting Started",      price: "$29/mo",      subtitle: "Perfect for small projects and prototypes",      buttons: [{ text: "Get Started", href: "/contact" }],
+      features: [
+        "Up to 100K monthly requests",        "5GB storage",        "Basic analytics",        "Email support"],
+    },
+    {
+      id: "professional",      badge: "Most Popular",      badgeIcon: Zap,
+      price: "$79/mo",      subtitle: "Ideal for growing businesses",      buttons: [{ text: "Start Free Trial", href: "/contact" }],
+      features: [
+        "Up to 1M monthly requests",        "100GB storage",        "Advanced analytics",        "Priority support",        "Custom domains"],
+    },
+    {
+      id: "enterprise",      badge: "For Scale",      price: "Custom",      subtitle: "Enterprise-grade performance",      buttons: [{ text: "Contact Sales", href: "/contact" }],
+      features: [
+        "Unlimited requests",        "Unlimited storage",        "Real-time analytics",        "24/7 phone support",        "Custom integrations",        "Dedicated account manager"],
+    },
+  ];
+
+  const metrics = [
+    {
+      id: "1",      icon: TrendingUp,
+      title: "Performance",      value: "99.99%"},
+    {
+      id: "2",      icon: Zap,
+      title: "Speed",      value: "<100ms"},
+    {
+      id: "3",      icon: Users,
+      title: "Users",      value: "50K+"},
+    {
+      id: "4",      icon: Award,
+      title: "Uptime",      value: "99.9%"},
+  ];
+
+  const testimonials = [
+    {
+      id: "1",      name: "Sarah Johnson",      imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop"},
+    {
+      id: "2",      name: "Michael Chen",      imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop"},
+    {
+      id: "3",      name: "Emma Davis",      imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&_wi=1"},
+    {
+      id: "4",      name: "James Wilson",      imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&_wi=1"},
+  ];
+
+  const faqs = [
+    {
+      id: "1",      title: "How do I get started?",      content:
+        "Getting started is easy! Sign up for a free account, choose your plan, and follow our setup guide. You'll be up and running in minutes."},
+    {
+      id: "2",      title: "What makes your service fast?",      content:
+        "We use advanced caching strategies, CDN distribution, and optimized infrastructure to ensure lightning-fast performance across all regions."},
+    {
+      id: "3",      title: "Can I upgrade or downgrade anytime?",      content:
+        "Absolutely! You can change your plan at any time. Upgrades take effect immediately, and downgrades apply at the next billing cycle."},
+    {
+      id: "4",      title: "What support do you offer?",      content:
+        "We provide email support for all plans, priority support for Professional and above, and 24/7 phone support for Enterprise customers."},
+    {
+      id: "5",      title: "Is my data secure?",      content:
+        "Yes, we use enterprise-grade security with encryption at rest and in transit. All data is backed up daily and complies with industry standards."},
+    {
+      id: "6",      title: "Do you offer a free trial?",      content:
+        "Yes! We offer a 14-day free trial with full access to all Professional features. No credit card required to get started."},
+  ];
+
+  const footerColumns = [
+    {
+      title: "Product",      items: [
+        { label: "Features", href: "#features" },
+        { label: "Pricing", href: "#pricing" },
+        { label: "Security", href: "#security" },
+      ],
+    },
+    {
+      title: "Company",      items: [
+        { label: "About", href: "/" },
+        { label: "Blog", href: "/" },
+        { label: "Careers", href: "/" },
+      ],
+    },
+    {
+      title: "Resources",      items: [
+        { label: "Documentation", href: "/" },
+        { label: "API Reference", href: "/" },
+        { label: "Support", href: "/" },
+      ],
+    },
+  ];
 
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="reveal-blur"
+      defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="mediumLarge"
-      sizing="mediumLargeSizeLargeTitles"
-      background="aurora"
-      cardStyle="glass-elevated"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline
-          navItems={navItems}
-          button={contactButton}
-          brandName="Demo Site"
-        />
-      </div>
-
+      <NavbarLayoutFloatingOverlay
+        navItems={navItems}
+        brandName="Fast"
+        button={{ text: "Get Started", href: "contact" }}
+      />
       <div id="hero" data-section="hero">
-        <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: "radial-gradient" }}
+        <HeroLogo
+          logoText="Fast"
+          description="Optimized performance and lightning-fast load times for your website"
           buttons={[
-            { text: "Get Started", href: "#pricing" },
-            { text: "View Demo", href: "#features" },
+            { text: "Start Free Trial", href: "/contact" },
+            { text: "View Docs", href: "/" },
           ]}
-          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" },
-            ],
-          }}
+          imageSrc="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=1200&h=600&fit=crop"
+          imageAlt="Fast performance illustration"
         />
       </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 className="py-20">
+          <FeatureCardSeven
+            title="Why Choose Our Platform"
+            description="We deliver exceptional performance and speed optimization for your business"
+            features={features}
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
+      </div>
+      <div id="metrics" data-section="metrics">
+        <div className="py-20">
+          <MetricCardThree
+            title="Our Performance Metrics"
+            description="Industry-leading uptime and speed performance"
+            metrics={metrics}
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
       </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 className="py-20">
+          <PricingCardEight
+            title="Simple, Transparent Pricing"
+            description="Choose the perfect plan for your needs"
+            plans={plans}
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
       </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">
-        <TestimonialCardFive
-          testimonials={[
-            {
-              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, 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}
-        />
+        <div className="py-20">
+          <TestimonialCardTwelve
+            testimonials={testimonials}
+            cardTitle="Join 50,000+ satisfied customers who trust our platform"
+            cardTag="Customer Testimonials"
+            cardAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
       </div>
-
       <div id="faq" data-section="faq">
-        <FaqDouble
-          faqs={[
-            {
-              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: "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 className="py-20">
+          <FaqSplitMedia
+            faqs={faqs}
+            imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop"
+            imageAlt="FAQ support"
+            title="Frequently Asked Questions"
+            description="Find answers to common questions about our service"
+            textboxLayout="default"
+            faqsAnimation="slide-up"
+            mediaAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
+      </div>
+      <div id="contact" data-section="contact">
+        <div className="py-20">
+          <ContactText
+            text="Ready to optimize your website performance? Start your free trial today and experience the difference."
+            animationType="entrance-slide"
+            buttons={[
+              { text: "Start Free Trial", href: "/contact" },
+              { text: "Schedule Demo", href: "/" },
+            ]}
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
+          />
+        </div>
       </div>
-
       <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"
-            },
-          ]}
+        <FooterBaseCard
+          logoText="Fast"
+          columns={footerColumns}
+          copyrightText="© 2025 Fast. All rights reserved."
         />
       </div>
     </ThemeProvider>
   );
-}
+};
+
+export default Home;

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 HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
 import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import {
-  Wrench,
-  Paintbrush,
-  Droplet,
-  Zap,
-  MonitorPlay,
-  Facebook,
-  Instagram,
-  Phone,
-} from "lucide-react";
+import TeamCardEleven from "@/components/sections/team/TeamCardEleven";
+import { Briefcase, Code, Palette, Users } from "lucide-react";
+
+const Portfolio = () => {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Portfolio", id: "/portfolio" },
+    { name: "Contact", id: "contact" },
+  ];
+
+  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&_wi=2",          imageAlt: "Web application interface"},
+        {
+          imageSrc: "https://images.unsplash.com/photo-1633356122544-f134324ef6db?w=500&h=500&fit=crop&_wi=2",          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&_wi=2",          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&_wi=2",          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"
-      sizing="mediumLargeSizeLargeTitles"
-      background="noise"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
       cardStyle="solid"
-      primaryButtonStyle="primary-glow"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      {/* Navbar */}
-      <div id="nav" data-section="nav">
-        <NavbarStyleCentered
-          navItems={[
-            { name: "Home", id: "/" },
-            { 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",
-          }}
-          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,
+      <NavbarLayoutFloatingOverlay
+        navItems={navItems}
+        brandName="Portfolio"
+        button={{ text: "Contact Us", href: "contact" }}
+      />
+      <div id="portfolio" data-section="portfolio">
+        <div className="py-20">
+          <FeatureCardTwentyFive
+            title="Featured Projects"
+            description="Explore our latest work and successful client engagements"
+            features={projects.map((project) => ({
+              ...project,
               mediaItems: [
-                {
-                  imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721573.jpg?_wi=6",
-                  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",
-                },
+                project.mediaItems[0],
+                project.mediaItems[1] || project.mediaItems[0],
               ],
-            },
-            {
-              title: "Interior Painting",
-              description: "Professional interior painting project transforming living spaces with fresh color and premium finish.",
-              icon: Paintbrush,
-              mediaItems: [
-                {
-                  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}
-        />
+            }))}
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
       </div>
-
-      {/* Footer */}
-      <div id="footer" data-section="footer">
-        <FooterCard
-          logoText="Earl Boys Services"
-          copyrightText="© 2025 Earl Boys Services LLC. All rights reserved. Licensed & Insured."
-          socialLinks={[
-            {
-              icon: Facebook,
-              href: "https://facebook.com",
-              ariaLabel: "Facebook",
-            },
-            {
-              icon: Instagram,
-              href: "https://instagram.com",
-              ariaLabel: "Instagram",
-            },
-            {
-              icon: Phone,
-              href: "tel:804-938-0669",
-              ariaLabel: "Call us",
-            },
-          ]}
-        />
+      <div id="team" data-section="team">
+        <div className="py-20">
+          <TeamCardEleven
+            title="Our Team"
+            description="Meet the talented professionals behind our success"
+            groups={teamMembers}
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
       </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 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 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 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"
-      cardStyle="glass-elevated"
-      primaryButtonStyle="gradient"
+      background="noise"
+      cardStyle="solid"
+      primaryButtonStyle="primary-glow"
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <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 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: "#" },
+        <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" },
           ]}
-          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" },
-            ],
+          button={{
+            text: "Call Now",
+            href: "tel:804-938-0669",
           }}
         />
       </div>
 
-      <div id="features" data-section="features">
-        <FeatureCardThree
+      <div id="services-detail" data-section="services-detail">
+        <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">
-        <MetricCardEleven
+      <div id="service-benefits" data-section="service-benefits">
+        <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">
-        <FaqDouble
+      <div id="service-faq" data-section="service-faq">
+        <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"
-          description="Common questions about our service offerings"
-          tag="Support"
-          tagIcon={CheckCircle}
+          sideTitle="Service Questions Answered"
+          sideDescription="Learn more about our services, warranties, and availability. Have a specific question? Call us today."
+          textPosition="left"
           faqsAnimation="slide-up"
-          textboxLayout="default"
           useInvertedBackground={false}
+          animationType="smooth"
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterCard
-          logoText="Demo Site"
-          copyrightText="© 2025 Demo Site. All rights reserved."
+          logoText="Earl Boys Services"
+          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,
-              href: "https://linkedin.com",              ariaLabel: "LinkedIn"
+              icon: Phone,
+              href: "tel:804-938-0669",
+              ariaLabel: "Call us",
             },
           ]}
         />
       </div>
     </ThemeProvider>
   );
-}
+}