Add react-vertical-timeline-component and corresponding TypeScript types to demo-2 dependencies
This commit is contained in:
154
lawfirm-demos/demo-2/app/about/page.tsx
Normal file
154
lawfirm-demos/demo-2/app/about/page.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
1865
lawfirm-demos/demo-2/package-lock.json
generated
1865
lawfirm-demos/demo-2/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -19,6 +19,7 @@
|
||||
"next": "15.3.4",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-vertical-timeline-component": "^3.5.3",
|
||||
"tailwind-merge": "^3.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
Reference in New Issue
Block a user