DMleadgen
46d973904b
Next.js website for Rocky Mountain Vending company featuring: - Product catalog with Stripe integration - Service areas and parts pages - Admin dashboard with Clerk authentication - SEO optimized pages with JSON-LD structured data Co-authored-by: Cursor <cursoragent@cursor.com>
84 lines
3.6 KiB
TypeScript
84 lines
3.6 KiB
TypeScript
"use client"
|
|
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { Phone, MapPin } from "lucide-react"
|
|
import { ContactForm } from "@/components/forms/contact-form"
|
|
|
|
export function ContactSection() {
|
|
|
|
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 transition-colors">
|
|
<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 hover:underline mt-2 block"
|
|
>
|
|
Or send a text message
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-border/50 transition-colors">
|
|
<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>
|
|
<div className="min-h-[738px]">
|
|
<ContactForm onSubmit={(data) => console.log('Contact form submitted:', data)} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|