feat: update Hero component styles and enhance index page layout with dynamic sections

components/Hero.vue

@@ -1,13 +1,13 @@
 <template>
   <section
     id="home"
-    class="relative min-h-full flex items-center justify-center overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100"
+    class="hero-shell relative overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100"
   >
     <!-- Decorative Elements -->
     <div class="absolute inset-0 z-0">
       <div class="absolute top-0 right-0 w-96 h-96 bg-primary-200/30 rounded-full blur-3xl" />
       <div class="absolute bottom-0 left-0 w-96 h-96 bg-gray-300/30 rounded-full blur-3xl" />
-      <picture class="absolute inset-0 opacity-10">
+      <picture class="absolute inset-0 opacity-15">
         <source
           v-if="heroImage.mobileWebp && heroImage.desktopWebp"
           type="image/webp"
@@ -18,7 +18,7 @@
           :src="heroImage.fallback"
           alt=""
           aria-hidden="true"
-          class="w-full h-full object-cover"
+          class="w-full h-full object-cover object-[center_36%]"
           width="1600"
           height="900"
           loading="eager"
@@ -29,7 +29,7 @@
     </div>
 
     <!-- Content -->
-    <div class="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-8">
+    <div class="relative z-20 max-w-7xl mx-auto">
       <div class="text-center">
         <h1 class="text-5xl sm:text-6xl lg:text-7xl font-display font-bold text-gray-900 mb-6 leading-tight animate-fade-in">
           Willkommen beim<br>
@@ -124,6 +124,22 @@ const yearsSinceFounding = new Date().getFullYear() - foundingYear
 </script>
 
 <style scoped>
+.hero-shell {
+  min-height: 430px;
+}
+
+@media (min-width: 1024px) {
+  .hero-shell {
+    min-height: 540px;
+  }
+}
+
+@media (min-aspect-ratio: 21/9) {
+  .hero-shell {
+    min-height: 640px;
+  }
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;