Update src/app/services/page.tsx

This commit is contained in:
2026-03-14 05:34:18 +00:00
parent 07eac4df50
commit 27dc9657cb

View File

@@ -4,9 +4,10 @@ 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 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, Star, DollarSign } from 'lucide-react';
export default function ServicesPage() {
const navItems = [
@@ -20,36 +21,36 @@ export default function ServicesPage() {
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" },
{ label: "Gallery", href: "/gallery" },
{ label: "Packages", href: "/packages" },
{ label: "About", href: "/about" },
{ 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" },
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 +79,133 @@ 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="Discover our complete range of face painting and body art services. Whether you're planning a kids' birthday party, organizing a festival, or hosting a corporate event, we have the perfect creative solution for you."
background={{ variant: "radial-gradient" }}
tag="Professional Services"
tagIcon={Palette}
tagAnimation="slide-up"
buttons={[
{ text: "Book Your Event", href: "/packages" },
{ text: "Request a Quote", 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?_wi=3", imageAlt: "Professional face painting artist at work"},
]}
mediaAnimation="opacity"
ariaLabel="Services page hero section"
titleClassName="text-5xl font-extrabold"
descriptionClassName="text-lg opacity-90 max-w-2xl"
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-details" data-section="services-details" 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."
title="Service Offerings"
description="Each service is tailored to your event needs with professional artists, high-quality materials, and attention to detail."
tag="What We Offer"
tagIcon={Sparkles}
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-service", title: "Kids Party Face Painting", description: "Transform children's faces into their favorite characters and creatures with our vibrant, playful designs. Perfect for birthday celebrations, creating magical moments and lasting memories.", 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"},
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: "Fun character designs" },
{ icon: Heart, text: "Safe for sensitive skin" },
{ icon: Smile, text: "Quick & efficient service" },
],
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-service", title: "Festival Face Art", description: "Eye-catching, artistic designs crafted at speed for crowds. Our festival service combines creative artistry with quick turnaround, perfect for outdoor events and high-traffic areas.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1", imageAlt: "Festival face art creative 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" },
],
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",
},
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" },
],
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",
},
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: Zap, text: "Fast professional service" },
{ icon: Star, text: "Artistic & bold designs" },
{ icon: Music, text: "Event-ready atmosphere" },
],
reverse: true,
},
]}
buttons={[{ text: "View Packages", href: "/packages" }]}
buttons={[{ text: "Book a Service", href: "/packages" }]}
buttonAnimation="blur-reveal"
ariaLabel="Detailed services section"
containerClassName="gap-12"
titleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90"
itemClassName=""
mediaWrapperClassName=""
/>
</div>
<div id="services-faq" data-section="services-faq" className="mx-auto px-4 md:px-6">
<FaqBase
title="Service FAQs"
description="Common questions about our face painting and body art services."
tag="Questions?"
tagIcon={DollarSign}
tagAnimation="slide-up"
textboxLayout="default"
animationType="smooth"
faqsAnimation="slide-up"
useInvertedBackground={true}
showCard={true}
faqs={[
{
id: "service-faq-1", title: "How many children can you paint at a party?", content: "Depending on the party duration and design complexity, we can typically paint 15-25 children per hour. For birthday parties, we recommend 2-3 hours for groups of 10-20 kids, allowing time for custom designs and interactions."},
{
id: "service-faq-2", title: "What designs are available for kids' parties?", content: "We offer classic designs like butterflies, superheroes, animals, pirates, princesses, and more. We can also create custom designs based on party themes. Browse our portfolio for inspiration, and we'll work with you to bring your vision to life."},
{
id: "service-faq-3", title: "Are the face paints waterproof?", content: "Our professional-grade paints are water-resistant and designed to last for several hours. They're not fully waterproof but are durable enough for most outdoor activities. We recommend avoiding prolonged water exposure immediately after application."},
{
id: "service-faq-4", title: "Can you accommodate large festival events?", content: "Absolutely! We specialize in festival and outdoor event services. For large crowds, we can work quickly without compromising quality. We bring all necessary equipment and set up an efficient service station that can handle high volume."},
{
id: "service-faq-5", title: "Do you offer body painting services?", content: "Yes, we offer professional body painting for special events, themed parties, and artistic projects. Body painting takes longer than face painting but creates stunning visual effects. Contact us to discuss your specific needs."},
{
id: "service-faq-6", title: "What is your hygiene protocol?", content: "We follow strict hygiene standards. We use clean, sanitized brushes and applicators for each client. We also offer touchless application methods for those with sensitivities. All materials are professional-grade and hypoallergenic."},
]}
buttons={[{ text: "Book Your Service", href: "/packages" }]}
buttonAnimation="blur-reveal"
ariaLabel="Services FAQ section"
containerClassName="gap-12"
accordionClassName=""
accordionTitleClassName=""
/>
</div>
<div id="services-contact" data-section="services-contact" className="mx-auto px-4 md:px-6">
<ContactText
text="Ready to book one of our services? Get in touch today! We'll work with you to customize the perfect face painting and body art experience for your event."
animationType="background-highlight"
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
buttons={[
{ text: "Request a Quote", href: "/contact" },
{ text: "Book Now", href: "/packages" },
]}
ariaLabel="Services contact 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="services-footer" data-section="services-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"