All 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 & HealthFull page
The finished page to scroll through, switchable between desktop, tablet and mobile.
Source code
The complete page as a single file. Copy it into ./components and add the component to your route.
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
Frequently asked questions
A curated landing page made of matching library sections in a sensible order from hero to footer. You copy the sections one by one and assemble them with the composition snippet.
Didn't find your question? We're happy to help.
Get in touch