feat: enhance HeroSection layout and content with improved grid structure and added statistics

apps/web/src/features/hero/components/HeroSection.tsx

@@ -56,14 +56,88 @@ export const HeroSection: React.FC = () => {
         variants={containerVariants}
         initial="hidden"
         animate="visible"
-        className="max-w-5xl mx-auto text-center"
+        className="max-w-7xl mx-auto w-full"
       >
-        {/* Profile Image with Green Border */}
+        {/* Grid Layout: Text left, Image right on desktop, stacked on mobile */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
+          {/* Text Content */}
+          <div className="text-center lg:text-left">
+            {/* Badge */}
+            <motion.div variants={itemVariants} className="mb-8">
+              <div className="inline-block px-4 py-2 border border-green-500/50 rounded-full bg-green-500/10 backdrop-blur-sm">
+                <span className="text-green-400 text-sm font-medium flex items-center gap-2 justify-center lg:justify-start">
+                  <span className="w-2 h-2 bg-green-500 rounded-full"></span>
+                  Softwareentwickler & Architektur-Enthusiast | Deutschland
+                </span>
+              </div>
+            </motion.div>
+
+            {/* Main Heading */}
+            <motion.h1 variants={itemVariants} className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
+              <span className="text-white">Robert Bretz</span>
+              <br />
+              <span className="bg-gradient-to-r from-green-500 to-emerald-500 bg-clip-text text-transparent">
+                Saubere, performante digitale Lösungen
+              </span>
+            </motion.h1>
+
+            {/* Subtitle */}
+            <motion.p
+              variants={itemVariants}
+              className="text-gray-300 text-lg sm:text-xl mb-8"
+            >
+              Ich entwickle moderne Anwendungen mit React, TypeScript, Tailwind, .NET, NestJS und sauberer Architektur.
+              Mein Fokus liegt auf Performance, Vertical Slice Architecture, Docker-Deployments und skalierbaren Backend-Systemen.
+            </motion.p>
+
+            {/* Stats */}
+            <motion.div
+              variants={itemVariants}
+              className="grid grid-cols-3 gap-3 sm:gap-6 mb-12"
+            >
+              <motion.div
+                whileHover={{ scale: 1.05, y: -4 }}
+                transition={{ type: 'spring', stiffness: 300 }}
+                className="border border-green-500/30 rounded-lg p-4 sm:p-5 bg-green-500/5 backdrop-blur-sm"
+              >
+                <div className="text-2xl sm:text-3xl font-bold text-green-500">4+</div>
+                <div className="text-gray-400 text-xs sm:text-sm">Jahre Erfahrung</div>
+              </motion.div>
+              <motion.div
+                whileHover={{ scale: 1.05, y: -4 }}
+                transition={{ type: 'spring', stiffness: 300 }}
+                className="border border-green-500/30 rounded-lg p-4 sm:p-5 bg-green-500/5 backdrop-blur-sm"
+              >
+                <div className="text-2xl sm:text-3xl font-bold text-green-500">30+</div>
+                <div className="text-gray-400 text-xs sm:text-sm">Projekte umgesetzt</div>
+              </motion.div>
+              <motion.div
+                whileHover={{ scale: 1.05, y: -4 }}
+                transition={{ type: 'spring', stiffness: 300 }}
+                className="border border-green-500/30 rounded-lg p-4 sm:p-5 bg-green-500/5 backdrop-blur-sm"
+              >
+                <div className="text-2xl sm:text-3xl font-bold text-green-500">99%</div>
+                <div className="text-gray-400 text-xs sm:text-sm">Performance-Fokus</div>
+              </motion.div>
+            </motion.div>
+
+            {/* CTA Buttons */}
+            <motion.div variants={itemVariants} className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-12">
+              <Button variant="primary" size="lg">
+                Lass uns sprechen
+              </Button>
+              <Button variant="secondary" size="lg">
+                Projekte ansehen
+              </Button>
+            </motion.div>
+          </div>
+
+          {/* Profile Image - Right side on desktop, centered on mobile */}
           <motion.div
             variants={imageVariants}
-          className="mb-12 flex justify-center"
+            className="flex justify-center lg:justify-end"
           >
-          <div className="relative w-48 h-48 sm:w-56 sm:h-56">
+            <div className="relative w-56 h-56 sm:w-72 sm:h-72 lg:w-96 lg:h-96">
               {/* Animated green borders on sides */}
               <svg
                 className="absolute inset-0 w-full h-full pointer-events-none"
@@ -102,82 +176,14 @@ export const HeroSection: React.FC = () => {
               />
             </div>
           </motion.div>
-
-        {/* Badge */}
-        <motion.div variants={itemVariants} className="mb-8">
-          <div className="inline-block px-4 py-2 border border-green-500/50 rounded-full bg-green-500/10 backdrop-blur-sm">
-            <span className="text-green-400 text-sm font-medium flex items-center gap-2">
-              <span className="w-2 h-2 bg-green-500 rounded-full"></span>
-              Softwareentwickler & Architektur-Enthusiast | Deutschland
-            </span>
         </div>
-        </motion.div>
-
-        {/* Main Heading */}
-        <motion.h1 variants={itemVariants} className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
-          <span className="text-white">Robert Bretz</span>
-          <br />
-          <span className="bg-gradient-to-r from-green-500 to-emerald-500 bg-clip-text text-transparent">
-            Saubere, performante digitale Lösungen
-          </span>
-        </motion.h1>
-
-        {/* Subtitle */}
-        <motion.p
-          variants={itemVariants}
-          className="text-gray-300 text-lg sm:text-xl max-w-2xl mx-auto mb-8"
-        >
-          Ich entwickle moderne Anwendungen mit React, TypeScript, Tailwind, .NET, NestJS und sauberer Architektur.
-          Mein Fokus liegt auf Performance, Vertical Slice Architecture, Docker-Deployments und skalierbaren Backend-Systemen.
-        </motion.p>
-
-        {/* Stats */}
-        <motion.div
-          variants={itemVariants}
-          className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-8 mb-12 max-w-2xl mx-auto"
-        >
-          <motion.div
-            whileHover={{ scale: 1.05, y: -4 }}
-            transition={{ type: 'spring', stiffness: 300 }}
-            className="border border-green-500/30 rounded-lg p-5 bg-green-500/5 backdrop-blur-sm"
-          >
-            <div className="text-3xl font-bold text-green-500">4+</div>
-            <div className="text-gray-400 text-sm">Jahre Erfahrung</div>
-          </motion.div>
-          <motion.div
-            whileHover={{ scale: 1.05, y: -4 }}
-            transition={{ type: 'spring', stiffness: 300 }}
-            className="border border-green-500/30 rounded-lg p-5 bg-green-500/5 backdrop-blur-sm"
-          >
-            <div className="text-3xl font-bold text-green-500">30+</div>
-            <div className="text-gray-400 text-sm">Projekte umgesetzt</div>
-          </motion.div>
-          <motion.div
-            whileHover={{ scale: 1.05, y: -4 }}
-            transition={{ type: 'spring', stiffness: 300 }}
-            className="border border-green-500/30 rounded-lg p-5 bg-green-500/5 backdrop-blur-sm"
-          >
-            <div className="text-3xl font-bold text-green-500">99%</div>
-            <div className="text-gray-400 text-sm">Performance-Fokus</div>
-          </motion.div>
-        </motion.div>
-
-        {/* CTA Buttons */}
-        <motion.div variants={itemVariants} className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
-          <Button variant="primary" size="lg">
-            Lass uns sprechen
-          </Button>
-          <Button variant="secondary" size="lg">
-            Projekte ansehen
-          </Button>
-        </motion.div>
 
         {/* Scroll Indicator */}
         <motion.div
           variants={itemVariants}
           animate={{ y: [0, 12, 0] }}
           transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }}
-          className="flex justify-center"
+          className="flex justify-center mt-16"
         >
           <ArrowDown className="text-green-500" size={32} />
         </motion.div>