Files
demo-websites/lawfirm-demos/demo-1/app/ueber-uns/page.tsx

92 lines
4.3 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
'use client';
import {lawyers} from '@/app/ueber-uns/lawyers';
import Divider from '@/components/Divider';
import SubpageHero from '@/components/SubpageHero';
export default function UeberUnsPage() {
return (
<>
<SubpageHero
title="Über uns"
subtitle="Persönlich. Kompetent. Engagiert das Team der Kanzlei Mustermann & Künstler."
/>
<main className="bg-white pt-16 pb-32 px-6 md:px-16 lg:px-36 text-gray-900 space-y-24">
{/* Kanzlei-Intro */}
<section className="max-w-3xl space-y-4">
<p className="text-lg text-gray-700">
Die Kanzlei Mustermann & Künstler steht für rechtliche Exzellenz, persönliche Beratung und
langjährige Erfahrung. Wir vereinen spezialisierte Fachkenntnisse mit menschlichem Gespür für
individuelle Lebenssituationen.
</p>
<p className="text-lg text-gray-700">
Unser Anspruch ist es, Sie transparent, ehrlich und effizient zu beraten und zu vertreten
unabhängig davon, ob es sich um eine komplexe Nachlassregelung, eine arbeitsrechtliche
Auseinandersetzung oder familiäre Fragestellungen handelt.
</p>
</section>
{/* Anwälte */}
{lawyers.map((lawyer, i) => (
<div key={i}>
<section
className={`flex flex-col md:flex-row ${
i % 2 === 1 ? 'md:flex-row-reverse' : ''
} gap-8 md:items-start`}
>
{/* image */}
<div className="w-full md:w-1/3">
<img
src={lawyer.image}
alt={lawyer.name}
className="w-full h-auto rounded-xl shadow-sm object-cover"
/>
</div>
{/* content */}
<div className="w-full md:w-2/3 space-y-4">
<h2 className="text-2xl font-bold text-red-700">{lawyer.name}</h2>
<p className="text-base text-gray-800">{lawyer.short}</p>
{lawyer.biography && (
<div>
<h3 className="font-semibold mb-1">Über</h3>
<p className="text-sm text-gray-700 whitespace-pre-line">
{lawyer.biography}
</p>
</div>
)}
{lawyer.specialties?.length > 0 && (
<div>
<h3 className="font-semibold mb-1">Fachgebiete</h3>
<ul className="list-disc pl-5 text-sm text-gray-700 space-y-1">
{lawyer.specialties.map((s, idx) => (
<li key={idx}>{s}</li>
))}
</ul>
</div>
)}
{lawyer.personal?.length > 0 && (
<div>
<h3 className="font-semibold mb-1">Zur Person</h3>
<ul className="list-disc pl-5 text-sm text-gray-700 space-y-1">
{lawyer.personal.map((p, idx) => (
<li key={idx}>{p}</li>
))}
</ul>
</div>
)}
</div>
</section>
{i < lawyers.length - 1 && <Divider/>}
</div>
))}
</main>
</>
);
}