252 lines
16 KiB
TypeScript
252 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import Link from "next/link";
|
|
import { Instagram, Linkedin, Twitter, Mail } from "lucide-react";
|
|
|
|
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 HomePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="noise"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={navItems}
|
|
brandName="NickToPixels"
|
|
bottomLeftText="Greater Toronto Area"
|
|
bottomRightText="hello@nicktopixels.ca"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
title="Your Business Deserves a Website That Converts"
|
|
description="Professional web design in 3-7 days. Affordable, fast, and built for local GTA businesses. Get a free quote and see what's possible."
|
|
tag="Toronto-Based Web Design"
|
|
tagIcon={undefined}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "Get Your Free Website Quote", href: "/contact"},
|
|
{
|
|
text: "See Our Work", href: "#portfolio"},
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
testimonials={[
|
|
{
|
|
name: "Sarah Chen", handle: "@sarrah_bakes", testimonial: "Got my bakery website up in 5 days. Sales increased 40% in the first month. Couldn't be happier!", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-smiling-femal-1773935711800-8c62d304.png?_wi=1", imageAlt: "Sarah Chen bakery owner"},
|
|
{
|
|
name: "Marcus Williams", handle: "@marcs_contracting", testimonial: "Finally have a professional site. Customers find me easily now. Best investment I made this year.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-confident-mal-1773935711567-a0bd5f8e.png?_wi=1", imageAlt: "Marcus Williams contractor"},
|
|
{
|
|
name: "Priya Patel", handle: "@priya_fitness", testimonial: "Affordable and fast. Nick understood exactly what my gym needed. Highly recommend!", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-female-fitnes-1773935711339-852b68f5.png?_wi=1", imageAlt: "Priya Patel fitness manager"},
|
|
{
|
|
name: "David Thompson", handle: "@thompson_law", testimonial: "Professional, responsive, and delivered on time. This is what web design should be.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-distinguished-1773935713362-894a53c8.png?_wi=1", imageAlt: "David Thompson lawyer"},
|
|
]}
|
|
testimonialRotationInterval={5000}
|
|
background={{
|
|
variant: "noise"}}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="how-it-works" data-section="how-it-works">
|
|
<FeatureCardTwentyThree
|
|
title="Simple Process. Fast Results."
|
|
description="We've streamlined web design so you get a stunning website without the headaches. Three simple steps. Done."
|
|
features={[
|
|
{
|
|
id: "step-1", title: "Tell Us Your Vision", tags: ["Discovery Call", "5-10 mins"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-a-creative-discovery-cal-1773935714880-17bdc309.png?_wi=1", imageAlt: "Discovery call illustration"},
|
|
{
|
|
id: "step-2", title: "We Design & Build", tags: ["3-7 Days", "Mobile-First"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-web-design-and-developme-1773935712636-0fc20480.png", imageAlt: "Web design development illustration"},
|
|
{
|
|
id: "step-3", title: "Launch & Support", tags: ["Live Website", "Ongoing Support"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-website-launch-celebrati-1773935711780-4fe2661c.png?_wi=1", imageAlt: "Website launch celebration"},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tag="How We Work"
|
|
tagAnimation="slide-up"
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services-overview" data-section="services-overview">
|
|
<ProductCardTwo
|
|
title="Website Solutions Built for GTA Businesses"
|
|
description="Choose the package that fits your needs. All include responsive design, SEO optimization, and 30 days of free support."
|
|
tag="Service Packages"
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "starter", brand: "NickToPixels", name: "Starter", price: "$899", rating: 5,
|
|
reviewCount: "Perfect for small businesses", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/clean-modern-illustration-of-a-basic-web-1773935711623-c7416504.png?_wi=1", imageAlt: "Starter package"},
|
|
{
|
|
id: "growth", brand: "NickToPixels", name: "Growth", price: "$1,499", rating: 5,
|
|
reviewCount: "Most popular package", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/modern-illustration-of-a-growth-focused--1773935712416-8420f0ec.png?_wi=1", imageAlt: "Growth package"},
|
|
{
|
|
id: "premium", brand: "NickToPixels", name: "Premium", price: "$2,499", rating: 5,
|
|
reviewCount: "Full custom solution", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/premium-illustration-of-a-full-featured--1773935714549-f058d2a4.png?_wi=1", imageAlt: "Premium package"},
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<FeatureCardTwentyThree
|
|
title="Real Websites. Real Results."
|
|
description="See how we've helped local businesses transform their online presence and grow faster."
|
|
features={[
|
|
{
|
|
id: "portfolio-1", title: "Local Bakery - 40% Sales Increase", tags: ["E-commerce", "Instagram Integration"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-modern-bakery-web-1773935714815-c71f4d59.png?_wi=1", imageAlt: "Bakery website portfolio"},
|
|
{
|
|
id: "portfolio-2", title: "Fitness Studio - Member Growth", tags: ["Booking System", "Class Schedule"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-modern-fitness-st-1773935714366-af6321ed.png?_wi=1", imageAlt: "Fitness studio website portfolio"},
|
|
{
|
|
id: "portfolio-3", title: "Contractor - 3x More Inquiries", tags: ["Portfolio Showcase", "Lead Form"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-contractor-constr-1773935714113-1d2d71f3.png?_wi=1", imageAlt: "Contractor website portfolio"},
|
|
{
|
|
id: "portfolio-4", title: "Restaurant - Online Ordering", tags: ["Menu Showcase", "Reservation System"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-restaurant-websit-1773935714910-4f841e2b.png?_wi=1", imageAlt: "Restaurant website portfolio"},
|
|
{
|
|
id: "portfolio-5", title: "Consulting Firm - Brand Authority", tags: ["Blog Integration", "Case Studies"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-consulting-firm-w-1773935713400-635cc467.png?_wi=1", imageAlt: "Consulting firm website portfolio"},
|
|
{
|
|
id: "portfolio-6", title: "Salon - Appointment Bookings", tags: ["Booking Calendar", "Gallery"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/screenshot-mockup-of-a-hair-salon-websit-1773935713947-be76e62c.png?_wi=1", imageAlt: "Salon website portfolio"},
|
|
]}
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tag="Portfolio"
|
|
tagAnimation="slide-up"
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
names={[
|
|
"Toronto Chamber of Commerce", "GTA Business Network", "ISED Canada", "Local Business Bureau", "Startup Toronto", "Web Professionals Canada", "Digital Toronto", "Small Biz GTA"]}
|
|
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"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="What Our Clients Say"
|
|
description="Real feedback from real business owners who trusted us with their web presence."
|
|
testimonials={[
|
|
{
|
|
id: "testimonial-1", name: "Sarah Chen", role: "Owner", company: "Sweet Dreams Bakery", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/professional-headshot-of-a-smiling-femal-1773935711800-8c62d304.png?_wi=2", imageAlt: "Sarah Chen"},
|
|
{
|
|
id: "testimonial-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="Client Success Stories"
|
|
tagAnimation="slide-up"
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="final-cta" data-section="final-cta">
|
|
<ContactSplit
|
|
tag="Ready to Grow?"
|
|
title="Get Your Free Website Quote Today"
|
|
description="No pressure. No obligation. Just a quick conversation about what your business needs. Book a 15-minute call or submit your details and we'll respond within 24 hours."
|
|
tagAnimation="slide-up"
|
|
background={{
|
|
variant: "animated-grid"}}
|
|
useInvertedBackground={false}
|
|
mediaPosition="right"
|
|
mediaAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAcvqI0IFhWz9EwREGjXu0WNvG/illustration-of-a-business-growth-succes-1773935712218-6a6ba0cd.png?_wi=1"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Get My Free Quote"
|
|
termsText="We respect your privacy. No spam, ever. We'll only reach out about your website project."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="NickToPixels"
|
|
copyrightText="© 2025 NickToPixels. Web Design for Toronto Businesses. All rights reserved."
|
|
socialLinks={[
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com/nicktopixels", ariaLabel: "Follow us on Instagram"},
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com/company/nicktopixels", ariaLabel: "Connect on LinkedIn"},
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com/nicktopixels", ariaLabel: "Follow us on Twitter"},
|
|
{
|
|
icon: Mail,
|
|
href: "mailto:hello@nicktopixels.ca", ariaLabel: "Email us"},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|