Update src/app/booking/page.tsx

src/app/booking/page.tsx

@@ -2,10 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import { Mail } from 'lucide-react';
+import ContactForm from "@/components/form/ContactForm";
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { CalendarCheck } from 'lucide-react';
+
+export default function BookingPage() {
+  const handleSubmit = (email: string) => {
+    console.log("Booking request for:", email);
+    alert("Vielen Dank für Ihre Anfrage! Wir melden uns in Kürze bei Ihnen.");
+  };
 
-export default function OnlineBookingPage() {
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -24,9 +30,9 @@ export default function OnlineBookingPage() {
           brandName="Zahnarzt Dr. Kurt Fleck und Dr. S.H. Höhn-Fleck"
           navItems={[
             { name: "Startseite", id: "/" },
-            { name: "Leistungen", id: "/#services" },
-            { name: "Über Uns", id: "/#about" },
-            { name: "Kontakt", id: "/#contact" },
+            { name: "Leistungen", id: "services" },
+            { name: "Über Uns", id: "about" },
+            { name: "Kontakt", id: "contact" },
             { name: "Online Termin", id: "/booking" }
           ]}
           button={{
@@ -35,23 +41,53 @@ export default function OnlineBookingPage() {
         />
       </div>
 
-      <div id="booking-form" data-section="booking-form">
-        <ContactSplit
-          tag="Terminbuchung"
-          tagIcon={Mail}
-          title="Buchen Sie jetzt Ihren Zahnarzttermin online!"
-          description="Wählen Sie Ihren Wunschtermin bequem von zu Hause aus. Wir freuen uns darauf, Sie in unserer Praxis begrüßen zu dürfen."
-          background={{ variant: "plain" }}
-          useInvertedBackground={true}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/online-booking-system.jpg"
-          imageAlt="Online-Terminbuchungssystem auf einem Tablet"
-          mediaPosition="left"
-          mediaAnimation="slide-up"
+      <div id="booking-form" data-section="booking-form" className="py-20">
+        <ContactForm
+          tag="Termin vereinbaren"
+          tagIcon={CalendarCheck}
+          title="Buchen Sie Ihren Termin online"
+          description="Nutzen Sie unser praktisches Online-Formular, um Ihren Wunschtermin schnell und unkompliziert zu reservieren. Wir freuen uns auf Sie!"
           inputPlaceholder="Ihre E-Mail-Adresse"
-          buttonText="Terminanfrage senden"
-          termsText="Mit dem Absenden Ihrer Terminanfrage stimmen Sie unserer Datenschutzerklärung zu. Wir werden uns in Kürze mit Ihnen in Verbindung setzen, um Ihren Termin zu bestätigen."
+          buttonText="Termin anfragen"
+          termsText="Mit dem Absenden stimmen Sie unserer Datenschutzerklärung zu."
+          onSubmit={handleSubmit}
+          centered={true}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Zahnarzt Dr. Kurt Fleck und Dr. S.H. Höhn-Fleck"
+          copyrightText="© 2024 Zahnarzt Dr. Kurt Fleck und Dr. S.H. Höhn-Fleck | Alle Rechte vorbehalten."
+          columns={[
+            {
+              title: "Leistungen",              items: [
+                { label: "Prophylaxe", href: "#services" },
+                { label: "Implantologie", href: "#services" },
+                { label: "Ästhetische Zahnheilkunde", href: "#services" },
+                { label: "Wurzelkanalbehandlung", href: "#services" },
+                { label: "Online Termin", href: "/booking" }
+              ]
+            },
+            {
+              title: "Praxis",              items: [
+                { label: "Über Uns", href: "#about" },
+                { label: "Unser Team", href: "#testimonials" },
+                { label: "Praxisausstattung", href: "#features" },
+                { label: "Kontakt", href: "#contact" }
+              ]
+            },
+            {
+              title: "Folgen Sie uns",              items: [
+                { label: "Instagram", href: "https://instagram.com" },
+                { label: "Facebook", href: "https://facebook.com" },
+                { label: "Google Reviews", href: "https://google.com" },
+                { label: "Anfahrt", href: "#contact" }
+              ]
+            }
+          ]}
         />
       </div>
     </ThemeProvider>
   );
-}
+}