Tax Lawfirm Demo 1

lawfirm-demos/tax-lawfirm-demos/tax-lawfirm-demo-1/app/(root)/sections/AboutMeSection.tsx

@@ -0,0 +1,73 @@
+'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>
+    )
+}