vibeasite-templates/template-fitness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seed: fitness template (17 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 22:12:45 +00:00
parent 23414bcb3b
commit dd744b74b8
1 changed files with 113 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Contact.tsx
+113
View File
@@ -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>
);
}