Update src/app/services/page.tsx

Merge version_5 into main

src/app/about/page.tsx

@@ -1,55 +1,54 @@
 "use client";
 
-import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
-import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
-import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import FooterSimple from "@/components/sections/footer/FooterSimple";
+import ContactText from '@/components/sections/contact/ContactText';
-import { Palette, Award, Shield, CheckCircle } from "lucide-react";
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { Sparkles, Palette, Heart, Smile, Zap, Music, Briefcase, Target, Users, Star, Award } from 'lucide-react';
 
 export default function AboutPage() {
   const navItems = [
-    { name: "Home", id: "home" },
+    { name: "Home", id: "/" },
-    { name: "Services", id: "services" },
+    { name: "Services", id: "/services" },
-    { name: "Gallery", id: "gallery" },
+    { name: "Gallery", id: "/gallery" },
-    { name: "Packages", id: "packages" },
+    { name: "Packages", id: "/packages" },
-    { name: "About", id: "about" },
+    { name: "About", id: "/about" },
-    { name: "Contact", id: "contact" },
+    { name: "Contact", id: "/contact" },
   ];
 
   const footerColumns = [
     {
-      title: "Services",
+      title: "Services",      items: [
-      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",
+      title: "Company",      items: [
-      items: [
         { label: "About Us", href: "/about" },
         { label: "Gallery", href: "/gallery" },
         { label: "Packages", href: "/packages" },
+        { label: "FAQ", href: "/" },
         { label: "Contact", href: "/contact" },
       ],
     },
     {
-      title: "Connect",
+      title: "Connect",      items: [
-      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",
+      title: "Service Areas",      items: [
-      items: [
         { label: "Local Events", href: "/contact" },
         { label: "Regional Coverage", href: "/contact" },
         { label: "Book Now", href: "/packages" },
@@ -73,103 +72,147 @@ export default function AboutPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
-          navItems={navItems}
           brandName="Paintasy"
+          navItems={navItems}
           bottomLeftText="Creative Face & Body Art"
           bottomRightText="paintasy@events.com"
         />
       </div>
 
-      <div id="about-page-hero" data-section="about-page-hero">
+      <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">
-        <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",
-            },
-          ]}
-          mediaAnimation="opacity"
-          titleClassName="text-5xl font-extrabold"
-          descriptionClassName="text-lg opacity-90"
-        />
-      </div>
-
-      <div id="about-story" data-section="about-story">
         <MetricSplitMediaAbout
-          title="Our Story & Mission"
+          title="Paintasy: Bringing Color and Joy to Every Celebration"
-          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."
+          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="Professional Team"
+          tag="Our Story"
-          tagIcon={Award}
+          tagIcon={Sparkles}
           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"
+          imageSrc="http://img.b2bpic.net/free-photo/young-artist-female-her-20s-art-studio-with-many-tools-painting_662251-1233.jpg?_wi=1"
-          imageAlt="Our professional face painting artist"
+          imageAlt="Paintasy artists working on creative designs"
           mediaAnimation="blur-reveal"
           metrics={[
-            { value: "500+", title: "Events Painted" },
+            { value: "15+", title: "Professional Artists" },
-            { value: "1000+", title: "Happy Faces" },
+            { value: "500+", title: "Events Completed" },
-            { value: "10+", title: "Years Experience" },
+            { value: "1000+", title: "Happy Faces Painted" },
-            { value: "100%", title: "Satisfaction Rate" },
+            { value: "100%", title: "Client Satisfaction" },
           ]}
           metricsAnimation="slide-up"
-          useInvertedBackground={true}
+          useInvertedBackground={false}
-          titleClassName="text-4xl font-extrabold"
+          ariaLabel="About page main section"
-          descriptionClassName="text-lg opacity-90 max-w-2xl"
+          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"
         />
       </div>
 
-      <div id="about-values" data-section="about-values">
+      <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"
+          title="Our Values & Commitment"
-          description="What drives us in everything we do."
+          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}
+          tagAnimation="slide-up"
           textboxLayout="default"
           animationType="slide-up"
-          useInvertedBackground={false}
+          useInvertedBackground={true}
           features={[
             {
-              id: "value-1",
+              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: {
-              title: "Creativity",
+                imageSrc: "http://img.b2bpic.net/free-photo/art-supplies-arranged-table_23-2147854326.jpg?_wi=1",                imageAlt: "Professional face painting supplies"},
-              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: Palette, text: "Artistic innovation" },
+                { icon: Star, text: "Premium materials" },
-                { icon: CheckCircle, text: "Unique designs" },
+                { icon: Sparkles, text: "Professional artists" },
+                { icon: Heart, text: "Detail-oriented service" },
               ],
               reverse: false,
             },
             {
-              id: "value-2",
+              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: {
-              title: "Safety & Professionalism",
+                imageSrc: "http://img.b2bpic.net/free-photo/hands-being-washed_23-2149191617.jpg?_wi=1",                imageAlt: "Professional hygiene practices"},
-              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: Shield, text: "Hypoallergenic products" },
+                { icon: Smile, text: "Strict hygiene standards" },
-                { icon: CheckCircle, text: "Safety certified" },
+                { icon: Heart, text: "Hypoallergenic products" },
+                { icon: Target, text: "Health-conscious service" },
               ],
               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,
+            },
           ]}
-          containerClassName="gap-12"
+          buttons={[{ text: "Book Your Event", href: "/packages" }]}
-          titleClassName="text-4xl font-extrabold"
+          buttonAnimation="blur-reveal"
-          descriptionClassName="text-lg opacity-90"
+          ariaLabel="About page values section"
+          containerClassName="gap-8 lg:gap-12"
         />
       </div>
 
-      <div id="footer" data-section="footer">
+      <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">
         <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

@@ -0,0 +1,318 @@
+"use client";
+
+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';
+
+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: "About", id: "about" },
+    { name: "Booking", id: "booking" },
+    { name: "Contact", id: "contact" },
+  ];
+
+  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: "Company",      items: [
+        { label: "About Us", href: "/about" },
+        { label: "Gallery", href: "/gallery" },
+        { label: "Packages", href: "/packages" },
+        { label: "FAQ", href: "#faq" },
+        { label: "Contact", href: "/contact" },
+      ],
+    },
+    {
+      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: [
+        { label: "Local Events", href: "/contact" },
+        { label: "Regional Coverage", href: "/contact" },
+        { label: "Book Now", href: "/booking" },
+        { label: "Get Quote", href: "/contact" },
+      ],
+    },
+  ];
+
+  const handleFormChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    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: '',
+    });
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="large"
+      background="none"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          brandName="Paintasy"
+          navItems={navItems}
+          bottomLeftText="Creative Face & Body Art"
+          bottomRightText="paintasy@events.com"
+        />
+      </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>
+      </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>
+              </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">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>
+                  <input
+                    type="date"
+                    name="eventDate"
+                    value={formData.eventDate}
+                    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"
+                  />
+                </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>
+                  <input
+                    type="number"
+                    name="guestCount"
+                    value={formData.guestCount}
+                    onChange={handleFormChange}
+                    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"
+                  />
+                </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"
+                />
+              </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>
+
+      <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">
+        <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/contact/page.tsx

@@ -2,33 +2,30 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Mail, Sparkles } from 'lucide-react';
 import { useState } from 'react';
-
+import { MessageCircle, Mail, Phone, MapPin, Clock, Facebook, Instagram, Twitter, Linkedin } from 'lucide-react';
-export const metadata = {
-  title: "Contact Us - Book Face Painting & Body Art | Paintasy",  description: "Professional face painting and body art services for parties, festivals, and events. Get in touch with Paintasy to book your face painter, request quotes, and discuss custom face painting designs.",  keywords: "book face painter, face painting services, body art booking, contact face painter, professional face painting, request face painting quote"};
 
 export default function ContactPage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Services", id: "/services" },
