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