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

Compare commits

merge into: bender:version_3
Branches Tags
bender:main bender:version_6 bender:version_5 bender:version_1 bender:version_3 bender:version_4 bender:version_2
...
pull from: bender:version_4
Branches Tags
bender:main bender:version_6 bender:version_5 bender:version_1 bender:version_3 bender:version_4 bender:version_2

8 Commits
version_3 ... version_4

Author SHA1 Message Date
bender
c850dc1de3 Update src/app/page.tsx 2026-03-14 05:28:22 +00:00
bender
1fc6f158f9 Update src/app/page.tsx 2026-03-14 05:27:01 +00:00
bender
e464a9af91 Switch to version 1: modified src/app/services/page.tsx 2026-03-14 05:24:44 +00:00
bender
f1d5b3820d Switch to version 1: modified src/app/page.tsx 2026-03-14 05:24:43 +00:00
bender
01e6563200 Switch to version 1: modified src/app/packages/page.tsx 2026-03-14 05:24:43 +00:00
bender
d4a030e0cb Switch to version 1: modified src/app/gallery/page.tsx 2026-03-14 05:24:42 +00:00
bender
5712ecea96 Switch to version 1: modified src/app/contact/page.tsx 2026-03-14 05:24:42 +00:00
bender
be5720b333 Merge version_3 into main 
Merge version_3 into main
 2026-03-14 05:24:00 +00:00
5 changed files with 503 additions and 595 deletions
Expand all files Collapse all files

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

