87 lines
3.1 KiB
TypeScript
87 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import {motion} from "framer-motion";
|
|
import {
|
|
Briefcase,
|
|
FileText,
|
|
Gavel,
|
|
Building2,
|
|
} from "lucide-react";
|
|
|
|
const services = [
|
|
{
|
|
title: "Allgemeines Zivilrecht",
|
|
description:
|
|
"Kompetente Vertretung bei Streitigkeiten zwischen Privatpersonen.",
|
|
icon: Gavel,
|
|
},
|
|
{
|
|
title: "Vertragsprüfung",
|
|
description:
|
|
"Prüfung, Anpassung und rechtssichere Gestaltung Ihrer Verträge.",
|
|
icon: FileText,
|
|
},
|
|
{
|
|
title: "Arbeitsrecht",
|
|
description:
|
|
"Beratung für Arbeitnehmer und Arbeitgeber bei Kündigung, Abmahnung u.a.",
|
|
icon: Briefcase,
|
|
},
|
|
{
|
|
title: "Mietrecht",
|
|
description:
|
|
"Rechtliche Unterstützung bei Mieterhöhungen, Kündigung & Nebenkosten.",
|
|
icon: Building2,
|
|
},
|
|
];
|
|
|
|
export default function Leistungen() {
|
|
return (
|
|
<section className="py-20 px-4 bg-white dark:bg-gray-950">
|
|
<div className="max-w-6xl mx-auto">
|
|
{/* Titel & Divider */}
|
|
<motion.div
|
|
className="mb-12"
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
transition={{duration: 0.5}}
|
|
viewport={{once: true}}
|
|
>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-left text-gray-900 dark:text-white">
|
|
Leistungen
|
|
</h2>
|
|
<div className="mt-2 w-20 h-1 bg-yellow-500 rounded"/>
|
|
</motion.div>
|
|
|
|
{/* Grid */}
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
{services.map(({title, description, icon: Icon}, i) => (
|
|
<motion.div
|
|
key={title}
|
|
className="p-6 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow"
|
|
initial={{opacity: 0, y: 30}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
transition={{delay: i * 0.1, duration: 0.5}}
|
|
viewport={{once: true}}
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-2 rounded-md bg-primary/10 text-primary">
|
|
<Icon className="w-6 h-6"/>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
|
|
{title}
|
|
</h3>
|
|
<p className="text-sm text-gray-700 dark:text-gray-300">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|