From 5712ecea96753980237cdc8403c4e519de203f37 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 14 Mar 2026 05:24:42 +0000
Subject: [PATCH] Switch to version 1: modified src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 281 ++++++++++++++++-----------------------
 1 file changed, 111 insertions(+), 170 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index a0ec55e..197ae86 100644
--- a/src/app/contact/page.tsx
+++ b/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>
   );
-}
+}
\ No newline at end of file