106 lines
6.2 KiB
TypeScript
106 lines
6.2 KiB
TypeScript
"use client"
|
|
|
|
import { Clock, Mail, Phone } from "lucide-react"
|
|
import { ContactForm } from "@/components/forms/contact-form"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { businessConfig } from "@/lib/seo-config"
|
|
|
|
export function ContactPage() {
|
|
const businessHours = [
|
|
{ day: "Sunday", hours: "Closed", isClosed: true },
|
|
{ day: "Monday", hours: "8:00 AM to 5:00 PM", isClosed: false },
|
|
{ day: "Tuesday", hours: "8:00 AM to 5:00 PM", isClosed: false },
|
|
{ day: "Wednesday", hours: "8:00 AM to 5:00 PM", isClosed: false },
|
|
{ day: "Thursday", hours: "8:00 AM to 5:00 PM", isClosed: false },
|
|
{ day: "Friday", hours: "8:00 AM to 5:00 PM", isClosed: false },
|
|
{ day: "Saturday", hours: "Closed", isClosed: true },
|
|
]
|
|
|
|
return (
|
|
<div className="container mx-auto max-w-6xl px-4 py-10 md:py-14">
|
|
<header className="mx-auto max-w-3xl text-center">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.22em] text-primary/80">Contact Rocky Mountain Vending</p>
|
|
<h1 className="mt-3 text-4xl font-bold tracking-tight text-balance md:text-5xl">Tell us what you need and we'll point you to the right team.</h1>
|
|
<p className="mt-4 text-base leading-relaxed text-muted-foreground md:text-lg">
|
|
Use the form for repairs, moving, manuals, machine sales, or general questions. If you'd rather talk now, call us during business hours.
|
|
</p>
|
|
</header>
|
|
|
|
<div className="mt-10 grid gap-8 lg:grid-cols-[minmax(0,1.15fr)_minmax(320px,0.85fr)] lg:items-start">
|
|
<section id="contact-form" className="rounded-[2rem] border border-border/70 bg-[linear-gradient(180deg,rgba(255,255,255,0.92),rgba(249,247,242,0.92))] p-5 shadow-[0_24px_60px_rgba(0,0,0,0.08)] md:p-7">
|
|
<div className="mb-6 flex flex-wrap items-center gap-3">
|
|
<div className="rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-primary">
|
|
Contact Form
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">For repairs or moving, include the machine model and a clear description of what's happening.</p>
|
|
</div>
|
|
<ContactForm onSubmit={(data) => console.log("Contact form submitted:", data)} />
|
|
</section>
|
|
|
|
<aside className="space-y-5">
|
|
<Card className="overflow-hidden rounded-[2rem] border-border/70 shadow-[0_20px_50px_rgba(0,0,0,0.08)]">
|
|
<CardContent className="bg-[radial-gradient(circle_at_top_left,rgba(196,154,52,0.16),transparent_55%),linear-gradient(180deg,rgba(255,255,255,0.98),rgba(247,244,236,0.98))] p-6">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">Direct Options</p>
|
|
<h2 className="mt-2 text-2xl font-semibold text-foreground">Reach the team directly</h2>
|
|
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
|
|
We monitor calls, texts, and email throughout the business day. If you're sending repair photos or videos, text them to the number below.
|
|
</p>
|
|
|
|
<div className="mt-6 space-y-4">
|
|
<a href={businessConfig.publicCallUrl} className="flex items-start gap-4 rounded-2xl border border-border/60 bg-background/85 px-4 py-4 transition hover:border-primary/35 hover:bg-primary/[0.04]">
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-full bg-primary/10 text-primary">
|
|
<Phone className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold text-foreground">Call</p>
|
|
<p className="mt-1 text-base font-medium text-foreground">{businessConfig.publicCallNumber}</p>
|
|
<p className="mt-1 text-sm text-muted-foreground">Best for immediate questions during business hours.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href={`mailto:${businessConfig.email}?Subject=Rocky%20Mountain%20Vending%20Inquiry`} className="flex items-start gap-4 rounded-2xl border border-border/60 bg-background/85 px-4 py-4 transition hover:border-primary/35 hover:bg-primary/[0.04]">
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-full bg-primary/10 text-primary">
|
|
<Mail className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold text-foreground">Email</p>
|
|
<p className="mt-1 break-all text-base font-medium text-foreground">{businessConfig.email}</p>
|
|
<p className="mt-1 text-sm text-muted-foreground">Good for longer requests and supporting details.</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="rounded-[2rem] border-border/70 shadow-[0_18px_45px_rgba(0,0,0,0.06)]">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
|
|
<Clock className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">Business Hours</p>
|
|
<h2 className="text-xl font-semibold text-foreground">When we're available</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5 space-y-2">
|
|
{businessHours.map((schedule) => (
|
|
<div
|
|
key={schedule.day}
|
|
className={`flex items-center justify-between rounded-xl px-3 py-2 ${
|
|
schedule.isClosed ? "bg-muted/55 text-muted-foreground" : "bg-primary/[0.04]"
|
|
}`}
|
|
>
|
|
<span className="font-medium text-foreground">{schedule.day}</span>
|
|
<span className={schedule.isClosed ? "text-sm" : "text-sm font-semibold text-primary"}>{schedule.hours}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|