Update src/app/services/page.tsx

This commit is contained in:
2026-03-14 05:38:06 +00:00
parent de0a43b3d6
commit abca95e53b

View File

@@ -4,53 +4,58 @@ 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 Link from 'next/link';
import { Smile, Heart, Sparkles, Zap, Music, Briefcase, Target, Users, Award, Palette, Star, Camera } from 'lucide-react';
import { Sparkles, Palette, Heart, Smile, Zap, Music, Briefcase, Target, Users, Star, DollarSign, Camera, HelpCircle, Award } from 'lucide-react';
export const metadata = {
title: "Services - Paintasy Face and Body Art", description: "Explore our complete range of face painting and body art services for parties, festivals, corporate events, and special occasions. Professional artists delivering creative entertainment."};
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: "#service-1" },
{ label: "Festival Face Art", href: "#service-2" },
{ label: "Corporate Events", href: "#service-3" },
{ label: "Body Painting", href: "#service-4" },
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: "Quick Links",
items: [
title: "Company", items: [
{ label: "About Us", href: "/#about-home" },
{ label: "Gallery", href: "/gallery" },
{ label: "Packages", href: "/packages" },
{ label: "About", href: "/about" },
{ label: "Packages", href: "#packages" },
{ label: "FAQ", href: "#faq" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect",
items: [
title: "Connect", items: [
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Facebook", href: "https://facebook.com" },
{ label: "TikTok", href: "https://tiktok.com" },
{ label: "Email", href: "mailto:paintasy@events.com" },
{ label: "Phone", href: "tel:+15551234567" },
],
},
{
title: "Get Started",
items: [
{ label: "View Packages", href: "/packages" },
{ label: "Book Now", href: "/packages" },
title: "Service Areas", items: [
{ label: "Local Events", href: "/contact" },
{ label: "Regional Coverage", href: "/contact" },
{ label: "Book Now", href: "#packages" },
{ label: "Get Quote", href: "/contact" },
],
},
@@ -78,113 +83,248 @@ export default function ServicesPage() {
/>
</div>
<div id="services-page-hero" data-section="services-page-hero" className="mx-auto px-4 md:px-6">
<div id="services-hero" data-section="services-hero" className="mx-auto px-4 md:px-6">
<HeroBillboardGallery
title="Our Services"
description="Professional face painting and body art for every occasion. From intimate celebrations to large festival events, we bring creativity and joy to your gathering."
background={{ variant: "sparkles-gradient" }}
buttons={[{ text: "Book Now", href: "/packages" }]}
title="Our Professional Services"
description="Comprehensive face painting and body art solutions for every event type. From intimate gatherings to large-scale festivals, we deliver creativity, professionalism, and unforgettable entertainment."
background={{ variant: "radial-gradient" }}
tag="Detailed Service Offerings"
tagIcon={Sparkles}
tagAnimation="slide-up"
buttons={[
{ text: "Book Your Event", href: "#packages" },
{ text: "Contact Us", href: "/contact" },
]}
buttonAnimation="blur-reveal"
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=2",
imageAlt: "Professional face painting services",
imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-woman-wearing-mask_23-2148784326.jpg", imageAlt: "Professional face painting services showcase"
},
]}
mediaAnimation="opacity"
ariaLabel="Services page hero section"
titleClassName="text-5xl font-extrabold"
descriptionClassName="text-lg opacity-90 max-w-2xl"
ariaLabel="Services 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="services-detailed" data-section="services-detailed" 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 Offerings"
description="Each service is tailored to deliver maximum enjoyment and artistic quality."
description="Explore our full range of professional face painting and body art services, each tailored to meet the unique needs of your event."
tag="All Services"
tagIcon={Palette}
tagAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
useInvertedBackground={true}
features={[
{
id: "service-1",
title: "Kids Party Face Painting",
description: "Make birthdays magical with our professional kids' face painting. Our artists create vibrant, playful designs that children absolutely love.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=3",
imageAlt: "Kids party face painting showcase",
id: "kids-party", title: "Kids Party Face Painting", description: "Create magical moments at birthday celebrations with vibrant, playful designs. Our artists specialize in kid-friendly themes including superheroes, princesses, animals, butterflies, and fantasy characters. Each child receives personalized attention and a unique design that makes them feel special.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1", imageAlt: "Colorful kids party face painting"
},
items: [
{ icon: Smile, text: "Butterfly, animal & character designs" },
{ icon: Heart, text: "Safe, child-friendly face paints" },
{ icon: Sparkles, text: "Quick application, maximum fun" },
{ icon: Star, text: "Perfect for ages 3-12" },
{ icon: Sparkles, text: "Colorful & playful designs" },
{ icon: Heart, text: "Safe, child-friendly products" },
{ icon: Smile, text: "Quick turnaround per child" },
],
reverse: false,
},
{
id: "service-2",
title: "Festival Face Art",
description: "Perfect for outdoor events, festivals, and large gatherings. We specialize in fast, beautiful designs that work for high-capacity crowds.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=2",
imageAlt: "Festival face art designs",
id: "festival-face-art", title: "Festival & Outdoor Event Face Art", description: "Fast, high-volume service perfect for music festivals, street fairs, and outdoor celebrations. We excel at maintaining artistic quality while serving large crowds efficiently. Our portable setup adapts to any outdoor venue.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1", imageAlt: "Festival face art designs"
},
items: [
{ icon: Zap, text: "3-5 minute turnaround per person" },
{ icon: Music, text: "Perfect for music festivals & carnivals" },
{ icon: Users, text: "Handles large crowds efficiently" },
{ icon: Palette, text: "Artistic & creative designs" },
{ icon: Zap, text: "Fast service for crowds" },
{ icon: Star, text: "Creative artistic designs" },
{ icon: Music, text: "Perfect for music & outdoor events" },
],
reverse: true,
},
{
id: "service-3",
title: "Corporate Event Entertainment",
description: "Add a creative touch to company parties, team buildings, and brand activations. Professional service that impresses clients and energizes employees.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=2",
imageAlt: "Corporate event face painting service",
id: "corporate-events", title: "Corporate Event Entertainment", description: "Professional face painting for corporate team building, brand activations, company parties, and client appreciation events. We offer branded design options and maintain a polished, professional demeanor throughout.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=1", imageAlt: "Corporate event entertainment"
},
items: [
{ icon: Briefcase, text: "Professional & polished service" },
{ icon: Target, text: "Branded design options" },
{ icon: Award, text: "Premium quality art" },
{ icon: Users, text: "Great for team engagement" },
{ icon: Target, text: "Branded design options available" },
{ icon: Users, text: "Great for team building" },
],
reverse: false,
},
{
id: "service-4",
title: "Professional Body Painting",
description: "Artistic body painting for special events, photo shoots, performances, and themed celebrations. Stunning visual art that makes a statement.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-being-affectionate-with-cute-cat_23-2149879760.jpg",
imageAlt: "Professional body painting artwork",
id: "body-painting", title: "Body Painting & Large-Scale Art", description: "Transform bodies into living canvases with stunning body art designs. Perfect for themed parties, art installations, and special occasions. We create designs that cover larger areas while maintaining artistic integrity and comfort.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=1", imageAlt: "Professional body painting art"
},
items: [
{ icon: Palette, text: "Custom artistic designs" },
{ icon: Camera, text: "Photography-ready artistry" },
{ icon: Sparkles, text: "High-impact visual art" },
{ icon: Star, text: "Unforgettable performances" },
{ icon: Palette, text: "Artistic full-body designs" },
{ icon: Star, text: "Perfect for themed events" },
{ icon: Award, text: "Professional finish" },
],
reverse: true,
},
{
id: "custom-designs", title: "Custom & Themed Designs", description: "Request custom designs for your specific event theme. Whether you need Halloween costumes, holiday themes, or brand-specific art, we create personalized designs. Discuss your vision during consultation.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=1", imageAlt: "Custom themed face painting"
},
items: [
{ icon: Sparkles, text: "Fully customizable designs" },
{ icon: Palette, text: "Theme-specific artwork" },
{ icon: Heart, text: "Personalized service" },
],
reverse: false,
},
{
id: "special-occasions", title: "Special Occasions & Celebrations", description: "From weddings and anniversaries to graduations and milestone celebrations, face painting adds a unique entertainment element. We work with event planners to create the perfect atmosphere for your special day.", media: {
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: "Special occasion face painting"
},
items: [
{ icon: Heart, text: "Memorable entertainment" },
{ icon: Users, text: "Event planner coordination" },
{ icon: Star, text: "Flexible customization" },
],
reverse: true,
},
]}
buttons={[{ text: "View Packages", href: "/packages" }]}
buttons={[{ text: "View Packages", href: "#packages" }]}
buttonAnimation="blur-reveal"
ariaLabel="Detailed service offerings section"
containerClassName="gap-12"
titleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90"
itemClassName=""
/>
</div>
<div id="services-footer" data-section="services-footer" className="mx-auto px-4 md:px-6">
<div id="packages" data-section="packages" className="mx-auto px-4 md:px-6">
<PricingCardFive
title="Service Packages & Pricing"
description="Flexible pricing for all event types and sizes. Each package includes professional service, all materials, and our commitment to exceptional entertainment."
tag="Transparent Pricing"
tagIcon={DollarSign}
tagAnimation="slide-up"
textboxLayout="default"
animationType="scale-rotate"
useInvertedBackground={false}
plans={[
{
id: "kids-party-package", 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: "party-deluxe-package", 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-package", 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"
],
},
{
id: "corporate-package", tag: "Custom", tagIcon: Briefcase,
price: "$300", period: "per 4 hours", description: "Professional corporate event package", button: { text: "Request Quote", href: "/contact" },
featuresTitle: "What's Included", features: [
"Professional service for 50+ guests", "Branded design options", "Premium face paint", "Event coordination"
],
},
{
id: "body-art-package", tag: "Premium", tagIcon: Star,
price: "$400", period: "per 5 hours", description: "Full body painting service", button: { text: "Request Quote", href: "/contact" },
featuresTitle: "What's Included", features: [
"Professional body art", "Custom design creation", "Premium materials", "Photography-ready finish"
],
},
{
id: "all-day-package", tag: "Best for Large Events", tagIcon: Award,
price: "$600", period: "Full day (8 hours)", description: "Comprehensive all-day entertainment", button: { text: "Request Quote", href: "/contact" },
featuresTitle: "What's Included", features: [
"Multiple artists available", "Unlimited design variety", "All service types included", "Professional coordination"
],
},
]}
buttons={[{ text: "Contact for Custom Quote", href: "/contact" }]}
buttonAnimation="blur-reveal"
ariaLabel="Service packages and pricing"
containerClassName="gap-12"
textBoxTitleClassName="text-4xl font-extrabold"
textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
cardClassName="p-8"
/>
</div>
<div id="faq" data-section="faq" className="mx-auto px-4 md:px-6">
<FaqBase
title="Service Questions"
description="Find answers to common questions about our face painting and body art services."
tag="FAQ"
tagIcon={HelpCircle}
tagAnimation="slide-up"
textboxLayout="default"
faqsAnimation="slide-up"
useInvertedBackground={true}
showCard={true}
faqs={[
{
id: "faq-1", title: "What face paints do you use?", content: "We use only professional-grade, hypoallergenic face paints that are non-toxic, dermatologist-tested, and approved for use on sensitive skin. All products are water-based and easy to remove. We maintain strict hygiene standards, using fresh brushes and sanitized tools for each client."},
{
id: "faq-2", title: "How far in advance should I book?", content: "We recommend booking 2-3 weeks in advance for standard bookings. For large events, festivals, or peak season dates, 4-6 weeks is ideal. Last-minute bookings may be available depending on our schedule. Contact us to check availability."},
{
id: "faq-3", title: "How long does face painting take per person?", content: "Simple designs typically take 3-5 minutes, while custom or detailed designs take 8-12 minutes. At festivals, we optimize for speed while maintaining quality. For parties, we allow more time for interaction and personalization. Average throughput is 8-12 people per hour."},
{
id: "faq-4", title: "Do you accommodate skin allergies?", content: "Absolutely. We have hypoallergenic options available and welcome discussion of specific allergies when booking. We can perform patch tests before application and always prioritize client safety and comfort."},
{
id: "faq-5", title: "Can you create custom designs?", content: "Yes! We specialize in custom designs for themed events, corporate branding, and special occasions. Share your theme or provide reference images during booking. Complex custom designs may incur an additional fee, discussed during consultation."},
{
id: "faq-6", title: "What areas do you service?", content: "We provide local and regional coverage for parties, festivals, and events. Travel fees may apply for events outside our standard service area. Contact us to discuss your location and event details."},
{
id: "faq-7", title: "Do you provide setup and teardown?", content: "Yes, all packages include professional setup and teardown. We bring portable stations, tables, and all necessary equipment. We set up 30 minutes before your event and clean up afterward."},
{
id: "faq-8", title: "What about body painting services?", content: "Body painting is available for larger designs covering arms, legs, and torso areas. It requires longer application times and is best for smaller groups. Ideal for themed parties, art installations, or special celebrations. Inquire about custom body art pricing."},
{
id: "faq-9", title: "Can I book multiple artists?", content: "For large events, we can provide multiple artists to serve more guests efficiently. This is available through our full-day packages or custom quotes. Contact us to discuss your guest count and timeline."},
{
id: "faq-10", title: "What if the event is cancelled or rescheduled?", content: "We offer flexible rescheduling up to 7 days before your event with no penalty. Cancellations within 7 days may incur a fee. Full details are included in our booking agreement. Contact us to discuss cancellation policies."},
]}
buttons={[{ text: "Book Your Service", href: "/contact" }]}
buttonAnimation="blur-reveal"
ariaLabel="Service FAQ section"
containerClassName="gap-12"
textBoxTitleClassName="text-4xl font-extrabold"
textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
/>
</div>
<div id="contact-cta" data-section="contact-cta" className="mx-auto px-4 md:px-6">
<ContactText
text="Ready to book your service? Contact Paintasy Face and Body Art today. Our professional artists are ready to discuss your event and create an unforgettable experience. Let's bring creativity and color to your celebration!"
animationType="background-highlight"
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
buttons={[
{ text: "Request a Quote", href: "/contact" },
{ text: "Call Us", href: "tel:+15551234567" },
]}
ariaLabel="Services 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" data-section="footer" className="mx-auto px-4 md:px-6">
<FooterSimple
columns={footerColumns}
bottomLeftText="© 2024 Paintasy Face and Body Art."
bottomRightText="Professional Event Entertainment"
ariaLabel="Services footer with links"
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"
@@ -193,4 +333,4 @@ export default function ServicesPage() {
</div>
</ThemeProvider>
);
}
}