Update src/app/services/page.tsx
This commit is contained in:
@@ -4,52 +4,53 @@ 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 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 } from 'lucide-react';
|
||||
|
||||
export default function ServicesPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "Packages", id: "packages" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Gallery", id: "/gallery" },
|
||||
{ name: "Packages", id: "/packages" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ 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" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Packages", href: "/packages" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ 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,114 +79,171 @@ 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 lg:px-8">
|
||||
<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="Professional Face Painting & Body Art Services"
|
||||
description="Paintasy offers comprehensive face painting and body art services for every occasion. From intimate birthday parties to large-scale festivals, our professional artists bring creativity, color, and joy to your event."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="All Services"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Browse Services", href: "#services-list" },
|
||||
{ text: "Get 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/rainbow-face-paint-art_23-2148621847.jpg?_wi=2", imageAlt: "Vibrant 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-8 lg: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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services-detailed" data-section="services-detailed" className="mx-auto px-4 md:px-6">
|
||||
<div id="services-list" data-section="services-list" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24">
|
||||
<FeatureCardTen
|
||||
title="Complete Service Offerings"
|
||||
description="Each service is tailored to deliver maximum enjoyment and artistic quality."
|
||||
title="Our Complete Service Menu"
|
||||
description="Choose from our range of professional face and body art services, each designed for specific occasions and clientele."
|
||||
tag="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: "Fun, safe, and colorful face painting designs perfect for children's birthday parties. From butterflies and animals to superheroes and princesses, we create magical moments for kids. All paints are hypoallergenic and dermatologist-tested.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/child-with-colorful-face-paint_23-2148412356.jpg?_wi=1", imageAlt: "Kids enjoying colorful 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: Heart, text: "Child-safe products" },
|
||||
{ icon: Smile, text: "Quick, fun designs" },
|
||||
{ icon: Sparkles, text: "Memorable moments" },
|
||||
],
|
||||
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", title: "Festival & Event Face Art", description: "Fast, impressive designs for large outdoor events, music festivals, and community gatherings. Our artists excel at high-volume service without compromising quality, perfect for busy festival environments.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/festival-face-painting-crowd_23-2148723145.jpg?_wi=1", imageAlt: "Festival attendees with artistic face painting"},
|
||||
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: "High-volume service" },
|
||||
{ icon: Star, text: "Professional designs" },
|
||||
{ icon: Music, text: "Event-perfect timing" },
|
||||
],
|
||||
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", title: "Corporate Event Entertainment", description: "Professional face painting for company parties, brand activations, team-building events, and corporate celebrations. We offer branded design options and maintain a polished, professional demeanor throughout.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/corporate-event-entertainment_23-2148945632.jpg?_wi=1", imageAlt: "Professional 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: Briefcase, text: "Professional service" },
|
||||
{ icon: Target, text: "Branded options" },
|
||||
{ icon: Users, text: "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-art", title: "Body Painting & Art", description: "Stunning full-body art and temporary body painting for special events, themed parties, photo shoots, and artistic projects. Our body painting artists create wearable masterpieces that turn heads.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/body-art-painting_23-2149156247.jpg?_wi=1", imageAlt: "Professional body art and painting"},
|
||||
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: Sparkles, text: "Artistic mastery" },
|
||||
{ icon: Heart, text: "Creative designs" },
|
||||
{ icon: Star, text: "Photo-worthy art" },
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
id: "custom", title: "Custom & Themed Designs", description: "Create personalized face art tailored to your event's theme. Provide us with inspiration and we'll bring your vision to life with custom designs. Perfect for themed parties, cosplay events, and special celebrations.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/custom-themed-face-art_23-2149267841.jpg?_wi=1", imageAlt: "Creative custom themed face designs"},
|
||||
items: [
|
||||
{ icon: Target, text: "Custom designs" },
|
||||
{ icon: Palette, text: "Theme-based art" },
|
||||
{ icon: Sparkles, text: "Personalized service" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
id: "tattoo", title: "Temporary Tattoos & Accessories", description: "Complement face painting with safe, temporary tattoos and artistic body accessories. Great for adding extra flair to any face painting design or standalone service.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/temporary-tattoo-design_23-2149156325.jpg?_wi=1", imageAlt: "Colorful temporary tattoo designs"},
|
||||
items: [
|
||||
{ icon: Heart, text: "Safe temporary tattoos" },
|
||||
{ icon: Zap, text: "Quick application" },
|
||||
{ icon: Smile, text: "Extra style" },
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "View Packages", href: "/packages" }]}
|
||||
buttons={[{ text: "Book Your Service", href: "/packages" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
containerClassName="gap-12"
|
||||
titleClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90"
|
||||
ariaLabel="Services list with detailed descriptions"
|
||||
containerClassName="gap-8 lg:gap-12"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services-footer" data-section="services-footer" className="mx-auto px-4 md:px-6">
|
||||
<div id="services-pricing" data-section="services-pricing" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24">
|
||||
<PricingCardFive
|
||||
title="Service Packages & Pricing"
|
||||
description="Transparent, flexible pricing for all our face painting services. Choose the package that fits your event size and needs."
|
||||
tag="Pricing"
|
||||
tagIcon={DollarSign}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="scale-rotate"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "starter", tag: "Entry Level", price: "$100", period: "per hour", description: "Perfect for small gatherings and short events", button: { text: "Inquire", href: "/contact" },
|
||||
featuresTitle: "Included", features: [
|
||||
"Up to 10 people", "Standard designs", "Face painting only", "Portable setup"],
|
||||
},
|
||||
{
|
||||
id: "professional", tag: "Most Popular", price: "$200", period: "per 2 hours", description: "Ideal for birthday parties and medium events", button: { text: "Book Now", href: "/packages" },
|
||||
featuresTitle: "Included", features: [
|
||||
"Up to 25 people", "Custom designs", "Face & temporary tattoos", "Professional setup"],
|
||||
},
|
||||
{
|
||||
id: "premium", tag: "Best Value", price: "$400", period: "per 4 hours", description: "Comprehensive service for large events", button: { text: "Request Quote", href: "/contact" },
|
||||
featuresTitle: "Included", features: [
|
||||
"Unlimited guests", "Premium designs", "Face, body art & tattoos", "Setup & teardown"],
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "View All Packages", href: "/packages" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Service pricing and packages"
|
||||
containerClassName="gap-8 lg:gap-12"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services-cta" data-section="services-cta" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24">
|
||||
<ContactText
|
||||
text="Ready to bring creative entertainment to your event? Contact Paintasy today to discuss your service needs, get personalized recommendations, and book your professional face painters."
|
||||
animationType="background-highlight"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Request a Quote", href: "/contact" },
|
||||
{ text: "Call Now", href: "tel:+15551234567" },
|
||||
]}
|
||||
ariaLabel="Services call-to-action"
|
||||
containerClassName="py-12 sm:py-16 lg:py-20"
|
||||
contentClassName="max-w-3xl mx-auto"
|
||||
textClassName="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-center"
|
||||
buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer-services" data-section="footer-services" className="mx-auto px-4 md:px-6 lg:px-8">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2024 Paintasy Face and Body Art."
|
||||
bottomRightText="Professional Event Entertainment"
|
||||
ariaLabel="Services footer with links"
|
||||
containerClassName="gap-12"
|
||||
bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
|
||||
bottomRightText="Professional Event Entertainment | Creative Services"
|
||||
ariaLabel="Site footer with links"
|
||||
containerClassName="gap-8 lg:gap-12"
|
||||
columnsClassName="grid-cols-2 lg:grid-cols-4"
|
||||
columnTitleClassName="font-extrabold text-lg"
|
||||
columnItemClassName="hover:opacity-70 transition-opacity"
|
||||
|
||||
Reference in New Issue
Block a user