From 7bc98c03e48fbf68c02cacf479d489ef55db2cd5 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Sun, 31 May 2026 15:04:24 +0200
Subject: [PATCH] feat: update Hero component styles and enhance index page
 layout with dynamic sections

---
 components/Hero.vue | 24 ++++++++++++++++----
 pages/index.vue     | 53 ++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 72 insertions(+), 5 deletions(-)

diff --git a/components/Hero.vue b/components/Hero.vue
index 1075e25..c7787f5 100644
--- a/components/Hero.vue
+++ b/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;
diff --git a/pages/index.vue b/pages/index.vue
index 90130d0..e9f08e3 100644
--- a/pages/index.vue
+++ b/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>