Migrate from old project

components/Home/Hero/Hero.tsx

@@ -0,0 +1,45 @@
+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;