Rocky_Mountain_Vending/artifacts/backups/formatting/components/request-machine-section.tsx

55 lines
2 KiB
TypeScript

"use client"
import { useEffect } from "react"
import { Package } from "lucide-react"
export function RequestMachineSection() {
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="request-machine" className="py-16 md:py-24 bg-background">
<div className="container mx-auto px-4">
<div className="max-w-3xl mx-auto">
<div className="text-center mb-12">
<div className="inline-flex items-center justify-center gap-2 mb-4">
<Package className="h-6 w-6 text-secondary" />
<h2 className="text-3xl md:text-4xl font-bold">Get Your FREE Vending Machine Consultation</h2>
</div>
<p className="text-lg text-muted-foreground">
Fill out the form below and we'll call you within 24 hours to discuss your vending needs and schedule your free consultation
</p>
</div>
<div className="bg-card border border-border rounded-lg p-6 md:p-8">
<iframe
src="https://link.sluice-box.io/widget/form/jco1Ws89cOAK7ztEDtp6"
style={{ width: "100%", height: "450px", border: "none", borderRadius: "4px" }}
id="inline-jco1Ws89cOAK7ztEDtp6"
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="Short Form"
data-height="402"
data-layout-iframe-id="inline-jco1Ws89cOAK7ztEDtp6"
data-form-id="jco1Ws89cOAK7ztEDtp6"
title="Request Free Vending Machine"
/>
</div>
</div>
</div>
</section>
)
}