77 lines
3.1 KiB
TypeScript
77 lines
3.1 KiB
TypeScript
'use client';
|
||
|
||
import {motion} from 'framer-motion';
|
||
import Link from 'next/link';
|
||
import Links from "@/data/Links";
|
||
|
||
const services = [
|
||
{
|
||
title: 'Arbeitsrecht',
|
||
description:
|
||
'Ob Kündigung, Aufhebungsvertrag oder Streit mit dem Arbeitgeber – wir beraten Sie rund um Ihre Rechte und Pflichten im Arbeitsverhältnis.',
|
||
},
|
||
{
|
||
title: 'Familienrecht',
|
||
description:
|
||
'Trennung, Scheidung oder Unterhalt? Wir unterstützen Sie bei allen rechtlichen Fragen rund um Familie, Ehe und Kinder – mit Empathie und Erfahrung.',
|
||
},
|
||
{
|
||
title: 'Vertragsrecht',
|
||
description:
|
||
'Von der Vertragsprüfung bis zur rechtssicheren Gestaltung: Wir helfen Ihnen, Ihre Interessen in Verträgen klar und wirksam zu verankern.',
|
||
},
|
||
];
|
||
|
||
export default function ServicesSection() {
|
||
return (
|
||
<section className="bg-white py-24 px-6 md:px-16 lg:px-36">
|
||
<div className="max-w-3xl mb-16">
|
||
<motion.h2
|
||
initial={{opacity: 0, y: 20}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
transition={{duration: 0.6}}
|
||
viewport={{once: true}}
|
||
className="text-4xl font-extrabold tracking-tight text-gray-900"
|
||
>
|
||
Unsere Fachgebiete
|
||
</motion.h2>
|
||
<motion.p
|
||
initial={{opacity: 0, y: 20}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
transition={{duration: 0.6, delay: 0.2}}
|
||
viewport={{once: true}}
|
||
className="mt-4 text-lg text-gray-600"
|
||
>
|
||
Wir bieten fundierte Beratung und engagierte Vertretung in verschiedenen Kernbereichen des Rechts.
|
||
Unsere Spezialisierung ist Ihr Vorteil.
|
||
</motion.p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||
{services.map((service, index) => (
|
||
<motion.div
|
||
key={service.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 border-gray-200 bg-neutral-100 hover:bg-white rounded-2xl shadow-sm hover:shadow-md p-6 transition"
|
||
>
|
||
<h3 className="text-xl font-bold mb-3 text-blue-400">{service.title}</h3>
|
||
<p className="text-gray-700 text-base leading-relaxed">{service.description}</p>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="max-w-3xl">
|
||
<Link
|
||
href={Links.legalFields}
|
||
className="inline-block text-gray-600 font-medium text-lg hover:underline transition"
|
||
>
|
||
Mehr erfahren zu allen Rechtsgebieten →
|
||
</Link>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|