Introduce Hero component for homepage
This commit is contained in:
@@ -2,64 +2,36 @@
|
||||
'use client';
|
||||
|
||||
import {motion} from 'framer-motion';
|
||||
import Hero from '@/components/Hero';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<motion.div
|
||||
<Hero/>
|
||||
|
||||
<motion.main
|
||||
initial={{opacity: 0, y: 20}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{duration: 0.6}}
|
||||
className="space-y-24 pt-32 pb-16 px-4 md:px-12 lg:px-24 bg-[#f9f9f9] 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"
|
||||
>
|
||||
{/* Hero Section mit Hintergrundbild */}
|
||||
<section className="relative text-center text-white h-[70vh] rounded-xl overflow-hidden shadow-lg">
|
||||
<Image
|
||||
src="/images/hero.jpeg"
|
||||
alt="Anwaltskanzlei Hintergrund"
|
||||
fill
|
||||
className="object-cover brightness-[0.4]"
|
||||
quality={90}
|
||||
/>
|
||||
<div className="relative z-10 flex flex-col justify-center items-center h-full px-4">
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6">Ihre Kanzlei für Arbeits-, Familien- und
|
||||
Vertragsrecht</h1>
|
||||
<p className="text-lg max-w-2xl text-gray-100">
|
||||
Persönliche Betreuung. Klare Kommunikation. Effektive Lösungen für Ihr Anliegen.
|
||||
</p>
|
||||
<Link href="/kontakt/">
|
||||
<motion.button
|
||||
whileHover={{scale: 1.05}}
|
||||
whileTap={{scale: 0.95}}
|
||||
className="mt-6 px-8 py-3 bg-blue-700 text-white rounded-xl shadow hover:bg-blue-800 transition"
|
||||
>
|
||||
Kontakt aufnehmen
|
||||
</motion.button>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="w-full h-[2px] bg-gray-300"/>
|
||||
|
||||
{/* Leistungen */}
|
||||
<section>
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Unsere Schwerpunkte</h2>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<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.'
|
||||
desc: 'Kündigung, Abmahnung, Aufhebungsvertrag – wir setzen Ihre Rechte durch.',
|
||||
},
|
||||
{
|
||||
title: 'Familienrecht',
|
||||
desc: 'Trennung, Scheidung, Unterhalt – wir stehen Ihnen zur Seite.'
|
||||
desc: 'Trennung, Scheidung, Unterhalt – wir stehen Ihnen zur Seite.',
|
||||
},
|
||||
{
|
||||
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}) => (
|
||||
<motion.div
|
||||
@@ -68,53 +40,51 @@ export default function HomePage() {
|
||||
initial={{opacity: 0, y: 30}}
|
||||
transition={{duration: 0.4}}
|
||||
viewport={{once: true}}
|
||||
className="bg-white p-6 rounded-xl shadow hover:shadow-md"
|
||||
className="bg-white p-8 rounded-2xl shadow-md border border-gray-100 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-xl font-semibold mb-2">{title}</h3>
|
||||
<p className="text-gray-600">{desc}</p>
|
||||
<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>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="w-full h-[2px] bg-gray-300"/>
|
||||
|
||||
{/* Über die Kanzlei */}
|
||||
<section className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-6">Über unsere Kanzlei</h2>
|
||||
<p className="text-gray-700 text-lg">
|
||||
<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.
|
||||
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>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="w-full h-[2px] bg-gray-300"/>
|
||||
|
||||
{/* Vorteile */}
|
||||
<section>
|
||||
<h2 className="text-3xl font-bold text-center mb-10">Ihre Vorteile mit uns</h2>
|
||||
<div className="grid md:grid-cols-3 gap-8 text-center">
|
||||
<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-6 rounded-xl shadow">
|
||||
<p className="text-gray-800 font-medium">{vorteil}</p>
|
||||
<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>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="w-full h-[2px] bg-gray-300"/>
|
||||
|
||||
{/* Call to Action */}
|
||||
<section className="text-center">
|
||||
<h2 className="text-2xl font-bold mb-4">Vereinbaren Sie jetzt ein unverbindliches Erstgespräch</h2>
|
||||
<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">
|
||||
@@ -122,7 +92,7 @@ export default function HomePage() {
|
||||
</button>
|
||||
</Link>
|
||||
</section>
|
||||
</motion.div>
|
||||
</motion.main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
60
lawfirm-demos/demo-1/components/Hero.tsx
Normal file
60
lawfirm-demos/demo-1/components/Hero.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
import {motion} from 'framer-motion';
|
||||
import {Typewriter} from "react-simple-typewriter";
|
||||
|
||||
const services = ['Arbeitsrecht', 'Familienrecht', 'Vertragsrecht'];
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<motion.section
|
||||
initial={{opacity: 0, y: 30}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{duration: 0.8, ease: 'easeOut'}}
|
||||
className="relative text-white h-[calc(100vh-5rem)] overflow-hidden shadow-lg"
|
||||
>
|
||||
<Image
|
||||
src="/images/hero.jpeg"
|
||||
alt="Anwaltskanzlei Hintergrund"
|
||||
fill
|
||||
className="object-cover brightness-[0.4]"
|
||||
quality={50}
|
||||
/>
|
||||
<div className="relative z-10 flex flex-col justify-center items-start h-full px-6 md:px-16 lg:px-24">
|
||||
<motion.h1
|
||||
className="text-5xl md:text-7xl font-bold mb-4 leading-tight"
|
||||
initial={{opacity: 0, y: 20}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{duration: 0.6}}
|
||||
>
|
||||
Ihr Experte für
|
||||
</motion.h1>
|
||||
<motion.h2
|
||||
className="text-4xl md:text-6xl font-bold text-blue-200 mb-4"
|
||||
initial={{opacity: 0, y: 20}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{duration: 0.6, delay: 0.2}}
|
||||
>
|
||||
<Typewriter
|
||||
words={services}
|
||||
loop={true}
|
||||
cursor
|
||||
cursorStyle="_"
|
||||
typeSpeed={60}
|
||||
deleteSpeed={40}
|
||||
delaySpeed={1500}
|
||||
/>
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
className="text-xl md:text-2xl text-gray-100 mb-6"
|
||||
initial={{opacity: 0, y: 20}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{duration: 0.6, delay: 0.4}}
|
||||
>
|
||||
in Lörrach und Freiburg.
|
||||
</motion.p>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
}
|
||||
16
lawfirm-demos/demo-1/package-lock.json
generated
16
lawfirm-demos/demo-1/package-lock.json
generated
@@ -11,7 +11,8 @@
|
||||
"framer-motion": "^12.16.0",
|
||||
"next": "15.3.3",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
"react-dom": "^19.0.0",
|
||||
"react-simple-typewriter": "^5.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
@@ -5121,6 +5122,19 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-simple-typewriter": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-simple-typewriter/-/react-simple-typewriter-5.0.1.tgz",
|
||||
"integrity": "sha512-vA5HkABwJKL/DJ4RshSlY/igdr+FiVY4MLsSQYJX6FZG/f1/VwN4y1i3mPXRyfaswrvI8xii1kOVe1dYtO2Row==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18.0.0",
|
||||
"react-dom": ">=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/reflect.getprototypeof": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
|
||||
|
||||
@@ -12,7 +12,8 @@
|
||||
"framer-motion": "^12.16.0",
|
||||
"next": "15.3.3",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
"react-dom": "^19.0.0",
|
||||
"react-simple-typewriter": "^5.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
|
||||
Reference in New Issue
Block a user