154 lines
6.9 KiB
TypeScript
154 lines
6.9 KiB
TypeScript
"use client";
|
||
|
||
import {motion} from "framer-motion";
|
||
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import {
|
||
VerticalTimeline,
|
||
VerticalTimelineElement,
|
||
} from "react-vertical-timeline-component";
|
||
import "react-vertical-timeline-component/style.min.css";
|
||
import {
|
||
Briefcase,
|
||
GraduationCap,
|
||
} from "lucide-react";
|
||
import {Button} from "@/components/ui/button";
|
||
|
||
export default function AboutPage() {
|
||
return (
|
||
<section className="py-20 px-4 bg-white dark:bg-gray-950">
|
||
<div className="max-w-6xl mx-auto space-y-20">
|
||
{/* Einleitung */}
|
||
<motion.div
|
||
className="grid md:grid-cols-2 gap-10 items-center"
|
||
initial={{opacity: 0, y: 30}}
|
||
animate={{opacity: 1, y: 0}}
|
||
transition={{duration: 0.6}}
|
||
>
|
||
<div className="space-y-6">
|
||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">
|
||
Über mich
|
||
</h1>
|
||
<div className="w-20 h-1 bg-yellow-500 rounded"/>
|
||
<p className="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
|
||
Ich bin Max Mustermann, seit über 10 Jahren als Rechtsanwalt in Berlin tätig.
|
||
Mein Schwerpunkt liegt im Zivil-, Vertrags-, Miet- und Arbeitsrecht.
|
||
Mir ist wichtig, juristische Sachverhalte klar, verständlich und lösungsorientiert zu
|
||
vermitteln.
|
||
</p>
|
||
</div>
|
||
<div className="w-full max-w-sm mx-auto">
|
||
<div className="aspect-[3/4] relative rounded-xl overflow-hidden shadow-md">
|
||
<Image
|
||
src="/images/team/mustermann.jpg"
|
||
alt="Max Mustermann"
|
||
fill
|
||
className="object-cover object-top"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Werdegang Timeline */}
|
||
<motion.div
|
||
initial={{opacity: 0, y: 30}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
transition={{duration: 0.6}}
|
||
viewport={{once: true}}
|
||
>
|
||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-10">
|
||
Werdegang
|
||
</h2>
|
||
|
||
<VerticalTimeline lineColor="#e5e7eb">
|
||
<VerticalTimelineElement
|
||
date="2024"
|
||
icon={<Briefcase/>}
|
||
iconStyle={{background: "#facc15", color: "#000"}}
|
||
contentStyle={{
|
||
background: "#fff",
|
||
color: "#000",
|
||
boxShadow: "none",
|
||
border: "1px solid #e5e7eb",
|
||
}}
|
||
>
|
||
<h3 className="font-semibold text-lg">Kanzlei-Gründung in Berlin</h3>
|
||
<p className="text-sm">
|
||
Selbstständig tätig mit Fokus auf Zivil- und Vertragsrecht.
|
||
</p>
|
||
</VerticalTimelineElement>
|
||
|
||
<VerticalTimelineElement
|
||
date="2018–2023"
|
||
icon={<Briefcase/>}
|
||
iconStyle={{background: "#facc15", color: "#000"}}
|
||
contentStyle={{
|
||
background: "#fff",
|
||
color: "#000",
|
||
boxShadow: "none",
|
||
border: "1px solid #e5e7eb",
|
||
}}
|
||
>
|
||
<h3 className="font-semibold text-lg">
|
||
Rechtsanwalt in mittelständischer Kanzlei
|
||
</h3>
|
||
<p className="text-sm">
|
||
Beratung und Vertretung in Arbeits-, Miet- und Zivilrecht.
|
||
</p>
|
||
</VerticalTimelineElement>
|
||
|
||
<VerticalTimelineElement
|
||
date="2016"
|
||
icon={<GraduationCap/>}
|
||
iconStyle={{background: "#facc15", color: "#000"}}
|
||
contentStyle={{
|
||
background: "#fff",
|
||
color: "#000",
|
||
boxShadow: "none",
|
||
border: "1px solid #e5e7eb",
|
||
}}
|
||
>
|
||
<h3 className="font-semibold text-lg">Zweites Staatsexamen</h3>
|
||
<p className="text-sm">
|
||
Abschluss des Referendariats in Berlin.
|
||
</p>
|
||
</VerticalTimelineElement>
|
||
|
||
<VerticalTimelineElement
|
||
date="2014"
|
||
icon={<GraduationCap/>}
|
||
iconStyle={{background: "#facc15", color: "#000"}}
|
||
contentStyle={{
|
||
background: "#fff",
|
||
color: "#000",
|
||
boxShadow: "none",
|
||
border: "1px solid #e5e7eb",
|
||
}}
|
||
>
|
||
<h3 className="font-semibold text-lg">Erstes Staatsexamen</h3>
|
||
<p className="text-sm">
|
||
Studium der Rechtswissenschaften an der Humboldt-Universität Berlin.
|
||
</p>
|
||
</VerticalTimelineElement>
|
||
</VerticalTimeline>
|
||
</motion.div>
|
||
|
||
{/* Call to Action */}
|
||
<motion.div
|
||
className="text-center pt-10"
|
||
initial={{opacity: 0, y: 20}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
transition={{duration: 0.5}}
|
||
viewport={{once: true}}
|
||
>
|
||
<h3 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
|
||
Haben Sie Fragen oder wünschen ein persönliches Gespräch?
|
||
</h3>
|
||
<Link href="/kontakt">
|
||
<Button size="lg">Jetzt Kontakt aufnehmen</Button>
|
||
</Link>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
} |