Update src/app/page.tsx

Merge version_3 into main

src/app/contact/page.tsx

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

src/app/gallery/page.tsx

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

src/app/packages/page.tsx

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

src/app/page.tsx

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

src/app/services/page.tsx

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