Refactor Über Uns page: rename lawyers to team, update structure, content, and layout; enhance animations, add map embed, and integrate DualCTA.

lawfirm-demos/demo-1/app/ueber-uns/page.tsx

@@ -1,8 +1,21 @@
 'use client';
 
-import {lawyers} from '@/app/ueber-uns/lawyers';
+import {team} from '@/data/team';
-import Divider from '@/components/Divider';
 import SubpageHero from '@/components/SubpageHero';
+import {motion} from 'framer-motion';
+import DualCTA from "@/components/DualCTA";
+
+const fadeUp = {
+    hidden: {opacity: 0, y: 40},
+    visible: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            duration: 0.6,
+            ease: 'easeOut',
+        },
+    },
+};
 
 export default function UeberUnsPage() {
     return (
@@ -13,79 +26,120 @@ export default function UeberUnsPage() {
             />
 
             <main className="bg-white pt-16 pb-32 px-6 md:px-16 lg:px-36 text-gray-900 space-y-24">
-                {/* Kanzlei-Intro */}
+                {/* Wer wir sind */}
-                <section className="max-w-3xl space-y-4">
+                <motion.section
-                    <p className="text-lg text-gray-700">
+                    className="max-w-6xl mx-auto space-y-6"
-                        Die Kanzlei Mustermann & Künstler steht für rechtliche Exzellenz, persönliche Beratung und
+                    initial="hidden"
-                        langjährige Erfahrung. Wir vereinen spezialisierte Fachkenntnisse mit menschlichem Gespür für
+                    whileInView="visible"
-                        individuelle Lebenssituationen.
+                    viewport={{once: true, amount: 0.2}}
+                    variants={fadeUp}
+                >
+                    <h2 className="text-3xl font-semibold text-gray-900">Wer wir sind</h2>
+                    <div className="space-y-6 text-lg text-gray-700">
+                        <p>
+                            Die Rechtsanwälte Mustermann & Künstler Partnerschaft mbB zählt zu den führenden Kanzleien
+                            in Lörrach und besteht derzeit aus sechs Rechtsanwälten. Sie wurde 1954 gegründet und baut
+                            auf langjährige Erfahrung und Tradition.
                         </p>
-                    <p className="text-lg text-gray-700">
+                        <p>
-                        Unser Anspruch ist es, Sie transparent, ehrlich und effizient zu beraten und zu vertreten –
+                            Namensgeber und Mitbegründer war Dr. Winfried Mustermann. Unser über Jahrzehnte gewachsener
-                        unabhängig davon, ob es sich um eine komplexe Nachlassregelung, eine arbeitsrechtliche
+                            Wertekonsens ist geprägt von gegenseitigem Vertrauen, Verlässlichkeit und unternehmerischem
-                        Auseinandersetzung oder familiäre Fragestellungen handelt.
+                            Denken.
                         </p>
-                </section>
+                    </div>
+                </motion.section>
+
+                {/* Wofür wir stehen */}
+                <motion.section
+                    className="max-w-6xl mx-auto space-y-6"
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{once: true, amount: 0.2}}
+                    variants={fadeUp}
+                >
+                    <h2 className="text-3xl font-semibold text-gray-900">Wofür wir stehen</h2>
+                    <div className="space-y-6 text-lg text-gray-700">
+                        <p>
+                            Unsere Rechtsanwälte sind auf ihren Rechtsgebieten hoch spezialisiert und orientieren sich
+                            konsequent am individuellen Mandat. Alle Rechtsanwälte sind Fachanwälte.
+                        </p>
+                        <p>
+                            Wir gewährleisten eine umfassende Beratung und eine qualifizierte Vertretung. Fundierte
+                            juristische Arbeit ist für uns selbstverständlich.
+                        </p>
+                    </div>
+                </motion.section>
+
+                {/* Region */}
+                <motion.section
+                    className="max-w-6xl mx-auto space-y-6"
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{once: true, amount: 0.2}}
+                    variants={fadeUp}
+                >
+                    <h2 className="text-3xl font-semibold text-gray-900">
+                        Wir sind für Sie da
+                    </h2>
+                    <p className="text-lg text-gray-700">
+                        von Freiburg bis Waldshut-Tiengen und deutschlandweit
+                    </p>
+                    <div className="w-full h-[400px] shadow-md rounded-xl overflow-hidden">
+                        <iframe
+                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2693.342189064324!2d7.662139176999193!3d47.614119471193404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4791b69dce6b20f3%3A0x2e9e926c174fbad7!2sKanzlei%20Dr.%20Hitzfeld%20%26%20Kollegen!5e0!3m2!1sen!2sde!4v1719150000000!5m2!1sen!2sde"
+                            width="100%"
+                            height="100%"
+                            allowFullScreen
+                            loading="lazy"
+                            referrerPolicy="no-referrer-when-downgrade"
+                        ></iframe>
+                    </div>
+                </motion.section>
 
                 {/* Anwälte */}
-                {lawyers.map((lawyer, i) => (
+                <motion.section
-                    <div key={i}>
+                    className="max-w-6xl mx-auto space-y-12 text-gray-900"
-                        <section
+                    initial="hidden"
-                            className={`flex flex-col md:flex-row ${
+                    whileInView="visible"
-                                i % 2 === 1 ? 'md:flex-row-reverse' : ''
+                    viewport={{once: true, amount: 0.2}}
-                            } gap-8 md:items-start`}
+                    variants={fadeUp}
+                >
+                    <h2 className="text-3xl font-semibold">Unser Team</h2>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-10">
+                        {team.map((lawyer, i) => (
+                            <motion.div
+                                key={i}
+                                className="flex items-start gap-6"
+                                initial={{opacity: 0, y: 20}}
+                                whileInView={{opacity: 1, y: 0}}
+                                viewport={{once: true}}
+                                transition={{delay: i * 0.1, duration: 0.5, ease: 'easeOut'}}
                             >
-                            {/* 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"
+                                    className="w-24 h-32 object-cover rounded-lg shadow-sm"
                                 />
-                            </div>
+                                <div className="flex flex-col justify-center">
-
+                                    <h3 className="text-lg font-semibold">{lawyer.name}</h3>
-                            {/* content */}
+                                    {lawyer.role && (
-                            <div className="w-full md:w-2/3 space-y-4">
+                                        <p className="text-sm text-gray-600">{lawyer.role}</p>
-                                <h2 className="text-2xl font-bold text-red-700">{lawyer.name}</h2>
-                                <p className="text-base text-gray-800">{lawyer.short}</p>
-
-                                {lawyer.biography && (
-                                    <div>
-                                        <h3 className="font-semibold mb-1">Über</h3>
-                                        <p className="text-sm text-gray-700 whitespace-pre-line">
-                                            {lawyer.biography}
-                                        </p>
-                                    </div>
                                     )}
-
                                     {lawyer.specialties?.length > 0 && (
-                                    <div>
+                                        <ul className="text-base mt-2 space-y-1">
-                                        <h3 className="font-semibold mb-1">Fachgebiete</h3>
-                                        <ul className="list-disc pl-5 text-sm text-gray-700 space-y-1">
                                             {lawyer.specialties.map((s, idx) => (
-                                                <li key={idx}>{s}</li>
+                                                <li key={idx}>• {s}</li>
                                             ))}
                                         </ul>
-                                    </div>
-                                )}
-
-                                {lawyer.personal?.length > 0 && (
-                                    <div>
-                                        <h3 className="font-semibold mb-1">Zur Person</h3>
-                                        <ul className="list-disc pl-5 text-sm text-gray-700 space-y-1">
-                                            {lawyer.personal.map((p, idx) => (
-                                                <li key={idx}>{p}</li>
-                                            ))}
-                                        </ul>
-                                    </div>
                                     )}
                                 </div>
-                        </section>
+                            </motion.div>
-
-                        {i < lawyers.length - 1 && <Divider/>}
-                    </div>
                         ))}
+                    </div>
+                </motion.section>
             </main>
+
+            <DualCTA/>
         </>
     );
 }

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

@@ -5,13 +5,13 @@ import {motion} from 'framer-motion';
 export default function SubpageHero({
                                         title,
                                         subtitle,
-                                    }: {
+                                    }: Readonly<{
     title: string;
     subtitle?: string;
-}) {
+}>) {
     return (
         <section className="relative min-h-[35vh] flex items-center bg-white px-6 md:px-16 lg:px-36 pt-24">
-            <div className="z-10 flex flex-col gap-y-2">
+            <div className="z-10 flex flex-col gap-y-2 max-w-6xl mx-auto w-full">
                 <motion.h1
                     initial={{opacity: 0, y: 20}}
                     animate={{opacity: 1, y: 0}}

lawfirm-demos/demo-1/data/team.ts

@@ -1,6 +1,7 @@
-export const lawyers = [
+export const team = [
     {
-        name: 'RA Dr. Max Mustermann',
+        name: 'Dr. Max Mustermann',
+        role: "Rechtsanwalt",
         image: '/images/lawyers/mustermann.jpg',
         short: 'Fachanwalt für Arbeitsrecht und Vertragsrecht mit über 20 Jahren Erfahrung.',
         biography: `RA Dr. Max Mustermann berät Sie umfassend im Arbeits- und Vertragsrecht. Als Fachanwalt steht er für eine rechtssichere Gestaltung und Durchsetzung Ihrer Interessen.`,
@@ -20,7 +21,8 @@ export const lawyers = [
         ],
     },
     {
-        name: 'RAin Lisa Künstler',
+        name: 'Lisa Künstler',
+        role: "Rechtsanwalt",
         image: '/images/lawyers/kuenstler.jpg',
         short: 'Fachanwältin für Familienrecht mit Fokus auf einvernehmliche Lösungen.',
         biography: `RAin Lisa Künstler begleitet Sie empathisch und zielgerichtet in familiären Angelegenheiten. Ihr besonderes Augenmerk liegt auf tragfähigen Vereinbarungen für alle Beteiligten.`,