Bob AI: Populate the newly-created page at src/pages/PrenotazioneTav
This commit is contained in:
kudinDmitriyUp
@@ -1,71 +1,98 @@
|
||||
import React from "react";
|
||||
import { routes } from "@/routes";
|
||||
import NavbarCentered from "@/components/ui/NavbarCentered";
|
||||
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
||||
import FeaturesDetailedSteps from "@/components/sections/features/FeaturesDetailedSteps";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterMinimal from "@/components/sections/footer/FooterMinimal";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
export default function PrenotazioneTavoliPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<NavbarCentered
|
||||
logo="RistoSync"
|
||||
navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
|
||||
ctaButton={{ text: "Prenota Ora", href: "/prenotazione-tavoli" }}
|
||||
/>
|
||||
<div className="min-h-svh bg-background text-foreground flex flex-col">
|
||||
|
||||
<main>
|
||||
<HeroSplit
|
||||
tag="Prenotazioni Semplificate"
|
||||
title="Il Tuo Tavolo, in Pochi Clic"
|
||||
description="Prenota il tuo tavolo online in tempo reale. Il nostro sistema è perfettamente sincronizzato con le prenotazioni telefoniche per garantirti sempre la disponibilità senza sorprese."
|
||||
primaryButton={{ text: "Prenota Ora", href: "#prenota" }}
|
||||
secondaryButton={{ text: "Chiamaci", href: "tel:+39000000000" }}
|
||||
imageSrc="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80"
|
||||
/>
|
||||
<main className="flex-grow px-4">
|
||||
<div className="max-w-content-width mx-auto bg-card p-8 rounded-theme border border-border shadow-sm">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">Prenota un Tavolo</h1>
|
||||
<p className="text-lg opacity-80">
|
||||
Seleziona data e ora per la tua prenotazione. Il nostro sistema online è sincronizzato in tempo reale con le prenotazioni ricevute tramite telefono, garantendoti sempre la disponibilità effettiva.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<FeaturesDetailedSteps
|
||||
tag="Come Funziona"
|
||||
title="Sincronizzazione Perfetta"
|
||||
description="Gestiamo le tue prenotazioni in modo intelligente, unendo la comodità del digitale all'affidabilità del tradizionale."
|
||||
steps={[
|
||||
{
|
||||
tag: "01",
|
||||
title: "Scegli Data e Ora",
|
||||
subtitle: "Online 24/7",
|
||||
description: "Seleziona il momento perfetto per la tua cena direttamente dal nostro sito web, visualizzando solo gli orari realmente disponibili."
|
||||
},
|
||||
{
|
||||
tag: "02",
|
||||
title: "Sincronizzazione in Tempo Reale",
|
||||
subtitle: "Nessun Overbooking",
|
||||
description: "Il sistema aggiorna istantaneamente le disponibilità, bloccando i tavoli sia che la prenotazione avvenga online sia tramite chiamata al locale."
|
||||
},
|
||||
{
|
||||
tag: "03",
|
||||
title: "Conferma Immediata",
|
||||
subtitle: "Tavolo Riservato",
|
||||
description: "Ricevi subito la conferma della tua prenotazione. Il tuo tavolo ti aspetterà al tuo arrivo."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
<div id="prenota">
|
||||
<ContactCenter
|
||||
tag="Prenota"
|
||||
title="Richiedi un Tavolo"
|
||||
description="Inserisci la tua email per accedere al calendario delle disponibilità e completare la tua prenotazione in pochi secondi."
|
||||
inputPlaceholder="la.tua@email.com"
|
||||
buttonText="Inizia Prenotazione"
|
||||
/>
|
||||
<form className="grid grid-cols-1 md:grid-cols-2 gap-4" onSubmit={(e) => e.preventDefault()}>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="date" className="text-sm font-medium">Data</label>
|
||||
<input
|
||||
type="date"
|
||||
id="date"
|
||||
className="w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground focus:ring-2 focus:ring-primary-cta outline-none"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="time" className="text-sm font-medium">Ora</label>
|
||||
<input
|
||||
type="time"
|
||||
id="time"
|
||||
className="w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground focus:ring-2 focus:ring-primary-cta outline-none"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="guests" className="text-sm font-medium">Numero di Persone</label>
|
||||
<select
|
||||
id="guests"
|
||||
className="w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground focus:ring-2 focus:ring-primary-cta outline-none"
|
||||
>
|
||||
{[...Array(10)].map((_, i) => (
|
||||
<option key={i} value={i + 1}>{i + 1} {i === 0 ? 'Persona' : 'Persone'}</option>
|
||||
))}
|
||||
<option value="more">Più di 10 persone (contattaci)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="name" className="text-sm font-medium">Nome e Cognome</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
placeholder="Mario Rossi"
|
||||
className="w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground focus:ring-2 focus:ring-primary-cta outline-none"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="phone" className="text-sm font-medium">Telefono</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
placeholder="+39 000 000 0000"
|
||||
className="w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground focus:ring-2 focus:ring-primary-cta outline-none"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="email" className="text-sm font-medium">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
placeholder="mario.rossi@email.com"
|
||||
className="w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground focus:ring-2 focus:ring-primary-cta outline-none"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 md:col-span-2">
|
||||
<label htmlFor="notes" className="text-sm font-medium">Note o Richieste Speciali</label>
|
||||
<textarea
|
||||
id="notes"
|
||||
rows={3}
|
||||
placeholder="Allergie, intolleranze, seggiolone..."
|
||||
className="w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground focus:ring-2 focus:ring-primary-cta outline-none resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<Button text="Conferma Prenotazione" variant="primary" className="w-full mt-6" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<FooterMinimal
|
||||
brand="RistoSync"
|
||||
copyright="© 2024 RistoSync. Tutti i diritti riservati."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user