Update src/app/upgrade-plan/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -32,26 +32,12 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "Products",
-          id: "products",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Startseite", id: "hero" },
+        { name: "Über uns", id: "about" },
+        { name: "Leistungen", id: "features" },
+        { name: "Produkte", id: "products" },
+        { name: "Kontakt", id: "contact" },
+        { name: "Preise", id: "/upgrade-plan" },
       ]}
       brandName="Oesterle & Haug & Co."
     />
@@ -59,68 +45,30 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboard
-      background={{
-        variant: "radial-gradient",
-      }}
+      background={{ variant: "radial-gradient" }}
       title="Sicherheit, die Sie schützt."
       description="Oesterle & Haug & Co. – Ihr verlässlicher Partner für professionelle Einbruchsicherungen und moderne Sicherheitstechnik seit Generationen."
       buttons={[
-        {
-          text: "Jetzt beraten lassen",
-          href: "#contact",
-        },
-        {
-          text: "Mehr erfahren",
-          href: "#about",
-        },
+        { text: "Jetzt beraten lassen", href: "#contact" },
+        { text: "Mehr erfahren", href: "#about" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/hacker-with-laptop_23-2147985343.jpg"
       imageAlt="High-security lock mechanism"
       mediaAnimation="slide-up"
       avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/woman-s-eye-with-smart-contact-lens-biometric-secu-technology-concept_53876-97883.jpg",
-          alt: "Expert technician 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-smartphone-atm_23-2148264023.jpg",
-          alt: "Expert technician 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/thieves-wear-black-hats-pry-windows-steal-things_1150-15146.jpg",
-          alt: "Expert technician 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/protection-surveillance-safety-privacy-policy-concept_53876-128098.jpg",
-          alt: "Expert technician 4",
-        },
-        {
-          src: "gen-stock-rsv-4",
-          alt: "Expert technician 5",
-        },
+        { src: "http://img.b2bpic.net/free-photo/woman-s-eye-with-smart-contact-lens-biometric-secu-technology-concept_53876-97883.jpg", alt: "Expert technician 1" },
+        { src: "http://img.b2bpic.net/free-photo/close-up-smartphone-atm_23-2148264023.jpg", alt: "Expert technician 2" },
+        { src: "http://img.b2bpic.net/free-photo/thieves-wear-black-hats-pry-windows-steal-things_1150-15146.jpg", alt: "Expert technician 3" },
+        { src: "http://img.b2bpic.net/free-photo/protection-surveillance-safety-privacy-policy-concept_53876-128098.jpg", alt: "Expert technician 4" },
+        { src: "gen-stock-rsv-4", alt: "Expert technician 5" },
       ]}
       avatarText="Über 50 Jahre Experten-Erfahrung"
       marqueeItems={[
-        {
-          type: "text",
-          text: "Einbruchschutz",
-        },
-        {
-          type: "text",
-          text: "Smart-Home Sicherheit",
-        },
-        {
-          type: "text",
-          text: "Biometrische Zutrittskontrolle",
-        },
-        {
-          type: "text",
-          text: "24/7 Notdienst",
-        },
-        {
-          type: "text",
-          text: "Zertifizierte Sicherheitstechnik",
-        },
+        { type: "text", text: "Einbruchschutz" },
+        { type: "text", text: "Smart-Home Sicherheit" },
+        { type: "text", text: "Biometrische Zutrittskontrolle" },
+        { type: "text", text: "24/7 Notdienst" },
+        { type: "text", text: "Zertifizierte Sicherheitstechnik" },
       ]}
     />
   </div>
