Refactor Über Uns page: rename lawyers to team, update structure, content, and layout; enhance animations, add map embed, and integrate DualCTA.
This commit is contained in:
@@ -1,8 +1,21 @@
|
||||
'use client';
|
||||
|
||||
import {lawyers} from '@/app/ueber-uns/lawyers';
|
||||
import Divider from '@/components/Divider';
|
||||
import {team} from '@/data/team';
|
||||
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 */}
|
||||
<section className="max-w-3xl space-y-4">
|
||||
{/* Wer wir sind */}
|
||||
<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">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>
|
||||
Namensgeber und Mitbegründer war Dr. Winfried Mustermann. Unser über Jahrzehnte gewachsener
|
||||
Wertekonsens ist geprägt von gegenseitigem Vertrauen, Verlässlichkeit und unternehmerischem
|
||||
Denken.
|
||||
</p>
|
||||
</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">
|
||||
Die Kanzlei Mustermann & Künstler steht für rechtliche Exzellenz, persönliche Beratung und
|
||||
langjährige Erfahrung. Wir vereinen spezialisierte Fachkenntnisse mit menschlichem Gespür für
|
||||
individuelle Lebenssituationen.
|
||||
von Freiburg bis Waldshut-Tiengen und deutschlandweit
|
||||
</p>
|
||||
<p className="text-lg text-gray-700">
|
||||
Unser Anspruch ist es, Sie transparent, ehrlich und effizient zu beraten und zu vertreten –
|
||||
unabhängig davon, ob es sich um eine komplexe Nachlassregelung, eine arbeitsrechtliche
|
||||
Auseinandersetzung oder familiäre Fragestellungen handelt.
|
||||
</p>
|
||||
</section>
|
||||
<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) => (
|
||||
<div key={i}>
|
||||
<section
|
||||
className={`flex flex-col md:flex-row ${
|
||||
i % 2 === 1 ? 'md:flex-row-reverse' : ''
|
||||
} gap-8 md:items-start`}
|
||||
>
|
||||
{/* image */}
|
||||
<div className="w-full md:w-1/3">
|
||||
<motion.section
|
||||
className="max-w-6xl mx-auto space-y-12 text-gray-900"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{once: true, amount: 0.2}}
|
||||
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'}}
|
||||
>
|
||||
<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>
|
||||
|
||||
{/* content */}
|
||||
<div className="w-full md:w-2/3 space-y-4">
|
||||
<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>
|
||||
<h3 className="font-semibold mb-1">Fachgebiete</h3>
|
||||
<ul className="list-disc pl-5 text-sm text-gray-700 space-y-1">
|
||||
<div className="flex flex-col justify-center">
|
||||
<h3 className="text-lg font-semibold">{lawyer.name}</h3>
|
||||
{lawyer.role && (
|
||||
<p className="text-sm text-gray-600">{lawyer.role}</p>
|
||||
)}
|
||||
{lawyer.specialties?.length > 0 && (
|
||||
<ul className="text-base mt-2 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>
|
||||
|
||||
{i < lawyers.length - 1 && <Divider/>}
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</motion.section>
|
||||
</main>
|
||||
|
||||
<DualCTA/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user