108 lines
4.5 KiB
TypeScript
108 lines
4.5 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect } from "react"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { Phone, MapPin } from "lucide-react"
|
|
|
|
export function ContactSection() {
|
|
useEffect(() => {
|
|
// Load the form embed script
|
|
const script = document.createElement("script")
|
|
script.src = "https://link.sluice-box.io/js/form_embed.js"
|
|
document.body.appendChild(script)
|
|
|
|
return () => {
|
|
document.body.removeChild(script)
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<section id="contact" className="py-20 md:py-28 bg-muted/30">
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid gap-12 lg:grid-cols-2 items-start">
|
|
{/* Left Content */}
|
|
<div>
|
|
<h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-4 text-balance">
|
|
Have Detailed Questions? Let's Talk!
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground mb-8 text-pretty leading-relaxed">
|
|
Already submitted the quick form above? Great! We'll contact you soon. If you have specific requirements or detailed questions, feel free to share more below—we're here to help.
|
|
</p>
|
|
|
|
<div className="space-y-6">
|
|
<Card className="border-border/50">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-secondary/10 flex-shrink-0">
|
|
<Phone className="h-6 w-6 text-secondary" />
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold mb-1">Call or Text Us</div>
|
|
<a
|
|
href="tel:+14352339668"
|
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
(435) 233-9668
|
|
</a>
|
|
<p className="text-xs text-muted-foreground mt-1">Mon-Fri: 8:00 AM - 5:00 PM</p>
|
|
<a
|
|
href="sms:+14352339668"
|
|
className="text-xs text-secondary hover:underline mt-2 block"
|
|
>
|
|
Or send a text message
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-border/50">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-secondary/10 flex-shrink-0">
|
|
<MapPin className="h-6 w-6 text-secondary" />
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold mb-1">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>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Form - Long Form */}
|
|
<Card className="border-border/50">
|
|
<CardContent className="pt-6">
|
|
<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>
|
|
<iframe
|
|
src="https://link.sluice-box.io/widget/form/zQqWU1J1XcUxjAotZQlk"
|
|
style={{ width: "100%", height: "750px", border: "none", borderRadius: "4px" }}
|
|
id="inline-zQqWU1J1XcUxjAotZQlk"
|
|
data-layout="{'id':'INLINE'}"
|
|
data-trigger-type="alwaysShow"
|
|
data-trigger-value=""
|
|
data-activation-type="alwaysActivated"
|
|
data-activation-value=""
|
|
data-deactivation-type="neverDeactivate"
|
|
data-deactivation-value=""
|
|
data-form-name="Contact From Long"
|
|
data-height="738"
|
|
data-layout-iframe-id="inline-zQqWU1J1XcUxjAotZQlk"
|
|
data-form-id="zQqWU1J1XcUxjAotZQlk"
|
|
title="Detailed Contact Form"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|