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

2025-06-23 00:52:18 +09:00
parent 9052cab43d
commit 83774715a0
6 changed files with 298 additions and 43 deletions
--- a/lawfirm-demos/demo-1/components/LawyerModal.tsx
+++ b/lawfirm-demos/demo-1/components/LawyerModal.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import {motion, AnimatePresence} from 'framer-motion';
+import {useEffect} from 'react';
+
+export default function LawyerModal({
+                                        lawyer,
+                                        onClose,
+                                    }: Readonly<{
+    lawyer: any;
+    onClose: () => void;
+}>) {
+    // Close with Escape
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') onClose();
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [onClose]);
+
+    return (
+        <AnimatePresence>
+            <motion.div
+                initial={{opacity: 0}}
+                animate={{opacity: 1}}
+                exit={{opacity: 0}}
+                className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex justify-center items-center p-4 overflow-y-auto"
+                onClick={onClose}
+            >
+                <motion.div
+                    initial={{y: 40, opacity: 0}}
+                    animate={{y: 0, opacity: 1}}
+                    exit={{y: 30, opacity: 0}}
+                    transition={{duration: 0.3, ease: 'easeOut'}}
+                    onClick={(e) => e.stopPropagation()}
+                    className="bg-white rounded-xl max-w-3xl w-full p-8 relative text-gray-800 shadow-xl"
+                >
+                    <button
+                        onClick={onClose}
+                        className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 text-2xl font-bold"
+                    >
+                        ×
+                    </button>
+
+                    <div className="flex flex-col md:flex-row gap-6">
+                        {lawyer.image && (
+                            <img
+                                src={lawyer.image}
+                                alt={lawyer.name}
+                                className="w-full md:w-1/3 h-auto object-cover rounded-md"
+                            />
+                        )}
+
+                        <div className="flex-1 space-y-4">
+                            <div>
+                                <h2 className="text-2xl font-bold text-red-700">{lawyer.name}</h2>
+                                <p className="text-sm text-gray-500">{lawyer.short}</p>
+                            </div>
+
+                            {lawyer.specialties?.length > 0 && (
+                                <div>
+                                    <h3 className="font-semibold text-gray-800">Fachgebiete</h3>
+                                    <ul className="list-disc pl-5 text-sm text-gray-700">
+                                        {lawyer.specialties.map((s: string, i: number) => (
+                                            <li key={i}>{s}</li>
+                                        ))}
+                                    </ul>
+                                </div>
+                            )}
+
+                            {lawyer.biography && (
+                                <div>
+                                    <h3 className="font-semibold text-gray-800">Über</h3>
+                                    <p className="text-sm leading-relaxed text-gray-700 whitespace-pre-line">
+                                        {lawyer.biography}
+                                    </p>
+                                </div>
+                            )}
+
+                            {lawyer.personal?.length > 0 && (
+                                <div>
+                                    <h3 className="font-semibold text-gray-800">Zur Person</h3>
+                                    <ul className="list-disc pl-5 text-sm text-gray-700">
+                                        {lawyer.personal.map((p: string, i: number) => (
+                                            <li key={i}>{p}</li>
+                                        ))}
+                                    </ul>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </motion.div>
+            </motion.div>
+        </AnimatePresence>
+    );
+}