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

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

@@ -1,17 +1,17 @@
'use client';
import Image from 'next/image';
import {motion} from 'framer-motion';
import {Typewriter} from "react-simple-typewriter";
import { motion } from 'framer-motion';
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}}
transition={{duration: 0.8, ease: 'easeOut'}}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, ease: 'easeOut' }}
className="relative text-white h-screen overflow-hidden shadow-lg"
>
<Image
@@ -23,38 +23,42 @@ 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}}
animate={{opacity: 1, y: 0}}
transition={{duration: 0.6}}
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.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}}
animate={{opacity: 1, y: 0}}
transition={{duration: 0.6, delay: 0.2}}
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 }}
>
<Typewriter
words={services}
loop={true}
cursor
cursorStyle="_"
typeSpeed={60}
deleteSpeed={40}
delaySpeed={1500}
/>
Dr. Mustermann & Künstler
</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}}
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 }}
>
in Lörrach und Freiburg.
<span className="text-gray-300">Ihr Experte für </span>
<span className="text-blue-400 font-semibold">
<Typewriter
words={services}
loop
cursor
cursorStyle="_"
typeSpeed={60}
deleteSpeed={40}
delaySpeed={1500}
/>
</span>
</motion.p>
</div>
</motion.section>
);
}
}