Thatsaphorn Atchariyaphap
a5454882ed
- Introduce keyframes for float animation in globals.css. - Apply float animation to the hero image and update text to white.
61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
import Image from "next/image";
|
|
|
|
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 with Blur */}
|
|
<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
|
|
/>
|
|
{/* Dark overlay for better text contrast */}
|
|
<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>
|
|
<h1
|
|
data-aos="fade-up"
|
|
className="text-2xl sm:text-4xl md:text-5xl mt-6 mb-6 font-bold md:leading-[3rem] lg:leading-[3.5rem] text-white"
|
|
>
|
|
Rhein Software Development
|
|
</h1>
|
|
<p
|
|
data-aos="fade-up"
|
|
data-aos-delay="200"
|
|
className="text-white"
|
|
>
|
|
Wir entwickeln performante und zukunftssichere Software für deine Vision.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Floating Image Content */}
|
|
<div
|
|
data-aos="fade-up"
|
|
data-aos-delay="400"
|
|
className="hidden lg:block animate-float"
|
|
>
|
|
<Image src="/images/hero.png" alt="hero graphic" width={700} height={700}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|