Add src/app/kontakt-buchung/page.tsx

2026-03-06 19:03:21 +00:00
parent 00286a6473
commit 2d3826be6c
1 changed files with 145 additions and 0 deletions
--- a/src/app/kontakt-buchung/page.tsx
+++ b/src/app/kontakt-buchung/page.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { Mail } from "lucide-react";
+
+export default function KontaktBuchungPage() {
+  const navItems = [
+    { name: "Startseite", id: "/" },
+    { name: "Ferienwohnungen", id: "/" },
+    { name: "Lage", id: "/" },
+    { name: "Aktivitäten", id: "/" },
+    { name: "Galerie", id: "/galerie" },
+    { name: "Kontakt", id: "/kontakt-buchung" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "StrandQuartier",      items: [
+        { label: "Über uns", href: "/" },
+        { label: "Ferienwohnungen", href: "/" },
+        { label: "Galerie", href: "/galerie" },
+      ],
+    },
+    {
+      title: "Informationen",      items: [
+        { label: "Lage", href: "/" },
+        { label: "Aktivitäten", href: "/" },
+        { label: "Kontakt", href: "/kontakt-buchung" },
+      ],
+    },
+    {
+      title: "Kontakt",      items: [
+        { label: "Parkweg 2b, 18230 Rerik", href: "#" },
+        { label: "info@strandquartier-rerik.de", href: "mailto:info@strandquartier-rerik.de" },
+        { label: "Datenschutz", href: "#" },
+      ],
+    },
+  ];
+
+  const handleContactSubmit = (email: string) => {
+    console.log("Contact form submitted with email:", email);
+    // In a real application, send this to a backend service
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="fluid"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple brandName="StrandQuartier Rerik" navItems={navItems} />
+      </div>
+
+      <div id="contact" data-section="contact" className="pt-20">
+        <div className="w-full">
+          {/* Contact Form Section */}
+          <ContactSplit
+            tag="Kontakt & Buchung"
+            title="Wir freuen uns auf Ihre Anfrage"
+            description="Kontaktieren Sie uns jetzt, um Ihre perfekte Unterkunft an der Ostsee zu buchen oder weitere Informationen zu erhalten. Unser Team antwortet schnell und persönlich auf alle Anfragen."
+            useInvertedBackground={false}
+            imageSrc="http://img.b2bpic.net/free-photo/breathtaking-scenery-wooden-sticks-middle-ocean-colorful-sky_181624-37504.jpg"
+            imageAlt="Ostsee Strand"
+            mediaAnimation="slide-up"
+            mediaPosition="right"
+            inputPlaceholder="Ihre E-Mail-Adresse"
+            buttonText="Anfrage senden"
+            termsText="Mit dem Absenden akzeptieren Sie unsere Datenschutzerklärung. Wir werden Ihnen schnellstmöglich antworten."
+            background={{ variant: "sparkles-gradient" }}
+            onSubmit={handleContactSubmit}
+          />
+        </div>
+
+        {/* Additional Contact Information Section */}
+        <div className="w-full px-4 sm:px-6 md:px-8 py-16 md:py-24">
+          <div className="mx-auto w-full max-w-content-width">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
+              {/* Contact Info */}
+              <div className="flex flex-col items-start">
+                <h3 className="text-lg md:text-xl font-semibold mb-4">Adresse</h3>
+                <p className="text-sm md:text-base opacity-80 leading-relaxed">
+                  StrandQuartier Rerik<br />
+                  Parkweg 2b<br />
+                  18230 Rerik<br />
+                  Deutschland
+                </p>
+              </div>
+
+              {/* Email */}
+              <div className="flex flex-col items-start">
+                <h3 className="text-lg md:text-xl font-semibold mb-4">E-Mail</h3>
+                <a
+                  href="mailto:info@strandquartier-rerik.de"
+                  className="text-sm md:text-base opacity-80 hover:opacity-100 transition-opacity"
+                >
+                  info@strandquartier-rerik.de
+                </a>
+              </div>
+
+              {/* Phone */}
+              <div className="flex flex-col items-start">
+                <h3 className="text-lg md:text-xl font-semibold mb-4">Telefon</h3>
+                <p className="text-sm md:text-base opacity-80">+49 (0) 38296 - 2121</p>
+              </div>
+            </div>
+
+            {/* Embedded Map */}
+            <div className="mt-16 md:mt-24">
+              <h2 className="text-2xl md:text-4xl font-bold mb-8">Anfahrt</h2>
+              <div className="w-full h-96 md:h-full rounded-2xl overflow-hidden">
+                <iframe
+                  width="100%"
+                  height="400"
+                  style={{ border: 0 }}
+                  loading="lazy"
+                  allowFullScreen
+                  referrerPolicy="no-referrer-when-downgrade"
+                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2311.8847159876003!2d11.936!3d54.175!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b39e8f1234567%3A0x1234567890abcdef!2sRerik%2C%20Germany!5e0!3m2!1sen!2sde!4v1234567890"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={footerColumns}
+          copyrightText="© 2025 StrandQuartier Rerik | Alle Rechte vorbehalten"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}