Merge version_5 into main

Merge version_5 into main

src/app/page.tsx

@@ -11,7 +11,7 @@ import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import { Award, Home, Users } from "lucide-react";
+import { Award, Home, Users, MessageSquare } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -32,21 +32,15 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "hero"},
-          id: "hero",
-        },
         {
-          name: "Dachdeckerei",
+          name: "Dachdeckerei",          id: "about"},
-          id: "about",
-        },
         {
-          name: "Leistungen",
+          name: "Leistungen",          id: "features"},
-          id: "features",
-        },
         {
-          name: "Kontakt",
+          name: "Kontakt",          id: "contact"},
-          id: "contact",
+        {
-        },
+          name: "Chat-Bot",          id: "chatbot"},
       ]}
       brandName="DACH-BAU-RUF"
     />
@@ -55,61 +49,33 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboard
       background={{
-        variant: "radial-gradient",
+        variant: "radial-gradient"}}
-      }}
       title="Ihr Dachdecker für alle Fälle"
       description="Der Dachdeckermeisterbetrieb DACH-BAU-RUF aus Werneuchen bei Berlin. Tradition kombiniert mit modernster Technik."
       buttons={[
         {
-          text: "Kostenlose Beratung anfordern",
+          text: "Kostenlose Beratung anfordern",          href: "#contact"},
-          href: "#contact",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-working-with-earphones_23-2149343656.jpg"
       mediaAnimation="slide-up"
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/full-shot-smiley-man-working-roof_23-2149343672.jpg",
+          src: "http://img.b2bpic.net/free-photo/full-shot-smiley-man-working-roof_23-2149343672.jpg",          alt: "Full shot smiley man working on roof"},
-          alt: "Full shot smiley man working on roof",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg",
+          src: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg",          alt: "Man walking on the roof"},
-          alt: "Man walking on the roof",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/full-shot-worker-with-helmet-working-roof_23-2149343663.jpg",
+          src: "http://img.b2bpic.net/free-photo/full-shot-worker-with-helmet-working-roof_23-2149343663.jpg",          alt: "Full shot worker with helmet working on roof"},
-          alt: "Full shot worker with helmet working on roof",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-man-working-with-protection-helmet_23-2149343636.jpg",
+          src: "http://img.b2bpic.net/free-photo/medium-shot-man-working-with-protection-helmet_23-2149343636.jpg",          alt: "Medium shot man working with protection helmet"},
-          alt: "Medium shot man working with protection helmet",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-man-reading-schematics_23-2148269801.jpg",
+          src: "http://img.b2bpic.net/free-photo/medium-shot-man-reading-schematics_23-2148269801.jpg",          alt: "Medium shot of man reading schematics"},
-          alt: "Medium shot of man reading schematics",
-        },
       ]}
       marqueeItems={[
-        {
+        { type: "text", text: "Qualitätsarbeit" },
-          type: "text",
+        { type: "text", text: "Meisterbetrieb" },
-          text: "Qualitätsarbeit",
+        { type: "text", text: "Regional verwurzelt" },
-        },
+        { type: "text", text: "Moderne Technik" },
-        {
+        { type: "text", text: "Zuverlässig" },
-          type: "text",
-          text: "Meisterbetrieb",
-        },
-        {
-          type: "text",
-          text: "Regional verwurzelt",
-        },
-        {
-          type: "text",
-          text: "Moderne Technik",
-        },
-        {
-          type: "text",
-          text: "Zuverlässig",
-        },
       ]}
     />
   </div>
@@ -119,9 +85,7 @@ export default function LandingPage() {
       useInvertedBackground={true}
       title="Ihr Fachmann aus der Region"
       description={[
-        "Sie sind auf der Suche nach einen verlässlichen Dachdecker in Ihrer Nähe? Ob bauen, anbauen, renovieren oder sanieren - wir sind für Sie da.",
+        "Sie sind auf der Suche nach einen verlässlichen Dachdecker in Ihrer Nähe? Ob bauen, anbauen, renovieren oder sanieren - wir sind für Sie da.",        "Unser Meisterbetrieb DACH-BAU-RUF verbindet Tradition mit modernster Technik für erstklassige Ergebnisse."]}
-        "Unser Meisterbetrieb DACH-BAU-RUF verbindet Tradition mit modernster Technik für erstklassige Ergebnisse.",
-      ]}
     />
   </div>
 
@@ -132,32 +96,14 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "f1",
+          id: "f1",          title: "Dachdeckerei",          tags: ["Sanierung", "Neubau"],
-          title: "Dachdeckerei",
+          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet-outdoors_23-2149343635.jpg"},
-          tags: [
-            "Sanierung",
-            "Neubau",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet-outdoors_23-2149343635.jpg",
-        },
         {
-          id: "f2",
+          id: "f2",          title: "Zimmererarbeiten",          tags: ["Holzbau", "Dachstuhl"],
-          title: "Zimmererarbeiten",
+          imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-carpenter-using-drill-while-working-with-wood-workshop_637285-11681.jpg"},
-          tags: [
-            "Holzbau",
-            "Dachstuhl",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-carpenter-using-drill-while-working-with-wood-workshop_637285-11681.jpg",
-        },
         {
-          id: "f3",
+          id: "f3",          title: "Dachklempnerei",          tags: ["Blech", "Ableitung"],
-          title: "Dachklempnerei",
+          imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15961.jpg"},
-          tags: [
-            "Blech",
-            "Ableitung",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15961.jpg",
-        },
       ]}
       title="Unsere Leistungen"
       description="Qualität, Zuverlässigkeit und handwerkliches Können in Brandenburg und Berlin."
