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

Enhance animations and styling on homepage sections; adjust Hero component to use full h-screen height.

Browse Source
This commit is contained in:
Thatsaphorn
2025-06-19 09:28:49 +09:00
parent d62d3a789a
commit 8e41a3d151
2 changed files with 27 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,22 +1,28 @@
'use client';
import { motion } from 'framer-motion';
import {motion} from 'framer-motion';
import Hero from '@/components/Hero';
import Link from 'next/link';
export default function HomePage() {
return (
<div className="flex flex-col min-h-screen">
<Hero />
<Hero/>
<motion.main
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
initial={{opacity: 0, y: 20}}
animate={{opacity: 1, y: 0}}
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 */}
<section className="mb-32 grid md:grid-cols-2 gap-12 items-center">
<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>
<p className="text-xl font-semibold text-gray-800">
@@ -24,12 +30,14 @@ export default function HomePage() {
</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
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>
</section>
</motion.section>
{/* Leistungen */}
<section className="text-center mb-32">
@@ -48,13 +56,13 @@ export default function HomePage() {
title: 'Vertragsrecht',
desc: 'Beratung & Gestaltung von Verträgen für Privatpersonen und Unternehmen.',
},
].map(({ title, desc }) => (
].map(({title, desc}) => (
<motion.div
key={title}
whileInView={{ opacity: 1, y: 0 }}
initial={{ opacity: 0, y: 30 }}
transition={{ duration: 0.4 }}
viewport={{ once: true }}
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>
@@ -69,7 +77,8 @@ export default function HomePage() {
<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
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>
@@ -100,7 +109,8 @@ export default function HomePage() {
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">
<button
className="px-8 py-3 bg-blue-700 text-white rounded-xl hover:bg-blue-800 transition shadow">
Jetzt Termin sichern
</button>
</Link>