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",
|
"next": "15.3.4",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
|
"react-vertical-timeline-component": "^3.5.3",
|
||||||
"tailwind-merge": "^3.3.1"
|
"tailwind-merge": "^3.3.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
Reference in New Issue
Block a user