114 lines
4.7 KiB
TypeScript
114 lines
4.7 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="Need help with repairs, moving, manuals, or machine sales?"
|
|
description="Tell us what you need and we'll route your request to the right person."
|
|
/>
|
|
|
|
<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">
|
|
Talk to Our Team
|
|
</p>
|
|
<h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
|
|
Share a few details and we'll help you take the next step.
|
|
</h2>
|
|
<p className="mt-3 text-base leading-relaxed text-muted-foreground">
|
|
Whether you need repairs, moving help, manuals, or machine sales,
|
|
we'll make sure your message gets to the right person.
|
|
</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"
|
|
>
|
|
Talk to Our Team
|
|
</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 nearby locations
|
|
already listed on our service areas page.
|
|
</p>
|
|
</div>
|
|
</PublicInset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|