Update src/app/contact/page.tsx
This commit is contained in:
@@ -1,51 +1,55 @@
|
||||
"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 FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { Mail, Phone, MapPin } from 'lucide-react';
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FaqBase from "@/components/sections/faq/FaqBase";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { HelpCircle, Mail, Phone, MapPin } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Gallery", id: "/gallery" },
|
||||
{ name: "Packages", id: "/packages" },
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "Packages", id: "packages" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Services", items: [
|
||||
title: "Services",
|
||||
items: [
|
||||
{ label: "Kids Party Face Painting", href: "/services" },
|
||||
{ label: "Festival Face Art", href: "/services" },
|
||||
{ label: "Corporate Events", href: "/services" },
|
||||
{ label: "Body Painting", href: "/services" },
|
||||
{ label: "Custom Designs", href: "/services" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Packages", href: "/packages" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
title: "Connect",
|
||||
items: [
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
{ label: "Facebook", href: "https://facebook.com" },
|
||||
{ label: "TikTok", href: "https://tiktok.com" },
|
||||
{ label: "Email", href: "mailto:paintasy@events.com" },
|
||||
{ label: "Phone", href: "tel:+15551234567" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Service Areas", items: [
|
||||
title: "Service Areas",
|
||||
items: [
|
||||
{ label: "Local Events", href: "/contact" },
|
||||
{ label: "Regional Coverage", href: "/contact" },
|
||||
{ label: "Book Now", href: "/packages" },
|
||||
@@ -69,48 +73,109 @@ export default function ContactPage() {
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
brandName="Paintasy"
|
||||
navItems={navItems}
|
||||
brandName="Paintasy"
|
||||
bottomLeftText="Creative Face & Body Art"
|
||||
bottomRightText="paintasy@events.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-split" data-section="contact-split" className="mx-auto px-4 md:px-6 py-20">
|
||||
<ContactSplit
|
||||
tag="Get in Touch"
|
||||
title="Book Your Event Today"
|
||||
description="Transform your celebration with professional face and body art. Quick response times, flexible scheduling, and creative designs tailored to your event. Let's make your event unforgettable!"
|
||||
<div id="contact-page-hero" data-section="contact-page-hero">
|
||||
<HeroBillboardGallery
|
||||
title="Get In Touch"
|
||||
description="Ready to book Paintasy for your event? Contact us today and let's create an unforgettable experience."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Send Message"
|
||||
termsText="By submitting this form, you agree to be contacted about your event inquiry."
|
||||
buttons={[{ text: "Call Us", href: "tel:+15551234567" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-adult-man-his-30s-that-is-painting-big-canvas-with-lot-brushes-palette-while-sitting-floor-art-studio_662251-323.jpg?_wi=4",
|
||||
imageAlt: "Contact Paintasy for your event",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="opacity"
|
||||
onSubmit={(email) => {
|
||||
console.log("Form submitted with email:", email);
|
||||
}}
|
||||
ariaLabel="Contact form section"
|
||||
containerClassName="gap-12"
|
||||
tagClassName="text-sm"
|
||||
titleClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90 max-w-2xl"
|
||||
buttonClassName="px-8 py-3"
|
||||
buttonTextClassName="font-semibold"
|
||||
titleClassName="text-5xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer-contact" data-section="footer-contact" className="mx-auto px-4 md:px-6">
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactText
|
||||
text="Ready to add magic to your event? Contact Paintasy Face and Body Art today. We'd love to discuss your event and create an unforgettable experience for your guests. Get your quote or schedule a consultation now!"
|
||||
animationType="background-highlight"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Email Us", href: "mailto:paintasy@events.com" },
|
||||
{ text: "Call +1 (555) 123-4567", href: "tel:+15551234567" },
|
||||
]}
|
||||
containerClassName="py-16"
|
||||
textClassName="text-3xl font-extrabold text-center"
|
||||
buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-faq" data-section="contact-faq">
|
||||
<FaqBase
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about booking Paintasy for your event."
|
||||
tag="FAQ"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="smooth"
|
||||
faqsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
showCard={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq-1",
|
||||
title: "How far in advance should I book?",
|
||||
content:
|
||||
"We recommend booking at least 2-3 weeks in advance to secure your preferred date and time. For large events or peak seasons, 4-6 weeks advance booking is ideal. Last-minute bookings may be available depending on our schedule.",
|
||||
},
|
||||
{
|
||||
id: "faq-2",
|
||||
title: "Are your face paints safe for children?",
|
||||
content:
|
||||
"Absolutely! We use only professional-grade, hypoallergenic face paints that are non-toxic and dermatologist-tested. All products are safe for sensitive skin. We also practice strict hygiene protocols, using clean brushes and sanitized application tools for each client.",
|
||||
},
|
||||
{
|
||||
id: "faq-3",
|
||||
title: "How long does face painting take per person?",
|
||||
content:
|
||||
"Simple designs typically take 3-5 minutes, while more detailed or custom designs take 8-12 minutes. At festivals, we optimize for speed without sacrificing quality. For parties, we allow a bit more time for custom designs and interactions with children.",
|
||||
},
|
||||
{
|
||||
id: "faq-4",
|
||||
title: "What if someone has a skin allergy?",
|
||||
content:
|
||||
"We have hypoallergenic options available. Please inform us of any allergies when booking. We're always happy to discuss alternative products or test patches before proceeding with full face painting.",
|
||||
},
|
||||
{
|
||||
id: "faq-5",
|
||||
title: "Can you do custom designs?",
|
||||
content:
|
||||
"Yes! We specialize in custom designs for themed parties and corporate events. Please provide theme details or reference images when booking. There may be a small additional fee for very complex custom designs.",
|
||||
},
|
||||
{
|
||||
id: "faq-6",
|
||||
title: "What's included in your packages?",
|
||||
content:
|
||||
"All packages include professional face painting service, setup and teardown, and our artist's materials. Some packages include additional services like temporary tattoos or body painting. Check specific package details for what's included.",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "View Packages", href: "/packages" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
containerClassName="gap-12"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
|
||||
bottomRightText="Professional Event Entertainment | Creative Services"
|
||||
ariaLabel="Site footer with links"
|
||||
containerClassName="gap-12"
|
||||
columnsClassName="grid-cols-2 lg:grid-cols-4"
|
||||
columnTitleClassName="font-extrabold text-lg"
|
||||
columnItemClassName="hover:opacity-70 transition-opacity"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user