@@ -1,67 +1,58 @@
"use client"; "use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import ContactCTA from '@/components/sections/contact/ContactCTA'; import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import FooterSimple from '@/components/sections/footer/FooterSimple'; import ContactText from "@/components/sections/contact/ContactText";
import { Mail, Sparkles } from 'lucide-react'; import FaqBase from "@/components/sections/faq/FaqBase";
import { useState } from 'react'; import FooterSimple from "@/components/sections/footer/FooterSimple";
import { HelpCircle, Mail, Phone, MapPin } from "lucide-react";
export const metadata = {
title: "Contact Us - Book Face Painting & Body Art | Paintasy", description: "Professional face painting and body art services for parties, festivals, and events. Get in touch with Paintasy to book your face painter, request quotes, and discuss custom face painting designs.", keywords: "book face painter, face painting services, body art booking, contact face painter, professional face painting, request face painting quote"};
export default function ContactPage() { export default function ContactPage() {
const navItems = [ const navItems = [
{ name: "Home", id: "/" }, { name: "Home", id: "home" },
{ name: "Services", id: "/services" }, { name: "Services", id: "services" },
{ name: "Gallery", id: "/gallery" }, { name: "Gallery", id: "gallery" },
{ name: "Packages", id: "/" }, { name: "Packages", id: "packages" },
{ name: "About", id: "/" }, { name: "About", id: "about" },
{ name: "Contact", id: "/contact" }, { name: "Contact", id: "contact" },
]; ];
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
eventDate: '',
eventType: '',
message: '',
});
const footerColumns = [ const footerColumns = [
{ {
title: "Services", items: [ title: "Services",
items: [
{ label: "Kids Party Face Painting", href: "/services" }, { label: "Kids Party Face Painting", href: "/services" },
{ label: "Festival Face Art", href: "/services" }, { label: "Festival Face Art", href: "/services" },
{ label: "Corporate Events", href: "/services" }, { label: "Corporate Events", href: "/services" },
{ label: "Body Painting", href: "/services" }, { label: "Body Painting", href: "/services" },
{ label: "Custom Designs", href: "/services" },
], ],
}, },
{ {
title: "Company", items: [ title: "Company",
{ label: "About Us", href: "/" }, items: [
{ label: "About Us", href: "/about" },
{ label: "Gallery", href: "/gallery" }, { label: "Gallery", href: "/gallery" },
{ label: "Packages", href: "/" }, { label: "Packages", href: "/packages" },
{ label: "FAQ", href: "/" },
{ label: "Contact", href: "/contact" }, { label: "Contact", href: "/contact" },
], ],
}, },
{ {
title: "Connect", items: [ title: "Connect",
items: [
{ label: "Instagram", href: "https://instagram.com" }, { label: "Instagram", href: "https://instagram.com" },
{ label: "Facebook", href: "https://facebook.com" }, { label: "Facebook", href: "https://facebook.com" },
{ label: "TikTok", href: "https://tiktok.com" }, { label: "TikTok", href: "https://tiktok.com" },
{ label: "Email", href: "mailto:paintasy@events.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: "Local Events", href: "/contact" },
{ label: "Regional Coverage", href: "/contact" }, { label: "Regional Coverage", href: "/contact" },
{ label: "Book Now", href: "/contact" }, { label: "Book Now", href: "/packages" },
{ label: "Get Quote", href: "/contact" }, { label: "Get Quote", href: "/contact" },
], ],
}, },
@@ -82,163 +73,113 @@ export default function ContactPage() {
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleFullscreen <NavbarStyleFullscreen
brandName="Paintasy"
navItems={navItems} navItems={navItems}
brandName="Paintasy"
bottomLeftText="Creative Face & Body Art" bottomLeftText="Creative Face & Body Art"
bottomRightText="paintasy@events.com" bottomRightText="paintasy@events.com"
/> />
</div> </div>
<div id="contact-cta" data-section="contact-cta" className="mx-auto px-4 md:px-6 pt-24"> <div id="contact-page-hero" data-section="contact-page-hero">
<ContactCTA <HeroBillboardGallery
tag="Get in Touch" title="Get In Touch"
tagIcon={Mail} description="Ready to book Paintasy for your event? Contact us today and let's create an unforgettable experience."
tagAnimation="slide-up"
title="Book Your Professional Face Painter"
description="Transform your event with professional face painting and body art. Our skilled face painters deliver creative designs that bring joy to every occasion. From kids parties to festivals, corporate events to special celebrations, we provide exceptional face painting entertainment. Let's create unforgettable memories together."
buttons={[
{ text: "Request Quote", href: "#contact-form" },
{ text: "Call Now", href: "tel:+15551234567" },
]}
buttonAnimation="blur-reveal"
background={{ variant: "radial-gradient" }} background={{ variant: "radial-gradient" }}
useInvertedBackground={false} buttons={[{ text: "Call Us", href: "tel:+15551234567" }]}
ariaLabel="Contact CTA section" buttonAnimation="blur-reveal"
containerClassName="gap-12" mediaItems={[
textBoxClassName="max-w-2xl" {
titleClassName="text-4xl font-extrabold" imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-adult-man-his-30s-that-is-painting-big-canvas-with-lot-brushes-palette-while-sitting-floor-art-studio_662251-323.jpg?_wi=4",
imageAlt: "Contact Paintasy for your event",
},
]}
mediaAnimation="opacity"
titleClassName="text-5xl font-extrabold"
descriptionClassName="text-lg opacity-90" descriptionClassName="text-lg opacity-90"
/> />
</div> </div>
<div id="contact-form" data-section="contact-form" className="mx-auto px-4 md:px-6 py-16"> <div id="contact-cta" data-section="contact-cta">
<div className="max-w-2xl mx-auto"> <ContactText
<h2 className="text-3xl font-extrabold mb-4">Request a Quote</h2> text="Ready to add magic to your event? Contact Paintasy Face and Body Art today. We'd love to discuss your event and create an unforgettable experience for your guests. Get your quote or schedule a consultation now!"
<p className="text-lg opacity-90 mb-8">Tell us about your event and get a personalized quote from our team. We'll respond within 24 hours.</p> animationType="background-highlight"
<form className="space-y-6 bg-gradient-to-br from-card to-background p-8 rounded-lg border border-accent"> background={{ variant: "sparkles-gradient" }}
<div> useInvertedBackground={false}
<label className="block text-sm font-semibold mb-2">Event Type</label> buttons={[
<select { text: "Email Us", href: "mailto:paintasy@events.com" },
value={formData.eventType} { text: "Call +1 (555) 123-4567", href: "tel:+15551234567" },
onChange={(e) => setFormData({ ...formData, eventType: e.target.value })} ]}
className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta" containerClassName="py-16"
> textClassName="text-3xl font-extrabold text-center"
<option value="">Select an event type...</option> buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
<option value="kids-party">Kids Birthday Party</option> />
<option value="festival">Festival or Outdoor Event</option>
<option value="corporate">Corporate Event</option>
<option value="wedding">Wedding</option>
<option value="school">School Event</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label className="block text-sm font-semibold mb-2">Event Date</label>
<input
type="date"
value={formData.eventDate}
onChange={(e) => setFormData({ ...formData, eventDate: e.target.value })}
className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
/>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-semibold mb-2">Full Name</label>
<input
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
placeholder="Your name"
className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-opacity-50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
/>
</div>
<div>
<label className="block text-sm font-semibold mb-2">Email</label>
<input
type="email"
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
placeholder="your@email.com"
className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-opacity-50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
/>
</div>
</div>
<div>
<label className="block text-sm font-semibold mb-2">Phone Number</label>
<input
type="tel"
value={formData.phone}
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
placeholder="(555) 123-4567"
className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-opacity-50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
/>
</div>
<div>
<label className="block text-sm font-semibold mb-2">Tell Us About Your Event</label>
<textarea
value={formData.message}
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
placeholder="Event details, number of attendees, design preferences..."
rows={5}
className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-opacity-50 focus:outline-none focus:ring-2 focus:ring-primary-cta resize-none"
/>
</div>
<button
type="submit"
onClick={(e) => {
e.preventDefault();
window.location.href = `mailto:paintasy@events.com?subject=Face Painting Quote Request from ${formData.name}&body=Event Type: ${formData.eventType}%0AEvent Date: ${formData.eventDate}%0AName: ${formData.name}%0AEmail: ${formData.email}%0APhone: ${formData.phone}%0A%0AEvent Details:%0A${formData.message}`;
}}
className="w-full px-6 py-3 bg-gradient-to-r from-primary-cta to-accent text-white font-semibold rounded-lg hover:shadow-lg transition-shadow"
>
Send Quote Request
</button>
</form>
</div>
</div> </div>
<div id="contact-info" data-section="contact-info" className="mx-auto px-4 md:px-6 py-16"> <div id="contact-faq" data-section="contact-faq">
<div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8"> <FaqBase
<div className="text-center"> title="Frequently Asked Questions"
<div className="mb-4 text-4xl">📞</div> description="Everything you need to know about booking Paintasy for your event."
<h3 className="text-xl font-extrabold mb-2">Call Us</h3> tag="FAQ"
<p className="opacity-90">Phone and text</p> tagIcon={HelpCircle}
<a href="tel:+15551234567" className="text-primary-cta font-semibold hover:underline mt-2 inline-block"> tagAnimation="slide-up"
+1 (555) 123-4567 textboxLayout="default"
</a> animationType="smooth"
</div> faqsAnimation="slide-up"
<div className="text-center"> useInvertedBackground={true}
<div className="mb-4 text-4xl">✉️</div> showCard={true}
<h3 className="text-xl font-extrabold mb-2">Email Us</h3> faqs={[
<p className="opacity-90">We'll respond within 24 hours</p> {
<a href="mailto:paintasy@events.com" className="text-primary-cta font-semibold hover:underline mt-2 inline-block"> id: "faq-1",
paintasy@events.com title: "How far in advance should I book?",
</a> content:
</div> "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.",
<div className="text-center"> },
<div className="mb-4 text-4xl">🎨</div> {
<h3 className="text-xl font-extrabold mb-2">Follow Us</h3> id: "faq-2",
<p className="opacity-90">Connect on social media</p> title: "Are your face paints safe for children?",
<div className="flex justify-center gap-4 mt-2"> content:
<a href="https://instagram.com" className="text-primary-cta hover:underline">Instagram</a> "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.",
<a href="https://facebook.com" className="text-primary-cta hover:underline">Facebook</a> },
</div> {
</div> id: "faq-3",
</div> title: "How long does face painting take per person?",
content:
"Simple designs typically take 3-5 minutes, while more detailed or custom designs take 8-12 minutes. At festivals, we optimize for speed without sacrificing quality. For parties, we allow a bit more time for custom designs and interactions with children.",
},
{
id: "faq-4",
title: "What if someone has a skin allergy?",
content:
"We have hypoallergenic options available. Please inform us of any allergies when booking. We're always happy to discuss alternative products or test patches before proceeding with full face painting.",
},
{
id: "faq-5",
title: "Can you do custom designs?",
content:
"Yes! We specialize in custom designs for themed parties and corporate events. Please provide theme details or reference images when booking. There may be a small additional fee for very complex custom designs.",
},
{
id: "faq-6",
title: "What's included in your packages?",
content:
"All packages include professional face painting service, setup and teardown, and our artist's materials. Some packages include additional services like temporary tattoos or body painting. Check specific package details for what's included.",
},
]}
buttons={[{ text: "View Packages", href: "/packages" }]}
buttonAnimation="blur-reveal"
containerClassName="gap-12"
titleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90 max-w-3xl"
/>
</div> </div>
<div id="footer-contact" data-section="footer-contact" className="mx-auto px-4 md:px-6"> <div id="footer" data-section="footer">
<FooterSimple <FooterSimple
columns={footerColumns} columns={footerColumns}
bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved." bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
bottomRightText="Professional Event Entertainment | Creative Services" 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> </div>
</ThemeProvider> </ThemeProvider>
); );
} }

268
src/app/gallery/page.tsx
View File

