From abd5c5937ec79e14a1b155abacca32e1aeaa60e1 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 10 Mar 2026 10:24:53 +0000
Subject: [PATCH] Switch to version 3: modified src/app/portfolio/page.tsx

---
 src/app/portfolio/page.tsx | 289 ++++++++++++++++++++++---------------
 1 file changed, 170 insertions(+), 119 deletions(-)

diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index 6ea35c5..3d6f35a 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -1,136 +1,187 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
 import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
-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",          imageAlt: "Brand design mockup"},
-        {
-          imageSrc: "https://images.unsplash.com/photo-1543632835-a1bf4ab86fef?w=500&h=500&fit=crop",          imageAlt: "Color palette exploration"},
-      ],
-    },
-    {
-      title: "Web Application Development",      description: "Full-stack web application with responsive design and modern architecture.",      icon: Code,
-      mediaItems: [
-        {
-          imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=500&h=500&fit=crop",          imageAlt: "Web application interface"},
-        {
-          imageSrc: "https://images.unsplash.com/photo-1633356122544-f134324ef6db?w=500&h=500&fit=crop",          imageAlt: "Mobile responsive design"},
-      ],
-    },
-    {
-      title: "Strategic Branding",      description: "Comprehensive branding strategy and positioning for market leadership.",      icon: Briefcase,
-      mediaItems: [
-        {
-          imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop",          imageAlt: "Strategy workshop"},
-        {
-          imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop",          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",          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",          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: "design",      groupTitle: "Design Team",      members: [
-        {
-          id: "3",          title: "Emma Davis",          subtitle: "UI/UX Designer",          detail: "emma.davis@company.com",          imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop",          imageAlt: "Emma Davis"},
-        {
-          id: "4",          title: "James Wilson",          subtitle: "Brand Designer",          detail: "james.wilson@company.com",          imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop",          imageAlt: "James Wilson"},
-        {
-          id: "5",          title: "Sophie Martin",          subtitle: "Graphic Designer",          detail: "sophie.martin@company.com",          imageSrc: "https://images.unsplash.com/photo-1517849845537-1d51a20414de?w=400&h=400&fit=crop",          imageAlt: "Sophie Martin"},
-      ],
-    },
-    {
-      id: "development",      groupTitle: "Development Team",      members: [
-        {
-          id: "6",          title: "Alex Rodriguez",          subtitle: "Full Stack Developer",          detail: "alex.rodriguez@company.com",          imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop",          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"},
-      ],
-    },
-  ];
+import FooterCard from "@/components/sections/footer/FooterCard";
+import {
+  Wrench,
+  Paintbrush,
+  Droplet,
+  Zap,
+  MonitorPlay,
+  Facebook,
+  Instagram,
+  Phone,
+} from "lucide-react";
 
+export default function PortfolioPage() {
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="entrance-slide"
+      defaultTextAnimation="reveal-blur"
       borderRadius="rounded"
-      contentWidth="medium"
-      sizing="medium"
-      background="none"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="noise"
       cardStyle="solid"
-      primaryButtonStyle="gradient"
+      primaryButtonStyle="primary-glow"
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <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: [
-                project.mediaItems[0],
-                project.mediaItems[1] || project.mediaItems[0],
-              ],
-            }))}
-            animationType="slide-up"
-            textboxLayout="default"
-            useInvertedBackground={false}
-          />
-        </div>
+      {/* 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>
-      <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>
+
+      {/* Portfolio Hero Section */}
+      <div id="portfolio-hero" data-section="portfolio-hero">
+        <HeroBillboardCarousel
+          title="Our Portfolio"
+          description="Explore our collection of completed projects showcasing professional home services excellence across Richmond, VA."
+          tag="Earl Boys Services"
+          tagIcon={Wrench}
+          tagAnimation="slide-up"
+          background={{ variant: "plain" }}
+          mediaItems={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-receiving-box_23-2149103401.jpg?_wi=6",
+              imageAlt: "Before after home renovation transformation",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-man-choosing-color_23-2148903521.jpg?_wi=5",
+              imageAlt: "Kitchen renovation before after transformation",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/young-couple-moving-new-home_23-2149242082.jpg?_wi=5",
+              imageAlt: "Room renovation before after completion",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721573.jpg?_wi=5",
+              imageAlt: "Professional plumbing work",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-painting-wall-home_23-2149098981.jpg?_wi=4",
+              imageAlt: "Professional painting service",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/woman-electrician-checks-switchboard-tablet-night-shift-smart-service_169016-70936.jpg?_wi=5",
+              imageAlt: "Professional electrician electrical work",
+            },
+          ]}
+          buttons={[
+            {
+              text: "View Services",
+              href: "/services",
+            },
+            {
+              text: "Get a Quote",
+              href: "tel:804-938-0669",
+            },
+          ]}
+          buttonAnimation="slide-up"
+          ariaLabel="Portfolio section for Earl Boys Services"
+        />
+      </div>
+
+      {/* Featured Projects Section */}
+      <div id="projects" data-section="projects">
+        <FeatureCardTwentyFive
+          title="Featured Projects"
+          description="A selection of our most successful home improvement and repair projects completed with professional excellence and customer satisfaction."
+          tag="Project Showcase"
+          tagIcon={Wrench}
+          features={[
+            {
+              title: "Plumbing Installation",
+              description: "Complete bathroom and kitchen plumbing system installation with modern fixtures and premium finishes.",
+              icon: Droplet,
+              mediaItems: [
+                {
+                  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",
+                },
+              ],
+            },
+            {
+              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}
+        />
+      </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>
     </ThemeProvider>
   );
-};
-
-export default Portfolio;
+}
\ No newline at end of file