128 lines
6.0 KiB
TypeScript
128 lines
6.0 KiB
TypeScript
// app/page.tsx
|
||
'use client';
|
||
|
||
import {motion} from 'framer-motion';
|
||
import Link from 'next/link';
|
||
import Image from 'next/image';
|
||
|
||
export default function HomePage() {
|
||
return (
|
||
<div className="flex flex-col min-h-screen">
|
||
<motion.div
|
||
initial={{opacity: 0, y: 20}}
|
||
animate={{opacity: 1, y: 0}}
|
||
transition={{duration: 0.6}}
|
||
className="space-y-24 pt-32 pb-16 px-4 md:px-12 lg:px-24 bg-[#f9f9f9] text-gray-900"
|
||
>
|
||
{/* Hero Section mit Hintergrundbild */}
|
||
<section className="relative text-center text-white h-[70vh] rounded-xl overflow-hidden shadow-lg">
|
||
<Image
|
||
src="/images/hero.jpeg"
|
||
alt="Anwaltskanzlei Hintergrund"
|
||
fill
|
||
className="object-cover brightness-[0.4]"
|
||
quality={90}
|
||
/>
|
||
<div className="relative z-10 flex flex-col justify-center items-center h-full px-4">
|
||
<h1 className="text-4xl md:text-6xl font-bold mb-6">Ihre Kanzlei für Arbeits-, Familien- und
|
||
Vertragsrecht</h1>
|
||
<p className="text-lg max-w-2xl text-gray-100">
|
||
Persönliche Betreuung. Klare Kommunikation. Effektive Lösungen für Ihr Anliegen.
|
||
</p>
|
||
<Link href="/kontakt/">
|
||
<motion.button
|
||
whileHover={{scale: 1.05}}
|
||
whileTap={{scale: 0.95}}
|
||
className="mt-6 px-8 py-3 bg-blue-700 text-white rounded-xl shadow hover:bg-blue-800 transition"
|
||
>
|
||
Kontakt aufnehmen
|
||
</motion.button>
|
||
</Link>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Divider */}
|
||
<div className="w-full h-[2px] bg-gray-300"/>
|
||
|
||
{/* Leistungen */}
|
||
<section>
|
||
<h2 className="text-3xl font-bold text-center mb-12">Unsere Schwerpunkte</h2>
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
{[
|
||
{
|
||
title: 'Arbeitsrecht',
|
||
desc: 'Kündigung, Abmahnung, Aufhebungsvertrag – wir setzen Ihre Rechte durch.'
|
||
},
|
||
{
|
||
title: 'Familienrecht',
|
||
desc: 'Trennung, Scheidung, Unterhalt – wir stehen Ihnen zur Seite.'
|
||
},
|
||
{
|
||
title: 'Vertragsrecht',
|
||
desc: 'Beratung & Gestaltung von Verträgen für Privatpersonen und Unternehmen.'
|
||
},
|
||
].map(({title, desc}) => (
|
||
<motion.div
|
||
key={title}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
initial={{opacity: 0, y: 30}}
|
||
transition={{duration: 0.4}}
|
||
viewport={{once: true}}
|
||
className="bg-white p-6 rounded-xl shadow hover:shadow-md"
|
||
>
|
||
<h3 className="text-xl font-semibold mb-2">{title}</h3>
|
||
<p className="text-gray-600">{desc}</p>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Divider */}
|
||
<div className="w-full h-[2px] bg-gray-300"/>
|
||
|
||
{/* Über die Kanzlei */}
|
||
<section className="max-w-4xl mx-auto text-center">
|
||
<h2 className="text-3xl font-bold mb-6">Über unsere Kanzlei</h2>
|
||
<p className="text-gray-700 text-lg">
|
||
Seit über 15 Jahren beraten und vertreten wir Mandantinnen und Mandanten aus ganz Deutschland.
|
||
Unsere Kanzlei steht für Kompetenz, Integrität und persönliche Betreuung. Wir nehmen uns Zeit
|
||
für Ihre Anliegen und entwickeln individuelle Strategien – effizient und zielorientiert.
|
||
</p>
|
||
</section>
|
||
|
||
{/* Divider */}
|
||
<div className="w-full h-[2px] bg-gray-300"/>
|
||
|
||
{/* Vorteile */}
|
||
<section>
|
||
<h2 className="text-3xl font-bold text-center mb-10">Ihre Vorteile mit uns</h2>
|
||
<div className="grid md:grid-cols-3 gap-8 text-center">
|
||
{[
|
||
'Direkte & ehrliche Kommunikation',
|
||
'Schnelle Terminvergabe',
|
||
'Fachanwälte mit jahrelanger Erfahrung',
|
||
].map((vorteil) => (
|
||
<div key={vorteil} className="bg-white p-6 rounded-xl shadow">
|
||
<p className="text-gray-800 font-medium">{vorteil}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Divider */}
|
||
<div className="w-full h-[2px] bg-gray-300"/>
|
||
|
||
{/* Call to Action */}
|
||
<section className="text-center">
|
||
<h2 className="text-2xl font-bold mb-4">Vereinbaren Sie jetzt ein unverbindliches Erstgespräch</h2>
|
||
<Link href="/kontakt/">
|
||
<button
|
||
className="px-8 py-3 bg-blue-700 text-white rounded-xl hover:bg-blue-800 transition shadow">
|
||
Jetzt Termin sichern
|
||
</button>
|
||
</Link>
|
||
</section>
|
||
</motion.div>
|
||
</div>
|
||
);
|
||
} |