Merge branch 'dev' into 'production'

Merge dev into production

See merge request rheinsw/website!27

components/Home/Hero/Hero.tsx

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