Introduce ServicesSection component and integrate into homepage layout
This commit is contained in:
48
lawfirm-demos/demo-1/app/(root)/ServicesSection.tsx
Normal file
48
lawfirm-demos/demo-1/app/(root)/ServicesSection.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
export default function ServicesSection() {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="pt-20 pb-20 px-6 md:px-16 lg:px-36 bg-gradient-to-b from-white to-gray-50 text-gray-900"
|
||||
>
|
||||
<section className="mb-32 grid md:grid-cols-2 gap-12 items-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, ease: 'easeOut' }}
|
||||
viewport={{ once: true, amount: 0.4 }}
|
||||
>
|
||||
<h2 className="text-4xl font-extrabold mb-4 tracking-tight text-gray-900">
|
||||
Unsere Fachgebiete
|
||||
</h2>
|
||||
<p className="text-xl font-semibold text-gray-800">
|
||||
Spezialisiert. Fokussiert. Kompetent.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, ease: 'easeOut', delay: 0.2 }}
|
||||
viewport={{ once: true, amount: 0.4 }}
|
||||
className="text-gray-700 text-lg leading-relaxed space-y-4"
|
||||
>
|
||||
<p>
|
||||
<strong className="text-gray-900">Arbeitsrecht:</strong> Wir vertreten Sie bei Kündigungen, Abmahnungen und Vertragsfragen – schnell und zuverlässig.
|
||||
</p>
|
||||
<p>
|
||||
<strong className="text-gray-900">Familienrecht:</strong> Von Scheidung bis Sorgerecht – wir stehen Ihnen empathisch und professionell zur Seite.
|
||||
</p>
|
||||
<p>
|
||||
<strong className="text-gray-900">Vertragsrecht:</strong> Klare Verträge für klare Verhältnisse – ob privat oder geschäftlich, wir sichern Ihre Interessen rechtlich ab.
|
||||
</p>
|
||||
</motion.div>
|
||||
</section>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -2,120 +2,132 @@
|
||||
|
||||
import {motion} from 'framer-motion';
|
||||
import Hero from '@/components/Hero';
|
||||
import Link from 'next/link';
|
||||
import DualCTA from "@/components/DualCTA";
|
||||
import ServicesSection from "@/app/(root)/ServicesSection";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<div>
|
||||
<Hero/>
|
||||
|
||||
<motion.main
|
||||
initial={{opacity: 0, y: 20}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
<motion.div
|
||||
initial={{opacity: 0}}
|
||||
animate={{opacity: 1}}
|
||||
transition={{duration: 0.6}}
|
||||
className="pt-20 pb-20 px-6 md:px-16 lg:px-36 bg-gradient-to-b from-gray-50 to-white text-gray-900"
|
||||
>
|
||||
{/* Unser Leitgedanke */}
|
||||
<motion.section
|
||||
className="mb-32 grid md:grid-cols-2 gap-12 items-center"
|
||||
initial={{opacity: 0, y: 40}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
viewport={{once: true, amount: 0.4}}
|
||||
transition={{duration: 0.8, ease: 'easeOut'}}
|
||||
>
|
||||
<div>
|
||||
<h2 className="text-4xl font-extrabold mb-4 tracking-tight text-gray-900">Unser Leitgedanke</h2>
|
||||
<section className="mb-32 grid md:grid-cols-2 gap-12 items-center">
|
||||
<motion.div
|
||||
initial={{opacity: 0, y: 40}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
transition={{duration: 0.8, ease: 'easeOut'}}
|
||||
viewport={{once: true, amount: 0.4}}
|
||||
>
|
||||
<h2 className="text-4xl font-extrabold mb-4 tracking-tight text-gray-900">
|
||||
Unser Leitgedanke
|
||||
</h2>
|
||||
<p className="text-xl font-semibold text-gray-800">
|
||||
Individuell beraten – Ihr Recht in professionellen Händen.
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-gray-700 text-lg leading-relaxed">
|
||||
Wir stehen für eine persönliche und engagierte Betreuung unserer Mandant:innen. Unsere Beratung
|
||||
ist
|
||||
fundiert, zielgerichtet und individuell auf Ihre Bedürfnisse abgestimmt. Mit Nachdruck und
|
||||
Weitblick
|
||||
setzen wir uns dafür ein, Ihre Interessen wirkungsvoll zu vertreten und nachhaltige Lösungen zu
|
||||
erzielen.
|
||||
</p>
|
||||
</motion.section>
|
||||
</motion.div>
|
||||
|
||||
{/* Leistungen */}
|
||||
<section className="text-center mb-32">
|
||||
<h2 className="text-4xl font-extrabold mb-12 tracking-tight">Unsere Schwerpunkte</h2>
|
||||
<div className="grid md:grid-cols-3 gap-10">
|
||||
{[
|
||||
{
|
||||
title: 'Arbeitsrecht',
|
||||
desc: 'Kündigung, Abmahnung, Aufhebungsvertrag – wir setzen Ihre Rechte durch.',
|
||||
},
|
||||
{
|
||||
title: 'Familienrecht',
|
||||
desc: 'Trennung, Scheidung, Unterhalt – wir stehen Ihnen zur Seite.',
|
||||
},
|
||||
{
|
||||
title: 'Vertragsrecht',
|
||||
desc: 'Beratung & Gestaltung von Verträgen für Privatpersonen und Unternehmen.',
|
||||
},
|
||||
].map(({title, desc}) => (
|
||||
<motion.div
|
||||
key={title}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
initial={{opacity: 0, y: 30}}
|
||||
transition={{duration: 0.4}}
|
||||
viewport={{once: true}}
|
||||
className="bg-white p-8 rounded-2xl shadow-md border border-gray-100 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-2xl font-semibold mb-3 text-blue-800">{title}</h3>
|
||||
<p className="text-gray-600 leading-relaxed">{desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
<motion.p
|
||||
initial={{opacity: 0, y: 40}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
transition={{duration: 0.8, ease: 'easeOut', delay: 0.2}}
|
||||
viewport={{once: true, amount: 0.4}}
|
||||
className="text-gray-700 text-lg leading-relaxed"
|
||||
>
|
||||
Wir stehen für eine persönliche und engagierte Betreuung unserer Mandant:innen.
|
||||
Unsere Beratung ist fundiert, zielgerichtet und individuell auf Ihre Bedürfnisse abgestimmt.
|
||||
Mit Nachdruck und Weitblick setzen wir uns dafür ein, Ihre Interessen wirkungsvoll zu vertreten
|
||||
und nachhaltige Lösungen zu erzielen.
|
||||
</motion.p>
|
||||
</section>
|
||||
</motion.div>
|
||||
|
||||
{/* Über die Kanzlei */}
|
||||
<section className="max-w-4xl mx-auto text-center mb-32">
|
||||
<h2 className="text-4xl font-extrabold mb-8 tracking-tight">Über unsere Kanzlei</h2>
|
||||
<p className="text-gray-700 text-lg leading-relaxed">
|
||||
Seit über 15 Jahren beraten und vertreten wir Mandantinnen und Mandanten aus ganz Deutschland.
|
||||
Unsere Kanzlei steht für Kompetenz, Integrität und persönliche Betreuung. Wir nehmen uns Zeit
|
||||
für
|
||||
Ihre Anliegen und entwickeln individuelle Strategien – effizient und zielorientiert.
|
||||
</p>
|
||||
</section>
|
||||
<ServicesSection />
|
||||
|
||||
{/* Vorteile */}
|
||||
<section className="text-center mb-32">
|
||||
<h2 className="text-4xl font-extrabold mb-10 tracking-tight">Ihre Vorteile mit uns</h2>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{[
|
||||
'Direkte & ehrliche Kommunikation',
|
||||
'Schnelle Terminvergabe',
|
||||
'Fachanwälte mit jahrelanger Erfahrung',
|
||||
].map((vorteil) => (
|
||||
<div
|
||||
key={vorteil}
|
||||
className="bg-white p-8 rounded-2xl shadow-md border border-gray-100 hover:shadow-lg"
|
||||
>
|
||||
<p className="text-gray-800 font-medium text-lg">{vorteil}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
{/* Leistungen */}
|
||||
{/*<section className="text-center mb-32">*/}
|
||||
{/* <h2 className="text-4xl font-extrabold mb-12 tracking-tight">Unsere Schwerpunkte</h2>*/}
|
||||
{/* <div className="grid md:grid-cols-3 gap-10">*/}
|
||||
{/* {[*/}
|
||||
{/* {*/}
|
||||
{/* title: 'Arbeitsrecht',*/}
|
||||
{/* desc: 'Kündigung, Abmahnung, Aufhebungsvertrag – wir setzen Ihre Rechte durch.',*/}
|
||||
{/* },*/}
|
||||
{/* {*/}
|
||||
{/* title: 'Familienrecht',*/}
|
||||
{/* desc: 'Trennung, Scheidung, Unterhalt – wir stehen Ihnen zur Seite.',*/}
|
||||
{/* },*/}
|
||||
{/* {*/}
|
||||
{/* title: 'Vertragsrecht',*/}
|
||||
{/* desc: 'Beratung & Gestaltung von Verträgen für Privatpersonen und Unternehmen.',*/}
|
||||
{/* },*/}
|
||||
{/* ].map(({title, desc}) => (*/}
|
||||
{/* <motion.div*/}
|
||||
{/* key={title}*/}
|
||||
{/* whileInView={{opacity: 1, y: 0}}*/}
|
||||
{/* initial={{opacity: 0, y: 30}}*/}
|
||||
{/* transition={{duration: 0.4}}*/}
|
||||
{/* viewport={{once: true}}*/}
|
||||
{/* className="bg-white p-8 rounded-2xl shadow-md border border-gray-100 hover:shadow-lg"*/}
|
||||
{/* >*/}
|
||||
{/* <h3 className="text-2xl font-semibold mb-3 text-blue-800">{title}</h3>*/}
|
||||
{/* <p className="text-gray-600 leading-relaxed">{desc}</p>*/}
|
||||
{/* </motion.div>*/}
|
||||
{/* ))}*/}
|
||||
{/* </div>*/}
|
||||
{/*</section>*/}
|
||||
|
||||
{/* Über die Kanzlei */}
|
||||
{/*<section className="max-w-4xl mx-auto text-center mb-32">*/}
|
||||
{/* <h2 className="text-4xl font-extrabold mb-8 tracking-tight">Über unsere Kanzlei</h2>*/}
|
||||
{/* <p className="text-gray-700 text-lg leading-relaxed">*/}
|
||||
{/* Seit über 15 Jahren beraten und vertreten wir Mandantinnen und Mandanten aus ganz Deutschland.*/}
|
||||
{/* Unsere Kanzlei steht für Kompetenz, Integrität und persönliche Betreuung. Wir nehmen uns Zeit*/}
|
||||
{/* für*/}
|
||||
{/* Ihre Anliegen und entwickeln individuelle Strategien – effizient und zielorientiert.*/}
|
||||
{/* </p>*/}
|
||||
{/*</section>*/}
|
||||
|
||||
{/* Vorteile */}
|
||||
{/*<section className="text-center mb-32">*/}
|
||||
{/* <h2 className="text-4xl font-extrabold mb-10 tracking-tight">Ihre Vorteile mit uns</h2>*/}
|
||||
{/* <div className="grid md:grid-cols-3 gap-8">*/}
|
||||
{/* {[*/}
|
||||
{/* 'Direkte & ehrliche Kommunikation',*/}
|
||||
{/* 'Schnelle Terminvergabe',*/}
|
||||
{/* 'Fachanwälte mit jahrelanger Erfahrung',*/}
|
||||
{/* ].map((vorteil) => (*/}
|
||||
{/* <div*/}
|
||||
{/* key={vorteil}*/}
|
||||
{/* className="bg-white p-8 rounded-2xl shadow-md border border-gray-100 hover:shadow-lg"*/}
|
||||
{/* >*/}
|
||||
{/* <p className="text-gray-800 font-medium text-lg">{vorteil}</p>*/}
|
||||
{/* </div>*/}
|
||||
{/* ))}*/}
|
||||
{/* </div>*/}
|
||||
{/*</section>*/}
|
||||
|
||||
{/* Call to Action */}
|
||||
{/* <section className="text-center bg-blue-50 py-16 rounded-xl">*/}
|
||||
{/* <h2 className="text-3xl font-bold mb-4 text-blue-800">Vereinbaren Sie jetzt ein Erstgespräch</h2>*/}
|
||||
{/* <p className="text-gray-700 mb-6 text-lg">*/}
|
||||
{/* Lassen Sie sich unverbindlich beraten und lernen Sie unsere Kanzlei kennen.*/}
|
||||
{/* </p>*/}
|
||||
{/* <Link href="/kontakt/">*/}
|
||||
{/* <button*/}
|
||||
{/* className="px-8 py-3 bg-blue-700 text-white rounded-xl hover:bg-blue-800 transition shadow">*/}
|
||||
{/* Jetzt Termin sichern*/}
|
||||
{/* </button>*/}
|
||||
{/* </Link>*/}
|
||||
{/* </section>*/}
|
||||
{/*</motion.div>*/}
|
||||
|
||||
<DualCTA/>
|
||||
|
||||
{/* Call to Action */}
|
||||
<section className="text-center bg-blue-50 py-16 rounded-xl">
|
||||
<h2 className="text-3xl font-bold mb-4 text-blue-800">Vereinbaren Sie jetzt ein Erstgespräch</h2>
|
||||
<p className="text-gray-700 mb-6 text-lg">
|
||||
Lassen Sie sich unverbindlich beraten und lernen Sie unsere Kanzlei kennen.
|
||||
</p>
|
||||
<Link href="/kontakt/">
|
||||
<button
|
||||
className="px-8 py-3 bg-blue-700 text-white rounded-xl hover:bg-blue-800 transition shadow">
|
||||
Jetzt Termin sichern
|
||||
</button>
|
||||
</Link>
|
||||
</section>
|
||||
</motion.main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user