490 lines
20 KiB
TypeScript
490 lines
20 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
|
|
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { MapPin, Phone, Mail, Clock, Instagram, Facebook, MessageSquare, Calendar } from "lucide-react"
|
|
import Link from "next/link"
|
|
|
|
const contactMethods = [
|
|
{
|
|
icon: Phone,
|
|
title: "Phone",
|
|
value: "(555) 123-TATT",
|
|
description: "Call us during business hours",
|
|
action: "tel:+15551238288",
|
|
},
|
|
{
|
|
icon: Mail,
|
|
title: "Email",
|
|
value: "info@unitedtattoo.com",
|
|
description: "We respond within 24 hours",
|
|
action: "mailto:info@unitedtattoo.com",
|
|
},
|
|
{
|
|
icon: Instagram,
|
|
title: "Instagram",
|
|
value: "@unitedtattoo",
|
|
description: "Follow for latest work",
|
|
action: "https://instagram.com/unitedtattoo",
|
|
},
|
|
{
|
|
icon: MessageSquare,
|
|
title: "Text/SMS",
|
|
value: "(555) 123-TATT",
|
|
description: "Text for quick questions",
|
|
action: "sms:+15551238288",
|
|
},
|
|
]
|
|
|
|
const businessHours = [
|
|
{ day: "Monday", hours: "12:00 PM - 8:00 PM", status: "open" },
|
|
{ day: "Tuesday", hours: "12:00 PM - 8:00 PM", status: "open" },
|
|
{ day: "Wednesday", hours: "12:00 PM - 8:00 PM", status: "open" },
|
|
{ day: "Thursday", hours: "12:00 PM - 8:00 PM", status: "open" },
|
|
{ day: "Friday", hours: "12:00 PM - 8:00 PM", status: "open" },
|
|
{ day: "Saturday", hours: "10:00 AM - 6:00 PM", status: "open" },
|
|
{ day: "Sunday", hours: "Closed", status: "closed" },
|
|
]
|
|
|
|
const inquiryTypes = [
|
|
"General Question",
|
|
"Booking Consultation",
|
|
"Pricing Information",
|
|
"Aftercare Support",
|
|
"Portfolio Inquiry",
|
|
"Custom Design",
|
|
"Touch-up Request",
|
|
"Other",
|
|
]
|
|
|
|
export function ContactPage() {
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
email: "",
|
|
phone: "",
|
|
inquiryType: "",
|
|
subject: "",
|
|
message: "",
|
|
preferredContact: "email",
|
|
})
|
|
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [isSubmitted, setIsSubmitted] = useState(false)
|
|
|
|
const handleInputChange = (field: string, value: string) => {
|
|
setFormData((prev) => ({ ...prev, [field]: value }))
|
|
}
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setIsSubmitting(true)
|
|
|
|
// Simulate form submission
|
|
await new Promise((resolve) => setTimeout(resolve, 2000))
|
|
|
|
setIsSubmitted(true)
|
|
setIsSubmitting(false)
|
|
|
|
// Reset form after 3 seconds
|
|
setTimeout(() => {
|
|
setIsSubmitted(false)
|
|
setFormData({
|
|
name: "",
|
|
email: "",
|
|
phone: "",
|
|
inquiryType: "",
|
|
subject: "",
|
|
message: "",
|
|
preferredContact: "email",
|
|
})
|
|
}, 3000)
|
|
}
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="max-w-6xl mx-auto">
|
|
{/* Header */}
|
|
<div className="text-center mb-12">
|
|
<h1 className="font-playfair text-4xl md:text-5xl font-bold mb-6">Get In Touch</h1>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto text-balance">
|
|
Ready to start your tattoo journey? Have questions about our services? We're here to help. Reach out using
|
|
any of the methods below.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Quick Contact Methods */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
|
|
{contactMethods.map((method, index) => {
|
|
const Icon = method.icon
|
|
return (
|
|
<Card key={index} className="text-center hover:shadow-lg transition-shadow duration-300">
|
|
<CardContent className="p-6">
|
|
<div className="mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
|
|
<Icon className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<h3 className="font-semibold mb-1">{method.title}</h3>
|
|
<p className="text-primary font-medium mb-2">{method.value}</p>
|
|
<p className="text-sm text-muted-foreground mb-4">{method.description}</p>
|
|
<Button asChild size="sm" variant="outline">
|
|
<Link href={method.action}>Contact</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
{/* Contact Form */}
|
|
<div>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="font-playfair text-2xl">Send us a Message</CardTitle>
|
|
<p className="text-muted-foreground">
|
|
Fill out the form below and we'll get back to you as soon as possible.
|
|
</p>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isSubmitted ? (
|
|
<div className="text-center py-8">
|
|
<div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
|
|
<MessageSquare className="w-8 h-8 text-green-600" />
|
|
</div>
|
|
<h3 className="font-semibold text-lg mb-2">Message Sent!</h3>
|
|
<p className="text-muted-foreground">
|
|
Thank you for contacting us. We'll get back to you within 24 hours.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label htmlFor="name" className="block text-sm font-medium mb-2">
|
|
Name *
|
|
</label>
|
|
<Input
|
|
id="name"
|
|
value={formData.name}
|
|
onChange={(e) => handleInputChange("name", e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="phone" className="block text-sm font-medium mb-2">
|
|
Phone
|
|
</label>
|
|
<Input
|
|
id="phone"
|
|
type="tel"
|
|
value={formData.phone}
|
|
onChange={(e) => handleInputChange("phone", e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium mb-2">
|
|
Email *
|
|
</label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={(e) => handleInputChange("email", e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="inquiryType" className="block text-sm font-medium mb-2">
|
|
Inquiry Type
|
|
</label>
|
|
<Select
|
|
value={formData.inquiryType}
|
|
onValueChange={(value) => handleInputChange("inquiryType", value)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select inquiry type" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{inquiryTypes.map((type) => (
|
|
<SelectItem key={type} value={type}>
|
|
{type}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="subject" className="block text-sm font-medium mb-2">
|
|
Subject
|
|
</label>
|
|
<Input
|
|
id="subject"
|
|
value={formData.subject}
|
|
onChange={(e) => handleInputChange("subject", e.target.value)}
|
|
placeholder="Brief description of your inquiry"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="message" className="block text-sm font-medium mb-2">
|
|
Message *
|
|
</label>
|
|
<Textarea
|
|
id="message"
|
|
rows={5}
|
|
value={formData.message}
|
|
onChange={(e) => handleInputChange("message", e.target.value)}
|
|
placeholder="Tell us about your tattoo idea, questions, or how we can help you..."
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">Preferred Contact Method</label>
|
|
<div className="flex space-x-4">
|
|
<label className="flex items-center">
|
|
<input
|
|
type="radio"
|
|
name="preferredContact"
|
|
value="email"
|
|
checked={formData.preferredContact === "email"}
|
|
onChange={(e) => handleInputChange("preferredContact", e.target.value)}
|
|
className="mr-2"
|
|
/>
|
|
Email
|
|
</label>
|
|
<label className="flex items-center">
|
|
<input
|
|
type="radio"
|
|
name="preferredContact"
|
|
value="phone"
|
|
checked={formData.preferredContact === "phone"}
|
|
onChange={(e) => handleInputChange("preferredContact", e.target.value)}
|
|
className="mr-2"
|
|
/>
|
|
Phone
|
|
</label>
|
|
<label className="flex items-center">
|
|
<input
|
|
type="radio"
|
|
name="preferredContact"
|
|
value="text"
|
|
checked={formData.preferredContact === "text"}
|
|
onChange={(e) => handleInputChange("preferredContact", e.target.value)}
|
|
className="mr-2"
|
|
/>
|
|
Text
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<Button type="submit" className="w-full bg-primary hover:bg-primary/90" disabled={isSubmitting}>
|
|
{isSubmitting ? "Sending..." : "Send Message"}
|
|
</Button>
|
|
</form>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Studio Info & Map */}
|
|
<div className="space-y-8">
|
|
{/* Studio Information */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="font-playfair text-2xl">Visit Our Studio</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="flex items-start space-x-3">
|
|
<MapPin className="w-5 h-5 text-primary mt-1" />
|
|
<div>
|
|
<p className="font-medium">Address</p>
|
|
<p className="text-muted-foreground">
|
|
123 Ink Street
|
|
<br />
|
|
Downtown District
|
|
<br />
|
|
City, State 12345
|
|
</p>
|
|
<Button asChild variant="link" className="p-0 h-auto text-primary">
|
|
<Link href="https://maps.google.com" target="_blank">
|
|
Get Directions
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-3">
|
|
<Phone className="w-5 h-5 text-primary mt-1" />
|
|
<div>
|
|
<p className="font-medium">Phone</p>
|
|
<p className="text-muted-foreground">(555) 123-TATT</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-3">
|
|
<Mail className="w-5 h-5 text-primary mt-1" />
|
|
<div>
|
|
<p className="font-medium">Email</p>
|
|
<p className="text-muted-foreground">info@unitedtattoo.com</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-3">
|
|
<Clock className="w-5 h-5 text-primary mt-1" />
|
|
<div>
|
|
<p className="font-medium mb-3">Business Hours</p>
|
|
<div className="space-y-2">
|
|
{businessHours.map((schedule, index) => (
|
|
<div key={index} className="flex justify-between items-center text-sm">
|
|
<span className="font-medium">{schedule.day}</span>
|
|
<div className="flex items-center space-x-2">
|
|
<span className={schedule.status === "closed" ? "text-muted-foreground" : ""}>
|
|
{schedule.hours}
|
|
</span>
|
|
{schedule.status === "open" && (
|
|
<Badge variant="outline" className="text-xs bg-green-50 text-green-700 border-green-200">
|
|
Open
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Social Media */}
|
|
<div>
|
|
<p className="font-medium mb-3">Follow Us</p>
|
|
<div className="flex space-x-4">
|
|
<Button asChild variant="outline" size="sm">
|
|
<Link href="https://instagram.com/unitedtattoo" target="_blank">
|
|
<Instagram className="w-4 h-4 mr-2" />
|
|
Instagram
|
|
</Link>
|
|
</Button>
|
|
<Button asChild variant="outline" size="sm">
|
|
<Link href="https://facebook.com/unitedtattoo" target="_blank">
|
|
<Facebook className="w-4 h-4 mr-2" />
|
|
Facebook
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Google Maps */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="font-playfair text-xl">Find Us</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
<div className="w-full h-80 bg-muted rounded-lg overflow-hidden">
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.1234567890123!2d-74.0059413!3d40.7127753!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDDCsDQyJzQ2LjAiTiA3NMKwMDAnMjEuNCJX!5e0!3m2!1sen!2sus!4v1234567890123"
|
|
width="100%"
|
|
height="320"
|
|
style={{ border: 0 }}
|
|
allowFullScreen
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer-when-downgrade"
|
|
title="United Tattoo Location"
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Quick Actions */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Card className="bg-primary text-primary-foreground">
|
|
<CardContent className="p-4 text-center">
|
|
<Calendar className="w-6 h-6 mx-auto mb-2" />
|
|
<h4 className="font-semibold mb-1">Book Appointment</h4>
|
|
<p className="text-xs opacity-90 mb-3">Schedule your tattoo session</p>
|
|
<Button asChild className="bg-white text-black hover:bg-gray-100 !text-black" size="sm">
|
|
<Link href="/book">Book Now</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-secondary text-secondary-foreground">
|
|
<CardContent className="p-4 text-center">
|
|
<MessageSquare className="w-6 h-6 mx-auto mb-2" />
|
|
<h4 className="font-semibold mb-1">Quick Question?</h4>
|
|
<p className="text-xs opacity-90 mb-3">Text us for fast answers</p>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-white text-white hover:bg-white hover:text-secondary bg-transparent"
|
|
>
|
|
<Link href="sms:+15551238288">Text Us</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* FAQ Section */}
|
|
<div className="mt-16">
|
|
<h2 className="font-playfair text-3xl font-bold mb-8 text-center">Frequently Asked Questions</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<h3 className="font-semibold mb-2">How do I book an appointment?</h3>
|
|
<p className="text-muted-foreground text-sm">
|
|
You can book online through our booking form, call us during business hours, or visit the studio in
|
|
person. A deposit is required to secure your appointment.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<h3 className="font-semibold mb-2">Do you accept walk-ins?</h3>
|
|
<p className="text-muted-foreground text-sm">
|
|
We have limited walk-in availability on Tuesdays and Thursdays from 2-6 PM for small tattoos and
|
|
consultations. Appointments are recommended.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<h3 className="font-semibold mb-2">What should I bring to my appointment?</h3>
|
|
<p className="text-muted-foreground text-sm">
|
|
Bring a valid ID, reference images if you have them, and wear comfortable clothing that provides easy
|
|
access to the tattoo area.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<h3 className="font-semibold mb-2">How far in advance should I book?</h3>
|
|
<p className="text-muted-foreground text-sm">
|
|
We recommend booking 2-4 weeks in advance, especially for larger pieces or specific artists. Popular
|
|
time slots fill up quickly.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|