67 lines
3 KiB
TypeScript
67 lines
3 KiB
TypeScript
"use client"
|
|
|
|
import { Phone, MapPin } 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 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="Detailed Questions"
|
|
title="Need something more specific? We can sort that out here."
|
|
description="If you already handled the quick placement request, use this longer form for service details, sales questions, or anything that needs more context."
|
|
/>
|
|
|
|
<div className="grid gap-12 lg:grid-cols-2 items-start">
|
|
<PublicSurface className="space-y-6">
|
|
<div className="space-y-6">
|
|
<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 flex-shrink-0">
|
|
<Phone className="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold mb-1 text-foreground">Call or Text Us</div>
|
|
<a href={businessConfig.publicCallUrl} className="text-muted-foreground hover:text-foreground transition-colors">
|
|
{businessConfig.publicCallNumber}
|
|
</a>
|
|
<p className="text-xs text-muted-foreground mt-1">Mon-Fri: 8:00 AM - 5:00 PM</p>
|
|
<a href={businessConfig.publicSmsUrl} className="text-xs hover:underline mt-2 block">
|
|
Or send a text message
|
|
</a>
|
|
</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 flex-shrink-0">
|
|
<MapPin className="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold mb-1 text-foreground">Service Areas</div>
|
|
<p className="text-muted-foreground">Davis, Salt Lake & Utah Counties</p>
|
|
<p className="text-xs text-muted-foreground mt-1">Serving 20+ cities across Utah</p>
|
|
</div>
|
|
</PublicInset>
|
|
</div>
|
|
</PublicSurface>
|
|
|
|
<PublicSurface className="p-5 md:p-7">
|
|
<div className="mb-4">
|
|
<h3 className="text-xl font-semibold mb-2">Contact Form</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Tell us more about your needs and we'll get back to you within 24 hours.
|
|
</p>
|
|
</div>
|
|
<div className="min-h-[738px]">
|
|
<ContactForm onSubmit={(data) => console.log('Contact form submitted:', data)} />
|
|
</div>
|
|
</PublicSurface>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|