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

Refactor Hero component: rename to Hero, refine animations and typography, and enhance typewriter integration.

Browse Source
This commit is contained in:
Thatsaphorn
2025-06-19 23:54:43 +09:00
parent 8e41a3d151
commit ff90582486
1 changed files with 34 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
lawfirm-demos/demo-1/components/Hero.tsx
View File

@@ -2,15 +2,15 @@
import Image from 'next/image';
import { motion } from 'framer-motion';
import {Typewriter} from "react-simple-typewriter";
import { Typewriter } from 'react-simple-typewriter';
const services = ['Arbeitsrecht', 'Familienrecht', 'Vertragsrecht'];
export default function Header() {
export default function Hero() {
return (
<motion.section
initial={{opacity: 0, y: 30}}
animate={{opacity: 1, y: 0}}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, ease: 'easeOut' }}
className="relative text-white h-screen overflow-hidden shadow-lg"
>
@@ -23,36 +23,40 @@ export default function Header() {
/>
<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}}
className="text-2xl md:text-3xl font-light tracking-wide text-gray-200 mb-2"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{duration: 0.6}}
transition={{ duration: 0.5 }}
>
Ihr Experte für
Rechtsanwälte
</motion.h1>
<motion.h2
className="text-4xl md:text-6xl font-bold text-blue-200 mb-4"
initial={{opacity: 0, y: 20}}
className="text-4xl md:text-6xl font-extrabold text-white mb-6 leading-tight"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.1 }}
>
Dr. Mustermann & Künstler
</motion.h2>
<motion.p
className="text-2xl md:text-3xl text-gray-200 font-medium"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}
>
<span className="text-gray-300">Ihr Experte für </span>
<span className="text-blue-400 font-semibold">
<Typewriter
words={services}
loop={true}
loop
cursor
cursorStyle="_"
typeSpeed={60}
deleteSpeed={40}
delaySpeed={1500}
/>
</motion.h2>
<motion.p
className="text-xl md:text-2xl text-gray-100 mt-4"
initial={{opacity: 0, y: 20}}
animate={{opacity: 1, y: 0}}
transition={{duration: 0.6, delay: 0.4}}
>
in Lörrach und Freiburg.
</span>
</motion.p>
</div>
</motion.section>