Update src/app/portfolio/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -1,196 +1,244 @@
-'use client';
+"use client";
 
-import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import HeroLogo from "@/components/sections/hero/HeroLogo";
-import SplitAbout from '@/components/sections/about/SplitAbout';
+import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
-import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
+import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
-import FooterSimple from '@/components/sections/footer/FooterSimple';
+import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
-import { CheckCircle, Mail } from 'lucide-react';
+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";
 
-const navItems = [
+const Home = () => {
-  { name: 'Home', id: '/' },
+  const navItems = [
-  { name: 'Services', id: '#services' },
+    { name: "Home", id: "/" },
-  { name: 'About', id: '#about' },
+    { name: "Portfolio", id: "/portfolio" },
-  { name: 'Contact', id: '#contact' },
+    { name: "Contact", id: "contact" },
-];
+  ];
 
-const features = [
+  const features = [
-  {
+    {
-    id: 1,
+      id: 1,
-    title: 'Professional Plumbing Services',
+      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"},
-    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',
+      id: 2,
-    imageAlt: 'Professional plumbing services',
+      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"},
-    icon: CheckCircle,
+    {
-  },
+      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: 2,
+    {
-    title: 'Quality Painting & Finishing',
+      id: 4,
-    description: 'Interior and exterior painting with premium finishes. Transform your space with professional craftsmanship.',
+      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"},
-    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 = [
+  const plans = [
-  {
+    {
-    title: '15 Years Experience',
+      id: "starter",      badge: "Great for Getting Started",      price: "$29/mo",      subtitle: "Perfect for small projects and prototypes",      buttons: [{ text: "Get Started", href: "/contact" }],
-    description: 'Trusted by thousands of homeowners in Richmond, VA with consistent quality and reliability.',
+      features: [
-    icon: CheckCircle,
+        "Up to 100K monthly requests",        "5GB storage",        "Basic analytics",        "Email support"],
-  },
+    },
-  {
+    {
-    title: 'Licensed & Insured',
+      id: "professional",      badge: "Most Popular",      badgeIcon: Zap,
-    description: 'All our technicians are fully licensed, insured, and trained to the highest standards.',
+      price: "$79/mo",      subtitle: "Ideal for growing businesses",      buttons: [{ text: "Start Free Trial", href: "/contact" }],
-    icon: CheckCircle,
+      features: [
-  },
+        "Up to 1M monthly requests",        "100GB storage",        "Advanced analytics",        "Priority support",        "Custom domains"],
-  {
+    },
-    title: 'Free Estimates',
+    {
-    description: 'No obligation quotes for all services. Transparent pricing with no hidden fees.',
+      id: "enterprise",      badge: "For Scale",      price: "Custom",      subtitle: "Enterprise-grade performance",      buttons: [{ text: "Contact Sales", href: "/contact" }],
-    icon: CheckCircle,
+      features: [
-  },
+        "Unlimited requests",        "Unlimited storage",        "Real-time analytics",        "24/7 phone support",        "Custom integrations",        "Dedicated account manager"],
-];
+    },
+  ];
 
-const footerColumns = [
+  const metrics = [
-  {
+    {
-    title: 'Services',
+      id: "1",      icon: TrendingUp,
-    items: [
+      title: "Performance",      value: "99.99%"},
-      { label: 'Plumbing', href: '#services' },
+    {
-      { label: 'Painting', href: '#services' },
+      id: "2",      icon: Zap,
-      { label: 'Electrical', href: '#services' },
+      title: "Speed",      value: "<100ms"},
-      { label: 'Flooring', href: '#services' },
+    {
-    ],
+      id: "3",      icon: Users,
-  },
+      title: "Users",      value: "50K+"},
-  {
+    {
-    title: 'Company',
+      id: "4",      icon: Award,
-    items: [
+      title: "Uptime",      value: "99.9%"},
-      { label: 'About Us', href: '#about' },
+  ];
-      { label: 'Contact', href: '#contact' },
+
-      { label: 'Testimonials', href: '#' },
+  const testimonials = [
-      { label: 'Blog', href: '#' },
+    {
-    ],
+      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"},
-    title: 'Support',
+    {
-    items: [
+      id: "3",      name: "Emma Davis",      imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&_wi=1"},
-      { label: 'Help Center', href: '#' },
+    {
-      { label: 'FAQ', href: '#' },
+      id: "4",      name: "James Wilson",      imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&_wi=1"},
-      { label: 'Emergency Service', href: 'tel:804-938-0669' },
+  ];
-      { label: 'Schedule Service', href: '#contact' },
+
-    ],
+  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: "/" },
+      ],
+    },
+  ];
 
-export default function Home() {
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
       contentWidth="medium"
-      sizing="mediumLarge"
+      sizing="medium"
-      background="circleGradient"
+      background="none"
-      cardStyle="glass-elevated"
+      cardStyle="solid"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleFullscreen
+      <NavbarLayoutFloatingOverlay
         navItems={navItems}
-        brandName="Earl Boys Services"
+        brandName="Fast"
-        bottomLeftText="Richmond, VA"
+        button={{ text: "Get Started", href: "contact" }}
-        bottomRightText="804-938-0669"
       />
-
       <div id="hero" data-section="hero">
-        <HeroBillboardGallery
+        <HeroLogo
-          background={{ variant: 'radial-gradient' }}
+          logoText="Fast"
-          title="Professional Home Services in Richmond, VA"
+          description="Optimized performance and lightning-fast load times for your website"
-          description="Expert plumbing, painting, electrical, and flooring services you can trust. 15 years of excellence."
-          tag="Trusted Local Service"
-          mediaItems={[
-            { 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 Free Estimate', href: '#contact' },
+            { text: "Start Free Trial", href: "/contact" },
-            { text: 'Call Now', href: 'tel:804-938-0669' },
+            { text: "View Docs", href: "/" },
           ]}
+          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">
-      <div id="services" data-section="services">
+        <div className="py-20">
-        <FeatureCardSeven
+          <FeatureCardSeven
-          features={features}
+            title="Why Choose Our Platform"
-          title="Our Services"
+            description="We deliver exceptional performance and speed optimization for your business"
-          description="Comprehensive home services tailored to your needs. Quality workmanship and professional service."
+            features={features}
-          textboxLayout="default"
+            animationType="slide-up"
-          animationType="slide-up"
+            textboxLayout="default"
-          useInvertedBackground={false}
+            useInvertedBackground={false}
-        />
+          />
+        </div>
       </div>
-
+      <div id="metrics" data-section="metrics">
-      <div id="about" data-section="about">
+        <div className="py-20">
-        <SplitAbout
+          <MetricCardThree
-          title="Why Choose Earl Boys Services?"
+            title="Our Performance Metrics"
-          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="Industry-leading uptime and speed performance"
-          textboxLayout="default"
+            metrics={metrics}
-          useInvertedBackground={false}
+            animationType="slide-up"
-          mediaAnimation="none"
+            textboxLayout="default"
-          bulletPoints={bulletPoints}
+            useInvertedBackground={false}
-          imageSrc="https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&q=80"
+          />
-          imageAlt="Our team of professionals"
+        </div>
-          imagePosition="right"
+      </div>
-          buttons={[{ text: 'Learn More', href: '#contact' }]}
+      <div id="pricing" data-section="pricing">
-        />
+        <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="testimonials" data-section="testimonials">
+        <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">
+        <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">
-        <ContactSplit
+        <div className="py-20">
-          tag="Get In Touch"
+          <ContactText
-          title="Schedule Your Free Estimate"
+            text="Ready to optimize your website performance? Start your free trial today and experience the difference."
-          description="Contact us today for a free, no-obligation estimate. Our team is ready to help with all your home service needs."
+            animationType="entrance-slide"
-          background={{ variant: 'sparkles-gradient' }}
+            buttons={[
-          useInvertedBackground={false}
+              { text: "Start Free Trial", href: "/contact" },
-          mediaAnimation="none"
+              { text: "Schedule Demo", href: "/" },
-          imageSrc="https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&q=80"
+            ]}
-          imageAlt="Professional team"
+            background={{ variant: "plain" }}
-          mediaPosition="right"
+            useInvertedBackground={false}
-          buttonText="Request Quote"
+          />
-          inputPlaceholder="Enter your email"
+        </div>
-          onSubmit={(email) => {
+      </div>
-            console.log('Email submitted:', email);
+      <div id="footer" data-section="footer">
-          }}
+        <FooterBaseCard
+          logoText="Fast"
+          columns={footerColumns}
+          copyrightText="© 2025 Fast. All rights reserved."
         />
       </div>
-
-      <footer data-section="footer">
-        <FooterSimple
-          columns={footerColumns}
-          bottomLeftText="© 2025 Earl Boys Services LLC. All rights reserved."
-          bottomRightText="Serving Richmond, VA with Professional Home Services"
-        />
-      </footer>
     </ThemeProvider>
   );
-}
+};
+
+export default Home;

src/app/portfolio/page.tsx

@@ -18,7 +18,7 @@ const Portfolio = () => {
       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",          imageAlt: "Brand design mockup"},
+          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"},
       ],
@@ -27,27 +27,27 @@ const Portfolio = () => {
       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-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",          imageAlt: "Mobile responsive design"},
+          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",          imageAlt: "Strategy workshop"},
+          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",          imageAlt: "Marketing materials"},
+          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",          imageAlt: "UX wireframes"},
+          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",          imageAlt: "Design iterations"},
+          imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=500&h=500&fit=crop&_wi=3",          imageAlt: "Design iterations"},
       ],
     },
   ];
@@ -56,17 +56,17 @@ const Portfolio = () => {
     {
       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",          imageAlt: "Sarah Johnson"},
+          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",          imageAlt: "Michael Chen"},
+          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: "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",          imageAlt: "James Wilson"},
+          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"},
       ],
@@ -74,9 +74,9 @@ const Portfolio = () => {
     {
       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",          imageAlt: "Alex Rodriguez"},
+          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",          imageAlt: "Lisa Anderson"},
+          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"},
       ],
     },
   ];