@@ -1,59 +1,57 @@
"use client"; "use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import ProductCardFour from '@/components/sections/product/ProductCardFour'; import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import ContactText from '@/components/sections/contact/ContactText'; import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FooterSimple from '@/components/sections/footer/FooterSimple'; import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Camera, Sparkles } from 'lucide-react'; import Link from "next/link";
export const metadata = {
title: "Gallery - Face Painting & Body Art Portfolio | Paintasy", description: "View our complete gallery of professional face painting and body art work. Real photos from parties, festivals, corporate events, and special occasions. Browse creative designs by category.", keywords: "face painting gallery, body art portfolio, face painting photos, face painter work, professional face art, event entertainment"};
export default function GalleryPage() { export default function GalleryPage() {
const navItems = [ const navItems = [
{ name: "Home", id: "/" }, { name: "Home", id: "home" },
{ name: "Services", id: "/services" }, { name: "Services", id: "services" },
{ name: "Gallery", id: "/gallery" }, { name: "Gallery", id: "gallery" },
{ name: "Packages", id: "/" }, { name: "Packages", id: "packages" },
{ name: "About", id: "/" }, { name: "About", id: "about" },
{ name: "Contact", id: "/contact" }, { name: "Contact", id: "contact" },
]; ];
const footerColumns = [ const footerColumns = [
{ {
title: "Services", items: [ title: "Gallery",
{ label: "Kids Party Face Painting", href: "/services" }, items: [
{ label: "Festival Face Art", href: "/services" }, { label: "Kids Designs", href: "#gallery" },
{ label: "Corporate Events", href: "/services" }, { label: "Festival Art", href: "#gallery" },
{ label: "Body Painting", href: "/services" }, { label: "Body Painting", href: "#gallery" },
{ label: "Custom Designs", href: "/services" }, { label: "Custom Designs", href: "#gallery" },
], ],
}, },
{ {
title: "Company", items: [ title: "Services",
{ label: "About Us", href: "/" }, items: [
{ label: "Gallery", href: "/gallery" }, { label: "All Services", href: "/services" },
{ label: "Packages", href: "/" }, { label: "Packages", href: "/packages" },
{ label: "FAQ", href: "/" }, { label: "Pricing", href: "/packages" },
{ label: "Contact", href: "/contact" }, { label: "About", href: "/about" },
], ],
}, },
{ {
title: "Connect", items: [ title: "Social Media",
items: [
{ label: "Instagram", href: "https://instagram.com" }, { label: "Instagram", href: "https://instagram.com" },
{ label: "Facebook", href: "https://facebook.com" }, { label: "Facebook", href: "https://facebook.com" },
{ label: "TikTok", href: "https://tiktok.com" }, { label: "TikTok", href: "https://tiktok.com" },
{ label: "Email", href: "mailto:paintasy@events.com" }, { label: "Email", href: "mailto:paintasy@events.com" },
{ label: "Phone", href: "tel:+15551234567" },
], ],
}, },
{ {
title: "Service Areas", items: [ title: "Book Now",
{ label: "Local Events", href: "/contact" }, items: [
{ label: "Regional Coverage", href: "/contact" }, { label: "View Packages", href: "/packages" },
{ label: "Book Now", href: "/" }, { label: "Request Quote", href: "/contact" },
{ label: "Get Quote", href: "/contact" }, { label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "#faq" },
], ],
}, },
]; ];
@@ -73,148 +71,136 @@ export default function GalleryPage() {
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleFullscreen <NavbarStyleFullscreen
brandName="Paintasy"
navItems={navItems} navItems={navItems}
brandName="Paintasy"
bottomLeftText="Creative Face & Body Art" bottomLeftText="Creative Face & Body Art"
bottomRightText="paintasy@events.com" bottomRightText="paintasy@events.com"
/> />
</div> </div>
<div id="gallery-kids" data-section="gallery-kids" className="mx-auto px-4 md:px-6 pt-24"> <div id="gallery-page-hero" data-section="gallery-page-hero">
<ProductCardFour <HeroBillboardGallery
title="Kids Party Face Painting Gallery" title="Event Photo Gallery"
description="Creative, colorful face painting designs perfect for children's birthday parties and celebrations. Safe, high-quality art that brings smiles to young faces." description="Real photos from real events. Browse our portfolio of professional face painting and body art work."
tag="Kids Designs" background={{ variant: "radial-gradient" }}
tagIcon={Sparkles} buttons={[
tagAnimation="slide-up"
textboxLayout="default"
animationType="opacity"
useInvertedBackground={false}
gridVariant="three-columns-all-equal-width"
carouselMode="buttons"
products={[
{ {
id: "kids-1", name: "Butterfly Dreams", price: "Kids Design", variant: "Birthday Favorite", imageSrc: "http://img.b2bpic.net/free-photo/cute-girl-with-painted-face_23-2149089213.jpg", imageAlt: "Colorful butterfly face painting for kids"}, text: "Book Your Event",
{ href: "/packages",
id: "kids-2", name: "Superhero Mask", price: "Kids Design", variant: "Party Popular", imageSrc: "http://img.b2bpic.net/free-photo/boy-face-painting_23-2148784394.jpg", imageAlt: "Superhero mask face painting for children"}, },
{
id: "kids-3", name: "Princess Crown", price: "Kids Design", variant: "Girls Favorite", imageSrc: "http://img.b2bpic.net/free-photo/little-girl-with-face-painting_23-2149089210.jpg", imageAlt: "Princess themed face painting with crown design"},
{
id: "kids-4", name: "Animal Fun", price: "Kids Design", variant: "All Ages", imageSrc: "http://img.b2bpic.net/free-photo/child-face-painted-tiger_23-2148948273.jpg", imageAlt: "Tiger face painting design for children"},
{
id: "kids-5", name: "Galaxy Stars", price: "Kids Design", variant: "Popular Choice", imageSrc: "http://img.b2bpic.net/free-photo/girl-with-stars-face-paint_23-2149089215.jpg", imageAlt: "Galaxy and stars face painting artwork"},
{
id: "kids-6", name: "Glitter Rainbow", price: "Kids Design", variant: "Party Favorite", imageSrc: "http://img.b2bpic.net/free-photo/child-with-rainbow-face-paint_23-2148948275.jpg", imageAlt: "Rainbow glitter face painting design"},
]} ]}
buttons={[{ text: "Book Kids Party Painting", href: "/contact" }]}
buttonAnimation="blur-reveal" buttonAnimation="blur-reveal"
ariaLabel="Kids party face painting gallery" mediaItems={[
containerClassName="gap-12" {
titleClassName="text-4xl font-extrabold" imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=2",
descriptionClassName="text-lg opacity-90 max-w-3xl" imageAlt: "Festival face painting event photography",
},
]}
mediaAnimation="opacity"
titleClassName="text-5xl font-extrabold"
descriptionClassName="text-lg opacity-90"
ariaLabel="Gallery page hero section"
/> />
</div> </div>
<div id="gallery-festival" data-section="gallery-festival" className="mx-auto px-4 md:px-6 pt-16"> <div id="gallery-showcase" data-section="gallery-showcase">
<ProductCardFour <ProductCardFour
title="Festival & Event Face Art" title="Complete Portfolio"
description="Professional face painting showcasing artistic designs from festivals, outdoor events, and large gatherings. Fast, creative service with stunning results." description="Browse our complete collection of face painting and body art from events throughout the year."
tag="Festival Art"
tagIcon={Camera}
tagAnimation="slide-up"
textboxLayout="default" textboxLayout="default"
animationType="opacity" animationType="opacity"
useInvertedBackground={true} useInvertedBackground={true}
gridVariant="three-columns-all-equal-width" gridVariant="bento-grid"
carouselMode="buttons" carouselMode="buttons"
products={[ products={[
{ {
id: "festival-1", name: "Artistic Abstraction", price: "Festival Design", variant: "Modern Art", imageSrc: "http://img.b2bpic.net/free-photo/face-art-festival_23-2148784315.jpg", imageAlt: "Abstract artistic face painting design"}, id: "gallery-kids-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=2",
imageAlt: "Kids birthday party face painting designs",
},
{ {
id: "festival-2", name: "Geometric Patterns", price: "Festival Design", variant: "Contemporary", imageSrc: "http://img.b2bpic.net/free-photo/geometric-face-paint-design_23-2148948280.jpg", imageAlt: "Geometric pattern face painting artwork"}, id: "gallery-festival-1",
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=3",
imageAlt: "Festival face painting artwork showcase",
},
{ {
id: "festival-3", name: "Nature Inspired", price: "Festival Design", variant: "Organic Art", imageSrc: "http://img.b2bpic.net/free-photo/nature-themed-face-art_23-2149089220.jpg", imageAlt: "Nature inspired face painting with floral elements"}, id: "gallery-body-1",
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=2",
imageAlt: "Professional body art photography",
},
{ {
id: "festival-4", name: "Metallic Shine", price: "Festival Design", variant: "Bold Statement", imageSrc: "http://img.b2bpic.net/free-photo/metallic-face-paint_23-2148948282.jpg", imageAlt: "Metallic gold and silver face painting design"}, id: "gallery-custom-1",
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=2",
imageAlt: "Custom themed face painting designs",
},
{ {
id: "festival-5", name: "Vibrant Expression", price: "Festival Design", variant: "Artistic", imageSrc: "http://img.b2bpic.net/free-photo/vibrant-face-paint-art_23-2149089225.jpg", imageAlt: "Vibrant multicolor face painting creation"}, id: "gallery-kids-2",
name: "Princess & Character",
price: "Enchanting Designs",
variant: "Theme Parties",
imageSrc: "http://img.b2bpic.net/free-psd/holi-festival-celebration-instagram-posts_23-2151227255.jpg?_wi=3",
imageAlt: "Princess character face painting designs",
},
{ {
id: "festival-6", name: "Cosmic Design", price: "Festival Design", variant: "Space Theme", imageSrc: "http://img.b2bpic.net/free-photo/cosmic-face-art_23-2148948285.jpg", imageAlt: "Cosmic and space themed face painting"}, id: "gallery-festival-2",
name: "Festival Entertainment",
price: "Live Entertainment",
variant: "Large Events",
imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=4",
imageAlt: "Festival face painter with audience",
},
{
id: "gallery-body-2",
name: "Artistic Body Designs",
price: "High Impact Art",
variant: "Photo Shoots",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=3",
imageAlt: "Artistic body painting photoshoot",
},
{
id: "gallery-corporate",
name: "Corporate Events",
price: "Professional Art",
variant: "Team Events",
imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=3",
imageAlt: "Corporate event face painting",
},
]} ]}
buttons={[{ text: "Book Festival Entertainment", href: "/contact" }]}
buttonAnimation="blur-reveal"
ariaLabel="Festival and event face art gallery"
containerClassName="gap-12"
titleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90 max-w-3xl"
/>
</div>
<div id="gallery-body-art" data-section="gallery-body-art" className="mx-auto px-4 md:px-6 pt-16">
<ProductCardFour
title="Professional Body Art & Advanced Designs"
description="Premium body painting and advanced face art designs for special occasions. Professional artwork by experienced face painters specializing in detailed, high-impact designs."
tag="Professional Art"
tagIcon={Sparkles}
tagAnimation="slide-up"
textboxLayout="default"
animationType="opacity"
useInvertedBackground={false}
gridVariant="three-columns-all-equal-width"
carouselMode="buttons"
products={[
{
id: "body-1", name: "Full Body Art", price: "Premium Design", variant: "Special Events", imageSrc: "http://img.b2bpic.net/free-photo/body-art-painting_23-2149159240.jpg", imageAlt: "Professional full body art painting"},
{
id: "body-2", name: "Elegant Face Art", price: "Premium Design", variant: "Professional", imageSrc: "http://img.b2bpic.net/free-photo/elegant-face-design_23-2148948290.jpg", imageAlt: "Elegant professional face art design"},
{
id: "body-3", name: "Detailed Portrait", price: "Premium Design", variant: "Artistic", imageSrc: "http://img.b2bpic.net/free-photo/detailed-portrait-face-art_23-2149089230.jpg", imageAlt: "Detailed portrait style face painting"},
{
id: "body-4", name: "Character Design", price: "Premium Design", variant: "Creative", imageSrc: "http://img.b2bpic.net/free-photo/character-face-art_23-2148948292.jpg", imageAlt: "Character themed face art design"},
{
id: "body-5", name: "Fantasy Makeup", price: "Premium Design", variant: "Special Occasion", imageSrc: "http://img.b2bpic.net/free-photo/fantasy-face-makeup_23-2149089235.jpg", imageAlt: "Fantasy themed face makeup art"},
{
id: "body-6", name: "Custom Artwork", price: "Premium Design", variant: "Bespoke", imageSrc: "http://img.b2bpic.net/free-photo/custom-face-art_23-2148948295.jpg", imageAlt: "Custom face art design created for client"},
]}
buttons={[{ text: "Request Custom Design", href: "/contact" }]}
buttonAnimation="blur-reveal"
ariaLabel="Professional body art and advanced designs 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-16">
<ContactText
text="Love what you see in our gallery? Our professional face painters are ready to create custom designs for your next event. Whether it's a kids party, festival, or corporate celebration, we bring creativity and expertise to every face painting service."
animationType="background-highlight"
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
buttons={[ buttons={[
{ text: "Book Face Painting Now", href: "/contact" }, {
{ text: "View Packages", href: "/" }, text: "Book Now",
href: "/packages",
},
]} ]}
ariaLabel="Gallery contact section" buttonAnimation="blur-reveal"
containerClassName="py-16" containerClassName="gap-12"
contentClassName="max-w-3xl mx-auto" titleClassName="text-4xl font-extrabold"
textClassName="text-4xl font-extrabold text-center" descriptionClassName="text-lg opacity-90"
buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8" ariaLabel="Photo gallery portfolio section"
/> />
</div> </div>
<div id="footer-gallery" data-section="footer-gallery" className="mx-auto px-4 md:px-6 pt-16"> <div id="gallery-footer" data-section="gallery-footer">
<FooterSimple <FooterSimple
columns={footerColumns} columns={footerColumns}
bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved." bottomLeftText="© 2024 Paintasy Face and Body Art."
bottomRightText="Professional Event Entertainment | Creative Services" bottomRightText="Authentic Event Photography"
ariaLabel="Site footer with links" ariaLabel="Gallery page footer"
containerClassName="gap-12" containerClassName="gap-12"
columnsClassName="grid-cols-2 lg:grid-cols-4"
columnTitleClassName="font-extrabold text-lg"
columnItemClassName="hover:opacity-70 transition-opacity"
/> />
</div> </div>
</ThemeProvider> </ThemeProvider>
); );
} }

