From b66db7be2f8cfcf2cf34d098149b9bad836473e5 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 14 Mar 2026 05:42:43 +0000
Subject: [PATCH] Update src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 332 ++++++++++++++++++++++++++-------------
 1 file changed, 227 insertions(+), 105 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 197ae86..29c29f6 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,63 +1,87 @@
 "use client";
 
-import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-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";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { useState } from 'react';
+import { MessageCircle, Mail, Phone, MapPin, Clock, Facebook, Instagram, Twitter, Linkedin } from 'lucide-react';
 
 export default function ContactPage() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    subject: '',
+    message: '',
+  });
+
+  const [submitted, setSubmitted] = useState(false);
+
   const navItems = [
     { name: "Home", id: "home" },
     { name: "Services", id: "services" },
     { name: "Gallery", id: "gallery" },
     { name: "Packages", id: "packages" },
     { name: "About", id: "about" },
+    { name: "Booking", id: "booking" },
     { name: "Contact", id: "contact" },
   ];
 
   const footerColumns = [
     {
-      title: "Services",
-      items: [
+      title: "Services",      items: [
         { label: "Kids Party Face Painting", href: "/services" },
         { label: "Festival Face Art", href: "/services" },
         { label: "Corporate Events", href: "/services" },
         { label: "Body Painting", href: "/services" },
+        { label: "Custom Designs", href: "/services" },
       ],
     },
     {
-      title: "Company",
-      items: [
+      title: "Company",      items: [
         { label: "About Us", href: "/about" },
         { label: "Gallery", href: "/gallery" },
         { label: "Packages", href: "/packages" },
+        { label: "FAQ", href: "#faq" },
         { label: "Contact", href: "/contact" },
       ],
     },
     {
-      title: "Connect",
-      items: [
+      title: "Connect",      items: [
         { label: "Instagram", href: "https://instagram.com" },
         { label: "Facebook", href: "https://facebook.com" },
         { label: "TikTok", href: "https://tiktok.com" },
         { label: "Email", href: "mailto:paintasy@events.com" },
+        { label: "Phone", href: "tel:+15551234567" },
       ],
     },
     {
-      title: "Service Areas",
-      items: [
+      title: "Service Areas",      items: [
         { label: "Local Events", href: "/contact" },
         { label: "Regional Coverage", href: "/contact" },
-        { label: "Book Now", href: "/packages" },
+        { label: "Book Now", href: "/booking" },
         { label: "Get Quote", href: "/contact" },
       ],
     },
   ];
 
+  const handleFormChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log('Contact form submitted:', formData);
+    setSubmitted(true);
+    setFormData({
+      name: '',
+      email: '',
+      subject: '',
+      message: '',
+    });
+    setTimeout(() => setSubmitted(false), 3000);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -73,111 +97,209 @@ export default function ContactPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
-          navItems={navItems}
           brandName="Paintasy"
+          navItems={navItems}
           bottomLeftText="Creative Face & Body Art"
           bottomRightText="paintasy@events.com"
         />
       </div>
 
-      <div id="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" }}
-          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 id="contact-hero" data-section="contact-hero" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24 lg:py-32">
+        <div className="max-w-4xl mx-auto text-center">
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-6 bg-gradient-to-r from-red-500 via-yellow-500 to-pink-500 bg-clip-text text-transparent">
+            Contact Us
+          </h1>
+          <p className="text-lg md:text-xl opacity-80 mb-4 max-w-2xl mx-auto">
+            Have questions or ready to book? We'd love to hear from you! Reach out to our team and let's make your event unforgettable.
+          </p>
+        </div>
       </div>
 
-      <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 id="contact-content" data-section="contact-content" className="mx-auto px-4 md:px-6 lg:px-8 py-12 md:py-16 lg:py-20">
+        <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12">
+          {/* Contact Form */}
+          <div className="rounded-lg p-8 md:p-10 bg-gradient-to-br from-blue-50 via-cyan-50 to-teal-50 border-2 border-cyan-300 shadow-lg">
+            <h2 className="text-3xl font-bold mb-8 text-gray-800">Send Us a Message</h2>
+            
+            {submitted && (
+              <div className="mb-6 p-4 rounded-lg bg-green-100 border-2 border-green-400 text-green-800 font-semibold">
+                ✓ Thank you! We'll be in touch soon.
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div>
+                <label className="block text-sm font-semibold mb-2 text-gray-800">Your Name *</label>
+                <input
+                  type="text"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleFormChange}
+                  required
+                  placeholder="John Doe"
+                  className="w-full px-4 py-3 rounded-lg border-2 border-cyan-300 focus:border-cyan-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold mb-2 text-gray-800">Email Address *</label>
+                <input
+                  type="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleFormChange}
+                  required
+                  placeholder="your@email.com"
+                  className="w-full px-4 py-3 rounded-lg border-2 border-cyan-300 focus:border-cyan-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold mb-2 text-gray-800">Subject *</label>
+                <input
+                  type="text"
+                  name="subject"
+                  value={formData.subject}
+                  onChange={handleFormChange}
+                  required
+                  placeholder="How can we help?"
+                  className="w-full px-4 py-3 rounded-lg border-2 border-cyan-300 focus:border-cyan-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold mb-2 text-gray-800">Message *</label>
+                <textarea
+                  name="message"
+                  value={formData.message}
+                  onChange={handleFormChange}
+                  required
+                  placeholder="Tell us more about your inquiry..."
+                  rows={6}
+                  className="w-full px-4 py-3 rounded-lg border-2 border-cyan-300 focus:border-cyan-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500 resize-none"
+                />
+              </div>
+
+              <button
+                type="submit"
+                className="w-full bg-gradient-to-r from-cyan-500 via-blue-500 to-teal-500 hover:from-cyan-600 hover:via-blue-600 hover:to-teal-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg text-lg"
+              >
+                Send Message
+              </button>
+            </form>
+          </div>
+
+          {/* Contact Information */}
+          <div className="space-y-8">
+            <div className="rounded-lg p-8 bg-gradient-to-br from-red-50 to-orange-50 border-2 border-red-200 shadow-lg hover:shadow-xl transition-shadow">
+              <div className="flex items-start gap-4">
+                <Phone className="w-8 h-8 text-red-500 flex-shrink-0 mt-1" />
+                <div>
+                  <h3 className="text-lg font-bold text-gray-800 mb-2">Phone</h3>
+                  <a href="tel:+15551234567" className="text-lg font-semibold text-red-600 hover:text-red-700 transition-colors">
+                    (555) 123-4567
+                  </a>
+                  <p className="text-gray-700 mt-1 text-sm">Available Mon-Sun, 9 AM - 6 PM</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="rounded-lg p-8 bg-gradient-to-br from-yellow-50 to-amber-50 border-2 border-yellow-200 shadow-lg hover:shadow-xl transition-shadow">
+              <div className="flex items-start gap-4">
+                <Mail className="w-8 h-8 text-yellow-600 flex-shrink-0 mt-1" />
+                <div>
+                  <h3 className="text-lg font-bold text-gray-800 mb-2">Email</h3>
+                  <a href="mailto:paintasy@events.com" className="text-lg font-semibold text-yellow-700 hover:text-yellow-800 transition-colors">
+                    paintasy@events.com
+                  </a>
+                  <p className="text-gray-700 mt-1 text-sm">We reply within 24 hours</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="rounded-lg p-8 bg-gradient-to-br from-green-50 to-emerald-50 border-2 border-green-200 shadow-lg hover:shadow-xl transition-shadow">
+              <div className="flex items-start gap-4">
+                <MapPin className="w-8 h-8 text-green-600 flex-shrink-0 mt-1" />
+                <div>
+                  <h3 className="text-lg font-bold text-gray-800 mb-2">Service Area</h3>
+                  <p className="text-gray-700 font-semibold">Regional Coverage</p>
+                  <p className="text-gray-700 mt-1 text-sm">We service events throughout the region</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="rounded-lg p-8 bg-gradient-to-br from-purple-50 to-pink-50 border-2 border-purple-200 shadow-lg hover:shadow-xl transition-shadow">
+              <div className="flex items-start gap-4">
+                <Clock className="w-8 h-8 text-purple-600 flex-shrink-0 mt-1" />
+                <div>
+                  <h3 className="text-lg font-bold text-gray-800 mb-2">Hours</h3>
+                  <p className="text-gray-700 text-sm">Monday - Sunday</p>
+                  <p className="text-gray-700 font-semibold text-sm">9:00 AM - 6:00 PM</p>
+                  <p className="text-gray-700 text-sm mt-1">Holiday hours may vary</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
-      <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"
-        />
+      {/* Social Media Section */}
+      <div id="contact-social" data-section="contact-social" className="mx-auto px-4 md:px-6 lg:px-8 py-12 md:py-16 lg:py-20 bg-gradient-to-r from-pink-100 via-purple-100 to-indigo-100">
+        <div className="max-w-4xl mx-auto text-center">
+          <h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold mb-4">Connect With Us</h2>
+          <p className="text-lg opacity-80 mb-12">Follow our social media for behind-the-scenes content, event updates, and creative inspiration</p>
+          
+          <div className="flex justify-center gap-6 flex-wrap">
+            <a
+              href="https://facebook.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-3 px-8 py-4 rounded-lg bg-blue-500 text-white font-bold hover:bg-blue-600 transition-all duration-300 transform hover:scale-110 shadow-lg hover:shadow-xl"
+            >
+              <Facebook className="w-6 h-6" />
+              Facebook
+            </a>
+            <a
+              href="https://instagram.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-3 px-8 py-4 rounded-lg bg-gradient-to-r from-pink-500 to-purple-500 text-white font-bold hover:from-pink-600 hover:to-purple-600 transition-all duration-300 transform hover:scale-110 shadow-lg hover:shadow-xl"
+            >
+              <Instagram className="w-6 h-6" />
+              Instagram
+            </a>
+            <a
+              href="https://tiktok.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-3 px-8 py-4 rounded-lg bg-gray-900 text-white font-bold hover:bg-gray-800 transition-all duration-300 transform hover:scale-110 shadow-lg hover:shadow-xl"
+            >
+              <Twitter className="w-6 h-6" />
+              TikTok
+            </a>
+            <a
+              href="https://linkedin.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-3 px-8 py-4 rounded-lg bg-blue-700 text-white font-bold hover:bg-blue-800 transition-all duration-300 transform hover:scale-110 shadow-lg hover:shadow-xl"
+            >
+              <Linkedin className="w-6 h-6" />
+              LinkedIn
+            </a>
+          </div>
+        </div>
       </div>
 
-      <div id="footer" data-section="footer">
+      <div id="footer-contact" data-section="footer-contact" className="mx-auto px-4 md:px-6 lg:px-8">
         <FooterSimple
           columns={footerColumns}
           bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
           bottomRightText="Professional Event Entertainment | Creative Services"
+          ariaLabel="Site footer with links"
+          containerClassName="gap-8 lg:gap-12"
+          columnsClassName="grid-cols-2 lg:grid-cols-4"
+          columnTitleClassName="font-extrabold text-lg"
+          columnItemClassName="hover:opacity-70 transition-opacity"
         />
       </div>
     </ThemeProvider>