190 lines
8 KiB
TypeScript
190 lines
8 KiB
TypeScript
"use client"
|
|
|
|
import { Clock, Mail, Phone } from "lucide-react"
|
|
import { ContactForm } from "@/components/forms/contact-form"
|
|
import {
|
|
PublicInset,
|
|
PublicPageHeader,
|
|
PublicSurface,
|
|
} from "@/components/public-surface"
|
|
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="public-page">
|
|
<PublicPageHeader
|
|
align="center"
|
|
eyebrow="Contact Rocky Mountain Vending"
|
|
title="Tell us what you need and we'll point you to the right team."
|
|
description="Use the form for repairs, moving, manuals, machine sales, or general questions. If you'd rather talk now, call us during business hours."
|
|
/>
|
|
|
|
<section className="mt-10 grid gap-4 lg:grid-cols-3">
|
|
<PublicInset className="h-full p-5">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">
|
|
Repairs
|
|
</p>
|
|
<p className="mt-3 text-sm leading-relaxed text-muted-foreground">
|
|
Include the machine model, what the machine is doing, and any photos
|
|
or videos that can help us triage the issue faster.
|
|
</p>
|
|
</PublicInset>
|
|
<PublicInset className="h-full p-5">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">
|
|
Sales or Placement
|
|
</p>
|
|
<p className="mt-3 text-sm leading-relaxed text-muted-foreground">
|
|
Tell us about your location, traffic, and whether you are asking
|
|
about free placement, machine sales, or both.
|
|
</p>
|
|
</PublicInset>
|
|
<PublicInset className="h-full p-5">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">
|
|
Manuals or Parts
|
|
</p>
|
|
<p className="mt-3 text-sm leading-relaxed text-muted-foreground">
|
|
Share the machine brand and model so we can point you toward the
|
|
right part, manual, or support path.
|
|
</p>
|
|
</PublicInset>
|
|
</section>
|
|
|
|
<div className="mt-6 grid gap-6 lg:grid-cols-[minmax(0,1.1fr)_minmax(320px,0.9fr)] lg:items-start">
|
|
<PublicSurface id="contact-form" as="section" className="p-5 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)}
|
|
/>
|
|
</PublicSurface>
|
|
|
|
<aside className="space-y-4 lg:sticky lg:top-28">
|
|
<PublicSurface className="p-6">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">
|
|
Quick Guidance
|
|
</p>
|
|
<h2 className="mt-2 text-2xl font-semibold text-foreground">
|
|
We'll route you to the right next step
|
|
</h2>
|
|
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
|
|
If you are not sure whether to ask about placement, repairs,
|
|
moving, manuals, or sales, that's fine. Send the details you
|
|
have and we'll help sort it out.
|
|
</p>
|
|
</PublicSurface>
|
|
|
|
<PublicSurface className="overflow-hidden 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-5 space-y-3">
|
|
<a
|
|
href={businessConfig.publicCallUrl}
|
|
className="flex items-start gap-4 rounded-2xl border border-border/55 bg-background/65 px-4 py-4 transition hover:border-primary/35"
|
|
>
|
|
<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/55 bg-background/65 px-4 py-4 transition hover:border-primary/35"
|
|
>
|
|
<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>
|
|
</PublicSurface>
|
|
|
|
<PublicSurface 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-4 space-y-2">
|
|
{businessHours.map((schedule) => (
|
|
<PublicInset
|
|
key={schedule.day}
|
|
className={`flex items-center justify-between rounded-xl px-3 py-2 shadow-none ${
|
|
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>
|
|
</PublicInset>
|
|
))}
|
|
</div>
|
|
</PublicSurface>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|