Thatsaphorn Atchariyaphap
37cde33b41
Merge branch 'Homepage Refactoring - Pt .3' into 'production' See merge request rheinsw/website!30
101 lines
3.9 KiB
TypeScript
101 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import {Typewriter} from 'react-simple-typewriter';
|
|
import {motion} from 'framer-motion';
|
|
|
|
const Hero = () => {
|
|
return (
|
|
<div
|
|
className="relative w-full pt-[4vh] md:pt-[12vh] h-screen flex flex-col overflow-hidden"
|
|
style={{
|
|
backgroundColor: 'var(--primary-bg)',
|
|
color: 'white',
|
|
}}
|
|
>
|
|
{/* Background Image */}
|
|
<div className="absolute inset-0 z-0">
|
|
<Image
|
|
src="/images/home_hero.jpg"
|
|
alt="Rhein river aerial view"
|
|
layout="fill"
|
|
objectFit="cover"
|
|
className="blur-md scale-105"
|
|
priority
|
|
/>
|
|
<div className="absolute inset-0 bg-black/40"/>
|
|
</div>
|
|
|
|
{/* Main content */}
|
|
<div className="relative z-10 flex justify-center flex-col w-[90%] sm:w-[80%] h-full mx-auto">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12">
|
|
{/* Text Content */}
|
|
<div>
|
|
<motion.h1
|
|
className="text-3xl sm:text-4xl md:text-5xl mt-6 mb-6 font-bold text-white"
|
|
initial={{opacity: 0, y: 30}}
|
|
animate={{opacity: 1, y: 0}}
|
|
transition={{duration: 0.6, ease: 'easeOut'}}
|
|
>
|
|
Rhein-Software Development
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
className="text-lg md:text-xl text-gray-400"
|
|
initial={{opacity: 0, y: 30}}
|
|
animate={{opacity: 1, y: 0}}
|
|
transition={{duration: 0.6, delay: 0.2, ease: 'easeOut'}}
|
|
>
|
|
Digitale Lösungen für dein Unternehmen.
|
|
</motion.p>
|
|
|
|
<motion.p
|
|
className="mt-4 text-lg md:text-xl font-semibold text-white"
|
|
initial={{opacity: 0}}
|
|
animate={{opacity: 1}}
|
|
transition={{delay: 0.9, duration: 0.6}}
|
|
>
|
|
<Typewriter
|
|
words={['Beratung', 'Entwicklung', 'Wartung', 'Fehlerbehebung']}
|
|
loop={true}
|
|
cursor
|
|
cursorStyle="_"
|
|
typeSpeed={60}
|
|
deleteSpeed={40}
|
|
delaySpeed={1500}
|
|
/>
|
|
</motion.p>
|
|
</div>
|
|
|
|
{/* Floating Image */}
|
|
<motion.div
|
|
className="hidden lg:block"
|
|
initial={{opacity: 0, y: 30}}
|
|
animate={{opacity: 1, y: 0}}
|
|
transition={{duration: 0.8, ease: 'easeOut', delay: 0.3}}
|
|
>
|
|
<motion.div
|
|
animate={{y: [0, -10, 0]}}
|
|
transition={{
|
|
duration: 4,
|
|
repeat: Infinity,
|
|
ease: 'easeInOut',
|
|
}}
|
|
className="animate-float"
|
|
>
|
|
<Image
|
|
src="/images/hero.png"
|
|
alt="hero graphic"
|
|
width={700}
|
|
height={700}
|
|
/>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|