180 lines
9.3 KiB
TypeScript
180 lines
9.3 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||
import MediaAbout from "@/components/sections/about/MediaAbout";
|
||
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
|
||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||
import Link from "next/link";
|
||
import { Building2, MessageCircle, Linkedin, Mail } from "lucide-react";
|
||
|
||
export default function AboutPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="elastic-effect"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="soft"
|
||
contentWidth="mediumSmall"
|
||
sizing="mediumSizeLargeTitles"
|
||
background="aurora"
|
||
cardStyle="gradient-mesh"
|
||
primaryButtonStyle="double-inset"
|
||
secondaryButtonStyle="layered"
|
||
headingFontWeight="medium"
|
||
>
|
||
{/* Navbar */}
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingOverlay
|
||
brandName="Schön Klinik MVZ"
|
||
navItems={[
|
||
{ name: "Behandlungen", id: "treatments" },
|
||
{ name: "Spezialisten", id: "specialists" },
|
||
{ name: "Standorte", id: "locations" },
|
||
{ name: "Über uns", id: "about" },
|
||
]}
|
||
button={{
|
||
text: "Termin vereinbaren",
|
||
href: "#contact",
|
||
}}
|
||
className="bg-white/80 backdrop-blur-sm border border-white/20"
|
||
buttonClassName="bg-gradient-to-r from-orange-500 to-orange-600 hover:shadow-lg"
|
||
buttonTextClassName="text-white font-semibold"
|
||
/>
|
||
</div>
|
||
|
||
{/* About Section */}
|
||
<div id="about-page" data-section="about-page" className="bg-gradient-to-br from-white via-orange-50 to-white">
|
||
<MediaAbout
|
||
title="Das MVZ Hamburg Eilbek – Ihr Partner für Gesundheit"
|
||
description="Das Medizinische Versorgungszentrum (MVZ) der Schön Klinik Hamburg Eilbek ist eine moderne, spezialisierte Einrichtung für ambulante medizinische Versorgung. Mit drei Fachbereichen – Innere Medizin, Orthopädie und Chirurgie – bieten wir umfassende, hochwertige Gesundheitsdienste für die Patienten Hamburgs und der Region. Unser Team besteht aus erfahrenen Fachleuten, die es sich zur Aufgabe gemacht haben, Ihnen die beste medizinische Betreuung zu bieten. Wir arbeiten nach modernen Standards und nutzen die neueste medizinische Technologie, um Ihre Gesundheit optimal zu unterstützen."
|
||
tag="Unsere Mission"
|
||
tagIcon={Building2}
|
||
tagAnimation="slide-up"
|
||
buttons={[
|
||
{ text: "Unsere Ärzte", href: "#specialists" },
|
||
{ text: "Jetzt Termin buchen", href: "#contact" },
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
imageSrc="http://img.b2bpic.net/free-photo/woman-presenting-information-colleagues_23-2147807956.jpg"
|
||
imageAlt="Professionelles medizinisches Team"
|
||
useInvertedBackground={false}
|
||
ariaLabel="Über das MVZ Hamburg Eilbek"
|
||
className="py-20"
|
||
textBoxClassName="max-w-2xl"
|
||
titleClassName="text-4xl md:text-5xl font-bold mb-6 text-foreground"
|
||
descriptionClassName="text-lg text-foreground/75 mb-8 leading-relaxed"
|
||
tagClassName="inline-flex items-center gap-2 px-4 py-2 bg-orange-50 text-orange-700 rounded-full text-sm font-medium mb-4"
|
||
buttonContainerClassName="flex flex-col sm:flex-row gap-4"
|
||
buttonClassName="px-6 py-3 rounded-lg font-semibold transition-all"
|
||
buttonTextClassName="font-semibold"
|
||
/>
|
||
</div>
|
||
|
||
{/* Team Section */}
|
||
<div id="specialists-page" data-section="specialists-page" className="bg-white border-y border-orange-100">
|
||
<TeamCardTwo
|
||
members={[
|
||
{
|
||
id: "specialist-1",
|
||
name: "Dr. med. Hans Mueller",
|
||
role: "Facharzt für Innere Medizin",
|
||
description: "Mit über 20 Jahren klinischer Erfahrung ist Dr. Mueller spezialisiert auf die Betreuung chronischer Erkrankungen und präventive Medizin. Seine Patienten schätzen seine gründliche Diagnostik und persönliche Beratung.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-doctor-with-stethoscope-clinic_1303-19766.jpg",
|
||
imageAlt: "Dr. Hans Mueller",
|
||
socialLinks: [
|
||
{ icon: Linkedin, url: "#" },
|
||
{ icon: Mail, url: "#contact" },
|
||
],
|
||
},
|
||
{
|
||
id: "specialist-2",
|
||
name: "Dr. med. Sarah Weber",
|
||
role: "Fachärztin für Orthopädie",
|
||
description: "Dr. Weber hat sich auf konservative und operative Orthopädie spezialisiert. Sie arbeitet mit modernen Therapieverfahren und setzt auf individuelle Behandlungskonzepte für jeden Patienten.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-female-doctor-with-medical-mask-copy-space_23-2148847621.jpg",
|
||
imageAlt: "Dr. Sarah Weber",
|
||
socialLinks: [
|
||
{ icon: Linkedin, url: "#" },
|
||
{ icon: Mail, url: "#contact" },
|
||
],
|
||
},
|
||
{
|
||
id: "specialist-3",
|
||
name: "Dr. med. Klaus Zimmermann",
|
||
role: "Facharzt für Chirurgie",
|
||
description: "Dr. Zimmermann bringt Fachkompetenz in minimal-invasiven chirurgischen Techniken mit. Seine Fokus auf Patientensicherheit und innovativen Verfahren hat ihm großes Vertrauen bei seinen Patienten verschafft.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-doctor-with-stethoscope-clinic_1303-19766.jpg",
|
||
imageAlt: "Dr. Klaus Zimmermann",
|
||
socialLinks: [
|
||
{ icon: Linkedin, url: "#" },
|
||
{ icon: Mail, url: "#contact" },
|
||
],
|
||
},
|
||
]}
|
||
carouselMode="buttons"
|
||
gridVariant="three-columns-all-equal-width"
|
||
animationType="slide-up"
|
||
uniformGridCustomHeightClasses="min-h-80 2xl:min-h-90"
|
||
title="Unser Ärzte-Team"
|
||
description="Lernen Sie die Experten kennen, die sich täglich für Ihre Gesundheit einsetzen"
|
||
tag="Medizinische Fachkompetenz"
|
||
tagAnimation="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
ariaLabel="Unser medizinisches Fachteam"
|
||
className="py-20"
|
||
containerClassName="max-w-6xl mx-auto px-4"
|
||
cardClassName="rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all"
|
||
titleClassName="text-4xl md:text-5xl font-bold mb-4 text-foreground"
|
||
descriptionClassName="text-lg text-foreground/70 mb-8"
|
||
tagClassName="inline-flex items-center gap-2 px-4 py-2 bg-orange-50 text-orange-700 rounded-full text-sm font-medium mb-4"
|
||
nameClassName="text-xl font-bold text-foreground mt-4"
|
||
roleClassName="text-orange-600 font-semibold text-sm"
|
||
memberDescriptionClassName="text-foreground/70 text-sm mt-2 leading-relaxed"
|
||
/>
|
||
</div>
|
||
|
||
{/* Contact Section */}
|
||
<div id="contact-page" data-section="contact-page" className="bg-gradient-to-br from-orange-500 to-orange-600 text-white">
|
||
<ContactCTA
|
||
tag="Nehmen Sie Kontakt auf"
|
||
tagIcon={MessageCircle}
|
||
tagAnimation="slide-up"
|
||
title="Vereinbaren Sie einen Termin"
|
||
description="Haben Sie Interesse, unser MVZ kennenzulernen oder möchten Sie einen Termin mit einem unserer Fachleute vereinbaren? Kontaktieren Sie uns jederzeit."
|
||
buttons={[
|
||
{ text: "Telefon: +49 40 12345678", href: "tel:+49401234567" },
|
||
{ text: "E-Mail: kontakt@schoen-klinik-hamburg.de", href: "mailto:kontakt@schoen-klinik-hamburg.de" },
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
background={{ variant: "radial-gradient" }}
|
||
useInvertedBackground={true}
|
||
ariaLabel="Kontakt zum MVZ"
|
||
className="py-20"
|
||
containerClassName="max-w-4xl mx-auto px-4"
|
||
titleClassName="text-4xl md:text-5xl font-bold mb-4 text-white text-center"
|
||
descriptionClassName="text-lg text-white/90 mb-8 text-center"
|
||
tagClassName="inline-flex items-center gap-2 px-4 py-2 bg-white/20 text-white rounded-full text-sm font-medium mb-4 justify-center"
|
||
buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center flex-wrap"
|
||
buttonClassName="px-8 py-3 rounded-lg font-semibold transition-all"
|
||
buttonTextClassName="font-semibold"
|
||
/>
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<div id="footer-page" data-section="footer-page" className="bg-gray-900 text-white border-t border-orange-400">
|
||
<FooterLogoReveal
|
||
logoText="Schön Klinik MVZ Hamburg Eilbek"
|
||
leftLink={{ text: "Datenschutz", href: "/datenschutz" }}
|
||
rightLink={{ text: "Impressum", href: "/impressum" }}
|
||
ariaLabel="Seitenfuß"
|
||
className="bg-foreground text-white py-12"
|
||
containerClassName="max-w-6xl mx-auto px-4 flex justify-between items-center"
|
||
logoClassName="text-xl font-bold"
|
||
linkClassName="text-white/80 hover:text-white transition-colors"
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
} |