bender/4c679f93-48dc-4cae-a068-01909fa9b249
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Update src/app/contact/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-14 05:42:43 +00:00
parent ae55834eb4
commit b66db7be2f
1 changed files with 227 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

332
src/app/contact/page.tsx
View File

@@ -1,63 +1,87 @@
"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 FooterSimple from '@/components/sections/footer/FooterSimple';
import { useState } from 'react';
import { MessageCircle, Mail, Phone, MapPin, Clock, Facebook, Instagram, Twitter, Linkedin } from 'lucide-react';
export default function ContactPage() {
const [formData, setFormData] = useState({
name: '',
email: '',
subject: '',
message: '',
});
const [submitted, setSubmitted] = useState(false);
const navItems = [
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "Gallery", id: "gallery" },
{ name: "Packages", id: "packages" },
{ name: "About", id: "about" },
{ name: "Booking", 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" },
],
},
];
const handleFormChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log('Contact form submitted:', formData);
setSubmitted(true);
setFormData({
name: '',
email: '',
subject: '',
message: '',
});
setTimeout(() => setSubmitted(false), 3000);
};
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
@@ -73,111 +97,209 @@ 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 lg:px-8 py-16 md:py-24 lg:py-32">
<div className="max-w-4xl mx-auto text-center">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-6 bg-gradient-to-r from-red-500 via-yellow-500 to-pink-500 bg-clip-text text-transparent">
Contact Us
</h1>
<p className="text-lg md:text-xl opacity-80 mb-4 max-w-2xl mx-auto">
Have questions or ready to book? We'd love to hear from you! Reach out to our team and let's make your event unforgettable.
</p>
</div>
</div>
<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 id="contact-content" data-section="contact-content" className="mx-auto px-4 md:px-6 lg:px-8 py-12 md:py-16 lg:py-20">
<div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Contact Form */}
<div className="rounded-lg p-8 md:p-10 bg-gradient-to-br from-blue-50 via-cyan-50 to-teal-50 border-2 border-cyan-300 shadow-lg">
<h2 className="text-3xl font-bold mb-8 text-gray-800">Send Us a Message</h2>
{submitted && (
<div className="mb-6 p-4 rounded-lg bg-green-100 border-2 border-green-400 text-green-800 font-semibold">
✓ Thank you! We'll be in touch soon.
</div>
)}
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label className="block text-sm font-semibold mb-2 text-gray-800">Your Name *</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleFormChange}
required
placeholder="John Doe"
className="w-full px-4 py-3 rounded-lg border-2 border-cyan-300 focus:border-cyan-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
/>
</div>
<div>
<label className="block text-sm font-semibold mb-2 text-gray-800">Email Address *</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleFormChange}
required
placeholder="your@email.com"
className="w-full px-4 py-3 rounded-lg border-2 border-cyan-300 focus:border-cyan-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
/>
</div>
<div>
<label className="block text-sm font-semibold mb-2 text-gray-800">Subject *</label>
<input
type="text"
name="subject"
value={formData.subject}
onChange={handleFormChange}
required
placeholder="How can we help?"
className="w-full px-4 py-3 rounded-lg border-2 border-cyan-300 focus:border-cyan-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
/>
</div>
<div>
<label className="block text-sm font-semibold mb-2 text-gray-800">Message *</label>
<textarea
name="message"
value={formData.message}
onChange={handleFormChange}
required
placeholder="Tell us more about your inquiry..."
rows={6}
className="w-full px-4 py-3 rounded-lg border-2 border-cyan-300 focus:border-cyan-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500 resize-none"
/>
</div>
<button
type="submit"
className="w-full bg-gradient-to-r from-cyan-500 via-blue-500 to-teal-500 hover:from-cyan-600 hover:via-blue-600 hover:to-teal-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg text-lg"
>
Send Message
</button>
</form>
</div>
{/* Contact Information */}
<div className="space-y-8">
<div className="rounded-lg p-8 bg-gradient-to-br from-red-50 to-orange-50 border-2 border-red-200 shadow-lg hover:shadow-xl transition-shadow">
<div className="flex items-start gap-4">
<Phone className="w-8 h-8 text-red-500 flex-shrink-0 mt-1" />
<div>
<h3 className="text-lg font-bold text-gray-800 mb-2">Phone</h3>
<a href="tel:+15551234567" className="text-lg font-semibold text-red-600 hover:text-red-700 transition-colors">
(555) 123-4567
</a>
<p className="text-gray-700 mt-1 text-sm">Available Mon-Sun, 9 AM - 6 PM</p>
</div>
</div>
</div>
<div className="rounded-lg p-8 bg-gradient-to-br from-yellow-50 to-amber-50 border-2 border-yellow-200 shadow-lg hover:shadow-xl transition-shadow">
<div className="flex items-start gap-4">
<Mail className="w-8 h-8 text-yellow-600 flex-shrink-0 mt-1" />
<div>
<h3 className="text-lg font-bold text-gray-800 mb-2">Email</h3>
<a href="mailto:paintasy@events.com" className="text-lg font-semibold text-yellow-700 hover:text-yellow-800 transition-colors">
paintasy@events.com
</a>
<p className="text-gray-700 mt-1 text-sm">We reply within 24 hours</p>
</div>
</div>
</div>
<div className="rounded-lg p-8 bg-gradient-to-br from-green-50 to-emerald-50 border-2 border-green-200 shadow-lg hover:shadow-xl transition-shadow">
<div className="flex items-start gap-4">
<MapPin className="w-8 h-8 text-green-600 flex-shrink-0 mt-1" />
<div>
<h3 className="text-lg font-bold text-gray-800 mb-2">Service Area</h3>
<p className="text-gray-700 font-semibold">Regional Coverage</p>
<p className="text-gray-700 mt-1 text-sm">We service events throughout the region</p>
</div>
</div>
</div>
<div className="rounded-lg p-8 bg-gradient-to-br from-purple-50 to-pink-50 border-2 border-purple-200 shadow-lg hover:shadow-xl transition-shadow">
<div className="flex items-start gap-4">
<Clock className="w-8 h-8 text-purple-600 flex-shrink-0 mt-1" />
<div>
<h3 className="text-lg font-bold text-gray-800 mb-2">Hours</h3>
<p className="text-gray-700 text-sm">Monday - Sunday</p>
<p className="text-gray-700 font-semibold text-sm">9:00 AM - 6:00 PM</p>
<p className="text-gray-700 text-sm mt-1">Holiday hours may vary</p>
</div>
</div>
</div>
</div>
</div>
</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"
/>
{/* Social Media Section */}
<div id="contact-social" data-section="contact-social" className="mx-auto px-4 md:px-6 lg:px-8 py-12 md:py-16 lg:py-20 bg-gradient-to-r from-pink-100 via-purple-100 to-indigo-100">
<div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold mb-4">Connect With Us</h2>
<p className="text-lg opacity-80 mb-12">Follow our social media for behind-the-scenes content, event updates, and creative inspiration</p>
<div className="flex justify-center gap-6 flex-wrap">
<a
href="https://facebook.com"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-3 px-8 py-4 rounded-lg bg-blue-500 text-white font-bold hover:bg-blue-600 transition-all duration-300 transform hover:scale-110 shadow-lg hover:shadow-xl"
>
<Facebook className="w-6 h-6" />
Facebook
</a>
<a
href="https://instagram.com"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-3 px-8 py-4 rounded-lg bg-gradient-to-r from-pink-500 to-purple-500 text-white font-bold hover:from-pink-600 hover:to-purple-600 transition-all duration-300 transform hover:scale-110 shadow-lg hover:shadow-xl"
>
<Instagram className="w-6 h-6" />
Instagram
</a>
<a
href="https://tiktok.com"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-3 px-8 py-4 rounded-lg bg-gray-900 text-white font-bold hover:bg-gray-800 transition-all duration-300 transform hover:scale-110 shadow-lg hover:shadow-xl"
>
<Twitter className="w-6 h-6" />
TikTok
</a>
<a
href="https://linkedin.com"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-3 px-8 py-4 rounded-lg bg-blue-700 text-white font-bold hover:bg-blue-800 transition-all duration-300 transform hover:scale-110 shadow-lg hover:shadow-xl"
>
<Linkedin className="w-6 h-6" />
LinkedIn
</a>
</div>
</div>
</div>
<div id="footer" data-section="footer">
<div id="footer-contact" data-section="footer-contact" className="mx-auto px-4 md:px-6 lg:px-8">
<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-8 lg:gap-12"
columnsClassName="grid-cols-2 lg:grid-cols-4"
columnTitleClassName="font-extrabold text-lg"
columnItemClassName="hover:opacity-70 transition-opacity"
/>
</div>
</ThemeProvider>