Deploy
This commit is contained in:
Vula Builder
@@ -0,0 +1,136 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import Image from "next/image"
|
||||||
|
import Link from "next/link"
|
||||||
|
import { Flame, Leaf, Package } from 'lucide-react'
|
||||||
|
import Button from "@/components/ui/Button"
|
||||||
|
|
||||||
|
const wokFacts = [
|
||||||
|
{
|
||||||
|
icon: Flame,
|
||||||
|
title: "Flame first",
|
||||||
|
body: "Every box starts in a wok over a high flame. Nothing sits under a lamp waiting for someone to walk in.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Leaf,
|
||||||
|
title: "Shredded the same day",
|
||||||
|
body: "Cabbage and garlic are prepped fresh, because a hot wok cannot hide vegetables that have been standing around.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Package,
|
||||||
|
title: "Boxed for the walk",
|
||||||
|
body: "Classic takeaway boxes, closed while the noodles are still steaming, for the trip home or back to class.",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const streetNotes = [
|
||||||
|
{
|
||||||
|
label: "The corner",
|
||||||
|
value: "A section of the family property in Madadeni Section 4 became a wok station, a counter and a takeaway window. It is still the family property.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "The technique",
|
||||||
|
value: "Ben cooks with wok skills that were handed down to him: high flame, fast hands, and seasoning that arrives at the back of the throat.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "The local part",
|
||||||
|
value: "Fresh cabbage, garlic, a dark soy glaze he keeps to himself, and a measure of local chilli for that distinctly South African kick.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "The queue",
|
||||||
|
value: "School students after the last bell, commuters on the walk to the taxi rank, and neighbours who send someone for two boxes at a time.",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function OurNoodleStorySection() {
|
||||||
|
return (
|
||||||
|
<section data-vula-section="ournoodlestory" id="our-noodle-story" className="bg-card text-card-foreground relative py-24 lg:py-32">
|
||||||
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="grid grid-cols-1 gap-14 lg:grid-cols-12 lg:gap-16 lg:pb-12">
|
||||||
|
<div className="lg:col-span-7">
|
||||||
|
<span className="flex items-center gap-4 text-[0.7rem] font-medium uppercase tracking-[0.35em] text-card-foreground/60">
|
||||||
|
<span className="h-px w-14 bg-accent" aria-hidden="true" />
|
||||||
|
Family property, Section 4
|
||||||
|
</span>
|
||||||
|
<h2 className="mt-8 text-3xl font-light leading-[1.15] tracking-tight text-card-foreground sm:text-4xl lg:text-5xl">
|
||||||
|
Two worlds, one plate, one
|
||||||
|
<span className="italic text-accent"> very hot wok.</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-6 text-base leading-relaxed text-card-foreground/75 sm:text-lg">
|
||||||
|
Ben spent years watching what Newcastle ate. Kota, shisa nyama and chips held the corner, and rightly so. But walking the same street every afternoon, past the same three smells, one question kept following him around: where does somebody buy a plate of noodles, made fresh, right here?
|
||||||
|
</p>
|
||||||
|
<p className="mt-5 text-base leading-relaxed text-card-foreground/75 sm:text-lg">
|
||||||
|
The answer sits at the corner of the family property, where a section of the yard turned into a wok station and a window for takeaway boxes. The noodles are the real thing, springy wheat noodles tossed over a high flame, but the seasoning is not shy about where it is cooking. Local chilli keeps the whole thing honest.
|
||||||
|
</p>
|
||||||
|
<p className="mt-5 text-base leading-relaxed text-card-foreground/75 sm:text-lg">
|
||||||
|
Amapiano plays from a radio nearby while the boxes go out, and the faces in the queue are faces Ben knows. On this street a business is only as good as the neighbours who come back, and they keep coming back.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="relative lg:col-span-5">
|
||||||
|
<div className="relative aspect-[4/5] w-full overflow-hidden rounded-lg border border-border">
|
||||||
|
<Image
|
||||||
|
src="https://images.pexels.com/photos/7058546/pexels-photo-7058546.jpeg?auto=compress&cs=tinysrgb&h=350"
|
||||||
|
alt="Noodles and fresh vegetables being tossed together in a hot wok"
|
||||||
|
fill
|
||||||
|
sizes="(max-width: 1024px) 100vw, 40vw"
|
||||||
|
className="object-cover transition-transform duration-500 ease-out hover:scale-105"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 bg-gradient-to-t from-background/80 via-background/20 to-transparent"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mt-6 rounded-lg border border-foreground/20 bg-foreground/10 p-6 backdrop-blur-md lg:absolute lg:-bottom-12 lg:-left-10 lg:mt-0 lg:w-[88%]">
|
||||||
|
<p className="text-[0.7rem] font-medium uppercase tracking-[0.35em] text-accent">Signature</p>
|
||||||
|
<h3 className="mt-3 text-2xl font-light italic text-card-foreground">Ben's Signature Wok-Tossed Noodles</h3>
|
||||||
|
<p className="mt-3 text-sm leading-relaxed text-card-foreground/70">
|
||||||
|
Springy wheat noodles, garlic, fresh cabbage, a secret dark soy glaze and a hint of local chilli, served piping hot.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-16 grid grid-cols-1 gap-6 md:grid-cols-3">
|
||||||
|
{wokFacts.map((fact) => {
|
||||||
|
const Icon = fact.icon
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={fact.title}
|
||||||
|
className="rounded-lg border border-foreground/20 bg-foreground/10 p-6 backdrop-blur-md transition-all duration-200 ease-out hover:border-accent/60"
|
||||||
|
>
|
||||||
|
<Icon className="h-5 w-5 text-accent" aria-hidden="true" />
|
||||||
|
<h3 className="mt-4 text-lg font-light italic text-card-foreground">{fact.title}</h3>
|
||||||
|
<p className="mt-2 text-sm leading-relaxed text-card-foreground/70">{fact.body}</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<dl className="mt-20 border-t border-border">
|
||||||
|
{streetNotes.map((note) => (
|
||||||
|
<div
|
||||||
|
key={note.label}
|
||||||
|
className="grid grid-cols-1 gap-3 border-b border-border py-6 sm:grid-cols-12 sm:gap-8 sm:py-8"
|
||||||
|
>
|
||||||
|
<dt className="text-[0.7rem] font-medium uppercase tracking-[0.35em] text-card-foreground/55 sm:col-span-4">
|
||||||
|
{note.label}
|
||||||
|
</dt>
|
||||||
|
<dd className="text-base leading-relaxed text-card-foreground/80 sm:col-span-8">{note.value}</dd>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<div className="mt-16 flex flex-col items-start gap-8 border-t border-border pt-10 sm:flex-row sm:items-center sm:justify-between">
|
||||||
|
<p className="max-w-2xl text-lg font-light leading-relaxed text-card-foreground/85 sm:text-xl">
|
||||||
|
Madadeni's first dedicated Chinese noodle bar, still cooking beside the family home.
|
||||||
|
</p>
|
||||||
|
<Link href="/menu" className="inline-block">
|
||||||
|
<Button variant="outline" size="lg" className="transition-all duration-200 ease-out">
|
||||||
|
See the full menu
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user