From 3eeea27b92bebfcbfcfe15baf3324a5e2fa6e951 Mon Sep 17 00:00:00 2001 From: MBO-Tech-IT Date: Tue, 2 Jun 2026 20:35:23 +0200 Subject: [PATCH] feat: Hero, About, Contact components accept CMS props Co-Authored-By: Claude Sonnet 4.6 --- components/About.tsx | 37 ++++++++++---- components/Contact.tsx | 110 ++++++++++++++++++++++++++--------------- components/Hero.tsx | 67 +++++++++++++++++++------ 3 files changed, 149 insertions(+), 65 deletions(-) diff --git a/components/About.tsx b/components/About.tsx index f6063f9..2398196 100644 --- a/components/About.tsx +++ b/components/About.tsx @@ -19,7 +19,19 @@ const highlights = [ }, ]; -export default function About() { +interface AboutProps { + eyebrowText?: string; + absatz1?: string; + absatz2?: string; + stats?: { wert: string; label: string }[]; +} + +export default function About({ + eyebrowText = "Über uns", + absatz1 = "MBO-Tech-IT steht für über 30 Jahre IT-Erfahrung — angefangen bei der einfachen Hardware-Wartung, über den Aufbau großer Client-Server-Netzwerke, bis hin zu mehr als 20 Jahren Spezialisierung in der IT-Security.", + absatz2 = "Heute liegt der Fokus auf modernen Container-Technologien, Cloud-nativer Infrastruktur und Virtualisierung. Dieses breite Fundament ermöglicht es, Lösungen zu entwickeln, die nicht nur funktionieren — sondern auch sicher und langfristig tragfähig sind.", + stats, +}: AboutProps = {}) { return (
@@ -29,23 +41,17 @@ export default function About() { {/* Left: Text */}
- Über uns + {eyebrowText}

IT-Expertise,{" "} die Sie weiterbringt

- MBO-Tech-IT steht für über 30 Jahre IT-Erfahrung — - angefangen bei der einfachen Hardware-Wartung, über den Aufbau großer - Client-Server-Netzwerke, bis hin zu mehr als 20 Jahren Spezialisierung - in der IT-Security. + {absatz1}

- Heute liegt der Fokus auf modernen Container-Technologien, Cloud-nativer - Infrastruktur und Virtualisierung. Dieses breite Fundament ermöglicht es, - Lösungen zu entwickeln, die nicht nur funktionieren — sondern auch - sicher und langfristig tragfähig sind. + {absatz2}

{/* Tagline callout */} @@ -76,6 +82,17 @@ export default function About() {
))}
+ + {stats && stats.length > 0 && ( +
+ {stats.map((s) => ( +
+
{s.wert}
+
{s.label}
+
+ ))} +
+ )} {/* Right: Process steps */} diff --git a/components/Contact.tsx b/components/Contact.tsx index dda42a1..066a773 100644 --- a/components/Contact.tsx +++ b/components/Contact.tsx @@ -2,45 +2,61 @@ import { useState } from "react"; -const contactItems = [ - { - icon: ( - - - - ), - label: "Telefon", - value: "+49 171 9345193", - href: "tel:+4917193451093", - }, - { - icon: ( - - - - ), - label: "E-Mail", - value: "kontakt@mbo-tech-it.de", - href: "mailto:kontakt@mbo-tech-it.de", - }, - { - icon: ( - - - - - ), - label: "Standort", - value: "Crailsheim, 74564", - href: "https://maps.google.com/?q=Mörikestr.+2,+74564+Crailsheim", - }, -]; +interface OeffnungsZeit { tag: string; von: string; bis: string } + +interface ContactProps { + telefon?: string; + email?: string; + adresseZeile1?: string; + adresseZeile2?: string; + oeffnungszeiten?: OeffnungsZeit[]; +} type Status = "idle" | "loading" | "success" | "error"; -export default function Contact() { +export default function Contact({ + telefon = "+49 171 9345193", + email = "kontakt@mbo-tech-it.de", + adresseZeile1 = "Mörikestr. 2", + adresseZeile2 = "74564 Crailsheim", + oeffnungszeiten, +}: ContactProps = {}) { + const contactItems = [ + { + icon: ( + + + + ), + label: "Telefon", + value: telefon, + href: `tel:${telefon.replace(/\s/g, "")}`, + }, + { + icon: ( + + + + ), + label: "E-Mail", + value: email, + href: `mailto:${email}`, + }, + { + icon: ( + + + + + ), + label: "Standort", + value: `${adresseZeile1}, ${adresseZeile2}`, + href: `https://maps.google.com/?q=${encodeURIComponent(adresseZeile1 + " " + adresseZeile2)}`, + }, + ]; + const [name, setName] = useState(""); - const [email, setEmail] = useState(""); + const [emailInput, setEmailInput] = useState(""); const [betreff, setBetreff] = useState(""); const [nachricht, setNachricht] = useState(""); const [status, setStatus] = useState("idle"); @@ -55,7 +71,7 @@ export default function Contact() { const res = await fetch("/api/contact", { method: "POST", headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ name, email, betreff, nachricht }), + body: JSON.stringify({ name, email: emailInput, betreff, nachricht }), }); const data = await res.json(); @@ -108,7 +124,7 @@ export default function Contact() { onClick={() => { setStatus("idle"); setName(""); - setEmail(""); + setEmailInput(""); setBetreff(""); setNachricht(""); }} @@ -136,8 +152,8 @@ export default function Contact() { setEmail(e.target.value)} + value={emailInput} + onChange={(e) => setEmailInput(e.target.value)} placeholder="max@beispiel.de" className="w-full px-4 py-3 rounded-xl bg-slate-50 dark:bg-[#111925] border border-slate-300 dark:border-gray-700 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-600 focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors" /> @@ -239,6 +255,22 @@ export default function Contact() { ))} + + {oeffnungszeiten && oeffnungszeiten.length > 0 && ( +
+

+ Öffnungszeiten +

+
    + {oeffnungszeiten.map((oz) => ( +
  • + {oz.tag} + {oz.von} – {oz.bis} +
    • + ))} +
+
+ )}
diff --git a/components/Hero.tsx b/components/Hero.tsx index df8b259..f31fcb1 100644 --- a/components/Hero.tsx +++ b/components/Hero.tsx @@ -1,10 +1,33 @@ -// components/Hero.tsx "use client"; import { useMemo } from "react"; import { useTypewriter } from "@/hooks/useTypewriter"; -export default function Hero() { +interface HeroProps { + eyebrowText?: string; + headline1?: string; + subtext1?: string; + subtext2?: string; + cta1Text?: string; + cta1Href?: string; + cta2Text?: string; + cta2Href?: string; + bgImagePath?: string | null; + badges?: string[]; +} + +export default function Hero({ + eyebrowText = "Digital Denken. Lokal Handeln.", + headline1 = "Ihre IT-Infrastruktur.", + subtext1 = "Ihr IT-Dienstleister in Crailsheim — egal ob zu Hause oder im Büro. Von Hard- & Software über Netzwerk & WLAN bis hin zu Webseiten & Webanwendungen: Wir lösen Ihre IT-Probleme persönlich und zum fairen Preis.", + subtext2 = "", + cta1Text = "Jetzt anfragen", + cta1Href = "#contact", + cta2Text = "Unsere Leistungen", + cta2Href = "#services", + bgImagePath = null, + badges = ["Docker", "Kubernetes", "Proxmox", "Hetzner Cloud", "Linux"], +}: HeroProps = {}) { const words = useMemo(() => ["Professionell.", "DSGVO-konform.", "Zuverlässig.", "Skalierbar."], []); const typed = useTypewriter(words); @@ -20,48 +43,60 @@ export default function Hero() {
+ {bgImagePath && ( +
+ )} +
{/* Tagline badge */}
- Digital Denken. Lokal Handeln. + {eyebrowText}
{/* Headline */}

- Ihre IT-Infrastruktur.{" "} + {headline1}{" "} {typed} | -
- Skalierbar. Zuverlässig.

{/* Subheadline */} -

- Ihr IT-Dienstleister in Crailsheim — egal ob zu Hause oder im Büro. Von Hard- & Software über Netzwerk & WLAN bis hin zu Webseiten & Webanwendungen: Wir lösen Ihre IT-Probleme persönlich und zum fairen Preis. -

+ {subtext1 && ( +

+ {subtext1} +

+ )} + {subtext2 && ( +

+ {subtext2} +

+ )} {/* Tech pills */}
- {["Docker", "Kubernetes", "Proxmox", "Hetzner Cloud", "Linux"].map((tech) => ( + {badges.map((badge) => ( - {tech} + {badge} ))}
{/* CTAs */}