@@ -138,42 +86,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          id: "f1",
-          title: "Mechanischer Schutz",
-          subtitle: "Hochwertige Verriegelungen",
-          category: "Mechanik",
-          value: "Sicher",
-          buttons: [
-            {
-              text: "Details",
-            },
-          ],
-        },
-        {
-          id: "f2",
-          title: "Elektronische Systeme",
-          subtitle: "Biometrie & Smarthome",
-          category: "Technik",
-          value: "Smart",
-          buttons: [
-            {
-              text: "Details",
-            },
-          ],
-        },
-        {
-          id: "f3",
-          title: "Überwachung",
-          subtitle: "Professionelle Kameras",
-          category: "Service",
-          value: "24/7",
-          buttons: [
-            {
-              text: "Details",
-            },
-          ],
-        },
+        { id: "f1", title: "Mechanischer Schutz", subtitle: "Hochwertige Verriegelungen", category: "Mechanik", value: "Sicher", buttons: [{ text: "Details" }] },
+        { id: "f2", title: "Elektronische Systeme", subtitle: "Biometrie & Smarthome", category: "Technik", value: "Smart", buttons: [{ text: "Details" }] },
+        { id: "f3", title: "Überwachung", subtitle: "Professionelle Kameras", category: "Service", value: "24/7", buttons: [{ text: "Details" }] },
       ]}
       title="Unsere Sicherheitstechnologien"
       description="Wir kombinieren langjährige Erfahrung mit modernster Technik für Ihren maximalen Schutz."
@@ -187,42 +102,12 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={true}
       products={[
-        {
-          id: "p1",
-          name: "Sicherheitsschloss",
-          price: "149€",
-          imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-stairs-japanese-culture_23-2149301065.jpg",
-        },
-        {
-          id: "p2",
-          name: "Fenster-Sicherung",
-          price: "89€",
-          imageSrc: "http://img.b2bpic.net/free-photo/girl-taking-selfie-near-window_23-2147833814.jpg",
-        },
-        {
-          id: "p3",
-          name: "Sicherheitssafe",
-          price: "299€",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-hand-holding-cctv-smartphone-insurance_493343-30007.jpg",
-        },
-        {
-          id: "p4",
-          name: "Türsicherungs-Kette",
-          price: "45€",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-locked-padlock_53876-42537.jpg",
-        },
-        {
-          id: "p5",
-          name: "Video-Türsprechanlage",
-          price: "199€",
-          imageSrc: "http://img.b2bpic.net/free-photo/cute-woman-using-house-videophone-indoor_1398-1281.jpg",
-        },
-        {
-          id: "p6",
-          name: "Schwerlastriegel",
-          price: "75€",
-          imageSrc: "http://img.b2bpic.net/free-photo/antique-door-retro-style_1232-3012.jpg",
-        },
+        { id: "p1", name: "Sicherheitsschloss", price: "149€", imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-stairs-japanese-culture_23-2149301065.jpg" },
+        { id: "p2", name: "Fenster-Sicherung", price: "89€", imageSrc: "http://img.b2bpic.net/free-photo/girl-taking-selfie-near-window_23-2147833814.jpg" },
+        { id: "p3", name: "Sicherheitssafe", price: "299€", imageSrc: "http://img.b2bpic.net/free-photo/woman-hand-holding-cctv-smartphone-insurance_493343-30007.jpg" },
+        { id: "p4", name: "Türsicherungs-Kette", price: "45€", imageSrc: "http://img.b2bpic.net/free-photo/closeup-locked-padlock_53876-42537.jpg" },
+        { id: "p5", name: "Video-Türsprechanlage", price: "199€", imageSrc: "http://img.b2bpic.net/free-photo/cute-woman-using-house-videophone-indoor_1398-1281.jpg" },
+        { id: "p6", name: "Schwerlastriegel", price: "75€", imageSrc: "http://img.b2bpic.net/free-photo/antique-door-retro-style_1232-3012.jpg" },
       ]}
       title="Unsere Produkte"
       description="Qualität für Ihre Sicherheit."
@@ -235,27 +120,12 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",
-          icon: Shield,
-          title: "Jahre Erfahrung",
-          value: "50+",
-        },
-        {
-          id: "m2",
-          icon: CheckCircle,
-          title: "Installationen",
-          value: "10k+",
-        },
-        {
-          id: "m3",
-          icon: Users,
-          title: "Zufriedene Kunden",
-          value: "5k+",
-        },
+        { id: "m1", icon: Shield, title: "Jahre Erfahrung", value: "50+" },
+        { id: "m2", icon: CheckCircle, title: "Installationen", value: "10k+" },
+        { id: "m3", icon: Users, title: "Zufriedene Kunden", value: "5k+" },
       ]}
