Alle Templates
Templates/Modern Practice
A standalone full-page template for a modern specialist practice. Clear typography, plenty of whitespace and a restrained black-and-white palette carry the whole page, from hero to footer. The centerpiece is a multi-step appointment request with date and time selection, rounded out by specialties, patient voices, an FAQ accordion and a location block.
Medical & HealthKomplette Seite
Die fertige Seite zum Durchscrollen, umschaltbar zwischen Desktop, Tablet und Handy.
Quellcode
Die komplette Seite als eine Datei. Kopiere sie nach ./components und binde die Komponente in deine Route ein.
import { useEffect, useState, type FormEvent } from "react";
import { useReducedMotion } from "framer-motion";
import {
Plus,
Menu,
X,
ChevronRight,
ChevronLeft,
MapPin,
Phone,
Clock,
Calendar,
ArrowRight,
ShieldCheck,
UserCheck,
Stethoscope,
Building2,
Heart,
MessageSquare,
Zap,
CheckCircle2,
Instagram,
Facebook,
Linkedin,
} from "lucide-react";
// Neutral, fictional specialist-practice template. Brand: "Praxis Nordlicht",
// medical director "Dr. med. Lena Hofmann", location "Parkforum".
// No real names, addresses or external links. Scene and medical images
// live under /templates/praxis-modern; people are shown through neutral
// portraits from /heros.
const practiceContact = {
phone: "030 12345670",
email: "info@praxis-nordlicht.de",
addressLines: ["Parkforum", "Lindenallee 24", "12045 Musterstadt"],
hours: ["Mon to Thu: 08:00 to 18:00", "Fri: 08:00 to 14:00"],
profile: "#",
aestheticBooking: "#",
};
// Scoped styles: only typography, container, buttons, pills and float keyframes.
// Color and shadow utilities (practice-*, shadow-soft, shadow-medium) come from
// the global Tailwind theme (src/styles.css), keeping this block portable.
const scopedStyles = `
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600&display=swap');
.praxis-nordlicht {
--font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
--font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
font-family: var(--font-sans);
letter-spacing: -0.022em;
}
.praxis-nordlicht .container-custom { margin-inline: auto; max-width: 1380px; padding-inline: 1.25rem; }
@media (min-width: 640px) { .praxis-nordlicht .container-custom { padding-inline: 1.5rem; } }
@media (min-width: 768px) { .praxis-nordlicht .container-custom { padding-inline: 2.5rem; } }
@media (min-width: 1280px) { .praxis-nordlicht .container-custom { padding-inline: 3rem; } }
.praxis-nordlicht .section-padding { padding-block: 5rem; }
@media (min-width: 768px) { .praxis-nordlicht .section-padding { padding-block: 8rem; } }
.praxis-nordlicht .glass-card { background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); border: 1px solid #f3f4f6; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.praxis-nordlicht .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: #1a1a1a; color: #fff; padding: 1rem 2rem; border-radius: .5rem; font-weight: 500; font-size: .875rem; transition: all .2s ease; }
.praxis-nordlicht .btn-primary:hover { background: #262626; }
.praxis-nordlicht .btn-primary:active { transform: scale(.95); }
.praxis-nordlicht .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: #fff; color: #1a1a1a; padding: 1rem 2rem; border-radius: .5rem; font-weight: 500; font-size: .875rem; border: 1px solid #e5e7eb; box-shadow: 0 2px 10px rgba(0,0,0,0.02); transition: all .2s ease; }
.praxis-nordlicht .btn-secondary:hover { border-color: #d1d5db; }
.praxis-nordlicht .btn-secondary:active { transform: scale(.95); }
.praxis-nordlicht .pill-tag { display: inline-flex; align-items: center; padding: .375rem 1rem; border-radius: .375rem; background: #f5f5f5; color: #1a1a1a; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; border: 1px solid #f3f4f6; }
.praxis-nordlicht .pill-accent { display: inline-flex; align-items: center; padding: .375rem 1rem; border-radius: .375rem; background: rgba(26,26,26,0.05); color: #1a1a1a; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.praxis-nordlicht .scrollbar-hide::-webkit-scrollbar { display: none; }
@keyframes praxisFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
.praxis-nordlicht .animate-float { animation: praxisFloat 6s ease-in-out infinite; }
.praxis-nordlicht .animate-float-delayed { animation: praxisFloat 7s ease-in-out infinite; animation-delay: .8s; }
@media (prefers-reduced-motion: reduce) {
.praxis-nordlicht .animate-float,
.praxis-nordlicht .animate-float-delayed { animation: none; }
}
`;
const BookingForm = () => {
const [step, setStep] = useState(1);
const [selectedDate, setSelectedDate] = useState<Date | null>(null);
const [selectedTime, setSelectedTime] = useState<string | null>(null);
const [isSubmitted, setIsSubmitted] = useState(false);
const [formValues, setFormValues] = useState({
name: "",
email: "",
phone: "",
message: "",
});
// Generate the next 14 days (skip weekends)
const upcomingDays = Array.from({ length: 14 }, (_, i) => {
const d = new Date();
d.setDate(d.getDate() + i + 1); // Start from tomorrow
return d;
}).filter((d) => d.getDay() !== 0 && d.getDay() !== 6);
// Available time slots
const timeSlots = [
{ time: "08:00", available: true },
{ time: "08:30", available: false },
{ time: "09:00", available: true },
{ time: "09:30", available: true },
{ time: "10:00", available: false },
{ time: "10:30", available: true },
{ time: "11:00", available: true },
{ time: "11:30", available: false },
{ time: "14:00", available: true },
{ time: "14:30", available: true },
{ time: "15:00", available: false },
{ time: "15:30", available: true },
{ time: "16:00", available: true },
];
const handleNext = () => {
if (step === 1 && selectedDate && selectedTime) {
setStep(2);
}
};
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (!selectedDate || !selectedTime) {
return;
}
setIsSubmitted(true);
};
const resetFormFlow = () => {
setStep(1);
setSelectedDate(null);
setSelectedTime(null);
setIsSubmitted(false);
setFormValues({
name: "",
email: "",
phone: "",
message: "",
});
};
const formattedDate = selectedDate?.toLocaleDateString("en-US", {
weekday: "long",
day: "2-digit",
month: "long",
year: "numeric",
});
const selectionReady = Boolean(selectedDate && selectedTime);
if (isSubmitted) {
return (
<div
className="flex flex-col gap-6 rounded-[1.6rem] border border-black/8 bg-white p-6 shadow-soft md:p-8"
role="status"
aria-live="polite"
>
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-practice-ink text-white">
<CheckCircle2 size={24} />
</div>
<div className="space-y-3">
<p className="text-sm font-medium uppercase tracking-[0.24em] text-practice-ink-muted">
Request sent
</p>
<h3 className="text-2xl font-display font-medium text-practice-ink md:text-3xl">
Thank you for your request.
</h3>
<p className="max-w-xl leading-relaxed text-practice-ink-muted">
We have received your details and will be in touch shortly to arrange your appointment.
</p>
</div>
<div className="grid gap-4 md:grid-cols-2">
<div className="rounded-2xl border border-black/5 bg-practice-surface p-4">
<div className="text-xs uppercase tracking-[0.2em] text-practice-ink-muted">
Appointment
</div>
<div className="mt-2 text-sm font-medium text-practice-ink">
{formattedDate} at {selectedTime}
</div>
</div>
<div className="rounded-2xl border border-black/5 bg-practice-surface p-4">
<div className="text-xs uppercase tracking-[0.2em] text-practice-ink-muted">
Contact
</div>
<div className="mt-2 text-sm font-medium text-practice-ink">
{formValues.name || "Request"}
</div>
<div className="text-sm text-practice-ink-muted">{formValues.email}</div>
</div>
</div>
<button
type="button"
onClick={resetFormFlow}
className="mt-2 flex items-center justify-center gap-2 rounded-xl bg-practice-ink px-8 py-4 font-medium text-white transition-all hover:bg-practice-accent-hover active:scale-95"
>
Start a new request <ArrowRight size={18} />
</button>
</div>
);
}
return (
<div className="flex min-w-0 flex-col gap-6 rounded-[1.6rem] border border-black/8 bg-white p-6 shadow-soft md:p-8">
<div className="flex flex-col gap-5 border-b border-black/6 pb-6 sm:flex-row sm:items-end sm:justify-between">
<div>
<p className="text-[11px] font-medium uppercase tracking-[0.24em] text-practice-ink-muted">
Practice request
</p>
<p className="mt-2 text-xl font-medium tracking-tight text-practice-ink">
{step === 1 ? "Choose your preferred time" : "Add your contact details"}
</p>
<p className="mt-2 text-sm leading-relaxed text-practice-ink-muted">
{step === 1
? "First pick a day and a time that works for you."
: "In the second step we collect your contact details and your request."}
</p>
</div>
<div className="flex gap-2">
{[1, 2].map((stepItem) => (
<div
key={stepItem}
className={`rounded-full px-3 py-1.5 text-xs font-medium transition-colors ${
stepItem === step
? "bg-practice-ink text-white"
: "bg-practice-surface text-practice-ink-muted"
}`}
>
Step {stepItem}
</div>
))}
</div>
</div>
{step === 1 ? (
<>
<div className="rounded-[1.4rem] border border-black/6 bg-practice-surface p-4 md:p-5">
<div className="mb-4">
<label className="text-sm font-medium uppercase tracking-wider text-practice-ink">
1. Choose a date
</label>
<p className="mt-1 text-sm leading-relaxed text-practice-ink-muted">
Pick a day that suits your request.
</p>
</div>
<div
className="flex gap-3 overflow-x-auto pb-4 snap-x scrollbar-hide"
style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
>
{upcomingDays.map((date, i) => {
const isSelected = selectedDate?.toDateString() === date.toDateString();
const dayName = date.toLocaleDateString("en-US", { weekday: "short" });
const dayNumber = date.getDate();
const monthName = date.toLocaleDateString("en-US", { month: "short" });
return (
<button
key={i}
type="button"
onClick={() => {
setSelectedDate(date);
setSelectedTime(null);
}}
className={`snap-start flex h-24 w-20 shrink-0 flex-col items-center justify-center rounded-xl border transition-all ${
isSelected
? "border-practice-ink bg-practice-ink text-white shadow-soft"
: "border-black/8 bg-practice-surface text-practice-ink-muted hover:border-practice-ink/20 hover:bg-white hover:text-practice-ink"
}`}
>
<span className="text-xs uppercase font-medium mb-1">{dayName}</span>
<span className="text-2xl font-display font-medium">{dayNumber}</span>
<span className="text-xs">{monthName}</span>
</button>
);
})}
</div>
</div>
{selectedDate && (
<div className="rounded-[1.5rem] border border-black/6 bg-practice-surface p-4 md:p-5">
<div className="mb-4">
<label className="text-sm font-medium uppercase tracking-wider text-practice-ink">
2. Choose a time
</label>
<p className="mt-1 text-sm leading-relaxed text-practice-ink-muted">
Available times are shown to match the day you selected.
</p>
</div>
<div className="grid grid-cols-3 sm:grid-cols-4 gap-3">
{timeSlots.map((slot, i) => {
// Nudge availability by the date so it feels realistic
const seed = selectedDate.getDate() + i;
const isAvailable = slot.available && seed % 4 !== 0;
const isSelected = selectedTime === slot.time;
return (
<button
key={i}
type="button"
disabled={!isAvailable}
onClick={() => setSelectedTime(slot.time)}
className={`py-3 rounded-lg text-sm font-medium transition-all ${
!isAvailable
? "cursor-not-allowed border border-transparent bg-practice-surface text-practice-ink/25"
: isSelected
? "border-practice-ink bg-practice-ink text-white shadow-soft"
: "border-black/8 bg-white text-practice-ink hover:border-practice-ink/25 hover:bg-practice-surface"
}`}
>
{slot.time}
</button>
);
})}
</div>
</div>
)}
{selectionReady && (
<div className="rounded-[1.4rem] border border-black/6 bg-white p-4 md:p-5">
<div className="text-[11px] font-medium uppercase tracking-[0.22em] text-practice-ink-muted">
Selected
</div>
<div className="mt-2 text-lg font-medium tracking-tight text-practice-ink">
{formattedDate} at {selectedTime}
</div>
<p className="mt-2 text-sm leading-relaxed text-practice-ink-muted">
In the next step you provide your contact details and your request.
</p>
</div>
)}
<button
type="button"
disabled={!selectionReady}
onClick={handleNext}
className="flex items-center justify-center gap-2 rounded-xl bg-practice-ink px-8 py-4 font-medium text-white transition-all hover:bg-practice-accent-hover active:scale-95 disabled:cursor-not-allowed disabled:opacity-50"
>
Continue to your details <ArrowRight size={18} />
</button>
</>
) : (
<form className="flex flex-col gap-5" onSubmit={handleSubmit}>
<div className="mb-2 flex items-center justify-between">
<div>
<label className="text-sm font-medium uppercase tracking-wider text-practice-ink">
Contact details
</label>
<p className="mt-1 text-sm leading-relaxed text-practice-ink-muted">
Almost done. We just need your contact details and your request.
</p>
</div>
<button
type="button"
onClick={() => setStep(1)}
className="flex items-center gap-1 text-xs text-practice-ink-muted transition-colors hover:text-practice-ink"
>
<ChevronLeft size={14} /> Back
</button>
</div>
<div className="mb-2 flex items-center gap-4 rounded-[1.35rem] border border-black/6 bg-practice-surface p-4">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-white text-practice-ink shadow-soft">
<Calendar size={18} />
</div>
<div>
<div className="text-xs text-practice-ink-muted">Selected appointment</div>
<div className="text-sm font-medium text-practice-ink">
{formattedDate} at {selectedTime}
</div>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
<div className="flex flex-col gap-2">
<label
htmlFor="name"
className="text-xs font-medium uppercase tracking-wider text-practice-ink-muted"
>
Name
</label>
<input
type="text"
id="name"
autoComplete="name"
value={formValues.name}
onChange={(event) =>
setFormValues((current) => ({ ...current, name: event.target.value }))
}
className="rounded-xl border border-black/8 bg-practice-surface px-4 py-3 text-practice-ink placeholder:text-practice-ink/35 transition-all focus:border-practice-ink/30 focus:outline-none focus:ring-2 focus:ring-practice-ink/10"
placeholder="Jane Doe"
required
/>
</div>
<div className="flex flex-col gap-2">
<label
htmlFor="email"
className="text-xs font-medium uppercase tracking-wider text-practice-ink-muted"
>
Email
</label>
<input
type="email"
id="email"
autoComplete="email"
value={formValues.email}
onChange={(event) =>
setFormValues((current) => ({ ...current, email: event.target.value }))
}
className="rounded-xl border border-black/8 bg-practice-surface px-4 py-3 text-practice-ink placeholder:text-practice-ink/35 transition-all focus:border-practice-ink/30 focus:outline-none focus:ring-2 focus:ring-practice-ink/10"
placeholder="name@domain.com"
required
/>
</div>
</div>
<div className="flex flex-col gap-2">
<label
htmlFor="phone"
className="text-xs font-medium uppercase tracking-wider text-practice-ink-muted"
>
Phone number
</label>
<input
type="tel"
id="phone"
autoComplete="tel"
value={formValues.phone}
onChange={(event) =>
setFormValues((current) => ({ ...current, phone: event.target.value }))
}
className="rounded-xl border border-black/8 bg-practice-surface px-4 py-3 text-practice-ink placeholder:text-practice-ink/35 transition-all focus:border-practice-ink/30 focus:outline-none focus:ring-2 focus:ring-practice-ink/10"
placeholder="+49 123 456789"
required
/>
</div>
<div className="flex flex-col gap-2">
<label
htmlFor="message"
className="text-xs font-medium uppercase tracking-wider text-practice-ink-muted"
>
Message / request
</label>
<textarea
id="message"
rows={4}
value={formValues.message}
onChange={(event) =>
setFormValues((current) => ({ ...current, message: event.target.value }))
}
className="resize-none rounded-xl border border-black/8 bg-practice-surface px-4 py-3 text-practice-ink placeholder:text-practice-ink/35 transition-all focus:border-practice-ink/30 focus:outline-none focus:ring-2 focus:ring-practice-ink/10"
placeholder="How can we help you?"
></textarea>
</div>
<button
type="submit"
className="mt-2 flex items-center justify-center gap-2 rounded-xl bg-practice-ink px-8 py-4 font-medium text-white shadow-lg shadow-practice-ink/10 transition-all hover:bg-practice-accent-hover active:scale-95"
>
Send request <ArrowRight size={18} />
</button>
</form>
)}
</div>
);
};
export function PraxisNordlichtPage() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isScrolled, setIsScrolled] = useState(false);
const [currentTestimonial, setCurrentTestimonial] = useState(0);
const [isHovered, setIsHovered] = useState(false);
const [openFaq, setOpenFaq] = useState(0);
const reduceMotion = useReducedMotion();
const testimonials = [
{
quote:
"I felt in the best hands from the very first moment. The advice was honest and the result of my hand surgery gave me my quality of life back.",
name: "Sophie",
role: "Patient",
image: "/heros/close-up-portrait-of-a-womans-face.webp",
},
{
quote:
"An incredibly empathetic team. The atmosphere in the practice puts you at ease right away. Highly recommended, both professionally and personally.",
name: "Michael",
role: "Patient",
image: "/heros/man-sitting-arms-crossed-levitating.webp",
},
{
quote:
"After my accident I was very unsure. Dr. Hofmann and the team not only operated on me superbly, they also supported me mentally.",
name: "Elena",
role: "Patient",
image: "/templates/praxis-modern/bein-behandlung.avif",
},
];
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 50);
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
useEffect(() => {
if (isHovered || reduceMotion) return;
const timer = setInterval(() => {
setCurrentTestimonial((prev) => (prev + 1) % testimonials.length);
}, 6000);
return () => clearInterval(timer);
}, [testimonials.length, isHovered, reduceMotion]);
const navLinks = [
{ name: "Hand Surgery", href: "#hand" },
{ name: "Aesthetics", href: "#aesthetik" },
{ name: "Plastic Surgery", href: "#plastisch" },
{ name: "General Surgery", href: "#allgemein" },
{ name: "Practice", href: "#praxis" },
{ name: "FAQ", href: "#faq" },
{ name: "Contact", href: "#kontakt" },
];
const faqItems = [
{
question: "How do I make an appointment?",
answer:
"For surgical consultations you can use the form on the homepage or contact the practice by phone. Aesthetic appointments are handled directly through LUMEA Aesthetics and are coordinated online there.",
},
{
question: "Which surgical specialties does the practice offer?",
answer:
"The practice covers hand surgery, aesthetic surgery, plastic surgery and general surgical services in particular. The focus is on a precise diagnosis and a clearly structured course of treatment.",
},
{
question: "What should I bring to my first appointment?",
answer:
"It helps to bring any existing findings, referral letters, imaging and a list of your medications. That way the conversation can be tailored to your situation in a well-informed and efficient way from the start.",
},
{
question: "Where is the practice located?",
answer:
"The practice is located in the Parkforum, Lindenallee 24 in 12045 Musterstadt. The location is easy to reach and offers a calm, modern setting.",
},
];
const serviceCards = [
{
id: "hand",
title: "Hand Surgery",
category: "Specialty",
desc: "Treatment of injuries, malformations and functional complaints with the goal of restoring everyday mobility and resilience.",
image: "/templates/praxis-modern/handchirurgie-hand.avif",
alt: "Close-up of a hand in a calm treatment setting",
imageClassName: "object-cover object-center",
},
{
id: "aesthetik",
title: "Aesthetic Surgery",
category: "Aesthetics",
desc: "Natural results, precise planning and honest advice on procedures that gently support your proportions.",
image: "/heros/realistic-close-up-portrait-woman.webp",
alt: "Person during a calm aesthetic facial treatment",
imageClassName: "object-cover object-center",
},
{
id: "plastisch",
title: "Plastic Surgery",
category: "Reconstructive",
desc: "Restoring form and function after injury or illness, with a clear eye for tissue, healing and aesthetics.",
image: "/templates/praxis-modern/bein-behandlung.avif",
alt: "Leg with a supportive bandage after treatment",
imageClassName: "object-cover object-center",
},
{
id: "allgemein",
title: "General Surgery",
category: "Diagnostics",
desc: "Prompt surgical care for a range of conditions, with structured diagnostics, clear guidance and safe aftercare.",
image: "/templates/praxis-modern/knee-anatomy.jpg",
alt: "Anatomical illustration of a knee joint",
imageClassName: "object-cover object-center",
},
];
return (
<div
id="top"
className="praxis-nordlicht min-h-screen flex flex-col bg-practice-base text-practice-ink selection:bg-practice-accent selection:text-white"
>
<style>{scopedStyles}</style>
{/* Header */}
<header
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-700 ${
isScrolled
? "bg-white/80 backdrop-blur-2xl shadow-soft py-3 md:py-4"
: "bg-transparent py-5 md:py-10"
}`}
>
<div className="container-custom flex items-center justify-between">
<a
href="#top"
className="block rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-practice-ink"
>
<span className="font-display text-xl font-semibold tracking-tight text-practice-ink sm:text-2xl">
Praxis Nordlicht
</span>
</a>
{/* Desktop Nav */}
<nav className="hidden lg:flex items-center gap-10" aria-label="Main navigation">
{navLinks.map((link) => (
<a
key={link.name}
href={link.href}
className="text-sm font-medium text-practice-ink/70 hover:text-practice-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-practice-ink rounded-sm transition-all flex items-center gap-1"
>
{link.name}
{link.name === "Practice" && <Plus size={12} className="opacity-40" />}
</a>
))}
<a
href="#termin"
className="bg-practice-ink text-white px-8 py-3 rounded-md text-sm font-medium hover:bg-practice-accent-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-practice-ink focus-visible:ring-offset-2 transition-all shadow-soft"
>
Book appointment
</a>
</nav>
{/* Mobile Menu Toggle */}
<button
className="lg:hidden w-10 h-10 flex items-center justify-center bg-practice-muted rounded-lg text-practice-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-practice-ink"
onClick={() => setIsMenuOpen(!isMenuOpen)}
aria-expanded={isMenuOpen}
aria-controls="mobile-menu"
aria-label={isMenuOpen ? "Close menu" : "Open menu"}
>
{isMenuOpen ? <X size={20} /> : <Menu size={20} />}
</button>
</div>
{/* Mobile Nav */}
{isMenuOpen && (
<div
id="mobile-menu"
className="absolute top-full left-4 right-4 mt-4 bg-white/95 backdrop-blur-xl border border-gray-100 shadow-2xl rounded-xl lg:hidden overflow-hidden"
>
<div className="flex flex-col p-8 gap-6">
{navLinks.map((link) => (
<a
key={link.name}
href={link.href}
className="text-xl font-semibold py-2 text-practice-ink"
onClick={() => setIsMenuOpen(false)}
>
{link.name}
</a>
))}
<a
href="#termin"
className="btn-primary w-full mt-4 py-4 text-center"
onClick={() => setIsMenuOpen(false)}
>
Book an appointment online
</a>
</div>
</div>
)}
</header>
<main>
{/* Hero Section */}
<section className="relative flex items-center overflow-hidden bg-white pb-16 pt-28 md:pb-20 md:pt-32 lg:min-h-[48rem] xl:min-h-[52rem] xl:pb-24 2xl:min-h-[56rem]">
<div className="container-custom relative z-10">
<div className="mx-auto grid items-center gap-12 md:gap-16 lg:grid-cols-[0.96fr_1.04fr] lg:gap-14 xl:max-w-[1280px] xl:grid-cols-[0.94fr_1.06fr] xl:gap-18 2xl:max-w-[1360px] 2xl:grid-cols-[0.92fr_1.08fr] 2xl:gap-20">
<div className="lg:max-w-[32rem] xl:max-w-[34rem] 2xl:max-w-[36rem]">
<div className="pill-accent mb-8">Specialist surgical practice</div>
<h1 className="mb-8 text-[2.8rem] font-display font-medium leading-[1.02] tracking-tight text-practice-ink sm:text-5xl md:text-[3.6rem] xl:text-[4.15rem] 2xl:text-[4.8rem]">
<span className="block sm:whitespace-nowrap">Precision for your</span>
<span className="block text-practice-ink-muted">health.</span>
</h1>
<p className="mb-10 max-w-lg text-base font-normal leading-relaxed text-practice-ink-muted sm:text-lg xl:max-w-[31rem] xl:text-[1.05rem] 2xl:max-w-[34rem] 2xl:text-[1.12rem]">
We combine surgical excellence with empathetic, individual care on your path to
recovery.
</p>
<div className="flex flex-wrap gap-6">
<a href="#termin" className="btn-primary w-full sm:w-fit">
Book an appointment <Plus size={20} />
</a>
</div>
<div className="mt-10 flex flex-wrap items-center gap-8 border-t border-gray-100 pt-8 sm:gap-10 md:mt-14 md:pt-10 xl:mt-16 xl:gap-12 xl:pt-10">
<div>
<div className="mb-1 text-2xl font-medium xl:text-3xl">20+</div>
<div className="text-[10px] uppercase tracking-widest font-medium text-practice-ink-muted">
Years of experience
</div>
</div>
<div>
<div className="mb-1 text-2xl font-medium xl:text-3xl">15k+</div>
<div className="text-[10px] uppercase tracking-widest font-medium text-practice-ink-muted">
Successful procedures
</div>
</div>
</div>
</div>
<div className="relative w-full">
<div className="relative z-10 mx-auto aspect-[5/4] min-h-[20rem] w-full overflow-hidden rounded-[1.5rem] bg-practice-surface shadow-medium sm:min-h-[24rem] md:min-h-[34rem] md:rounded-xl lg:aspect-[6/5] lg:min-h-[34rem] xl:min-h-[38rem] xl:max-h-[41rem] xl:max-w-[42rem] 2xl:min-h-[42rem] 2xl:max-h-[45rem] 2xl:max-w-[46rem]">
<img
src="/templates/praxis-modern/knee-xray-soft.avif"
alt="Medical imaging of a knee joint"
className="absolute inset-0 w-full h-full object-cover object-center"
loading="eager"
decoding="async"
/>
{/* Floating Elements */}
<div className="glass-card animate-float absolute left-8 top-8 hidden items-center gap-4 rounded-xl px-6 py-4 2xl:flex">
<div className="w-10 h-10 bg-practice-ink/5 rounded-full flex items-center justify-center">
<UserCheck className="text-practice-ink" size={18} />
</div>
<div className="flex flex-col">
<span className="text-xs font-medium">Healthy patients</span>
<span className="text-[10px] text-practice-ink-muted font-normal">
New successes every day
</span>
</div>
</div>
<div className="glass-card animate-float-delayed absolute bottom-8 right-8 hidden items-center gap-4 rounded-xl px-6 py-4 2xl:flex">
<div className="w-10 h-10 bg-practice-accent/10 rounded-full flex items-center justify-center">
<Stethoscope className="text-practice-accent" size={18} />
</div>
<div className="flex flex-col">
<span className="text-xs font-medium">Department</span>
<span className="text-[10px] text-practice-ink-muted font-normal">
Hand & Plastic Surgery
</span>
</div>
</div>
</div>
<div className="absolute -bottom-8 left-8 hidden h-40 w-40 rounded-full bg-practice-accent/5 blur-3xl 2xl:block"></div>
<div className="absolute right-8 top-0 hidden h-56 w-56 rounded-full bg-practice-accent/5 blur-3xl 2xl:block"></div>
</div>
</div>
</div>
</section>
{/* Vision Section */}
<section className="overflow-hidden bg-practice-surface py-20 md:py-32 xl:py-36">
<div className="container-custom">
<div className="flex flex-col items-start gap-10 md:flex-row md:items-center md:gap-16 xl:gap-24">
<div className="w-full md:w-1/3">
<div className="pill-tag mb-6">Our vision</div>
<h2 className="text-3xl leading-tight tracking-tight md:text-4xl xl:text-[3.4rem]">
A world full of <br />
<span className="text-practice-ink-muted">health.</span>
</h2>
</div>
<div className="w-full md:w-2/3">
<p className="text-lg font-normal leading-relaxed text-practice-ink/70 sm:text-xl md:text-2xl xl:max-w-4xl xl:text-[1.85rem]">
"We believe every patient deserves care as individual as their own story. Our
mission is to bring together medical precision and human warmth."
</p>
<div className="mt-10 flex items-center gap-5">
<div className="h-14 w-14 overflow-hidden rounded-full border border-white bg-practice-surface shadow-soft">
<img
src="/heros/hyperrealistic-photo-of-a-young-professional-sitting.webp"
alt="Portrait of the medical director"
className="h-full w-full object-cover object-center"
loading="lazy"
/>
</div>
<div>
<div className="font-medium text-base">Dr. med. Lena Hofmann</div>
<div className="text-[10px] uppercase tracking-widest font-medium text-practice-ink-muted">
Medical Director
</div>
<a
href={practiceContact.profile}
className="mt-2 inline-flex items-center gap-2 text-sm font-medium text-practice-ink transition-colors hover:text-practice-accent"
>
View practice profile <ArrowRight size={14} />
</a>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Trust Block */}
<section className="bg-white py-20 md:py-32 xl:py-36">
<div className="container-custom">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4 xl:gap-8">
{[
{
icon: UserCheck,
title: "Personal consultation",
desc: "We take the time to understand your concerns and develop the best treatment plan together with you.",
accent: "bg-practice-ink/5 text-practice-ink",
},
{
icon: Stethoscope,
title: "Surgical expertise",
desc: "Years of experience and state-of-the-art surgical techniques for your safety and health.",
accent: "bg-practice-ink/5 text-practice-ink",
},
{
icon: ShieldCheck,
title: "Modern practice",
desc: "A professional atmosphere awaits you in our rooms at the Parkforum.",
accent: "bg-practice-ink/5 text-practice-ink",
},
{
icon: Building2,
title: "Collaboration",
desc: "Close cooperation with LUMEA Aesthetics for the highest standards in aesthetic surgery.",
accent: "bg-practice-ink/5 text-practice-ink",
},
].map((item, i) => (
<div
key={i}
className="rounded-2xl border border-gray-100/50 bg-practice-surface p-7 transition-all duration-500 group hover:bg-white hover:shadow-medium sm:p-10"
>
<div
className={`w-12 h-12 rounded-lg flex items-center justify-center mb-8 transition-all duration-500 group-hover:scale-105 ${item.accent}`}
>
<item.icon size={24} strokeWidth={1.2} />
</div>
<h3 className="text-lg font-medium mb-3 tracking-tight">{item.title}</h3>
<p className="text-sm text-practice-ink-muted leading-relaxed font-normal">
{item.desc}
</p>
</div>
))}
</div>
</div>
</section>
{/* Specialties */}
<section id="fachbereiche" className="section-padding bg-white xl:py-36">
<div className="container-custom">
<div className="mb-16 flex flex-col gap-10 md:mb-32 md:flex-row md:items-end md:justify-between md:gap-12">
<div className="max-w-2xl">
<div className="pill-tag mb-8">Range of services</div>
<h2 className="mb-0 text-4xl leading-tight tracking-tight md:text-5xl xl:text-[3.6rem]">
Specialized <br /> surgery.
</h2>
</div>
<p className="max-w-md text-base font-normal leading-relaxed text-practice-ink-muted md:max-w-xs md:text-lg">
We offer you a broad range of surgical services at the highest medical standard.
</p>
</div>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-8 xl:gap-10">
{serviceCards.map((item) => (
<div
key={item.id}
id={item.id}
className="group rounded-[2rem] border border-gray-100 bg-white p-3 shadow-soft transition-all duration-500 hover:-translate-y-1 hover:shadow-medium xl:p-4"
>
<div className="relative overflow-hidden rounded-[1.5rem]">
<div className="absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/18 px-4 py-2 text-xs font-medium text-white backdrop-blur-md sm:px-6 sm:py-3 sm:text-sm">
{item.category}
</div>
<div className="aspect-[16/10] overflow-hidden rounded-[1.5rem] bg-practice-surface">
<img
src={item.image}
alt={item.alt}
className={`h-full w-full transition-transform duration-700 group-hover:scale-105 ${item.imageClassName}`}
loading="lazy"
/>
</div>
</div>
<div className="flex items-start justify-between gap-4 px-4 pb-4 pt-5">
<div className="max-w-[28rem]">
<h3 className="text-2xl font-medium tracking-tight text-practice-ink md:text-[1.75rem] xl:text-[2rem]">
{item.title}
</h3>
<p className="mt-3 text-sm leading-relaxed text-practice-ink-muted">
{item.desc}
</p>
</div>
</div>
<div className="px-4 pb-4">
<a
href="#termin"
className="inline-flex items-center gap-2 text-sm font-medium text-practice-ink transition-colors hover:text-practice-accent"
>
Request a consultation <ArrowRight size={14} />
</a>
</div>
</div>
))}
</div>
</div>
</section>
{/* Philosophy */}
<section id="praxis" className="section-padding overflow-hidden bg-white xl:py-36">
<div className="container-custom">
<div className="flex flex-col items-center gap-14 lg:flex-row lg:gap-24 xl:gap-32 2xl:gap-36">
<div className="relative w-full lg:w-1/2 xl:max-w-[42rem]">
<div className="relative z-10 aspect-[4/5] overflow-hidden rounded-xl bg-practice-surface shadow-medium xl:min-h-[44rem]">
<img
src="/heros/woman-in-her-late-20s-journaling-in.webp"
alt="Person in a bright, calm consultation setting"
className="w-full h-full object-cover object-center transition-transform duration-1000 hover:scale-[1.02]"
loading="lazy"
/>
</div>
<div className="absolute -bottom-10 -right-10 w-64 h-64 bg-practice-accent/5 rounded-full blur-3xl -z-10"></div>
</div>
<div className="w-full lg:w-1/2 xl:max-w-[40rem]">
<div className="pill-tag mb-10">Our philosophy</div>
<h2 className="mb-8 text-3xl leading-tight tracking-tight sm:text-4xl md:mb-10 md:text-5xl xl:text-[3.6rem]">
Empathy meets <br /> precision.
</h2>
<div className="space-y-8 text-base font-normal leading-relaxed text-practice-ink-muted md:text-lg">
<p>
At our practice, people come first. We understand that surgical procedures often
come with uncertainty. That is why we place the greatest value on honest,
transparent and empathetic advice.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-6">
{[
{ text: "Individual care", icon: Heart },
{ text: "Honest advice", icon: MessageSquare },
{ text: "Utmost diligence", icon: ShieldCheck },
{ text: "Modern technology", icon: Zap },
].map((item, i) => (
<div
key={i}
className="group flex items-center gap-4 rounded-xl border border-gray-100/50 bg-practice-surface p-4 transition-all hover:border-gray-200 sm:p-5"
>
<div className="w-8 h-8 bg-white rounded-md flex items-center justify-center shadow-soft group-hover:bg-practice-ink transition-all">
<item.icon
className="text-practice-ink group-hover:text-white"
size={16}
/>
</div>
<span className="text-[11px] font-medium uppercase tracking-wider text-practice-ink sm:text-xs">
{item.text}
</span>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</section>
{/* Location & directions */}
<section
id="kontakt"
className="bg-[linear-gradient(180deg,#f8f8f7_0%,#f3f3f1_100%)] py-24 md:py-40 xl:py-44"
>
<div className="container-custom">
<div className="grid grid-cols-1 items-start gap-16 lg:grid-cols-[0.9fr_1.1fr] lg:gap-24 xl:grid-cols-[0.82fr_1.18fr] xl:gap-28">
<div className="xl:max-w-[36rem]">
<div className="pill-tag mb-8">Directions & contact</div>
<h2 className="mb-6 text-3xl leading-tight tracking-tight sm:text-4xl md:text-5xl xl:text-[3.6rem]">
How to reach <br /> our practice.
</h2>
<p className="max-w-xl text-base leading-relaxed text-practice-ink-muted md:text-lg">
Whether it is a first appointment, a follow-up or a specific question, we want
getting in touch to be just as clear and pleasant as the care itself.
</p>
<div className="mt-12 grid gap-5">
<div className="grid gap-5 sm:grid-cols-2">
<div className="rounded-[1.75rem] border border-white/80 bg-white/92 p-5 shadow-soft backdrop-blur-sm sm:p-6">
<div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-practice-ink text-white shadow-soft">
<Phone size={20} />
</div>
<h4 className="mb-2 text-lg font-medium tracking-tight">Contact</h4>
<div className="space-y-3 text-sm leading-relaxed text-practice-ink-muted">
<a
href="tel:03012345670"
className="block text-practice-ink transition-colors hover:text-practice-accent"
>
{practiceContact.phone}
</a>
<a
href={`mailto:${practiceContact.email}`}
className="block transition-colors hover:text-practice-ink"
>
{practiceContact.email}
</a>
</div>
</div>
<div className="rounded-[1.75rem] border border-white/80 bg-white/92 p-5 shadow-soft backdrop-blur-sm sm:p-6">
<div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-practice-ink text-white shadow-soft">
<Clock size={20} />
</div>
<h4 className="mb-2 text-lg font-medium tracking-tight">Opening hours</h4>
<div className="space-y-1 text-sm leading-relaxed text-practice-ink-muted">
{practiceContact.hours.map((line) => (
<p key={line}>{line}</p>
))}
<p className="pt-2 text-practice-ink">By appointment.</p>
</div>
</div>
</div>
</div>
<div className="mt-10 flex flex-wrap gap-4">
<a href="#" className="btn-primary w-full sm:w-auto">
Plan your route <ArrowRight size={18} />
</a>
<a href="#termin" className="btn-secondary w-full sm:w-auto">
Request appointment
</a>
</div>
</div>
<div className="relative overflow-hidden rounded-[2rem] border border-white/70 bg-white p-3 shadow-medium sm:p-4 md:rounded-[2.25rem] xl:p-5">
<div className="relative min-h-[24rem] overflow-hidden rounded-[1.6rem] bg-practice-surface sm:min-h-[30rem] md:min-h-[42rem] md:rounded-[1.8rem] xl:min-h-[48rem]">
<img
src="/templates/praxis-modern/praxis-yorkhouse.webp"
alt="Exterior view of the practice building at the location"
className="absolute inset-0 h-full w-full object-cover object-center"
loading="lazy"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/58 via-black/15 to-white/10" />
<div className="absolute left-4 top-4 rounded-full bg-white/85 px-3 py-2 text-[11px] font-medium uppercase tracking-[0.2em] text-practice-ink backdrop-blur-md sm:left-6 sm:top-6 sm:px-4 sm:text-xs">
Parkforum
</div>
<div className="absolute bottom-4 left-4 right-4 sm:bottom-6 sm:left-6 sm:right-6">
<div className="max-w-xl rounded-[1.5rem] border border-white/20 bg-white/92 p-5 shadow-soft backdrop-blur-md sm:rounded-[1.65rem] sm:p-6">
<div className="mb-3 flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-practice-ink text-white">
<MapPin size={18} />
</div>
<div>
<p className="text-xs uppercase tracking-[0.2em] text-practice-ink-muted">
Practice location
</p>
<p className="text-lg font-medium tracking-tight">Parkforum</p>
</div>
</div>
<div className="space-y-1 text-sm leading-relaxed text-practice-ink-muted">
<p>Lindenallee 24</p>
<p>12045 Musterstadt</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* FAQ */}
<section id="faq" className="bg-white py-24 md:py-32 xl:py-36">
<div className="container-custom">
<div className="grid gap-12 lg:grid-cols-[0.78fr_1.22fr] lg:gap-20 xl:gap-24">
<div className="lg:max-w-[28rem]">
<div className="pill-tag mb-8">FAQ</div>
<h2 className="mb-6 text-3xl leading-tight tracking-tight sm:text-4xl md:text-5xl xl:text-[3.6rem]">
Common questions <br /> before your visit.
</h2>
<p className="max-w-xl text-base leading-relaxed text-practice-ink-muted md:text-lg">
The most important information about your first appointment, scheduling and what
to expect, at a glance.
</p>
</div>
<div className="space-y-4">
{faqItems.map((item, index) => {
const isOpen = openFaq === index;
return (
<div
key={item.question}
className="overflow-hidden rounded-[1.75rem] border border-black/6 bg-practice-surface shadow-[0_14px_32px_rgba(15,23,42,0.04)]"
>
<button
type="button"
onClick={() => setOpenFaq(isOpen ? -1 : index)}
className="flex w-full items-center justify-between gap-6 px-6 py-5 text-left sm:px-8 sm:py-6"
aria-expanded={isOpen}
>
<span className="text-lg font-medium tracking-tight text-practice-ink sm:text-xl">
{item.question}
</span>
<span
className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white text-practice-ink shadow-soft transition-transform ${isOpen ? "rotate-45" : ""}`}
>
<Plus size={18} />
</span>
</button>
<div
className={`grid transition-all duration-300 ease-out ${isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`}
>
<div className="overflow-hidden">
<p className="px-6 pb-6 text-sm leading-relaxed text-practice-ink-muted sm:px-8 sm:pb-8 sm:text-base">
{item.answer}
</p>
</div>
</div>
</div>
);
})}
</div>
</div>
</div>
</section>
{/* Reviews */}
<section className="overflow-hidden bg-practice-surface py-24 md:py-32 xl:py-36">
<div className="container-custom">
<div
className="relative rounded-3xl bg-white p-6 shadow-soft sm:p-8 md:p-12 xl:p-16 2xl:p-20"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
onFocus={() => setIsHovered(true)}
onBlur={() => setIsHovered(false)}
>
<div
className="absolute right-6 top-6 hidden text-practice-ink/5 md:block"
aria-hidden="true"
>
<MessageSquare size={100} strokeWidth={1} />
</div>
<div className="relative z-10 mx-auto max-w-4xl xl:max-w-5xl">
<div className="mb-8 flex flex-col gap-4 sm:mb-12 sm:flex-row sm:items-center sm:justify-between">
<div>
<div className="pill-tag">Patient voices</div>
<h2 className="mt-5 text-3xl leading-tight tracking-tight text-practice-ink md:text-4xl xl:text-[3.2rem]">
Voices from the practice.
</h2>
</div>
<div className="flex gap-2">
<button
onClick={() =>
setCurrentTestimonial(
(prev) => (prev - 1 + testimonials.length) % testimonials.length,
)
}
className="flex h-10 w-10 items-center justify-center rounded-full border border-gray-200 transition-colors hover:bg-practice-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-practice-ink"
aria-label="Previous patient voice"
>
<ChevronLeft size={18} className="text-practice-ink" aria-hidden="true" />
</button>
<button
onClick={() =>
setCurrentTestimonial((prev) => (prev + 1) % testimonials.length)
}
className="flex h-10 w-10 items-center justify-center rounded-full border border-gray-200 transition-colors hover:bg-practice-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-practice-ink"
aria-label="Next patient voice"
>
<ChevronRight size={18} className="text-practice-ink" aria-hidden="true" />
</button>
</div>
</div>
<div className="relative min-h-[220px] sm:min-h-[200px]" aria-live="polite">
<div
key={currentTestimonial}
className="flex flex-col items-start gap-6 md:flex-row md:items-center md:gap-10"
>
<div className="h-16 w-16 shrink-0 overflow-hidden rounded-full border-4 border-practice-surface shadow-medium md:h-24 md:w-24">
<img
src={testimonials[currentTestimonial].image}
alt={testimonials[currentTestimonial].name}
className="h-full w-full object-cover object-center"
loading="lazy"
/>
</div>
<div>
<p className="mb-6 text-lg font-normal leading-relaxed text-practice-ink md:text-2xl">
"{testimonials[currentTestimonial].quote}"
</p>
<div>
<div className="text-lg font-medium">
{testimonials[currentTestimonial].name}
</div>
<div className="mt-1 text-xs font-medium uppercase tracking-widest text-practice-ink-muted">
{testimonials[currentTestimonial].role}
</div>
</div>
</div>
</div>
</div>
<div
className="mt-8 flex justify-center gap-2 md:mt-12 md:justify-start"
role="tablist"
aria-label="Patient voices navigation"
>
{testimonials.map((_, idx) => (
<button
key={idx}
role="tab"
aria-selected={currentTestimonial === idx}
onClick={() => setCurrentTestimonial(idx)}
className={`h-1.5 rounded-full transition-all duration-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-practice-ink focus-visible:ring-offset-2 ${
currentTestimonial === idx ? "w-8 bg-practice-ink" : "w-2 bg-gray-300"
}`}
aria-label={`Go to patient voice ${idx + 1}`}
/>
))}
</div>
</div>
</div>
</div>
</section>
{/* Online booking */}
<section
id="termin"
className="bg-[linear-gradient(180deg,#f8f7f4_0%,#ffffff_100%)] py-24 md:py-32 xl:py-36"
>
<div className="container-custom">
<div className="relative overflow-hidden rounded-[2rem] border border-white/8 bg-[linear-gradient(145deg,#1a1a1a_0%,#202020_48%,#121212_100%)] p-6 text-white shadow-[0_32px_80px_rgba(0,0,0,0.28)] sm:p-8 md:p-10 lg:p-12 xl:p-14">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.12),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.04),transparent_45%)]" />
<div className="absolute inset-x-8 top-0 h-px bg-white/12" />
<div className="relative z-10 grid items-start gap-8 lg:grid-cols-[minmax(0,0.85fr)_minmax(0,1.15fr)] lg:gap-10 xl:gap-12">
<div className="min-w-0">
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/6 px-4 py-2 text-[11px] font-medium uppercase tracking-[0.24em] text-white/65">
<Calendar size={14} />
Scheduling
</div>
<h2 className="mb-6 max-w-[16ch] text-[2.1rem] font-medium leading-[1] tracking-tight text-white sm:text-[2.4rem] md:text-[2.8rem] xl:text-[3.05rem]">
<span className="block">Quick and discreet</span>
<span className="block text-white/72">to your consultation</span>
</h2>
<p className="mb-8 max-w-xl text-base font-normal leading-relaxed text-white/72 md:text-lg">
For surgical consultations you can send your request right here. Aesthetic
appointments are conveniently coordinated online through LUMEA Aesthetics.
</p>
<div className="grid gap-4">
<div className="rounded-[1.5rem] border border-white/10 bg-white/6 p-5 sm:p-6">
<div className="mb-4 flex h-11 w-11 items-center justify-center rounded-2xl bg-white text-practice-ink">
<Phone size={18} />
</div>
<div className="text-[11px] font-medium uppercase tracking-[0.24em] text-white/55">
Contact the practice
</div>
<div className="mt-2 text-lg font-medium tracking-tight text-white">
{practiceContact.phone}
</div>
<p className="mt-3 text-sm leading-relaxed text-white/65">
For surgical matters, you can also get in touch by phone.
</p>
</div>
<a
href={practiceContact.aestheticBooking}
className="group rounded-[1.5rem] border border-white/10 bg-white/6 p-5 text-white transition-colors hover:border-white/25 hover:bg-white/8 sm:p-6"
>
<div className="flex items-start justify-between gap-4">
<div className="min-w-0">
<div className="inline-flex items-center gap-2 rounded-full bg-white/8 px-3 py-1 text-[10px] font-medium uppercase tracking-[0.22em] text-white/60">
<Heart size={12} />
Aesthetic appointments
</div>
<div className="mt-4 text-[1.35rem] font-semibold tracking-[0.14em] text-white sm:text-[1.5rem]">
LUMEA AESTHETICS
</div>
<p className="mt-3 text-sm leading-relaxed text-white/65">
Consultations in the aesthetic area are handled directly through the
external booking area of LUMEA Aesthetics.
</p>
</div>
<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-white text-practice-ink transition-transform duration-300 group-hover:translate-x-0.5">
<ArrowRight size={18} />
</div>
</div>
<div className="mt-5 flex items-center justify-between rounded-[1.1rem] bg-black/20 px-4 py-3 text-sm font-medium text-white">
<span>Go to online booking</span>
<ArrowRight
size={16}
className="transition-transform duration-300 group-hover:translate-x-0.5"
/>
</div>
</a>
</div>
</div>
{/* Booking Form */}
<div className="min-w-0">
<BookingForm />
</div>
</div>
</div>
</div>
</section>
</main>
{/* Footer */}
<footer className="overflow-hidden bg-[linear-gradient(180deg,#171717_0%,#0f0f0f_100%)] pb-12 pt-24 text-white md:pb-16 md:pt-32 xl:pt-36">
<div className="container-custom">
<div className="mb-14 rounded-[2rem] border border-white/8 bg-white/[0.03] p-8 shadow-[0_28px_80px_rgba(0,0,0,0.22)] backdrop-blur-sm sm:p-10 md:mb-20 xl:p-12">
<div className="mb-12 grid grid-cols-1 gap-12 md:grid-cols-[1.2fr_0.8fr] md:gap-16 lg:grid-cols-[1.15fr_0.65fr_0.65fr_0.8fr] lg:gap-14">
<div className="flex flex-col gap-8">
<div className="inline-flex">
<span className="font-display text-2xl font-semibold tracking-tight text-white sm:text-[1.75rem]">
Praxis Nordlicht
</span>
</div>
<p className="max-w-md leading-relaxed font-normal text-base text-white/62">
Your specialist surgical practice. Skilled treatment and personal care at the
Parkforum.
</p>
<div className="grid gap-4 sm:grid-cols-2">
<a
href="#termin"
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white px-5 py-4 text-sm font-medium text-practice-ink transition-colors hover:bg-practice-muted"
>
Request appointment <ArrowRight size={16} />
</a>
<a
href={practiceContact.profile}
className="inline-flex items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/[0.04] px-5 py-4 text-sm font-medium text-white transition-colors hover:bg-white/[0.08]"
>
Practice profile <ArrowRight size={16} />
</a>
</div>
<div className="flex items-center gap-4">
<div
className="flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-gray-400"
aria-hidden="true"
>
<Instagram size={18} />
</div>
<div
className="flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-gray-400"
aria-hidden="true"
>
<Facebook size={18} />
</div>
<div
className="flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-gray-400"
aria-hidden="true"
>
<Linkedin size={18} />
</div>
</div>
</div>
<div>
<h4 className="mb-8 text-xs font-medium uppercase tracking-[0.34em] text-white/35">
Navigation
</h4>
<ul className="space-y-4 text-sm font-medium text-white/58">
<li>
<a
href="#top"
className="transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-sm"
>
Home
</a>
</li>
<li>
<a
href="#fachbereiche"
className="transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-sm"
>
Specialties
</a>
</li>
<li>
<a
href="#praxis"
className="transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-sm"
>
About the practice
</a>
</li>
<li>
<a
href="#faq"
className="transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-sm"
>
FAQ
</a>
</li>
<li>
<a
href="#kontakt"
className="transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-sm"
>
Contact & directions
</a>
</li>
</ul>
</div>
<div>
<h4 className="mb-8 text-xs font-medium uppercase tracking-[0.34em] text-white/35">
Specialties
</h4>
<ul className="space-y-4 text-sm font-medium text-white/58">
<li>
<a
href="#hand"
className="transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-sm"
>
Hand Surgery
</a>
</li>
<li>
<a
href="#aesthetik"
className="transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-sm"
>
Aesthetic Surgery
</a>
</li>
<li>
<a
href="#plastisch"
className="transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-sm"
>
Plastic Surgery
</a>
</li>
<li>
<a
href="#allgemein"
className="transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-sm"
>
General Surgery
</a>
</li>
</ul>
</div>
<div>
<h4 className="mb-8 text-xs font-medium uppercase tracking-[0.34em] text-white/35">
Contact
</h4>
<ul className="space-y-6 text-sm font-medium text-white/58">
<li className="flex items-start gap-4">
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-white/5">
<Phone size={16} className="text-white/45" />
</div>
<span className="pt-1 text-base text-white/78">{practiceContact.phone}</span>
</li>
<li className="flex items-start gap-4">
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-white/5">
<MapPin size={16} className="text-white/45" />
</div>
<span className="pt-1 text-base leading-relaxed text-white/78">
Lindenallee 24 <br /> 12045 Musterstadt
</span>
</li>
<li className="flex items-start gap-4">
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-white/5">
<UserCheck size={16} className="text-white/45" />
</div>
<a
href={practiceContact.profile}
className="pt-1 text-base text-white/78 transition-colors hover:text-white"
>
Practice profile
</a>
</li>
</ul>
</div>
</div>
<div className="flex flex-col items-start justify-between gap-6 border-t border-white/10 pt-8 text-xs font-medium uppercase tracking-[0.22em] text-white/35 md:flex-row md:items-center">
<p>© 2026 Praxis Nordlicht. All rights reserved.</p>
<div className="flex flex-wrap gap-6 md:gap-10">
<span>Imprint</span>
<span>Privacy</span>
</div>
</div>
</div>
</div>
</footer>
</div>
);
}
FAQ
Häufige Fragen
Eine kuratierte Landingpage aus aufeinander abgestimmten Sections der Library, in sinnvoller Reihenfolge von Hero bis Footer. Du kopierst die Sections einzeln und setzt sie mit dem Kompositions-Snippet zusammen.
Deine Frage war nicht dabei? Wir helfen gern weiter.
Kontakt aufnehmen