Merge version_5 into main #11
@@ -1,58 +1,63 @@
|
||||
"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 MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
||||
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Palette, Award, Shield, CheckCircle } from "lucide-react";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import Link from 'next/link';
|
||||
import { Sparkles, Palette, Heart, Smile, Zap, Music, Briefcase, Target, Users, Star, DollarSign, Camera, HelpCircle, Award } from 'lucide-react';
|
||||
|
||||
export const metadata = {
|
||||
title: "About Paintasy - Professional Face Painting & Body Art", description: "Learn about Paintasy Face and Body Art. Discover our company story, mission, and team of professional face painters dedicated to creating magical moments.", keywords: "about paintasy, face painting team, professional artists, company story, mission statement"
|
||||
};
|
||||
|
||||
export default function AboutPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Home", id: "/" },
|
||||
{ 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: "About", id: "/about" },
|
||||
{ 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: "Packages", href: "/#packages-home" },
|
||||
{ label: "FAQ", href: "/#faq-home" },
|
||||
{ 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: "/#packages-home" },
|
||||
{ label: "Get Quote", href: "/contact" },
|
||||
],
|
||||
},
|
||||
@@ -73,103 +78,156 @@ export default function AboutPage() {
|
||||
>
|
||||
<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="about-page-hero" data-section="about-page-hero">
|
||||
<div id="hero-about" data-section="hero-about" className="mx-auto px-4 md:px-6">
|
||||
<HeroBillboardGallery
|
||||
title="About Paintasy"
|
||||
description="Professional face painting and body art entertainment bringing creativity and joy to events."
|
||||
title="About Paintasy Face and Body Art"
|
||||
description="Discover our story, mission, and the team behind professional face painting and body art entertainment. We're passionate about creating magical moments and unforgettable experiences."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Our Story"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Learn More", href: "#mission-about" },
|
||||
{ text: "Meet Our Team", href: "#team-about" },
|
||||
]}
|
||||
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=2",
|
||||
imageAlt: "Professional face painter at work",
|
||||
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=1", imageAlt: "Paintasy founder painting with passion"
|
||||
},
|
||||
]}
|
||||
mediaAnimation="opacity"
|
||||
titleClassName="text-5xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90"
|
||||
ariaLabel="About page hero section"
|
||||
className="min-h-screen"
|
||||
containerClassName="flex flex-col lg:flex-row items-center justify-between gap-12"
|
||||
titleClassName="text-5xl lg:text-6xl font-extrabold leading-tight"
|
||||
descriptionClassName="text-lg lg:text-xl opacity-90 max-w-2xl"
|
||||
buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about-story" data-section="about-story">
|
||||
<div id="mission-about" data-section="mission-about" className="mx-auto px-4 md:px-6">
|
||||
<MetricSplitMediaAbout
|
||||
title="Our Story & Mission"
|
||||
description="Paintasy was founded on the belief that creative entertainment transforms events into unforgettable celebrations. We started with a passion for face painting and body art, and have grown into a professional team dedicated to bringing magic and color to every event we touch.\n\nOur mission is simple: deliver exceptional artistic service, genuine happiness, and professional entertainment that exceeds expectations. From children's birthday parties to corporate celebrations and festival events, we pour our hearts into creating beautiful, memorable experiences."
|
||||
tag="Professional Team"
|
||||
tagIcon={Award}
|
||||
title="Our Mission & Values"
|
||||
description="At Paintasy, our mission is to bring joy, creativity, and color to every event we serve. We believe that face painting and body art are more than just entertainment—they're an art form that transforms moments into magical memories. We're committed to professional excellence, artistic innovation, and making every client feel valued and celebrated."
|
||||
tag="Mission Statement"
|
||||
tagIcon={Target}
|
||||
tagAnimation="slide-up"
|
||||
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=3"
|
||||
imageAlt="Our professional face painting artist"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1"
|
||||
imageAlt="Professional artist at work"
|
||||
mediaAnimation="blur-reveal"
|
||||
metrics={[
|
||||
{ value: "500+", title: "Events Painted" },
|
||||
{ value: "1000+", title: "Happy Faces" },
|
||||
{ value: "10+", title: "Years Experience" },
|
||||
{ value: "15+", title: "Years Combined Experience" },
|
||||
{ value: "2000+", title: "Happy Clients" },
|
||||
{ value: "50+", title: "Events Per Year" },
|
||||
{ value: "100%", title: "Satisfaction Rate" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="Mission and values section"
|
||||
containerClassName="gap-12"
|
||||
titleClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90 max-w-2xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about-values" data-section="about-values">
|
||||
<FeatureCardTen
|
||||
title="Our Values"
|
||||
description="What drives us in everything we do."
|
||||
<div id="team-about" data-section="team-about" className="mx-auto px-4 md:px-6">
|
||||
<TeamCardEleven
|
||||
title="Meet Our Team"
|
||||
description="Our team consists of professional artists, each with unique talents and a passion for creating unforgettable face painting and body art experiences."
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
useInvertedBackground={true}
|
||||
tag="Professional Artists"
|
||||
tagIcon={Palette}
|
||||
tagAnimation="slide-up"
|
||||
groups={[
|
||||
{
|
||||
id: "value-1",
|
||||
title: "Creativity",
|
||||
description:
|
||||
"We believe in artistic expression and creative design. Every face is a canvas.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=3",
|
||||
imageAlt: "Creative face painting designs",
|
||||
},
|
||||
items: [
|
||||
{ icon: Palette, text: "Artistic innovation" },
|
||||
{ icon: CheckCircle, text: "Unique designs" },
|
||||
],
|
||||
reverse: false,
|
||||
id: "founders", groupTitle: "Founders & Lead Artists", members: [
|
||||
{
|
||||
id: "founder-1", title: "Alex Martinez", subtitle: "Co-Founder & Lead Artist", detail: "With 15 years of professional face painting experience, Alex founded Paintasy with a vision of bringing professional-grade face art to every event. Specializing in intricate designs and themed artwork.", imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-woman-wearing-mask_23-2148784326.jpg", imageAlt: "Alex Martinez, co-founder"
|
||||
},
|
||||
{
|
||||
id: "founder-2", title: "Jordan Chen", subtitle: "Co-Founder & Creative Director", detail: "Jordan brings artistic vision and innovation to every project. With a background in fine arts and body painting, Jordan leads our creative direction and ensures every design exceeds expectations.", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1", imageAlt: "Jordan Chen, creative director"
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "value-2",
|
||||
title: "Safety & Professionalism",
|
||||
description:
|
||||
"We use only hypoallergenic, professional-grade face paints and maintain strict hygiene standards.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=5",
|
||||
imageAlt: "Safe professional face painting",
|
||||
},
|
||||
items: [
|
||||
{ icon: Shield, text: "Hypoallergenic products" },
|
||||
{ icon: CheckCircle, text: "Safety certified" },
|
||||
],
|
||||
reverse: true,
|
||||
id: "artists", groupTitle: "Professional Artists", members: [
|
||||
{
|
||||
id: "artist-1", title: "Maya Patel", subtitle: "Face Painting Specialist", detail: "Specializes in kids' party designs and fast-paced festival work. Maya is known for her energetic personality and ability to make every child feel special with personalized designs.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=1", imageAlt: "Maya Patel, face painting specialist"
|
||||
},
|
||||
{
|
||||
id: "artist-2", title: "Chris Thompson", subtitle: "Body Art & Festival Artist", detail: "Expert in body painting and large-scale festival events. Chris combines speed with artistry, delivering stunning designs even in high-volume environments.", imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=1", imageAlt: "Chris Thompson, body art specialist"
|
||||
},
|
||||
{
|
||||
id: "artist-3", title: "Lisa Wong", subtitle: "Corporate & Custom Design Artist", detail: "Brings professionalism and creativity to corporate events. Lisa excels at custom branding designs and creates memorable experiences for team building activities.", imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1", imageAlt: "Lisa Wong, corporate artist"
|
||||
},
|
||||
]
|
||||
},
|
||||
]}
|
||||
ariaLabel="Team members section"
|
||||
containerClassName="gap-12"
|
||||
itemClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90"
|
||||
descriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<div id="company-story" data-section="company-story" className="mx-auto px-4 md:px-6">
|
||||
<TestimonialAboutCard
|
||||
tag="Company Story"
|
||||
tagIcon={Heart}
|
||||
tagAnimation="slide-up"
|
||||
title="Our Journey"
|
||||
description="Paintasy was founded on a simple belief: face painting and body art should be more than just entertainment—it should be an art form that brings joy, creativity, and magic to every event."
|
||||
subdescription="What started as a passion project has grown into a trusted name in professional event entertainment. From small birthday parties to large-scale festivals, we've been committed to delivering exceptional service and unforgettable experiences. Our team's dedication to quality, safety, and artistic excellence has earned us the trust of hundreds of happy clients. Today, Paintasy continues to innovate and push creative boundaries, making every event we touch a little bit more magical."
|
||||
icon={Sparkles}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/family-portrait-surprised-father-has-yellow-face-from-paints-cheerful-two-daughters-shows-palms-dirty-with-watercolours-paint-picture-pastime-isolated-lilac-wall-this-is-art_273609-26128.jpg?_wi=1"
|
||||
imageAlt="Paintasy company story"
|
||||
mediaAnimation="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="Company story section"
|
||||
titleClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90"
|
||||
subdescriptionClassName="text-base opacity-80 leading-relaxed"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-about" data-section="contact-about" className="mx-auto px-4 md:px-6">
|
||||
<ContactText
|
||||
text="Want to learn more about booking Paintasy for your event or interested in joining our team? Get in touch with us today. We'd love to discuss how we can make your event unforgettable."
|
||||
animationType="background-highlight"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Request a Quote", href: "/contact" },
|
||||
{ text: "Call Us", href: "tel:+15551234567" },
|
||||
]}
|
||||
ariaLabel="Contact call-to-action section"
|
||||
containerClassName="py-16"
|
||||
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="footer-about" data-section="footer-about" 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>
|
||||
|
||||
@@ -2,19 +2,31 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ContactForm from '@/components/form/ContactForm';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { Calendar } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { Calendar, Clock, Users, Palette, CheckCircle } from 'lucide-react';
|
||||
|
||||
export default function BookingPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
eventType: '',
|
||||
eventDate: '',
|
||||
eventTime: '',
|
||||
guestCount: '',
|
||||
budget: '',
|
||||
notes: '',
|
||||
});
|
||||
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/#services" },
|
||||
{ name: "Gallery", id: "/gallery" },
|
||||
{ name: "Packages", id: "packages" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Book Event", id: "/booking" },
|
||||
{ name: "Packages", id: "/#packages" },
|
||||
{ name: "About", id: "/#about" },
|
||||
{ name: "Booking", id: "/booking" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
@@ -30,10 +42,10 @@ export default function BookingPage() {
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "About Us", href: "/#about" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Packages", href: "/packages" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Packages", href: "/#packages" },
|
||||
{ label: "FAQ", href: "/#faq" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
@@ -56,6 +68,29 @@ export default function BookingPage() {
|
||||
},
|
||||
];
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSubmitted(true);
|
||||
setTimeout(() => setSubmitted(false), 5000);
|
||||
};
|
||||
|
||||
const availableDates = [
|
||||
{ date: '2025-02-15', available: true },
|
||||
{ date: '2025-02-16', available: false },
|
||||
{ date: '2025-02-17', available: true },
|
||||
{ date: '2025-02-22', available: true },
|
||||
{ date: '2025-02-23', available: true },
|
||||
{ date: '2025-03-01', available: true },
|
||||
{ date: '2025-03-02', available: false },
|
||||
{ date: '2025-03-08', available: true },
|
||||
{ date: '2025-03-09', available: true },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
@@ -78,69 +113,183 @@ export default function BookingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6 py-16">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<ContactForm
|
||||
title="Book Your Event"
|
||||
description="Get started with a quick inquiry. We'll follow up with you within 24 hours with availability and pricing details tailored to your event."
|
||||
tag="Lead Generation"
|
||||
tagIcon={Calendar}
|
||||
inputPlaceholder="Your email address"
|
||||
buttonText="Get Started"
|
||||
termsText="By submitting this form, you agree to be contacted about your event booking inquiry. We respect your privacy."
|
||||
centered={true}
|
||||
useInvertedBackground={false}
|
||||
onSubmit={(email) => {
|
||||
console.log('Booking inquiry from:', email);
|
||||
}}
|
||||
className="w-full"
|
||||
titleClassName="text-4xl font-extrabold mb-4"
|
||||
descriptionClassName="text-lg opacity-90 mb-8"
|
||||
tagClassName="mb-4"
|
||||
formWrapperClassName="mt-8"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero-booking" data-section="hero-booking" className="mx-auto px-4 md:px-6">
|
||||
<HeroLogo
|
||||
logoText="Event Booking"
|
||||
description="Secure your date and customize your face painting and body art experience. Check availability, fill out your booking form, and let's create something amazing."
|
||||
buttons={[{ text: "Scroll to Book", href: "#booking-form" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
showDimOverlay={false}
|
||||
ariaLabel="Booking page hero section"
|
||||
className="min-h-screen flex items-center justify-center"
|
||||
containerClassName="text-center"
|
||||
descriptionClassName="text-lg opacity-90 max-w-2xl mx-auto"
|
||||
logoContainerClassName="mb-6"
|
||||
logoClassName="text-5xl md:text-6xl font-extrabold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="booking-features" data-section="booking-features" className="mx-auto px-4 md:px-6 py-16">
|
||||
<div id="availability-calendar" data-section="availability-calendar" 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">Our Booking Process</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="p-6 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-lg">
|
||||
<div className="text-4xl font-extrabold text-blue-600 mb-4">1</div>
|
||||
<h3 className="text-xl font-bold mb-3">Submit Inquiry</h3>
|
||||
<p className="text-opacity-80">Fill out our quick booking form with your event details and preferred date.</p>
|
||||
<h2 className="text-4xl font-extrabold mb-4 text-center">Availability Calendar</h2>
|
||||
<p className="text-lg opacity-90 text-center mb-12 max-w-2xl mx-auto">Check our availability and select your preferred event date. Green indicates available dates, red shows booked slots.</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3 p-3 bg-green-100 rounded-lg">
|
||||
<div className="w-4 h-4 bg-green-500 rounded"></div>
|
||||
<span className="text-sm font-medium">Available</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 bg-red-100 rounded-lg">
|
||||
<div className="w-4 h-4 bg-red-500 rounded"></div>
|
||||
<span className="text-sm font-medium">Booked</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg">
|
||||
<div className="text-4xl font-extrabold text-purple-600 mb-4">2</div>
|
||||
<h3 className="text-xl font-bold mb-3">Get Quote</h3>
|
||||
<p className="text-opacity-80">We'll review your event details and send you a custom quote within 24 hours.</p>
|
||||
</div>
|
||||
<div className="p-6 bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg">
|
||||
<div className="text-4xl font-extrabold text-green-600 mb-4">3</div>
|
||||
<h3 className="text-xl font-bold mb-3">Confirm Booking</h3>
|
||||
<p className="text-opacity-80">Once confirmed, we'll send you all the details and setup information for your event.</p>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{availableDates.map((slot) => {
|
||||
const date = new Date(slot.date);
|
||||
return (
|
||||
<button
|
||||
key={slot.date}
|
||||
className={`p-3 rounded-lg font-semibold text-sm transition-all ${
|
||||
slot.available
|
||||
? 'bg-green-100 text-green-900 hover:bg-green-200 cursor-pointer'
|
||||
: 'bg-red-100 text-red-900 cursor-not-allowed opacity-50'
|
||||
}`}
|
||||
disabled={!slot.available}
|
||||
>
|
||||
{date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="booking-contact" data-section="booking-contact" className="mx-auto px-4 md:px-6">
|
||||
<ContactText
|
||||
text="Prefer to discuss your event first? Contact us directly and let's create something amazing together."
|
||||
animationType="background-highlight"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Call Us", href: "tel:+15551234567" },
|
||||
{ text: "Email Us", href: "mailto:paintasy@events.com" },
|
||||
]}
|
||||
ariaLabel="Booking contact call-to-action section"
|
||||
containerClassName="py-16"
|
||||
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 id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6 py-16">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h2 className="text-4xl font-extrabold mb-4 text-center">Booking Form</h2>
|
||||
<p className="text-lg opacity-90 text-center mb-12">Tell us about your event and we'll customize the perfect package for you.</p>
|
||||
|
||||
{submitted ? (
|
||||
<div className="bg-green-100 border-2 border-green-500 rounded-lg p-8 text-center">
|
||||
<CheckCircle className="w-12 h-12 text-green-600 mx-auto mb-4" />
|
||||
<h3 className="text-2xl font-bold mb-2">Booking Request Submitted!</h3>
|
||||
<p className="text-lg opacity-90">We'll contact you within 24 hours to confirm your event details and finalize your booking.</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6 bg-white bg-opacity-5 backdrop-blur-sm p-8 rounded-lg border border-white border-opacity-10">
|
||||
<div>
|
||||
<label htmlFor="eventType" className="block text-sm font-semibold mb-2">Event Type *</label>
|
||||
<select
|
||||
id="eventType"
|
||||
name="eventType"
|
||||
value={formData.eventType}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
|
||||
>
|
||||
<option value="">Select event type</option>
|
||||
<option value="birthday">Birthday Party</option>
|
||||
<option value="festival">Festival/Outdoor Event</option>
|
||||
<option value="corporate">Corporate Event</option>
|
||||
<option value="wedding">Wedding/Reception</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="eventDate" className="block text-sm font-semibold mb-2 flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4" /> Event Date *
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
id="eventDate"
|
||||
name="eventDate"
|
||||
value={formData.eventDate}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="eventTime" className="block text-sm font-semibold mb-2 flex items-center gap-2">
|
||||
<Clock className="w-4 h-4" /> Event Time *
|
||||
</label>
|
||||
<input
|
||||
type="time"
|
||||
id="eventTime"
|
||||
name="eventTime"
|
||||
value={formData.eventTime}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="guestCount" className="block text-sm font-semibold mb-2 flex items-center gap-2">
|
||||
<Users className="w-4 h-4" /> Expected Guest Count *
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="guestCount"
|
||||
name="guestCount"
|
||||
value={formData.guestCount}
|
||||
onChange={handleInputChange}
|
||||
placeholder="e.g., 30"
|
||||
required
|
||||
min="1"
|
||||
className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="budget" className="block text-sm font-semibold mb-2 flex items-center gap-2">
|
||||
<Palette className="w-4 h-4" /> Budget (Optional)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="budget"
|
||||
name="budget"
|
||||
value={formData.budget}
|
||||
onChange={handleInputChange}
|
||||
placeholder="e.g., $200-300"
|
||||
className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="notes" className="block text-sm font-semibold mb-2">Additional Notes</label>
|
||||
<textarea
|
||||
id="notes"
|
||||
name="notes"
|
||||
value={formData.notes}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Tell us about your vision, themes, special requests, etc."
|
||||
rows={4}
|
||||
className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
Submit Booking Request
|
||||
</button>
|
||||
|
||||
<p className="text-sm opacity-75 text-center">* Required fields. We'll contact you shortly to confirm and discuss details.</p>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer-booking" data-section="footer-booking" className="mx-auto px-4 md:px-6">
|
||||
@@ -157,4 +306,4 @@ export default function BookingPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,19 +2,30 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ContactForm from '@/components/form/ContactForm';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { Mail, Phone, MapPin, Clock } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { Mail, Phone, MapPin, Clock, CheckCircle } from 'lucide-react';
|
||||
|
||||
export default function ContactPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
});
|
||||
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/#services" },
|
||||
{ name: "Gallery", id: "/gallery" },
|
||||
{ name: "Packages", id: "packages" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Book Event", id: "/booking" },
|
||||
{ name: "Packages", id: "/#packages" },
|
||||
{ name: "About", id: "/#about" },
|
||||
{ name: "Booking", id: "/booking" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
@@ -30,10 +41,10 @@ export default function ContactPage() {
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "About Us", href: "/#about" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Packages", href: "/packages" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Packages", href: "/#packages" },
|
||||
{ label: "FAQ", href: "/#faq" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
@@ -56,6 +67,17 @@ export default function ContactPage() {
|
||||
},
|
||||
];
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSubmitted(true);
|
||||
setTimeout(() => setSubmitted(false), 5000);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
@@ -78,95 +100,219 @@ export default function ContactPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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-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}
|
||||
useInvertedBackground={false}
|
||||
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 id="hero-contact" data-section="hero-contact" className="mx-auto px-4 md:px-6">
|
||||
<HeroLogo
|
||||
logoText="Get In Touch"
|
||||
description="Have questions about our services? Want to discuss your event? We're here to help! Reach out to Paintasy and let's create something amazing together."
|
||||
buttons={[{ text: "Contact Form Below", href: "#contact-form" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
showDimOverlay={false}
|
||||
ariaLabel="Contact page hero section"
|
||||
className="min-h-screen flex items-center justify-center"
|
||||
containerClassName="text-center"
|
||||
descriptionClassName="text-lg opacity-90 max-w-2xl mx-auto"
|
||||
logoContainerClassName="mb-6"
|
||||
logoClassName="text-5xl md:text-6xl font-extrabold"
|
||||
/>
|
||||
</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 className="max-w-5xl mx-auto">
|
||||
<h2 className="text-4xl font-extrabold mb-4 text-center">Contact Information</h2>
|
||||
<p className="text-lg opacity-90 text-center mb-12 max-w-2xl mx-auto">Multiple ways to reach us. Choose what works best for you.</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="bg-white bg-opacity-5 backdrop-blur-sm border border-white border-opacity-10 rounded-lg p-6 text-center hover:bg-opacity-10 transition-all">
|
||||
<Mail className="w-8 h-8 mx-auto mb-4 text-blue-400" />
|
||||
<h3 className="text-lg font-bold mb-2">Email</h3>
|
||||
<a href="mailto:paintasy@events.com" className="text-sm hover:opacity-80 transition-opacity">
|
||||
paintasy@events.com
|
||||
</a>
|
||||
<p className="text-xs opacity-70 mt-2">24-hour response</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 className="bg-white bg-opacity-5 backdrop-blur-sm border border-white border-opacity-10 rounded-lg p-6 text-center hover:bg-opacity-10 transition-all">
|
||||
<Phone className="w-8 h-8 mx-auto mb-4 text-green-400" />
|
||||
<h3 className="text-lg font-bold mb-2">Phone</h3>
|
||||
<a href="tel:+15551234567" className="text-sm hover:opacity-80 transition-opacity">
|
||||
+1 (555) 123-4567
|
||||
</a>
|
||||
<p className="text-xs opacity-70 mt-2">Call or text anytime</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 className="bg-white bg-opacity-5 backdrop-blur-sm border border-white border-opacity-10 rounded-lg p-6 text-center hover:bg-opacity-10 transition-all">
|
||||
<MapPin className="w-8 h-8 mx-auto mb-4 text-red-400" />
|
||||
<h3 className="text-lg font-bold mb-2">Location</h3>
|
||||
<p className="text-sm">Serving City Metro Area</p>
|
||||
<p className="text-xs opacity-70 mt-2">Local & Regional Coverage</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 className="bg-white bg-opacity-5 backdrop-blur-sm border border-white border-opacity-10 rounded-lg p-6 text-center hover:bg-opacity-10 transition-all">
|
||||
<Clock className="w-8 h-8 mx-auto mb-4 text-purple-400" />
|
||||
<h3 className="text-lg font-bold mb-2">Hours</h3>
|
||||
<p className="text-sm">Flexible Availability</p>
|
||||
<p className="text-xs opacity-70 mt-2">Weekend & Evening Events</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 book your event or have more questions? Reach out today and let's start planning your creative experience!"
|
||||
animationType="background-highlight"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Book Now", href: "/booking" },
|
||||
{ text: "Call Now", href: "tel:+15551234567" },
|
||||
]}
|
||||
ariaLabel="Contact closing call-to-action section"
|
||||
containerClassName="py-16"
|
||||
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 id="contact-form" data-section="contact-form" className="mx-auto px-4 md:px-6 py-16">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h2 className="text-4xl font-extrabold mb-4 text-center">Send us a Message</h2>
|
||||
<p className="text-lg opacity-90 text-center mb-12">Fill out the form below and we'll get back to you as soon as possible.</p>
|
||||
|
||||
{submitted ? (
|
||||
<div className="bg-green-100 border-2 border-green-500 rounded-lg p-8 text-center">
|
||||
<CheckCircle className="w-12 h-12 text-green-600 mx-auto mb-4" />
|
||||
<h3 className="text-2xl font-bold mb-2">Message Sent Successfully!</h3>
|
||||
<p className="text-lg opacity-90">Thank you for contacting us. We'll respond within 24 hours.</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6 bg-white bg-opacity-5 backdrop-blur-sm p-8 rounded-lg border border-white border-opacity-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-semibold mb-2">Full Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Your name"
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-semibold mb-2">Email Address *</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-semibold mb-2">Phone Number (Optional)</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
placeholder="+1 (555) 000-0000"
|
||||
className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="subject" className="block text-sm font-semibold mb-2">Subject *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="subject"
|
||||
name="subject"
|
||||
value={formData.subject}
|
||||
onChange={handleInputChange}
|
||||
placeholder="How can we help?"
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-semibold mb-2">Message *</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Tell us about your inquiry, event, or question..."
|
||||
rows={5}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
Send Message
|
||||
</button>
|
||||
|
||||
<p className="text-sm opacity-75 text-center">* Required fields. We typically respond within 24 hours.</p>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="location-info" data-section="location-info" className="mx-auto px-4 md:px-6 py-16 bg-white bg-opacity-5 backdrop-blur-sm border-y border-white border-opacity-10">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-4xl font-extrabold mb-4 text-center">Service Coverage</h2>
|
||||
<p className="text-lg opacity-90 text-center mb-12 max-w-2xl mx-auto">We proudly serve the entire metro area and surrounding regions. For events outside our typical service area, contact us to discuss possibilities.</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-4 flex items-center gap-2">
|
||||
<MapPin className="w-6 h-6" /> Coverage Areas
|
||||
</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li className="flex items-center gap-2 p-2 hover:bg-white hover:bg-opacity-5 rounded transition-all">
|
||||
<span className="w-2 h-2 bg-green-400 rounded-full"></span>
|
||||
Downtown Metro Area
|
||||
</li>
|
||||
<li className="flex items-center gap-2 p-2 hover:bg-white hover:bg-opacity-5 rounded transition-all">
|
||||
<span className="w-2 h-2 bg-green-400 rounded-full"></span>
|
||||
Suburban Communities
|
||||
</li>
|
||||
<li className="flex items-center gap-2 p-2 hover:bg-white hover:bg-opacity-5 rounded transition-all">
|
||||
<span className="w-2 h-2 bg-green-400 rounded-full"></span>
|
||||
Regional Events (30+ miles)
|
||||
</li>
|
||||
<li className="flex items-center gap-2 p-2 hover:bg-white hover:bg-opacity-5 rounded transition-all">
|
||||
<span className="w-2 h-2 bg-green-400 rounded-full"></span>
|
||||
Corporate Offices & Venues
|
||||
</li>
|
||||
<li className="flex items-center gap-2 p-2 hover:bg-white hover:bg-opacity-5 rounded transition-all">
|
||||
<span className="w-2 h-2 bg-green-400 rounded-full"></span>
|
||||
Outdoor Festivals & Parks
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-4 flex items-center gap-2">
|
||||
<Clock className="w-6 h-6" /> Availability
|
||||
</h3>
|
||||
<ul className="space-y-3 text-sm">
|
||||
<li>
|
||||
<p className="font-semibold mb-1">Weekday Events</p>
|
||||
<p className="opacity-75">Evening & special occasion availability</p>
|
||||
</li>
|
||||
<li>
|
||||
<p className="font-semibold mb-1">Weekend Events</p>
|
||||
<p className="opacity-75">Saturday & Sunday (book in advance)</p>
|
||||
</li>
|
||||
<li>
|
||||
<p className="font-semibold mb-1">Holiday Availability</p>
|
||||
<p className="opacity-75">Seasonal availability varies</p>
|
||||
</li>
|
||||
<li>
|
||||
<p className="font-semibold mb-1">Advance Booking</p>
|
||||
<p className="opacity-75">Recommended 2-4 weeks in advance</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer-contact" data-section="footer-contact" className="mx-auto px-4 md:px-6">
|
||||
@@ -183,4 +329,4 @@ export default function ContactPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,16 +5,19 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { Camera } from 'lucide-react';
|
||||
import { Camera, Heart, Sparkles, Star } from 'lucide-react';
|
||||
|
||||
export const metadata = {
|
||||
title: "Event Photo Gallery - Paintasy Face and Body Art", description: "Browse our comprehensive gallery of professional face painting and body art work. See real event photos organized by event type: birthday parties, festivals, corporate events, and body art services."
|
||||
};
|
||||
|
||||
export default function GalleryPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Gallery", id: "/gallery" },
|
||||
{ name: "Packages", id: "packages" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Book Event", id: "/booking" },
|
||||
{ name: "Packages", id: "/" },
|
||||
{ name: "About", id: "/" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
@@ -30,10 +33,10 @@ export default function GalleryPage() {
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Packages", href: "/packages" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Packages", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
@@ -50,12 +53,96 @@ export default function GalleryPage() {
|
||||
title: "Service Areas", items: [
|
||||
{ label: "Local Events", href: "/contact" },
|
||||
{ label: "Regional Coverage", href: "/contact" },
|
||||
{ label: "Book Now", href: "/booking" },
|
||||
{ label: "Book Now", href: "/" },
|
||||
{ label: "Get Quote", href: "/contact" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const kidsBirthdayPhotos = [
|
||||
{
|
||||
id: "kids-1", name: "Butterfly Magic", price: "Kids Birthday", variant: "Face Painting", imageSrc: "http://img.b2bpic.net/free-photo/smiley-child-with-butterflies-painted_23-2149357920.jpg?_wi=1", imageAlt: "Child with colorful butterfly face painting"
|
||||
},
|
||||
{
|
||||
id: "kids-2", name: "Superhero Designs", price: "Kids Birthday", variant: "Face Painting", imageSrc: "http://img.b2bpic.net/free-photo/smiling-boy-with-face-paint_23-2148784344.jpg?_wi=1", imageAlt: "Boy with superhero face art design"
|
||||
},
|
||||
{
|
||||
id: "kids-3", name: "Princess Crown Art", price: "Kids Birthday", variant: "Face Painting", imageSrc: "http://img.b2bpic.net/free-photo/girl-with-painted-face-looking-mirror_23-2149159261.jpg?_wi=1", imageAlt: "Princess themed face painting on child"
|
||||
},
|
||||
{
|
||||
id: "kids-4", name: "Animal Faces", price: "Kids Birthday", variant: "Face Painting", imageSrc: "http://img.b2bpic.net/free-photo/cute-child-with-painted-cat_23-2149357944.jpg?_wi=1", imageAlt: "Child with cat face painting"
|
||||
},
|
||||
{
|
||||
id: "kids-5", name: "Rainbow Fantasy", price: "Kids Birthday", variant: "Face Painting", imageSrc: "http://img.b2bpic.net/free-photo/happy-child-with-colorful-face_23-2148784302.jpg?_wi=1", imageAlt: "Child with rainbow colored face paint"
|
||||
},
|
||||
{
|
||||
id: "kids-6", name: "Monster Fun", price: "Kids Birthday", variant: "Face Painting", imageSrc: "http://img.b2bpic.net/free-photo/smiling-boy-with-monster-face-paint_23-2149159223.jpg?_wi=1", imageAlt: "Fun monster themed face painting"
|
||||
},
|
||||
];
|
||||
|
||||
const festivalPhotos = [
|
||||
{
|
||||
id: "festival-1", name: "Glitter Festival Art", price: "Festival Event", variant: "Face Art", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-glitter-face-paint_23-2149159284.jpg?_wi=1", imageAlt: "Woman with glitter festival face art"
|
||||
},
|
||||
{
|
||||
id: "festival-2", name: "Artistic Festival Design", price: "Festival Event", variant: "Face Art", imageSrc: "http://img.b2bpic.net/free-photo/festival-face-paint-design_23-2148338127.jpg?_wi=1", imageAlt: "Artistic face design for festival"
|
||||
},
|
||||
{
|
||||
id: "festival-3", name: "Neon Festival Glow", price: "Festival Event", variant: "Face Art", imageSrc: "http://img.b2bpic.net/free-photo/person-with-neon-face-paint_23-2149357975.jpg?_wi=1", imageAlt: "Neon glow face painting at festival"
|
||||
},
|
||||
{
|
||||
id: "festival-4", name: "Festival Creativity", price: "Festival Event", variant: "Face Art", imageSrc: "http://img.b2bpic.net/free-photo/artistic-face-paint-festival_23-2148784368.jpg?_wi=1", imageAlt: "Creative festival face art design"
|
||||
},
|
||||
{
|
||||
id: "festival-5", name: "Music Festival Art", price: "Festival Event", variant: "Face Art", imageSrc: "http://img.b2bpic.net/free-photo/smiling-girl-with-festival-face-paint_23-2149159306.jpg?_wi=1", imageAlt: "Music festival face painting"
|
||||
},
|
||||
{
|
||||
id: "festival-6", name: "Summer Festival Design", price: "Festival Event", variant: "Face Art", imageSrc: "http://img.b2bpic.net/free-photo/woman-at-summer-festival-with-face-paint_23-2148784395.jpg?_wi=1", imageAlt: "Summer festival face art"
|
||||
},
|
||||
];
|
||||
|
||||
const corporatePhotos = [
|
||||
{
|
||||
id: "corporate-1", name: "Professional Face Art", price: "Corporate Event", variant: "Team Building", imageSrc: "http://img.b2bpic.net/free-photo/professional-face-paint-corporate_23-2148338156.jpg?_wi=1", imageAlt: "Professional corporate team face art"
|
||||
},
|
||||
{
|
||||
id: "corporate-2", name: "Brand Activation Design", price: "Corporate Event", variant: "Marketing Event", imageSrc: "http://img.b2bpic.net/free-photo/corporate-team-with-face-paint_23-2149159327.jpg?_wi=1", imageAlt: "Brand activation face painting design"
|
||||
},
|
||||
{
|
||||
id: "corporate-3", name: "Team Building Art", price: "Corporate Event", variant: "Entertainment", imageSrc: "http://img.b2bpic.net/free-photo/corporate-face-paint-team-event_23-2148784421.jpg?_wi=1", imageAlt: "Corporate team building face art"
|
||||
},
|
||||
{
|
||||
id: "corporate-4", name: "Executive Event Face Art", price: "Corporate Event", variant: "Gala Event", imageSrc: "http://img.b2bpic.net/free-photo/professional-face-design-corporate_23-2149159348.jpg?_wi=1", imageAlt: "Executive gala face art design"
|
||||
},
|
||||
{
|
||||
id: "corporate-5", name: "Company Party Art", price: "Corporate Event", variant: "Celebration", imageSrc: "http://img.b2bpic.net/free-photo/company-party-face-paint_23-2148784448.jpg?_wi=1", imageAlt: "Company party face painting"
|
||||
},
|
||||
{
|
||||
id: "corporate-6", name: "Conference Entertainment", price: "Corporate Event", variant: "Conference Booth", imageSrc: "http://img.b2bpic.net/free-photo/conference-face-paint-art_23-2149159369.jpg?_wi=1", imageAlt: "Conference booth face art entertainment"
|
||||
},
|
||||
];
|
||||
|
||||
const bodyArtPhotos = [
|
||||
{
|
||||
id: "body-1", name: "Artistic Body Painting", price: "Body Art", variant: "Professional Service", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-artistic-body-paint_23-2148338185.jpg?_wi=1", imageAlt: "Artistic body painting design"
|
||||
},
|
||||
{
|
||||
id: "body-2", name: "Creative Body Art", price: "Body Art", variant: "Special Events", imageSrc: "http://img.b2bpic.net/free-photo/creative-body-art-design_23-2149159390.jpg?_wi=1", imageAlt: "Creative body art for special events"
|
||||
},
|
||||
{
|
||||
id: "body-3", name: "Abstract Body Painting", price: "Body Art", variant: "Artistic Expression", imageSrc: "http://img.b2bpic.net/free-photo/abstract-body-paint-art_23-2148784475.jpg?_wi=1", imageAlt: "Abstract body painting artwork"
|
||||
},
|
||||
{
|
||||
id: "body-4", name: "Festival Body Art", price: "Body Art", variant: "Festival Events", imageSrc: "http://img.b2bpic.net/free-photo/festival-body-art-design_23-2149159411.jpg?_wi=1", imageAlt: "Festival body art painting"
|
||||
},
|
||||
{
|
||||
id: "body-5", name: "Temporary Tattoo Art", price: "Body Art", variant: "Temporary Design", imageSrc: "http://img.b2bpic.net/free-photo/temporary-tattoo-body-art_23-2148784502.jpg?_wi=1", imageAlt: "Temporary tattoo body art"
|
||||
},
|
||||
{
|
||||
id: "body-6", name: "Professional Body Design", price: "Body Art", variant: "Custom Artwork", imageSrc: "http://img.b2bpic.net/free-photo/professional-body-art-painting_23-2149159432.jpg?_wi=1", imageAlt: "Professional custom body art design"
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
@@ -78,56 +165,105 @@ export default function GalleryPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery-section" data-section="gallery-section" className="mx-auto px-4 md:px-6">
|
||||
<div id="gallery-kids" data-section="gallery-kids" className="mx-auto px-4 md:px-6 pt-20">
|
||||
<ProductCardFour
|
||||
title="Event Photo Gallery"
|
||||
description="Browse our complete portfolio of real event photos showcasing our face painting and body art work across parties, festivals, corporate events, and special occasions."
|
||||
tag="Portfolio"
|
||||
tagIcon={Camera}
|
||||
title="Kids Birthday Party Face Painting"
|
||||
description="Colorful, playful designs that bring joy to children's celebrations. From butterflies and superheroes to princesses and animals, our face painters create magical moments at birthday parties."
|
||||
tag="Birthday Events"
|
||||
tagIcon={Heart}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
animationType="opacity"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="bento-grid"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
carouselMode="buttons"
|
||||
products={[
|
||||
{
|
||||
id: "event-1", name: "Birthday Party Designs", price: "Kids Celebration", variant: "Face Painting", imageSrc: "http://img.b2bpic.net/free-psd/holi-festival-celebration-instagram-posts_23-2151227255.jpg?_wi=1", imageAlt: "Children with colorful birthday party face painting"},
|
||||
{
|
||||
id: "event-2", name: "Festival Face Art", price: "Creative Expression", variant: "Outdoor Event", imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1", imageAlt: "Professional artist applying festival face art"},
|
||||
{
|
||||
id: "event-3", name: "Professional Body Painting", price: "Artistic Excellence", variant: "Special Event", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=1", imageAlt: "Professional body art from special event"},
|
||||
{
|
||||
id: "event-4", name: "Themed Party Artwork", price: "Custom Themes", variant: "Party Entertainment", imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=1", imageAlt: "Custom themed face painting for party guests"},
|
||||
{
|
||||
id: "event-5", name: "Festival Crowd Service", price: "High Volume", variant: "Festival Event", imageSrc: "http://img.b2bpic.net/free-photo/man-covered-different-colors-holi_23-2148337991.jpg?_wi=1", imageAlt: "Festival attendees enjoying rapid face painting service"},
|
||||
{
|
||||
id: "event-6", name: "Corporate Event Entertainment", price: "Professional Service", variant: "Business Event", imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=1", imageAlt: "Corporate event attendees with professional face painting"},
|
||||
{
|
||||
id: "event-7", name: "Workshop & Tutorial", price: "Educational", variant: "Live Demonstration", 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=1", imageAlt: "Live face painting demonstration and technique"},
|
||||
{
|
||||
id: "event-8", name: "School Event Entertainment", price: "Youth Programs", variant: "School Carnival", imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1", imageAlt: "School event with children enjoying face painting"},
|
||||
]}
|
||||
buttons={[{ text: "Book Your Event", href: "/booking" }]}
|
||||
products={kidsBirthdayPhotos}
|
||||
buttons={[{ text: "Book a Birthday Party", href: "/contact" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Complete photo gallery of events"
|
||||
ariaLabel="Kids birthday party face painting gallery"
|
||||
containerClassName="gap-12"
|
||||
cardNameClassName="text-4xl font-extrabold"
|
||||
cardVariantClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery-contact" data-section="gallery-contact" className="mx-auto px-4 md:px-6">
|
||||
<div id="gallery-festival" data-section="gallery-festival" className="mx-auto px-4 md:px-6 pt-20">
|
||||
<ProductCardFour
|
||||
title="Festival & Outdoor Event Face Art"
|
||||
description="Fast, creative designs perfect for large crowds and outdoor events. Experience our vibrant festival face paintings that capture the energy and excitement of celebrations."
|
||||
tag="Festival Events"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="opacity"
|
||||
useInvertedBackground={true}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
carouselMode="buttons"
|
||||
products={festivalPhotos}
|
||||
buttons={[{ text: "Book for Your Festival", href: "/contact" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Festival and outdoor event face art gallery"
|
||||
containerClassName="gap-12"
|
||||
cardVariantClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery-corporate" data-section="gallery-corporate" className="mx-auto px-4 md:px-6 pt-20">
|
||||
<ProductCardFour
|
||||
title="Corporate & Team Building Events"
|
||||
description="Professional face painting that adds a unique touch to corporate events, brand activations, and team celebrations. Our polished service brings creative entertainment to your company gathering."
|
||||
tag="Corporate Events"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="opacity"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
carouselMode="buttons"
|
||||
products={corporatePhotos}
|
||||
buttons={[{ text: "Plan Your Corporate Event", href: "/contact" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Corporate and team building event gallery"
|
||||
containerClassName="gap-12"
|
||||
cardVariantClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery-body" data-section="gallery-body" className="mx-auto px-4 md:px-6 pt-20">
|
||||
<ProductCardFour
|
||||
title="Body Painting & Artistic Design"
|
||||
description="Professional body art and artistic painting for special occasions. From temporary tattoos to full body designs, our artists create stunning visual masterpieces."
|
||||
tag="Body Art"
|
||||
tagIcon={Camera}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="opacity"
|
||||
useInvertedBackground={true}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
carouselMode="buttons"
|
||||
products={bodyArtPhotos}
|
||||
buttons={[{ text: "Inquire About Body Art Services", href: "/contact" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Body painting and artistic design gallery"
|
||||
containerClassName="gap-12"
|
||||
titleClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-gallery" data-section="contact-gallery" className="mx-auto px-4 md:px-6 pt-20">
|
||||
<ContactText
|
||||
text="Inspired by our gallery? Book Paintasy for your next event and create your own memorable moments. Let us bring creativity and color to your celebration."
|
||||
text="Inspired by our gallery? Ready to book Paintasy for your event? Contact us to discuss your vision and get a custom quote. Let's create an unforgettable experience with professional face painting and body art."
|
||||
animationType="background-highlight"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Book Now", href: "/booking" },
|
||||
{ text: "Get a Quote", href: "/contact" },
|
||||
{ text: "Call Us", href: "tel:+15551234567" },
|
||||
]}
|
||||
ariaLabel="Gallery call-to-action section"
|
||||
ariaLabel="Gallery contact call-to-action"
|
||||
containerClassName="py-16"
|
||||
contentClassName="max-w-3xl mx-auto"
|
||||
textClassName="text-4xl font-extrabold text-center"
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||||
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { Sparkles, DollarSign, Check, Clock, Users, Star, HelpCircle, Zap } from 'lucide-react';
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
||||
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function PackagesPage() {
|
||||
const navItems = [
|
||||
@@ -22,38 +20,39 @@ export default function PackagesPage() {
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
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: "Packages",
|
||||
items: [
|
||||
{ label: "Birthday Packages", href: "#packages" },
|
||||
{ label: "Festival Service", href: "#packages" },
|
||||
{ label: "Corporate Events", href: "#packages" },
|
||||
{ label: "Custom Packages", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
title: "Services",
|
||||
items: [
|
||||
{ label: "All Services", href: "/services" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Packages", href: "/packages" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
title: "Social",
|
||||
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: [
|
||||
{ label: "Local Events", href: "/contact" },
|
||||
{ label: "Regional Coverage", href: "/contact" },
|
||||
{ label: "Book Now", href: "/packages" },
|
||||
{ label: "Get Quote", href: "/contact" },
|
||||
title: "Book Now",
|
||||
items: [
|
||||
{ label: "Request Quote", href: "/contact" },
|
||||
{ label: "Chat with Us", href: "/contact" },
|
||||
{ label: "Call Now", href: "tel:+15551234567" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -73,195 +72,205 @@ export default function PackagesPage() {
|
||||
>
|
||||
<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="hero-packages" data-section="hero-packages" className="mx-auto px-4 md:px-6">
|
||||
<div id="packages-page-hero" data-section="packages-page-hero">
|
||||
<HeroBillboardGallery
|
||||
title="Event Packages & Booking"
|
||||
description="Flexible, transparent pricing for all event types. Choose from our curated packages or customize one to match your specific needs and budget. Professional service, artistic creativity, guaranteed satisfaction."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Transparent Pricing"
|
||||
tagIcon={DollarSign}
|
||||
tagAnimation="slide-up"
|
||||
title="Event Packages & Pricing"
|
||||
description="Flexible, transparent pricing for every type of event. From intimate celebrations to large festivals, we have the perfect package for you."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
buttons={[
|
||||
{ text: "View All Packages", href: "#pricing" },
|
||||
{ text: "Request Custom Quote", href: "/contact" },
|
||||
{
|
||||
text: "Request a Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-woman-wearing-mask_23-2148784326.jpg", imageAlt: "Event package showcase"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=4",
|
||||
imageAlt: "Event face painting packages",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="opacity"
|
||||
ariaLabel="Packages hero section"
|
||||
className="min-h-screen"
|
||||
containerClassName="flex flex-col lg:flex-row items-center justify-between gap-12"
|
||||
titleClassName="text-5xl lg:text-6xl font-extrabold leading-tight"
|
||||
descriptionClassName="text-lg lg:text-xl opacity-90 max-w-2xl"
|
||||
buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8"
|
||||
titleClassName="text-5xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90"
|
||||
ariaLabel="Packages page hero section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing" className="mx-auto px-4 md:px-6">
|
||||
<div id="packages-pricing" data-section="packages-pricing">
|
||||
<PricingCardFive
|
||||
title="Our Event Packages"
|
||||
description="Simple, flexible pricing tailored to your event type and guest count. All packages include professional service and materials."
|
||||
tag="Book Your Package"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
description="Simple, flexible pricing tailored to your event needs. All packages include professional service, artistic creativity, and great customer care."
|
||||
textboxLayout="default"
|
||||
animationType="scale-rotate"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "birthday-basic", tag: "Popular", price: "$150", period: "per hour", description: "Perfect for small birthday celebrations", button: { text: "Book Now", href: "/contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"Up to 15 kids", "Colorful themed designs", "Face painting only", "Basic design themes", "All supplies included"],
|
||||
id: "pkg-birthday-basic",
|
||||
tag: "Great Start",
|
||||
price: "$150",
|
||||
period: "per hour",
|
||||
description: "Perfect for small birthday celebrations",
|
||||
button: {
|
||||
text: "Request Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
featuresTitle: "Includes",
|
||||
features: [
|
||||
"Up to 15 children",
|
||||
"Face painting only",
|
||||
"Colorful themed designs",
|
||||
"Basic design themes",
|
||||
"Professional face paints",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "birthday-deluxe", tag: "Best Value", price: "$200", period: "per 2 hours", description: "Full party entertainment package", button: { text: "Book Now", href: "/contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"Up to 25 kids", "Custom themed designs", "Face & temporary tattoos", "Interactive entertainment", "Setup & cleanup included"],
|
||||
id: "pkg-birthday-deluxe",
|
||||
tag: "Most Popular",
|
||||
price: "$200",
|
||||
period: "per 2 hours",
|
||||
description: "Full party entertainment package",
|
||||
button: {
|
||||
text: "Request Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
featuresTitle: "Includes",
|
||||
features: [
|
||||
"Up to 25 children",
|
||||
"Face painting + tattoos",
|
||||
"Custom themed designs",
|
||||
"Interactive entertainment",
|
||||
"Professional service",
|
||||
"Setup & cleanup",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "festival-event", tag: "Flexible", price: "$250", period: "per 3 hours", description: "Festival and outdoor event service", button: { text: "Book Now", href: "/contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"High-capacity crowd service", "Fast artistic designs", "Setup & teardown included", "Portable station", "Ideal for 50+ attendees"],
|
||||
id: "pkg-birthday-premium",
|
||||
tag: "Best Value",
|
||||
price: "$280",
|
||||
period: "per 3 hours",
|
||||
description: "Premium party entertainment with extra features",
|
||||
button: {
|
||||
text: "Request Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
featuresTitle: "Includes",
|
||||
features: [
|
||||
"Up to 40 guests",
|
||||
"Face & body painting",
|
||||
"Custom character designs",
|
||||
"Interactive entertainment",
|
||||
"Photo opportunities",
|
||||
"Full setup & cleanup",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pkg-festival",
|
||||
tag: "High Volume",
|
||||
price: "$250",
|
||||
period: "per 3 hours",
|
||||
description: "Fast-paced festival and outdoor event service",
|
||||
button: {
|
||||
text: "Request Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
featuresTitle: "Includes",
|
||||
features: [
|
||||
"High-capacity crowds",
|
||||
"Fast artistic designs",
|
||||
"3-5 minute service per person",
|
||||
"Portable station included",
|
||||
"Setup & teardown",
|
||||
"Professional materials",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pkg-corporate",
|
||||
tag: "Professional",
|
||||
price: "$300",
|
||||
period: "per 3 hours",
|
||||
description: "Corporate team building & brand activation",
|
||||
button: {
|
||||
text: "Request Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
featuresTitle: "Includes",
|
||||
features: [
|
||||
"Professional setup",
|
||||
"Branded design options",
|
||||
"Custom artwork",
|
||||
"Corporate polished service",
|
||||
"Photo-ready designs",
|
||||
"Setup & cleanup included",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pkg-custom",
|
||||
tag: "Premium",
|
||||
price: "Custom",
|
||||
period: "consultation",
|
||||
description: "Fully customized package for unique events",
|
||||
button: {
|
||||
text: "Contact Us",
|
||||
href: "/contact",
|
||||
},
|
||||
featuresTitle: "Services Available",
|
||||
features: [
|
||||
"Full day events",
|
||||
"Multiple artists",
|
||||
"Body painting",
|
||||
"Custom artwork",
|
||||
"Event planning",
|
||||
"Special requests welcome",
|
||||
],
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Need Custom Pricing?", href: "/contact" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Pricing packages section"
|
||||
containerClassName="gap-12"
|
||||
textBoxTitleClassName="text-4xl font-extrabold"
|
||||
textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
cardClassName="p-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="package-details" data-section="package-details" className="mx-auto px-4 md:px-6">
|
||||
<FeatureCardTen
|
||||
title="Package Details & Customization"
|
||||
description="Each package can be tailored to your specific event needs. Here's what you can customize."
|
||||
tag="Flexible Options"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "duration", title: "Custom Duration", description: "Need more or less time? We offer flexible hourly bookings. Minimum 1 hour service. Discounts available for 4+ hour bookings. Tell us your event timeline and we'll find the perfect fit.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1", imageAlt: "Face painting time management"},
|
||||
items: [
|
||||
{ icon: Clock, text: "Flexible hour options" },
|
||||
{ icon: Check, text: "Extended booking discounts" },
|
||||
{ icon: Star, text: "Customized timelines" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
id: "crowd-size", title: "Guest Count Options", description: "Whether you're hosting 10 guests or 1,000, we can scale our service. Larger events may require multiple artists. We'll assess your guest count and recommend the right setup for seamless service.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-young-friends-celebrating-new-year_23-2147720468.jpg", imageAlt: "Large event face painting"},
|
||||
items: [
|
||||
{ icon: Users, text: "Small to large events" },
|
||||
{ icon: Check, text: "Multi-artist availability" },
|
||||
{ icon: Zap, text: "Crowd management expertise" },
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
id: "design-themes", title: "Design Themes & Customization", description: "Choose from popular themes or bring your own. Character designs, branded elements, seasonal themes, or completely custom artwork. We work with you to match your event's vibe and create memorable experiences.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=1", imageAlt: "Custom themed face painting designs"},
|
||||
items: [
|
||||
{ icon: Sparkles, text: "Popular theme options" },
|
||||
{ icon: Check, text: "Fully custom designs available" },
|
||||
{ icon: Star, text: "Branded design capability" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Customize Your Package", href: "/contact" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Package details and customization options"
|
||||
containerClassName="gap-12"
|
||||
itemClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq-packages" data-section="faq-packages" className="mx-auto px-4 md:px-6">
|
||||
<FaqBase
|
||||
title="Booking & Packages FAQ"
|
||||
description="Everything you need to know about booking and our package options."
|
||||
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 (50+ guests) or peak seasons (summer, holidays), 4-6 weeks advance booking is ideal. Last-minute bookings may be available depending on our schedule—contact us to check availability."},
|
||||
{
|
||||
id: "faq-2", title: "Can I customize a package?", content: "Absolutely! All our packages are starting points. We can adjust duration, guest count, design themes, and service type to match your exact needs. Custom packages may have different pricing—contact us with your requirements for a personalized quote."},
|
||||
{
|
||||
id: "faq-3", title: "What's your deposit and payment policy?", content: "A 50% non-refundable deposit is required to secure your booking. The remaining balance is due 7 days before your event. We accept credit cards, checks, and digital payments. For large or custom events, we're happy to discuss payment plans."},
|
||||
{
|
||||
id: "faq-4", title: "What if I need to reschedule or cancel?", content: "Cancellations made 2+ weeks before your event receive a full refund minus the deposit. Cancellations within 2 weeks forfeit the deposit. Rescheduling to another date is subject to availability. We understand emergencies happen—contact us to discuss your situation."},
|
||||
{
|
||||
id: "faq-5", title: "Do you offer discounts for bulk bookings?", content: "Yes! We offer discounts for bookings of 4+ hours or multiple events. Large corporate packages (100+ attendees) also qualify for special pricing. Contact us with your details to receive a customized quote."},
|
||||
{
|
||||
id: "faq-6", title: "Are there additional fees (travel, setup, etc.)?", content: "Our quoted rates include artist service, supplies, and standard setup. Travel within 15 miles is included. Venues beyond 15 miles may have a travel fee (typically $25-50 depending on distance). Complex setups or specialty requests may have additional fees—we'll discuss these upfront."},
|
||||
{
|
||||
id: "faq-7", title: "What happens if you need to cancel on us?", content: "In the unlikely event we must cancel, we'll provide full refund and help you find an alternative artist. Our booking confirmation includes liability information and a backup artist reference when possible."},
|
||||
{
|
||||
id: "faq-8", title: "Can you work with my specific event theme?", content: "Yes! We love working with event themes. Share your theme, colors, and design preferences when booking. We can create custom designs, coordinate with your event aesthetic, and even incorporate branding for corporate events."},
|
||||
]}
|
||||
buttons={[{ text: "Book Your Package", href: "/contact" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Booking and packages FAQ section"
|
||||
containerClassName="gap-12"
|
||||
textBoxTitleClassName="text-4xl font-extrabold"
|
||||
textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-packages" data-section="contact-packages" className="mx-auto px-4 md:px-6">
|
||||
<ContactText
|
||||
text="Ready to book your event? Browse our packages, customize one to fit your needs, or request a personalized quote. Let's create a memorable experience for your guests!"
|
||||
animationType="background-highlight"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Request a Quote", href: "/contact" },
|
||||
{ text: "Call Us", href: "tel:+15551234567" },
|
||||
{
|
||||
text: "Schedule Consultation",
|
||||
href: "/contact",
|
||||
},
|
||||
]}
|
||||
ariaLabel="Packages contact call-to-action section"
|
||||
containerClassName="py-16"
|
||||
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"
|
||||
buttonAnimation="blur-reveal"
|
||||
containerClassName="gap-12"
|
||||
cardClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90"
|
||||
ariaLabel="Pricing section with event packages"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer-packages" data-section="footer-packages" className="mx-auto px-4 md:px-6">
|
||||
<div id="packages-cta" data-section="packages-cta">
|
||||
<ContactText
|
||||
text="Don't see your perfect package? We offer fully customized packages for unique events and special requests. Let's create something amazing for your celebration."
|
||||
animationType="background-highlight"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Request Custom Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
]}
|
||||
containerClassName="py-16"
|
||||
textClassName="text-3xl font-extrabold text-center"
|
||||
ariaLabel="Custom packages call-to-action section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="packages-footer" data-section="packages-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"
|
||||
bottomLeftText="© 2024 Paintasy Face and Body Art."
|
||||
bottomRightText="Simple Transparent Pricing"
|
||||
ariaLabel="Packages page footer"
|
||||
containerClassName="gap-12"
|
||||
columnsClassName="grid-cols-2 lg:grid-cols-4"
|
||||
columnTitleClassName="font-extrabold text-lg"
|
||||
columnItemClassName="hover:opacity-70 transition-opacity"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
218
src/app/page.tsx
218
src/app/page.tsx
@@ -13,42 +13,38 @@ import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import Link from 'next/link';
|
||||
import { Sparkles, Palette, Heart, Smile, Zap, Music, Briefcase, Target, Users, Star, DollarSign, Camera, HelpCircle, Award } from 'lucide-react';
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Paintasy Face and Body Art - Professional Face Painting & Body Art Services", description: "Professional face painting and body art services for kids parties, festivals, corporate events, and weddings. Expert face artists, safe hypoallergenic paints, custom designs. Book your creative entertainment today.", keywords: "face painting, body art, kids face painting, festival face painting, corporate events, party entertainment, professional face painter, body painting, face art, event entertainment", openGraph: {
|
||||
title: "Paintasy Face and Body Art - Professional Face Painting Services", description: "Transform your event with professional face painting and body art. Serving kids parties, festivals, corporate events, and special occasions.", type: "website"},
|
||||
twitter: {
|
||||
card: "summary_large_image", title: "Paintasy Face and Body Art", description: "Professional face painting & body art for events - kids parties, festivals, corporate events"},
|
||||
};
|
||||
export const metadata = {
|
||||
title: "Paintasy Face and Body Art - Professional Face Painting & Body Art Services", description: "Professional face painting and body art services for kids parties, festivals, and corporate events. Expert face painters specializing in creative designs. Book your event today!", keywords: "face painting, body art, face painter, kids face painting, festival face painting, party entertainment, face design, professional face painter"};
|
||||
|
||||
export default function HomePage() {
|
||||
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: "Booking", id: "/booking" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
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" },
|
||||
{ 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: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Gallery", href: "#gallery" },
|
||||
{ label: "Packages", href: "#packages" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "About Us", href: "#about-home" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Packages", href: "#packages-home" },
|
||||
{ label: "FAQ", href: "#faq-home" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -62,10 +58,10 @@ export default function HomePage() {
|
||||
},
|
||||
{
|
||||
title: "Service Areas", items: [
|
||||
{ label: "Local Events", href: "#contact" },
|
||||
{ label: "Regional Coverage", href: "#contact" },
|
||||
{ label: "Book Now", href: "#packages" },
|
||||
{ label: "Get Quote", href: "#contact" },
|
||||
{ label: "Local Events", href: "/contact" },
|
||||
{ label: "Regional Coverage", href: "/contact" },
|
||||
{ label: "Book Now", href: "/booking" },
|
||||
{ label: "Get Quote", href: "/contact" },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -92,17 +88,17 @@ export default function HomePage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="hero-home" className="mx-auto px-4 md:px-6">
|
||||
<div id="hero-home" data-section="hero-home" className="mx-auto px-4 md:px-6">
|
||||
<HeroBillboardGallery
|
||||
title="Paintasy Face and Body Art"
|
||||
description="Professional face painting and body art for parties, festivals, corporate events, and special occasions. Transform your event with creativity and color. Expert artists, hypoallergenic paints, custom designs for all occasions."
|
||||
description="Professional face painting and body art for parties, festivals, corporate events, and special occasions. Transform your event with creativity and color."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Creative Entertainment"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Book Your Event", href: "#packages" },
|
||||
{ text: "View Our Gallery", href: "#gallery" },
|
||||
{ text: "Book Your Event", href: "/booking" },
|
||||
{ text: "View Our Gallery", href: "/gallery" },
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
mediaItems={[
|
||||
@@ -110,24 +106,24 @@ export default function HomePage() {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-woman-wearing-mask_23-2148784326.jpg", imageAlt: "Professional face painting at event"},
|
||||
]}
|
||||
mediaAnimation="opacity"
|
||||
ariaLabel="Hero section showcasing professional face painting services with portfolio images"
|
||||
ariaLabel="Hero section with face painting showcase"
|
||||
className="min-h-screen"
|
||||
containerClassName="flex flex-col lg:flex-row items-center justify-between gap-12"
|
||||
titleClassName="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight"
|
||||
descriptionClassName="text-base sm:text-lg lg:text-xl opacity-90 max-w-2xl"
|
||||
buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8 w-full sm:w-auto"
|
||||
titleClassName="text-5xl lg:text-6xl font-extrabold leading-tight"
|
||||
descriptionClassName="text-lg lg:text-xl opacity-90 max-w-2xl"
|
||||
buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about-home" className="mx-auto px-4 md:px-6">
|
||||
<div id="about-home" data-section="about-home" className="mx-auto px-4 md:px-6">
|
||||
<MetricSplitMediaAbout
|
||||
title="About Paintasy Face and Body Art"
|
||||
description="Paintasy brings creativity and color to events with professional face painting and body art services. We've been transforming celebrations and creating magical moments for hundreds of happy clients. Our artists are trained professionals dedicated to delivering exceptional service, vibrant designs, and memorable experiences across all event types."
|
||||
description="Paintasy brings creativity and color to events with professional face painting and body art. We've been transforming celebrations and creating magical moments for hundreds of happy clients. Our artists are trained professionals dedicated to delivering exceptional service, vibrant designs, and memorable experiences."
|
||||
tag="Professional Artists"
|
||||
tagIcon={Palette}
|
||||
tagAnimation="slide-up"
|
||||
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=1"
|
||||
imageAlt="Professional face painter creating custom artwork designs"
|
||||
imageAlt="Professional face painter creating art"
|
||||
mediaAnimation="blur-reveal"
|
||||
metrics={[
|
||||
{ value: "500+", title: "Happy Events" },
|
||||
@@ -137,18 +133,18 @@ export default function HomePage() {
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="About section with company information and professional credentials"
|
||||
ariaLabel="About section with company information"
|
||||
containerClassName="gap-12"
|
||||
titleClassName="text-3xl sm:text-4xl font-extrabold"
|
||||
descriptionClassName="text-base sm:text-lg opacity-90 max-w-2xl"
|
||||
titleClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90 max-w-2xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services-home" className="mx-auto px-4 md:px-6">
|
||||
<div id="services-home" data-section="services-home" className="mx-auto px-4 md:px-6">
|
||||
<FeatureCardTen
|
||||
title="Our Face Painting & Body Art Services"
|
||||
description="Professional face painting and body art tailored for every occasion. From intimate birthday parties to large festival events, we deliver creativity and joy. Custom designs available for all service types."
|
||||
tag="Premium Services"
|
||||
title="Our Services"
|
||||
description="Professional face painting and body art tailored for every occasion. From intimate birthday parties to large festival events, we deliver creativity and joy."
|
||||
tag="Services"
|
||||
tagIcon={Palette}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
@@ -156,8 +152,8 @@ export default function HomePage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "kids-party", title: "Kids Party Face Painting", description: "Fun, colorful designs perfect for birthday celebrations and children's events. Butterflies, superheroes, animals, and princesses crafted with safe, professional-grade products.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1", imageAlt: "Colorful kids party face painting designs - butterflies, animals, and characters"},
|
||||
id: "kids-party", title: "Kids Party Face Painting", description: "Fun, colorful designs perfect for birthday celebrations. Butterflies, superheroes, animals, and princesses.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1", imageAlt: "Kids party face painting designs"},
|
||||
items: [
|
||||
{ icon: Sparkles, text: "Colorful & playful designs" },
|
||||
{ icon: Heart, text: "Safe, child-friendly products" },
|
||||
@@ -166,8 +162,8 @@ export default function HomePage() {
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
id: "festival", title: "Festival Face Art", description: "Fast, creative designs perfect for large crowds and outdoor events. Artistic flair meets quick service for high-volume event entertainment.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1", imageAlt: "Festival face painting artwork showcasing fast, artistic designs"},
|
||||
id: "festival", title: "Festival Face Art", description: "Fast, creative designs perfect for large crowds and outdoor events. Artistic flair meets quick service.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1", imageAlt: "Festival face painting artwork"},
|
||||
items: [
|
||||
{ icon: Zap, text: "Fast service for crowds" },
|
||||
{ icon: Star, text: "Creative artistic designs" },
|
||||
@@ -176,8 +172,8 @@ export default function HomePage() {
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
id: "corporate", title: "Corporate Event Entertainment", description: "Professional face painting for company parties, brand activations, and team celebrations. Branded designs and custom theming available for corporate clients.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=1", imageAlt: "Corporate event entertainment and professional face painting service"},
|
||||
id: "corporate", title: "Corporate Event Entertainment", description: "Professional face painting for company parties, brand activations, and team celebrations.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=1", imageAlt: "Corporate event face painting"},
|
||||
items: [
|
||||
{ icon: Briefcase, text: "Professional & polished service" },
|
||||
{ icon: Target, text: "Branded design options available" },
|
||||
@@ -186,19 +182,19 @@ export default function HomePage() {
|
||||
reverse: false,
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Explore All Services", href: "#services" }]}
|
||||
buttons={[{ text: "Explore All Services", href: "/services" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Services section showcasing professional face painting and body art offerings"
|
||||
ariaLabel="Services section showcasing offerings"
|
||||
containerClassName="gap-12"
|
||||
itemClassName="text-3xl sm:text-4xl font-extrabold"
|
||||
descriptionClassName="text-base sm:text-lg opacity-90 max-w-3xl"
|
||||
itemClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="packages" data-section="packages-home" className="mx-auto px-4 md:px-6">
|
||||
<div id="packages-home" data-section="packages-home" className="mx-auto px-4 md:px-6">
|
||||
<PricingCardFive
|
||||
title="Event Packages & Pricing"
|
||||
description="Simple, flexible face painting pricing for parties, festivals, and corporate events. Each package includes professional service and artistic creativity. Transparent rates with no hidden fees."
|
||||
title="Event Packages"
|
||||
description="Simple, flexible pricing for parties, festivals, and corporate events. Each package includes professional service and artistic creativity."
|
||||
tag="Transparent Pricing"
|
||||
tagIcon={DollarSign}
|
||||
tagAnimation="slide-up"
|
||||
@@ -207,38 +203,34 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "birthday-basic", tag: "Popular", tagIcon: Star,
|
||||
price: "$150", period: "per hour", description: "Perfect for small birthday celebrations and intimate events", button: { text: "Request Quote", href: "#contact" },
|
||||
id: "birthday-basic", tag: "Popular", price: "$150", period: "per hour", description: "Perfect for small birthday celebrations", button: { text: "Request Quote", href: "/contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"Up to 15 kids", "Colorful themed designs", "Face painting only", "Basic design themes"],
|
||||
},
|
||||
{
|
||||
id: "birthday-deluxe", tag: "Best Value", tagIcon: Heart,
|
||||
price: "$200", period: "per 2 hours", description: "Full party entertainment package with extended coverage", button: { text: "Request Quote", href: "#contact" },
|
||||
id: "birthday-deluxe", tag: "Best Value", tagIcon: Heart, price: "$200", period: "2 hours - Best Value", description: "Full party entertainment package", button: { text: "Request Quote", href: "/contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"Up to 25 kids", "Custom themed designs", "Face & temporary tattoos", "Interactive entertainment"],
|
||||
},
|
||||
{
|
||||
id: "festival-event", tag: "Flexible", tagIcon: Sparkles,
|
||||
price: "$250", period: "per 3 hours", description: "Festival and outdoor event service with high-volume capacity", button: { text: "Request Quote", href: "#contact" },
|
||||
id: "festival-event", tag: "Flexible", price: "$250", period: "per 3 hours", description: "Festival and outdoor event service", button: { text: "Request Quote", href: "/contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"High-capacity crowd service", "Fast artistic designs", "Setup & teardown included", "Portable station"],
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "View All Packages", href: "#packages" }]}
|
||||
buttons={[{ text: "View All Packages", href: "#packages-home" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Pricing section with face painting package options and rates"
|
||||
ariaLabel="Pricing section with package options"
|
||||
containerClassName="gap-12"
|
||||
textBoxTitleClassName="text-3xl sm:text-4xl font-extrabold"
|
||||
textBoxDescriptionClassName="text-base sm:text-lg opacity-90 max-w-3xl"
|
||||
cardClassName="p-6 sm:p-8"
|
||||
cardClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials-home" className="mx-auto px-4 md:px-6">
|
||||
<div id="testimonials-home" data-section="testimonials-home" className="mx-auto px-4 md:px-6">
|
||||
<TestimonialCardTwo
|
||||
title="What Our Clients Say"
|
||||
description="Real testimonials from happy clients who've booked Paintasy face and body art services for their events."
|
||||
description="Real testimonials from happy clients who've booked Paintasy for their events."
|
||||
tag="Client Reviews"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
@@ -248,38 +240,38 @@ export default function HomePage() {
|
||||
carouselMode="buttons"
|
||||
testimonials={[
|
||||
{
|
||||
id: "testimonial-1", name: "Sarah Johnson", role: "Parent, Birthday Party Host", testimonial: "Paintasy was absolutely amazing! The kids loved their face paintings and the artist was so professional and friendly. Our daughter's birthday was unforgettable!", imageSrc: "http://img.b2bpic.net/free-photo/family-portrait-surprised-father-has-yellow-face-from-paints-cheerful-two-daughters-shows-palms-dirty-with-watercolours-paint-picture-pastime-isolated-lilac-wall-this-is-art_273609-26128.jpg?_wi=1", imageAlt: "Happy children enjoying professional face painting at birthday party", icon: Heart,
|
||||
id: "testimonial-1", name: "Sarah Johnson", role: "Parent, Birthday Party Host", testimonial: "Paintasy was absolutely amazing! The kids loved their face paintings and the artist was so professional and friendly. Our daughter's birthday was unforgettable!", imageSrc: "http://img.b2bpic.net/free-photo/family-portrait-surprised-father-has-yellow-face-from-paints-cheerful-two-daughters-shows-palms-dirty-with-watercolours-paint-picture-pastime-isolated-lilac-wall-this-is-art_273609-26128.jpg?_wi=1", imageAlt: "Happy children at birthday party", icon: Heart,
|
||||
},
|
||||
{
|
||||
id: "testimonial-2", name: "Marcus Chen", role: "Festival Organizer", testimonial: "We hired Paintasy for our community festival and they were fantastic. Quick service, beautiful designs, and the crowd loved it. Booking them again next year!", imageSrc: "http://img.b2bpic.net/free-photo/man-covered-different-colors-holi_23-2148337991.jpg?_wi=1", imageAlt: "Festival attendees enjoying professional face painting services", icon: Smile,
|
||||
id: "testimonial-2", name: "Marcus Chen", role: "Festival Organizer", testimonial: "We hired Paintasy for our community festival and they were fantastic. Quick service, beautiful designs, and the crowd loved it. Booking them again next year!", imageSrc: "http://img.b2bpic.net/free-photo/man-covered-different-colors-holi_23-2148337991.jpg?_wi=1", imageAlt: "Festival attendees enjoying face painting", icon: Smile,
|
||||
},
|
||||
{
|
||||
id: "testimonial-3", name: "Emily Rodriguez", role: "Corporate Event Planner", testimonial: "Professional, creative, and reliable. Paintasy added the perfect touch of fun to our corporate team building event. Highly recommended!", imageSrc: "http://img.b2bpic.net/free-photo/group-young-friends-celebrating-new-year_23-2147720468.jpg", imageAlt: "Corporate event attendees enjoying entertainment and face art services", icon: Award,
|
||||
id: "testimonial-3", name: "Emily Rodriguez", role: "Corporate Event Planner", testimonial: "Professional, creative, and reliable. Paintasy added the perfect touch of fun to our corporate team building event. Highly recommended!", imageSrc: "http://img.b2bpic.net/free-photo/group-young-friends-celebrating-new-year_23-2147720468.jpg", imageAlt: "Corporate event attendees with face art", icon: Award,
|
||||
},
|
||||
{
|
||||
id: "testimonial-4", name: "David Kim", role: "School Principal", testimonial: "The face painting station at our school carnival was the highlight! Kids had so much fun, and the artist was fantastic with them. Thank you!", imageSrc: "http://img.b2bpic.net/free-photo/family-portrait-surprised-father-has-yellow-face-from-paints-cheerful-two-daughters-shows-palms-dirty-with-watercolours-paint-picture-pastime-isolated-lilac-wall-this-is-art_273609-26128.jpg?_wi=2", imageAlt: "Children enjoying face painting at school carnival event", icon: Sparkles,
|
||||
id: "testimonial-4", name: "David Kim", role: "School Principal", testimonial: "The face painting station at our school carnival was the highlight! Kids had so much fun, and the artist was fantastic with them. Thank you!", imageSrc: "http://img.b2bpic.net/free-photo/family-portrait-surprised-father-has-yellow-face-from-paints-cheerful-two-daughters-shows-palms-dirty-with-watercolours-paint-picture-pastime-isolated-lilac-wall-this-is-art_273609-26128.jpg?_wi=2", imageAlt: "Children enjoying school event face painting", icon: Sparkles,
|
||||
},
|
||||
{
|
||||
id: "testimonial-5", name: "Jessica Martinez", role: "Wedding Planner", testimonial: "Added Paintasy as entertainment for a children's wedding reception. The kids were thrilled and parents appreciated the care taken with hygiene and safety.", imageSrc: "http://img.b2bpic.net/free-photo/family-portrait-surprised-father-has-yellow-face-from-paints-cheerful-two-daughters-shows-palms-dirty-with-watercolours-paint-picture-pastime-isolated-lilac-wall-this-is-art_273609-26128.jpg?_wi=3", imageAlt: "Professional face painting service at children's wedding event", icon: Heart,
|
||||
id: "testimonial-5", name: "Jessica Martinez", role: "Wedding Planner", testimonial: "Added Paintasy as entertainment for a children's wedding reception. The kids were thrilled and parents appreciated the care taken with hygiene and safety.", imageSrc: "http://img.b2bpic.net/free-photo/family-portrait-surprised-father-has-yellow-face-from-paints-cheerful-two-daughters-shows-palms-dirty-with-watercolours-paint-picture-pastime-isolated-lilac-wall-this-is-art_273609-26128.jpg?_wi=3", imageAlt: "Children's event face painting service", icon: Heart,
|
||||
},
|
||||
{
|
||||
id: "testimonial-6", name: "Thomas Wilson", role: "Event Manager", testimonial: "From consultation to execution, Paintasy was excellent. They delivered exactly what we envisioned for our community event. A+", imageSrc: "http://img.b2bpic.net/free-photo/man-covered-different-colors-holi_23-2148337991.jpg?_wi=2", imageAlt: "Community event face painting and entertainment service", icon: Star,
|
||||
id: "testimonial-6", name: "Thomas Wilson", role: "Event Manager", testimonial: "From consultation to execution, Paintasy was excellent. They delivered exactly what we envisioned for our community event. A+", imageSrc: "http://img.b2bpic.net/free-photo/man-covered-different-colors-holi_23-2148337991.jpg?_wi=2", imageAlt: "Community event face painting", icon: Star,
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Book Now", href: "#packages" }]}
|
||||
buttons={[{ text: "Book Now", href: "/booking" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Client testimonials and reviews section for face painting services"
|
||||
ariaLabel="Client testimonials section"
|
||||
containerClassName="gap-12"
|
||||
textBoxTitleClassName="text-3xl sm:text-4xl font-extrabold"
|
||||
textBoxDescriptionClassName="text-base sm:text-lg opacity-90 max-w-3xl"
|
||||
roleClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery-preview-home" className="mx-auto px-4 md:px-6">
|
||||
<div id="gallery-preview-home" data-section="gallery-preview-home" className="mx-auto px-4 md:px-6">
|
||||
<ProductCardFour
|
||||
title="Photo Gallery & Portfolio"
|
||||
description="Real photos from our professional face painting and body art events. Browse our portfolio of creative designs and happy clients across all event types."
|
||||
tag="Portfolio Showcase"
|
||||
title="Photo Gallery Showcase"
|
||||
description="Real photos from our events and happy clients. Browse our portfolio of face painting and body art work."
|
||||
tag="Portfolio"
|
||||
tagIcon={Camera}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
@@ -289,27 +281,27 @@ export default function HomePage() {
|
||||
carouselMode="buttons"
|
||||
products={[
|
||||
{
|
||||
id: "gallery-1", name: "Kids Face Painting", price: "Colorful Designs", variant: "Birthday Parties", imageSrc: "http://img.b2bpic.net/free-psd/holi-festival-celebration-instagram-posts_23-2151227255.jpg?_wi=1", imageAlt: "Collection of professional kids face painting designs and artwork"},
|
||||
id: "gallery-1", name: "Kids Face Painting", price: "Colorful Designs", variant: "Birthday Parties", imageSrc: "http://img.b2bpic.net/free-psd/holi-festival-celebration-instagram-posts_23-2151227255.jpg?_wi=1", imageAlt: "Collection of kids face painting designs"},
|
||||
{
|
||||
id: "gallery-2", name: "Festival Face Art", price: "Creative Artistry", variant: "Outdoor Events", imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1", imageAlt: "Professional festival face painting artwork and artistic designs"},
|
||||
id: "gallery-2", name: "Festival Face Art", price: "Creative Artistry", variant: "Outdoor Events", imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1", imageAlt: "Festival face painting artwork"},
|
||||
{
|
||||
id: "gallery-3", name: "Body Painting Art", price: "Professional Service", variant: "Special Events", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=1", imageAlt: "Professional body art photography and creative body painting services"},
|
||||
id: "gallery-3", name: "Body Painting Art", price: "Professional Service", variant: "Special Events", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=1", imageAlt: "Professional body art photography"},
|
||||
{
|
||||
id: "gallery-4", name: "Custom Designs", price: "Personalized Art", variant: "Themed Events", imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=1", imageAlt: "Custom themed face painting designs for special events"},
|
||||
id: "gallery-4", name: "Custom Designs", price: "Personalized Art", variant: "Themed Events", imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=1", imageAlt: "Custom themed face painting designs"},
|
||||
]}
|
||||
buttons={[{ text: "View Full Gallery", href: "#gallery" }]}
|
||||
buttons={[{ text: "View Full Gallery", href: "/gallery" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Photo gallery preview section showcasing professional face painting portfolio"
|
||||
ariaLabel="Photo gallery preview section"
|
||||
containerClassName="gap-12"
|
||||
cardNameClassName="text-3xl sm:text-4xl font-extrabold"
|
||||
descriptionClassName="text-base sm:text-lg opacity-90 max-w-3xl"
|
||||
cardVariantClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq-home" className="mx-auto px-4 md:px-6">
|
||||
<div id="faq-home" data-section="faq-home" className="mx-auto px-4 md:px-6">
|
||||
<FaqBase
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about booking Paintasy professional face and body art services for your event."
|
||||
description="Everything you need to know about booking Paintasy for your event."
|
||||
tag="FAQ"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
@@ -320,55 +312,55 @@ export default function HomePage() {
|
||||
showCard={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq-1", title: "How far in advance should I book face painting services?", content: "We recommend booking at least 2-3 weeks in advance to secure your preferred date and time for face painting services. For large events or peak seasons, 4-6 weeks advance booking is ideal. Last-minute bookings may be available depending on our artist schedule."},
|
||||
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 and sensitive skin?", content: "Absolutely! We use only professional-grade, hypoallergenic face paints that are non-toxic and dermatologist-tested. All products are safe for sensitive skin and children. We also practice strict hygiene protocols, using clean brushes and sanitized application tools for each client to ensure safety and comfort."},
|
||||
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 professional face painting take per person?", content: "Simple designs typically take 3-5 minutes, while more detailed or custom face painting designs take 8-12 minutes. At festivals, we optimize for speed without sacrificing quality. For birthday parties and events, we allow a bit more time for custom designs and interactions with children."},
|
||||
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 to face paint?", content: "We have hypoallergenic face painting options available for sensitive skin. Please inform us of any allergies when booking your event. We're always happy to discuss alternative products or perform test patches before proceeding with full face painting service."},
|
||||
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 create custom face painting designs for themed events?", content: "Yes! We specialize in custom face painting designs for themed parties and corporate events. Please provide theme details or reference images when booking your face painting service. There may be a small additional fee for very complex custom designs."},
|
||||
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 face painting 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 in your event package."},
|
||||
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: "Book Your Event", href: "#packages" }]}
|
||||
buttons={[{ text: "Book Your Event", href: "/booking" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="FAQ section with common questions about face painting services"
|
||||
ariaLabel="FAQ section with common questions"
|
||||
containerClassName="gap-12"
|
||||
textBoxTitleClassName="text-3xl sm:text-4xl font-extrabold"
|
||||
textBoxDescriptionClassName="text-base sm:text-lg opacity-90 max-w-3xl"
|
||||
textBoxTitleClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact-home" className="mx-auto px-4 md:px-6">
|
||||
<div id="contact-home" data-section="contact-home" className="mx-auto px-4 md:px-6">
|
||||
<ContactText
|
||||
text="Ready to add magic to your event? Get in touch with Paintasy Face and Body Art. We'd love to discuss your event and create an unforgettable experience for your guests with professional face painting and body art services."
|
||||
text="Ready to add magic to your event? Get in touch with Paintasy Face and Body Art. Professional face painters ready to deliver exceptional entertainment and creative designs. We'd love to discuss your event and create an unforgettable experience for your guests."
|
||||
animationType="background-highlight"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Request a Quote", href: "#contact" },
|
||||
{ text: "Request a Quote", href: "/contact" },
|
||||
{ text: "Call Us", href: "tel:+15551234567" },
|
||||
]}
|
||||
ariaLabel="Contact call-to-action section for booking face painting services"
|
||||
containerClassName="py-12 sm:py-16"
|
||||
ariaLabel="Contact call-to-action section"
|
||||
containerClassName="py-16"
|
||||
contentClassName="max-w-3xl mx-auto"
|
||||
textClassName="text-3xl sm:text-4xl font-extrabold text-center"
|
||||
buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8 w-full sm:w-auto"
|
||||
textClassName="text-4xl font-extrabold text-center"
|
||||
buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer-home" className="mx-auto px-4 md:px-6">
|
||||
<div id="footer-home" data-section="footer-home" 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 navigation links and contact information"
|
||||
ariaLabel="Site footer with links"
|
||||
containerClassName="gap-12"
|
||||
columnsClassName="grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8"
|
||||
columnTitleClassName="font-extrabold text-lg text-sm sm:text-base lg:text-lg"
|
||||
columnItemClassName="text-sm sm:text-base hover:opacity-70 transition-opacity"
|
||||
columnsClassName="grid-cols-2 lg:grid-cols-4"
|
||||
columnTitleClassName="font-extrabold text-lg"
|
||||
columnItemClassName="hover:opacity-70 transition-opacity"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
@@ -4,36 +4,41 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
||||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { Sparkles, Palette, Heart, Smile, Zap, Star, Music, Target, Users, Briefcase, HelpCircle, DollarSign } from 'lucide-react';
|
||||
import { Sparkles, Palette, Heart, Smile, Zap, Music, Briefcase, Target, Users, Star, DollarSign, HelpCircle, Camera } from 'lucide-react';
|
||||
|
||||
export const metadata = {
|
||||
title: "Services - Paintasy Face and Body Art | Professional Face Painting", description: "Explore our professional face painting and body art services for parties, festivals, corporate events, and special occasions. Detailed service offerings and transparent pricing.", keywords: "face painting services, body art, face painter for hire, professional face painting, party entertainment, event services"
|
||||
};
|
||||
|
||||
export default function ServicesPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Home", id: "/" },
|
||||
{ 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: "About", id: "#about-home" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
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" },
|
||||
{ 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: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Packages", href: "/packages" },
|
||||
{ label: "Packages", href: "#packages" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
@@ -51,7 +56,7 @@ export default function ServicesPage() {
|
||||
title: "Service Areas", items: [
|
||||
{ label: "Local Events", href: "/contact" },
|
||||
{ label: "Regional Coverage", href: "/contact" },
|
||||
{ label: "Book Now", href: "/packages" },
|
||||
{ label: "Book Now", href: "#pricing" },
|
||||
{ label: "Get Quote", href: "/contact" },
|
||||
],
|
||||
},
|
||||
@@ -82,22 +87,23 @@ export default function ServicesPage() {
|
||||
<div id="hero-services" data-section="hero-services" className="mx-auto px-4 md:px-6">
|
||||
<HeroBillboardGallery
|
||||
title="Our Professional Services"
|
||||
description="Discover the full range of creative face painting and body art services Paintasy offers. From intimate birthday celebrations to large-scale festival entertainment, we bring artistry, professionalism, and joy to every event."
|
||||
description="Comprehensive face painting and body art solutions for every event type. From intimate celebrations to large-scale festivals, we bring creativity, professionalism, and unforgettable moments to your occasion."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Creative Entertainment"
|
||||
tag="Service Excellence"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Book Your Event", href: "/packages" },
|
||||
{ text: "View Packages", href: "/packages" },
|
||||
{ text: "Book Your Event", href: "#pricing" },
|
||||
{ text: "View Pricing", href: "#pricing" },
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-woman-wearing-mask_23-2148784326.jpg", imageAlt: "Professional face painting service showcase"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-woman-wearing-mask_23-2148784326.jpg", imageAlt: "Professional face painting service"
|
||||
},
|
||||
]}
|
||||
mediaAnimation="opacity"
|
||||
ariaLabel="Services hero section"
|
||||
ariaLabel="Services page hero section"
|
||||
className="min-h-screen"
|
||||
containerClassName="flex flex-col lg:flex-row items-center justify-between gap-12"
|
||||
titleClassName="text-5xl lg:text-6xl font-extrabold leading-tight"
|
||||
@@ -106,11 +112,11 @@ export default function ServicesPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services-detail" data-section="services-detail" className="mx-auto px-4 md:px-6">
|
||||
<div id="services" data-section="services" className="mx-auto px-4 md:px-6">
|
||||
<FeatureCardTen
|
||||
title="Complete Service Menu"
|
||||
description="Professional face painting and body art services tailored for every occasion and event type."
|
||||
tag="Services Offered"
|
||||
title="Detailed Service Offerings"
|
||||
description="Each service is tailored to create the perfect experience for your event. We combine professional expertise with creative artistry to deliver memorable entertainment."
|
||||
tag="What We Offer"
|
||||
tagIcon={Palette}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
@@ -118,37 +124,73 @@ export default function ServicesPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "kids-party", title: "Kids Party Face Painting", description: "Fun and colorful face painting designs perfect for birthday celebrations, school events, and children's parties. Our artists specialize in creating magical moments for young guests with playful, age-appropriate designs.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1", imageAlt: "Kids party face painting designs"},
|
||||
id: "kids-party", title: "Kids Party Face Painting", description: "Bring joy and wonder to birthday celebrations with vibrant, imaginative face painting. Perfect for children's parties, we offer a wide range of designs that delight young guests and create lasting memories.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1", imageAlt: "Kids party face painting designs"
|
||||
},
|
||||
items: [
|
||||
{ icon: Sparkles, text: "Colorful & playful designs" },
|
||||
{ icon: Heart, text: "Safe, child-friendly products" },
|
||||
{ icon: Smile, text: "Quick turnaround per child" },
|
||||
{ icon: Sparkles, text: "Butterflies, superheroes, animals & princesses" },
|
||||
{ icon: Heart, text: "Safe, hypoallergenic, non-toxic paints" },
|
||||
{ icon: Smile, text: "3-5 minutes per child for standard designs" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
id: "festival", title: "Festival Face Art", description: "Fast, creative, and impressive face painting designs perfect for large crowds and outdoor festival settings. We combine artistic flair with efficient service to keep lines moving while maintaining quality.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1", imageAlt: "Festival face painting artwork"},
|
||||
id: "festival", title: "Festival Face Art", description: "Fast, high-quality face painting for outdoor festivals and large gatherings. We specialize in quick turnarounds without compromising artistic quality, perfect for managing crowds at music festivals, carnivals, and community events.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1", imageAlt: "Festival face painting artwork"
|
||||
},
|
||||
items: [
|
||||
{ icon: Zap, text: "Fast service for crowds" },
|
||||
{ icon: Star, text: "Creative artistic designs" },
|
||||
{ icon: Music, text: "Perfect for music & outdoor events" },
|
||||
{ icon: Zap, text: "Optimized for high-volume crowd service" },
|
||||
{ icon: Star, text: "Creative designs with quick execution" },
|
||||
{ icon: Music, text: "Perfect for outdoor & music events" },
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
id: "corporate", title: "Corporate Event Entertainment", description: "Professional face painting services for company parties, brand activations, team building events, and corporate celebrations. We deliver polished service with optional branded design options.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=1", imageAlt: "Corporate event face painting"},
|
||||
id: "corporate", title: "Corporate Event Entertainment", description: "Professional face painting services designed for corporate team building, company parties, and brand activations. We bring a touch of creativity and fun while maintaining professional standards throughout the event.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=1", imageAlt: "Corporate event face painting"
|
||||
},
|
||||
items: [
|
||||
{ icon: Briefcase, text: "Professional & polished service" },
|
||||
{ icon: Target, text: "Branded design options available" },
|
||||
{ icon: Users, text: "Great for team building" },
|
||||
{ icon: Briefcase, text: "Professional presentation & service" },
|
||||
{ icon: Target, text: "Branded designs & customized themes" },
|
||||
{ icon: Users, text: "Excellent for team building activities" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
id: "special-occasions", title: "Special Occasions & Custom Designs", description: "Whether it's a wedding, anniversary, or themed celebration, we create custom face and body art that matches your vision. Our artists work closely with you to design unique pieces that make your special day unforgettable.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=1", imageAlt: "Custom body art designs"
|
||||
},
|
||||
items: [
|
||||
{ icon: Heart, text: "Personalized & themed designs" },
|
||||
{ icon: Palette, text: "Consultation to perfect execution" },
|
||||
{ icon: Star, text: "Unforgettable creative experiences" },
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
id: "body-painting", title: "Professional Body Painting", description: "Full-body artistic painting for special events, photoshoots, and performances. Our experienced artists create stunning visual art on the human canvas, from abstract designs to character transformations.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=1", imageAlt: "Professional body art photography"
|
||||
},
|
||||
items: [
|
||||
{ icon: Star, text: "Intricate artistic designs" },
|
||||
{ icon: Camera, text: "Perfect for photoshoots & events" },
|
||||
{ icon: Sparkles, text: "Professional-grade materials used" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
id: "temporary-tattoos", title: "Temporary Tattoos & Add-ons", description: "Enhance your face painting experience with high-quality temporary tattoos, glitter designs, and special effects. Perfect for festivals and events where guests want extra flair and personalization.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/holi-festival-celebration-instagram-posts_23-2151227255.jpg?_wi=1", imageAlt: "Temporary tattoo designs"
|
||||
},
|
||||
items: [
|
||||
{ icon: Zap, text: "High-quality temporary tattoos" },
|
||||
{ icon: Sparkles, text: "Glitter, gems & special effects" },
|
||||
{ icon: Heart, text: "Custom temporary tattoo designs available" },
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Request a Quote", href: "/contact" }]}
|
||||
buttons={[{ text: "View Pricing", href: "#pricing" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Detailed services section"
|
||||
containerClassName="gap-12"
|
||||
@@ -157,10 +199,62 @@ export default function ServicesPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq-services" data-section="faq-services" className="mx-auto px-4 md:px-6">
|
||||
<div id="pricing" data-section="pricing" className="mx-auto px-4 md:px-6">
|
||||
<PricingCardFive
|
||||
title="Service Pricing & Packages"
|
||||
description="Transparent, flexible pricing for all event types. Each package is customizable to fit your specific needs and budget. All prices include professional service and our artist's materials."
|
||||
tag="Transparent Pricing"
|
||||
tagIcon={DollarSign}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="scale-rotate"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "kids-party-basic", tag: "Popular", price: "$150", period: "per hour", description: "Perfect for small to medium birthday celebrations", button: { text: "Request Quote", href: "/contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"Up to 15 children", "Colorful themed designs", "Face painting only", "Basic design selection", "Professional service"],
|
||||
},
|
||||
{
|
||||
id: "kids-party-deluxe", tag: "Best Value", tagIcon: Heart,
|
||||
price: "$200", period: "2 hours", description: "Full party entertainment package with extras", button: { text: "Request Quote", href: "/contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"Up to 25 children", "Custom themed designs", "Face painting & temporary tattoos", "Interactive entertainment", "Extended design time per child"],
|
||||
},
|
||||
{
|
||||
id: "festival-event", tag: "Flexible", price: "$250", period: "per 3 hours", description: "Festival and large outdoor event service", button: { text: "Request Quote", href: "/contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"High-capacity crowd service", "Fast, artistic designs", "Setup & teardown included", "Portable station with supplies", "Professional crowd management"],
|
||||
},
|
||||
{
|
||||
id: "corporate-event", tag: "Professional", price: "$300", period: "per 4 hours", description: "Corporate team building and brand activation", button: { text: "Request Quote", href: "/contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"Professional presentation", "Branded design options", "Full setup & equipment", "High-volume service capacity", "Customized themes available"],
|
||||
},
|
||||
{
|
||||
id: "body-painting-special", tag: "Premium", price: "$400", period: "per 4 hours", description: "Premium body art for special events & photoshoots", button: { text: "Request Quote", href: "/contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"Full-body artistic designs", "Consultation included", "Premium paint & materials", "Photo-shoot friendly designs", "Flexible custom requests"],
|
||||
},
|
||||
{
|
||||
id: "custom-package", tag: "Build Your Own", price: "Custom", period: "Flexible pricing", description: "Fully customizable package for unique events", button: { text: "Get Custom Quote", href: "/contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"Personalized service design", "Flexible duration options", "Mix of face & body painting", "Special effects & add-ons", "Tailored to your event needs"],
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Book Now", href: "/contact" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Pricing and packages section"
|
||||
containerClassName="gap-12"
|
||||
cardClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq" className="mx-auto px-4 md:px-6">
|
||||
<FaqBase
|
||||
title="Services FAQ"
|
||||
description="Common questions about our face painting and body art services."
|
||||
title="Service Questions & Details"
|
||||
description="Common questions about our services, booking process, and event requirements."
|
||||
tag="FAQ"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
@@ -171,30 +265,54 @@ export default function ServicesPage() {
|
||||
showCard={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq-1", title: "Do you offer custom design services?", content: "Yes! We specialize in custom face painting designs tailored to your event theme. Whether it's character designs, themed art, or branded elements for corporate events, our artists can create exactly what you envision. Please provide theme details or reference images when booking for best results."},
|
||||
id: "faq-1", title: "What makes Paintasy different from other face painters?", content: "We combine professional artistry with friendly service. Our artists are experienced, use high-quality hypoallergenic products, and specialize in customized designs for different event types. We prioritize hygiene, efficiency, and creating memorable experiences for every guest."
|
||||
},
|
||||
{
|
||||
id: "faq-2", title: "What's the difference between kids party and festival face painting?", content: "Kids party face painting focuses on intricate, detailed designs with character themes and personal interaction with each child. Festival face painting emphasizes speed and crowd management while maintaining artistic quality. Festival designs are typically simpler but equally impressive, allowing us to serve more people in the same timeframe."},
|
||||
id: "faq-2", title: "How far in advance should I book?", content: "We recommend booking 2-3 weeks in advance to secure your preferred date and time. For large events, peak seasons, or very specific customization requests, 4-6 weeks advance booking is ideal. Last-minute bookings may be available depending on our current schedule."
|
||||
},
|
||||
{
|
||||
id: "faq-3", title: "Are your products hypoallergenic?", content: "We use only professional-grade, hypoallergenic face paints that are non-toxic and dermatologist-tested. All products are safe for sensitive skin. If you have known allergies, please inform us when booking so we can prepare appropriate alternatives or conduct a patch test."},
|
||||
id: "faq-3", title: "Are your face paints safe for children with sensitive skin?", content: "Absolutely! We use only professional-grade, hypoallergenic face paints that are non-toxic, dermatologist-tested, and safe for sensitive skin. All products meet safety standards. We practice strict hygiene protocols, using clean brushes and sanitized application tools for each client. If you have specific allergies, please inform us when booking."
|
||||
},
|
||||
{
|
||||
id: "faq-4", title: "Can you do body painting in addition to face painting?", content: "Absolutely! We offer professional body painting services for themed events, corporate activations, and special occasions. Body painting takes longer than face painting, so we recommend discussing specific design and time requirements when booking."},
|
||||
id: "faq-4", 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're optimized for speed without sacrificing quality. For parties, we allow more time for custom designs and interactions with children to ensure their satisfaction."
|
||||
},
|
||||
{
|
||||
id: "faq-5", title: "What's your turnaround time per person?", content: "Simple face designs typically take 3-5 minutes, while detailed or custom designs take 8-12 minutes. At festivals, we optimize for speed. For party settings, we allow more time for interactions and personalized designs. We always prioritize quality over rushing."},
|
||||
id: "faq-5", title: "Can face paint cause skin reactions or allergies?", content: "Our hypoallergenic products are designed to minimize allergic reactions. However, if someone has a known allergy to face paint, we can do a patch test first. We also offer alternative options. Please disclose any skin sensitivities or allergies when booking so we can prepare appropriately."
|
||||
},
|
||||
{
|
||||
id: "faq-6", title: "How much setup time do you need?", content: "Typically, we require 15-30 minutes for setup before service begins. This includes setting up our portable stations, organizing supplies, and ensuring proper sanitation protocols are in place. The exact time depends on the venue and event specifics."},
|
||||
id: "faq-6", title: "Do you offer custom or themed designs?", content: "Yes! We specialize in custom designs for themed parties, corporate events, and special occasions. Provide theme details or reference images when booking. We offer standard designs at no extra cost, while very complex or intricate custom designs may have a small additional fee. Discuss your vision with us during consultation."
|
||||
},
|
||||
{
|
||||
id: "faq-7", title: "What's included in your event packages?", content: "All packages include professional face painting service, setup and teardown, and our artist's premium materials. Some packages include add-ons like temporary tattoos or body painting. Each package description clearly outlines what's included. Custom packages can be tailored to include specific services you need."
|
||||
},
|
||||
{
|
||||
id: "faq-8", title: "How do I prepare for the face painting session?", content: "Have a clean, dry face and avoid heavy makeup beforehand. For kids' parties, mention any design preferences or themes in advance. Make sure guests are seated comfortably during painting. After painting, the designs set quickly and last several hours. We provide care instructions to help designs last longer."
|
||||
},
|
||||
{
|
||||
id: "faq-9", title: "How long do face paintings last?", content: "Face paintings typically last 3-6 hours depending on activity level and weather conditions. Outdoor heat or swimming can reduce longevity. We apply professional-grade paints designed for durability. Guests can extend the wear time by minimizing touching and sweating."
|
||||
},
|
||||
{
|
||||
id: "faq-10", title: "Do you have liability insurance and permits?", content: "Yes! We are fully licensed, insured, and compliant with all local health and safety regulations. We maintain professional liability insurance to protect both ourselves and our clients. Documentation is available upon request."
|
||||
},
|
||||
{
|
||||
id: "faq-11", title: "Can you accommodate large events or multiple artists?", content: "Yes! For very large events, we can arrange multiple artists to ensure efficient service and minimal wait times. This is particularly valuable for festivals and corporate events. Discuss group rates and artist availability when booking."
|
||||
},
|
||||
{
|
||||
id: "faq-12", title: "What is your cancellation or rescheduling policy?", content: "We have flexible policies to accommodate your needs. Cancellations made 7+ days in advance receive a full refund. Cancellations within 7 days may incur a small fee. Rescheduling is usually available for a minimal fee. Check our full terms when booking or contact us for specific details."
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Book Your Service", href: "/packages" }]}
|
||||
buttons={[{ text: "Still have questions?", href: "/contact" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Services FAQ section"
|
||||
containerClassName="gap-12"
|
||||
textBoxTitleClassName="text-4xl font-extrabold"
|
||||
textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
descriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-services" data-section="contact-services" className="mx-auto px-4 md:px-6">
|
||||
<div id="contact" data-section="contact" className="mx-auto px-4 md:px-6">
|
||||
<ContactText
|
||||
text="Interested in booking one of our services? Let's discuss your event requirements and create a customized solution. Contact Paintasy today to bring professional face and body art to your celebration."
|
||||
text="Ready to book Paintasy for your event? Get in touch with us today to discuss your specific needs, event details, and custom requirements. Our team is here to help create the perfect face painting experience for your guests."
|
||||
animationType="background-highlight"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
@@ -210,7 +328,7 @@ export default function ServicesPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer-services" data-section="footer-services" className="mx-auto px-4 md:px-6">
|
||||
<div id="footer" data-section="footer" className="mx-auto px-4 md:px-6">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
|
||||
@@ -224,4 +342,4 @@ export default function ServicesPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
197
src/app/social-media/page.tsx
Normal file
197
src/app/social-media/page.tsx
Normal file
@@ -0,0 +1,197 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { Instagram, Heart, Sparkles, Music } from 'lucide-react';
|
||||
|
||||
export const metadata = {
|
||||
title: "Social Media Gallery - Paintasy Face and Body Art", description: "Follow our social media for the latest event photos, face painting designs, and behind-the-scenes content. Real event photos organized by service type."
|
||||
};
|
||||
|
||||
export default function SocialMediaPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Gallery", id: "/gallery" },
|
||||
{ name: "Packages", id: "/" },
|
||||
{ name: "About", id: "/" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
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: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Packages", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
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: [
|
||||
{ label: "Local Events", href: "/contact" },
|
||||
{ label: "Regional Coverage", href: "/contact" },
|
||||
{ label: "Book Now", href: "/" },
|
||||
{ label: "Get Quote", href: "/contact" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const instagramFeed = [
|
||||
{
|
||||
id: "insta-1", name: "Birthday Magic ✨", price: "Follow Our Stories", variant: "Kids Parties", imageSrc: "http://img.b2bpic.net/free-photo/happy-kids-at-birthday-party-with-face-paint_23-2149159450.jpg?_wi=1", imageAlt: "Kids enjoying face painting at birthday party"
|
||||
},
|
||||
{
|
||||
id: "insta-2", name: "Festival Vibes 🎨", price: "Follow Our Stories", variant: "Festival Events", imageSrc: "http://img.b2bpic.net/free-photo/festival-face-paint-instagram_23-2149159471.jpg?_wi=1", imageAlt: "Festival face art Instagram post"
|
||||
},
|
||||
{
|
||||
id: "insta-3", name: "Artistic Designs 🎭", price: "Follow Our Stories", variant: "Creative Art", imageSrc: "http://img.b2bpic.net/free-photo/artistic-face-paint-design-instagram_23-2149159492.jpg?_wi=1", imageAlt: "Creative face painting design"
|
||||
},
|
||||
{
|
||||
id: "insta-4", name: "Event Highlights 🎉", price: "Follow Our Stories", variant: "Recent Events", imageSrc: "http://img.b2bpic.net/free-photo/recent-event-face-painting_23-2149159513.jpg?_wi=1", imageAlt: "Recent event face painting highlight"
|
||||
},
|
||||
{
|
||||
id: "insta-5", name: "Behind the Scenes 🎨", price: "Follow Our Stories", variant: "Process Video", imageSrc: "http://img.b2bpic.net/free-photo/behind-scenes-face-painting_23-2149159534.jpg?_wi=1", imageAlt: "Behind the scenes face painting process"
|
||||
},
|
||||
{
|
||||
id: "insta-6", name: "Client Love ❤️", price: "Follow Our Stories", variant: "Testimonials", imageSrc: "http://img.b2bpic.net/free-photo/happy-client-testimonial-face-paint_23-2149159555.jpg?_wi=1", imageAlt: "Happy client testimonial"
|
||||
},
|
||||
{
|
||||
id: "insta-7", name: "Quick Designs ⚡", price: "Follow Our Stories", variant: "Fast Service", imageSrc: "http://img.b2bpic.net/free-photo/quick-festival-design_23-2149159576.jpg?_wi=1", imageAlt: "Quick festival face design"
|
||||
},
|
||||
{
|
||||
id: "insta-8", name: "Glitter & Sparkle ✨", price: "Follow Our Stories", variant: "Special Effects", imageSrc: "http://img.b2bpic.net/free-photo/glitter-face-paint-design_23-2149159597.jpg?_wi=1", imageAlt: "Glitter and sparkle face painting"
|
||||
},
|
||||
{
|
||||
id: "insta-9", name: "Team Events 🤝", price: "Follow Our Stories", variant: "Corporate", imageSrc: "http://img.b2bpic.net/free-photo/corporate-event-face-paint_23-2149159618.jpg?_wi=1", imageAlt: "Corporate team event face painting"
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
background="none"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
brandName="Paintasy"
|
||||
navItems={navItems}
|
||||
bottomLeftText="Creative Face & Body Art"
|
||||
bottomRightText="paintasy@events.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero-social" data-section="hero-social" className="mx-auto px-4 md:px-6">
|
||||
<HeroBillboardGallery
|
||||
title="Follow Paintasy on Social Media"
|
||||
description="Connect with us on Instagram, Facebook, and TikTok for daily updates, event photos, design inspiration, and behind-the-scenes content. Join our growing community of happy clients!"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="@PaintasyArt"
|
||||
tagIcon={Instagram}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Follow on Instagram", href: "https://instagram.com" },
|
||||
{ text: "Like on Facebook", href: "https://facebook.com" },
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/social-media-feed-face-paint_23-2149159639.jpg?_wi=1", imageAlt: "Paintasy social media feed"
|
||||
},
|
||||
]}
|
||||
mediaAnimation="opacity"
|
||||
ariaLabel="Social media introduction"
|
||||
className="min-h-screen"
|
||||
containerClassName="flex flex-col lg:flex-row items-center justify-between gap-12"
|
||||
titleClassName="text-5xl lg:text-6xl font-extrabold leading-tight"
|
||||
descriptionClassName="text-lg lg:text-xl opacity-90 max-w-2xl"
|
||||
buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-feed" data-section="social-feed" className="mx-auto px-4 md:px-6 pt-20">
|
||||
<ProductCardFour
|
||||
title="Latest Instagram Posts"
|
||||
description="Check out our most recent posts from events, client experiences, and face painting artistry. Each post captures a moment of creativity and joy from our service."
|
||||
tag="Instagram Feed"
|
||||
tagIcon={Instagram}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="opacity"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
carouselMode="buttons"
|
||||
products={instagramFeed}
|
||||
buttons={[{ text: "Follow on Instagram", href: "https://instagram.com" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Instagram social media feed"
|
||||
containerClassName="gap-12"
|
||||
cardVariantClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-connect" data-section="social-connect" className="mx-auto px-4 md:px-6 pt-20">
|
||||
<ContactText
|
||||
text="Love what you see on our social media? Reach out to book Paintasy for your event! Share your experience and tag us for a chance to be featured on our Instagram. Follow us for daily inspiration, promotions, and event updates."
|
||||
animationType="background-highlight"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Book Now", href: "/contact" },
|
||||
{ text: "Follow @PaintasyArt", href: "https://instagram.com" },
|
||||
]}
|
||||
ariaLabel="Social media call-to-action"
|
||||
containerClassName="py-16"
|
||||
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="footer-social" data-section="footer-social" 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