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

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

@@ -1,17 +1,17 @@
'use client'; 'use client';
import Image from 'next/image'; import Image from 'next/image';
import {motion} from 'framer-motion'; import { motion } from 'framer-motion';
import {Typewriter} from "react-simple-typewriter"; import { Typewriter } from 'react-simple-typewriter';
const services = ['Arbeitsrecht', 'Familienrecht', 'Vertragsrecht']; const services = ['Arbeitsrecht', 'Familienrecht', 'Vertragsrecht'];
export default function Header() { export default function Hero() {
return ( return (
<motion.section <motion.section
initial={{opacity: 0, y: 30}} initial={{ opacity: 0 }}
animate={{opacity: 1, y: 0}} animate={{ opacity: 1 }}
transition={{duration: 0.8, ease: 'easeOut'}} transition={{ duration: 0.8, ease: 'easeOut' }}
className="relative text-white h-screen overflow-hidden shadow-lg" className="relative text-white h-screen overflow-hidden shadow-lg"
> >
<Image <Image
@@ -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"> <div className="relative z-10 flex flex-col justify-center items-start h-full px-6 md:px-16 lg:px-24">
<motion.h1 <motion.h1
className="text-5xl md:text-7xl font-bold mb-4 leading-tight" className="text-2xl md:text-3xl font-light tracking-wide text-gray-200 mb-2"
initial={{opacity: 0, y: 20}} initial={{ opacity: 0, y: 10 }}
animate={{opacity: 1, y: 0}} animate={{ opacity: 1, y: 0 }}
transition={{duration: 0.6}} transition={{ duration: 0.5 }}
> >
Ihr Experte für Rechtsanwälte
</motion.h1> </motion.h1>
<motion.h2 <motion.h2
className="text-4xl md:text-6xl font-bold text-blue-200 mb-4" className="text-4xl md:text-6xl font-extrabold text-white mb-6 leading-tight"
initial={{opacity: 0, y: 20}} initial={{ opacity: 0, y: 10 }}
animate={{opacity: 1, y: 0}} animate={{ opacity: 1, y: 0 }}
transition={{duration: 0.6, delay: 0.2}} 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 <Typewriter
words={services} words={services}
loop={true} loop
cursor cursor
cursorStyle="_" cursorStyle="_"
typeSpeed={60} typeSpeed={60}
deleteSpeed={40} deleteSpeed={40}
delaySpeed={1500} delaySpeed={1500}
/> />
</motion.h2> </span>
<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.
</motion.p> </motion.p>
</div> </div>
</motion.section> </motion.section>