@@ -170,43 +116,34 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       metrics={[
-        {
+        { id: "m1", title: "Jahre Meisterbetrieb", value: "15+", icon: Award },
-          id: "m1",
+        { id: "m2", title: "Wohnbauprojekte", value: "500+", icon: Home },
-          title: "Jahre Meisterbetrieb",
+        { id: "m3", title: "Zufriedene Kunden", value: "1000+", icon: Users },
-          value: "15+",
-          icon: Award,
-        },
-        {
-          id: "m2",
-          title: "Wohnbauprojekte",
-          value: "500+",
-          icon: Home,
-        },
-        {
-          id: "m3",
-          title: "Zufriedene Kunden",
-          value: "1000+",
-          icon: Users,
-        },
       ]}
       title="Unsere Erfahrung in Zahlen"
       description="Wir stehen für langjährige Expertise und zufriedene Bauherren."
     />
   </div>
 
+  <div id="chatbot" data-section="chatbot">
+    <MetricCardThree
+      animationType="blur-reveal"
+      textboxLayout="split"
+      title="Unser Digitaler Assistent"
+      description="Haben Sie Fragen zu unseren Leistungen oder benötigen Sie eine schnelle Ersteinschätzung? Unser Chat-Bot steht Ihnen rund um die Uhr zur Verfügung."
+      metrics={[
+        { id: "c1", title: "Chat starten", value: "Jetzt", icon: MessageSquare }
+      ]}
+      useInvertedBackground={false}
+    />
+  </div>
+
   <div id="socialproof" data-section="socialproof">
       <SocialProofOne
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "Satteldächer",
+        "Satteldächer",        "Walmdächer",        "Flachdächer",        "Industrieklettern",        "Höhenarbeiten",        "Wartung",        "Reparatur"]}
-        "Walmdächer",
-        "Flachdächer",
-        "Industrieklettern",
-        "Höhenarbeiten",
-        "Wartung",
-        "Reparatur",
-      ]}
       title="Unsere Expertise"
       description="Wir bieten Lösungen für jede Anforderung und jeden Dachtyp."
     />
@@ -218,20 +155,11 @@ export default function LandingPage() {
       useInvertedBackground={true}
       faqs={[
         {
-          id: "q1",
+          id: "q1",          title: "Warum Dach-Bau-Ruf?",          content: "Wir verbinden langjährige Handwerkstradition mit modernsten Arbeitstechniken wie seilunterstützter Höhenarbeit."},
-          title: "Warum Dach-Bau-Ruf?",
-          content: "Wir verbinden langjährige Handwerkstradition mit modernsten Arbeitstechniken wie seilunterstützter Höhenarbeit.",
-        },
         {
-          id: "q2",
+          id: "q2",          title: "Wo sind wir tätig?",          content: "Unser Fachbetrieb ist in der gesamten Region Berlin und Brandenburg für Sie im Einsatz."},
-          title: "Wo sind wir tätig?",
-          content: "Unser Fachbetrieb ist in der gesamten Region Berlin und Brandenburg für Sie im Einsatz.",
-        },
         {
-          id: "q3",
+          id: "q3",          title: "Was ist die seilunterstützte Technik?",          content: "Es ist die gerüstlose Alternative, um auch in schwer zugänglichen Höhen schnell und flexibel Reparaturen durchzuführen."},
-          title: "Was ist die seilunterstützte Technik?",
-          content: "Es ist die gerüstlose Alternative, um auch in schwer zugänglichen Höhen schnell und flexibel Reparaturen durchzuführen.",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/male-coworkers-office-with-lunch_273609-6313.jpg"
       mediaAnimation="slide-up"
@@ -247,23 +175,11 @@ export default function LandingPage() {
       title="Nehmen Sie Kontakt zu uns auf"
       description="Wir bieten Ihnen maßgeschneiderte Lösungen für jede Herausforderung. Kostenlose Beratung anfordern."
       inputs={[
-        {
+        { name: "name", type: "text", placeholder: "Ihr Name", required: true },
-          name: "name",
+        { name: "email", type: "email", placeholder: "Ihre E-Mail", required: true },
-          type: "text",
-          placeholder: "Ihr Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Ihre E-Mail",
-          required: true,
-        },
       ]}
       textarea={{
-        name: "message",
+        name: "message",        placeholder: "Wie können wir Ihnen helfen?",        required: true,
-        placeholder: "Wie können wir Ihnen helfen?",
-        required: true,
       }}
       imageSrc="http://img.b2bpic.net/free-photo/can-you-make-us-photography_329181-3061.jpg"
     />
@@ -272,17 +188,11 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="DACH-BAU-RUF"
-      leftLink={{
+      leftLink={{ text: "Impressum", href: "#" }}
-        text: "Impressum",
+      rightLink={{ text: "Datenschutz", href: "#" }}
-        href: "#",
-      }}
-      rightLink={{
-        text: "Datenschutz",
-        href: "#",
-      }}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5faff;
+  --background: #0a0a0a;
-  --card: #f1f8ff;
+  --card: #1a1a1a;
-  --foreground: #001122;
+  --foreground: #f5fffae6;
-  --primary-cta: #15479c;
+  --primary-cta: #80da9b;
-  --primary-cta-text: #f5faff;
+  --primary-cta-text: #0a0a0a;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #1a1a1a;
-  --secondary-cta-text: #001122;
+  --secondary-cta-text: #f5fffae6;
-  --accent: #a8cce8;
+  --accent: #737373;
-  --background-accent: #7ba3cf;
+  --background-accent: #737373;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);