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

Merge version_2 into main

Browse Source 
Merge version_2 into main
This commit was merged in pull request #2.
This commit is contained in:
bender
2026-03-19 16:01:52 +00:00
parent 6c804918f3 e8d00cd7b2
commit 607afc3856
6 changed files with 541 additions and 597 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/app/about/page.tsx
View File

@@ -1,22 +1,22 @@
"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 SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Instagram, Linkedin, Twitter, Mail } from "lucide-react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Linkedin, Twitter, Mail, Lightbulb, Users, Target } from "lucide-react";
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "#services-overview" },
{ name: "Portfolio", id: "#portfolio" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
export default function AboutPage() {
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,94 +39,93 @@ export default function AboutPage() {
/>
</div>
<div id="about-story" data-section="about-story">
<FeatureCardTwentyThree
title="Building Websites That Actually Convert"
description="NickToPixels was founded on a simple belief: web design shouldn't be complicated, expensive, or slow. Local Toronto businesses deserve professional, fast web solutions without the enterprise pricing."
features={[
{
id: "value-1",
title: "Speed Matters",
tags: ["3-7 Days", "No Long Waits"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-website-launch-celebrati-1773935711780-4fe2661c.png?_wi=2",
imageAlt: "Illustration of website launch celebration"
},
{
id: "value-2",
title: "Affordability First",
tags: ["$899 Starting", "No Hidden Costs"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/clean-modern-illustration-of-a-basic-web-1773935711623-c7416504.png?_wi=3",
imageAlt: "Clean, modern illustration of a website package"
},
{
id: "value-3",
title: "Local Expertise",
tags: ["GTA Based", "Understands Toronto"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-a-creative-discovery-cal-1773935714880-17bdc309.png?_wi=2",
imageAlt: "Illustration of a creative discovery call"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
tag="Our Mission"
tagIcon={undefined}
<div id="company-story" data-section="company-story">
<TestimonialAboutCard
tag="Our Story"
tagIcon={Lightbulb}
tagAnimation="slide-up"
carouselMode="buttons"
title="Built by a Web Designer, For Local Businesses"
description="NickToPixels started with a simple mission: prove that quality web design doesn't have to be expensive or complicated."
subdescription="After years working at agencies, I saw businesses struggling with slow timelines and inflated budgets. So I created a streamlined process that delivers stunning websites in 3-7 days at prices that won't break the bank. Every site we build is crafted with one goal in mind—converting visitors into customers."
icon={Target}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-a-web-designer-working-o-1773935714295-5e7c8c7f.png?_wi=1"
imageAlt="Web designer working on laptop"
mediaAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="trusted-by" data-section="trusted-by" className="social-proof-wrapper">
<SocialProofOne
names={[
"Toronto Chamber of Commerce",
"GTA Business Network",
"ISED Canada",
"Local Business Bureau",
"Startup Toronto",
"Web Professionals Canada",
"Digital Toronto",
"Small Biz GTA"
]}
title="Trusted by Toronto Businesses & Organizations"
description="We've helped hundreds of local businesses, startups, and organizations establish their online presence and grow."
tag="Industry Recognized"
tagIcon={undefined}
tagAnimation="slide-up"
<div id="team" data-section="team">
<TeamCardEleven
title="Meet the Team Behind Your Website"
description="A dedicated group of designers, developers, and strategists committed to your success."
textboxLayout="default"
useInvertedBackground={false}
showCard={true}
tag="Our Team"
tagIcon={Users}
tagAnimation="slide-up"
animationType="scale-rotate"
groups={[
{
id: "design-team", groupTitle: "Design & Development", members: [
{
id: "nick", title: "Nick", subtitle: "Founder & Lead Designer", detail: "Web Designer | Brand Strategist | 8+ years in digital design", 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: "Nick - Founder"},
{
id: "alex", title: "Alex", subtitle: "Full-Stack Developer", detail: "React Specialist | Performance Optimization | Toronto-based", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-distinguished-1773935713362-894a53c8.png?_wi=1", imageAlt: "Alex - Developer"},
{
id: "jordan", title: "Jordan", subtitle: "UX/UI Designer", detail: "User Experience Focus | Conversion Optimization", 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: "Jordan - UX Designer"},
],
},
{
id: "support-team", groupTitle: "Strategy & Support", members: [
{
id: "casey", title: "Casey", subtitle: "SEO Specialist", detail: "Search Optimization | Content Strategy | Local SEO Expert", 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: "Casey - SEO Specialist"},
{
id: "morgan", title: "Morgan", subtitle: "Client Success Lead", detail: "Project Management | Client Relations | Dedicated Support", 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: "Morgan - Client Success"},
],
},
]}
/>
</div>
<div id="footer" data-section="footer" className="footer-wrapper">
<div id="final-cta" data-section="final-cta">
<ContactSplit
tag="Let's Work Together"
title="Ready to Transform Your Online Presence?"
description="Whether you're just starting out or looking to revamp your website, we're here to help. Schedule a free consultation to discuss your vision."
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-team-collaboration-succes-1773935712893-7f4d8a9e.png?_wi=1"
inputPlaceholder="Enter your email"
buttonText="Start Your Project"
termsText="We respect your privacy. No spam, ever. We'll only reach out about your website project."
/>
</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>
</ThemeProvider>
);
}
}

160
src/app/contact/page.tsx
View File

@@ -1,24 +1,29 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Rocket, HelpCircle, Instagram, Linkedin, Twitter, Mail } from "lucide-react";
import { Instagram, Linkedin, Twitter, Mail, MessageSquare } from "lucide-react";
import { useState } from "react";
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "#services-overview" },
{ name: "Portfolio", id: "#portfolio" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
export default function ContactPage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "Portfolio", id: "portfolio" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" },
];
const [formData, setFormData] = useState<Record<string, string>>({
name: "", email: "", phone: "", businessType: "", message: ""});
const handleContactSubmit = (email: string) => {
console.log("Email submitted:", email);
const handleSubmit = (data: Record<string, string>) => {
console.log("Form submitted:", data);
setFormData(data);
};
return (
@@ -36,113 +41,96 @@ export default function ContactPage() {
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
brandName="NickToPixels"
navItems={navItems}
brandName="NickToPixels"
bottomLeftText="Greater Toronto Area"
bottomRightText="hello@nicktopixels.ca"
/>
</div>
<div id="contact" data-section="contact" className="contact-wrapper">
<ContactSplit
tag="Ready to Grow?"
title="Get Your Free Website Quote Today"
description="No pressure. No obligation. Just a quick conversation about what your business needs. Book a 15-minute call or submit your details and we'll respond within 24 hours."
tagIcon={Rocket}
tagAnimation="slide-up"
<div id="hero" data-section="hero">
<HeroLogoBillboard
logoText="Let's Build Something Amazing"
description="Ready to launch your website? We're just one conversation away. No pressure, no obligation—just honest talk about your business goals."
buttons={[
{
text: "Fill Out the Form Below", href: "#contact-form"},
{
text: "Call Us: (416) 555-0123", href: "tel:+14165550123"},
]}
buttonAnimation="blur-reveal"
background={{
variant: "animated-grid",
variant: "animated-grid"}}
mediaAnimation="slide-up"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-a-business-consultation-m-1773935712754-8f9c5d9c.png?_wi=1"
imageAlt="Business consultation meeting"
/>
</div>
<div id="contact-form" data-section="contact-form">
<ContactSplitForm
title="Tell Us About Your Project"
description="The more details you share, the better we can help. We'll review your information and get back to you within 24 hours with a customized quote and timeline."
inputs={[
{
name: "name", type: "text", placeholder: "Your Full Name", required: true,
},
{
name: "email", type: "email", placeholder: "your@email.com", required: true,
},
{
name: "phone", type: "tel", placeholder: "(416) 555-0000", required: true,
},
{
name: "businessType", type: "text", placeholder: "What type of business are you in?", required: true,
},
]}
textarea={{
name: "message", placeholder: "Tell us about your website vision. What's your biggest goal? Any specific features you need?", rows: 6,
required: true,
}}
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=3"
imageAlt="Illustration of a business growth/success concept. Show a entrepreneur or team member looking excite"
inputPlaceholder="Enter your email"
buttonText="Get My Free Quote"
termsText="We respect your privacy. No spam, ever. We'll only reach out about your website project."
onSubmit={handleContactSubmit}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-a-customer-support-team-h-1773935713117-9e2c7f3f.png?_wi=1"
imageAlt="Customer support illustration"
buttonText="Get Your Free Quote"
onSubmit={handleSubmit}
/>
</div>
<div id="faq" data-section="faq" className="faq-wrapper">
<FaqSplitMedia
title="Common Questions About Our Web Design Service"
description="Everything you need to know about working with NickToPixels. Fast answers, no fluff."
tag="FAQ"
tagIcon={HelpCircle}
tagAnimation="slide-up"
faqs={[
{
id: "faq-1",
title: "How long does it take to build a website?",
content: "3-7 days depending on your package. We prioritize speed without compromising quality. Rush projects available upon request.",
},
{
id: "faq-2",
title: "What's included in your pricing?",
content: "Mobile-responsive design, SEO optimization, basic content setup, 30 days of free support, and hosting assistance. Additional services and content available separately.",
},
{
id: "faq-3",
title: "Can you redesign my existing website?",
content: "Absolutely. Website redesigns get priority and often complete faster than new builds. We'll migrate your existing content and improve performance.",
},
{
id: "faq-4",
title: "Do you offer ongoing support and maintenance?",
content: "Yes. Monthly maintenance packages available starting at $99/month. Includes updates, security patches, and performance monitoring.",
},
{
id: "faq-5",
title: "Is my website SEO-friendly?",
content: "All our websites include basic SEO optimization. For advanced SEO services, we offer dedicated SEO consulting packages.",
},
{
id: "faq-6",
title: "Can you help with content and copywriting?",
content: "We offer professional copywriting and content creation services. Include it in your package or add it as an upgrade.",
},
]}
faqsAnimation="blur-reveal"
mediaAnimation="slide-up"
mediaPosition="right"
<div id="social-proof" data-section="social-proof">
<SocialProofOne
names={[
"Fast Response", "No Hidden Fees", "30-Day Support", "Mobile Optimized", "SEO Ready", "Lifetime Updates"]}
title="What Happens Next?"
description="After you submit your details, here's exactly what you can expect from working with NickToPixels."
textboxLayout="default"
useInvertedBackground={false}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-a-support-help-concept-s-1773935711700-b15c01ab.png?_wi=2"
imageAlt="Illustration of a support/help concept. Show a friendly support person or chatbot icon, with FAQ ele"
showCard={true}
/>
</div>
<div id="footer" data-section="footer" className="footer-wrapper">
<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>
</ThemeProvider>
);
}
}

253
src/app/page.tsx
View File

@@ -13,11 +13,11 @@ import Link from "next/link";
import { Instagram, Linkedin, Twitter, Mail } 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" },
{ name: "Home", id: "/" },
{ name: "Services", id: "#services-overview" },
{ name: "Portfolio", id: "#portfolio" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
export default function HomePage() {
@@ -52,53 +52,28 @@ export default function HomePage() {
tagAnimation="slide-up"
buttons={[
{
text: "Get Your Free Website Quote",
href: "/services",
},
text: "Get Your Free Website Quote", href: "/contact"},
{
text: "See Our Work",
href: "/services",
},
text: "See Our Work", href: "#portfolio"},
]}
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: "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: "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",
},
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"},
{
name: "David Thompson",
handle: "@thompson_law",
testimonial: "Professional, responsive, and delivered on time. This is what web design should be.",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-distinguished-1773935713362-894a53c8.png?_wi=1",
imageAlt: "David Thompson lawyer",
},
name: "David Thompson", handle: "@thompson_law", testimonial: "Professional, responsive, and delivered on time. This is what web design should be.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-distinguished-1773935713362-894a53c8.png?_wi=1", imageAlt: "David Thompson lawyer"},
]}
testimonialRotationInterval={5000}
background={{
variant: "noise",
}}
variant: "noise"}}
useInvertedBackground={false}
/>
</div>
@@ -109,26 +84,14 @@ export default function HomePage() {
description="We've streamlined web design so you get a stunning website without the headaches. Three simple steps. Done."
features={[
{
id: "step-1",
title: "Tell Us Your Vision",
tags: ["Discovery Call", "5-10 mins"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-a-creative-discovery-cal-1773935714880-17bdc309.png?_wi=1",
imageAlt: "Discovery call illustration",
},
id: "step-1", title: "Tell Us Your Vision", tags: ["Discovery Call", "5-10 mins"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-a-creative-discovery-cal-1773935714880-17bdc309.png?_wi=1", imageAlt: "Discovery call illustration"},
{
id: "step-2",
title: "We Design & Build",
tags: ["3-7 Days", "Mobile-First"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-web-design-and-developme-1773935712636-0fc20480.png",
imageAlt: "Web design development illustration",
},
id: "step-2", title: "We Design & Build", tags: ["3-7 Days", "Mobile-First"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-web-design-and-developme-1773935712636-0fc20480.png", imageAlt: "Web design development illustration"},
{
id: "step-3",
title: "Launch & Support",
tags: ["Live Website", "Ongoing Support"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-website-launch-celebrati-1773935711780-4fe2661c.png?_wi=1",
imageAlt: "Website launch celebration",
},
id: "step-3", title: "Launch & Support", tags: ["Live Website", "Ongoing Support"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-website-launch-celebrati-1773935711780-4fe2661c.png?_wi=1", imageAlt: "Website launch celebration"},
]}
animationType="slide-up"
textboxLayout="default"
@@ -147,35 +110,14 @@ export default function HomePage() {
tagAnimation="slide-up"
products={[
{
id: "starter",
brand: "NickToPixels",
name: "Starter",
price: "$899",
rating: 5,
reviewCount: "Perfect for small businesses",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/clean-modern-illustration-of-a-basic-web-1773935711623-c7416504.png?_wi=1",
imageAlt: "Starter package",
},
id: "starter", brand: "NickToPixels", name: "Starter", price: "$899", rating: 5,
reviewCount: "Perfect for small businesses", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/clean-modern-illustration-of-a-basic-web-1773935711623-c7416504.png?_wi=1", imageAlt: "Starter package"},
{
id: "growth",
brand: "NickToPixels",
name: "Growth",
price: "$1,499",
rating: 5,
reviewCount: "Most popular package",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/modern-illustration-of-a-growth-focused--1773935712416-8420f0ec.png?_wi=1",
imageAlt: "Growth package",
},
id: "growth", brand: "NickToPixels", name: "Growth", price: "$1,499", rating: 5,
reviewCount: "Most popular package", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/modern-illustration-of-a-growth-focused--1773935712416-8420f0ec.png?_wi=1", imageAlt: "Growth package"},
{
id: "premium",
brand: "NickToPixels",
name: "Premium",
price: "$2,499",
rating: 5,
reviewCount: "Full custom solution",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/premium-illustration-of-a-full-featured--1773935714549-f058d2a4.png?_wi=1",
imageAlt: "Premium package",
},
id: "premium", brand: "NickToPixels", name: "Premium", price: "$2,499", rating: 5,
reviewCount: "Full custom solution", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/premium-illustration-of-a-full-featured--1773935714549-f058d2a4.png?_wi=1", imageAlt: "Premium package"},
]}
gridVariant="three-columns-all-equal-width"
animationType="scale-rotate"
@@ -191,47 +133,23 @@ export default function HomePage() {
description="See how we've helped local businesses transform their online presence and grow faster."
features={[
{
id: "portfolio-1",
title: "Local Bakery - 40% Sales Increase",
tags: ["E-commerce", "Instagram Integration"],
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 portfolio",
},
id: "portfolio-1", title: "Local Bakery - 40% Sales Increase", tags: ["E-commerce", "Instagram Integration"],
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 portfolio"},
{
id: "portfolio-2",
title: "Fitness Studio - Member Growth",
tags: ["Booking System", "Class Schedule"],
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 website portfolio",
},
id: "portfolio-2", title: "Fitness Studio - Member Growth", tags: ["Booking System", "Class Schedule"],
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 website portfolio"},
{
id: "portfolio-3",
title: "Contractor - 3x More Inquiries",
tags: ["Portfolio Showcase", "Lead Form"],
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 website portfolio",
},
id: "portfolio-3", title: "Contractor - 3x More Inquiries", tags: ["Portfolio Showcase", "Lead Form"],
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 website portfolio"},
{
id: "portfolio-4",
title: "Restaurant - Online Ordering",
tags: ["Menu Showcase", "Reservation System"],
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 website portfolio",
},
id: "portfolio-4", title: "Restaurant - Online Ordering", tags: ["Menu Showcase", "Reservation System"],
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 website portfolio"},
{
id: "portfolio-5",
title: "Consulting Firm - Brand Authority",
tags: ["Blog Integration", "Case Studies"],
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 website portfolio",
},
id: "portfolio-5", title: "Consulting Firm - Brand Authority", tags: ["Blog Integration", "Case Studies"],
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 website portfolio"},
{
id: "portfolio-6",
title: "Salon - Appointment Bookings",
tags: ["Booking Calendar", "Gallery"],
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 website portfolio",
},
id: "portfolio-6", title: "Salon - Appointment Bookings", tags: ["Booking Calendar", "Gallery"],
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 website portfolio"},
]}
animationType="blur-reveal"
textboxLayout="default"
@@ -245,15 +163,7 @@ export default function HomePage() {
<div id="social-proof" data-section="social-proof">
<SocialProofOne
names={[
"Toronto Chamber of Commerce",
"GTA Business Network",
"ISED Canada",
"Local Business Bureau",
"Startup Toronto",
"Web Professionals Canada",
"Digital Toronto",
"Small Biz GTA",
]}
"Toronto Chamber of Commerce", "GTA Business Network", "ISED Canada", "Local Business Bureau", "Startup Toronto", "Web Professionals Canada", "Digital Toronto", "Small Biz GTA"]}
title="Trusted by Toronto Businesses & Organizations"
description="We've helped hundreds of local businesses, startups, and organizations establish their online presence and grow."
tag="Industry Recognized"
@@ -270,59 +180,23 @@ export default function HomePage() {
description="Real feedback from real business owners who trusted us with their web presence."
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-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-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-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-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-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",
},
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"
@@ -341,8 +215,7 @@ export default function HomePage() {
description="No pressure. No obligation. Just a quick conversation about what your business needs. Book a 15-minute call or submit your details and we'll respond within 24 hours."
tagAnimation="slide-up"
background={{
variant: "animated-grid",
}}
variant: "animated-grid"}}
useInvertedBackground={false}
mediaPosition="right"
mediaAnimation="slide-up"
@@ -360,27 +233,19 @@ export default function HomePage() {
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>
</ThemeProvider>
);
}
}

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>

272
src/app/services/page.tsx
View File

@@ -2,19 +2,20 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import Link from "next/link";
import { Instagram, Linkedin, Twitter, Mail } from "lucide-react";
import { Instagram, Linkedin, Twitter, Mail, CheckCircle, Zap, Shield, Smartphone } 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" },
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
export default function ServicesPage() {
@@ -40,116 +41,177 @@ export default function ServicesPage() {
/>
</div>
<div id="services-packages" data-section="services-packages">
<ProductCardTwo
title="Website Solutions Built for GTA Businesses"
description="Choose the package that fits your needs. All include responsive design, SEO optimization, and 30 days of free support. Compare features and find your perfect fit."
tag="Service Packages"
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
title="Professional Web Design Services for GTA Businesses"
description="Fast, affordable, high-converting websites. We combine strategic design with conversion optimization to deliver websites that turn visitors into customers. 3-7 day turnaround with ongoing support included."
tag="Comprehensive Web Solutions"
tagIcon={undefined}
tagAnimation="slide-up"
products={[
buttons={[
{
id: "starter",
brand: "NickToPixels",
name: "Starter",
price: "$899",
rating: 5,
reviewCount: "5-page website, mobile responsive, basic SEO",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/clean-modern-illustration-of-a-basic-web-1773935711623-c7416504.png?_wi=2",
imageAlt: "Starter package features",
text: "Start Your Free Consultation", href: "#pricing"},
{
text: "View Our Process", href: "#how-it-works"},
]}
buttonAnimation="blur-reveal"
testimonials={[
{
name: "Sarah Chen", handle: "@sarrah_bakes", testimonial: "Nick transformed our online presence. Website launched in 5 days. Sales up 40% in month one. Incredible value and service.", 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: "Professional, responsive, on-time. Best investment for my contracting business. Customers find me easily now.", 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, fast, and exactly what my gym needed. Nick listened and delivered. Five stars without hesitation.", 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"},
{
name: "David Thompson", handle: "@thompson_law", testimonial: "Professional design meets strategic marketing. Our law firm looks credible and attracts quality clients.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-distinguished-1773935713362-894a53c8.png?_wi=1", imageAlt: "David Thompson lawyer"},
]}
testimonialRotationInterval={5000}
background={{
variant: "noise"}}
useInvertedBackground={false}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
title="Service Packages Built for Every Stage of Growth"
description="Choose the solution that fits your business. All packages include responsive mobile design, SEO optimization, fast load times, 30 days of free support, and unlimited revisions."
tag="Service Tiers"
tagIcon={undefined}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="scale-rotate"
plans={[
{
id: "starter", tag: "For Getting Started", price: "$899", period: "one-time", description: "Perfect for local businesses and startups ready to establish their online presence.", button: {
text: "Get Started", href: "#final-cta"},
featuresTitle: "What's Included", features: [
"5-page responsive website", "Mobile-optimized design", "SEO basics (keywords, meta tags)", "Contact form integration", "Social media links", "SSL security certificate", "30 days free support", "Domain setup assistance"],
},
{
id: "growth",
brand: "NickToPixels",
name: "Growth",
price: "$1,499",
rating: 5,
reviewCount: "Advanced features, contact forms, analytics setup",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/modern-illustration-of-a-growth-focused--1773935712416-8420f0ec.png?_wi=2",
imageAlt: "Growth package features",
id: "growth", tag: "Most Popular", price: "$1,499", period: "one-time", description: "Ideal for growing businesses looking to convert more leads and showcase their services effectively.", button: {
text: "Choose Growth", href: "#final-cta"},
featuresTitle: "Everything in Starter, plus", features: [
"Up to 10 custom pages", "Advanced SEO optimization", "Blog setup and content strategy", "E-commerce basics (up to 20 products)", "Email newsletter integration", "Google Analytics setup", "Fast load time optimization", "90 days free support", "1 month free maintenance"],
},
{
id: "premium",
brand: "NickToPixels",
name: "Premium",
price: "$2,499",
rating: 5,
reviewCount: "Full custom build, e-commerce, API integrations",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/premium-illustration-of-a-full-featured--1773935714549-f058d2a4.png?_wi=2",
imageAlt: "Premium package features",
id: "premium", tag: "Full Custom Solution", price: "$2,499", period: "one-time", description: "Complete custom web solution with advanced features, integrations, and ongoing performance optimization.", button: {
text: "Schedule Consultation", href: "#final-cta"},
featuresTitle: "Everything in Growth, plus", features: [
"Unlimited custom pages", "Full e-commerce platform", "Advanced integrations (CRM, tools)", "Custom API development", "Payment gateway setup", "Priority support (30-day response)", "3 months free maintenance", "Performance audit & optimization", "Custom feature development"],
},
]}
/>
</div>
<div id="how-it-works" data-section="how-it-works">
<FeatureCardTwentyThree
title="Our Proven Process"
description="From initial consultation to launch and beyond. We keep things simple, transparent, and results-focused. Your business deserves a partner who listens."
features={[
{
id: "step-1", title: "Discovery & Strategy", tags: ["Day 1", "15-30 mins"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-a-creative-discovery-cal-1773935714880-17bdc309.png?_wi=1", imageAlt: "Discovery call illustration"},
{
id: "step-2", title: "Design & Development", tags: ["Days 2-5", "Mobile-First Approach"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-web-design-and-developme-1773935712636-0fc20480.png", imageAlt: "Web design development illustration"},
{
id: "step-3", title: "Review & Refine", tags: ["Day 6", "Your Feedback Matters"],
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: "Website review process"},
{
id: "step-4", title: "Launch & Training", tags: ["Day 7", "Live & Ready"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-website-launch-celebrati-1773935711780-4fe2661c.png?_wi=1", imageAlt: "Website launch celebration"},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
tag="Our Approach"
tagAnimation="slide-up"
carouselMode="buttons"
/>
</div>
<div id="service-features" data-section="service-features">
<FeatureCardTwentyThree
title="What Makes Our Service Different"
description="We're not just building websites. We're building conversion machines designed specifically for local GTA businesses that want to grow faster."
features={[
{
id: "feature-1", title: "Conversion-Focused Design", tags: ["Strategic Layout", "Higher ROI"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/modern-illustration-of-a-growth-focused--1773935712416-8420f0ec.png?_wi=1", imageAlt: "Conversion focused design"},
{
id: "feature-2", title: "SEO Built-In", tags: ["Better Rankings", "More Visibility"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/premium-illustration-of-a-full-featured--1773935714549-f058d2a4.png?_wi=1", imageAlt: "SEO optimization"},
{
id: "feature-3", title: "Lightning Fast Loading", tags: ["Mobile Optimized", "User Experience"],
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: "Fast loading speed"},
{
id: "feature-4", title: "Local Business Focus", tags: ["GTA Expertise", "Real Understanding"],
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: "Local business expertise"},
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
tag="Our Advantage"
tagAnimation="slide-up"
carouselMode="buttons"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
title="Why Business Owners Trust Us"
description="Real results from real GTA business owners. See how our service has transformed their online presence and revenue."
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="services-faq" data-section="services-faq">
<FaqSplitMedia
tag="Service Details"
title="Common Questions About Our Web Design Service"
description="Everything you need to know about our packages, process, and support options."
tagAnimation="slide-up"
faqs={[
{
id: "faq-1",
title: "How long does it take to build a website?",
content: "3-7 days depending on your package. Starter sites typically 5-7 days, Growth packages 4-5 days, Premium custom builds 5-7 days or longer depending on complexity. Rush projects available upon request with expedited fees.",
},
{
id: "faq-2",
title: "What's included in your pricing?",
content: "All packages include: mobile-responsive design, SEO optimization, basic content setup, 30 days of free support, hosting assistance, and email migration. Premium packages include custom design, e-commerce setup, and third-party integrations.",
},
{
id: "faq-3",
title: "Can you redesign my existing website?",
content: "Absolutely. Website redesigns are our specialty and often complete faster than new builds. We'll migrate your existing content, improve performance, modernize the design, and maintain your SEO. Same pricing structure applies.",
},
{
id: "faq-4",
title: "Do you offer ongoing support and maintenance?",
content: "Yes. Monthly maintenance packages available starting at $99/month. Includes updates, security patches, performance monitoring, and priority support. Most clients choose maintenance packages to keep their sites running smoothly.",
},
{
id: "faq-5",
title: "Is my website SEO-friendly?",
content: "All our websites include basic SEO optimization: proper header structure, meta tags, mobile optimization, fast loading, and sitemap setup. For advanced SEO services like keyword research and content strategy, we offer dedicated SEO consulting packages.",
},
{
id: "faq-6",
title: "Can you help with content and copywriting?",
content: "We offer professional copywriting and content creation services as add-ons. Include it in your package for an additional fee or add it post-launch. Our copywriters specialize in conversion-focused content for Toronto businesses.",
},
]}
faqsAnimation="blur-reveal"
mediaAnimation="slide-up"
mediaPosition="right"
textboxLayout="default"
useInvertedBackground={false}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-a-support-help-concept-s-1773935711700-b15c01ab.png?_wi=1"
showCard={true}
/>
</div>
<div id="services-cta" data-section="services-cta">
<div id="final-cta" data-section="final-cta">
<ContactSplit
tag="Get Started Today"
title="Choose Your Package & Book Your Free Consultation"
description="Ready to grow your business? Book a 15-minute call with our team to discuss your needs and find the perfect package. Or submit your details for a custom quote."
tag="Ready to Transform Your Online Presence?"
title="Get Your Free Website Quote Today"
description="Schedule your 15-minute consultation. We'll understand your business, discuss your goals, and show you exactly how we can help you convert more customers online. No pressure. No sales pitch. Just real talk about what your business needs."
tagAnimation="slide-up"
background={{
variant: "animated-grid",
}}
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=2"
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="Book Your Consultation"
termsText="We respect your privacy. No spam, ever. We'll only reach out about your website project and selected package."
buttonText="Get My Free Quote"
termsText="We respect your privacy. No spam, ever. We'll reach out within 24 hours to schedule your free consultation."
/>
</div>
@@ -160,27 +222,19 @@ export default function ServicesPage() {
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>
</ThemeProvider>
);
}
}

4
src/app/styles/variables.css
View File

@@ -13,12 +13,12 @@
--background: #fcf6ec;
--card: #f3ede2;
--foreground: #2e2521;
--primary-cta: #2e2521;
--primary-cta: #c68a62;
--primary-cta-text: #fcf6ec;
--secondary-cta: #ffffff;
--secondary-cta-text: #2e2521;
--accent: #b2a28b;
--background-accent: #b2a28b;
--background-accent: #d4a574;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);