From c4d1d4e08f1caa6d83e396bdcca0b2140afae393 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sun, 14 Jun 2026 15:26:19 +0000
Subject: [PATCH] Bob AI: Populate the newly-created page at
 src/pages/PrenotazioneTav

---
 src/pages/PrenotazioneTavoliPage.tsx | 143 ++++++++++++++++-----------
 1 file changed, 85 insertions(+), 58 deletions(-)

diff --git a/src/pages/PrenotazioneTavoliPage.tsx b/src/pages/PrenotazioneTavoliPage.tsx
index 4cdfc9a..80a9959 100644
--- a/src/pages/PrenotazioneTavoliPage.tsx
+++ b/src/pages/PrenotazioneTavoliPage.tsx
@@ -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>
   );
 }
\ No newline at end of file