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

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>