46 lines
1.7 KiB
TypeScript
46 lines
1.7 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"
|
|
style={{
|
|
backgroundColor: "var(--primary-bg)",
|
|
color: "var(--primary-text)",
|
|
}}
|
|
>
|
|
<div className="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]"
|
|
>
|
|
Rhein Software Development
|
|
</h1>
|
|
<p data-aos="fade-up" data-aos-delay="200">
|
|
Wir entwickeln performante und zukunftssichere Software für deine Vision.
|
|
</p>
|
|
</div>
|
|
{/* Image Content */}
|
|
<div
|
|
data-aos="fade-up"
|
|
data-aos-delay="400"
|
|
className="hidden lg:block"
|
|
>
|
|
<Image src="/images/hero.png" alt="hero" width={700} height={700}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Farbverlauf zum nächsten Bereich */}
|
|
{/*<div*/}
|
|
{/* className="absolute bottom-0 left-0 w-full h-20 bg-gradient-to-b from-[var(--primary-bg)] to-[var(--secondary-bg)]"*/}
|
|
{/*/>*/}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|