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;

pages/index.vue

@@ -207,8 +207,31 @@
       </div>
     </div>
 
+    <template v-if="heroSection">
+      <component :is="getComponentForSection(heroSection.id)" />
+    </template>
+
+    <div
+      v-if="featuredWidgetSection"
+      class="relative z-30 px-4 sm:px-6 lg:px-8"
+      :class="hasHeroSection ? '-mt-44 sm:-mt-48 lg:-mt-52' : 'mt-8'"
+    >
+      <div class="featured-widget-shell max-w-6xl mx-auto rounded-2xl border border-gray-200 bg-white/25 backdrop-blur-md overflow-hidden min-h-[22rem] sm:min-h-[25rem]">
+        <HomeSpielplanTeamWidget
+          v-if="featuredWidgetSection.id === 'spielplan_team'"
+          :season="featuredWidgetSection.config?.season"
+          :team-name="featuredWidgetSection.config?.teamName"
+          :team-age-group="featuredWidgetSection.config?.teamAgeGroup"
+        />
+        <component
+          :is="getComponentForSection(featuredWidgetSection.id)"
+          v-else
+        />
+      </div>
+    </div>
+
     <template
-      v-for="section in enabledSections"
+      v-for="section in remainingWidgetSections"
       :key="section.key"
     >
       <HomeSpielplanTeamWidget
@@ -366,6 +389,11 @@ function applyPersonalization(baseSections, settingsSections) {
 
 const resolvedSections = computed(() => applyPersonalization([...sections.value], personalizedSections.value))
 const enabledSections = computed(() => resolvedSections.value.filter(section => section.enabled !== false))
+const heroSection = computed(() => enabledSections.value.find(section => section.id === 'banner') || null)
+const hasHeroSection = computed(() => !!heroSection.value)
+const widgetSections = computed(() => enabledSections.value.filter(section => section.id !== 'banner'))
+const featuredWidgetSection = computed(() => widgetSections.value[0] || null)
+const remainingWidgetSections = computed(() => widgetSections.value.slice(1))
 
 const componentMap = {
   banner: Hero,
@@ -582,3 +610,26 @@ async function saveEditor() {
   }
 }
 </script>
+
+<style scoped>
+.featured-widget-shell :deep(section),
+.featured-widget-shell :deep(.bg-white),
+.featured-widget-shell :deep(.bg-gray-50) {
+  --tw-bg-opacity: 0 !important;
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+.featured-widget-shell :deep([class*='bg-white']),
+.featured-widget-shell :deep([class*='bg-gray-50']) {
+  --tw-bg-opacity: 0 !important;
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+.featured-widget-shell :deep(.py-16),
+.featured-widget-shell :deep(.sm\:py-20) {
+  padding-top: 1.5rem !important;
+  padding-bottom: 2rem !important;
+}
+</style>