Gitlab-Migration/demo-websites
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Introduce ServicesSection component and integrate into homepage layout

Browse Source
This commit is contained in:
Thatsaphorn
2025-06-20 00:21:15 +09:00
parent 6979ae174a
commit 7913b34f98
2 changed files with 158 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
lawfirm-demos/demo-1/app/(root)/ServicesSection.tsx Normal file
View 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>
);
}

194
lawfirm-demos/demo-1/app/page.tsx
View File

@@ -2,120 +2,132 @@
import {motion} from 'framer-motion'; import {motion} from 'framer-motion';
import Hero from '@/components/Hero'; 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() { export default function HomePage() {
return ( return (
<div className="flex flex-col min-h-screen"> <div>
<Hero/> <Hero/>
<motion.main <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0}}
animate={{opacity: 1, y: 0}} animate={{opacity: 1}}
transition={{duration: 0.6}} 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" 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 */} <section className="mb-32 grid md:grid-cols-2 gap-12 items-center">
<motion.section <motion.div
className="mb-32 grid md:grid-cols-2 gap-12 items-center"
initial={{opacity: 0, y: 40}} initial={{opacity: 0, y: 40}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
viewport={{once: true, amount: 0.4}}
transition={{duration: 0.8, ease: 'easeOut'}} transition={{duration: 0.8, ease: 'easeOut'}}
viewport={{once: true, amount: 0.4}}
> >
<div> <h2 className="text-4xl font-extrabold mb-4 tracking-tight text-gray-900">
<h2 className="text-4xl font-extrabold mb-4 tracking-tight text-gray-900">Unser Leitgedanke</h2> Unser Leitgedanke
</h2>
<p className="text-xl font-semibold text-gray-800"> <p className="text-xl font-semibold text-gray-800">
Individuell beraten – Ihr Recht in professionellen Händen. Individuell beraten – Ihr Recht in professionellen Händen.
</p> </p>
</div> </motion.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 <motion.p
ist initial={{opacity: 0, y: 40}}
fundiert, zielgerichtet und individuell auf Ihre Bedürfnisse abgestimmt. Mit Nachdruck und whileInView={{opacity: 1, y: 0}}
Weitblick transition={{duration: 0.8, ease: 'easeOut', delay: 0.2}}
setzen wir uns dafür ein, Ihre Interessen wirkungsvoll zu vertreten und nachhaltige Lösungen zu viewport={{once: true, amount: 0.4}}
erzielen. className="text-gray-700 text-lg leading-relaxed"
</p> >
</motion.section> 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>
<ServicesSection />
{/* Leistungen */} {/* Leistungen */}
<section className="text-center mb-32"> {/*<section className="text-center mb-32">*/}
<h2 className="text-4xl font-extrabold mb-12 tracking-tight">Unsere Schwerpunkte</h2> {/* <h2 className="text-4xl font-extrabold mb-12 tracking-tight">Unsere Schwerpunkte</h2>*/}
<div className="grid md:grid-cols-3 gap-10"> {/* <div className="grid md:grid-cols-3 gap-10">*/}
{[ {/* {[*/}
{ {/* {*/}
title: 'Arbeitsrecht', {/* title: 'Arbeitsrecht',*/}
desc: 'Kündigung, Abmahnung, Aufhebungsvertrag – wir setzen Ihre Rechte durch.', {/* desc: 'Kündigung, Abmahnung, Aufhebungsvertrag – wir setzen Ihre Rechte durch.',*/}
}, {/* },*/}
{ {/* {*/}
title: 'Familienrecht', {/* title: 'Familienrecht',*/}
desc: 'Trennung, Scheidung, Unterhalt – wir stehen Ihnen zur Seite.', {/* desc: 'Trennung, Scheidung, Unterhalt – wir stehen Ihnen zur Seite.',*/}
}, {/* },*/}
{ {/* {*/}
title: 'Vertragsrecht', {/* title: 'Vertragsrecht',*/}
desc: 'Beratung & Gestaltung von Verträgen für Privatpersonen und Unternehmen.', {/* desc: 'Beratung & Gestaltung von Verträgen für Privatpersonen und Unternehmen.',*/}
}, {/* },*/}
].map(({title, desc}) => ( {/* ].map(({title, desc}) => (*/}
<motion.div {/* <motion.div*/}
key={title} {/* key={title}*/}
whileInView={{opacity: 1, y: 0}} {/* whileInView={{opacity: 1, y: 0}}*/}
initial={{opacity: 0, y: 30}} {/* initial={{opacity: 0, y: 30}}*/}
transition={{duration: 0.4}} {/* transition={{duration: 0.4}}*/}
viewport={{once: true}} {/* viewport={{once: true}}*/}
className="bg-white p-8 rounded-2xl shadow-md border border-gray-100 hover:shadow-lg" {/* 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> {/* <h3 className="text-2xl font-semibold mb-3 text-blue-800">{title}</h3>*/}
<p className="text-gray-600 leading-relaxed">{desc}</p> {/* <p className="text-gray-600 leading-relaxed">{desc}</p>*/}
</motion.div> {/* </motion.div>*/}
))} {/* ))}*/}
</div> {/* </div>*/}
</section> {/*</section>*/}
{/* Über die Kanzlei */} {/* Über die Kanzlei */}
<section className="max-w-4xl mx-auto text-center mb-32"> {/*<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> {/* <h2 className="text-4xl font-extrabold mb-8 tracking-tight">Über unsere Kanzlei</h2>*/}
<p className="text-gray-700 text-lg leading-relaxed"> {/* <p className="text-gray-700 text-lg leading-relaxed">*/}
Seit über 15 Jahren beraten und vertreten wir Mandantinnen und Mandanten aus ganz Deutschland. {/* 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 {/* Unsere Kanzlei steht für Kompetenz, Integrität und persönliche Betreuung. Wir nehmen uns Zeit*/}
für {/* für*/}
Ihre Anliegen und entwickeln individuelle Strategien – effizient und zielorientiert. {/* Ihre Anliegen und entwickeln individuelle Strategien – effizient und zielorientiert.*/}
</p> {/* </p>*/}
</section> {/*</section>*/}
{/* Vorteile */} {/* Vorteile */}
<section className="text-center mb-32"> {/*<section className="text-center mb-32">*/}
<h2 className="text-4xl font-extrabold mb-10 tracking-tight">Ihre Vorteile mit uns</h2> {/* <h2 className="text-4xl font-extrabold mb-10 tracking-tight">Ihre Vorteile mit uns</h2>*/}
<div className="grid md:grid-cols-3 gap-8"> {/* <div className="grid md:grid-cols-3 gap-8">*/}
{[ {/* {[*/}
'Direkte & ehrliche Kommunikation', {/* 'Direkte & ehrliche Kommunikation',*/}
'Schnelle Terminvergabe', {/* 'Schnelle Terminvergabe',*/}
'Fachanwälte mit jahrelanger Erfahrung', {/* 'Fachanwälte mit jahrelanger Erfahrung',*/}
].map((vorteil) => ( {/* ].map((vorteil) => (*/}
<div {/* <div*/}
key={vorteil} {/* key={vorteil}*/}
className="bg-white p-8 rounded-2xl shadow-md border border-gray-100 hover:shadow-lg" {/* 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> {/* <p className="text-gray-800 font-medium text-lg">{vorteil}</p>*/}
</div> {/* </div>*/}
))} {/* ))}*/}
</div> {/* </div>*/}
</section> {/*</section>*/}
{/* Call to Action */} {/* Call to Action */}
<section className="text-center bg-blue-50 py-16 rounded-xl"> {/* <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> {/* <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"> {/* <p className="text-gray-700 mb-6 text-lg">*/}
Lassen Sie sich unverbindlich beraten und lernen Sie unsere Kanzlei kennen. {/* Lassen Sie sich unverbindlich beraten und lernen Sie unsere Kanzlei kennen.*/}
</p> {/* </p>*/}
<Link href="/kontakt/"> {/* <Link href="/kontakt/">*/}
<button {/* <button*/}
className="px-8 py-3 bg-blue-700 text-white rounded-xl hover:bg-blue-800 transition shadow"> {/* className="px-8 py-3 bg-blue-700 text-white rounded-xl hover:bg-blue-800 transition shadow">*/}
Jetzt Termin sichern {/* Jetzt Termin sichern*/}
</button> {/* </button>*/}
</Link> {/* </Link>*/}
</section> {/* </section>*/}
</motion.main> {/*</motion.div>*/}
<DualCTA/>
</div> </div>
); );
} }