74 lines
3.0 KiB
TypeScript
74 lines
3.0 KiB
TypeScript
'use client'
|
||
|
||
import {
|
||
VerticalTimeline,
|
||
VerticalTimelineElement,
|
||
} from 'react-vertical-timeline-component'
|
||
import 'react-vertical-timeline-component/style.min.css'
|
||
import {GraduationCap, Briefcase, Building2} from 'lucide-react'
|
||
|
||
export function AboutMeSection() {
|
||
const timeline = [
|
||
{
|
||
date: '2010',
|
||
title: 'Abschluss Bachelor of Laws (LL.B.)',
|
||
desc: 'Studium der Wirtschaftsjuristik an der Hochschule XYZ.',
|
||
icon: <GraduationCap className="w-5 h-5"/>,
|
||
},
|
||
{
|
||
date: '2012',
|
||
title: 'Master Steuerrecht (M.A.)',
|
||
desc: 'Vertiefung im Bereich nationales und internationales Steuerrecht.',
|
||
icon: <GraduationCap className="w-5 h-5"/>,
|
||
},
|
||
{
|
||
date: '2014',
|
||
title: 'Steuerberaterprüfung bestanden',
|
||
desc: 'Zulassung als Steuerberaterin durch die Steuerberaterkammer ABC.',
|
||
icon: <Building2 className="w-5 h-5"/>,
|
||
},
|
||
{
|
||
date: '2015–2020',
|
||
title: 'Tätigkeit in mittelständischer Kanzlei',
|
||
desc: 'Beratung von Unternehmen, Freiberuflern und Privatpersonen.',
|
||
icon: <Briefcase className="w-5 h-5"/>,
|
||
},
|
||
{
|
||
date: 'seit 2021',
|
||
title: 'Eigene Kanzlei in Musterstadt',
|
||
desc: 'Gründung der Steuerkanzlei Mustermann mit Fokus auf digitale Beratung.',
|
||
icon: <Briefcase className="w-5 h-5"/>,
|
||
},
|
||
]
|
||
|
||
return (
|
||
<section id="about" className="py-20 px-6 bg-white">
|
||
<div className="max-w-4xl mx-auto">
|
||
<h2 className="text-3xl font-bold mb-8 text-left">Über mich</h2>
|
||
<p className="text-lg mb-12 text-left">
|
||
Als erfahrene Steuerberaterin begleite ich seit über zehn Jahren Mandanten in sämtlichen
|
||
steuerlichen
|
||
Fragen – transparent, digital und auf Augenhöhe. Meine Schwerpunkte liegen in der vorausschauenden
|
||
Steuergestaltung sowie der Begleitung von Gründern und mittelständischen Unternehmen.
|
||
</p>
|
||
|
||
<VerticalTimeline lineColor="#e5e7eb">
|
||
{timeline.map(({date, title, desc, icon}) => (
|
||
<VerticalTimelineElement
|
||
key={date}
|
||
date={date}
|
||
icon={icon}
|
||
iconStyle={{background: '#0f172a', color: '#fff'}}
|
||
contentStyle={{background: '#f9fafb', color: '#0f172a'}}
|
||
contentArrowStyle={{borderRight: '7px solid #f9fafb'}}
|
||
>
|
||
<h3 className="text-xl font-semibold">{title}</h3>
|
||
<p className="text-sm text-muted-foreground">{desc}</p>
|
||
</VerticalTimelineElement>
|
||
))}
|
||
</VerticalTimeline>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|