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;