Compare commits
19 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| cd8c25877b | |||
| 2f711ef393 | |||
| 7db3a0a50c | |||
| 62dadba8a9 | |||
| b3c43198a2 | |||
| 4ddc3689a0 | |||
| 3c5d429c27 | |||
| adfee37b14 | |||
| 8eb2d28249 | |||
| cbd9967f63 | |||
| e0f472576c | |||
| 607afc3856 | |||
| e8d00cd7b2 | |||
| 1ab3b49e2b | |||
| 2a5ab21611 | |||
| f1c2dd4e35 | |||
| 00ce2b6098 | |||
| a78dfd2147 | |||
| 6c804918f3 |
@@ -1,22 +1,22 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import Link from "next/link";
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||||
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
|
||||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||||
import { Instagram, Linkedin, Twitter, Mail } from "lucide-react";
|
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() {
|
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 (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="bounce-effect"
|
defaultButtonVariant="bounce-effect"
|
||||||
@@ -39,94 +39,93 @@ export default function AboutPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="about-story" data-section="about-story">
|
<div id="company-story" data-section="company-story">
|
||||||
<FeatureCardTwentyThree
|
<TestimonialAboutCard
|
||||||
title="Building Websites That Actually Convert"
|
tag="Our Story"
|
||||||
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."
|
tagIcon={Lightbulb}
|
||||||
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}
|
|
||||||
tagAnimation="slide-up"
|
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>
|
||||||
|
|
||||||
<div id="trusted-by" data-section="trusted-by" className="social-proof-wrapper">
|
<div id="team" data-section="team">
|
||||||
<SocialProofOne
|
<TeamCardEleven
|
||||||
names={[
|
title="Meet the Team Behind Your Website"
|
||||||
"Toronto Chamber of Commerce",
|
description="A dedicated group of designers, developers, and strategists committed to your success."
|
||||||
"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"
|
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
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>
|
||||||
|
|
||||||
<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
|
<FooterCard
|
||||||
logoText="NickToPixels"
|
logoText="NickToPixels"
|
||||||
copyrightText="© 2025 NickToPixels. Web Design for Toronto Businesses. All rights reserved."
|
copyrightText="© 2025 NickToPixels. Web Design for Toronto Businesses. All rights reserved."
|
||||||
socialLinks={[
|
socialLinks={[
|
||||||
{
|
{
|
||||||
icon: Instagram,
|
icon: Instagram,
|
||||||
href: "https://instagram.com/nicktopixels",
|
href: "https://instagram.com/nicktopixels", ariaLabel: "Follow us on Instagram"},
|
||||||
ariaLabel: "Follow us on Instagram"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Linkedin,
|
icon: Linkedin,
|
||||||
href: "https://linkedin.com/company/nicktopixels",
|
href: "https://linkedin.com/company/nicktopixels", ariaLabel: "Connect on LinkedIn"},
|
||||||
ariaLabel: "Connect on LinkedIn"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Twitter,
|
icon: Twitter,
|
||||||
href: "https://twitter.com/nicktopixels",
|
href: "https://twitter.com/nicktopixels", ariaLabel: "Follow us on Twitter"},
|
||||||
ariaLabel: "Follow us on Twitter"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Mail,
|
icon: Mail,
|
||||||
href: "mailto:hello@nicktopixels.ca",
|
href: "mailto:hello@nicktopixels.ca", ariaLabel: "Email us"},
|
||||||
ariaLabel: "Email us"
|
|
||||||
}
|
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,24 +1,29 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import Link from "next/link";
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||||
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
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() {
|
export default function ContactPage() {
|
||||||
const navItems = [
|
const [formData, setFormData] = useState<Record<string, string>>({
|
||||||
{ name: "Home", id: "home" },
|
name: "", email: "", phone: "", businessType: "", message: ""});
|
||||||
{ name: "Services", id: "services" },
|
|
||||||
{ name: "Portfolio", id: "portfolio" },
|
|
||||||
{ name: "About", id: "about" },
|
|
||||||
{ name: "Contact", id: "contact" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const handleContactSubmit = (email: string) => {
|
const handleSubmit = (data: Record<string, string>) => {
|
||||||
console.log("Email submitted:", email);
|
console.log("Form submitted:", data);
|
||||||
|
setFormData(data);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -36,113 +41,96 @@ export default function ContactPage() {
|
|||||||
>
|
>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleFullscreen
|
<NavbarStyleFullscreen
|
||||||
brandName="NickToPixels"
|
|
||||||
navItems={navItems}
|
navItems={navItems}
|
||||||
|
brandName="NickToPixels"
|
||||||
bottomLeftText="Greater Toronto Area"
|
bottomLeftText="Greater Toronto Area"
|
||||||
bottomRightText="hello@nicktopixels.ca"
|
bottomRightText="hello@nicktopixels.ca"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="contact" data-section="contact" className="contact-wrapper">
|
<div id="hero" data-section="hero">
|
||||||
<ContactSplit
|
<HeroLogoBillboard
|
||||||
tag="Ready to Grow?"
|
logoText="Let's Build Something Amazing"
|
||||||
title="Get Your Free Website Quote Today"
|
description="Ready to launch your website? We're just one conversation away. No pressure, no obligation—just honest talk about your business goals."
|
||||||
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."
|
buttons={[
|
||||||
tagIcon={Rocket}
|
{
|
||||||
tagAnimation="slide-up"
|
text: "Fill Out the Form Below", href: "#contact-form"},
|
||||||
|
{
|
||||||
|
text: "Call Us: (416) 555-0123", href: "tel:+14165550123"},
|
||||||
|
]}
|
||||||
|
buttonAnimation="blur-reveal"
|
||||||
background={{
|
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}
|
useInvertedBackground={false}
|
||||||
mediaPosition="right"
|
mediaPosition="right"
|
||||||
mediaAnimation="slide-up"
|
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"
|
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="Illustration of a business growth/success concept. Show a entrepreneur or team member looking excite"
|
imageAlt="Customer support illustration"
|
||||||
inputPlaceholder="Enter your email"
|
buttonText="Get Your Free Quote"
|
||||||
buttonText="Get My Free Quote"
|
onSubmit={handleSubmit}
|
||||||
termsText="We respect your privacy. No spam, ever. We'll only reach out about your website project."
|
|
||||||
onSubmit={handleContactSubmit}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="faq" data-section="faq" className="faq-wrapper">
|
<div id="social-proof" data-section="social-proof">
|
||||||
<FaqSplitMedia
|
<SocialProofOne
|
||||||
title="Common Questions About Our Web Design Service"
|
names={[
|
||||||
description="Everything you need to know about working with NickToPixels. Fast answers, no fluff."
|
"Fast Response", "No Hidden Fees", "30-Day Support", "Mobile Optimized", "SEO Ready", "Lifetime Updates"]}
|
||||||
tag="FAQ"
|
title="What Happens Next?"
|
||||||
tagIcon={HelpCircle}
|
description="After you submit your details, here's exactly what you can expect from working with NickToPixels."
|
||||||
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"
|
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
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}
|
showCard={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer" className="footer-wrapper">
|
<div id="footer" data-section="footer">
|
||||||
<FooterCard
|
<FooterCard
|
||||||
logoText="NickToPixels"
|
logoText="NickToPixels"
|
||||||
copyrightText="© 2025 NickToPixels. Web Design for Toronto Businesses. All rights reserved."
|
copyrightText="© 2025 NickToPixels. Web Design for Toronto Businesses. All rights reserved."
|
||||||
socialLinks={[
|
socialLinks={[
|
||||||
{
|
{
|
||||||
icon: Instagram,
|
icon: Instagram,
|
||||||
href: "https://instagram.com/nicktopixels",
|
href: "https://instagram.com/nicktopixels", ariaLabel: "Follow us on Instagram"},
|
||||||
ariaLabel: "Follow us on Instagram",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Linkedin,
|
icon: Linkedin,
|
||||||
href: "https://linkedin.com/company/nicktopixels",
|
href: "https://linkedin.com/company/nicktopixels", ariaLabel: "Connect on LinkedIn"},
|
||||||
ariaLabel: "Connect on LinkedIn",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Twitter,
|
icon: Twitter,
|
||||||
href: "https://twitter.com/nicktopixels",
|
href: "https://twitter.com/nicktopixels", ariaLabel: "Follow us on Twitter"},
|
||||||
ariaLabel: "Follow us on Twitter",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Mail,
|
icon: Mail,
|
||||||
href: "mailto:hello@nicktopixels.ca",
|
href: "mailto:hello@nicktopixels.ca", ariaLabel: "Email us"},
|
||||||
ariaLabel: "Email us",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
255
src/app/page.tsx
255
src/app/page.tsx
@@ -13,11 +13,11 @@ import Link from "next/link";
|
|||||||
import { Instagram, Linkedin, Twitter, Mail } from "lucide-react";
|
import { Instagram, Linkedin, Twitter, Mail } from "lucide-react";
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ name: "Home", id: "home" },
|
{ name: "Home", id: "/" },
|
||||||
{ name: "Services", id: "services" },
|
{ name: "Services", id: "#services-overview" },
|
||||||
{ name: "Portfolio", id: "portfolio" },
|
{ name: "Portfolio", id: "#portfolio" },
|
||||||
{ name: "About", id: "about" },
|
{ name: "About", id: "/about" },
|
||||||
{ name: "Contact", id: "contact" },
|
{ name: "Contact", id: "/contact" },
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
@@ -28,7 +28,7 @@ export default function HomePage() {
|
|||||||
borderRadius="rounded"
|
borderRadius="rounded"
|
||||||
contentWidth="small"
|
contentWidth="small"
|
||||||
sizing="largeSmallSizeMediumTitles"
|
sizing="largeSmallSizeMediumTitles"
|
||||||
background="noise"
|
background="circleGradient"
|
||||||
cardStyle="glass-depth"
|
cardStyle="glass-depth"
|
||||||
primaryButtonStyle="gradient"
|
primaryButtonStyle="gradient"
|
||||||
secondaryButtonStyle="solid"
|
secondaryButtonStyle="solid"
|
||||||
@@ -52,53 +52,28 @@ export default function HomePage() {
|
|||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
buttons={[
|
buttons={[
|
||||||
{
|
{
|
||||||
text: "Get Your Free Website Quote",
|
text: "Get Your Free Website Quote", href: "/contact"},
|
||||||
href: "/services",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
text: "See Our Work",
|
text: "See Our Work", href: "#portfolio"},
|
||||||
href: "/services",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
buttonAnimation="blur-reveal"
|
buttonAnimation="blur-reveal"
|
||||||
testimonials={[
|
testimonials={[
|
||||||
{
|
{
|
||||||
name: "Sarah Chen",
|
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,
|
||||||
handle: "@sarrah_bakes",
|
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"},
|
||||||
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",
|
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,
|
||||||
handle: "@marcs_contracting",
|
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"},
|
||||||
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",
|
name: "Priya Patel", handle: "@priya_fitness", testimonial: "Affordable and fast. Nick understood exactly what my gym needed. Highly recommend!", rating: 5,
|
||||||
handle: "@priya_fitness",
|
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"},
|
||||||
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",
|
name: "David Thompson", handle: "@thompson_law", testimonial: "Professional, responsive, and delivered on time. This is what web design should be.", rating: 5,
|
||||||
handle: "@thompson_law",
|
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"},
|
||||||
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}
|
testimonialRotationInterval={5000}
|
||||||
background={{
|
background={{
|
||||||
variant: "noise",
|
variant: "plain"}}
|
||||||
}}
|
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
/>
|
/>
|
||||||
</div>
|
</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."
|
description="We've streamlined web design so you get a stunning website without the headaches. Three simple steps. Done."
|
||||||
features={[
|
features={[
|
||||||
{
|
{
|
||||||
id: "step-1",
|
id: "step-1", title: "Tell Us Your Vision", tags: ["Discovery Call", "5-10 mins"],
|
||||||
title: "Tell Us Your Vision",
|
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"},
|
||||||
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",
|
id: "step-2", title: "We Design & Build", tags: ["3-7 Days", "Mobile-First"],
|
||||||
title: "We Design & Build",
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-web-design-and-developme-1773935712636-0fc20480.png?_wi=1", imageAlt: "Web design development illustration"},
|
||||||
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",
|
id: "step-3", title: "Launch & Support", tags: ["Live Website", "Ongoing Support"],
|
||||||
title: "Launch & 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"},
|
||||||
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"
|
animationType="slide-up"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
@@ -147,35 +110,14 @@ export default function HomePage() {
|
|||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
products={[
|
products={[
|
||||||
{
|
{
|
||||||
id: "starter",
|
id: "starter", brand: "NickToPixels", name: "Starter", price: "$899", rating: 5,
|
||||||
brand: "NickToPixels",
|
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"},
|
||||||
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",
|
id: "growth", brand: "NickToPixels", name: "Growth", price: "$1,499", rating: 5,
|
||||||
brand: "NickToPixels",
|
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"},
|
||||||
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",
|
id: "premium", brand: "NickToPixels", name: "Premium", price: "$2,499", rating: 5,
|
||||||
brand: "NickToPixels",
|
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"},
|
||||||
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"
|
gridVariant="three-columns-all-equal-width"
|
||||||
animationType="scale-rotate"
|
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."
|
description="See how we've helped local businesses transform their online presence and grow faster."
|
||||||
features={[
|
features={[
|
||||||
{
|
{
|
||||||
id: "portfolio-1",
|
id: "portfolio-1", title: "Local Bakery - 40% Sales Increase", tags: ["E-commerce", "Instagram Integration"],
|
||||||
title: "Local Bakery - 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 website portfolio"},
|
||||||
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",
|
id: "portfolio-2", title: "Fitness Studio - Member Growth", tags: ["Booking System", "Class Schedule"],
|
||||||
title: "Fitness Studio - 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 studio website portfolio"},
|
||||||
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",
|
id: "portfolio-3", title: "Contractor - 3x More Inquiries", tags: ["Portfolio Showcase", "Lead Form"],
|
||||||
title: "Contractor - 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 website portfolio"},
|
||||||
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",
|
id: "portfolio-4", title: "Restaurant - Online Ordering", tags: ["Menu Showcase", "Reservation System"],
|
||||||
title: "Restaurant - Online Ordering",
|
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"},
|
||||||
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",
|
id: "portfolio-5", title: "Consulting Firm - Brand Authority", tags: ["Blog Integration", "Case Studies"],
|
||||||
title: "Consulting Firm - Brand Authority",
|
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"},
|
||||||
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",
|
id: "portfolio-6", title: "Salon - Appointment Bookings", tags: ["Booking Calendar", "Gallery"],
|
||||||
title: "Salon - Appointment 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 website portfolio"},
|
||||||
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"
|
animationType="blur-reveal"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
@@ -245,15 +163,7 @@ export default function HomePage() {
|
|||||||
<div id="social-proof" data-section="social-proof">
|
<div id="social-proof" data-section="social-proof">
|
||||||
<SocialProofOne
|
<SocialProofOne
|
||||||
names={[
|
names={[
|
||||||
"Toronto Chamber of Commerce",
|
"Toronto Chamber of Commerce", "GTA Business Network", "ISED Canada", "Local Business Bureau", "Startup Toronto", "Web Professionals Canada", "Digital Toronto", "Small Biz GTA"]}
|
||||||
"GTA Business Network",
|
|
||||||
"ISED Canada",
|
|
||||||
"Local Business Bureau",
|
|
||||||
"Startup Toronto",
|
|
||||||
"Web Professionals Canada",
|
|
||||||
"Digital Toronto",
|
|
||||||
"Small Biz GTA",
|
|
||||||
]}
|
|
||||||
title="Trusted by Toronto Businesses & Organizations"
|
title="Trusted by Toronto Businesses & Organizations"
|
||||||
description="We've helped hundreds of local businesses, startups, and organizations establish their online presence and grow."
|
description="We've helped hundreds of local businesses, startups, and organizations establish their online presence and grow."
|
||||||
tag="Industry Recognized"
|
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."
|
description="Real feedback from real business owners who trusted us with their web presence."
|
||||||
testimonials={[
|
testimonials={[
|
||||||
{
|
{
|
||||||
id: "testimonial-1",
|
id: "testimonial-1", name: "Sarah Chen", role: "Owner", company: "Sweet Dreams Bakery", rating: 5,
|
||||||
name: "Sarah Chen",
|
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"},
|
||||||
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",
|
id: "testimonial-2", name: "Marcus Williams", role: "Founder", company: "Thompson Contracting", rating: 5,
|
||||||
name: "Marcus Williams",
|
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"},
|
||||||
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",
|
id: "testimonial-3", name: "Priya Patel", role: "Manager", company: "Prestige Fitness Studio", rating: 5,
|
||||||
name: "Priya Patel",
|
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"},
|
||||||
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",
|
id: "testimonial-4", name: "David Thompson", role: "Senior Partner", company: "Thompson & Associates Legal", rating: 5,
|
||||||
name: "David Thompson",
|
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"},
|
||||||
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",
|
id: "testimonial-5", name: "Jessica Rodriguez", role: "CEO", company: "Raya Restaurant Group", rating: 5,
|
||||||
name: "Jessica Rodriguez",
|
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"},
|
||||||
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",
|
id: "testimonial-6", name: "Ahmed Hassan", role: "Owner", company: "Elite Hair Salon", rating: 5,
|
||||||
name: "Ahmed Hassan",
|
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"},
|
||||||
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"
|
gridVariant="three-columns-all-equal-width"
|
||||||
animationType="scale-rotate"
|
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."
|
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"
|
tagAnimation="slide-up"
|
||||||
background={{
|
background={{
|
||||||
variant: "animated-grid",
|
variant: "plain"}}
|
||||||
}}
|
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
mediaPosition="right"
|
mediaPosition="right"
|
||||||
mediaAnimation="slide-up"
|
mediaAnimation="slide-up"
|
||||||
@@ -360,27 +233,19 @@ export default function HomePage() {
|
|||||||
socialLinks={[
|
socialLinks={[
|
||||||
{
|
{
|
||||||
icon: Instagram,
|
icon: Instagram,
|
||||||
href: "https://instagram.com/nicktopixels",
|
href: "https://instagram.com/nicktopixels", ariaLabel: "Follow us on Instagram"},
|
||||||
ariaLabel: "Follow us on Instagram",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Linkedin,
|
icon: Linkedin,
|
||||||
href: "https://linkedin.com/company/nicktopixels",
|
href: "https://linkedin.com/company/nicktopixels", ariaLabel: "Connect on LinkedIn"},
|
||||||
ariaLabel: "Connect on LinkedIn",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Twitter,
|
icon: Twitter,
|
||||||
href: "https://twitter.com/nicktopixels",
|
href: "https://twitter.com/nicktopixels", ariaLabel: "Follow us on Twitter"},
|
||||||
ariaLabel: "Follow us on Twitter",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Mail,
|
icon: Mail,
|
||||||
href: "mailto:hello@nicktopixels.ca",
|
href: "mailto:hello@nicktopixels.ca", ariaLabel: "Email us"},
|
||||||
ariaLabel: "Email us",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,22 +1,24 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import Link from "next/link";
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||||
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
||||||
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
||||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||||
import { Instagram, Linkedin, Twitter, Mail } from "lucide-react";
|
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() {
|
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 (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="bounce-effect"
|
defaultButtonVariant="bounce-effect"
|
||||||
@@ -24,7 +26,7 @@ export default function PortfolioPage() {
|
|||||||
borderRadius="rounded"
|
borderRadius="rounded"
|
||||||
contentWidth="small"
|
contentWidth="small"
|
||||||
sizing="largeSmallSizeMediumTitles"
|
sizing="largeSmallSizeMediumTitles"
|
||||||
background="noise"
|
background="circleGradient"
|
||||||
cardStyle="glass-depth"
|
cardStyle="glass-depth"
|
||||||
primaryButtonStyle="gradient"
|
primaryButtonStyle="gradient"
|
||||||
secondaryButtonStyle="solid"
|
secondaryButtonStyle="solid"
|
||||||
@@ -39,167 +41,203 @@ export default function PortfolioPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</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: "plain"}}
|
||||||
|
useInvertedBackground={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="portfolio-showcase" data-section="portfolio-showcase">
|
||||||
<FeatureCardTwentyThree
|
<FeatureCardTwentyThree
|
||||||
title="Real Websites. Real Results."
|
title="Featured Case Studies"
|
||||||
description="See how we've helped local businesses transform their online presence and grow faster."
|
description="Detailed breakdowns of how we solved real challenges and delivered measurable growth for our clients."
|
||||||
features={[
|
features={[
|
||||||
{
|
{
|
||||||
id: "portfolio-1",
|
id: "case-study-1", title: "Local Bakery - 40% Sales Increase", tags: ["E-commerce", "Instagram Integration", "+$15K Monthly Revenue"],
|
||||||
title: "Local Bakery - 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 website case study"},
|
||||||
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: "portfolio-2",
|
id: "case-study-2", title: "Fitness Studio - 65% Member Growth", tags: ["Booking System", "Class Schedule", "Mobile App"],
|
||||||
title: "Fitness Studio - 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 studio case study"},
|
||||||
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: "portfolio-3",
|
id: "case-study-3", title: "Contractor - 3x More Inquiries", tags: ["Portfolio Showcase", "Lead Form", "+25 Qualified Leads/Month"],
|
||||||
title: "Contractor - 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 case study"},
|
||||||
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: "portfolio-4",
|
id: "case-study-4", title: "Restaurant - Online Ordering", tags: ["Menu Showcase", "Reservation System", "+$8K Monthly Orders"],
|
||||||
title: "Restaurant - Online Ordering",
|
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"},
|
||||||
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: "portfolio-5",
|
id: "case-study-5", title: "Consulting Firm - Authority Builder", tags: ["Blog Integration", "Case Studies", "50% More Proposals"],
|
||||||
title: "Consulting Firm - Brand Authority",
|
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"},
|
||||||
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: "portfolio-6",
|
id: "case-study-6", title: "Salon - Booking Automation", tags: ["Booking Calendar", "Gallery", "80% Automated Bookings"],
|
||||||
title: "Salon - Appointment 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"},
|
||||||
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"
|
|
||||||
}
|
|
||||||
]}
|
]}
|
||||||
animationType="blur-reveal"
|
animationType="blur-reveal"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
tag="Portfolio"
|
tag="Case Studies"
|
||||||
tagIcon={undefined}
|
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
buttons={[
|
buttons={[
|
||||||
{
|
{
|
||||||
text: "Get Your Free Quote",
|
text: "Explore All Projects", href: "#portfolio-grid"},
|
||||||
href: "/contact"
|
|
||||||
}
|
|
||||||
]}
|
]}
|
||||||
buttonAnimation="slide-up"
|
buttonAnimation="blur-reveal"
|
||||||
carouselMode="buttons"
|
carouselMode="buttons"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials" className="testimonials-wrapper">
|
<div id="portfolio-grid" data-section="portfolio-grid">
|
||||||
<TestimonialCardOne
|
<ProductCardTwo
|
||||||
title="What Our Clients Say"
|
title="All Portfolio Projects"
|
||||||
description="Real feedback from real business owners who trusted us with their web presence."
|
description="Browse our complete collection of successful websites across various industries. Each project is designed to convert and perform."
|
||||||
testimonials={[
|
tag="Project Gallery"
|
||||||
|
tagAnimation="slide-up"
|
||||||
|
products={[
|
||||||
{
|
{
|
||||||
id: "testimonial-1",
|
id: "bakery", brand: "Sweet Dreams Bakery", name: "E-Commerce Bakery Site", price: "View Project", rating: 5,
|
||||||
name: "Sarah Chen",
|
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"},
|
||||||
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: "testimonial-2",
|
id: "fitness", brand: "Prestige Fitness", name: "Fitness Studio Site", price: "View Project", rating: 5,
|
||||||
name: "Marcus Williams",
|
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"},
|
||||||
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: "testimonial-3",
|
id: "contractor", brand: "Thompson Contracting", name: "Contractor Portfolio", price: "View Project", rating: 5,
|
||||||
name: "Priya Patel",
|
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"},
|
||||||
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: "testimonial-4",
|
id: "restaurant", brand: "Raya Restaurant Group", name: "Restaurant Site", price: "View Project", rating: 5,
|
||||||
name: "David Thompson",
|
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"},
|
||||||
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: "testimonial-5",
|
id: "consulting", brand: "Business Consulting Inc", name: "Consulting Site", price: "View Project", rating: 5,
|
||||||
name: "Jessica Rodriguez",
|
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"},
|
||||||
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: "testimonial-6",
|
id: "salon", brand: "Elite Hair Salon", name: "Salon Booking Site", price: "View Project", rating: 5,
|
||||||
name: "Ahmed Hassan",
|
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"},
|
||||||
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"
|
|
||||||
}
|
|
||||||
]}
|
]}
|
||||||
gridVariant="three-columns-all-equal-width"
|
gridVariant="three-columns-all-equal-width"
|
||||||
animationType="scale-rotate"
|
animationType="scale-rotate"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
tag="Client Success Stories"
|
carouselMode="buttons"
|
||||||
tagIcon={undefined}
|
/>
|
||||||
|
</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"
|
tagAnimation="slide-up"
|
||||||
carouselMode="buttons"
|
carouselMode="buttons"
|
||||||
/>
|
/>
|
||||||
</div>
|
</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: "plain"}}
|
||||||
|
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
|
<FooterCard
|
||||||
logoText="NickToPixels"
|
logoText="NickToPixels"
|
||||||
copyrightText="© 2025 NickToPixels. Web Design for Toronto Businesses. All rights reserved."
|
copyrightText="© 2025 NickToPixels. Web Design for Toronto Businesses. All rights reserved."
|
||||||
socialLinks={[
|
socialLinks={[
|
||||||
{
|
{
|
||||||
icon: Instagram,
|
icon: Instagram,
|
||||||
href: "https://instagram.com/nicktopixels",
|
href: "https://instagram.com/nicktopixels", ariaLabel: "Follow us on Instagram"},
|
||||||
ariaLabel: "Follow us on Instagram"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Linkedin,
|
icon: Linkedin,
|
||||||
href: "https://linkedin.com/company/nicktopixels",
|
href: "https://linkedin.com/company/nicktopixels", ariaLabel: "Connect on LinkedIn"},
|
||||||
ariaLabel: "Connect on LinkedIn"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Twitter,
|
icon: Twitter,
|
||||||
href: "https://twitter.com/nicktopixels",
|
href: "https://twitter.com/nicktopixels", ariaLabel: "Follow us on Twitter"},
|
||||||
ariaLabel: "Follow us on Twitter"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Mail,
|
icon: Mail,
|
||||||
href: "mailto:hello@nicktopixels.ca",
|
href: "mailto:hello@nicktopixels.ca", ariaLabel: "Email us"},
|
||||||
ariaLabel: "Email us"
|
|
||||||
}
|
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,19 +2,20 @@
|
|||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
||||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
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 ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||||
import Link from "next/link";
|
import { Instagram, Linkedin, Twitter, Mail, CheckCircle, Zap, Shield, Smartphone } from "lucide-react";
|
||||||
import { Instagram, Linkedin, Twitter, Mail } from "lucide-react";
|
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ name: "Home", id: "home" },
|
{ name: "Home", id: "/" },
|
||||||
{ name: "Services", id: "services" },
|
{ name: "Services", id: "/services" },
|
||||||
{ name: "Portfolio", id: "portfolio" },
|
{ name: "Portfolio", id: "/portfolio" },
|
||||||
{ name: "About", id: "about" },
|
{ name: "About", id: "/about" },
|
||||||
{ name: "Contact", id: "contact" },
|
{ name: "Contact", id: "/contact" },
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function ServicesPage() {
|
export default function ServicesPage() {
|
||||||
@@ -25,7 +26,7 @@ export default function ServicesPage() {
|
|||||||
borderRadius="rounded"
|
borderRadius="rounded"
|
||||||
contentWidth="small"
|
contentWidth="small"
|
||||||
sizing="largeSmallSizeMediumTitles"
|
sizing="largeSmallSizeMediumTitles"
|
||||||
background="noise"
|
background="circleGradient"
|
||||||
cardStyle="glass-depth"
|
cardStyle="glass-depth"
|
||||||
primaryButtonStyle="gradient"
|
primaryButtonStyle="gradient"
|
||||||
secondaryButtonStyle="solid"
|
secondaryButtonStyle="solid"
|
||||||
@@ -40,116 +41,177 @@ export default function ServicesPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="services-packages" data-section="services-packages">
|
<div id="hero" data-section="hero">
|
||||||
<ProductCardTwo
|
<HeroBillboardTestimonial
|
||||||
title="Website Solutions Built for GTA Businesses"
|
title="Professional Web Design Services 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."
|
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="Service Packages"
|
tag="Comprehensive Web Solutions"
|
||||||
|
tagIcon={undefined}
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
products={[
|
buttons={[
|
||||||
{
|
{
|
||||||
id: "starter",
|
text: "Start Your Free Consultation", href: "#pricing"},
|
||||||
brand: "NickToPixels",
|
{
|
||||||
name: "Starter",
|
text: "View Our Process", href: "#how-it-works"},
|
||||||
price: "$899",
|
]}
|
||||||
rating: 5,
|
buttonAnimation="blur-reveal"
|
||||||
reviewCount: "5-page website, mobile responsive, basic SEO",
|
testimonials={[
|
||||||
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",
|
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: "plain"}}
|
||||||
|
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",
|
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: {
|
||||||
brand: "NickToPixels",
|
text: "Choose Growth", href: "#final-cta"},
|
||||||
name: "Growth",
|
featuresTitle: "Everything in Starter, plus", features: [
|
||||||
price: "$1,499",
|
"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"],
|
||||||
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: "premium",
|
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: {
|
||||||
brand: "NickToPixels",
|
text: "Schedule Consultation", href: "#final-cta"},
|
||||||
name: "Premium",
|
featuresTitle: "Everything in Growth, plus", features: [
|
||||||
price: "$2,499",
|
"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"],
|
||||||
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",
|
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
|
/>
|
||||||
|
</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?_wi=2", 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"
|
gridVariant="three-columns-all-equal-width"
|
||||||
animationType="scale-rotate"
|
animationType="scale-rotate"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
|
tag="Success Stories"
|
||||||
|
tagAnimation="slide-up"
|
||||||
carouselMode="buttons"
|
carouselMode="buttons"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="services-faq" data-section="services-faq">
|
<div id="final-cta" data-section="final-cta">
|
||||||
<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">
|
|
||||||
<ContactSplit
|
<ContactSplit
|
||||||
tag="Get Started Today"
|
tag="Ready to Transform Your Online Presence?"
|
||||||
title="Choose Your Package & Book Your Free Consultation"
|
title="Get Your Free Website Quote Today"
|
||||||
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."
|
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"
|
tagAnimation="slide-up"
|
||||||
background={{
|
background={{
|
||||||
variant: "animated-grid",
|
variant: "plain"}}
|
||||||
}}
|
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
mediaPosition="right"
|
mediaPosition="right"
|
||||||
mediaAnimation="slide-up"
|
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"
|
inputPlaceholder="Enter your email"
|
||||||
buttonText="Book Your Consultation"
|
buttonText="Get My Free Quote"
|
||||||
termsText="We respect your privacy. No spam, ever. We'll only reach out about your website project and selected package."
|
termsText="We respect your privacy. No spam, ever. We'll reach out within 24 hours to schedule your free consultation."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -160,27 +222,19 @@ export default function ServicesPage() {
|
|||||||
socialLinks={[
|
socialLinks={[
|
||||||
{
|
{
|
||||||
icon: Instagram,
|
icon: Instagram,
|
||||||
href: "https://instagram.com/nicktopixels",
|
href: "https://instagram.com/nicktopixels", ariaLabel: "Follow us on Instagram"},
|
||||||
ariaLabel: "Follow us on Instagram",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Linkedin,
|
icon: Linkedin,
|
||||||
href: "https://linkedin.com/company/nicktopixels",
|
href: "https://linkedin.com/company/nicktopixels", ariaLabel: "Connect on LinkedIn"},
|
||||||
ariaLabel: "Connect on LinkedIn",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Twitter,
|
icon: Twitter,
|
||||||
href: "https://twitter.com/nicktopixels",
|
href: "https://twitter.com/nicktopixels", ariaLabel: "Follow us on Twitter"},
|
||||||
ariaLabel: "Follow us on Twitter",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Mail,
|
icon: Mail,
|
||||||
href: "mailto:hello@nicktopixels.ca",
|
href: "mailto:hello@nicktopixels.ca", ariaLabel: "Email us"},
|
||||||
ariaLabel: "Email us",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -13,12 +13,12 @@
|
|||||||
--background: #fcf6ec;
|
--background: #fcf6ec;
|
||||||
--card: #f3ede2;
|
--card: #f3ede2;
|
||||||
--foreground: #2e2521;
|
--foreground: #2e2521;
|
||||||
--primary-cta: #2e2521;
|
--primary-cta: #c68a62;
|
||||||
--primary-cta-text: #fcf6ec;
|
--primary-cta-text: #fcf6ec;
|
||||||
--secondary-cta: #ffffff;
|
--secondary-cta: #ffffff;
|
||||||
--secondary-cta-text: #2e2521;
|
--secondary-cta-text: #2e2521;
|
||||||
--accent: #b2a28b;
|
--accent: #b2a28b;
|
||||||
--background-accent: #b2a28b;
|
--background-accent: #d4a574;
|
||||||
|
|
||||||
/* text sizing - set by ThemeProvider */
|
/* text sizing - set by ThemeProvider */
|
||||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||||
|
|||||||
Reference in New Issue
Block a user