-      title="Zahlen sprechen für uns"
-      description="Erfahrung, auf die Sie bauen können."
+      title="Vertrauenswürdige Kennzahlen"
+      description="Erfahrung und Kompetenz, auf die Sie bauen können."
     />
   </div>
 
@@ -265,50 +135,13 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       testimonials={[
-        {
-          id: "t1",
-          name: "Sarah Müller",
-          handle: "@sarah",
-          testimonial: "Perfekte Beratung und schnelle Montage. Sehr sicher!",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-holding-house-model-with-both-hands-white-t-shirt-zip-front-black-hoodie-looking-serious-front-view_176474-45412.jpg",
-        },
-        {
-          id: "t2",
-          name: "Thomas Weber",
-          handle: "@thomas",
-          testimonial: "Oesterle & Haug ist mein Partner für alle Sicherheitsthemen.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-smiling-posing-with-crossed-arms-office_176420-913.jpg",
-        },
-        {
-          id: "t3",
-          name: "Familie Schneider",
-          handle: "@schneider",
-          testimonial: "Wir fühlen uns jetzt deutlich sicherer zuhause.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/christmas-concept-with-young-parents_23-2147724423.jpg",
-        },
-        {
-          id: "t4",
-          name: "Hildegard Kraus",
-          handle: "@hilde",
-          testimonial: "Sehr kompetent und absolut zuverlässig.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/older-couple-embraced-outdoors-city_23-2149007079.jpg",
-        },
-        {
-          id: "t5",
-          name: "Michael B.",
-          handle: "@michael",
-          testimonial: "Hervorragendes Preis-Leistungs-Verhältnis.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/concentrated-bearded-man-sitting-pillow-using-tablet_1262-17832.jpg",
-        },
+        { id: "t1", name: "Sarah Müller", handle: "@sarah", testimonial: "Perfekte Beratung und schnelle Montage. Wir fühlen uns absolut sicher!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-man-holding-house-model-with-both-hands-white-t-shirt-zip-front-black-hoodie-looking-serious-front-view_176474-45412.jpg" },
+        { id: "t2", name: "Thomas Weber", handle: "@thomas", testimonial: "Oesterle & Haug ist mein Partner für alle Sicherheitsthemen. Sehr professionell.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-smiling-posing-with-crossed-arms-office_176420-913.jpg" },
+        { id: "t3", name: "Familie Schneider", handle: "@schneider", testimonial: "Wir sind sehr zufrieden mit der neuen Alarmanlage. Top Service.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/christmas-concept-with-young-parents_23-2147724423.jpg" },
       ]}
       showRating={true}
-      title="Kundenstimmen"
-      description="Was unsere Kunden über uns sagen."
+      title="Kundenfeedback"
+      description="Das sagen unsere Kunden über unsere Sicherheitslösungen."
     />
   </div>
 
@@ -316,23 +149,12 @@ export default function LandingPage() {
       <FaqSplitText
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "q1",
-          title: "Bieten Sie auch Notdienste an?",
-          content: "Ja, wir bieten einen 24/7 Sicherheits-Notdienst an.",
-        },
-        {
-          id: "q2",
-          title: "Wie schnell montieren Sie?",
-          content: "Nach Beratung meist innerhalb von 48 Stunden.",
-        },
-        {
-          id: "q3",
-          title: "Sind die Produkte zertifiziert?",
-          content: "Alle unsere Produkte entsprechen deutschen Sicherheitsstandards.",
-        },
+        { id: "q1", title: "Bieten Sie auch Notdienste an?", content: "Ja, wir bieten einen 24/7 Sicherheits-Notdienst für unsere Kunden an." },
+        { id: "q2", title: "Wie schnell montieren Sie?", content: "Nach einem Vor-Ort-Termin erfolgt die Montage in der Regel innerhalb von 48 Stunden." },
+        { id: "q3", title: "Sind die Produkte zertifiziert?", content: "Selbstverständlich. Alle unsere Produkte entsprechen den geltenden deutschen Sicherheitsnormen (DIN/VdS)." },
       ]}
-      sideTitle="Fragen?"
+      sideTitle="Häufige Fragen"
+      sideDescription="Hier finden Sie Antworten auf die wichtigsten Fragen zur Sicherheitstechnik."
       faqsAnimation="slide-up"
     />
   </div>
