Update src/app/packages/page.tsx
This commit is contained in:
@@ -1,14 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||||
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { Sparkles, DollarSign, Check, Clock, Users, Star, HelpCircle, Zap } from 'lucide-react';
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
||||
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function PackagesPage() {
|
||||
const navItems = [
|
||||
@@ -22,38 +20,39 @@ export default function PackagesPage() {
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Kids Party Face Painting", href: "/services" },
|
||||
{ label: "Festival Face Art", href: "/services" },
|
||||
{ label: "Corporate Events", href: "/services" },
|
||||
{ label: "Body Painting", href: "/services" },
|
||||
{ label: "Custom Designs", href: "/services" },
|
||||
title: "Packages",
|
||||
items: [
|
||||
{ label: "Birthday Packages", href: "#packages" },
|
||||
{ label: "Festival Service", href: "#packages" },
|
||||
{ label: "Corporate Events", href: "#packages" },
|
||||
{ label: "Custom Packages", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
title: "Services",
|
||||
items: [
|
||||
{ label: "All Services", href: "/services" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Packages", href: "/packages" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
title: "Social",
|
||||
items: [
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
{ label: "Facebook", href: "https://facebook.com" },
|
||||
{ label: "TikTok", href: "https://tiktok.com" },
|
||||
{ label: "Email", href: "mailto:paintasy@events.com" },
|
||||
{ label: "Phone", href: "tel:+15551234567" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Service Areas", items: [
|
||||
{ label: "Local Events", href: "/contact" },
|
||||
{ label: "Regional Coverage", href: "/contact" },
|
||||
{ label: "Book Now", href: "/packages" },
|
||||
{ label: "Get Quote", href: "/contact" },
|
||||
title: "Book Now",
|
||||
items: [
|
||||
{ label: "Request Quote", href: "/contact" },
|
||||
{ label: "Chat with Us", href: "/contact" },
|
||||
{ label: "Call Now", href: "tel:+15551234567" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -73,195 +72,205 @@ export default function PackagesPage() {
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
brandName="Paintasy"
|
||||
navItems={navItems}
|
||||
brandName="Paintasy"
|
||||
bottomLeftText="Creative Face & Body Art"
|
||||
bottomRightText="paintasy@events.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero-packages" data-section="hero-packages" className="mx-auto px-4 md:px-6">
|
||||
<div id="packages-page-hero" data-section="packages-page-hero">
|
||||
<HeroBillboardGallery
|
||||
title="Event Packages & Booking"
|
||||
description="Flexible, transparent pricing for all event types. Choose from our curated packages or customize one to match your specific needs and budget. Professional service, artistic creativity, guaranteed satisfaction."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Transparent Pricing"
|
||||
tagIcon={DollarSign}
|
||||
tagAnimation="slide-up"
|
||||
title="Event Packages & Pricing"
|
||||
description="Flexible, transparent pricing for every type of event. From intimate celebrations to large festivals, we have the perfect package for you."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
buttons={[
|
||||
{ text: "View All Packages", href: "#pricing" },
|
||||
{ text: "Request Custom Quote", href: "/contact" },
|
||||
{
|
||||
text: "Request a Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-woman-wearing-mask_23-2148784326.jpg", imageAlt: "Event package showcase"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=4",
|
||||
imageAlt: "Event face painting packages",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="opacity"
|
||||
ariaLabel="Packages hero section"
|
||||
className="min-h-screen"
|
||||
containerClassName="flex flex-col lg:flex-row items-center justify-between gap-12"
|
||||
titleClassName="text-5xl lg:text-6xl font-extrabold leading-tight"
|
||||
descriptionClassName="text-lg lg:text-xl opacity-90 max-w-2xl"
|
||||
buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8"
|
||||
titleClassName="text-5xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90"
|
||||
ariaLabel="Packages page hero section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing" className="mx-auto px-4 md:px-6">
|
||||
<div id="packages-pricing" data-section="packages-pricing">
|
||||
<PricingCardFive
|
||||
title="Our Event Packages"
|
||||
description="Simple, flexible pricing tailored to your event type and guest count. All packages include professional service and materials."
|
||||
tag="Book Your Package"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
description="Simple, flexible pricing tailored to your event needs. All packages include professional service, artistic creativity, and great customer care."
|
||||
textboxLayout="default"
|
||||
animationType="scale-rotate"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "birthday-basic", tag: "Popular", price: "$150", period: "per hour", description: "Perfect for small birthday celebrations", button: { text: "Book Now", href: "/contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"Up to 15 kids", "Colorful themed designs", "Face painting only", "Basic design themes", "All supplies included"],
|
||||
id: "pkg-birthday-basic",
|
||||
tag: "Great Start",
|
||||
price: "$150",
|
||||
period: "per hour",
|
||||
description: "Perfect for small birthday celebrations",
|
||||
button: {
|
||||
text: "Request Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
featuresTitle: "Includes",
|
||||
features: [
|
||||
"Up to 15 children",
|
||||
"Face painting only",
|
||||
"Colorful themed designs",
|
||||
"Basic design themes",
|
||||
"Professional face paints",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "birthday-deluxe", tag: "Best Value", price: "$200", period: "per 2 hours", description: "Full party entertainment package", button: { text: "Book Now", href: "/contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"Up to 25 kids", "Custom themed designs", "Face & temporary tattoos", "Interactive entertainment", "Setup & cleanup included"],
|
||||
id: "pkg-birthday-deluxe",
|
||||
tag: "Most Popular",
|
||||
price: "$200",
|
||||
period: "per 2 hours",
|
||||
description: "Full party entertainment package",
|
||||
button: {
|
||||
text: "Request Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
featuresTitle: "Includes",
|
||||
features: [
|
||||
"Up to 25 children",
|
||||
"Face painting + tattoos",
|
||||
"Custom themed designs",
|
||||
"Interactive entertainment",
|
||||
"Professional service",
|
||||
"Setup & cleanup",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "festival-event", tag: "Flexible", price: "$250", period: "per 3 hours", description: "Festival and outdoor event service", button: { text: "Book Now", href: "/contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"High-capacity crowd service", "Fast artistic designs", "Setup & teardown included", "Portable station", "Ideal for 50+ attendees"],
|
||||
id: "pkg-birthday-premium",
|
||||
tag: "Best Value",
|
||||
price: "$280",
|
||||
period: "per 3 hours",
|
||||
description: "Premium party entertainment with extra features",
|
||||
button: {
|
||||
text: "Request Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
featuresTitle: "Includes",
|
||||
features: [
|
||||
"Up to 40 guests",
|
||||
"Face & body painting",
|
||||
"Custom character designs",
|
||||
"Interactive entertainment",
|
||||
"Photo opportunities",
|
||||
"Full setup & cleanup",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pkg-festival",
|
||||
tag: "High Volume",
|
||||
price: "$250",
|
||||
period: "per 3 hours",
|
||||
description: "Fast-paced festival and outdoor event service",
|
||||
button: {
|
||||
text: "Request Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
featuresTitle: "Includes",
|
||||
features: [
|
||||
"High-capacity crowds",
|
||||
"Fast artistic designs",
|
||||
"3-5 minute service per person",
|
||||
"Portable station included",
|
||||
"Setup & teardown",
|
||||
"Professional materials",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pkg-corporate",
|
||||
tag: "Professional",
|
||||
price: "$300",
|
||||
period: "per 3 hours",
|
||||
description: "Corporate team building & brand activation",
|
||||
button: {
|
||||
text: "Request Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
featuresTitle: "Includes",
|
||||
features: [
|
||||
"Professional setup",
|
||||
"Branded design options",
|
||||
"Custom artwork",
|
||||
"Corporate polished service",
|
||||
"Photo-ready designs",
|
||||
"Setup & cleanup included",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pkg-custom",
|
||||
tag: "Premium",
|
||||
price: "Custom",
|
||||
period: "consultation",
|
||||
description: "Fully customized package for unique events",
|
||||
button: {
|
||||
text: "Contact Us",
|
||||
href: "/contact",
|
||||
},
|
||||
featuresTitle: "Services Available",
|
||||
features: [
|
||||
"Full day events",
|
||||
"Multiple artists",
|
||||
"Body painting",
|
||||
"Custom artwork",
|
||||
"Event planning",
|
||||
"Special requests welcome",
|
||||
],
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Need Custom Pricing?", href: "/contact" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Pricing packages section"
|
||||
containerClassName="gap-12"
|
||||
textBoxTitleClassName="text-4xl font-extrabold"
|
||||
textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
cardClassName="p-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="package-details" data-section="package-details" className="mx-auto px-4 md:px-6">
|
||||
<FeatureCardTen
|
||||
title="Package Details & Customization"
|
||||
description="Each package can be tailored to your specific event needs. Here's what you can customize."
|
||||
tag="Flexible Options"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "duration", title: "Custom Duration", description: "Need more or less time? We offer flexible hourly bookings. Minimum 1 hour service. Discounts available for 4+ hour bookings. Tell us your event timeline and we'll find the perfect fit.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1", imageAlt: "Face painting time management"},
|
||||
items: [
|
||||
{ icon: Clock, text: "Flexible hour options" },
|
||||
{ icon: Check, text: "Extended booking discounts" },
|
||||
{ icon: Star, text: "Customized timelines" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
id: "crowd-size", title: "Guest Count Options", description: "Whether you're hosting 10 guests or 1,000, we can scale our service. Larger events may require multiple artists. We'll assess your guest count and recommend the right setup for seamless service.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-young-friends-celebrating-new-year_23-2147720468.jpg", imageAlt: "Large event face painting"},
|
||||
items: [
|
||||
{ icon: Users, text: "Small to large events" },
|
||||
{ icon: Check, text: "Multi-artist availability" },
|
||||
{ icon: Zap, text: "Crowd management expertise" },
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
id: "design-themes", title: "Design Themes & Customization", description: "Choose from popular themes or bring your own. Character designs, branded elements, seasonal themes, or completely custom artwork. We work with you to match your event's vibe and create memorable experiences.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=1", imageAlt: "Custom themed face painting designs"},
|
||||
items: [
|
||||
{ icon: Sparkles, text: "Popular theme options" },
|
||||
{ icon: Check, text: "Fully custom designs available" },
|
||||
{ icon: Star, text: "Branded design capability" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Customize Your Package", href: "/contact" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Package details and customization options"
|
||||
containerClassName="gap-12"
|
||||
itemClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq-packages" data-section="faq-packages" className="mx-auto px-4 md:px-6">
|
||||
<FaqBase
|
||||
title="Booking & Packages FAQ"
|
||||
description="Everything you need to know about booking and our package options."
|
||||
tag="FAQ"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="smooth"
|
||||
faqsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
showCard={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq-1", title: "How far in advance should I book?", content: "We recommend booking at least 2-3 weeks in advance to secure your preferred date and time. For large events (50+ guests) or peak seasons (summer, holidays), 4-6 weeks advance booking is ideal. Last-minute bookings may be available depending on our schedule—contact us to check availability."},
|
||||
{
|
||||
id: "faq-2", title: "Can I customize a package?", content: "Absolutely! All our packages are starting points. We can adjust duration, guest count, design themes, and service type to match your exact needs. Custom packages may have different pricing—contact us with your requirements for a personalized quote."},
|
||||
{
|
||||
id: "faq-3", title: "What's your deposit and payment policy?", content: "A 50% non-refundable deposit is required to secure your booking. The remaining balance is due 7 days before your event. We accept credit cards, checks, and digital payments. For large or custom events, we're happy to discuss payment plans."},
|
||||
{
|
||||
id: "faq-4", title: "What if I need to reschedule or cancel?", content: "Cancellations made 2+ weeks before your event receive a full refund minus the deposit. Cancellations within 2 weeks forfeit the deposit. Rescheduling to another date is subject to availability. We understand emergencies happen—contact us to discuss your situation."},
|
||||
{
|
||||
id: "faq-5", title: "Do you offer discounts for bulk bookings?", content: "Yes! We offer discounts for bookings of 4+ hours or multiple events. Large corporate packages (100+ attendees) also qualify for special pricing. Contact us with your details to receive a customized quote."},
|
||||
{
|
||||
id: "faq-6", title: "Are there additional fees (travel, setup, etc.)?", content: "Our quoted rates include artist service, supplies, and standard setup. Travel within 15 miles is included. Venues beyond 15 miles may have a travel fee (typically $25-50 depending on distance). Complex setups or specialty requests may have additional fees—we'll discuss these upfront."},
|
||||
{
|
||||
id: "faq-7", title: "What happens if you need to cancel on us?", content: "In the unlikely event we must cancel, we'll provide full refund and help you find an alternative artist. Our booking confirmation includes liability information and a backup artist reference when possible."},
|
||||
{
|
||||
id: "faq-8", title: "Can you work with my specific event theme?", content: "Yes! We love working with event themes. Share your theme, colors, and design preferences when booking. We can create custom designs, coordinate with your event aesthetic, and even incorporate branding for corporate events."},
|
||||
]}
|
||||
buttons={[{ text: "Book Your Package", href: "/contact" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Booking and packages FAQ section"
|
||||
containerClassName="gap-12"
|
||||
textBoxTitleClassName="text-4xl font-extrabold"
|
||||
textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-packages" data-section="contact-packages" className="mx-auto px-4 md:px-6">
|
||||
<ContactText
|
||||
text="Ready to book your event? Browse our packages, customize one to fit your needs, or request a personalized quote. Let's create a memorable experience for your guests!"
|
||||
animationType="background-highlight"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Request a Quote", href: "/contact" },
|
||||
{ text: "Call Us", href: "tel:+15551234567" },
|
||||
{
|
||||
text: "Schedule Consultation",
|
||||
href: "/contact",
|
||||
},
|
||||
]}
|
||||
ariaLabel="Packages contact call-to-action section"
|
||||
containerClassName="py-16"
|
||||
contentClassName="max-w-3xl mx-auto"
|
||||
textClassName="text-4xl font-extrabold text-center"
|
||||
buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
|
||||
buttonAnimation="blur-reveal"
|
||||
containerClassName="gap-12"
|
||||
titleClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90"
|
||||
ariaLabel="Pricing section with event packages"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer-packages" data-section="footer-packages" className="mx-auto px-4 md:px-6">
|
||||
<div id="packages-cta" data-section="packages-cta">
|
||||
<ContactText
|
||||
text="Don't see your perfect package? We offer fully customized packages for unique events and special requests. Let's create something amazing for your celebration."
|
||||
animationType="background-highlight"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Request Custom Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
]}
|
||||
containerClassName="py-16"
|
||||
textClassName="text-3xl font-extrabold text-center"
|
||||
ariaLabel="Custom packages call-to-action section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="packages-footer" data-section="packages-footer">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
|
||||
bottomRightText="Professional Event Entertainment | Creative Services"
|
||||
ariaLabel="Site footer with links"
|
||||
bottomLeftText="© 2024 Paintasy Face and Body Art."
|
||||
bottomRightText="Simple Transparent Pricing"
|
||||
ariaLabel="Packages page footer"
|
||||
containerClassName="gap-12"
|
||||
columnsClassName="grid-cols-2 lg:grid-cols-4"
|
||||
columnTitleClassName="font-extrabold text-lg"
|
||||
columnItemClassName="hover:opacity-70 transition-opacity"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user