Update src/app/contact/page.tsx
This commit is contained in:
@@ -1,58 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
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";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ContactForm from '@/components/form/ContactForm';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { Mail, Phone, MapPin, Clock } from 'lucide-react';
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "Gallery", id: "/gallery" },
|
||||
{ name: "Packages", id: "packages" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Book Event", id: "/booking" },
|
||||
{ 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" },
|
||||
{ label: "Book Now", href: "/booking" },
|
||||
{ label: "Get Quote", href: "/contact" },
|
||||
],
|
||||
},
|
||||
@@ -73,111 +71,113 @@ export default function ContactPage() {
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Paintasy"
|
||||
navItems={navItems}
|
||||
bottomLeftText="Creative Face & Body Art"
|
||||
bottomRightText="paintasy@events.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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" }}
|
||||
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"
|
||||
titleClassName="text-5xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90"
|
||||
/>
|
||||
<div id="contact-hero" data-section="contact-hero" className="mx-auto px-4 md:px-6 py-16">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<h1 className="text-5xl lg:text-6xl font-extrabold mb-6">Get in Touch</h1>
|
||||
<p className="text-xl opacity-90 mb-8">
|
||||
Have questions about our services? Want to discuss your event in detail? We're here to help! Reach out and let's create something unforgettable together. Our team is dedicated to making your event a success with exceptional service and creative artistry.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<div id="contact-form" data-section="contact-form" className="mx-auto px-4 md:px-6 py-16">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<ContactForm
|
||||
title="Send us a Message"
|
||||
description="Fill out the form below and we'll get back to you as soon as possible. For urgent inquiries, please call us directly."
|
||||
tag="Contact Us"
|
||||
tagIcon={Mail}
|
||||
inputPlaceholder="Your email address"
|
||||
buttonText="Send Message"
|
||||
termsText="We'll use your email to respond to your inquiry. We respect your privacy and won't share your information."
|
||||
centered={true}
|
||||
onSubmit={(email) => {
|
||||
console.log('Contact form submission from:', email);
|
||||
}}
|
||||
className="w-full"
|
||||
titleClassName="text-3xl font-extrabold mb-4"
|
||||
descriptionClassName="text-base opacity-90 mb-8"
|
||||
tagClassName="mb-4"
|
||||
formWrapperClassName="mt-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact-info" data-section="contact-info" className="mx-auto px-4 md:px-6 py-16">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-extrabold mb-12 text-center">Other Ways to Reach Us</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="p-8 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-lg">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<Phone className="w-8 h-8 text-blue-600" />
|
||||
<h3 className="text-xl font-bold">Phone</h3>
|
||||
</div>
|
||||
<p className="text-lg font-semibold text-blue-600 mb-2">+1 (555) 123-4567</p>
|
||||
<p className="opacity-80">Call us Monday to Friday, 9am to 6pm EST. We're available for event consultations and urgent bookings.</p>
|
||||
</div>
|
||||
<div className="p-8 bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<Mail className="w-8 h-8 text-purple-600" />
|
||||
<h3 className="text-xl font-bold">Email</h3>
|
||||
</div>
|
||||
<p className="text-lg font-semibold text-purple-600 mb-2">paintasy@events.com</p>
|
||||
<p className="opacity-80">Email us anytime! We respond to all inquiries within 24 hours, often sooner.</p>
|
||||
</div>
|
||||
<div className="p-8 bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<MapPin className="w-8 h-8 text-green-600" />
|
||||
<h3 className="text-xl font-bold">Service Area</h3>
|
||||
</div>
|
||||
<p className="text-lg font-semibold text-green-600 mb-2">Local & Regional Coverage</p>
|
||||
<p className="opacity-80">We serve the greater metropolitan area and surrounding regions for events of all sizes.</p>
|
||||
</div>
|
||||
<div className="p-8 bg-gradient-to-br from-orange-50 to-red-50 rounded-lg">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<Clock className="w-8 h-8 text-orange-600" />
|
||||
<h3 className="text-xl font-bold">Response Time</h3>
|
||||
</div>
|
||||
<p className="text-lg font-semibold text-orange-600 mb-2">Quick Turnaround</p>
|
||||
<p className="opacity-80">We typically respond within 24 hours. Rush bookings welcome—just let us know!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact-closing" data-section="contact-closing" className="mx-auto px-4 md:px-6">
|
||||
<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!"
|
||||
text="Ready to book your event or have more questions? Reach out today and let's start planning your creative experience!"
|
||||
animationType="background-highlight"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Email Us", href: "mailto:paintasy@events.com" },
|
||||
{ text: "Call +1 (555) 123-4567", href: "tel:+15551234567" },
|
||||
{ text: "Book Now", href: "/booking" },
|
||||
{ text: "Call Now", href: "tel:+15551234567" },
|
||||
]}
|
||||
ariaLabel="Contact closing call-to-action section"
|
||||
containerClassName="py-16"
|
||||
textClassName="text-3xl font-extrabold text-center"
|
||||
contentClassName="max-w-3xl mx-auto"
|
||||
textClassName="text-4xl 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"
|
||||
titleClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<div id="footer-contact" data-section="footer-contact" className="mx-auto px-4 md:px-6">
|
||||
<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