297 lines
12 KiB
TypeScript
297 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
import Image from "next/image"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Clock, Mail, MapPin, Phone } from "lucide-react"
|
|
import { useState } from "react"
|
|
import ClinicSenseButton from "@/components/clinicsense-button"
|
|
|
|
export default function ContactPage() {
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
email: "",
|
|
phone: "",
|
|
service: "",
|
|
message: "",
|
|
})
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
// Handle form submission here
|
|
console.log("Form submitted:", formData)
|
|
}
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
|
setFormData({
|
|
...formData,
|
|
[e.target.name]: e.target.value,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-beige-lightest">
|
|
{/* Hero Section */}
|
|
<section className="bg-gradient-to-br from-beige-light to-beige py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-4xl mx-auto text-center space-y-8">
|
|
<Badge variant="outline" className="text-stone-600 border-stone-300">
|
|
Get in Touch
|
|
</Badge>
|
|
<h1 className="text-4xl lg:text-5xl font-light text-stone-800">Contact Us</h1>
|
|
<div className="text-xl font-light text-stone-700 italic mb-4">
|
|
"A place to unwind, a place to heal, a place to grow"
|
|
</div>
|
|
<p className="text-xl text-stone-600 leading-relaxed">
|
|
Ready to experience boutique wellness? Let's chat about creating your personalized sanctuary for healing
|
|
and self-care.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Clinic Images Section */}
|
|
<section className="py-12 bg-white">
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
|
<div className="relative">
|
|
<Image
|
|
src="/images/clinic-exterior.jpg"
|
|
alt="Ebb'nFlow Therapeutics clinic exterior"
|
|
width={400}
|
|
height={300}
|
|
className="rounded-lg shadow-md object-cover w-full h-64"
|
|
/>
|
|
<div className="absolute bottom-4 left-4 bg-white/90 px-3 py-1 rounded-md">
|
|
<p className="text-sm font-medium text-stone-800">Our Welcoming Exterior</p>
|
|
</div>
|
|
</div>
|
|
<div className="relative">
|
|
<Image
|
|
src="/images/yellow-door.jpg"
|
|
alt="Distinctive yellow entrance door"
|
|
width={400}
|
|
height={300}
|
|
className="rounded-lg shadow-md object-cover w-full h-64"
|
|
/>
|
|
<div className="absolute bottom-4 left-4 bg-white/90 px-3 py-1 rounded-md">
|
|
<p className="text-sm font-medium text-stone-800">Find Our Yellow Door</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Contact Form & Info Section */}
|
|
<section className="py-20 bg-beige-lightest">
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid lg:grid-cols-2 gap-12">
|
|
{/* Contact Form */}
|
|
<Card className="border-beige">
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl font-light text-stone-800">Send Us a Message</CardTitle>
|
|
<CardDescription className="text-stone-600">
|
|
Fill out the form below and we'll get back to you within 24 hours.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name" className="text-stone-700">
|
|
Full Name
|
|
</Label>
|
|
<Input
|
|
id="name"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
placeholder="Your full name"
|
|
className="border-stone-300 focus:border-stone-500"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email" className="text-stone-700">
|
|
Email
|
|
</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
placeholder="your@email.com"
|
|
className="border-stone-300 focus:border-stone-500"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="phone" className="text-stone-700">
|
|
Phone Number
|
|
</Label>
|
|
<Input
|
|
id="phone"
|
|
name="phone"
|
|
type="tel"
|
|
value={formData.phone}
|
|
onChange={handleChange}
|
|
placeholder="(289) 969-3219"
|
|
className="border-stone-300 focus:border-stone-500"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="service" className="text-stone-700">
|
|
Service of Interest
|
|
</Label>
|
|
<select
|
|
id="service"
|
|
name="service"
|
|
value={formData.service}
|
|
onChange={handleChange}
|
|
className="w-full px-3 py-2 border border-stone-300 rounded-md focus:outline-none focus:border-stone-500"
|
|
>
|
|
<option value="">Select a service</option>
|
|
<option value="massage">Massage Therapy</option>
|
|
<option value="laser">Laser Therapy</option>
|
|
<option value="movement">Movement Therapy</option>
|
|
<option value="combination">Combination Treatment</option>
|
|
<option value="consultation">Initial Consultation</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="message" className="text-stone-700">
|
|
Message
|
|
</Label>
|
|
<Textarea
|
|
id="message"
|
|
name="message"
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
placeholder="Tell us about your needs, concerns, or questions..."
|
|
rows={5}
|
|
className="border-stone-300 focus:border-stone-500"
|
|
/>
|
|
</div>
|
|
|
|
<Button type="submit" className="w-full bg-stone-700 hover:bg-stone-800">
|
|
Send Message
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Contact Information */}
|
|
<div className="space-y-8">
|
|
<Card className="border-beige">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl font-medium text-stone-800">Visit Our Clinic</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="flex items-start gap-3">
|
|
<MapPin className="h-5 w-5 text-stone-600 mt-1" />
|
|
<div>
|
|
<p className="font-medium text-stone-800">Address</p>
|
|
<p className="text-stone-600">
|
|
59 Wellington Street
|
|
<br />
|
|
St. Catharines, ON L2R 5P9
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-3">
|
|
<Phone className="h-5 w-5 text-stone-600 mt-1" />
|
|
<div>
|
|
<p className="font-medium text-stone-800">Phone</p>
|
|
<p className="text-stone-600">(289) 969-3219</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-3">
|
|
<Mail className="h-5 w-5 text-stone-600 mt-1" />
|
|
<div>
|
|
<p className="font-medium text-stone-800">Email</p>
|
|
<p className="text-stone-600">info@ebbnflowtherapeutics.com</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-beige">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl font-medium text-stone-800">Office Hours</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-stone-700">Monday - Thursday</span>
|
|
<span className="text-stone-600">9:00 AM - 7:00 PM</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-stone-700">Friday</span>
|
|
<span className="text-stone-600">9:00 AM - 5:00 PM</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-stone-700">Saturday</span>
|
|
<span className="text-stone-600">10:00 AM - 4:00 PM</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-stone-700">Sunday</span>
|
|
<span className="text-stone-600">Closed</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-beige bg-beige-light">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-start gap-3">
|
|
<Clock className="h-5 w-5 text-stone-600 mt-1" />
|
|
<div>
|
|
<p className="font-medium text-stone-800 mb-2">Emergency Contact</p>
|
|
<p className="text-sm text-stone-600">
|
|
For urgent matters outside of business hours, please call our emergency line at (289) 969-3220
|
|
or visit your nearest emergency room.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Booking Section */}
|
|
<section className="py-16 bg-beige-light">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center space-y-8">
|
|
<h2 className="text-2xl font-light text-stone-800">Ready for Your Personal Wellness Experience?</h2>
|
|
<p className="text-lg text-stone-600 max-w-2xl mx-auto">
|
|
Book your private session in our cozy, boutique space. Experience what it means to have dedicated time and
|
|
space just for your wellness journey.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<ClinicSenseButton size="large" color="green" />
|
|
<Button size="lg" className="bg-nature-green hover:bg-nature-green-dark text-white">
|
|
Call for Personal Consultation
|
|
</Button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|