bender/d69e649d-4eab-4e43-b146-64dffcc4854e
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/portfolio/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-19 16:01:47 +00:00
parent f1c2dd4e35
commit 2a5ab21611
1 changed files with 165 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
src/app/portfolio/page.tsx
View File

@@ -1,22 +1,24 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Instagram, Linkedin, Twitter, Mail } from "lucide-react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Linkedin, Twitter, Mail, Award, TrendingUp, Users } from "lucide-react";
const navItems = [
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "Portfolio", id: "portfolio" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" },
];
export default function PortfolioPage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "Portfolio", id: "portfolio" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" }
];
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
@@ -39,167 +41,203 @@ export default function PortfolioPage() {
/>
</div>
<div id="portfolio" data-section="portfolio" className="portfolio-wrapper">
<div id="portfolio-hero" data-section="portfolio-hero">
<HeroBillboardTestimonial
title="Our Portfolio: Proven Results for Toronto Businesses"
description="Real websites. Real growth. See how we've transformed local businesses with high-converting design and strategic development."
tag="Our Best Work"
tagIcon={Award}
tagAnimation="slide-up"
buttons={[
{
text: "Start Your Project", href: "/"},
{
text: "Schedule a Call", href: "/"},
]}
buttonAnimation="blur-reveal"
testimonials={[
{
name: "Sarah Chen", handle: "@sarrah_bakes", testimonial: "Got my bakery website up in 5 days. Sales increased 40% in the first month. Couldn't be happier!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-smiling-femal-1773935711800-8c62d304.png?_wi=1", imageAlt: "Sarah Chen bakery owner"},
{
name: "Marcus Williams", handle: "@marcs_contracting", testimonial: "Finally have a professional site. Customers find me easily now. Best investment I made this year.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-confident-mal-1773935711567-a0bd5f8e.png?_wi=1", imageAlt: "Marcus Williams contractor"},
{
name: "Priya Patel", handle: "@priya_fitness", testimonial: "Affordable and fast. Nick understood exactly what my gym needed. Highly recommend!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-female-fitnes-1773935711339-852b68f5.png?_wi=1", imageAlt: "Priya Patel fitness manager"},
]}
testimonialRotationInterval={5000}
background={{
variant: "noise"}}
useInvertedBackground={false}
/>
</div>
<div id="portfolio-showcase" data-section="portfolio-showcase">
<FeatureCardTwentyThree
title="Real Websites. Real Results."
description="See how we've helped local businesses transform their online presence and grow faster."
title="Featured Case Studies"
description="Detailed breakdowns of how we solved real challenges and delivered measurable growth for our clients."
features={[
{
id: "portfolio-1",
title: "Local Bakery - 40% Sales Increase",
tags: ["E-commerce", "Instagram Integration", "Fast Turnaround"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-modern-bakery-web-1773935714815-c71f4d59.png?_wi=2",
imageAlt: "Screenshot mockup of a modern bakery website with beautiful pastry photography"
},
id: "case-study-1", title: "Local Bakery - 40% Sales Increase", tags: ["E-commerce", "Instagram Integration", "+$15K Monthly Revenue"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-modern-bakery-web-1773935714815-c71f4d59.png?_wi=1", imageAlt: "Bakery website case study"},
{
id: "portfolio-2",
title: "Fitness Studio - Member Growth",
tags: ["Booking System", "Class Schedule", "Mobile App Link"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-modern-fitness-st-1773935714366-af6321ed.png?_wi=2",
imageAlt: "Screenshot mockup of a modern fitness studio website with class booking"
},
id: "case-study-2", title: "Fitness Studio - 65% Member Growth", tags: ["Booking System", "Class Schedule", "Mobile App"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-modern-fitness-st-1773935714366-af6321ed.png?_wi=1", imageAlt: "Fitness studio case study"},
{
id: "portfolio-3",
title: "Contractor - 3x More Inquiries",
tags: ["Portfolio Showcase", "Lead Form", "Service Map"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-contractor-constr-1773935714113-1d2d71f3.png?_wi=2",
imageAlt: "Screenshot mockup of a contractor website with portfolio and project gallery"
},
id: "case-study-3", title: "Contractor - 3x More Inquiries", tags: ["Portfolio Showcase", "Lead Form", "+25 Qualified Leads/Month"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-contractor-constr-1773935714113-1d2d71f3.png?_wi=1", imageAlt: "Contractor case study"},
{
id: "portfolio-4",
title: "Restaurant - Online Ordering",
tags: ["Menu Showcase", "Reservation System", "Delivery Integration"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-restaurant-websit-1773935714910-4f841e2b.png?_wi=2",
imageAlt: "Screenshot mockup of a restaurant website with menu and online ordering"
},
id: "case-study-4", title: "Restaurant - Online Ordering", tags: ["Menu Showcase", "Reservation System", "+$8K Monthly Orders"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-restaurant-websit-1773935714910-4f841e2b.png?_wi=1", imageAlt: "Restaurant case study"},
{
id: "portfolio-5",
title: "Consulting Firm - Brand Authority",
tags: ["Blog Integration", "Case Studies", "Team Showcase"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-consulting-firm-w-1773935713400-635cc467.png?_wi=2",
imageAlt: "Screenshot mockup of a consulting firm website with case studies"
},
id: "case-study-5", title: "Consulting Firm - Authority Builder", tags: ["Blog Integration", "Case Studies", "50% More Proposals"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-consulting-firm-w-1773935713400-635cc467.png?_wi=1", imageAlt: "Consulting firm case study"},
{
id: "portfolio-6",
title: "Salon - Appointment Bookings",
tags: ["Booking Calendar", "Gallery", "Special Offers"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-hair-salon-websit-1773935713947-be76e62c.png?_wi=2",
imageAlt: "Screenshot mockup of a hair salon website with booking calendar"
}
id: "case-study-6", title: "Salon - Booking Automation", tags: ["Booking Calendar", "Gallery", "80% Automated Bookings"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-hair-salon-websit-1773935713947-be76e62c.png?_wi=1", imageAlt: "Salon case study"},
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
tag="Portfolio"
tagIcon={undefined}
tag="Case Studies"
tagAnimation="slide-up"
buttons={[
{
text: "Get Your Free Quote",
href: "/contact"
}
text: "Explore All Projects", href: "#portfolio-grid"},
]}
buttonAnimation="slide-up"
buttonAnimation="blur-reveal"
carouselMode="buttons"
/>
</div>
<div id="testimonials" data-section="testimonials" className="testimonials-wrapper">
<TestimonialCardOne
title="What Our Clients Say"
description="Real feedback from real business owners who trusted us with their web presence."
testimonials={[
<div id="portfolio-grid" data-section="portfolio-grid">
<ProductCardTwo
title="All Portfolio Projects"
description="Browse our complete collection of successful websites across various industries. Each project is designed to convert and perform."
tag="Project Gallery"
tagAnimation="slide-up"
products={[
{
id: "testimonial-1",
name: "Sarah Chen",
role: "Owner",
company: "Sweet Dreams Bakery",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-smiling-femal-1773935711800-8c62d304.png?_wi=3",
imageAlt: "Professional headshot of a smiling female bakery owner"
},
id: "bakery", brand: "Sweet Dreams Bakery", name: "E-Commerce Bakery Site", price: "View Project", rating: 5,
reviewCount: "40% Sales Increase", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-modern-bakery-web-1773935714815-c71f4d59.png?_wi=1", imageAlt: "Bakery portfolio project"},
{
id: "testimonial-2",
name: "Marcus Williams",
role: "Founder",
company: "Thompson Contracting",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-confident-mal-1773935711567-a0bd5f8e.png?_wi=3",
imageAlt: "Professional headshot of a confident male contractor"
},
id: "fitness", brand: "Prestige Fitness", name: "Fitness Studio Site", price: "View Project", rating: 5,
reviewCount: "65% Member Growth", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-modern-fitness-st-1773935714366-af6321ed.png?_wi=1", imageAlt: "Fitness portfolio project"},
{
id: "testimonial-3",
name: "Priya Patel",
role: "Manager",
company: "Prestige Fitness Studio",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-female-fitnes-1773935711339-852b68f5.png?_wi=3",
imageAlt: "Professional headshot of a female fitness instructor"
},
id: "contractor", brand: "Thompson Contracting", name: "Contractor Portfolio", price: "View Project", rating: 5,
reviewCount: "3x More Inquiries", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-contractor-constr-1773935714113-1d2d71f3.png?_wi=1", imageAlt: "Contractor portfolio project"},
{
id: "testimonial-4",
name: "David Thompson",
role: "Senior Partner",
company: "Thompson & Associates Legal",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-distinguished-1773935713362-894a53c8.png?_wi=3",
imageAlt: "Professional headshot of a distinguished male lawyer"
},
id: "restaurant", brand: "Raya Restaurant Group", name: "Restaurant Site", price: "View Project", rating: 5,
reviewCount: "Online Ordering Enabled", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-restaurant-websit-1773935714910-4f841e2b.png?_wi=1", imageAlt: "Restaurant portfolio project"},
{
id: "testimonial-5",
name: "Jessica Rodriguez",
role: "CEO",
company: "Raya Restaurant Group",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-female-restau-1773935712170-60e5d814.png?_wi=2",
imageAlt: "Professional headshot of a female restaurant owner"
},
id: "consulting", brand: "Business Consulting Inc", name: "Consulting Site", price: "View Project", rating: 5,
reviewCount: "50% More Proposals", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-consulting-firm-w-1773935713400-635cc467.png?_wi=1", imageAlt: "Consulting portfolio project"},
{
id: "testimonial-6",
name: "Ahmed Hassan",
role: "Owner",
company: "Elite Hair Salon",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-male-hair-sal-1773935711950-38f36bc8.png?_wi=2",
imageAlt: "Professional headshot of a male hair salon owner"
}
id: "salon", brand: "Elite Hair Salon", name: "Salon Booking Site", price: "View Project", rating: 5,
reviewCount: "80% Automated Bookings", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-hair-salon-websit-1773935713947-be76e62c.png?_wi=1", imageAlt: "Salon portfolio project"},
]}
gridVariant="three-columns-all-equal-width"
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
tag="Client Success Stories"
tagIcon={undefined}
carouselMode="buttons"
/>
</div>
<div id="client-results" data-section="client-results">
<FeatureCardTwentyThree
title="Measurable Client Results"
description="We don't just build websites—we build growth machines. Here's what our clients achieved."
features={[
{
id: "result-1", title: "Average Sales Increase", tags: ["42%", "First 3 Months"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-upward-revenue-growth-cha-1773935714815-c71f4d59.png?_wi=1", imageAlt: "Revenue growth illustration"},
{
id: "result-2", title: "Lead Generation Increase", tags: ["3x Average", "Qualified Leads"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-lead-generation-funnel-b-1773935712636-0fc20480.png?_wi=1", imageAlt: "Lead generation illustration"},
{
id: "result-3", title: "Customer Engagement", tags: ["5x More Inquiries", "Better Qualified"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-customer-engagement-metr-1773935711780-4fe2661c.png?_wi=1", imageAlt: "Customer engagement illustration"},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
tag="Impact Metrics"
tagAnimation="slide-up"
carouselMode="buttons"
/>
</div>
<div id="footer" data-section="footer" className="footer-wrapper">
<div id="client-testimonials" data-section="client-testimonials">
<TestimonialCardOne
title="What Our Portfolio Clients Say"
description="Hear directly from business owners whose websites transformed their growth trajectory."
testimonials={[
{
id: "testimonial-1", name: "Sarah Chen", role: "Owner", company: "Sweet Dreams Bakery", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-smiling-femal-1773935711800-8c62d304.png?_wi=2", imageAlt: "Sarah Chen"},
{
id: "testimonial-2", name: "Marcus Williams", role: "Founder", company: "Thompson Contracting", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-confident-mal-1773935711567-a0bd5f8e.png?_wi=2", imageAlt: "Marcus Williams"},
{
id: "testimonial-3", name: "Priya Patel", role: "Manager", company: "Prestige Fitness Studio", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-female-fitnes-1773935711339-852b68f5.png?_wi=2", imageAlt: "Priya Patel"},
{
id: "testimonial-4", name: "David Thompson", role: "Senior Partner", company: "Thompson & Associates Legal", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-distinguished-1773935713362-894a53c8.png?_wi=2", imageAlt: "David Thompson"},
{
id: "testimonial-5", name: "Jessica Rodriguez", role: "CEO", company: "Raya Restaurant Group", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-female-restau-1773935712170-60e5d814.png?_wi=1", imageAlt: "Jessica Rodriguez"},
{
id: "testimonial-6", name: "Ahmed Hassan", role: "Owner", company: "Elite Hair Salon", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-male-hair-sal-1773935711950-38f36bc8.png?_wi=1", imageAlt: "Ahmed Hassan"},
]}
gridVariant="three-columns-all-equal-width"
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
tag="Success Stories"
tagAnimation="slide-up"
carouselMode="buttons"
/>
</div>
<div id="conversion-cta" data-section="conversion-cta">
<ContactSplit
tag="Ready to Grow Your Business?"
title="Start Your Success Story Today"
description="See how a professionally designed website can transform your business. Book a free consultation and discover what's possible for your company."
tagAnimation="slide-up"
background={{
variant: "animated-grid"}}
useInvertedBackground={false}
mediaPosition="right"
mediaAnimation="slide-up"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-a-business-growth-succes-1773935712218-6a6ba0cd.png?_wi=1"
inputPlaceholder="Enter your email"
buttonText="Get Started - Free Consultation"
termsText="We respect your privacy. No spam, ever. We'll reach out within 24 hours with personalized recommendations for your business."
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="NickToPixels"
copyrightText="© 2025 NickToPixels. Web Design for Toronto Businesses. All rights reserved."
socialLinks={[
{
icon: Instagram,
href: "https://instagram.com/nicktopixels",
ariaLabel: "Follow us on Instagram"
},
href: "https://instagram.com/nicktopixels", ariaLabel: "Follow us on Instagram"},
{
icon: Linkedin,
href: "https://linkedin.com/company/nicktopixels",
ariaLabel: "Connect on LinkedIn"
},
href: "https://linkedin.com/company/nicktopixels", ariaLabel: "Connect on LinkedIn"},
{
icon: Twitter,
href: "https://twitter.com/nicktopixels",
ariaLabel: "Follow us on Twitter"
},
href: "https://twitter.com/nicktopixels", ariaLabel: "Follow us on Twitter"},
{
icon: Mail,
href: "mailto:hello@nicktopixels.ca",
ariaLabel: "Email us"
}
href: "mailto:hello@nicktopixels.ca", ariaLabel: "Email us"},
]}
/>
</div>