Switch to version 3: modified src/app/portfolio/page.tsx
This commit is contained in:
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user