287
src/app/packages/page.tsx
View File

@@ -1,13 +1,12 @@
"use client"; "use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery'; import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import PricingCardFive from '@/components/sections/pricing/PricingCardFive'; import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm'; import ContactText from "@/components/sections/contact/ContactText";
import ContactText from '@/components/sections/contact/ContactText'; import FooterSimple from "@/components/sections/footer/FooterSimple";
import FooterSimple from '@/components/sections/footer/FooterSimple'; import Link from "next/link";
import { Sparkles, DollarSign, HelpCircle } from 'lucide-react';
export default function PackagesPage() { export default function PackagesPage() {
const navItems = [ const navItems = [
@@ -21,46 +20,43 @@ export default function PackagesPage() {
const footerColumns = [ const footerColumns = [
{ {
title: "Services", items: [ title: "Packages",
{ label: "Kids Party Face Painting", href: "/services" }, items: [
{ label: "Festival Face Art", href: "/services" }, { label: "Birthday Packages", href: "#packages" },
{ label: "Corporate Events", href: "/services" }, { label: "Festival Service", href: "#packages" },
{ label: "Body Painting", href: "/services" }, { label: "Corporate Events", href: "#packages" },
{ label: "Custom Designs", href: "/services" }, { label: "Custom Packages", href: "/contact" },
], ],
}, },
{ {
title: "Company", items: [ title: "Services",
{ label: "About Us", href: "/about" }, items: [
{ label: "All Services", href: "/services" },
{ label: "Gallery", href: "/gallery" }, { label: "Gallery", href: "/gallery" },
{ label: "Packages", href: "/packages" }, { label: "About", href: "/about" },
{ label: "FAQ", href: "#faq" }, { label: "FAQ", href: "#faq" },
{ label: "Contact", href: "/contact" },
], ],
}, },
{ {
title: "Connect", items: [ title: "Social",
items: [
{ label: "Instagram", href: "https://instagram.com" }, { label: "Instagram", href: "https://instagram.com" },
{ label: "Facebook", href: "https://facebook.com" }, { label: "Facebook", href: "https://facebook.com" },
{ label: "TikTok", href: "https://tiktok.com" }, { label: "TikTok", href: "https://tiktok.com" },
{ label: "Email", href: "mailto:paintasy@events.com" }, { label: "Email", href: "mailto:paintasy@events.com" },
{ label: "Phone", href: "tel:+15551234567" },
], ],
}, },
{ {
title: "Service Areas", items: [ title: "Book Now",
{ label: "Local Events", href: "/contact" }, items: [
{ label: "Regional Coverage", href: "/contact" }, { label: "Request Quote", href: "/contact" },
{ label: "Book Now", href: "/packages" }, { label: "Chat with Us", href: "/contact" },
{ label: "Get Quote", href: "/contact" }, { label: "Call Now", href: "tel:+15551234567" },
{ label: "FAQ", href: "#faq" },
], ],
}, },
]; ];
const handleBookingSubmit = (data: Record<string, string>) => {
console.log("Booking inquiry submitted:", data);
};
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="shift-hover" defaultButtonVariant="shift-hover"
@@ -76,136 +72,205 @@ export default function PackagesPage() {
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleFullscreen <NavbarStyleFullscreen
brandName="Paintasy"
navItems={navItems} navItems={navItems}
brandName="Paintasy"
bottomLeftText="Creative Face & Body Art" bottomLeftText="Creative Face & Body Art"
bottomRightText="paintasy@events.com" bottomRightText="paintasy@events.com"
/> />
</div> </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 <HeroBillboardGallery
title="Event Packages & Booking" title="Event Packages & Pricing"
description="Simple, flexible pricing for parties, festivals, and corporate events. Each package includes professional service and artistic creativity. Book your event today!" description="Flexible, transparent pricing for every type of event. From intimate celebrations to large festivals, we have the perfect package for you."
background={{ variant: "radial-gradient" }} background={{ variant: "gradient-bars" }}
tag="Transparent Pricing"
tagIcon={Sparkles}
tagAnimation="slide-up"
buttons={[ buttons={[
{ text: "View Packages", href: "#pricing" }, {
{ text: "Get a Custom Quote", href: "#booking-form" }, text: "Request a Quote",
href: "/contact",
},
]} ]}
buttonAnimation="blur-reveal" buttonAnimation="blur-reveal"
mediaItems={[ mediaItems={[
{ {
imageSrc: "http://img.b2bpic.net/free-photo/happy-excited-children-sitting-down-floor-hugging-celebrating-child-birthday-party_231208-3661.jpg", imageAlt: "Happy kids at a party with face painting"}, imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=4",
imageAlt: "Event face painting packages",
},
]} ]}
mediaAnimation="opacity" mediaAnimation="opacity"
ariaLabel="Packages and booking hero section" titleClassName="text-5xl font-extrabold"
className="min-h-screen" descriptionClassName="text-lg opacity-90"
containerClassName="flex flex-col lg:flex-row items-center justify-between gap-12" ariaLabel="Packages page hero section"
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>
<div id="pricing" data-section="pricing" className="mx-auto px-4 md:px-6"> <div id="packages-pricing" data-section="packages-pricing">
<PricingCardFive <PricingCardFive
title="Choose Your Package" title="Our Event Packages"
description="Select the package that best fits your event needs. All packages include professional service, setup, and our artist's materials. Custom packages available upon request." description="Simple, flexible pricing tailored to your event needs. All packages include professional service, artistic creativity, and great customer care."
tag="Transparent Pricing"
tagIcon={DollarSign}
tagAnimation="slide-up"
textboxLayout="default" textboxLayout="default"
animationType="scale-rotate" animationType="scale-rotate"
useInvertedBackground={false} useInvertedBackground={false}
plans={[ plans={[
{ {
id: "birthday-basic", tag: "Popular", price: "$150", period: "per hour", description: "Perfect for small birthday celebrations", button: { text: "Request Quote", href: "#booking-form" }, id: "pkg-birthday-basic",
featuresTitle: "What's Included", features: [ tag: "Great Start",
"Up to 15 kids", "Colorful themed designs", "Face painting only", "Basic design themes", "Professional artist"], 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: "Request Quote", href: "#booking-form" }, id: "pkg-birthday-deluxe",
featuresTitle: "What's Included", features: [ tag: "Most Popular",
"Up to 25 kids", "Custom themed designs", "Face & temporary tattoos", "Interactive entertainment", "Professional artist", "Setup & teardown"], 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: "Request Quote", href: "#booking-form" }, id: "pkg-birthday-premium",
featuresTitle: "What's Included", features: [ tag: "Best Value",
"High-capacity crowd service", "Fast artistic designs", "Setup & teardown included", "Portable station", "5-10 min per person", "Weather-resistant setup"], 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: "Schedule Consultation",
href: "/contact",
}, },
]} ]}
buttons={[{ text: "Get Custom Package", href: "#booking-form" }]}
buttonAnimation="blur-reveal" buttonAnimation="blur-reveal"
ariaLabel="Event packages pricing section"
containerClassName="gap-12"
titleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90 max-w-3xl"
cardClassName="p-8"
/>
</div>
<div id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6">
<ContactSplitForm
title="Book Your Event"
description="Fill out the form below to request a booking or get a custom quote. We'll get back to you within 24 hours with pricing and availability."
useInvertedBackground={true}
inputs={[
{ name: "fullName", type: "text", placeholder: "Your Full Name", required: true },
{ name: "email", type: "email", placeholder: "Your Email Address", required: true },
{ name: "phone", type: "tel", placeholder: "Your Phone Number", required: true },
{ name: "eventDate", type: "date", placeholder: "Event Date", required: true },
{ name: "eventType", type: "text", placeholder: "Event Type (Birthday, Festival, Corporate, etc.)", required: true },
{ name: "guestCount", type: "number", placeholder: "Expected Number of Guests", required: true },
{ name: "location", type: "text", placeholder: "Event Location", required: true },
]}
textarea={{
name: "eventDetails", placeholder: "Tell us about your event - theme, special requests, design preferences, or any other details you'd like us to know.", rows: 6,
required: false,
}}
buttonText="Request Booking"
onSubmit={handleBookingSubmit}
mediaPosition="right"
imageSrc="http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1"
imageAlt="Face painting booking inquiry"
mediaAnimation="opacity"
ariaLabel="Booking form section"
containerClassName="gap-12" containerClassName="gap-12"
titleClassName="text-4xl font-extrabold" titleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90" descriptionClassName="text-lg opacity-90"
ariaLabel="Pricing section with event packages"
/> />
</div> </div>
<div id="cta-packages" data-section="cta-packages" className="mx-auto px-4 md:px-6"> <div id="packages-cta" data-section="packages-cta">
<ContactText <ContactText
text="Ready to make your event unforgettable? Browse our packages above or contact us for a custom quote. We're excited to bring creative face painting to your celebration!" 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" animationType="background-highlight"
background={{ variant: "radial-gradient" }} background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false} useInvertedBackground={true}
buttons={[ buttons={[
{ text: "Send a Message", href: "#booking-form" }, {
{ text: "Call Us", href: "tel:+15551234567" }, text: "Request Custom Quote",
href: "/contact",
},
]} ]}
ariaLabel="Call-to-action for bookings"
containerClassName="py-16" containerClassName="py-16"
contentClassName="max-w-3xl mx-auto" textClassName="text-3xl font-extrabold text-center"
textClassName="text-4xl font-extrabold text-center" ariaLabel="Custom packages call-to-action section"
buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
/> />
</div> </div>
<div id="footer-packages" data-section="footer-packages" className="mx-auto px-4 md:px-6"> <div id="packages-footer" data-section="packages-footer">
<FooterSimple <FooterSimple
columns={footerColumns} columns={footerColumns}
bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved." bottomLeftText="© 2024 Paintasy Face and Body Art."
bottomRightText="Professional Event Entertainment | Creative Services" bottomRightText="Simple Transparent Pricing"
ariaLabel="Site footer with links" ariaLabel="Packages page footer"
containerClassName="gap-12" containerClassName="gap-12"
columnsClassName="grid-cols-2 lg:grid-cols-4"
columnTitleClassName="font-extrabold text-lg"
columnItemClassName="hover:opacity-70 transition-opacity"
/> />
</div> </div>
</ThemeProvider> </ThemeProvider>

22
src/app/page.tsx
View File

@@ -185,8 +185,7 @@ export default function HomePage() {
buttonAnimation="blur-reveal" buttonAnimation="blur-reveal"
ariaLabel="Services section showcasing offerings" ariaLabel="Services section showcasing offerings"
containerClassName="gap-12" containerClassName="gap-12"
titleClassName="text-4xl font-extrabold" itemClassName=""
descriptionClassName="text-lg opacity-90 max-w-3xl"
/> />
</div> </div>
@@ -207,7 +206,7 @@ export default function HomePage() {
"Up to 15 kids", "Colorful themed designs", "Face painting only", "Basic design themes"], "Up to 15 kids", "Colorful themed designs", "Face painting only", "Basic design themes"],
}, },
{ {
id: "birthday-deluxe", tag: "Best Value", price: "$200", period: "per 2 hours", description: "Full party entertainment package", 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: [ featuresTitle: "What's Included", features: [
"Up to 25 kids", "Custom themed designs", "Face & temporary tattoos", "Interactive entertainment"], "Up to 25 kids", "Custom themed designs", "Face & temporary tattoos", "Interactive entertainment"],
}, },
@@ -221,8 +220,8 @@ export default function HomePage() {
buttonAnimation="blur-reveal" buttonAnimation="blur-reveal"
ariaLabel="Pricing section with package options" ariaLabel="Pricing section with package options"
containerClassName="gap-12" containerClassName="gap-12"
titleClassName="text-4xl font-extrabold" textBoxTitleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90 max-w-3xl" textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
cardClassName="p-8" cardClassName="p-8"
/> />
</div> </div>
@@ -262,8 +261,8 @@ export default function HomePage() {
buttonAnimation="blur-reveal" buttonAnimation="blur-reveal"
ariaLabel="Client testimonials section" ariaLabel="Client testimonials section"
containerClassName="gap-12" containerClassName="gap-12"
titleClassName="text-4xl font-extrabold" textBoxTitleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90 max-w-3xl" textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
/> />
</div> </div>
@@ -293,8 +292,8 @@ export default function HomePage() {
buttonAnimation="blur-reveal" buttonAnimation="blur-reveal"
ariaLabel="Photo gallery preview section" ariaLabel="Photo gallery preview section"
containerClassName="gap-12" containerClassName="gap-12"
titleClassName="text-4xl font-extrabold" textBoxTitleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90 max-w-3xl" textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
/> />
</div> </div>
@@ -306,7 +305,6 @@ export default function HomePage() {
tagIcon={HelpCircle} tagIcon={HelpCircle}
tagAnimation="slide-up" tagAnimation="slide-up"
textboxLayout="default" textboxLayout="default"
animationType="smooth"
faqsAnimation="slide-up" faqsAnimation="slide-up"
useInvertedBackground={true} useInvertedBackground={true}
showCard={true} showCard={true}
@@ -328,8 +326,8 @@ export default function HomePage() {
buttonAnimation="blur-reveal" buttonAnimation="blur-reveal"
ariaLabel="FAQ section with common questions" ariaLabel="FAQ section with common questions"
containerClassName="gap-12" containerClassName="gap-12"
titleClassName="text-4xl font-extrabold" textBoxTitleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90 max-w-3xl" textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
/> />
</div> </div>

240
src/app/services/page.tsx
View File

@@ -4,10 +4,9 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery'; import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen'; 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 FooterSimple from '@/components/sections/footer/FooterSimple';
import { Sparkles, Palette, Heart, Smile, Zap, Star, Music, Users, DollarSign, HelpCircle } from 'lucide-react'; import Link from 'next/link';
import { Smile, Heart, Sparkles, Zap, Music, Briefcase, Target, Users, Award, Palette, Star, Camera } from 'lucide-react';
export default function ServicesPage() { export default function ServicesPage() {
const navItems = [ const navItems = [
@@ -21,36 +20,36 @@ export default function ServicesPage() {
const footerColumns = [ const footerColumns = [
{ {
title: "Services", items: [ title: "Services",
{ label: "Kids Party Face Painting", href: "/services" }, items: [
{ label: "Festival Face Art", href: "/services" }, { label: "Kids Party Face Painting", href: "#service-1" },
{ label: "Corporate Events", href: "/services" }, { label: "Festival Face Art", href: "#service-2" },
{ label: "Body Painting", href: "/services" }, { label: "Corporate Events", href: "#service-3" },
{ label: "Custom Designs", href: "/services" }, { label: "Body Painting", href: "#service-4" },
], ],
}, },
{ {
title: "Company", items: [ title: "Quick Links",
{ label: "About Us", href: "/about" }, items: [
{ label: "Gallery", href: "/gallery" }, { label: "Gallery", href: "/gallery" },
{ label: "Packages", href: "/packages" }, { label: "Packages", href: "/packages" },
{ label: "FAQ", href: "#faq" }, { label: "About", href: "/about" },
{ label: "Contact", href: "/contact" }, { label: "Contact", href: "/contact" },
], ],
}, },
{ {
title: "Connect", items: [ title: "Connect",
items: [
{ label: "Instagram", href: "https://instagram.com" }, { label: "Instagram", href: "https://instagram.com" },
{ label: "Facebook", href: "https://facebook.com" }, { label: "Facebook", href: "https://facebook.com" },
{ label: "TikTok", href: "https://tiktok.com" }, { label: "TikTok", href: "https://tiktok.com" },
{ label: "Email", href: "mailto:paintasy@events.com" }, { label: "Email", href: "mailto:paintasy@events.com" },
{ label: "Phone", href: "tel:+15551234567" },
], ],
}, },
{ {
title: "Service Areas", items: [ title: "Get Started",
{ label: "Local Events", href: "/contact" }, items: [
{ label: "Regional Coverage", href: "/contact" }, { label: "View Packages", href: "/packages" },
{ label: "Book Now", href: "/packages" }, { label: "Book Now", href: "/packages" },
{ label: "Get Quote", href: "/contact" }, { label: "Get Quote", href: "/contact" },
], ],
@@ -79,194 +78,113 @@ export default function ServicesPage() {
/> />
</div> </div>
<div id="hero-services" data-section="hero-services" className="mx-auto px-4 md:px-6"> <div id="services-page-hero" data-section="services-page-hero" className="mx-auto px-4 md:px-6">
<HeroBillboardGallery <HeroBillboardGallery
title="Our 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 to all your special moments." 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: "radial-gradient" }} background={{ variant: "sparkles-gradient" }}
tag="Professional Services" buttons={[{ text: "Book Now", href: "/packages" }]}
tagIcon={Sparkles}
tagAnimation="slide-up"
buttons={[
{ text: "Book Now", href: "/packages" },
{ text: "Get a Quote", href: "/contact" },
]}
buttonAnimation="blur-reveal" buttonAnimation="blur-reveal"
mediaItems={[ mediaItems={[
{ {
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1", imageAlt: "Professional face painting services showcase"}, imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=2",
imageAlt: "Professional face painting services",
},
]} ]}
mediaAnimation="opacity" mediaAnimation="opacity"
ariaLabel="Services hero section" ariaLabel="Services page hero section"
className="min-h-screen" titleClassName="text-5xl font-extrabold"
containerClassName="flex flex-col lg:flex-row items-center justify-between gap-12" descriptionClassName="text-lg opacity-90 max-w-2xl"
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>
<div id="kids-parties" data-section="kids-parties" className="mx-auto px-4 md:px-6"> <div id="services-detailed" data-section="services-detailed" className="mx-auto px-4 md:px-6">
<FeatureCardTen <FeatureCardTen
title="Kids Party Face Painting" title="Complete Service Offerings"
description="Make every birthday celebration unforgettable with our colorful and playful face painting designs. Our artists specialize in creating magical moments for children of all ages." description="Each service is tailored to deliver maximum enjoyment and artistic quality."
tag="Party Entertainment"
tagIcon={Smile}
tagAnimation="slide-up"
textboxLayout="default" textboxLayout="default"
animationType="slide-up" animationType="slide-up"
useInvertedBackground={false} useInvertedBackground={false}
features={[ features={[
{ {
id: "superhero-designs", title: "Superhero Designs", description: "Transform kids into their favorite superheroes with bold, colorful, and inspiring designs that make them feel powerful and special.", media: { id: "service-1",
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1", imageAlt: "Superhero face painting for kids"}, 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",
},
items: [ items: [
{ icon: Star, text: "Superman, Batman, Wonder Woman" }, { icon: Smile, text: "Butterfly, animal & character designs" },
{ icon: Sparkles, text: "Colorful and detailed designs" }, { icon: Heart, text: "Safe, child-friendly face paints" },
{ icon: Heart, text: "Safe, non-toxic face paints" }, { icon: Sparkles, text: "Quick application, maximum fun" },
{ icon: Star, text: "Perfect for ages 3-12" },
], ],
reverse: false, reverse: false,
}, },
{ {
id: "animal-designs", title: "Animal & Fantasy Designs", description: "Bring imagination to life with enchanting animal faces and fantasy characters that capture children's wonder and creativity.", media: { id: "service-2",
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1", imageAlt: "Animal face painting designs"}, 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",
},
items: [ items: [
{ icon: Heart, text: "Butterflies, tigers, cats, dragons" }, { icon: Zap, text: "3-5 minute turnaround per person" },
{ icon: Zap, text: "Quick application - 5-10 minutes" }, { icon: Music, text: "Perfect for music festivals & carnivals" },
{ icon: Smile, text: "Kids love the transformation" }, { icon: Users, text: "Handles large crowds efficiently" },
{ icon: Palette, text: "Artistic & creative designs" },
], ],
reverse: true, reverse: true,
}, },
{ {
id: "princess-themes", title: "Princess & Fairytale Themes", description: "Create magical memories with elegant princess face paintings and enchanted character designs that make dreams come true.", media: { id: "service-3",
imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=1", imageAlt: "Princess themed face painting"}, 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: [ items: [
{ icon: Sparkles, text: "Cinderella, Ariel, Elsa designs" }, { icon: Briefcase, text: "Professional & polished service" },
{ icon: Heart, text: "Elegant and refined details" }, { icon: Target, text: "Branded design options" },
{ icon: Star, text: "Photo-ready designs" }, { icon: Award, text: "Premium quality art" },
], { icon: Users, text: "Great for team engagement" },
reverse: false,
},
]}
buttons={[{ text: "Book Kids Party", href: "/packages" }]}
buttonAnimation="blur-reveal"
ariaLabel="Kids party face painting service"
containerClassName="gap-12"
titleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90 max-w-3xl"
/>
</div>
<div id="festival-face-painting" data-section="festival-face-painting" className="mx-auto px-4 md:px-6">
<FeatureCardTen
title="Festival Face Painting"
description="Energize your outdoor events and festivals with fast, creative face art that delights crowds. Perfect for music festivals, carnivals, markets, and large celebrations."
tag="Festival Entertainment"
tagIcon={Music}
tagAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={true}
features={[
{
id: "quick-designs", title: "Quick Artistic Designs", description: "Optimized for high-volume events with beautiful, creative designs completed in 5-10 minutes per person.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1", imageAlt: "Festival quick face painting designs"},
items: [
{ icon: Zap, text: "Fast turnaround time" },
{ icon: Star, text: "Creative, artistic patterns" },
{ icon: Sparkles, text: "Professional quality results" },
], ],
reverse: false, reverse: false,
}, },
{ {
id: "crowd-service", title: "High-Capacity Crowd Service", description: "Handle large crowds with efficiency and joy. Our portable stations and experienced artists keep the line moving while maintaining artistic excellence.", media: { id: "service-4",
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1", imageAlt: "Festival crowd face painting station"}, 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: [ items: [
{ icon: Users, text: "100+ people per event" }, { icon: Palette, text: "Custom artistic designs" },
{ icon: Music, text: "Perfect for any festival" }, { icon: Camera, text: "Photography-ready artistry" },
{ icon: Heart, text: "Portable & self-contained setup" }, { icon: Sparkles, text: "High-impact visual art" },
{ icon: Star, text: "Unforgettable performances" },
], ],
reverse: true, reverse: true,
}, },
{
id: "event-themes", title: "Event-Themed Designs", description: "Customize designs to match your festival theme, whether it's Halloween, neon nights, masquerade balls, or themed celebrations.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=1", imageAlt: "Themed festival face painting"},
items: [
{ icon: Palette, text: "Custom color schemes" },
{ icon: Star, text: "Theme-matched designs" },
{ icon: Sparkles, text: "Cohesive event branding" },
],
reverse: false,
},
]} ]}
buttons={[{ text: "Book Festival Service", href: "/packages" }]} buttons={[{ text: "View Packages", href: "/packages" }]}
buttonAnimation="blur-reveal" buttonAnimation="blur-reveal"
ariaLabel="Festival face painting service"
containerClassName="gap-12" containerClassName="gap-12"
titleClassName="text-4xl font-extrabold" titleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90 max-w-3xl" descriptionClassName="text-lg opacity-90"
/> />
</div> </div>
<div id="faq-services" data-section="faq-services" className="mx-auto px-4 md:px-6"> <div id="services-footer" data-section="services-footer" className="mx-auto px-4 md:px-6">
<FaqBase
title="Services FAQ"
description="Common questions about our face painting and body art services."
tag="FAQ"
tagIcon={HelpCircle}
tagAnimation="slide-up"
textboxLayout="default"
animationType="smooth"
faqsAnimation="slide-up"
useInvertedBackground={false}
showCard={true}
faqs={[
{
id: "service-faq-1", title: "What is included in kids party face painting?", content: "Our kids party service includes professional face painting with colorful, playful designs. Kids can choose from superheroes, animals, princesses, and fantasy characters. Each design takes 5-10 minutes. We bring all materials and tools needed for safe, hygienic application."},
{
id: "service-faq-2", title: "How many kids can you paint at a party?", content: "This depends on party length. For a 2-hour party, we can typically paint 15-25 kids depending on design complexity. For longer parties (3-4 hours), we can accommodate 25-40+ children. Let us know your party size when booking, and we'll recommend the best package."},
{
id: "service-faq-3", title: "Are the face paints hypoallergenic?", content: "Yes! 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 practice strict hygiene protocols with clean brushes and sanitized tools for each client. If a child has known allergies, please inform us in advance."},
{
id: "service-faq-4", title: "What makes festival face painting different?", content: "Festival face painting is designed for high-volume, quick service in outdoor settings. We create beautiful, artistic designs that can be completed in 5-10 minutes per person. Our portable stations are weather-resistant, and we're experienced with large crowds, long lines, and fast-paced environments."},
{
id: "service-faq-5", title: "Can you do custom designs for specific themes?", content: "Absolutely! We specialize in custom designs for themed parties and corporate events. Please provide your theme details, color preferences, or reference images when booking. For very complex custom designs, there may be a small additional fee, but we always discuss this upfront."},
{
id: "service-faq-6", title: "How long does face paint last?", content: "Our face paints typically last 4-6 hours with normal activity. They may smudge or fade with heavy sweating or water exposure. We provide care instructions on how to help the paint last longer. For longer events, we can touch up designs if needed."},
]}
buttons={[{ text: "View All Packages", href: "/packages" }]}
buttonAnimation="blur-reveal"
ariaLabel="Services FAQ section"
containerClassName="gap-12"
titleClassName="text-4xl font-extrabold"
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">
<ContactText
text="Ready to bring creative face painting to your next event? Whether it's a kids' birthday party or a large festival, we're here to make it memorable. Get in touch with Paintasy to discuss your specific service needs."
animationType="background-highlight"
background={{ variant: "radial-gradient" }}
useInvertedBackground={true}
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-services" data-section="footer-services" className="mx-auto px-4 md:px-6">
<FooterSimple <FooterSimple
columns={footerColumns} columns={footerColumns}
bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved." bottomLeftText="© 2024 Paintasy Face and Body Art."
bottomRightText="Professional Event Entertainment | Creative Services" bottomRightText="Professional Event Entertainment"
ariaLabel="Site footer with links" ariaLabel="Services footer with links"
containerClassName="gap-12" containerClassName="gap-12"
columnsClassName="grid-cols-2 lg:grid-cols-4" columnsClassName="grid-cols-2 lg:grid-cols-4"
columnTitleClassName="font-extrabold text-lg" columnTitleClassName="font-extrabold text-lg"