@@ -340,17 +162,13 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={true}
-      background={{
-        variant: "radial-gradient",
-      }}
+      background={{ variant: "radial-gradient" }}
       tag="Kontakt"
-      title="Sichern Sie Ihr Heim heute."
-      description="Vereinbaren Sie noch heute ein unverbindliches Beratungsgespräch bei Ihnen vor Ort."
+      title="Sprechen Sie mit unseren Experten"
+      description="Gerne beraten wir Sie unverbindlich zu Ihrem persönlichen Schutzkonzept."
       buttons={[
-        {
-          text: "Beratung anfragen",
-          href: "mailto:info@oesterle-haug.de",
-        },
+        { text: "Jetzt Nachricht schreiben", href: "mailto:info@oesterle-haug.de" },
+        { text: "Direkt anrufen", href: "tel:+49711123456" }
       ]}
     />
   </div>
@@ -358,38 +176,34 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterMedia
       imageSrc="http://img.b2bpic.net/free-photo/close-up-perforated-metal-sheet-with-circular-holes-rust_9975-133006.jpg"
-      logoText="Oesterle & Haug & Co. Einbruchsicherungen GmbH"
+      logoText="Oesterle & Haug & Co."
+      copyrightText="© 2025 Oesterle & Haug & Co. Einbruchsicherungen GmbH. Alle Rechte vorbehalten."
       columns={[
         {
-          title: "Unternehmen",
-          items: [
-            {
-              label: "Über uns",
-              href: "#about",
-            },
-            {
-              label: "Produkte",
-              href: "#products",
-            },
+          title: "Unternehmen", items: [
+            { label: "Über uns", href: "#about" },
+            { label: "Karriere", href: "#" },
+            { label: "Kontakt", href: "#contact" }
           ],
         },
         {
-          title: "Rechtliches",
-          items: [
-            {
-              label: "Impressum",
-              href: "#",
-            },
-            {
-              label: "Datenschutz",
-              href: "#",
-            },
+          title: "Rechtliches", items: [
+            { label: "Impressum", href: "/impressum" },
+            { label: "Datenschutz", href: "/datenschutz" },
+            { label: "AGB", href: "/agb" }
           ],
         },
+        {
+          title: "Kontakt", items: [
+            { label: "Sicherheitsstraße 1", href: "#" },
+            { label: "70173 Stuttgart", href: "#" },
+            { label: "Tel: 0711 123456", href: "tel:+49711123456" }
+          ]
+        }
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/upgrade-plan/page.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { CheckCircle } from "lucide-react";
+
+export default function UpgradePlanPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="mediumLarge"
+        sizing="mediumLargeSizeMediumTitles"
+        background="none"
+        cardStyle="outline"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Startseite", id: "/" },
+              { name: "Preise", id: "/upgrade-plan" }
+            ]}
+            brandName="Oesterle & Haug & Co."
+          />
+        </div>
+
+        <div id="pricing" data-section="pricing">
+          <PricingCardEight
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            title="Wählen Sie Ihren Schutz"
+            description="Sicherheit in verschiedenen Stufen – passend zu Ihren Bedürfnissen."
+            plans={[
+              {
+                id: "basic",                badge: "Basis",                price: "0€",                subtitle: "Grundlegender Schutz für Einsteiger.",                features: ["Einbruchschutz-Check", "Basis-Beratung", "24/7 Notfall-Hotline"],
+                buttons: [{ text: "Jetzt starten", href: "#contact" }]
+              },
+              {
+                id: "pro",                badge: "Pro",                badgeIcon: CheckCircle,
+                price: "49€",                subtitle: "Umfassende Sicherheit für Ihr Zuhause.",                features: ["Alles aus Basis", "Smarthome-Integration", "Video-Überwachung"],
+                buttons: [{ text: "Jetzt upgraden", href: "#contact" }]
+              }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            logoText="Oesterle & Haug & Co."
+            columns={[
+              { title: "Unternehmen", items: [{ label: "Kontakt", href: "/" }] }
+            ]}
+            videoSrc="https://player.vimeo.com/external/494057866.sd.mp4?s=d4538e1467474a2754641617498c474005c21966&profile_id=165"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}