64 lines
2.7 KiB
TypeScript
64 lines
2.7 KiB
TypeScript
'use client';
|
||
|
||
import {motion} from 'framer-motion';
|
||
import SubpageHero from "@/components/SubpageHero";
|
||
|
||
const rechtsgebiete = [
|
||
{
|
||
title: 'Arbeitsrecht',
|
||
lawyer: 'RA Dr. Mustermann',
|
||
description:
|
||
'Im Arbeitsrecht vertreten wir sowohl Arbeitnehmer:innen als auch Arbeitgeber:innen in allen Fragen rund um das Arbeitsverhältnis.',
|
||
example:
|
||
'Beispiel: Eine Arbeitnehmerin erhält eine fristlose Kündigung und möchte dagegen vorgehen.',
|
||
},
|
||
{
|
||
title: 'Familienrecht',
|
||
lawyer: 'RAin Künstler',
|
||
description:
|
||
'Wir unterstützen Sie in allen familienrechtlichen Angelegenheiten – von Scheidung bis Sorgerecht.',
|
||
example:
|
||
'Beispiel: Ein Ehepaar möchte sich einvernehmlich scheiden lassen und das Umgangsrecht für die Kinder regeln.',
|
||
},
|
||
{
|
||
title: 'Vertragsrecht',
|
||
lawyer: 'RA Dr. Mustermann',
|
||
description:
|
||
'Im Vertragsrecht prüfen und gestalten wir Verträge jeder Art und vertreten Sie bei Streitigkeiten.',
|
||
example:
|
||
'Beispiel: Ein Unternehmer möchte einen Dienstleistungsvertrag rechtssicher aufsetzen lassen.',
|
||
},
|
||
];
|
||
|
||
export default function RechtsgebietePage() {
|
||
return (
|
||
<div>
|
||
<SubpageHero
|
||
title="Unsere Rechtsgebiete"
|
||
subtitle="Ein Überblick über unsere Spezialisierungen und Ansprechpartner:innen."
|
||
/>
|
||
|
||
<main className="bg-white py-24 px-6 md:px-16 lg:px-36 text-gray-900">
|
||
<div className="space-y-16">
|
||
{rechtsgebiete.map((area, index) => (
|
||
<motion.section
|
||
key={area.title}
|
||
initial={{opacity: 0, y: 30}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
viewport={{once: true, amount: 0.2}}
|
||
transition={{duration: 0.6, delay: index * 0.1}}
|
||
className="border-l-4 border-red-600 pl-6"
|
||
>
|
||
<h2 className="text-2xl md:text-3xl font-bold text-red-700 mb-2">{area.title}</h2>
|
||
<p className="text-gray-800 text-base md:text-lg mb-2">{area.description}</p>
|
||
<p className="text-gray-700 text-sm md:text-base mb-1 italic">{area.example}</p>
|
||
<p className="text-sm text-gray-500">Zuständig: <span
|
||
className="font-medium">{area.lawyer}</span></p>
|
||
</motion.section>
|
||
))}
|
||
</div>
|
||
</main>
|
||
</div>
|
||
);
|
||
}
|