Introduce team section with lawyers data; create reusable LawyerCard, LawyerProfile, LawyerModal, and Divider components; refactor Über Uns page layout and content.

lawfirm-demos/demo-1/components/LawyerProfile.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+export default function LawyerProfile({lawyer, reverse = false}: Readonly<{ lawyer: any; reverse?: boolean }>) {
+    return (
+        <section className={`flex flex-col md:flex-row ${reverse ? 'md:flex-row-reverse' : ''} gap-10 md:items-start`}>
+            {/* image */}
+            <div className="w-full md:w-1/3">
+                <img
+                    src={lawyer.image}
+                    alt={lawyer.name}
+                    className="w-full h-auto rounded-xl shadow-sm object-cover"
+                />
+            </div>
+
+            {/* content */}
+            <div className="w-full md:w-2/3 space-y-6 text-[17px] text-gray-800 leading-relaxed">
+                <div>
+                    <h2 className="text-2xl font-bold text-red-700">{lawyer.name}</h2>
+                    <p>{lawyer.short}</p>
+                </div>
+
+                {lawyer.biography && (
+                    <div>
+                        <h3 className="font-semibold mb-1">Zur Person</h3>
+                        <p className="whitespace-pre-line">{lawyer.biography}</p>
+                    </div>
+                )}
+
+                {lawyer.specialties?.length > 0 && (
+                    <div>
+                        <h3 className="font-semibold mb-1">Fachgebiete</h3>
+                        <ul className="list-disc pl-5 space-y-1">
+                            {lawyer.specialties.map((s: string, i: number) => (
+                                <li key={i}>{s}</li>
+                            ))}
+                        </ul>
+                    </div>
+                )}
+
+                {lawyer.personal?.length > 0 && (
+                    <div>
+                        <h3 className="font-semibold mb-1">Ausbildung & Mitgliedschaften</h3>
+                        <ul className="list-disc pl-5 space-y-1">
+                            {lawyer.personal.map((p: string, i: number) => (
+                                <li key={i}>{p}</li>
+                            ))}
+                        </ul>
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+}