174 lines
7.3 KiB
TypeScript
174 lines
7.3 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect } from "react"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { Phone, Mail, Clock } from "lucide-react"
|
|
import Link from "next/link"
|
|
|
|
export function ContactPage() {
|
|
useEffect(() => {
|
|
// Load the form embed script
|
|
const script = document.createElement("script")
|
|
script.src = "https://link.sluice-box.io/js/form_embed.js"
|
|
script.async = true
|
|
document.body.appendChild(script)
|
|
|
|
return () => {
|
|
if (document.body.contains(script)) {
|
|
document.body.removeChild(script)
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
const businessHours = [
|
|
{ day: "Sunday", hours: "Closed", isClosed: true },
|
|
{ day: "Monday", hours: "8:00 AM to 5:00 PM", isClosed: false },
|
|
{ day: "Tuesday", hours: "8:00 AM to 5:00 PM", isClosed: false },
|
|
{ day: "Wednesday", hours: "8:00 AM to 5:00 PM", isClosed: false },
|
|
{ day: "Thursday", hours: "8:00 AM to 5:00 PM", isClosed: false },
|
|
{ day: "Friday", hours: "8:00 AM to 5:00 PM", isClosed: false },
|
|
{ day: "Saturday", hours: "Closed", isClosed: true },
|
|
]
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8 md:py-12 max-w-6xl">
|
|
{/* Header */}
|
|
<header className="text-center mb-12 md:mb-16">
|
|
<h1 className="text-4xl md:text-5xl font-bold mb-4">Contact Us</h1>
|
|
<div className="w-24 h-1 bg-gradient-to-r from-[#c4142c] to-[#a01020] mx-auto rounded-full"></div>
|
|
</header>
|
|
|
|
{/* Main Content - Form and Contact Info */}
|
|
<div className="grid gap-8 md:grid-cols-2 mb-16">
|
|
{/* Left Column - Contact Form */}
|
|
<div>
|
|
<h2 className="text-2xl md:text-3xl font-semibold mb-6 text-center md:text-left">
|
|
Get in Touch with Us
|
|
</h2>
|
|
<Card className="border-2 shadow-lg">
|
|
<CardContent className="p-0">
|
|
<iframe
|
|
src="https://link.sluice-box.io/widget/form/zQqWU1J1XcUxjAotZQlk"
|
|
style={{ border: 'none', width: '100%', minHeight: '600px' }}
|
|
scrolling="no"
|
|
id="zQqWU1J1XcUxjAotZQlk"
|
|
title="Contact Form"
|
|
className="rounded-lg"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Right Column - Contact Information */}
|
|
<div>
|
|
<h2 className="text-2xl md:text-3xl font-semibold mb-6 text-center md:text-left">
|
|
Contact Information
|
|
</h2>
|
|
<div className="space-y-6">
|
|
<Card className="border-2 hover:border-primary/50 transition-colors shadow-md">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center">
|
|
<Phone className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-lg mb-1">Phone</h3>
|
|
<Link
|
|
href="tel:+14352339668"
|
|
className="text-primary hover:underline text-lg font-medium"
|
|
>
|
|
(435) 233-9668
|
|
</Link>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Call us during business hours
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-2 hover:border-primary/50 transition-colors shadow-md">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center">
|
|
<Mail className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-lg mb-1">Email</h3>
|
|
<Link
|
|
href="mailto:info@rockymountainvending.com?Subject=I%20Need%20More%20Information"
|
|
className="text-primary hover:underline text-lg font-medium break-all"
|
|
>
|
|
info@rockymountainvending.com
|
|
</Link>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Send us an email anytime
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hours of Operation */}
|
|
<section className="mb-12">
|
|
<h2 className="text-2xl md:text-3xl font-semibold mb-8 text-center">
|
|
Hours of Operation
|
|
</h2>
|
|
<div className="grid gap-6 md:grid-cols-2 max-w-4xl mx-auto">
|
|
<Card className="border-2 shadow-lg">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center">
|
|
<Clock className="w-5 h-5 text-primary" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold">Business Hours</h3>
|
|
</div>
|
|
<div className="space-y-3">
|
|
{businessHours.map((schedule, index) => (
|
|
<div
|
|
key={index}
|
|
className={`flex justify-between items-center py-2 px-3 rounded-lg transition-colors ${
|
|
schedule.isClosed
|
|
? 'bg-muted/50 text-muted-foreground'
|
|
: 'bg-accent/30 hover:bg-accent/50'
|
|
}`}
|
|
>
|
|
<span className="font-medium">{schedule.day}</span>
|
|
<span className={schedule.isClosed ? 'font-normal' : 'font-semibold text-primary'}>
|
|
{schedule.hours}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Additional Info Card */}
|
|
<Card className="border-2 shadow-lg bg-gradient-to-br from-primary/5 to-secondary/5">
|
|
<CardContent className="p-6 flex flex-col justify-center h-full">
|
|
<h3 className="text-xl font-semibold mb-4">Need Help Outside Business Hours?</h3>
|
|
<p className="text-muted-foreground mb-4 leading-relaxed">
|
|
While our office hours are Monday through Friday, 8:00 AM to 5:00 PM, we understand that vending machine issues can happen anytime. For urgent matters, please leave us a message or send an email, and we'll get back to you as soon as possible.
|
|
</p>
|
|
<div className="mt-4 p-4 bg-card rounded-lg border border-border">
|
|
<p className="text-sm font-semibold mb-2">Quick Response Options:</p>
|
|
<ul className="text-sm text-muted-foreground space-y-1 list-disc list-inside">
|
|
<li>Text us at (435) 233-9668</li>
|
|
<li>Use the chat widget on our website</li>
|
|
<li>Submit the contact form above</li>
|
|
</ul>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
|
|
|