MENU SPECJALNE DLA KIELNTÓW BIZNESOWYCH
export default function WilczyGlodOrderOnline() {
const categories = [
{
name: „Zestawy dnia”,
items: [
{
title: „Business”,
price: „26 zł / z zupą 32 zł”,
desc: „Domowy zestaw obiadowy na każdy dzień. Szybko, konkretnie i bez kombinowania.”,
},
{
title: „Premium”,
price: „28 zł / z zupą 35 zł”,
desc: „Bardziej dopracowany zestaw dla tych, którzy chcą zjeść trochę lepiej.”,
},
{
title: „Deluxe”,
price: „32 zł / z zupą 42 zł”,
desc: „Większa opcja z wyborem dodatków i bardziej premium daniem głównym.”,
},
{
title: „Classic Schabowy”,
price: „32 zł / z zupą standardową 38 zł / z zupą luksusową 44 zł”,
desc: „Klasyk Wilczego Głodu. Schabowy, dodatki i porządna porcja bez oszczędzania.”,
},
],
},
{
name: „Burgery i tortille”,
items: [
{
title: „Tortilla Ultra Bekon”,
price: „29 zł”,
desc: „Soczyste mięso, bekon, sos i konkretna ilość dodatków.”,
},
{
title: „Burger Wilczy Klasyk”,
price: „32 zł”,
desc: „Wołowina, ser, warzywa i firmowy sos w puszystej bułce.”,
},
{
title: „Burger Podwójny”,
price: „39 zł”,
desc: „Dla głodnych naprawdę. Podwójne mięso i podwójna satysfakcja.”,
},
],
},
{
name: „Słodkie i kawa”,
items: [
{
title: „Sernik Torpeda”,
price: „14 zł”,
desc: „Własny wypiek, konkretny smak i zero udawania.”,
},
{
title: „Dowolna kawa + ciasto”,
price: „20 zł”,
desc: „Idealny zestaw na poranek, spotkanie albo szybką przerwę.”,
},
],
},
];
const steps = [
„Wybierasz dania i dodatki”,
„Podajesz godzinę odbioru lub dostawy”,
„Zostawiasz telefon i adres”,
„My potwierdzamy zamówienie i działamy”,
];
return (
<div className=”min-h-screen bg-neutral-50 text-neutral-900″>
<header className=”border-b bg-white/90 backdrop-blur sticky top-0 z-30″>
<div className=”mx-auto max-w-7xl px-4 py-4 flex items-center justify-between gap-4″>
<div>
<div className=”text-2xl font-black tracking-tight”>WILCZY GŁÓD</div>
<div className=”text-sm text-neutral-600″>Zamów online • Bar & Catering</div>
</div>
<div className=”hidden md:flex items-center gap-3 text-sm”>
<a href=”#menu” className=”hover:underline”>Menu</a>
<a href=”#how” className=”hover:underline”>Jak zamówić</a>
<a href=”#contact” className=”hover:underline”>Kontakt</a>
<button className=”rounded-2xl bg-black text-white px-4 py-2 font-semibold shadow-sm hover:opacity-90″>
Zamów teraz
</button>
</div>
</div>
</header>
<section className=”mx-auto max-w-7xl px-4 py-10 lg:py-16″>
<div className=”grid lg:grid-cols-2 gap-8 items-center”>
<div>
<div className=”inline-flex rounded-full border px-3 py-1 text-sm font-medium bg-white shadow-sm”>
Kutno • obiady • catering • odbiór i dostawa
</div>
<h1 className=”mt-4 text-4xl lg:text-6xl font-black tracking-tight leading-tight”>
Zamów jedzenie szybko, wygodnie i po ludzku.
</h1>
<p className=”mt-4 text-lg text-neutral-700 max-w-2xl”>
Strona pod zamówienia online dla Wilczego Głodu. Klient od razu widzi menu,
ceny, zestawy dnia, promocje i może przejść do szybkiego kontaktu lub formularza.
</p>
<div className=”mt-6 flex flex-wrap gap-3″>
<button className=”rounded-2xl bg-black text-white px-5 py-3 font-semibold shadow-sm hover:opacity-90″>
Przejdź do menu
</button>
<button className=”rounded-2xl bg-white border px-5 py-3 font-semibold shadow-sm hover:bg-neutral-100″>
Zadzwoń: 516 517 424
</button>
</div>
<div className=”mt-8 grid sm:grid-cols-3 gap-3″>
{[
„Świeże zestawy dnia”,
„Szybkie zamówienia firmowe”,
„Catering na imprezy i eventy”,
].map((item) => (
<div key={item} className=”rounded-2xl bg-white p-4 shadow-sm border text-sm font-medium”>
{item}
</div>
))}
</div>
</div>
<div className=”grid gap-4″>
<div className=”rounded-3xl bg-white p-5 shadow-lg border”>
<div className=”text-sm uppercase tracking-widest text-neutral-500″>Dzisiaj polecamy</div>
<div className=”mt-2 text-2xl font-black”>Classic Schabowy</div>
<div className=”mt-1 text-neutral-700″>32 zł / z zupą standardową 38 zł / z zupą luksusową 44 zł</div>
<div className=”mt-4 h-52 rounded-2xl bg-gradient-to-br from-neutral-200 to-neutral-100 flex items-center justify-center text-neutral-500 font-semibold”>
Miejsce na zdjęcie dania
</div>
</div>
<div className=”grid sm:grid-cols-2 gap-4″>
<div className=”rounded-3xl bg-black text-white p-5 shadow-lg”>
<div className=”text-sm uppercase tracking-widest text-white/70″>Promocja</div>
<div className=”mt-2 text-2xl font-black”>Kawa + ciasto</div>
<div className=”mt-1 text-white/80″>Dowolna kawa + Sernik Torpeda za 20 zł</div>
</div>
<div className=”rounded-3xl bg-white p-5 shadow-lg border”>
<div className=”text-sm uppercase tracking-widest text-neutral-500″>Dostawa</div>
<div className=”mt-2 text-2xl font-black”>Kutno i okolice</div>
<div className=”mt-1 text-neutral-700″>Szybka obsługa zamówień telefonicznych i online.</div>
</div>
</div>
</div>
</div>
</section>
<section id=”menu” className=”mx-auto max-w-7xl px-4 py-8 lg:py-12″>
<div className=”flex items-end justify-between gap-4 mb-6″>
<div>
<h2 className=”text-3xl lg:text-4xl font-black tracking-tight”>Menu online</h2>
<p className=”text-neutral-600 mt-2″>Przykładowy układ kategorii pod zamówienia online.</p>
</div>
<div className=”hidden md:flex gap-2″>
<input
placeholder=”Szukaj dania”
className=”rounded-2xl border bg-white px-4 py-2.5 shadow-sm outline-none w-56″
/>
<select className=”rounded-2xl border bg-white px-4 py-2.5 shadow-sm outline-none”>
<option>Wszystkie kategorie</option>
<option>Zestawy dnia</option>
<option>Burgery i tortille</option>
<option>Słodkie i kawa</option>
</select>
</div>
</div>
<div className=”space-y-10″>
{categories.map((category) => (
<div key={category.name}>
<h3 className=”text-2xl font-black mb-4″>{category.name}</h3>
<div className=”grid md:grid-cols-2 xl:grid-cols-3 gap-4″>
{category.items.map((item) => (
<div key={item.title} className=”rounded-3xl bg-white border p-5 shadow-sm hover:shadow-md transition-shadow”>
<div className=”flex items-start justify-between gap-4″>
<div>
<div className=”text-xl font-bold”>{item.title}</div>
<div className=”text-sm text-neutral-500 mt-1″>{item.price}</div>
</div>
<button className=”rounded-xl border px-3 py-2 text-sm font-semibold hover:bg-neutral-100″>
Dodaj
</button>
</div>
<p className=”mt-4 text-neutral-700″>{item.desc}</p>
<div className=”mt-4 flex flex-wrap gap-2 text-xs”>
<span className=”rounded-full bg-neutral-100 px-3 py-1″>Na miejscu</span>
<span className=”rounded-full bg-neutral-100 px-3 py-1″>Na wynos</span>
<span className=”rounded-full bg-neutral-100 px-3 py-1″>Dostawa</span>
</div>
</div>
))}
</div>
</div>
))}
</div>
</section>
<section id=”how” className=”mx-auto max-w-7xl px-4 py-8 lg:py-12″>
<div className=”rounded-[2rem] bg-white border p-6 lg:p-8 shadow-sm”>
<h2 className=”text-3xl lg:text-4xl font-black tracking-tight”>Jak to działa</h2>
<div className=”grid md:grid-cols-4 gap-4 mt-6″>
{steps.map((step, index) => (
<div key={step} className=”rounded-3xl bg-neutral-50 border p-5″>
<div className=”text-sm text-neutral-500″>Krok {index + 1}</div>
<div className=”mt-2 text-lg font-bold”>{step}</div>
</div>
))}
</div>
</div>
</section>
<section className=”mx-auto max-w-7xl px-4 py-8 lg:py-12″>
<div className=”grid lg:grid-cols-[1.2fr_0.8fr] gap-6″>
<div className=”rounded-[2rem] bg-black text-white p-6 lg:p-8 shadow-lg”>
<h2 className=”text-3xl font-black tracking-tight”>Formularz szybkiego zamówienia</h2>
<div className=”grid md:grid-cols-2 gap-4 mt-6″>
<input className=”rounded-2xl bg-white/10 border border-white/10 px-4 py-3 outline-none” placeholder=”Imię i nazwisko” />
<input className=”rounded-2xl bg-white/10 border border-white/10 px-4 py-3 outline-none” placeholder=”Telefon” />
<input className=”rounded-2xl bg-white/10 border border-white/10 px-4 py-3 outline-none md:col-span-2″ placeholder=”Adres dostawy lub informacja: odbiór osobisty” />
<textarea className=”rounded-2xl bg-white/10 border border-white/10 px-4 py-3 outline-none md:col-span-2 min-h-32″ placeholder=”Wpisz zamówienie, godzinę i dodatkowe uwagi” />
</div>
<button className=”mt-5 rounded-2xl bg-white text-black px-5 py-3 font-bold shadow-sm hover:opacity-90″>
Wyślij zamówienie
</button>
</div>
<div id=”contact” className=”rounded-[2rem] bg-white border p-6 lg:p-8 shadow-sm”>
<h2 className=”text-3xl font-black tracking-tight”>Kontakt</h2>
<div className=”mt-5 space-y-4 text-neutral-700″>
<div>
<div className=”text-sm text-neutral-500″>Telefon zamówienia</div>
<div className=”text-xl font-bold text-neutral-900″>516 517 424</div>
</div>
<div>
<div className=”text-sm text-neutral-500″>Rezerwacje</div>
<div className=”text-xl font-bold text-neutral-900″>516 517 545</div>
</div>
<div>
<div className=”text-sm text-neutral-500″>Strona i menu</div>
<div className=”font-semibold”>wilczyglod.eu/menu</div>
<div className=”font-semibold”>cateringservice.kutno.pl</div>
</div>
<div>
<div className=”text-sm text-neutral-500″>Godziny</div>
<div className=”font-semibold”>Poniedziałek – Niedziela • do uzupełnienia</div>
</div>
</div>
</div>
</div>
</section>
<footer className=”border-t bg-white mt-8″>
<div className=”mx-auto max-w-7xl px-4 py-6 text-sm text-neutral-600 flex flex-col md:flex-row gap-2 md:items-center md:justify-between”>
<div>© Wilczy Głód • projekt strony pod zamówienia online</div>
<div>Gotowe do rozbudowy o płatności, koszyk, panel admina i integracje</div>
</div>
</footer>
</div>
);
}
