Deploy
This commit is contained in:
Vula Builder
@@ -0,0 +1,185 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { ArrowRight, Clock, MapPin } from 'lucide-react'
|
||||||
|
import Button from '@/components/ui/Button'
|
||||||
|
import Input from '@/components/ui/Input'
|
||||||
|
import BusinessContact from '@/components/BusinessContact'
|
||||||
|
import BusinessHours from '@/components/BusinessHours'
|
||||||
|
import BusinessMap from '@/components/BusinessMap'
|
||||||
|
import { useEnquiry } from '@/hooks/useEnquiry'
|
||||||
|
|
||||||
|
export default function VisitTheWokContactSection() {
|
||||||
|
const enquiry = useEnquiry()
|
||||||
|
const [name, setName] = useState('')
|
||||||
|
const [phone, setPhone] = useState('')
|
||||||
|
const [email, setEmail] = useState('')
|
||||||
|
const [message, setMessage] = useState('')
|
||||||
|
const [formError, setFormError] = useState('')
|
||||||
|
const [sending, setSending] = useState(false)
|
||||||
|
const [result, setResult] = useState<{ ok: boolean; message: string } | null>(null)
|
||||||
|
|
||||||
|
const sentOk = enquiry.available && result !== null && result.ok
|
||||||
|
const showForm = enquiry.available && !sentOk
|
||||||
|
|
||||||
|
const handleSend = async (channel: 'whatsapp' | 'email') => {
|
||||||
|
setFormError('')
|
||||||
|
if (!name.trim() || !phone.trim()) {
|
||||||
|
setFormError('Add your name and a number we can reach you on, then send again.')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
setSending(true)
|
||||||
|
const outcome = await enquiry.send({ name, phone, email, message }, channel)
|
||||||
|
setSending(false)
|
||||||
|
setResult(outcome)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
id="visit-the-wok"
|
||||||
|
data-vula-section="visitthewokcontact"
|
||||||
|
className="bg-background text-foreground py-24 sm:py-32"
|
||||||
|
>
|
||||||
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="grid gap-14 lg:grid-cols-12 lg:gap-16">
|
||||||
|
<div className="lg:col-span-7">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<span className="h-px w-14 bg-accent" aria-hidden="true" />
|
||||||
|
<span className="text-[11px] uppercase tracking-[0.32em] text-muted-foreground">
|
||||||
|
Madadeni Section 4 · Newcastle
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="mt-6 text-4xl font-light leading-tight tracking-tight sm:text-5xl">
|
||||||
|
Order on the way, collect it <span className="italic text-accent">still steaming.</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-5 max-w-xl text-base leading-relaxed text-muted-foreground sm:text-lg">
|
||||||
|
The wok is on from early until the last box leaves the counter. Come past for a takeaway, or send your order through first and pick it up at the corner — no long wait, nothing sitting under a lamp.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-9 flex flex-wrap items-center gap-4">
|
||||||
|
<Link href="/menu">
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
className="gap-2 border border-accent bg-accent text-accent-foreground transition-all duration-200 ease-out hover:bg-accent/90"
|
||||||
|
>
|
||||||
|
Order Online
|
||||||
|
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-14 grid gap-10 border-t border-foreground/15 pt-10 sm:grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<MapPin className="h-4 w-4 text-accent" aria-hidden="true" />
|
||||||
|
<span className="text-[11px] uppercase tracking-[0.28em] text-muted-foreground">Find the corner</span>
|
||||||
|
</div>
|
||||||
|
<BusinessContact className="mt-4 text-sm leading-relaxed text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Clock className="h-4 w-4 text-accent" aria-hidden="true" />
|
||||||
|
<span className="text-[11px] uppercase tracking-[0.28em] text-muted-foreground">Counter hours</span>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4">
|
||||||
|
<BusinessHours compact />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="lg:col-span-5">
|
||||||
|
<div className="rounded-lg border border-foreground/20 bg-foreground/10 p-8 backdrop-blur-md sm:p-10">
|
||||||
|
<p className="text-[11px] uppercase tracking-[0.32em] text-accent">Talk to the counter</p>
|
||||||
|
<h3 className="mt-4 text-2xl font-light leading-snug">
|
||||||
|
A question about an order, a big box, or noodles for a whole class?
|
||||||
|
</h3>
|
||||||
|
<p className="mt-4 text-sm leading-relaxed text-muted-foreground">
|
||||||
|
Send it through. We answer between tosses.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{sentOk && result ? (
|
||||||
|
<p className="mt-8 rounded-lg border border-accent/40 bg-accent/10 p-5 text-sm leading-relaxed text-foreground">
|
||||||
|
{result.message}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{showForm ? (
|
||||||
|
<form className="mt-8 space-y-5" onSubmit={(event) => event.preventDefault()}>
|
||||||
|
{result && !result.ok ? (
|
||||||
|
<p className="rounded-lg border border-accent/40 bg-accent/10 p-4 text-sm leading-relaxed text-foreground">
|
||||||
|
{result.message}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<Input
|
||||||
|
label="Your name"
|
||||||
|
value={name}
|
||||||
|
onChange={(event) => setName(event.target.value)}
|
||||||
|
placeholder="The name we should ask for"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label="Phone"
|
||||||
|
type="tel"
|
||||||
|
value={phone}
|
||||||
|
onChange={(event) => setPhone(event.target.value)}
|
||||||
|
placeholder="A number we can reach you on"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label="Email (optional)"
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(event) => setEmail(event.target.value)}
|
||||||
|
placeholder="you@example.co.za"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="visit-the-wok-message"
|
||||||
|
className="text-[11px] uppercase tracking-[0.28em] text-muted-foreground"
|
||||||
|
>
|
||||||
|
Message
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="visit-the-wok-message"
|
||||||
|
rows={4}
|
||||||
|
value={message}
|
||||||
|
onChange={(event) => setMessage(event.target.value)}
|
||||||
|
placeholder="What can we put in the wok for you?"
|
||||||
|
className="mt-3 w-full rounded-lg border border-foreground/20 bg-foreground/5 px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground transition-all duration-200 ease-out focus:border-accent focus:outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{formError ? (
|
||||||
|
<p className="text-sm leading-relaxed text-accent">{formError}</p>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-3 sm:flex-row">
|
||||||
|
{enquiry.channels.map((channel) => (
|
||||||
|
<Button
|
||||||
|
key={channel}
|
||||||
|
type="button"
|
||||||
|
fullWidth
|
||||||
|
variant={channel === 'whatsapp' ? 'default' : 'outline'}
|
||||||
|
disabled={sending}
|
||||||
|
onClick={() => handleSend(channel as 'whatsapp' | 'email')}
|
||||||
|
className="transition-all duration-200 ease-out"
|
||||||
|
>
|
||||||
|
{channel === 'whatsapp' ? 'Send on WhatsApp' : 'Send by email'}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-16">
|
||||||
|
<BusinessMap />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user