Seed: fitness template (17 files)
This commit is contained in:
@@ -0,0 +1,113 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { MapPin, Phone, Mail, Clock, Send } from "lucide-react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
|
||||||
|
export default function Contact() {
|
||||||
|
const [form, setForm] = useState({ name: "", email: "", phone: "", message: "" });
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!form.name || !form.email || !form.message) {
|
||||||
|
toast.error("Please fill in all required fields.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
toast.success("Message sent! We will get back to you within 24 hours.");
|
||||||
|
setForm({ name: "", email: "", phone: "", message: "" });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-950 text-white">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
{/* ── Hero ── */}
|
||||||
|
<section className="pt-32 pb-16 bg-gradient-to-b from-slate-900 to-slate-950">
|
||||||
|
<div className="mx-auto max-w-7xl px-6 text-center">
|
||||||
|
<Badge className="mb-4 bg-orange-500/10 text-orange-400 border-orange-500/30 uppercase text-xs tracking-wider">Contact</Badge>
|
||||||
|
<h1 className="text-4xl md:text-5xl font-black uppercase text-white animate-fade-up">GET IN TOUCH</h1>
|
||||||
|
<p className="mt-4 text-slate-400 max-w-xl mx-auto">Drop by, call, or send us a message. We would love to hear from you.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="py-16">
|
||||||
|
<div className="mx-auto max-w-6xl px-6 grid lg:grid-cols-2 gap-12">
|
||||||
|
{/* ── Info + Map ── */}
|
||||||
|
<div className="space-y-8">
|
||||||
|
<Card className="bg-slate-900/80 backdrop-blur border border-slate-800">
|
||||||
|
<CardContent className="p-8 space-y-5">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<MapPin className="h-5 w-5 text-orange-400 mt-0.5 shrink-0" />
|
||||||
|
<div><div className="font-semibold text-white">Address</div><div className="text-sm text-slate-400">750 Iron Avenue, Los Angeles, CA 90015</div></div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<Phone className="h-5 w-5 text-orange-400 mt-0.5 shrink-0" />
|
||||||
|
<div><div className="font-semibold text-white">Phone</div><div className="text-sm text-slate-400">(213) 555-0247</div></div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<Mail className="h-5 w-5 text-orange-400 mt-0.5 shrink-0" />
|
||||||
|
<div><div className="font-semibold text-white">Email</div><div className="text-sm text-slate-400">hello@apexfitness.com</div></div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Map placeholder */}
|
||||||
|
<div className="w-full h-64 rounded-2xl bg-slate-900 border border-slate-800 flex items-center justify-center">
|
||||||
|
<div className="text-center text-slate-500">
|
||||||
|
<MapPin className="h-10 w-10 mx-auto mb-2 text-orange-500/30" />
|
||||||
|
<p className="text-sm">Interactive map loads here</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hours */}
|
||||||
|
<Card className="bg-slate-900/80 backdrop-blur border border-slate-800">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<h3 className="font-bold text-white mb-4 flex items-center gap-2"><Clock className="h-5 w-5 text-orange-400" /> Hours</h3>
|
||||||
|
<div className="space-y-2 text-sm">
|
||||||
|
<div className="flex justify-between text-slate-300"><span>Monday – Friday</span><span className="text-white font-medium">5:00 AM – 11:00 PM</span></div>
|
||||||
|
<div className="flex justify-between text-slate-300"><span>Saturday</span><span className="text-white font-medium">6:00 AM – 10:00 PM</span></div>
|
||||||
|
<div className="flex justify-between text-slate-300"><span>Sunday</span><span className="text-white font-medium">7:00 AM – 8:00 PM</span></div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Form ── */}
|
||||||
|
<Card className="bg-slate-900/80 backdrop-blur border border-slate-800 h-fit">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<h2 className="text-2xl font-bold text-white mb-6">Send a Message</h2>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-5">
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-slate-300 mb-1.5 block">Name *</label>
|
||||||
|
<Input value={form.name} onChange={(e) => setForm({...form, name: e.target.value})} placeholder="Your full name" className="bg-slate-800/50 border-slate-700 text-white placeholder:text-slate-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-slate-300 mb-1.5 block">Email *</label>
|
||||||
|
<Input value={form.email} onChange={(e) => setForm({...form, email: e.target.value})} type="email" placeholder="your@email.com" className="bg-slate-800/50 border-slate-700 text-white placeholder:text-slate-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-slate-300 mb-1.5 block">Phone</label>
|
||||||
|
<Input value={form.phone} onChange={(e) => setForm({...form, phone: e.target.value})} placeholder="(555) 000-0000" className="bg-slate-800/50 border-slate-700 text-white placeholder:text-slate-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-slate-300 mb-1.5 block">Message *</label>
|
||||||
|
<Textarea value={form.message} onChange={(e) => setForm({...form, message: e.target.value})} placeholder="How can we help?" rows={5} className="bg-slate-800/50 border-slate-700 text-white placeholder:text-slate-500 resize-none" />
|
||||||
|
</div>
|
||||||
|
<Button type="submit" className="w-full bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white font-bold uppercase tracking-wide rounded-full shadow-lg shadow-orange-500/25 active:scale-[0.97] transition-all">
|
||||||
|
Send Message <Send className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user