Update src/app/services/page.tsx

src/app/about/page.tsx

@@ -1,54 +1,55 @@
 "use client";
 
+import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
-import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import ContactText from '@/components/sections/contact/ContactText';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Sparkles, Palette, Heart, Smile, Zap, Music, Briefcase, Target, Users, Star, Award } from 'lucide-react';
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
+import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Palette, Award, Shield, CheckCircle } from "lucide-react";
 
 export default function AboutPage() {
   const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Services", id: "/services" },
-    { name: "Gallery", id: "/gallery" },
-    { name: "Packages", id: "/packages" },
-    { name: "About", id: "/about" },
-    { name: "Contact", id: "/contact" },
+    { name: "Home", id: "home" },
+    { name: "Services", id: "services" },
+    { name: "Gallery", id: "gallery" },
+    { name: "Packages", id: "packages" },
+    { name: "About", id: "about" },
+    { name: "Contact", id: "contact" },
   ];
 
   const footerColumns = [
     {
-      title: "Services",      items: [
+      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: "Company",      items: [
+      title: "Company",
+      items: [
         { label: "About Us", href: "/about" },
         { label: "Gallery", href: "/gallery" },
         { label: "Packages", href: "/packages" },
-        { label: "FAQ", href: "/" },
         { label: "Contact", href: "/contact" },
       ],
     },
     {
-      title: "Connect",      items: [
+      title: "Connect",
+      items: [
         { label: "Instagram", href: "https://instagram.com" },
         { label: "Facebook", href: "https://facebook.com" },
         { label: "TikTok", href: "https://tiktok.com" },
         { label: "Email", href: "mailto:paintasy@events.com" },
-        { label: "Phone", href: "tel:+15551234567" },
       ],
     },
     {
-      title: "Service Areas",      items: [
+      title: "Service Areas",
+      items: [
         { label: "Local Events", href: "/contact" },
         { label: "Regional Coverage", href: "/contact" },
         { label: "Book Now", href: "/packages" },
@@ -72,147 +73,103 @@ export default function AboutPage() {
     >
       <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="about-main" data-section="about-main" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24 lg:py-32">
-        <MetricSplitMediaAbout
-          title="Paintasy: Bringing Color and Joy to Every Celebration"
-          description="Founded on the passion for creative expression and event entertainment, Paintasy has been transforming celebrations into unforgettable experiences. Our team of professional face and body painters combines artistic skill with genuine care for every client. Whether it's a child's first birthday party, a vibrant festival, or a corporate team-building event, we bring color, creativity, and joy to every occasion. With years of experience, professional-grade materials, and a commitment to safety and quality, Paintasy is your trusted partner for professional entertainment."
-          tag="Our Story"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          imageSrc="http://img.b2bpic.net/free-photo/young-artist-female-her-20s-art-studio-with-many-tools-painting_662251-1233.jpg?_wi=1"
-          imageAlt="Paintasy artists working on creative designs"
-          mediaAnimation="blur-reveal"
-          metrics={[
-            { value: "15+", title: "Professional Artists" },
-            { value: "500+", title: "Events Completed" },
-            { value: "1000+", title: "Happy Faces Painted" },
-            { value: "100%", title: "Client Satisfaction" },
+      <div id="about-page-hero" data-section="about-page-hero">
+        <HeroBillboardGallery
+          title="About Paintasy"
+          description="Professional face painting and body art entertainment bringing creativity and joy to events."
+          background={{ variant: "radial-gradient" }}
+          mediaItems={[
+            {
+              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=2",
+              imageAlt: "Professional face painter at work",
+            },
           ]}
-          metricsAnimation="slide-up"
-          useInvertedBackground={false}
-          ariaLabel="About page main section"
-          containerClassName="gap-8 lg:gap-12"
-          titleClassName="text-4xl sm:text-5xl lg:text-6xl font-extrabold"
-          descriptionClassName="text-base sm:text-lg opacity-90 max-w-3xl"
+          mediaAnimation="opacity"
+          titleClassName="text-5xl font-extrabold"
+          descriptionClassName="text-lg opacity-90"
         />
       </div>
 
-      <div id="about-values" data-section="about-values" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24">
-        <FeatureCardTen
-          title="Our Values & Commitment"
-          description="What drives Paintasy every single day is our dedication to excellence, safety, and customer satisfaction. We believe that creativity should be accessible, affordable, and safe for everyone."
-          tag="Why Choose Paintasy"
-          tagIcon={Palette}
+      <div id="about-story" data-section="about-story">
+        <MetricSplitMediaAbout
+          title="Our Story & Mission"
+          description="Paintasy was founded on the belief that creative entertainment transforms events into unforgettable celebrations. We started with a passion for face painting and body art, and have grown into a professional team dedicated to bringing magic and color to every event we touch.\n\nOur mission is simple: deliver exceptional artistic service, genuine happiness, and professional entertainment that exceeds expectations. From children's birthday parties to corporate celebrations and festival events, we pour our hearts into creating beautiful, memorable experiences."
+          tag="Professional Team"
+          tagIcon={Award}
           tagAnimation="slide-up"
+          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=3"
+          imageAlt="Our professional face painting artist"
+          mediaAnimation="blur-reveal"
+          metrics={[
+            { value: "500+", title: "Events Painted" },
+            { value: "1000+", title: "Happy Faces" },
+            { value: "10+", title: "Years Experience" },
+            { value: "100%", title: "Satisfaction Rate" },
+          ]}
+          metricsAnimation="slide-up"
+          useInvertedBackground={true}
+          titleClassName="text-4xl font-extrabold"
+          descriptionClassName="text-lg opacity-90 max-w-2xl"
+        />
+      </div>
+
+      <div id="about-values" data-section="about-values">
+        <FeatureCardTen
+          title="Our Values"
+          description="What drives us in everything we do."
           textboxLayout="default"
           animationType="slide-up"
-          useInvertedBackground={true}
+          useInvertedBackground={false}
           features={[
             {
-              id: "quality",              title: "Professional Quality",              description: "We use only professional-grade, hypoallergenic face paints and premium materials. Every design is created with attention to detail and artistic excellence.",              media: {
-                imageSrc: "http://img.b2bpic.net/free-photo/art-supplies-arranged-table_23-2147854326.jpg?_wi=1",                imageAlt: "Professional face painting supplies"},
+              id: "value-1",
+              title: "Creativity",
+              description:
+                "We believe in artistic expression and creative design. Every face is a canvas.",
+              media: {
+                imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=3",
+                imageAlt: "Creative face painting designs",
+              },
               items: [
-                { icon: Star, text: "Premium materials" },
-                { icon: Sparkles, text: "Professional artists" },
-                { icon: Heart, text: "Detail-oriented service" },
+                { icon: Palette, text: "Artistic innovation" },
+                { icon: CheckCircle, text: "Unique designs" },
               ],
               reverse: false,
             },
             {
-              id: "safety",              title: "Safety & Hygiene",              description: "Your health and safety are our top priority. We follow strict hygiene protocols, use sanitized tools for each client, and provide hypoallergenic options for sensitive skin.",              media: {
-                imageSrc: "http://img.b2bpic.net/free-photo/hands-being-washed_23-2149191617.jpg?_wi=1",                imageAlt: "Professional hygiene practices"},
+              id: "value-2",
+              title: "Safety & Professionalism",
+              description:
+                "We use only hypoallergenic, professional-grade face paints and maintain strict hygiene standards.",
+              media: {
+                imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=5",
+                imageAlt: "Safe professional face painting",
+              },
               items: [
-                { icon: Smile, text: "Strict hygiene standards" },
-                { icon: Heart, text: "Hypoallergenic products" },
-                { icon: Target, text: "Health-conscious service" },
+                { icon: Shield, text: "Hypoallergenic products" },
+                { icon: CheckCircle, text: "Safety certified" },
               ],
               reverse: true,
             },
-            {
-              id: "creativity",              title: "Unlimited Creativity",              description: "From classic designs to custom creations, we bring imagination to life. Our artists stay current with trends and can create virtually any design you envision.",              media: {
-                imageSrc: "http://img.b2bpic.net/free-photo/artist-woman-painting-portrait-canvas-studio_23-2148937856.jpg?_wi=1",                imageAlt: "Artists creating custom designs"},
-              items: [
-                { icon: Sparkles, text: "Custom designs" },
-                { icon: Zap, text: "Trendy artwork" },
-                { icon: Users, text: "Personalized service" },
-              ],
-              reverse: false,
-            },
           ]}
-          buttons={[{ text: "Book Your Event", href: "/packages" }]}
-          buttonAnimation="blur-reveal"
-          ariaLabel="About page values section"
-          containerClassName="gap-8 lg:gap-12"
+          containerClassName="gap-12"
+          itemClassName=""
+          mediaWrapperClassName=""
         />
       </div>
 
-      <div id="about-team" data-section="about-team" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24">
-        <TestimonialCardTwo
-          title="Meet Our Community"
-          description="Paintasy is built on the foundation of passionate, talented artists and satisfied customers. Join thousands who've experienced the magic of professional face and body art."
-          tag="Community"
-          tagIcon={Users}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          animationType="blur-reveal"
-          useInvertedBackground={false}
-          carouselMode="buttons"
-          testimonials={[
-            {
-              id: "team-1",              name: "Aurora Studios",              role: "Professional Artist",              testimonial: "Paintasy gave me the platform to showcase my artistic talent and build a thriving career. I love working with diverse clients and creating magical moments at events.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-of-smiling-artist-at-studio_23-2149021637.jpg?_wi=1",              imageAlt: "Professional Paintasy artist",              icon: Sparkles,
-            },
-            {
-              id: "team-2",              name: "Creative Collective",              role: "Event Partner",              testimonial: "We partner with Paintasy because they consistently deliver exceptional entertainment. Their artists are professional, reliable, and always go above and beyond.",              imageSrc: "http://img.b2bpic.net/free-photo/group-of-creative-professionals_23-2149112458.jpg?_wi=1",              imageAlt: "Paintasy team at event",              icon: Star,
-            },
-            {
-              id: "testimonial-3",              name: "Sarah Johnson",              role: "Parent",              testimonial: "My daughter talked about her birthday face painting for weeks! Paintasy made her feel so special. We'll definitely book them again for future celebrations.",              imageSrc: "http://img.b2bpic.net/free-photo/happy-family-playing-together_23-2149062749.jpg?_wi=1",              imageAlt: "Happy family with face painted child",              icon: Heart,
-            },
-            {
-              id: "testimonial-4",              name: "Festival Directors",              role: "Festival Organizer",              testimonial: "Paintasy is our go-to entertainment provider. They handle high-volume requests with grace, create stunning designs, and make our festivals memorable.",              imageSrc: "http://img.b2bpic.net/free-photo/diverse-group-enjoying-festival_23-2149156238.jpg?_wi=1",              imageAlt: "Festival crowd enjoying Paintasy services",              icon: Smile,
-            },
-          ]}
-          buttons={[{ text: "Join Our Community", href: "/services" }]}
-          buttonAnimation="blur-reveal"
-          ariaLabel="About page community testimonials"
-          containerClassName="gap-8 lg:gap-12"
-        />
-      </div>
-
-      <div id="about-cta" data-section="about-cta" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24">
-        <ContactText
-          text="Ready to be part of the Paintasy family? Whether you're looking to book our services or become a professional partner, we'd love to connect with you. Let's create something colorful and magical together!"
-          animationType="background-highlight"
-          background={{ variant: "radial-gradient" }}
-          useInvertedBackground={false}
-          buttons={[
-            { text: "Book Services", href: "/packages" },
-            { text: "Contact Us", href: "/contact" },
-          ]}
-          ariaLabel="About page call-to-action"
-          containerClassName="py-12 sm:py-16 lg:py-20"
-          contentClassName="max-w-3xl mx-auto"
-          textClassName="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-center"
-          buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
-        />
-      </div>
-
-      <div id="footer-about" data-section="footer-about" className="mx-auto px-4 md:px-6 lg:px-8">
+      <div id="footer" data-section="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"
-          containerClassName="gap-8 lg:gap-12"
-          columnsClassName="grid-cols-2 lg:grid-cols-4"
-          columnTitleClassName="font-extrabold text-lg"
-          columnItemClassName="hover:opacity-70 transition-opacity"
         />
       </div>
     </ThemeProvider>

src/app/booking/page.tsx

@@ -2,30 +2,18 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
 import { useState } from 'react';
-import { Heart, Mail, Phone, MapPin, Facebook, Instagram, Twitter } from 'lucide-react';
+import { Calendar, Clock, Users, Palette, Phone, Mail } from 'lucide-react';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 export default function BookingPage() {
-  const [formData, setFormData] = useState({
-    name: '',
-    email: '',
-    phone: '',
-    eventDate: '',
-    eventType: '',
-    guestCount: '',
-    message: '',
-  });
-
   const navItems = [
     { name: "Home", id: "home" },
     { name: "Services", id: "services" },
-    { name: "Gallery", id: "gallery" },
-    { name: "Packages", id: "packages" },
+    { name: "Gallery", id: "/gallery" },
+    { name: "Packages", id: "/packages" },
     { name: "About", id: "about" },
-    { name: "Booking", id: "booking" },
-    { name: "Contact", id: "contact" },
+    { name: "Contact", id: "/contact" },
   ];
 
   const footerColumns = [
@@ -60,30 +48,52 @@ export default function BookingPage() {
       title: "Service Areas",      items: [
         { label: "Local Events", href: "/contact" },
         { label: "Regional Coverage", href: "/contact" },
-        { label: "Book Now", href: "/booking" },
+        { label: "Book Now", href: "/packages" },
         { label: "Get Quote", href: "/contact" },
       ],
     },
   ];
 
-  const handleFormChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+  const [formData, setFormData] = useState({
+    fullName: '',
+    email: '',
+    phone: '',
+    eventType: '',
+    eventDate: '',
+    eventTime: '',
+    guestCount: '',
+    serviceType: '',
+    additionalNotes: '',
+  });
+
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
-    setFormData(prev => ({ ...prev, [name]: value }));
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
   };
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    console.log('Booking form submitted:', formData);
-    alert('Thank you for your booking request! We will contact you soon.');
-    setFormData({
-      name: '',
-      email: '',
-      phone: '',
-      eventDate: '',
-      eventType: '',
-      guestCount: '',
-      message: '',
-    });
+    console.log('Form submitted:', formData);
+    setSubmitted(true);
+    setTimeout(() => {
+      setFormData({
+        fullName: '',
+        email: '',
+        phone: '',
+        eventType: '',
+        eventDate: '',
+        eventTime: '',
+        guestCount: '',
+        serviceType: '',
+        additionalNotes: '',
+      });
+      setSubmitted(false);
+    }, 3000);
   };
 
   return (
@@ -108,206 +118,210 @@ export default function BookingPage() {
         />
       </div>
 
-      <div id="booking-hero" data-section="booking-hero" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24 lg:py-32">
-        <div className="max-w-4xl mx-auto">
-          <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-6 text-center bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 bg-clip-text text-transparent">
-            Book Your Event
-          </h1>
-          <p className="text-lg md:text-xl text-center opacity-80 mb-12 max-w-2xl mx-auto">
-            Request a quote for professional face painting and body art services. Fill out the form below and we'll get back to you with availability and pricing.
-          </p>
+      <div id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6 py-20 max-w-2xl">
+        <div className="mb-12">
+          <h1 className="text-4xl font-extrabold mb-4">Book Your Event</h1>
+          <p className="text-lg opacity-90 mb-8">Complete this form to request a booking for professional face and body art services at your event. We'll get back to you within 24 hours with availability and pricing details.</p>
         </div>
-      </div>
 
-      <div id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6 lg:px-8 py-12 md:py-16 lg:py-20">
-        <div className="max-w-2xl mx-auto">
-          <div className="rounded-lg p-8 md:p-12 bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50 border-2 border-purple-200 shadow-lg">
-            <form onSubmit={handleSubmit} className="space-y-6">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div>
-                  <label className="block text-sm font-semibold mb-2 text-gray-800">Full Name *</label>
-                  <input
-                    type="text"
-                    name="name"
-                    value={formData.name}
-                    onChange={handleFormChange}
-                    required
-                    placeholder="Your name"
-                    className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
-                  />
-                </div>
-                <div>
-                  <label className="block text-sm font-semibold mb-2 text-gray-800">Email Address *</label>
-                  <input
-                    type="email"
-                    name="email"
-                    value={formData.email}
-                    onChange={handleFormChange}
-                    required
-                    placeholder="your@email.com"
-                    className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
-                  />
-                </div>
+        {submitted && (
+          <div className="mb-6 p-4 bg-green-100 border border-green-300 rounded-lg text-green-800">
+            <p className="font-semibold">Thank you! Your booking request has been submitted. We'll contact you soon to confirm details.</p>
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          {/* Contact Information Section */}
+          <div className="border-b pb-6">
+            <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+              <Mail className="w-5 h-5" />
+              Contact Information
+            </h2>
+            
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="fullName" className="block text-sm font-semibold mb-2">Full Name *</label>
+                <input
+                  id="fullName"
+                  type="text"
+                  name="fullName"
+                  value={formData.fullName}
+                  onChange={handleChange}
+                  required
+                  placeholder="Your full name"
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                />
               </div>
 
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <label htmlFor="email" className="block text-sm font-semibold mb-2">Email Address *</label>
+                <input
+                  id="email"
+                  type="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleChange}
+                  required
+                  placeholder="your.email@example.com"
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="phone" className="block text-sm font-semibold mb-2">Phone Number *</label>
+                <input
+                  id="phone"
+                  type="tel"
+                  name="phone"
+                  value={formData.phone}
+                  onChange={handleChange}
+                  required
+                  placeholder="(555) 123-4567"
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Event Details Section */}
+          <div className="border-b pb-6">
+            <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+              <Calendar className="w-5 h-5" />
+              Event Details
+            </h2>
+            
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="eventType" className="block text-sm font-semibold mb-2">Event Type *</label>
+                <select
+                  id="eventType"
+                  name="eventType"
+                  value={formData.eventType}
+                  onChange={handleChange}
+                  required
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                >
+                  <option value="">Select an event type</option>
+                  <option value="birthday">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 className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-sm font-semibold mb-2 text-gray-800">Phone Number *</label>
-                  <input
-                    type="tel"
-                    name="phone"
-                    value={formData.phone}
-                    onChange={handleFormChange}
-                    required
-                    placeholder="(555) 123-4567"
-                    className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
-                  />
-                </div>
-                <div>
-                  <label className="block text-sm font-semibold mb-2 text-gray-800">Event Date *</label>
+                  <label htmlFor="eventDate" className="block text-sm font-semibold mb-2">Event Date *</label>
                   <input
+                    id="eventDate"
                     type="date"
                     name="eventDate"
                     value={formData.eventDate}
-                    onChange={handleFormChange}
+                    onChange={handleChange}
                     required
-                    className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800"
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
                   />
                 </div>
-              </div>
 
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
-                  <label className="block text-sm font-semibold mb-2 text-gray-800">Event Type *</label>
-                  <select
-                    name="eventType"
-                    value={formData.eventType}
-                    onChange={handleFormChange}
-                    required
-                    className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800"
-                  >
-                    <option value="">Select event type</option>
-                    <option value="birthday-party">Birthday Party</option>
-                    <option value="festival">Festival/Outdoor Event</option>
-                    <option value="corporate">Corporate Event</option>
-                    <option value="wedding">Wedding/Reception</option>
-                    <option value="school-event">School Event</option>
-                    <option value="other">Other</option>
-                  </select>
-                </div>
-                <div>
-                  <label className="block text-sm font-semibold mb-2 text-gray-800">Number of Guests *</label>
+                  <label htmlFor="eventTime" className="block text-sm font-semibold mb-2 flex items-center gap-1">
+                    <Clock className="w-4 h-4" />
+                    Event Time *
+                  </label>
                   <input
-                    type="number"
-                    name="guestCount"
-                    value={formData.guestCount}
-                    onChange={handleFormChange}
+                    id="eventTime"
+                    type="time"
+                    name="eventTime"
+                    value={formData.eventTime}
+                    onChange={handleChange}
                     required
-                    placeholder="Approximate guest count"
-                    min="1"
-                    className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
                   />
                 </div>
               </div>
 
               <div>
-                <label className="block text-sm font-semibold mb-2 text-gray-800">Message / Special Requests</label>
-                <textarea
-                  name="message"
-                  value={formData.message}
-                  onChange={handleFormChange}
-                  placeholder="Tell us about your event and any special requests..."
-                  rows={5}
-                  className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500 resize-none"
+                <label htmlFor="guestCount" className="block text-sm font-semibold mb-2 flex items-center gap-1">
+                  <Users className="w-4 h-4" />
+                  Expected Guest Count *
+                </label>
+                <input
+                  id="guestCount"
+                  type="number"
+                  name="guestCount"
+                  value={formData.guestCount}
+                  onChange={handleChange}
+                  required
+                  placeholder="e.g., 25"
+                  min="1"
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
                 />
               </div>
-
-              <button
-                type="submit"
-                className="w-full bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 hover:from-pink-600 hover:via-purple-600 hover:to-indigo-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg text-lg"
-              >
-                Get Your Quote
-              </button>
-            </form>
+            </div>
           </div>
-        </div>
+
+          {/* Service Selection Section */}
+          <div className="border-b pb-6">
+            <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+              <Palette className="w-5 h-5" />
+              Service Selection
+            </h2>
+            
+            <div>
+              <label htmlFor="serviceType" className="block text-sm font-semibold mb-2">What service are you interested in? *</label>
+              <select
+                id="serviceType"
+                name="serviceType"
+                value={formData.serviceType}
+                onChange={handleChange}
+                required
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+              >
+                <option value="">Select a service</option>
+                <option value="face-painting">Face Painting Only</option>
+                <option value="body-painting">Body Painting</option>
+                <option value="both">Face & Body Painting</option>
+                <option value="custom">Custom Design Package</option>
+                <option value="unsure">Not sure - need consultation</option>
+              </select>
+            </div>
+          </div>
+
+          {/* Additional Notes Section */}
+          <div>
+            <label htmlFor="additionalNotes" className="block text-sm font-semibold mb-2">Additional Notes or Special Requests</label>
+            <textarea
+              id="additionalNotes"
+              name="additionalNotes"
+              value={formData.additionalNotes}
+              onChange={handleChange}
+              placeholder="Tell us about your vision, theme, any special requests, allergies, or other details that would help us serve you better."
+              rows={5}
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+            />
+          </div>
+
+          <div className="pt-6">
+            <button
+              type="submit"
+              className="w-full px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
+            >
+              Submit Booking Request
+            </button>
+            <p className="text-xs text-gray-600 mt-3 text-center">We'll respond to your booking request within 24 hours with availability and pricing.</p>
+          </div>
+        </form>
       </div>
 
-      <div id="booking-info" data-section="booking-info" className="mx-auto px-4 md:px-6 lg:px-8 py-12 md:py-16 lg:py-20 bg-gradient-to-b from-transparent via-purple-50 to-transparent">
-        <div className="max-w-6xl mx-auto">
-          <h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center mb-12">Get In Touch</h2>
-          
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            <div className="rounded-lg p-8 bg-white border-2 border-pink-200 shadow-lg text-center hover:shadow-xl transition-shadow">
-              <Phone className="w-12 h-12 mx-auto mb-4 text-pink-500" />
-              <h3 className="text-xl font-bold mb-2">Phone</h3>
-              <p className="text-gray-700 mb-4">Call us for quick inquiries</p>
-              <a href="tel:+15551234567" className="text-pink-500 font-semibold hover:text-pink-700 transition-colors">
-                (555) 123-4567
-              </a>
-            </div>
-
-            <div className="rounded-lg p-8 bg-white border-2 border-purple-200 shadow-lg text-center hover:shadow-xl transition-shadow">
-              <Mail className="w-12 h-12 mx-auto mb-4 text-purple-500" />
-              <h3 className="text-xl font-bold mb-2">Email</h3>
-              <p className="text-gray-700 mb-4">Send us your booking details</p>
-              <a href="mailto:paintasy@events.com" className="text-purple-500 font-semibold hover:text-purple-700 transition-colors">
-                paintasy@events.com
-              </a>
-            </div>
-
-            <div className="rounded-lg p-8 bg-white border-2 border-indigo-200 shadow-lg text-center hover:shadow-xl transition-shadow">
-              <MapPin className="w-12 h-12 mx-auto mb-4 text-indigo-500" />
-              <h3 className="text-xl font-bold mb-2">Location</h3>
-              <p className="text-gray-700 mb-4">We service events in your area</p>
-              <p className="text-indigo-500 font-semibold">
-                Regional Coverage Available
-              </p>
-            </div>
-          </div>
-
-          <div className="mt-16 text-center">
-            <h3 className="text-2xl font-bold mb-6">Follow Us On Social Media</h3>
-            <div className="flex justify-center gap-6 flex-wrap">
-              <a
-                href="https://facebook.com"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-blue-500 text-white font-semibold hover:bg-blue-600 transition-colors shadow-lg hover:shadow-xl"
-              >
-                <Facebook className="w-5 h-5" />
-                Facebook
-              </a>
-              <a
-                href="https://instagram.com"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-gradient-to-r from-pink-500 to-purple-500 text-white font-semibold hover:from-pink-600 hover:to-purple-600 transition-colors shadow-lg hover:shadow-xl"
-              >
-                <Instagram className="w-5 h-5" />
-                Instagram
-              </a>
-              <a
-                href="https://tiktok.com"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-gray-900 text-white font-semibold hover:bg-gray-800 transition-colors shadow-lg hover:shadow-xl"
-              >
-                <Twitter className="w-5 h-5" />
-                TikTok
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div id="footer-booking" data-section="footer-booking" className="mx-auto px-4 md:px-6 lg:px-8">
+      <div id="footer-booking" data-section="footer-booking" className="mx-auto px-4 md:px-6">
         <FooterSimple
           columns={footerColumns}
           bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
           bottomRightText="Professional Event Entertainment | Creative Services"
           ariaLabel="Site footer with links"
-          containerClassName="gap-8 lg:gap-12"
+          containerClassName="gap-12"
           columnsClassName="grid-cols-2 lg:grid-cols-4"
           columnTitleClassName="font-extrabold text-lg"
           columnItemClassName="hover:opacity-70 transition-opacity"

src/app/contact/page.tsx

@@ -2,28 +2,18 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { useState } from 'react';
-import { MessageCircle, Mail, Phone, MapPin, Clock, Facebook, Instagram, Twitter, Linkedin } from 'lucide-react';
+import { Mail, Phone, MapPin } from 'lucide-react';
 
 export default function ContactPage() {
-  const [formData, setFormData] = useState({
-    name: '',
-    email: '',
-    subject: '',
-    message: '',
-  });
-
-  const [submitted, setSubmitted] = useState(false);
-
   const navItems = [
     { name: "Home", id: "home" },
     { name: "Services", id: "services" },
-    { name: "Gallery", id: "gallery" },
-    { name: "Packages", id: "packages" },
+    { name: "Gallery", id: "/gallery" },
+    { name: "Packages", id: "/packages" },
     { name: "About", id: "about" },
-    { name: "Booking", id: "booking" },
-    { name: "Contact", id: "contact" },
+    { name: "Contact", id: "/contact" },
   ];
 
   const footerColumns = [
@@ -58,30 +48,12 @@ export default function ContactPage() {
       title: "Service Areas",      items: [
         { label: "Local Events", href: "/contact" },
         { label: "Regional Coverage", href: "/contact" },
-        { label: "Book Now", href: "/booking" },
+        { label: "Book Now", href: "/packages" },
         { label: "Get Quote", href: "/contact" },
       ],
     },
   ];
 
-  const handleFormChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    const { name, value } = e.target;
-    setFormData(prev => ({ ...prev, [name]: value }));
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    console.log('Contact form submitted:', formData);
-    setSubmitted(true);
-    setFormData({
-      name: '',
-      email: '',
-      subject: '',
-      message: '',
-    });
-    setTimeout(() => setSubmitted(false), 3000);
-  };
-
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -104,199 +76,38 @@ export default function ContactPage() {
         />
       </div>
 
-      <div id="contact-hero" data-section="contact-hero" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24 lg:py-32">
-        <div className="max-w-4xl mx-auto text-center">
-          <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-6 bg-gradient-to-r from-red-500 via-yellow-500 to-pink-500 bg-clip-text text-transparent">
-            Contact Us
-          </h1>
-          <p className="text-lg md:text-xl opacity-80 mb-4 max-w-2xl mx-auto">
-            Have questions or ready to book? We'd love to hear from you! Reach out to our team and let's make your event unforgettable.
-          </p>
-        </div>
+      <div id="contact-split" data-section="contact-split" className="mx-auto px-4 md:px-6 py-20">
+        <ContactSplit
+          tag="Get in Touch"
+          title="Book Your Event Today"
+          description="Transform your celebration with professional face and body art. Quick response times, flexible scheduling, and creative designs tailored to your event. Let's make your event unforgettable!"
+          background={{ variant: "radial-gradient" }}
+          useInvertedBackground={false}
+          mediaPosition="right"
+          inputPlaceholder="Enter your email"
+          buttonText="Send Message"
+          termsText="By submitting this form, you agree to be contacted about your event inquiry."
+          mediaAnimation="opacity"
+          onSubmit={(email) => {
+            console.log("Form submitted with email:", email);
+          }}
+          ariaLabel="Contact form section"
+          containerClassName="gap-12"
+          tagClassName="text-sm"
+          titleClassName="text-4xl font-extrabold"
+          descriptionClassName="text-lg opacity-90 max-w-2xl"
+          buttonClassName="px-8 py-3"
+          buttonTextClassName="font-semibold"
+        />
       </div>
 
-      <div id="contact-content" data-section="contact-content" className="mx-auto px-4 md:px-6 lg:px-8 py-12 md:py-16 lg:py-20">
-        <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12">
-          {/* Contact Form */}
-          <div className="rounded-lg p-8 md:p-10 bg-gradient-to-br from-blue-50 via-cyan-50 to-teal-50 border-2 border-cyan-300 shadow-lg">
-            <h2 className="text-3xl font-bold mb-8 text-gray-800">Send Us a Message</h2>
-            
-            {submitted && (
-              <div className="mb-6 p-4 rounded-lg bg-green-100 border-2 border-green-400 text-green-800 font-semibold">
-                ✓ Thank you! We'll be in touch soon.
-              </div>
-            )}
-
-            <form onSubmit={handleSubmit} className="space-y-6">
-              <div>
-                <label className="block text-sm font-semibold mb-2 text-gray-800">Your Name *</label>
-                <input
-                  type="text"
-                  name="name"
-                  value={formData.name}
-                  onChange={handleFormChange}
-                  required
-                  placeholder="John Doe"
-                  className="w-full px-4 py-3 rounded-lg border-2 border-cyan-300 focus:border-cyan-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-semibold mb-2 text-gray-800">Email Address *</label>
-                <input
-                  type="email"
-                  name="email"
-                  value={formData.email}
-                  onChange={handleFormChange}
-                  required
-                  placeholder="your@email.com"
-                  className="w-full px-4 py-3 rounded-lg border-2 border-cyan-300 focus:border-cyan-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-semibold mb-2 text-gray-800">Subject *</label>
-                <input
-                  type="text"
-                  name="subject"
-                  value={formData.subject}
-                  onChange={handleFormChange}
-                  required
-                  placeholder="How can we help?"
-                  className="w-full px-4 py-3 rounded-lg border-2 border-cyan-300 focus:border-cyan-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-semibold mb-2 text-gray-800">Message *</label>
-                <textarea
-                  name="message"
-                  value={formData.message}
-                  onChange={handleFormChange}
-                  required
-                  placeholder="Tell us more about your inquiry..."
-                  rows={6}
-                  className="w-full px-4 py-3 rounded-lg border-2 border-cyan-300 focus:border-cyan-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500 resize-none"
-                />
-              </div>
-
-              <button
-                type="submit"
-                className="w-full bg-gradient-to-r from-cyan-500 via-blue-500 to-teal-500 hover:from-cyan-600 hover:via-blue-600 hover:to-teal-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg text-lg"
-              >
-                Send Message
-              </button>
-            </form>
-          </div>
-
-          {/* Contact Information */}
-          <div className="space-y-8">
-            <div className="rounded-lg p-8 bg-gradient-to-br from-red-50 to-orange-50 border-2 border-red-200 shadow-lg hover:shadow-xl transition-shadow">
-              <div className="flex items-start gap-4">
-                <Phone className="w-8 h-8 text-red-500 flex-shrink-0 mt-1" />
-                <div>
-                  <h3 className="text-lg font-bold text-gray-800 mb-2">Phone</h3>
-                  <a href="tel:+15551234567" className="text-lg font-semibold text-red-600 hover:text-red-700 transition-colors">
-                    (555) 123-4567
-                  </a>
-                  <p className="text-gray-700 mt-1 text-sm">Available Mon-Sun, 9 AM - 6 PM</p>
-                </div>
-              </div>
-            </div>
-
-            <div className="rounded-lg p-8 bg-gradient-to-br from-yellow-50 to-amber-50 border-2 border-yellow-200 shadow-lg hover:shadow-xl transition-shadow">
-              <div className="flex items-start gap-4">
-                <Mail className="w-8 h-8 text-yellow-600 flex-shrink-0 mt-1" />
-                <div>
-                  <h3 className="text-lg font-bold text-gray-800 mb-2">Email</h3>
-                  <a href="mailto:paintasy@events.com" className="text-lg font-semibold text-yellow-700 hover:text-yellow-800 transition-colors">
-                    paintasy@events.com
-                  </a>
-                  <p className="text-gray-700 mt-1 text-sm">We reply within 24 hours</p>
-                </div>
-              </div>
-            </div>
-
-            <div className="rounded-lg p-8 bg-gradient-to-br from-green-50 to-emerald-50 border-2 border-green-200 shadow-lg hover:shadow-xl transition-shadow">
-              <div className="flex items-start gap-4">
-                <MapPin className="w-8 h-8 text-green-600 flex-shrink-0 mt-1" />
-                <div>
-                  <h3 className="text-lg font-bold text-gray-800 mb-2">Service Area</h3>
-                  <p className="text-gray-700 font-semibold">Regional Coverage</p>
-                  <p className="text-gray-700 mt-1 text-sm">We service events throughout the region</p>
-                </div>
-              </div>
-            </div>
-
-            <div className="rounded-lg p-8 bg-gradient-to-br from-purple-50 to-pink-50 border-2 border-purple-200 shadow-lg hover:shadow-xl transition-shadow">
-              <div className="flex items-start gap-4">
-                <Clock className="w-8 h-8 text-purple-600 flex-shrink-0 mt-1" />
-                <div>
-                  <h3 className="text-lg font-bold text-gray-800 mb-2">Hours</h3>
-                  <p className="text-gray-700 text-sm">Monday - Sunday</p>
-                  <p className="text-gray-700 font-semibold text-sm">9:00 AM - 6:00 PM</p>
-                  <p className="text-gray-700 text-sm mt-1">Holiday hours may vary</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Social Media Section */}
-      <div id="contact-social" data-section="contact-social" className="mx-auto px-4 md:px-6 lg:px-8 py-12 md:py-16 lg:py-20 bg-gradient-to-r from-pink-100 via-purple-100 to-indigo-100">
-        <div className="max-w-4xl mx-auto text-center">
-          <h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold mb-4">Connect With Us</h2>
-          <p className="text-lg opacity-80 mb-12">Follow our social media for behind-the-scenes content, event updates, and creative inspiration</p>
-          
-          <div className="flex justify-center gap-6 flex-wrap">
-            <a
-              href="https://facebook.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-3 px-8 py-4 rounded-lg bg-blue-500 text-white font-bold hover:bg-blue-600 transition-all duration-300 transform hover:scale-110 shadow-lg hover:shadow-xl"
-            >
-              <Facebook className="w-6 h-6" />
-              Facebook
-            </a>
-            <a
-              href="https://instagram.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-3 px-8 py-4 rounded-lg bg-gradient-to-r from-pink-500 to-purple-500 text-white font-bold hover:from-pink-600 hover:to-purple-600 transition-all duration-300 transform hover:scale-110 shadow-lg hover:shadow-xl"
-            >
-              <Instagram className="w-6 h-6" />
-              Instagram
-            </a>
-            <a
-              href="https://tiktok.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-3 px-8 py-4 rounded-lg bg-gray-900 text-white font-bold hover:bg-gray-800 transition-all duration-300 transform hover:scale-110 shadow-lg hover:shadow-xl"
-            >
-              <Twitter className="w-6 h-6" />
-              TikTok
-            </a>
-            <a
-              href="https://linkedin.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-3 px-8 py-4 rounded-lg bg-blue-700 text-white font-bold hover:bg-blue-800 transition-all duration-300 transform hover:scale-110 shadow-lg hover:shadow-xl"
-            >
-              <Linkedin className="w-6 h-6" />
-              LinkedIn
-            </a>
-          </div>
-        </div>
-      </div>
-
-      <div id="footer-contact" data-section="footer-contact" className="mx-auto px-4 md:px-6 lg:px-8">
+      <div id="footer-contact" data-section="footer-contact" className="mx-auto px-4 md:px-6">
         <FooterSimple
           columns={footerColumns}
           bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
           bottomRightText="Professional Event Entertainment | Creative Services"
           ariaLabel="Site footer with links"
-          containerClassName="gap-8 lg:gap-12"
+          containerClassName="gap-12"
           columnsClassName="grid-cols-2 lg:grid-cols-4"
           columnTitleClassName="font-extrabold text-lg"
           columnItemClassName="hover:opacity-70 transition-opacity"

src/app/page.tsx

@@ -22,7 +22,6 @@ export default function HomePage() {
     { name: "Gallery", id: "gallery" },
     { name: "Packages", id: "packages" },
     { name: "About", id: "about" },
-    { name: "Booking", id: "booking" },
     { name: "Contact", id: "contact" },
   ];
 
@@ -58,7 +57,7 @@ export default function HomePage() {
       title: "Service Areas",      items: [
         { label: "Local Events", href: "/contact" },
         { label: "Regional Coverage", href: "/contact" },
-        { label: "Book Now", href: "/booking" },
+        { label: "Book Now", href: "/packages" },
         { label: "Get Quote", href: "/contact" },
       ],
     },
@@ -95,7 +94,7 @@ export default function HomePage() {
           tagIcon={Sparkles}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Book Your Event", href: "/booking" },
+            { text: "Book Your Event", href: "/packages" },
             { text: "View Our Gallery", href: "/gallery" },
           ]}
           buttonAnimation="blur-reveal"
@@ -201,17 +200,17 @@ export default function HomePage() {
           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" },
+              id: "birthday-basic",              tag: "Popular",              price: "$150",              period: "per hour",              description: "Perfect for small birthday celebrations",              button: { text: "Request Quote", href: "/packages" },
               featuresTitle: "What's Included",              features: [
                 "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: "/booking" },
+              id: "birthday-deluxe",              tag: "Best Value",              price: "$200",              period: "per 2 hours",              description: "Full party entertainment package",              button: { text: "Request Quote", href: "/packages" },
               featuresTitle: "What's Included",              features: [
                 "Up to 25 kids",                "Custom themed designs",                "Face & temporary tattoos",                "Interactive entertainment"],
             },
             {
-              id: "festival-event",              tag: "Flexible",              price: "$250",              period: "per 3 hours",              description: "Festival and outdoor event service",              button: { text: "Request Quote", href: "/booking" },
+              id: "festival-event",              tag: "Flexible",              price: "$250",              period: "per 3 hours",              description: "Festival and outdoor event service",              button: { text: "Request Quote", href: "/packages" },
               featuresTitle: "What's Included",              features: [
                 "High-capacity crowd service",                "Fast artistic designs",                "Setup & teardown included",                "Portable station"],
             },
@@ -257,7 +256,7 @@ export default function HomePage() {
               id: "testimonial-6",              name: "Thomas Wilson",              role: "Event Manager",              testimonial: "From consultation to execution, Paintasy was excellent. They delivered exactly what we envisioned for our community event. A+",              imageSrc: "http://img.b2bpic.net/free-photo/man-covered-different-colors-holi_23-2148337991.jpg?_wi=2",              imageAlt: "Community event face painting",              icon: Star,
             },
           ]}
-          buttons={[{ text: "Book Now", href: "/booking" }]}
+          buttons={[{ text: "Book Now", href: "/packages" }]}
           buttonAnimation="blur-reveal"
           ariaLabel="Client testimonials section"
           containerClassName="gap-8 lg:gap-12"
@@ -323,7 +322,7 @@ export default function HomePage() {
             {
               id: "faq-6",              title: "What's included in your face painting 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: "Book Your Event", href: "/booking" }]}
+          buttons={[{ text: "Book Your Event", href: "/packages" }]}
           buttonAnimation="blur-reveal"
           ariaLabel="FAQ section with common questions"
           containerClassName="gap-8 lg:gap-12"

src/app/services/page.tsx

@@ -4,19 +4,19 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
-import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
+import FaqBase from '@/components/sections/faq/FaqBase';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Sparkles, Palette, Heart, Smile, Zap, Music, Briefcase, Target, Users, Star, DollarSign } from 'lucide-react';
+import { Sparkles, Palette, Heart, Smile, Zap, Music, Star, DollarSign } from 'lucide-react';
 
 export default function ServicesPage() {
   const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Services", id: "/services" },
-    { name: "Gallery", id: "/gallery" },
-    { name: "Packages", id: "/packages" },
-    { name: "About", id: "/about" },
-    { name: "Contact", id: "/contact" },
+    { name: "Home", id: "home" },
+    { name: "Services", id: "services" },
+    { name: "Gallery", id: "gallery" },
+    { name: "Packages", id: "packages" },
+    { name: "About", id: "about" },
+    { name: "Contact", id: "contact" },
   ];
 
   const footerColumns = [
@@ -34,7 +34,7 @@ export default function ServicesPage() {
         { label: "About Us", href: "/about" },
         { label: "Gallery", href: "/gallery" },
         { label: "Packages", href: "/packages" },
-        { label: "FAQ", href: "/" },
+        { label: "FAQ", href: "#faq" },
         { label: "Contact", href: "/contact" },
       ],
     },
@@ -79,171 +79,134 @@ export default function ServicesPage() {
         />
       </div>
 
-      <div id="services-hero" data-section="services-hero" className="mx-auto px-4 md:px-6 lg:px-8">
+      <div id="services-hero" data-section="services-hero" className="mx-auto px-4 md:px-6">
         <HeroBillboardGallery
-          title="Professional Face Painting & Body Art Services"
-          description="Paintasy offers comprehensive face painting and body art services for every occasion. From intimate birthday parties to large-scale festivals, our professional artists bring creativity, color, and joy to your event."
+          title="Our Professional Services"
+          description="Discover our complete range of face painting and body art services. Whether you're planning a kids' birthday party, organizing a festival, or hosting a corporate event, we have the perfect creative solution for you."
           background={{ variant: "radial-gradient" }}
-          tag="All Services"
-          tagIcon={Sparkles}
+          tag="Professional Services"
+          tagIcon={Palette}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Browse Services", href: "#services-list" },
-            { text: "Get a Quote", href: "/contact" },
+            { text: "Book Your Event", href: "/packages" },
+            { text: "Request a Quote", href: "/contact" },
           ]}
           buttonAnimation="blur-reveal"
           mediaItems={[
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/rainbow-face-paint-art_23-2148621847.jpg?_wi=2",              imageAlt: "Vibrant face painting services showcase"},
+              imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-woman-wearing-mask_23-2148784326.jpg?_wi=3",              imageAlt: "Professional face painting artist at work"},
           ]}
           mediaAnimation="opacity"
-          ariaLabel="Services hero section"
+          ariaLabel="Services page hero section"
           className="min-h-screen"
-          containerClassName="flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12"
-          titleClassName="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight"
-          descriptionClassName="text-base sm:text-lg lg:text-xl opacity-90 max-w-2xl"
+          containerClassName="flex flex-col lg:flex-row items-center justify-between gap-12"
+          titleClassName="text-5xl lg:text-6xl font-extrabold leading-tight"
+          descriptionClassName="text-lg lg:text-xl opacity-90 max-w-2xl"
           buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8"
         />
       </div>
 
-      <div id="services-list" data-section="services-list" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24">
+      <div id="services-details" data-section="services-details" className="mx-auto px-4 md:px-6">
         <FeatureCardTen
-          title="Our Complete Service Menu"
-          description="Choose from our range of professional face and body art services, each designed for specific occasions and clientele."
-          tag="Services"
-          tagIcon={Palette}
+          title="Service Offerings"
+          description="Each service is tailored to your event needs with professional artists, high-quality materials, and attention to detail."
+          tag="What We Offer"
+          tagIcon={Sparkles}
           tagAnimation="slide-up"
           textboxLayout="default"
           animationType="slide-up"
           useInvertedBackground={true}
           features={[
             {
-              id: "kids-party",              title: "Kids Party Face Painting",              description: "Fun, safe, and colorful face painting designs perfect for children's birthday parties. From butterflies and animals to superheroes and princesses, we create magical moments for kids. All paints are hypoallergenic and dermatologist-tested.",              media: {
-                imageSrc: "http://img.b2bpic.net/free-photo/child-with-colorful-face-paint_23-2148412356.jpg?_wi=1",                imageAlt: "Kids enjoying colorful face painting"},
+              id: "kids-party-service",              title: "Kids Party Face Painting",              description: "Transform children's faces into their favorite characters and creatures with our vibrant, playful designs. Perfect for birthday celebrations, creating magical moments and lasting memories.",              media: {
+                imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1",                imageAlt: "Colorful kids party face painting designs"},
               items: [
-                { icon: Heart, text: "Child-safe products" },
-                { icon: Smile, text: "Quick, fun designs" },
-                { icon: Sparkles, text: "Memorable moments" },
+                { icon: Sparkles, text: "Fun character designs" },
+                { icon: Heart, text: "Safe for sensitive skin" },
+                { icon: Smile, text: "Quick & efficient service" },
               ],
               reverse: false,
             },
             {
-              id: "festival",              title: "Festival & Event Face Art",              description: "Fast, impressive designs for large outdoor events, music festivals, and community gatherings. Our artists excel at high-volume service without compromising quality, perfect for busy festival environments.",              media: {
-                imageSrc: "http://img.b2bpic.net/free-photo/festival-face-painting-crowd_23-2148723145.jpg?_wi=1",                imageAlt: "Festival attendees with artistic face painting"},
+              id: "festival-service",              title: "Festival Face Art",              description: "Eye-catching, artistic designs crafted at speed for crowds. Our festival service combines creative artistry with quick turnaround, perfect for outdoor events and high-traffic areas.",              media: {
+                imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1",                imageAlt: "Festival face art creative designs"},
               items: [
-                { icon: Zap, text: "High-volume service" },
-                { icon: Star, text: "Professional designs" },
-                { icon: Music, text: "Event-perfect timing" },
-              ],
-              reverse: true,
-            },
-            {
-              id: "corporate",              title: "Corporate Event Entertainment",              description: "Professional face painting for company parties, brand activations, team-building events, and corporate celebrations. We offer branded design options and maintain a polished, professional demeanor throughout.",              media: {
-                imageSrc: "http://img.b2bpic.net/free-photo/corporate-event-entertainment_23-2148945632.jpg?_wi=1",                imageAlt: "Professional corporate event entertainment"},
-              items: [
-                { icon: Briefcase, text: "Professional service" },
-                { icon: Target, text: "Branded options" },
-                { icon: Users, text: "Team building" },
-              ],
-              reverse: false,
-            },
-            {
-              id: "body-art",              title: "Body Painting & Art",              description: "Stunning full-body art and temporary body painting for special events, themed parties, photo shoots, and artistic projects. Our body painting artists create wearable masterpieces that turn heads.",              media: {
-                imageSrc: "http://img.b2bpic.net/free-photo/body-art-painting_23-2149156247.jpg?_wi=1",                imageAlt: "Professional body art and painting"},
-              items: [
-                { icon: Sparkles, text: "Artistic mastery" },
-                { icon: Heart, text: "Creative designs" },
-                { icon: Star, text: "Photo-worthy art" },
-              ],
-              reverse: true,
-            },
-            {
-              id: "custom",              title: "Custom & Themed Designs",              description: "Create personalized face art tailored to your event's theme. Provide us with inspiration and we'll bring your vision to life with custom designs. Perfect for themed parties, cosplay events, and special celebrations.",              media: {
-                imageSrc: "http://img.b2bpic.net/free-photo/custom-themed-face-art_23-2149267841.jpg?_wi=1",                imageAlt: "Creative custom themed face designs"},
-              items: [
-                { icon: Target, text: "Custom designs" },
-                { icon: Palette, text: "Theme-based art" },
-                { icon: Sparkles, text: "Personalized service" },
-              ],
-              reverse: false,
-            },
-            {
-              id: "tattoo",              title: "Temporary Tattoos & Accessories",              description: "Complement face painting with safe, temporary tattoos and artistic body accessories. Great for adding extra flair to any face painting design or standalone service.",              media: {
-                imageSrc: "http://img.b2bpic.net/free-photo/temporary-tattoo-design_23-2149156325.jpg?_wi=1",                imageAlt: "Colorful temporary tattoo designs"},
-              items: [
-                { icon: Heart, text: "Safe temporary tattoos" },
-                { icon: Zap, text: "Quick application" },
-                { icon: Smile, text: "Extra style" },
+                { icon: Zap, text: "Fast professional service" },
+                { icon: Star, text: "Artistic & bold designs" },
+                { icon: Music, text: "Event-ready atmosphere" },
               ],
               reverse: true,
             },
           ]}
-          buttons={[{ text: "Book Your Service", href: "/packages" }]}
+          buttons={[{ text: "Book a Service", href: "/packages" }]}
           buttonAnimation="blur-reveal"
-          ariaLabel="Services list with detailed descriptions"
-          containerClassName="gap-8 lg:gap-12"
+          ariaLabel="Detailed services section"
+          containerClassName="gap-12"
+          itemClassName=""
+          mediaWrapperClassName=""
         />
       </div>
 
-      <div id="services-pricing" data-section="services-pricing" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24">
-        <PricingCardFive
-          title="Service Packages & Pricing"
-          description="Transparent, flexible pricing for all our face painting services. Choose the package that fits your event size and needs."
-          tag="Pricing"
+      <div id="services-faq" data-section="services-faq" className="mx-auto px-4 md:px-6">
+        <FaqBase
+          title="Service FAQs"
+          description="Common questions about our face painting and body art services."
+          tag="Questions?"
           tagIcon={DollarSign}
           tagAnimation="slide-up"
           textboxLayout="default"
-          animationType="scale-rotate"
-          useInvertedBackground={false}
-          plans={[
+          animationType="smooth"
+          faqsAnimation="slide-up"
+          useInvertedBackground={true}
+          showCard={true}
+          faqs={[
             {
-              id: "starter",              tag: "Entry Level",              price: "$100",              period: "per hour",              description: "Perfect for small gatherings and short events",              button: { text: "Inquire", href: "/contact" },
-              featuresTitle: "Included",              features: [
-                "Up to 10 people",                "Standard designs",                "Face painting only",                "Portable setup"],
-            },
+              id: "service-faq-1",              title: "How many children can you paint at a party?",              content: "Depending on the party duration and design complexity, we can typically paint 15-25 children per hour. For birthday parties, we recommend 2-3 hours for groups of 10-20 kids, allowing time for custom designs and interactions."},
             {
-              id: "professional",              tag: "Most Popular",              price: "$200",              period: "per 2 hours",              description: "Ideal for birthday parties and medium events",              button: { text: "Book Now", href: "/packages" },
-              featuresTitle: "Included",              features: [
-                "Up to 25 people",                "Custom designs",                "Face & temporary tattoos",                "Professional setup"],
-            },
+              id: "service-faq-2",              title: "What designs are available for kids' parties?",              content: "We offer classic designs like butterflies, superheroes, animals, pirates, princesses, and more. We can also create custom designs based on party themes. Browse our portfolio for inspiration, and we'll work with you to bring your vision to life."},
             {
-              id: "premium",              tag: "Best Value",              price: "$400",              period: "per 4 hours",              description: "Comprehensive service for large events",              button: { text: "Request Quote", href: "/contact" },
-              featuresTitle: "Included",              features: [
-                "Unlimited guests",                "Premium designs",                "Face, body art & tattoos",                "Setup & teardown"],
-            },
+              id: "service-faq-3",              title: "Are the face paints waterproof?",              content: "Our professional-grade paints are water-resistant and designed to last for several hours. They're not fully waterproof but are durable enough for most outdoor activities. We recommend avoiding prolonged water exposure immediately after application."},
+            {
+              id: "service-faq-4",              title: "Can you accommodate large festival events?",              content: "Absolutely! We specialize in festival and outdoor event services. For large crowds, we can work quickly without compromising quality. We bring all necessary equipment and set up an efficient service station that can handle high volume."},
+            {
+              id: "service-faq-5",              title: "Do you offer body painting services?",              content: "Yes, we offer professional body painting for special events, themed parties, and artistic projects. Body painting takes longer than face painting but creates stunning visual effects. Contact us to discuss your specific needs."},
+            {
+              id: "service-faq-6",              title: "What is your hygiene protocol?",              content: "We follow strict hygiene standards. We use clean, sanitized brushes and applicators for each client. We also offer touchless application methods for those with sensitivities. All materials are professional-grade and hypoallergenic."},
           ]}
-          buttons={[{ text: "View All Packages", href: "/packages" }]}
+          buttons={[{ text: "Book Your Service", href: "/packages" }]}
           buttonAnimation="blur-reveal"
-          ariaLabel="Service pricing and packages"
-          containerClassName="gap-8 lg:gap-12"
+          ariaLabel="Services FAQ section"
+          containerClassName="gap-12"
+          accordionClassName=""
+          accordionTitleClassName=""
         />
       </div>
 
-      <div id="services-cta" data-section="services-cta" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24">
+      <div id="services-contact" data-section="services-contact" className="mx-auto px-4 md:px-6">
         <ContactText
-          text="Ready to bring creative entertainment to your event? Contact Paintasy today to discuss your service needs, get personalized recommendations, and book your professional face painters."
+          text="Ready to book one of our services? Get in touch today! We'll work with you to customize the perfect face painting and body art experience for your event."
           animationType="background-highlight"
           background={{ variant: "radial-gradient" }}
           useInvertedBackground={false}
           buttons={[
             { text: "Request a Quote", href: "/contact" },
-            { text: "Call Now", href: "tel:+15551234567" },
+            { text: "Book Now", href: "/packages" },
           ]}
-          ariaLabel="Services call-to-action"
-          containerClassName="py-12 sm:py-16 lg:py-20"
+          ariaLabel="Services contact call-to-action"
+          containerClassName="py-16"
           contentClassName="max-w-3xl mx-auto"
-          textClassName="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-center"
+          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 lg:px-8">
+      <div id="services-footer" data-section="services-footer" className="mx-auto px-4 md:px-6">
         <FooterSimple
           columns={footerColumns}
           bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
           bottomRightText="Professional Event Entertainment | Creative Services"
           ariaLabel="Site footer with links"
-          containerClassName="gap-8 lg:gap-12"
+          containerClassName="gap-12"
           columnsClassName="grid-cols-2 lg:grid-cols-4"
           columnTitleClassName="font-extrabold text-lg"
           columnItemClassName="hover:opacity-70 transition-opacity"