68 lines
2.8 KiB
TypeScript
68 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import {motion} from "framer-motion";
|
|
import {Button} from "@/components/ui/button";
|
|
|
|
export default function About() {
|
|
return (
|
|
<section className="py-20 px-4 bg-white dark:bg-gray-950">
|
|
<div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-10 items-center">
|
|
{/* Textbereich */}
|
|
<motion.div
|
|
className="space-y-6"
|
|
initial={{opacity: 0, x: -30}}
|
|
whileInView={{opacity: 1, x: 0}}
|
|
transition={{duration: 0.6}}
|
|
viewport={{once: true}}
|
|
>
|
|
<div>
|
|
<h2 className="text-3xl font-bold text-left text-gray-900 dark:text-white">
|
|
Über mich
|
|
</h2>
|
|
<div className="mt-2 w-20 h-1 bg-yellow-500 rounded"/>
|
|
</div>
|
|
|
|
<p className="text-lg leading-relaxed text-gray-700 dark:text-gray-300 text-left">
|
|
Ich bin Max Mustermann, selbstständiger Rechtsanwalt mit Spezialisierung
|
|
auf Zivilrecht und Vertragsrecht. Seit über 10 Jahren berate und
|
|
vertrete ich Mandanten engagiert, individuell und mit juristischer
|
|
Präzision. Mein Ziel ist es, Ihre Interessen verständlich,
|
|
transparent und durchsetzungsstark zu vertreten.
|
|
</p>
|
|
|
|
{/* Button */}
|
|
<motion.div
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
transition={{duration: 0.4, delay: 0.2}}
|
|
viewport={{once: true}}
|
|
>
|
|
<a href="/about" className="inline-block">
|
|
<Button variant="outline">Mehr über mich</Button>
|
|
</a>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Bildbereich */}
|
|
<motion.div
|
|
className="flex justify-center"
|
|
initial={{opacity: 0, x: 30}}
|
|
whileInView={{opacity: 1, x: 0}}
|
|
transition={{duration: 0.6, delay: 0.2}}
|
|
viewport={{once: true}}
|
|
>
|
|
<div className="w-[260px] h-[360px] relative rounded-xl overflow-hidden shadow-lg">
|
|
<Image
|
|
src="/images/team/mustermann.jpg"
|
|
alt="Max Mustermann"
|
|
fill
|
|
className="object-cover object-top"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|