Switch to version 1: modified src/app/packages/page.tsx
This commit is contained in:
@@ -1,13 +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 ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { Sparkles, DollarSign, HelpCircle } 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 = [
|
||||
@@ -21,46 +20,43 @@ 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: "/about" },
|
||||
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" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const handleBookingSubmit = (data: Record<string, string>) => {
|
||||
console.log("Booking inquiry submitted:", data);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
@@ -76,136 +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="Simple, flexible pricing for parties, festivals, and corporate events. Each package includes professional service and artistic creativity. Book your event today!"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Transparent Pricing"
|
||||
tagIcon={Sparkles}
|
||||
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 Packages", href: "#pricing" },
|
||||
{ text: "Get a Custom Quote", href: "#booking-form" },
|
||||
{
|
||||
text: "Request a Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
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"
|
||||
ariaLabel="Packages and booking 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="Choose Your Package"
|
||||
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."
|
||||
tag="Transparent Pricing"
|
||||
tagIcon={DollarSign}
|
||||
tagAnimation="slide-up"
|
||||
title="Our Event Packages"
|
||||
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: "Request Quote", href: "#booking-form" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"Up to 15 kids", "Colorful themed designs", "Face painting only", "Basic design themes", "Professional artist"],
|
||||
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: "Request Quote", href: "#booking-form" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"Up to 25 kids", "Custom themed designs", "Face & temporary tattoos", "Interactive entertainment", "Professional artist", "Setup & teardown"],
|
||||
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: "Request Quote", href: "#booking-form" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"High-capacity crowd service", "Fast artistic designs", "Setup & teardown included", "Portable station", "5-10 min per person", "Weather-resistant setup"],
|
||||
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: "Schedule Consultation",
|
||||
href: "/contact",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Get Custom Package", href: "#booking-form" }]}
|
||||
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"
|
||||
titleClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90"
|
||||
ariaLabel="Pricing section with event packages"
|
||||
/>
|
||||
</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
|
||||
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"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={true}
|
||||
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"
|
||||
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"
|
||||
textClassName="text-3xl font-extrabold text-center"
|
||||
ariaLabel="Custom packages call-to-action section"
|
||||
/>
|
||||
</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
|
||||
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