90 lines
4.6 KiB
TypeScript
90 lines
4.6 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { MapPin, Phone, Wrench } from "lucide-react"
|
|
import { PublicInset, PublicPageHeader, PublicSurface } from "@/components/public-surface"
|
|
import { businessConfig } from "@/lib/seo-config"
|
|
|
|
export function ContactSection() {
|
|
return (
|
|
<section id="contact" className="py-20 md:py-28 bg-muted/30">
|
|
<div className="container mx-auto px-4">
|
|
<PublicPageHeader
|
|
className="mb-10 max-w-3xl"
|
|
eyebrow="Need Something Else?"
|
|
title="Repairs, moving, manuals, and sales questions all funnel through one clean contact path."
|
|
description="Instead of repeating the full intake form on every page, we keep the detailed service request on the dedicated contact page and use this section as the quick handoff."
|
|
/>
|
|
|
|
<div className="grid gap-6 lg:grid-cols-[1.05fr_0.95fr] lg:items-start">
|
|
<PublicSurface className="p-6 md:p-8">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">Best Next Step</p>
|
|
<h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
|
|
Use the dedicated contact page for service details.
|
|
</h2>
|
|
<p className="mt-3 text-base leading-relaxed text-muted-foreground">
|
|
That page keeps the full Rocky intake for repairs, moving, manuals, machine sales, and anything that
|
|
needs more context. It stays off the rest of the site so these pages can stay lighter and more consistent.
|
|
</p>
|
|
|
|
<div className="mt-6 flex flex-col gap-3 sm:flex-row">
|
|
<Link
|
|
href="/contact-us#contact-form"
|
|
className="inline-flex min-h-11 items-center justify-center rounded-full bg-primary px-5 text-sm font-medium text-primary-foreground transition hover:bg-primary/90"
|
|
>
|
|
Open Contact Form
|
|
</Link>
|
|
<a
|
|
href={businessConfig.publicCallUrl}
|
|
className="inline-flex min-h-11 items-center justify-center rounded-full border border-border bg-white px-5 text-sm font-medium text-foreground transition hover:border-primary/40 hover:text-primary"
|
|
>
|
|
Call Instead
|
|
</a>
|
|
</div>
|
|
</PublicSurface>
|
|
|
|
<div className="space-y-5">
|
|
<PublicInset className="flex items-start gap-4 p-5">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary shrink-0">
|
|
<Phone className="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-foreground">Call or Text Us</div>
|
|
<a href={businessConfig.publicCallUrl} className="mt-1 block text-muted-foreground transition hover:text-foreground">
|
|
{businessConfig.publicCallNumber}
|
|
</a>
|
|
<p className="mt-1 text-xs text-muted-foreground">Mon-Fri: 8:00 AM - 5:00 PM</p>
|
|
</div>
|
|
</PublicInset>
|
|
|
|
<PublicInset className="flex items-start gap-4 p-5">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary shrink-0">
|
|
<Wrench className="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-foreground">For Repairs or Moving</div>
|
|
<p className="mt-1 text-sm leading-relaxed text-muted-foreground">
|
|
Include the machine model and a clear text description. You can also text photos or videos to{" "}
|
|
<a href={businessConfig.publicSmsUrl} className="font-medium text-foreground underline decoration-primary/35 underline-offset-4 hover:decoration-primary">
|
|
{businessConfig.publicSmsNumber}
|
|
</a>
|
|
.
|
|
</p>
|
|
</div>
|
|
</PublicInset>
|
|
|
|
<PublicInset className="flex items-start gap-4 p-5">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary shrink-0">
|
|
<MapPin className="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-foreground">Service Areas</div>
|
|
<p className="mt-1 text-sm leading-relaxed text-muted-foreground">Davis, Salt Lake, and Utah Counties, plus the surrounding Rocky Mountain Vending service footprint already listed on the site.</p>
|
|
</div>
|
|
</PublicInset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|