-    { name: "Gallery", id: "/gallery" },
-    { name: "Packages", id: "/" },
-    { name: "About", id: "/" },
-    { name: "Contact", id: "/contact" },
-  ];
-
   const [formData, setFormData] = useState({
     name: '',
     email: '',
-    phone: '',
+    subject: '',
-    eventDate: '',
-    eventType: '',
     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: "About", id: "about" },
+    { name: "Booking", id: "booking" },
+    { name: "Contact", id: "contact" },
+  ];
+
   const footerColumns = [
     {
       title: "Services",      items: [
@@ -41,10 +38,10 @@ export default function ContactPage() {
     },
     {
       title: "Company",      items: [
-        { label: "About Us", href: "/" },
+        { label: "About Us", href: "/about" },
         { label: "Gallery", href: "/gallery" },
-        { label: "Packages", href: "/" },
+        { label: "Packages", href: "/packages" },
-        { label: "FAQ", href: "/" },
+        { label: "FAQ", href: "#faq" },
         { label: "Contact", href: "/contact" },
       ],
     },
@@ -61,12 +58,30 @@ export default function ContactPage() {
       title: "Service Areas",      items: [
         { label: "Local Events", href: "/contact" },
         { label: "Regional Coverage", href: "/contact" },
-        { label: "Book Now", href: "/contact" },
+        { label: "Book Now", href: "/booking" },
         { 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"
@@ -89,151 +104,199 @@ export default function ContactPage() {
         />
       </div>
 
-      <div id="contact-cta" data-section="contact-cta" className="mx-auto px-4 md:px-6 pt-24">
+      <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">
-        <ContactCTA
+        <div className="max-w-4xl mx-auto text-center">
-          tag="Get in Touch"
+          <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">
-          tagIcon={Mail}
+            Contact Us
-          tagAnimation="slide-up"
+          </h1>
-          title="Book Your Professional Face Painter"
+          <p className="text-lg md:text-xl opacity-80 mb-4 max-w-2xl mx-auto">
-          description="Transform your event with professional face painting and body art. Our skilled face painters deliver creative designs that bring joy to every occasion. From kids parties to festivals, corporate events to special celebrations, we provide exceptional face painting entertainment. Let's create unforgettable memories together."
+            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.
-          buttons={[
+          </p>
-            { text: "Request Quote", href: "#contact-form" },
+        </div>
-            { text: "Call Now", href: "tel:+15551234567" },
-          ]}
-          buttonAnimation="blur-reveal"
-          background={{ variant: "radial-gradient" }}
-          useInvertedBackground={false}
-          ariaLabel="Contact CTA section"
-          containerClassName="gap-12"
-          textBoxClassName="max-w-2xl"
-          titleClassName="text-4xl font-extrabold"
-          descriptionClassName="text-lg opacity-90"
-        />
       </div>
 
-      <div id="contact-form" data-section="contact-form" className="mx-auto px-4 md:px-6 py-16">
+      <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-2xl mx-auto">
+        <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12">
-          <h2 className="text-3xl font-extrabold mb-4">Request a Quote</h2>
+          {/* Contact Form */}
-          <p className="text-lg opacity-90 mb-8">Tell us about your event and get a personalized quote from our team. We'll respond within 24 hours.</p>
+          <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">
-          <form className="space-y-6 bg-gradient-to-br from-card to-background p-8 rounded-lg border border-accent">
+            <h2 className="text-3xl font-bold mb-8 text-gray-800">Send Us a Message</h2>
-            <div>
+            
-              <label className="block text-sm font-semibold mb-2">Event Type</label>
+            {submitted && (
-              <select
+              <div className="mb-6 p-4 rounded-lg bg-green-100 border-2 border-green-400 text-green-800 font-semibold">
-                value={formData.eventType}
+                ✓ Thank you! We'll be in touch soon.
-                onChange={(e) => setFormData({ ...formData, eventType: e.target.value })}
+              </div>
-                className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
+            )}
-              >
+
-                <option value="">Select an event type...</option>
+            <form onSubmit={handleSubmit} className="space-y-6">
-                <option value="kids-party">Kids Birthday Party</option>
-                <option value="festival">Festival or Outdoor Event</option>
-                <option value="corporate">Corporate Event</option>
-                <option value="wedding">Wedding</option>
-                <option value="school">School Event</option>
-                <option value="other">Other</option>
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-semibold mb-2">Event Date</label>
-              <input
-                type="date"
-                value={formData.eventDate}
-                onChange={(e) => setFormData({ ...formData, eventDate: e.target.value })}
-                className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
-              />
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-semibold mb-2">Full Name</label>
+                <label className="block text-sm font-semibold mb-2 text-gray-800">Your Name *</label>
                 <input
                   type="text"
+                  name="name"
                   value={formData.name}
-                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  onChange={handleFormChange}
-                  placeholder="Your name"
+                  required
-                  className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-opacity-50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  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">Email</label>
+                <label className="block text-sm font-semibold mb-2 text-gray-800">Email Address *</label>
                 <input
                   type="email"
+                  name="email"
                   value={formData.email}
-                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                  onChange={handleFormChange}
+                  required
                   placeholder="your@email.com"
-                  className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-opacity-50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  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>
+
-              <label className="block text-sm font-semibold mb-2">Phone Number</label>
+            <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">
-              <input
+              <div className="flex items-start gap-4">
-                type="tel"
+                <Mail className="w-8 h-8 text-yellow-600 flex-shrink-0 mt-1" />
-                value={formData.phone}
+                <div>
-                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
+                  <h3 className="text-lg font-bold text-gray-800 mb-2">Email</h3>
-                placeholder="(555) 123-4567"
+                  <a href="mailto:paintasy@events.com" className="text-lg font-semibold text-yellow-700 hover:text-yellow-800 transition-colors">
-                className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-opacity-50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    paintasy@events.com
-              />
+                  </a>
+                  <p className="text-gray-700 mt-1 text-sm">We reply within 24 hours</p>
+                </div>
+              </div>
             </div>
-            <div>
+
-              <label className="block text-sm font-semibold mb-2">Tell Us About Your Event</label>
+            <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">
-              <textarea
+              <div className="flex items-start gap-4">
-                value={formData.message}
+                <MapPin className="w-8 h-8 text-green-600 flex-shrink-0 mt-1" />
-                onChange={(e) => setFormData({ ...formData, message: e.target.value })}
+                <div>
-                placeholder="Event details, number of attendees, design preferences..."
+                  <h3 className="text-lg font-bold text-gray-800 mb-2">Service Area</h3>
-                rows={5}
+                  <p className="text-gray-700 font-semibold">Regional Coverage</p>
-                className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-opacity-50 focus:outline-none focus:ring-2 focus:ring-primary-cta resize-none"
+                  <p className="text-gray-700 mt-1 text-sm">We service events throughout the region</p>
-              />
+                </div>
+              </div>
             </div>
-            <button
+
-              type="submit"
+            <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">
-              onClick={(e) => {
+              <div className="flex items-start gap-4">
-                e.preventDefault();
+                <Clock className="w-8 h-8 text-purple-600 flex-shrink-0 mt-1" />
-                window.location.href = `mailto:paintasy@events.com?subject=Face Painting Quote Request from ${formData.name}&body=Event Type: ${formData.eventType}%0AEvent Date: ${formData.eventDate}%0AName: ${formData.name}%0AEmail: ${formData.email}%0APhone: ${formData.phone}%0A%0AEvent Details:%0A${formData.message}`;
+                <div>
-              }}
+                  <h3 className="text-lg font-bold text-gray-800 mb-2">Hours</h3>
-              className="w-full px-6 py-3 bg-gradient-to-r from-primary-cta to-accent text-white font-semibold rounded-lg hover:shadow-lg transition-shadow"
+                  <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"
             >
-              Send Quote Request
+              <Facebook className="w-6 h-6" />
-            </button>
+              Facebook
-          </form>
-        </div>
-      </div>
-
-      <div id="contact-info" data-section="contact-info" className="mx-auto px-4 md:px-6 py-16">
-        <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
-          <div className="text-center">
-            <div className="mb-4 text-4xl">📞</div>
-            <h3 className="text-xl font-extrabold mb-2">Call Us</h3>
-            <p className="opacity-90">Phone and text</p>
-            <a href="tel:+15551234567" className="text-primary-cta font-semibold hover:underline mt-2 inline-block">
-              +1 (555) 123-4567
             </a>
-          </div>
+            <a
-          <div className="text-center">
+              href="https://instagram.com"
-            <div className="mb-4 text-4xl">✉️</div>
+              target="_blank"
-            <h3 className="text-xl font-extrabold mb-2">Email Us</h3>
+              rel="noopener noreferrer"
-            <p className="opacity-90">We'll respond within 24 hours</p>
+              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"
-            <a href="mailto:paintasy@events.com" className="text-primary-cta font-semibold hover:underline mt-2 inline-block">
+            >
-              paintasy@events.com
+              <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 className="text-center">
-            <div className="mb-4 text-4xl">🎨</div>
-            <h3 className="text-xl font-extrabold mb-2">Follow Us</h3>
-            <p className="opacity-90">Connect on social media</p>
-            <div className="flex justify-center gap-4 mt-2">
-              <a href="https://instagram.com" className="text-primary-cta hover:underline">Instagram</a>
-              <a href="https://facebook.com" className="text-primary-cta hover:underline">Facebook</a>
-            </div>
           </div>
         </div>
       </div>
 
-      <div id="footer-contact" data-section="footer-contact" className="mx-auto px-4 md:px-6">
+      <div id="footer-contact" data-section="footer-contact" className="mx-auto px-4 md:px-6 lg:px-8">
         <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-12"
+          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"
@@ -241,4 +304,4 @@ export default function ContactPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/gallery/page.tsx

@@ -7,16 +7,13 @@ import ContactText from '@/components/sections/contact/ContactText';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import { Camera, Sparkles } from 'lucide-react';
 
-export const metadata = {
-  title: "Gallery - Face Painting & Body Art Portfolio | Paintasy",  description: "View our complete gallery of professional face painting and body art work. Real photos from parties, festivals, corporate events, and special occasions. Browse creative designs by category.",  keywords: "face painting gallery, body art portfolio, face painting photos, face painter work, professional face art, event entertainment"};
-
 export default function GalleryPage() {
   const navItems = [
-    { name: "Home", id: "/" },
+    { name: "Home", id: "home" },
-    { name: "Services", id: "/services" },
+    { name: "Services", id: "services" },
     { name: "Gallery", id: "/gallery" },
-    { name: "Packages", id: "/" },
+    { name: "Packages", id: "/packages" },
-    { name: "About", id: "/" },
+    { name: "About", id: "about" },
     { name: "Contact", id: "/contact" },
   ];
 
@@ -32,10 +29,10 @@ export default function GalleryPage() {
     },
     {
       title: "Company",      items: [
-        { label: "About Us", href: "/" },
+        { label: "About Us", href: "/about" },
         { label: "Gallery", href: "/gallery" },
-        { label: "Packages", href: "/" },
+        { label: "Packages", href: "/packages" },
-        { label: "FAQ", href: "/" },
+        { label: "FAQ", href: "#faq" },
         { label: "Contact", href: "/contact" },
       ],
     },
@@ -52,7 +49,7 @@ export default function GalleryPage() {
       title: "Service Areas",      items: [
         { label: "Local Events", href: "/contact" },
         { label: "Regional Coverage", href: "/contact" },
-        { label: "Book Now", href: "/" },
+        { label: "Book Now", href: "/packages" },
         { label: "Get Quote", href: "/contact" },
       ],
     },
@@ -80,122 +77,59 @@ export default function GalleryPage() {
         />
       </div>
 
-      <div id="gallery-kids" data-section="gallery-kids" className="mx-auto px-4 md:px-6 pt-24">
+      <div id="gallery-full" data-section="gallery-full" className="mx-auto px-4 md:px-6 py-20">
         <ProductCardFour
-          title="Kids Party Face Painting Gallery"
+          title="Complete Photo Gallery"
-          description="Creative, colorful face painting designs perfect for children's birthday parties and celebrations. Safe, high-quality art that brings smiles to young faces."
+          description="Explore our full collection of face painting and body art work from events, festivals, and celebrations. Real photos showcasing our professional artistry and creativity."
-          tag="Kids Designs"
+          tag="Portfolio"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          animationType="opacity"
-          useInvertedBackground={false}
-          gridVariant="three-columns-all-equal-width"
-          carouselMode="buttons"
-          products={[
-            {
-              id: "kids-1",              name: "Butterfly Dreams",              price: "Kids Design",              variant: "Birthday Favorite",              imageSrc: "http://img.b2bpic.net/free-photo/cute-girl-with-painted-face_23-2149089213.jpg",              imageAlt: "Colorful butterfly face painting for kids"},
-            {
-              id: "kids-2",              name: "Superhero Mask",              price: "Kids Design",              variant: "Party Popular",              imageSrc: "http://img.b2bpic.net/free-photo/boy-face-painting_23-2148784394.jpg",              imageAlt: "Superhero mask face painting for children"},
-            {
-              id: "kids-3",              name: "Princess Crown",              price: "Kids Design",              variant: "Girls Favorite",              imageSrc: "http://img.b2bpic.net/free-photo/little-girl-with-face-painting_23-2149089210.jpg",              imageAlt: "Princess themed face painting with crown design"},
-            {
-              id: "kids-4",              name: "Animal Fun",              price: "Kids Design",              variant: "All Ages",              imageSrc: "http://img.b2bpic.net/free-photo/child-face-painted-tiger_23-2148948273.jpg",              imageAlt: "Tiger face painting design for children"},
-            {
-              id: "kids-5",              name: "Galaxy Stars",              price: "Kids Design",              variant: "Popular Choice",              imageSrc: "http://img.b2bpic.net/free-photo/girl-with-stars-face-paint_23-2149089215.jpg",              imageAlt: "Galaxy and stars face painting artwork"},
-            {
-              id: "kids-6",              name: "Glitter Rainbow",              price: "Kids Design",              variant: "Party Favorite",              imageSrc: "http://img.b2bpic.net/free-photo/child-with-rainbow-face-paint_23-2148948275.jpg",              imageAlt: "Rainbow glitter face painting design"},
-          ]}
-          buttons={[{ text: "Book Kids Party Painting", href: "/contact" }]}
-          buttonAnimation="blur-reveal"
-          ariaLabel="Kids party face painting gallery"
-          containerClassName="gap-12"
-          titleClassName="text-4xl font-extrabold"
-          descriptionClassName="text-lg opacity-90 max-w-3xl"
-        />
-      </div>
-
-      <div id="gallery-festival" data-section="gallery-festival" className="mx-auto px-4 md:px-6 pt-16">
-        <ProductCardFour
-          title="Festival & Event Face Art"
-          description="Professional face painting showcasing artistic designs from festivals, outdoor events, and large gatherings. Fast, creative service with stunning results."
-          tag="Festival Art"
           tagIcon={Camera}
           tagAnimation="slide-up"
           textboxLayout="default"
           animationType="opacity"
-          useInvertedBackground={true}
-          gridVariant="three-columns-all-equal-width"
-          carouselMode="buttons"
-          products={[
-            {
-              id: "festival-1",              name: "Artistic Abstraction",              price: "Festival Design",              variant: "Modern Art",              imageSrc: "http://img.b2bpic.net/free-photo/face-art-festival_23-2148784315.jpg",              imageAlt: "Abstract artistic face painting design"},
-            {
-              id: "festival-2",              name: "Geometric Patterns",              price: "Festival Design",              variant: "Contemporary",              imageSrc: "http://img.b2bpic.net/free-photo/geometric-face-paint-design_23-2148948280.jpg",              imageAlt: "Geometric pattern face painting artwork"},
-            {
-              id: "festival-3",              name: "Nature Inspired",              price: "Festival Design",              variant: "Organic Art",              imageSrc: "http://img.b2bpic.net/free-photo/nature-themed-face-art_23-2149089220.jpg",              imageAlt: "Nature inspired face painting with floral elements"},
-            {
-              id: "festival-4",              name: "Metallic Shine",              price: "Festival Design",              variant: "Bold Statement",              imageSrc: "http://img.b2bpic.net/free-photo/metallic-face-paint_23-2148948282.jpg",              imageAlt: "Metallic gold and silver face painting design"},
-            {
-              id: "festival-5",              name: "Vibrant Expression",              price: "Festival Design",              variant: "Artistic",              imageSrc: "http://img.b2bpic.net/free-photo/vibrant-face-paint-art_23-2149089225.jpg",              imageAlt: "Vibrant multicolor face painting creation"},
-            {
-              id: "festival-6",              name: "Cosmic Design",              price: "Festival Design",              variant: "Space Theme",              imageSrc: "http://img.b2bpic.net/free-photo/cosmic-face-art_23-2148948285.jpg",              imageAlt: "Cosmic and space themed face painting"},
-          ]}
-          buttons={[{ text: "Book Festival Entertainment", href: "/contact" }]}
-          buttonAnimation="blur-reveal"
-          ariaLabel="Festival and event face art gallery"
-          containerClassName="gap-12"
-          titleClassName="text-4xl font-extrabold"
-          descriptionClassName="text-lg opacity-90 max-w-3xl"
-        />
-      </div>
-
-      <div id="gallery-body-art" data-section="gallery-body-art" className="mx-auto px-4 md:px-6 pt-16">
-        <ProductCardFour
-          title="Professional Body Art & Advanced Designs"
-          description="Premium body painting and advanced face art designs for special occasions. Professional artwork by experienced face painters specializing in detailed, high-impact designs."
-          tag="Professional Art"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          animationType="opacity"
           useInvertedBackground={false}
-          gridVariant="three-columns-all-equal-width"
+          gridVariant="bento-grid"
           carouselMode="buttons"
           products={[
             {
-              id: "body-1",              name: "Full Body Art",              price: "Premium Design",              variant: "Special Events",              imageSrc: "http://img.b2bpic.net/free-photo/body-art-painting_23-2149159240.jpg",              imageAlt: "Professional full body art painting"},
+              id: "gallery-kids-1",              name: "Butterfly Dreams",              price: "Kids Party",              variant: "Birthday Event",              imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1",              imageAlt: "Butterfly face painting design on child"},
             {
-              id: "body-2",              name: "Elegant Face Art",              price: "Premium Design",              variant: "Professional",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-face-design_23-2148948290.jpg",              imageAlt: "Elegant professional face art design"},
+              id: "gallery-kids-2",              name: "Superhero Masks",              price: "Kids Party",              variant: "Birthday Event",              imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=1",              imageAlt: "Superhero themed face painting for children"},
             {
-              id: "body-3",              name: "Detailed Portrait",              price: "Premium Design",              variant: "Artistic",              imageSrc: "http://img.b2bpic.net/free-photo/detailed-portrait-face-art_23-2149089230.jpg",              imageAlt: "Detailed portrait style face painting"},
+              id: "gallery-festival-1",              name: "Festival Fantasy",              price: "Festival Art",              variant: "Outdoor Event",              imageSrc: "http://img.b2bpic.net/free-photo/man-covered-different-colors-holi_23-2148337991.jpg?_wi=1",              imageAlt: "Vibrant festival face painting with multiple colors"},
             {
-              id: "body-4",              name: "Character Design",              price: "Premium Design",              variant: "Creative",              imageSrc: "http://img.b2bpic.net/free-photo/character-face-art_23-2148948292.jpg",              imageAlt: "Character themed face art design"},
+              id: "gallery-festival-2",              name: "Rainbow Celebration",              price: "Festival Art",              variant: "Outdoor Event",              imageSrc: "http://img.b2bpic.net/free-psd/holi-festival-celebration-instagram-posts_23-2151227255.jpg?_wi=1",              imageAlt: "Rainbow colored festival face art"},
             {
-              id: "body-5",              name: "Fantasy Makeup",              price: "Premium Design",              variant: "Special Occasion",              imageSrc: "http://img.b2bpic.net/free-photo/fantasy-face-makeup_23-2149089235.jpg",              imageAlt: "Fantasy themed face makeup art"},
+              id: "gallery-body-1",              name: "Body Art Elegance",              price: "Body Painting",              variant: "Special Event",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=1",              imageAlt: "Professional body painting artwork"},
             {
-              id: "body-6",              name: "Custom Artwork",              price: "Premium Design",              variant: "Bespoke",              imageSrc: "http://img.b2bpic.net/free-photo/custom-face-art_23-2148948295.jpg",              imageAlt: "Custom face art design created for client"},
+              id: "gallery-custom-1",              name: "Artistic Creation",              price: "Custom Design",              variant: "Themed Event",              imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1",              imageAlt: "Artist applying custom face painting design"},
+            {
+              id: "gallery-kids-3",              name: "Princess Tiara",              price: "Kids Party",              variant: "Birthday Event",              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=1",              imageAlt: "Princess themed face painting on young girl"},
+            {
+              id: "gallery-festival-3",              name: "Glitter Dreams",              price: "Festival Art",              variant: "Outdoor Event",              imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1",              imageAlt: "Glittery festival face painting design"},
+            {
+              id: "gallery-corporate-1",              name: "Brand Activation",              price: "Corporate Event",              variant: "Professional",              imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=1",              imageAlt: "Corporate event face painting for brand activation"},
           ]}
-          buttons={[{ text: "Request Custom Design", href: "/contact" }]}
+          buttons={[{ text: "Book Your Event", href: "/packages" }]}
           buttonAnimation="blur-reveal"
-          ariaLabel="Professional body art and advanced designs gallery"
+          ariaLabel="Complete photo gallery with all artworks"
           containerClassName="gap-12"
-          titleClassName="text-4xl font-extrabold"
+          cardNameClassName=""
-          descriptionClassName="text-lg opacity-90 max-w-3xl"
+          cardPriceClassName=""
+          cardVariantClassName=""
         />
       </div>
 
-      <div id="contact-gallery" data-section="contact-gallery" className="mx-auto px-4 md:px-6 pt-16">
+      <div id="contact-gallery" data-section="contact-gallery" className="mx-auto px-4 md:px-6">
         <ContactText
-          text="Love what you see in our gallery? Our professional face painters are ready to create custom designs for your next event. Whether it's a kids party, festival, or corporate celebration, we bring creativity and expertise to every face painting service."
+          text="Love what you see? Let's bring these creative designs to your next event! Contact Paintasy today to book your professional face and body art experience."
           animationType="background-highlight"
           background={{ variant: "radial-gradient" }}
           useInvertedBackground={false}
           buttons={[
-            { text: "Book Face Painting Now", href: "/contact" },
+            { text: "Request a Quote", href: "/contact" },
-            { text: "View Packages", href: "/" },
+            { text: "View Packages", href: "/packages" },
           ]}
-          ariaLabel="Gallery contact section"
+          ariaLabel="Contact section for gallery page"
           containerClassName="py-16"
           contentClassName="max-w-3xl mx-auto"
           textClassName="text-4xl font-extrabold text-center"
@@ -203,7 +137,7 @@ export default function GalleryPage() {
         />
       </div>
 
-      <div id="footer-gallery" data-section="footer-gallery" className="mx-auto px-4 md:px-6 pt-16">
+      <div id="footer-gallery" data-section="footer-gallery" className="mx-auto px-4 md:px-6">
         <FooterSimple
           columns={footerColumns}
           bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
@@ -217,4 +151,4 @@ export default function GalleryPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/packages/page.tsx

@@ -4,10 +4,11 @@ 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 FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
+import FaqBase from '@/components/sections/faq/FaqBase';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Sparkles, DollarSign, HelpCircle } from 'lucide-react';
+import { Sparkles, DollarSign, Check, Zap, Users, Music } from 'lucide-react';
 
 export default function PackagesPage() {
   const navItems = [
@@ -57,10 +58,6 @@ export default function PackagesPage() {
     },
   ];
 
-  const handleBookingSubmit = (data: Record<string, string>) => {
-    console.log("Booking inquiry submitted:", data);
-  };
-
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -83,25 +80,25 @@ export default function PackagesPage() {
         />
       </div>
 
-      <div id="hero-packages" data-section="hero-packages" className="mx-auto px-4 md:px-6">
+      <div id="packages-hero" data-section="packages-hero" className="mx-auto px-4 md:px-6">
         <HeroBillboardGallery
-          title="Event Packages & Booking"
+          title="Event Packages & Booking Options"
-          description="Simple, flexible pricing for parties, festivals, and corporate events. Each package includes professional service and artistic creativity. Book your event today!"
+          description="Professional face painting and body art packages designed for every event type. Choose from flexible pricing, customize your experience, and book your entertainment today."
           background={{ variant: "radial-gradient" }}
-          tag="Transparent Pricing"
+          tag="Book Your Entertainment"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
           buttons={[
-            { text: "View Packages", href: "#pricing" },
+            { text: "View Packages", href: "#packages-pricing" },
-            { text: "Get a Custom Quote", href: "#booking-form" },
+            { text: "Contact Us", 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/man-wearing-make-up-woman-wearing-mask_23-2148784326.jpg?_wi=1",              imageAlt: "Professional face painting event entertainment"},
           ]}
           mediaAnimation="opacity"
-          ariaLabel="Packages and booking hero section"
+          ariaLabel="Packages page 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"
@@ -110,11 +107,11 @@ export default function PackagesPage() {
         />
       </div>
 
-      <div id="pricing" data-section="pricing" className="mx-auto px-4 md:px-6">
+      <div id="packages-pricing" data-section="packages-pricing" className="mx-auto px-4 md:px-6">
         <PricingCardFive
-          title="Choose Your Package"
+          title="Our Event Packages"
-          description="Select the package that best fits your event needs. All packages include professional service, setup, and our artist's materials. Custom packages available upon request."
+          description="Transparent, flexible pricing for every event type. All packages include professional service, quality materials, and our commitment to making your event memorable."
-          tag="Transparent Pricing"
+          tag="Flexible Pricing"
           tagIcon={DollarSign}
           tagAnimation="slide-up"
           textboxLayout="default"
@@ -122,73 +119,131 @@ export default function PackagesPage() {
           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" },
+              id: "kids-party-basic",              tag: "Popular",              tagIcon: Users,
-              featuresTitle: "What's Included",              features: [
+              price: "$150",              period: "per hour",              description: "Perfect for small birthday celebrations with basic designs",              button: { text: "Book Package", href: "/contact" },
-                "Up to 15 kids",                "Colorful themed designs",                "Face painting only",                "Basic design themes",                "Professional artist"],
+              featuresTitle: "Package Includes",              features: [
+                "Up to 15 children",                "Colorful, playful designs",                "Face painting only",                "Setup & teardown",                "Artist materials provided"],
             },
             {
-              id: "birthday-deluxe",              tag: "Best Value",              price: "$200",              period: "per 2 hours",              description: "Full party entertainment package",              button: { text: "Request Quote", href: "#booking-form" },
+              id: "kids-party-deluxe",              tag: "Best Value",              tagIcon: Check,
-              featuresTitle: "What's Included",              features: [
+              price: "$200",              period: "per 2 hours",              description: "Full party entertainment with premium designs and add-ons",              button: { text: "Book Package", href: "/contact" },
-                "Up to 25 kids",                "Custom themed designs",                "Face & temporary tattoos",                "Interactive entertainment",                "Professional artist",                "Setup & teardown"],
+              featuresTitle: "Package Includes",              features: [
+                "Up to 25 children",                "Custom themed designs",                "Face painting & temporary tattoos",                "Interactive entertainment",                "Professional quality assured"],
             },
             {
-              id: "festival-event",              tag: "Flexible",              price: "$250",              period: "per 3 hours",              description: "Festival and outdoor event service",              button: { text: "Request Quote", href: "#booking-form" },
+              id: "festival-event",              tag: "High-Volume",              tagIcon: Zap,
-              featuresTitle: "What's Included",              features: [
+              price: "$250",              period: "per 3 hours",              description: "Fast, artistic designs for festivals and outdoor events",              button: { text: "Book Package", href: "/contact" },
-                "High-capacity crowd service",                "Fast artistic designs",                "Setup & teardown included",                "Portable station",                "5-10 min per person",                "Weather-resistant setup"],
+              featuresTitle: "Package Includes",              features: [
+                "High-capacity crowd service",                "Fast artistic designs",                "Portable setup station",                "Setup & teardown included",                "Multiple artist option available"],
+            },
+            {
+              id: "corporate-event",              tag: "Professional",              tagIcon: Music,
+              price: "$300",              period: "per 4 hours",              description: "Premium service for corporate events and brand activations",              button: { text: "Book Package", href: "/contact" },
+              featuresTitle: "Package Includes",              features: [
+                "Professional branded designs",                "Custom theme integration",                "Extended hours available",                "Multiple artist coordination",                "Premium materials & finishes"],
             },
           ]}
-          buttons={[{ text: "Get Custom Package", href: "#booking-form" }]}
+          buttons={[{ text: "Contact for Custom Quote", href: "/contact" }]}
           buttonAnimation="blur-reveal"
-          ariaLabel="Event packages pricing section"
+          ariaLabel="Pricing section with package options"
           containerClassName="gap-12"
-          titleClassName="text-4xl font-extrabold"
+          cardContentClassName=""
-          descriptionClassName="text-lg opacity-90 max-w-3xl"
+          planTagClassName=""
-          cardClassName="p-8"
+          planPriceClassName=""
         />
       </div>
 
-      <div id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6">
+      <div id="packages-details" data-section="packages-details" className="mx-auto px-4 md:px-6">
-        <ContactSplitForm
+        <FeatureCardTen
-          title="Book Your Event"
+          title="What's Included in Every Package"
-          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."
+          description="All Paintasy packages come with professional service, quality materials, and our commitment to your event's success."
+          tag="Package Details"
+          tagIcon={Check}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          animationType="slide-up"
           useInvertedBackground={true}
-          inputs={[
+          features={[
-            { name: "fullName", type: "text", placeholder: "Your Full Name", required: true },
+            {
-            { name: "email", type: "email", placeholder: "Your Email Address", required: true },
+              id: "package-details-1",              title: "Professional Artist Service",              description: "Our trained, experienced face painting artists deliver high-quality designs. We arrive on time, set up professionally, and ensure every guest receives outstanding service.",              media: {
-            { name: "phone", type: "tel", placeholder: "Your Phone Number", required: true },
+                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=1",                imageAlt: "Professional face painting artist at work"},
-            { name: "eventDate", type: "date", placeholder: "Event Date", required: true },
+              items: [
-            { name: "eventType", type: "text", placeholder: "Event Type (Birthday, Festival, Corporate, etc.)", required: true },
+                { icon: Sparkles, text: "Trained professionals" },
-            { name: "guestCount", type: "number", placeholder: "Expected Number of Guests", required: true },
+                { icon: Check, text: "Punctual & reliable" },
-            { name: "location", type: "text", placeholder: "Event Location", required: true },
+                { icon: Users, text: "Guest-focused service" },
+              ],
+              reverse: false,
+            },
+            {
+              id: "package-details-2",              title: "Premium Materials & Hygiene",              description: "We use professional-grade, hypoallergenic face paints and follow strict hygiene protocols. Clean brushes, sanitized tools, and safe products for all skin types ensure a worry-free experience.",              media: {
+                imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1",                imageAlt: "Professional quality face painting materials"},
+              items: [
+                { icon: Check, text: "Hypoallergenic products" },
+                { icon: Sparkles, text: "Strict hygiene standards" },
+                { icon: Music, text: "Safe for all ages" },
+              ],
+              reverse: true,
+            },
           ]}
-          textarea={{
+          buttons={[{ text: "Request a Quote", href: "/contact" }]}
-            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,
+          buttonAnimation="blur-reveal"
-            required: false,
+          ariaLabel="Package details and inclusions"
-          }}
-          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"
+          itemClassName=""
-          descriptionClassName="text-lg opacity-90"
+          mediaWrapperClassName=""
         />
       </div>
 
-      <div id="cta-packages" data-section="cta-packages" className="mx-auto px-4 md:px-6">
+      <div id="packages-faq" data-section="packages-faq" className="mx-auto px-4 md:px-6">
+        <FaqBase
+          title="Booking & Package FAQs"
+          description="Everything you need to know about our packages and booking process."
+          tag="Questions?"
+          tagIcon={DollarSign}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          animationType="smooth"
+          faqsAnimation="slide-up"
+          useInvertedBackground={true}
+          showCard={true}
+          faqs={[
+            {
+              id: "booking-faq-1",              title: "How do I book a package?",              content: "Simply click 'Book Package' or 'Contact Us' and fill out the booking form with your event details. We'll confirm availability, discuss any customizations, and finalize the details. You can also call us directly at the phone number provided."},
+            {
+              id: "booking-faq-2",              title: "What is your booking timeline?",              content: "We recommend booking 2-3 weeks in advance for regular events. For large festivals or peak seasons, 4-6 weeks is ideal. Last-minute bookings may be available depending on our schedule—contact us to check availability."},
+            {
+              id: "booking-faq-3",              title: "Do you offer custom package pricing?",              content: "Absolutely! Our packages are flexible. If you need something different—different duration, larger group, or additional services—we can create a custom package tailored to your event. Contact us to discuss your specific needs."},
+            {
+              id: "booking-faq-4",              title: "What's the cancellation or rescheduling policy?",              content: "We offer flexible rescheduling up to 7 days before your event at no charge. Cancellations made 14+ days in advance receive a full refund. Cancellations within 7 days may incur fees. Contact us for specific details."},
+            {
+              id: "booking-faq-5",              title: "Can I add more hours or upgrade my package?",              content: "Yes! You can add additional hours, upgrade designs, or add services like body painting at any time. Additional hours are typically charged at the hourly rate specified in your package. Discuss upgrades when booking or contact us anytime."},
+            {
+              id: "booking-faq-6",              title: "What payment methods do you accept?",              content: "We accept all major credit cards, PayPal, bank transfers, and cash. A deposit is required to secure your booking, with the balance due before the event. Contact us for specific payment details."},
+            {
+              id: "booking-faq-7",              title: "Do you travel to events outside the area?",              content: "Yes, we service regional events! Travel fees may apply for locations outside our standard service area. Contact us with your event location, and we'll provide a custom quote including travel costs."},
+            {
+              id: "booking-faq-8",              title: "Can you work with large groups or multiple artists?",              content: "Definitely! For large events, we can coordinate multiple artists to handle high volume efficiently. This ensures every guest gets painted without excessive wait times. Discuss group sizes when booking."},
+          ]}
+          buttons={[{ text: "Book Now", href: "/contact" }]}
+          buttonAnimation="blur-reveal"
+          ariaLabel="Packages FAQ section"
+          containerClassName="gap-12"
+          accordionClassName=""
+          accordionTitleClassName=""
+        />
+      </div>
+
+      <div id="packages-contact" data-section="packages-contact" className="mx-auto px-4 md:px-6">
         <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="Ready to book your event? Let's create an unforgettable experience with Paintasy Face and Body Art. Contact us today to discuss your package, ask questions, and secure your date."
           animationType="background-highlight"
           background={{ variant: "radial-gradient" }}
           useInvertedBackground={false}
           buttons={[
-            { text: "Send a Message", href: "#booking-form" },
+            { text: "Get Your Quote", href: "/contact" },
-            { text: "Call Us", href: "tel:+15551234567" },
+            { text: "Call Us Now", href: "tel:+15551234567" },
           ]}
-          ariaLabel="Call-to-action for bookings"
+          ariaLabel="Packages contact call-to-action"
           containerClassName="py-16"
           contentClassName="max-w-3xl mx-auto"
           textClassName="text-4xl font-extrabold text-center"
@@ -196,7 +251,7 @@ export default function PackagesPage() {
         />
       </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" className="mx-auto px-4 md:px-6">
         <FooterSimple
           columns={footerColumns}
           bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."

src/app/page.tsx

@@ -13,18 +13,17 @@ import ContactText from '@/components/sections/contact/ContactText';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import Link from 'next/link';
 import { Sparkles, Palette, Heart, Smile, Zap, Music, Briefcase, Target, Users, Star, DollarSign, Camera, HelpCircle, Award } from 'lucide-react';
-
+import Head from 'next/head';
-export const metadata = {
-  title: "Paintasy Face and Body Art - Professional Face Painting & Body Art Services",  description: "Professional face painting and body art services for kids parties, festivals, and corporate events. Expert face painters specializing in creative designs. Book your event today!",  keywords: "face painting, body art, face painter, kids face painting, festival face painting, party entertainment, face design, professional face painter"};
 
 export default function HomePage() {
   const navItems = [
     { name: "Home", id: "home" },
     { name: "Services", id: "services" },
-    { name: "Gallery", id: "/gallery" },
+    { name: "Gallery", id: "gallery" },
     { name: "Packages", id: "packages" },
     { name: "About", id: "about" },
-    { name: "Contact", id: "/contact" },
+    { name: "Booking", id: "booking" },
+    { name: "Contact", id: "contact" },
   ];
 
   const footerColumns = [
@@ -39,10 +38,10 @@ export default function HomePage() {
     },
     {
       title: "Company",      items: [
-        { label: "About Us", href: "#about-home" },
+        { label: "About Us", href: "/about" },
         { label: "Gallery", href: "/gallery" },
-        { label: "Packages", href: "#packages-home" },
+        { label: "Packages", href: "/packages" },
-        { label: "FAQ", href: "#faq-home" },
+        { label: "FAQ", href: "#faq" },
         { label: "Contact", href: "/contact" },
       ],
     },
@@ -59,7 +58,7 @@ export default function HomePage() {
       title: "Service Areas",      items: [
         { label: "Local Events", href: "/contact" },
         { label: "Regional Coverage", href: "/contact" },
-        { label: "Book Now", href: "#packages-home" },
+        { label: "Book Now", href: "/booking" },
         { label: "Get Quote", href: "/contact" },
       ],
     },
@@ -87,37 +86,37 @@ export default function HomePage() {
         />
       </div>
 
-      <div id="hero-home" data-section="hero-home" className="mx-auto px-4 md:px-6">
+      <div id="hero-home" data-section="hero-home" className="mx-auto px-4 md:px-6 lg:px-8">
         <HeroBillboardGallery
-          title="Paintasy Face and Body Art"
+          title="Professional Face Painting & Body Art for Events"
-          description="Professional face painting and body art for parties, festivals, corporate events, and special occasions. Transform your event with creativity and color."
+          description="Transform your event with expert face painting and body art. Paintasy delivers professional, creative entertainment for birthday parties, festivals, corporate events, and special occasions. Book professional face painters for your celebration today."
           background={{ variant: "radial-gradient" }}
           tag="Creative Entertainment"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Book Your Event", href: "#packages-home" },
+            { text: "Book Your Event", href: "/booking" },
             { text: "View Our Gallery", href: "/gallery" },
           ]}
           buttonAnimation="blur-reveal"
           mediaItems={[
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-woman-wearing-mask_23-2148784326.jpg",              imageAlt: "Professional face painting at event"},
+              imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-woman-wearing-mask_23-2148784326.jpg?_wi=2",              imageAlt: "Professional face painting at event"},
           ]}
           mediaAnimation="opacity"
-          ariaLabel="Hero section with face painting showcase"
+          ariaLabel="Hero section with professional face painting showcase"
           className="min-h-screen"
-          containerClassName="flex flex-col lg:flex-row items-center justify-between gap-12"
+          containerClassName="flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12"
-          titleClassName="text-5xl lg:text-6xl font-extrabold leading-tight"
+          titleClassName="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight"
-          descriptionClassName="text-lg lg:text-xl opacity-90 max-w-2xl"
+          descriptionClassName="text-base sm:text-lg lg:text-xl opacity-90 max-w-2xl"
           buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8"
         />
       </div>
 
-      <div id="about-home" data-section="about-home" className="mx-auto px-4 md:px-6">
+      <div id="about-home" data-section="about-home" className="mx-auto px-4 md:px-6 lg:px-8">
         <MetricSplitMediaAbout
-          title="About Paintasy Face and Body Art"
+          title="About Paintasy - Expert Face Painting Services"
-          description="Paintasy brings creativity and color to events with professional face painting and body art. We've been transforming celebrations and creating magical moments for hundreds of happy clients. Our artists are trained professionals dedicated to delivering exceptional service, vibrant designs, and memorable experiences."
+          description="Paintasy brings creativity and color to events with professional face painting and body art services. We've been transforming celebrations and creating magical moments for hundreds of happy clients across the region. Our trained professional artists are dedicated to delivering exceptional service, vibrant designs, and unforgettable experiences for every event."
           tag="Professional Artists"
           tagIcon={Palette}
           tagAnimation="slide-up"
@@ -133,16 +132,16 @@ export default function HomePage() {
           metricsAnimation="slide-up"
           useInvertedBackground={false}
           ariaLabel="About section with company information"
-          containerClassName="gap-12"
+          containerClassName="gap-8 lg:gap-12"
-          titleClassName="text-4xl font-extrabold"
+          titleClassName="text-3xl sm:text-4xl lg:text-5xl font-extrabold"
-          descriptionClassName="text-lg opacity-90 max-w-2xl"
+          descriptionClassName="text-base sm:text-lg opacity-90 max-w-2xl"
         />
       </div>
 
-      <div id="services-home" data-section="services-home" className="mx-auto px-4 md:px-6">
+      <div id="services-home" data-section="services-home" className="mx-auto px-4 md:px-6 lg:px-8">
         <FeatureCardTen
-          title="Our Services"
+          title="Our Face Painting & Body Art Services"
-          description="Professional face painting and body art tailored for every occasion. From intimate birthday parties to large festival events, we deliver creativity and joy."
+          description="Professional face painting and body art services tailored for every occasion. From intimate birthday parties to large festival events, we deliver creativity, joy, and exceptional entertainment."
           tag="Services"
           tagIcon={Palette}
           tagAnimation="slide-up"
@@ -151,7 +150,7 @@ export default function HomePage() {
           useInvertedBackground={true}
           features={[
             {
-              id: "kids-party",              title: "Kids Party Face Painting",              description: "Fun, colorful designs perfect for birthday celebrations. Butterflies, superheroes, animals, and princesses.",              media: {
+              id: "kids-party",              title: "Kids Party Face Painting",              description: "Fun, colorful face painting designs perfect for birthday celebrations. Butterflies, superheroes, animals, princesses, and more.",              media: {
                 imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1",                imageAlt: "Kids party face painting designs"},
               items: [
                 { icon: Sparkles, text: "Colorful & playful designs" },
@@ -161,7 +160,7 @@ export default function HomePage() {
               reverse: false,
             },
             {
-              id: "festival",              title: "Festival Face Art",              description: "Fast, creative designs perfect for large crowds and outdoor events. Artistic flair meets quick service.",              media: {
+              id: "festival",              title: "Festival Face Art & Body Painting",              description: "Fast, creative designs perfect for large crowds and outdoor events. Artistic flair meets quick service for maximum event impact.",              media: {
                 imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1",                imageAlt: "Festival face painting artwork"},
               items: [
                 { icon: Zap, text: "Fast service for crowds" },
@@ -171,7 +170,7 @@ export default function HomePage() {
               reverse: true,
             },
             {
-              id: "corporate",              title: "Corporate Event Entertainment",              description: "Professional face painting for company parties, brand activations, and team celebrations.",              media: {
+              id: "corporate",              title: "Corporate Event Entertainment",              description: "Professional face painting for company parties, brand activations, and team celebrations with branded design options.",              media: {
                 imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=1",                imageAlt: "Corporate event face painting"},
               items: [
                 { icon: Briefcase, text: "Professional & polished service" },
@@ -183,17 +182,17 @@ export default function HomePage() {
           ]}
           buttons={[{ text: "Explore All Services", href: "/services" }]}
           buttonAnimation="blur-reveal"
-          ariaLabel="Services section showcasing offerings"
+          ariaLabel="Services section showcasing face painting offerings"
-          containerClassName="gap-12"
+          containerClassName="gap-8 lg:gap-12"
-          titleClassName="text-4xl font-extrabold"
+          itemClassName=""
-          descriptionClassName="text-lg opacity-90 max-w-3xl"
+          mediaWrapperClassName=""
         />
       </div>
 
-      <div id="packages-home" data-section="packages-home" className="mx-auto px-4 md:px-6">
+      <div id="packages-home" data-section="packages-home" className="mx-auto px-4 md:px-6 lg:px-8">
         <PricingCardFive
-          title="Event Packages"
+          title="Face Painting Event Packages"
-          description="Simple, flexible pricing for parties, festivals, and corporate events. Each package includes professional service and artistic creativity."
+          description="Simple, flexible pricing for face painting services at parties, festivals, and corporate events. Each package includes professional service and artistic creativity."
           tag="Transparent Pricing"
           tagIcon={DollarSign}
           tagAnimation="slide-up"
@@ -202,35 +201,35 @@ 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: "/contact" },
+              id: "birthday-basic",              tag: "Popular",              price: "$150",              period: "per hour",              description: "Perfect for small birthday celebrations",              button: { text: "Request Quote", href: "/booking" },
               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: "/contact" },
+              id: "birthday-deluxe",              tag: "Best Value",              price: "$200",              period: "per 2 hours",              description: "Full party entertainment package",              button: { text: "Request Quote", href: "/booking" },
               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: "/contact" },
+              id: "festival-event",              tag: "Flexible",              price: "$250",              period: "per 3 hours",              description: "Festival and outdoor event service",              button: { text: "Request Quote", href: "/booking" },
               featuresTitle: "What's Included",              features: [
                 "High-capacity crowd service",                "Fast artistic designs",                "Setup & teardown included",                "Portable station"],
             },
           ]}
-          buttons={[{ text: "View All Packages", href: "#packages-home" }]}
+          buttons={[{ text: "View All Packages", href: "/packages" }]}
           buttonAnimation="blur-reveal"
           ariaLabel="Pricing section with package options"
-          containerClassName="gap-12"
+          containerClassName="gap-8 lg:gap-12"
-          titleClassName="text-4xl font-extrabold"
+          cardContentClassName=""
-          descriptionClassName="text-lg opacity-90 max-w-3xl"
+          planTagClassName=""
-          cardClassName="p-8"
+          planPriceClassName=""
         />
       </div>
 
-      <div id="testimonials-home" data-section="testimonials-home" className="mx-auto px-4 md:px-6">
+      <div id="testimonials-home" data-section="testimonials-home" className="mx-auto px-4 md:px-6 lg:px-8">
         <TestimonialCardTwo
-          title="What Our Clients Say"
+          title="Client Testimonials - Face Painting Reviews"
-          description="Real testimonials from happy clients who've booked Paintasy for their events."
+          description="Real testimonials from happy clients who've booked Paintasy for their events and celebrations."
           tag="Client Reviews"
           tagIcon={Star}
           tagAnimation="slide-up"
@@ -258,19 +257,19 @@ 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: "#packages-home" }]}
+          buttons={[{ text: "Book Now", href: "/booking" }]}
           buttonAnimation="blur-reveal"
           ariaLabel="Client testimonials section"
-          containerClassName="gap-12"
+          containerClassName="gap-8 lg:gap-12"
-          titleClassName="text-4xl font-extrabold"
+          imageWrapperClassName=""
-          descriptionClassName="text-lg opacity-90 max-w-3xl"
+          roleClassName=""
         />
       </div>
 
-      <div id="gallery-preview-home" data-section="gallery-preview-home" className="mx-auto px-4 md:px-6">
+      <div id="gallery-preview-home" data-section="gallery-preview-home" className="mx-auto px-4 md:px-6 lg:px-8">
         <ProductCardFour
-          title="Photo Gallery Showcase"
+          title="Photo Gallery - Face Painting Portfolio"
-          description="Real photos from our events and happy clients. Browse our portfolio of face painting and body art work."
+          description="Real photos from our events and happy clients. Browse our portfolio of professional face painting and body art work."
           tag="Portfolio"
           tagIcon={Camera}
           tagAnimation="slide-up"
@@ -292,15 +291,15 @@ export default function HomePage() {
           buttons={[{ text: "View Full Gallery", href: "/gallery" }]}
           buttonAnimation="blur-reveal"
           ariaLabel="Photo gallery preview section"
-          containerClassName="gap-12"
+          containerClassName="gap-8 lg:gap-12"
-          titleClassName="text-4xl font-extrabold"
+          cardNameClassName=""
-          descriptionClassName="text-lg opacity-90 max-w-3xl"
+          cardPriceClassName=""
         />
       </div>
 
-      <div id="faq-home" data-section="faq-home" className="mx-auto px-4 md:px-6">
+      <div id="faq-home" data-section="faq-home" className="mx-auto px-4 md:px-6 lg:px-8">
         <FaqBase
-          title="Frequently Asked Questions"
+          title="Face Painting FAQ - Frequently Asked Questions"
           description="Everything you need to know about booking Paintasy for your event."
           tag="FAQ"
           tagIcon={HelpCircle}
@@ -312,7 +311,7 @@ export default function HomePage() {
           showCard={true}
           faqs={[
             {
-              id: "faq-1",              title: "How far in advance should I book?",              content: "We recommend booking at least 2-3 weeks in advance to secure your preferred date and time. For large events or peak seasons, 4-6 weeks advance booking is ideal. Last-minute bookings may be available depending on our schedule."},
+              id: "faq-1",              title: "How far in advance should I book face painting services?",              content: "We recommend booking at least 2-3 weeks in advance to secure your preferred date and time. For large events or peak seasons, 4-6 weeks advance booking is ideal. Last-minute bookings may be available depending on our schedule."},
             {
               id: "faq-2",              title: "Are your face paints safe for children?",              content: "Absolutely! We use only professional-grade, hypoallergenic face paints that are non-toxic and dermatologist-tested. All products are safe for sensitive skin. We also practice strict hygiene protocols, using clean brushes and sanitized application tools for each client."},
             {
@@ -320,22 +319,22 @@ export default function HomePage() {
             {
               id: "faq-4",              title: "What if someone has a skin allergy?",              content: "We have hypoallergenic options available. Please inform us of any allergies when booking. We're always happy to discuss alternative products or test patches before proceeding with full face painting."},
             {
-              id: "faq-5",              title: "Can you do custom designs?",              content: "Yes! We specialize in custom designs for themed parties and corporate events. Please provide theme details or reference images when booking. There may be a small additional fee for very complex custom designs."},
+              id: "faq-5",              title: "Can you do custom face painting designs?",              content: "Yes! We specialize in custom face painting designs for themed parties and corporate events. Please provide theme details or reference images when booking. There may be a small additional fee for very complex custom designs."},
             {
-              id: "faq-6",              title: "What's included in your packages?",              content: "All packages include professional face painting service, setup and teardown, and our artist's materials. Some packages include additional services like temporary tattoos or body painting. Check specific package details for what's included."},
+              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: "#packages-home" }]}
+          buttons={[{ text: "Book Your Event", href: "/booking" }]}
           buttonAnimation="blur-reveal"
           ariaLabel="FAQ section with common questions"
-          containerClassName="gap-12"
+          containerClassName="gap-8 lg:gap-12"
-          titleClassName="text-4xl font-extrabold"
+          accordionClassName=""
-          descriptionClassName="text-lg opacity-90 max-w-3xl"
+          accordionTitleClassName=""
         />
       </div>
 
-      <div id="contact-home" data-section="contact-home" className="mx-auto px-4 md:px-6">
+      <div id="contact-home" data-section="contact-home" className="mx-auto px-4 md:px-6 lg:px-8">
         <ContactText
-          text="Ready to add magic to your event? Get in touch with Paintasy Face and Body Art. Professional face painters ready to deliver exceptional entertainment and creative designs. We'd love to discuss your event and create an unforgettable experience for your guests."
+          text="Ready to add magic to your event? Get in touch with Paintasy Face and Body Art. We'd love to discuss your event and create an unforgettable experience for your guests."
           animationType="background-highlight"
           background={{ variant: "radial-gradient" }}
           useInvertedBackground={false}
@@ -344,20 +343,20 @@ export default function HomePage() {
             { text: "Call Us", href: "tel:+15551234567" },
           ]}
           ariaLabel="Contact call-to-action section"
-          containerClassName="py-16"
+          containerClassName="py-12 sm:py-16 lg:py-20"
           contentClassName="max-w-3xl mx-auto"
-          textClassName="text-4xl font-extrabold text-center"
+          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-home" data-section="footer-home" className="mx-auto px-4 md:px-6">
+      <div id="footer-home" data-section="footer-home" className="mx-auto px-4 md:px-6 lg:px-8">
         <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-12"
+          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"
@@ -365,4 +364,4 @@ export default function HomePage() {
       </div>
     </ThemeProvider>
   );
-}
+}

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 FaqBase from '@/components/sections/faq/FaqBase';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Sparkles, Palette, Heart, Smile, Zap, Star, Music, Users, DollarSign, HelpCircle } from 'lucide-react';
+import { Sparkles, Palette, Heart, Smile, Zap, Music, Briefcase, Target, Users, Star, DollarSign } from 'lucide-react';
 
 export default function ServicesPage() {
   const navItems = [
-    { name: "Home", id: "home" },
+    { name: "Home", id: "/" },
-    { name: "Services", id: "services" },
+    { name: "Services", id: "/services" },
-    { name: "Gallery", id: "gallery" },
+    { name: "Gallery", id: "/gallery" },
-    { name: "Packages", id: "packages" },
+    { name: "Packages", id: "/packages" },
-    { name: "About", id: "about" },
+    { name: "About", id: "/about" },
-    { name: "Contact", id: "contact" },
+    { 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: "#faq" },
+        { label: "FAQ", href: "/" },
         { label: "Contact", href: "/contact" },
       ],
     },
@@ -79,195 +79,171 @@ export default function ServicesPage() {
         />
       </div>
 
-      <div id="hero-services" data-section="hero-services" className="mx-auto px-4 md:px-6">
+      <div id="services-hero" data-section="services-hero" className="mx-auto px-4 md:px-6 lg:px-8">
         <HeroBillboardGallery
-          title="Our Services"
+          title="Professional Face Painting & Body Art Services"
-          description="Professional face painting and body art tailored for every occasion. From intimate birthday parties to large festival events, we deliver creativity and joy to all your special moments."
+          description="Paintasy offers comprehensive face painting and body art services for every occasion. From intimate birthday parties to large-scale festivals, our professional artists bring creativity, color, and joy to your event."
           background={{ variant: "radial-gradient" }}
-          tag="Professional Services"
+          tag="All Services"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Book Now", href: "/packages" },
+            { text: "Browse Services", href: "#services-list" },
             { text: "Get a Quote", href: "/contact" },
           ]}
           buttonAnimation="blur-reveal"
           mediaItems={[
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1",              imageAlt: "Professional face painting services showcase"},
+              imageSrc: "http://img.b2bpic.net/free-photo/rainbow-face-paint-art_23-2148621847.jpg?_wi=2",              imageAlt: "Vibrant face painting services showcase"},
           ]}
           mediaAnimation="opacity"
           ariaLabel="Services hero section"
           className="min-h-screen"
-          containerClassName="flex flex-col lg:flex-row items-center justify-between gap-12"
+          containerClassName="flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12"
-          titleClassName="text-5xl lg:text-6xl font-extrabold leading-tight"
+          titleClassName="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight"
-          descriptionClassName="text-lg lg:text-xl opacity-90 max-w-2xl"
+          descriptionClassName="text-base sm:text-lg lg:text-xl opacity-90 max-w-2xl"
           buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8"
         />
       </div>
 
-      <div id="kids-parties" data-section="kids-parties" className="mx-auto px-4 md:px-6">
+      <div id="services-list" data-section="services-list" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24">
         <FeatureCardTen
-          title="Kids Party Face Painting"
+          title="Our Complete Service Menu"
-          description="Make every birthday celebration unforgettable with our colorful and playful face painting designs. Our artists specialize in creating magical moments for children of all ages."
+          description="Choose from our range of professional face and body art services, each designed for specific occasions and clientele."
-          tag="Party Entertainment"
+          tag="Services"
-          tagIcon={Smile}
+          tagIcon={Palette}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground={false}
-          features={[
-            {
-              id: "superhero-designs",              title: "Superhero Designs",              description: "Transform kids into their favorite superheroes with bold, colorful, and inspiring designs that make them feel powerful and special.",              media: {
-                imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1",                imageAlt: "Superhero face painting for kids"},
-              items: [
-                { icon: Star, text: "Superman, Batman, Wonder Woman" },
-                { icon: Sparkles, text: "Colorful and detailed designs" },
-                { icon: Heart, text: "Safe, non-toxic face paints" },
-              ],
-              reverse: false,
-            },
-            {
-              id: "animal-designs",              title: "Animal & Fantasy Designs",              description: "Bring imagination to life with enchanting animal faces and fantasy characters that capture children's wonder and creativity.",              media: {
-                imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1",                imageAlt: "Animal face painting designs"},
-              items: [
-                { icon: Heart, text: "Butterflies, tigers, cats, dragons" },
-                { icon: Zap, text: "Quick application - 5-10 minutes" },
-                { icon: Smile, text: "Kids love the transformation" },
-              ],
-              reverse: true,
-            },
-            {
-              id: "princess-themes",              title: "Princess & Fairytale Themes",              description: "Create magical memories with elegant princess face paintings and enchanted character designs that make dreams come true.",              media: {
-                imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=1",                imageAlt: "Princess themed face painting"},
-              items: [
-                { icon: Sparkles, text: "Cinderella, Ariel, Elsa designs" },
-                { icon: Heart, text: "Elegant and refined details" },
-                { icon: Star, text: "Photo-ready designs" },
-              ],
-              reverse: false,
-            },
-          ]}
-          buttons={[{ text: "Book Kids Party", href: "/packages" }]}
-          buttonAnimation="blur-reveal"
-          ariaLabel="Kids party face painting service"
-          containerClassName="gap-12"
-          titleClassName="text-4xl font-extrabold"
-          descriptionClassName="text-lg opacity-90 max-w-3xl"
-        />
-      </div>
-
-      <div id="festival-face-painting" data-section="festival-face-painting" className="mx-auto px-4 md:px-6">
-        <FeatureCardTen
-          title="Festival Face Painting"
-          description="Energize your outdoor events and festivals with fast, creative face art that delights crowds. Perfect for music festivals, carnivals, markets, and large celebrations."
-          tag="Festival Entertainment"
-          tagIcon={Music}
           tagAnimation="slide-up"
           textboxLayout="default"
           animationType="slide-up"
           useInvertedBackground={true}
           features={[
             {
-              id: "quick-designs",              title: "Quick Artistic Designs",              description: "Optimized for high-volume events with beautiful, creative designs completed in 5-10 minutes per person.",              media: {
+              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/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1",                imageAlt: "Festival quick face painting designs"},
+                imageSrc: "http://img.b2bpic.net/free-photo/child-with-colorful-face-paint_23-2148412356.jpg?_wi=1",                imageAlt: "Kids enjoying colorful face painting"},
               items: [
-                { icon: Zap, text: "Fast turnaround time" },
+                { icon: Heart, text: "Child-safe products" },
-                { icon: Star, text: "Creative, artistic patterns" },
+                { icon: Smile, text: "Quick, fun designs" },
-                { icon: Sparkles, text: "Professional quality results" },
+                { icon: Sparkles, text: "Memorable moments" },
               ],
               reverse: false,
             },
             {
-              id: "crowd-service",              title: "High-Capacity Crowd Service",              description: "Handle large crowds with efficiency and joy. Our portable stations and experienced artists keep the line moving while maintaining artistic excellence.",              media: {
+              id: "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/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1",                imageAlt: "Festival crowd face painting station"},
+                imageSrc: "http://img.b2bpic.net/free-photo/festival-face-painting-crowd_23-2148723145.jpg?_wi=1",                imageAlt: "Festival attendees with artistic face painting"},
               items: [
-                { icon: Users, text: "100+ people per event" },
+                { icon: Zap, text: "High-volume service" },
-                { icon: Music, text: "Perfect for any festival" },
+                { icon: Star, text: "Professional designs" },
-                { icon: Heart, text: "Portable & self-contained setup" },
+                { icon: Music, text: "Event-perfect timing" },
               ],
               reverse: true,
             },
             {
-              id: "event-themes",              title: "Event-Themed Designs",              description: "Customize designs to match your festival theme, whether it's Halloween, neon nights, masquerade balls, or themed celebrations.",              media: {
+              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/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=1",                imageAlt: "Themed festival face painting"},
+                imageSrc: "http://img.b2bpic.net/free-photo/corporate-event-entertainment_23-2148945632.jpg?_wi=1",                imageAlt: "Professional corporate event entertainment"},
               items: [
-                { icon: Palette, text: "Custom color schemes" },
+                { icon: Briefcase, text: "Professional service" },
-                { icon: Star, text: "Theme-matched designs" },
+                { icon: Target, text: "Branded options" },
-                { icon: Sparkles, text: "Cohesive event branding" },
+                { 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" },
+              ],
+              reverse: true,
+            },
           ]}
-          buttons={[{ text: "Book Festival Service", href: "/packages" }]}
+          buttons={[{ text: "Book Your Service", href: "/packages" }]}
           buttonAnimation="blur-reveal"
-          ariaLabel="Festival face painting service"
+          ariaLabel="Services list with detailed descriptions"
-          containerClassName="gap-12"
+          containerClassName="gap-8 lg:gap-12"
-          titleClassName="text-4xl font-extrabold"
-          descriptionClassName="text-lg opacity-90 max-w-3xl"
         />
       </div>
 
-      <div id="faq-services" data-section="faq-services" className="mx-auto px-4 md:px-6">
+      <div id="services-pricing" data-section="services-pricing" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24">
-        <FaqBase
+        <PricingCardFive
-          title="Services FAQ"
+          title="Service Packages & Pricing"
-          description="Common questions about our face painting and body art services."
+          description="Transparent, flexible pricing for all our face painting services. Choose the package that fits your event size and needs."
-          tag="FAQ"
+          tag="Pricing"
-          tagIcon={HelpCircle}
+          tagIcon={DollarSign}
           tagAnimation="slide-up"
           textboxLayout="default"
-          animationType="smooth"
+          animationType="scale-rotate"
-          faqsAnimation="slide-up"
           useInvertedBackground={false}
-          showCard={true}
+          plans={[
-          faqs={[
             {
-              id: "service-faq-1",              title: "What is included in kids party face painting?",              content: "Our kids party service includes professional face painting with colorful, playful designs. Kids can choose from superheroes, animals, princesses, and fantasy characters. Each design takes 5-10 minutes. We bring all materials and tools needed for safe, hygienic application."},
+              id: "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-2",              title: "How many kids can you paint at a party?",              content: "This depends on party length. For a 2-hour party, we can typically paint 15-25 kids depending on design complexity. For longer parties (3-4 hours), we can accommodate 25-40+ children. Let us know your party size when booking, and we'll recommend the best package."},
+              id: "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-3",              title: "Are the face paints hypoallergenic?",              content: "Yes! We use only professional-grade, hypoallergenic face paints that are non-toxic and dermatologist-tested. All products are safe for sensitive skin and children. We practice strict hygiene protocols with clean brushes and sanitized tools for each client. If a child has known allergies, please inform us in advance."},
+              id: "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: [
-              id: "service-faq-4",              title: "What makes festival face painting different?",              content: "Festival face painting is designed for high-volume, quick service in outdoor settings. We create beautiful, artistic designs that can be completed in 5-10 minutes per person. Our portable stations are weather-resistant, and we're experienced with large crowds, long lines, and fast-paced environments."},
+                "Unlimited guests",                "Premium designs",                "Face, body art & tattoos",                "Setup & teardown"],
-            {
+            },
-              id: "service-faq-5",              title: "Can you do custom designs for specific themes?",              content: "Absolutely! We specialize in custom designs for themed parties and corporate events. Please provide your theme details, color preferences, or reference images when booking. For very complex custom designs, there may be a small additional fee, but we always discuss this upfront."},
-            {
-              id: "service-faq-6",              title: "How long does face paint last?",              content: "Our face paints typically last 4-6 hours with normal activity. They may smudge or fade with heavy sweating or water exposure. We provide care instructions on how to help the paint last longer. For longer events, we can touch up designs if needed."},
           ]}
           buttons={[{ text: "View All Packages", href: "/packages" }]}
           buttonAnimation="blur-reveal"
-          ariaLabel="Services FAQ section"
+          ariaLabel="Service pricing and packages"
-          containerClassName="gap-12"
+          containerClassName="gap-8 lg:gap-12"
-          titleClassName="text-4xl font-extrabold"
-          descriptionClassName="text-lg opacity-90 max-w-3xl"
         />
       </div>
 
-      <div id="contact-services" data-section="contact-services" className="mx-auto px-4 md:px-6">
+      <div id="services-cta" data-section="services-cta" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24">
         <ContactText
-          text="Ready to bring creative face painting to your next event? Whether it's a kids' birthday party or a large festival, we're here to make it memorable. Get in touch with Paintasy to discuss your specific service needs."
+          text="Ready to bring creative entertainment to your event? Contact Paintasy today to discuss your service needs, get personalized recommendations, and book your professional face painters."
           animationType="background-highlight"
           background={{ variant: "radial-gradient" }}
-          useInvertedBackground={true}
+          useInvertedBackground={false}
           buttons={[
             { text: "Request a Quote", href: "/contact" },
-            { text: "Call Us", href: "tel:+15551234567" },
+            { text: "Call Now", href: "tel:+15551234567" },
           ]}
-          ariaLabel="Contact call-to-action section"
+          ariaLabel="Services call-to-action"
-          containerClassName="py-16"
+          containerClassName="py-12 sm:py-16 lg:py-20"
           contentClassName="max-w-3xl mx-auto"
-          textClassName="text-4xl font-extrabold text-center"
+          textClassName="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-center"
           buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
         />
       </div>
 
-      <div id="footer-services" data-section="footer-services" className="mx-auto px-4 md:px-6">
+      <div id="footer-services" data-section="footer-services" className="mx-auto px-4 md:px-6 lg:px-8">
         <FooterSimple
           columns={footerColumns}
           bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
           bottomRightText="Professional Event Entertainment | Creative Services"
           ariaLabel="Site footer with links"
-          containerClassName="gap-12"
+          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"