Refresh home view with updated hero and steps

frontend/src/assets/nominate-scroll-feather-hq.svg

@@ -0,0 +1,100 @@
+<svg width="1536" height="1000" viewBox="0 0 1536 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="backCard" x1="783" y1="193" x2="1072" y2="633" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#C599FF"/>
+      <stop offset=".46" stop-color="#8E65EE"/>
+      <stop offset="1" stop-color="#5D40BB"/>
+    </linearGradient>
+    <linearGradient id="backCardShade" x1="909" y1="236" x2="1049" y2="680" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFF7FF" stop-opacity=".34"/>
+      <stop offset="1" stop-color="#2F166F" stop-opacity=".24"/>
+    </linearGradient>
+    <linearGradient id="paperFill" x1="442" y1="244" x2="820" y2="713" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFFFFF"/>
+      <stop offset=".58" stop-color="#FFF8FC"/>
+      <stop offset="1" stop-color="#F7EDFF"/>
+    </linearGradient>
+    <linearGradient id="paperStroke" x1="381" y1="253" x2="672" y2="768" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F08CAD"/>
+      <stop offset="1" stop-color="#F5C58D"/>
+    </linearGradient>
+    <linearGradient id="feather" x1="869" y1="224" x2="1102" y2="660" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E18CF9"/>
+      <stop offset=".45" stop-color="#8B5AEA"/>
+      <stop offset="1" stop-color="#4D2BAE"/>
+    </linearGradient>
+    <linearGradient id="featherLight" x1="982" y1="219" x2="903" y2="577" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFD3ED" stop-opacity=".9"/>
+      <stop offset="1" stop-color="#C8A8FF" stop-opacity=".2"/>
+    </linearGradient>
+    <linearGradient id="starGold" x1="568" y1="360" x2="679" y2="495" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFEAB0"/>
+      <stop offset=".55" stop-color="#FFC86C"/>
+      <stop offset="1" stop-color="#F29C44"/>
+    </linearGradient>
+    <linearGradient id="shadowFade" x1="365" y1="768" x2="1084" y2="829" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFB36B" stop-opacity=".18"/>
+      <stop offset=".6" stop-color="#9B6DFF" stop-opacity=".14"/>
+      <stop offset="1" stop-color="#FFB36B" stop-opacity="0"/>
+    </linearGradient>
+    <filter id="cardShadow" x="0" y="0" width="1536" height="1000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="34" stdDeviation="36" flood-color="#7551D6" flood-opacity=".18"/>
+      <feDropShadow dx="0" dy="8" stdDeviation="12" flood-color="#F3A75C" flood-opacity=".1"/>
+    </filter>
+    <filter id="sparkGlow" x="-40%" y="-40%" width="180%" height="180%" color-interpolation-filters="sRGB">
+      <feGaussianBlur stdDeviation="2.5" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <clipPath id="paperClip">
+      <path d="M378 246C390 220 420 208 449 214L720 267C757 274 779 309 770 346L686 718C679 749 651 770 619 768L329 749C293 747 269 711 283 678L337 549C344 532 344 512 337 495L301 406C291 381 299 353 320 337L352 313C360 307 366 299 370 290L378 246Z"/>
+    </clipPath>
+  </defs>
+
+  <g filter="url(#sparkGlow)" opacity=".9">
+    <path d="M180 236l17 41 41 17-41 17-17 41-17-41-41-17 41-17 17-41z" fill="#FFC96B"/>
+    <path d="M235 647l14 34 34 14-34 14-14 34-14-34-34-14 34-14 14-34z" fill="#FFD98E"/>
+    <path d="M1247 292l14 34 34 14-34 14-14 34-14-34-34-14 34-14 14-34z" fill="#FFC96B"/>
+    <path d="M1329 593l18 44 44 18-44 18-18 44-18-44-44-18 44-18 18-44z" fill="#FFD98E"/>
+    <path d="M108 565l7 17 17 7-17 7-7 17-7-17-17-7 17-7 7-17z" fill="#F8B861"/>
+    <path d="M352 249l8 20 20 8-20 8-8 20-8-20-20-8 20-8 8-20z" fill="#F6C978"/>
+    <path d="M1362 399l8 20 20 8-20 8-8 20-8-20-20-8 20-8 8-20z" fill="#F8B861"/>
+    <circle cx="322" cy="575" r="9" fill="#FFC46A"/>
+    <circle cx="1165" cy="623" r="8" fill="#FFD98E"/>
+    <circle cx="129" cy="409" r="6" fill="#FFD98E"/>
+  </g>
+
+  <ellipse cx="748" cy="789" rx="443" ry="44" fill="url(#shadowFade)"/>
+
+  <g filter="url(#cardShadow)">
+    <path d="M739 206C739 186 756 170 776 172L1014 191C1034 193 1048 210 1047 230L1025 690C1024 713 1004 729 982 725L744 685C726 682 713 666 714 648L739 206Z" fill="url(#backCard)"/>
+    <path d="M775 216L1007 235L988 669L759 632L775 216Z" fill="url(#backCardShade)"/>
+    <path d="M784 211L1012 231" stroke="#D2B5FF" stroke-width="18" stroke-linecap="round" opacity=".45"/>
+    <path d="M1005 265L985 664" stroke="#3F268E" stroke-width="13" stroke-linecap="round" opacity=".24"/>
+
+    <path d="M378 246C390 220 420 208 449 214L720 267C757 274 779 309 770 346L686 718C679 749 651 770 619 768L329 749C293 747 269 711 283 678L337 549C344 532 344 512 337 495L301 406C291 381 299 353 320 337L352 313C360 307 366 299 370 290L378 246Z" fill="url(#paperFill)" stroke="url(#paperStroke)" stroke-width="16" stroke-linejoin="round"/>
+    <g clip-path="url(#paperClip)">
+      <path d="M284 678C347 651 422 650 506 675C569 693 630 696 688 681L674 759L310 744L284 678Z" fill="#FFEFE3"/>
+      <path d="M343 324C441 340 575 368 743 409" stroke="#F8C4D0" stroke-width="7" opacity=".45"/>
+    </g>
+
+    <path d="M590 352l34 75 82 9-61 55 17 81-72-41-72 41 17-81-61-55 82-9 34-75z" fill="url(#starGold)" stroke="#F7B354" stroke-width="17" stroke-linejoin="round"/>
+    <path d="M591 397l18 39 43 5-32 29 9 42-38-21-38 21 9-42-32-29 43-5 18-39z" fill="#FFF7F0" opacity=".45"/>
+
+    <path d="M420 514h190" stroke="#CFB9EE" stroke-width="21" stroke-linecap="round"/>
+    <path d="M418 595h213" stroke="#C4AFE8" stroke-width="21" stroke-linecap="round"/>
+    <path d="M414 675h139" stroke="#BBA5E5" stroke-width="21" stroke-linecap="round"/>
+    <circle cx="405" cy="427" r="10" fill="#F4C4C5"/>
+
+    <path d="M827 602C926 424 1067 286 1267 195C1177 355 1057 521 868 657L765 698L827 602Z" fill="url(#feather)" stroke="#6E45C9" stroke-width="16" stroke-linejoin="round"/>
+    <path d="M867 582C966 451 1084 338 1232 223C1154 338 1044 470 868 657" fill="url(#featherLight)"/>
+    <path d="M819 638C923 525 1049 403 1207 244" stroke="#4C2FA7" stroke-width="16" stroke-linecap="round"/>
+    <path d="M938 443C1002 411 1075 365 1158 305" stroke="#A783F5" stroke-width="11" stroke-linecap="round" opacity=".78"/>
+    <path d="M887 527C938 498 992 459 1049 410" stroke="#C7ABFF" stroke-width="9" stroke-linecap="round" opacity=".75"/>
+    <path d="M809 616L747 724" stroke="#F4A344" stroke-width="18" stroke-linecap="round"/>
+    <path d="M747 724L706 750" stroke="#BF6E37" stroke-width="16" stroke-linecap="round"/>
+    <path d="M724 741C752 761 779 766 805 755C799 785 774 811 735 816C708 812 687 798 672 774L724 741Z" fill="#FFF6FA" stroke="#C6A2DB" stroke-width="13" stroke-linejoin="round"/>
+  </g>
+</svg>

frontend/src/assets/step-nominate.svg

@@ -0,0 +1,34 @@
+<svg width="420" height="260" viewBox="0 0 420 260" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="paper" x1="126" y1="47" x2="252" y2="183" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFF8FF"/>
+      <stop offset="1" stop-color="#F4ECFF"/>
+    </linearGradient>
+    <linearGradient id="violet" x1="230" y1="38" x2="318" y2="160" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#B98CFF"/>
+      <stop offset="1" stop-color="#7353D9"/>
+    </linearGradient>
+    <linearGradient id="gold" x1="229" y1="57" x2="262" y2="93" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFE6A8"/>
+      <stop offset="1" stop-color="#F2AF36"/>
+    </linearGradient>
+    <filter id="softShadow" x="75" y="26" width="286" height="190" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="16" stdDeviation="16" flood-color="#7C5CFF" flood-opacity="0.16"/>
+    </filter>
+  </defs>
+  <g opacity=".85">
+    <path d="M67 66l5 12 12 5-12 5-5 12-5-12-12-5 12-5 5-12zM350 54l4 9 9 4-9 4-4 9-4-9-9-4 9-4 4-9zM332 146l3 7 7 3-7 3-3 7-3-7-7-3 7-3 3-7z" fill="#F8C263"/>
+    <path d="M98 151l4 9 9 4-9 4-4 9-4-9-9-4 9-4 4-9z" fill="#B78CFF"/>
+  </g>
+  <g filter="url(#softShadow)">
+    <rect x="182" y="43" width="118" height="135" rx="12" fill="url(#violet)" stroke="#9A7BEE" stroke-width="5"/>
+    <rect x="199" y="32" width="108" height="135" rx="12" fill="#A77BFA" stroke="#7C5CFF" stroke-width="5"/>
+    <rect x="111" y="64" width="124" height="139" rx="14" fill="url(#paper)" stroke="#F0A3B9" stroke-width="5"/>
+    <path d="M138 104h61M138 124h58M138 144h42" stroke="#B8A6D9" stroke-width="7" stroke-linecap="round"/>
+    <path d="M175 77l10 23 25 3-18 16 5 25-22-13-22 13 5-25-18-16 25-3 10-23z" fill="url(#gold)" stroke="#F0B851" stroke-width="5" stroke-linejoin="round"/>
+    <path d="M240 158c28-43 60-72 105-83-27 33-54 71-101 100l-18 5 14-22z" fill="#815BE7" stroke="#6B49CB" stroke-width="5" stroke-linejoin="round"/>
+    <path d="M264 144c22-23 45-42 70-58" stroke="#D8C5FF" stroke-width="5" stroke-linecap="round"/>
+    <path d="M222 186c19-11 28-18 37-35" stroke="#F2B85F" stroke-width="7" stroke-linecap="round"/>
+  </g>
+  <ellipse cx="211" cy="218" rx="119" ry="12" fill="#C9B5F8" opacity=".18"/>
+</svg>

frontend/src/assets/step-vote.svg

@@ -0,0 +1,35 @@
+<svg width="420" height="260" viewBox="0 0 420 260" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="box" x1="111" y1="91" x2="291" y2="214" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#A67BFF"/>
+      <stop offset=".55" stop-color="#7653D9"/>
+      <stop offset="1" stop-color="#5C3AB9"/>
+    </linearGradient>
+    <linearGradient id="lid" x1="127" y1="56" x2="294" y2="128" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#DDBBFF"/>
+      <stop offset="1" stop-color="#8B63ED"/>
+    </linearGradient>
+    <filter id="softShadow" x="79" y="38" width="268" height="205" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#6E4DD4" flood-opacity=".18"/>
+    </filter>
+  </defs>
+  <g opacity=".85">
+    <path d="M70 57l5 12 12 5-12 5-5 12-5-12-12-5 12-5 5-12zM341 71l4 9 9 4-9 4-4 9-4-9-9-4 9-4 4-9zM332 168l3 7 7 3-7 3-3 7-3-7-7-3 7-3 3-7z" fill="#F8C263"/>
+    <path d="M101 159l4 9 9 4-9 4-4 9-4-9-9-4 9-4 4-9z" fill="#B78CFF"/>
+  </g>
+  <path d="M89 147c-18-25 5-48 35-38M321 138c22-12 18-42-12-52" stroke="#F3D4FF" stroke-width="8" stroke-linecap="round" opacity=".65"/>
+  <g filter="url(#softShadow)">
+    <path d="M178 42l86 20 24 78-118-24-26-57c-3-7 4-15 12-13l22-4z" fill="#FFF8FF" stroke="#D7A7E8" stroke-width="5"/>
+    <path d="M218 80l8 18 20 2-15 13 5 20-18-10-18 10 5-20-15-13 20-2 8-18z" fill="#F8C263"/>
+    <rect x="105" y="99" width="210" height="40" rx="10" fill="url(#lid)" stroke="#8C67E8" stroke-width="5"/>
+    <path d="M124 128h172l-17 84H142l-18-84z" fill="url(#box)" stroke="#6D4EC8" stroke-width="5" stroke-linejoin="round"/>
+    <path d="M153 140l13 56M267 140l-13 56" stroke="#A78BFA" stroke-width="4" opacity=".7"/>
+    <path d="M210 158c-9-17-40-9-40 14 0 24 40 42 40 42s40-18 40-42c0-23-31-31-40-14z" fill="#FFF8FF"/>
+    <path d="M140 103h138" stroke="#E6D8FF" stroke-width="5" stroke-linecap="round"/>
+  </g>
+  <path d="M68 122c35-34 68-34 96-8" stroke="#C6A7FF" stroke-width="8" stroke-linecap="round" opacity=".55"/>
+  <path d="M161 113l-16-4 8 16 8-12z" fill="#C6A7FF" opacity=".65"/>
+  <path d="M253 113c37-33 71-31 98 1" stroke="#C6A7FF" stroke-width="8" stroke-linecap="round" opacity=".55"/>
+  <path d="M348 114l-16-4 8 16 8-12z" fill="#C6A7FF" opacity=".65"/>
+  <ellipse cx="210" cy="226" rx="119" ry="12" fill="#C9B5F8" opacity=".18"/>
+</svg>

frontend/src/assets/step-winners.svg

@@ -0,0 +1,32 @@
+<svg width="420" height="260" viewBox="0 0 420 260" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="cup" x1="163" y1="44" x2="257" y2="169" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFE7A8"/>
+      <stop offset=".52" stop-color="#F6B94B"/>
+      <stop offset="1" stop-color="#C87A2D"/>
+    </linearGradient>
+    <linearGradient id="base" x1="134" y1="150" x2="285" y2="224" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D8BFFF"/>
+      <stop offset="1" stop-color="#7956DB"/>
+    </linearGradient>
+    <filter id="softShadow" x="86" y="31" width="263" height="207" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#A77821" flood-opacity=".17"/>
+    </filter>
+  </defs>
+  <g opacity=".9">
+    <path d="M72 55l5 12 12 5-12 5-5 12-5-12-12-5 12-5 5-12zM334 49l6 14 14 6-14 6-6 14-6-14-14-6 14-6 6-14zM333 161l4 9 9 4-9 4-4 9-4-9-9-4 9-4 4-9z" fill="#F8C263"/>
+    <path d="M98 153l4 9 9 4-9 4-4 9-4-9-9-4 9-4 4-9zM366 128l4 9 9 4-9 4-4 9-4-9-9-4 9-4 4-9z" fill="#A77BFA"/>
+  </g>
+  <g filter="url(#softShadow)">
+    <path d="M141 77h-35c0 44 25 70 62 72" stroke="#F6B94B" stroke-width="15" stroke-linecap="round"/>
+    <path d="M279 77h35c0 44-25 70-62 72" stroke="#F6B94B" stroke-width="15" stroke-linecap="round"/>
+    <path d="M148 47h124l-13 80c-4 26-24 45-49 45s-45-19-49-45L148 47z" fill="url(#cup)" stroke="#C87A2D" stroke-width="6" stroke-linejoin="round"/>
+    <path d="M210 82l9 20 22 3-16 15 4 22-19-11-19 11 4-22-16-15 22-3 9-20z" fill="#FFF8FF" stroke="#FAD481" stroke-width="5" stroke-linejoin="round"/>
+    <path d="M196 168h28l8 32h-44l8-32z" fill="#C87A2D" stroke="#9E6427" stroke-width="5"/>
+    <rect x="145" y="190" width="130" height="37" rx="8" fill="url(#base)" stroke="#6D4EC8" stroke-width="5"/>
+    <rect x="171" y="181" width="78" height="19" rx="7" fill="#F8C263" stroke="#C87A2D" stroke-width="5"/>
+    <path d="M178 209h64" stroke="#F6D18C" stroke-width="6" stroke-linecap="round"/>
+  </g>
+  <path d="M96 207h228" stroke="#D7C4FF" stroke-width="12" stroke-linecap="round" opacity=".55"/>
+  <ellipse cx="210" cy="231" rx="121" ry="12" fill="#C9B5F8" opacity=".18"/>
+</svg>

frontend/src/views/HomeView.vue

@@ -35,7 +35,10 @@ import Card from '../components/ui/Card.vue'
 import { useAwardsStore } from '../stores/awards'
 import { useAuthStore } from '../stores/auth'
 import { usePhases, type ActionKey, type PhaseState } from '../composables/usePhases'
-import heroKeyvisual from '../assets/hero-keyvisual.svg'
+import landingHeroCharacter from '../assets/landing-hero-character.png'
+import stepNominate from '../assets/step-nominate.svg'
+import stepVote from '../assets/step-vote.svg'
+import stepWinners from '../assets/step-winners.svg'
 
 const store = useAwardsStore()
 const authStore = useAuthStore()
@@ -132,22 +135,19 @@ const trustItems = [
 
 const steps = [
   {
-    icon: Sparkles,
+    image: stepNominate,
     title: 'Nominieren',
-    text: 'Trag deine Lieblings-Creator ein – bis zu 3 Favoriten pro Kategorie.',
+    text: 'Nominiere deine Favoriten in jeder Kategorie. Pro Kategorie 3 Nominierungen.',
-    accent: 'from-violet-200 to-fuchsia-100 text-violet-600',
   },
   {
-    icon: Heart,
+    image: stepVote,
     title: 'Voten',
-    text: 'Die Community stimmt ab. Eine Stimme pro Kategorie, mit ganz viel Herz.',
+    text: 'Die Community stimmt über ihre Top-Favoriten ab. Nur 1 Stimme pro Kategorie.',
-    accent: 'from-rose-200 to-amber-100 text-rose-500',
   },
   {
-    icon: Trophy,
+    image: stepWinners,
-    title: 'Feiern',
+    title: 'Die Besten',
     text: 'Die Stimmen werden gezählt und die Gewinner live in der Show gekürt!',
-    accent: 'from-amber-200 to-emerald-100 text-amber-600',
   },
 ]
 
@@ -286,31 +286,39 @@ const winnersScopeYear = computed(() => heroYear.value - 1)
       </div>
 
       <!-- Hero Keyvisual -->
-      <Card class="relative overflow-hidden p-0">
+      <Card class="relative h-full overflow-hidden p-0">
-        <div class="relative min-h-[640px]">
+        <div class="relative h-full min-h-[560px] overflow-hidden bg-[linear-gradient(145deg,#f6efff_0%,#d9c9f2_48%,#7b61aa_100%)] sm:min-h-[640px]">
-          <img :src="heroKeyvisual" alt="VTuber Star Awards Keyvisual (Platzhalter)" class="absolute inset-0 h-full w-full object-cover object-top" />
+          <div class="absolute inset-0 bg-[radial-gradient(circle_at_76%_16%,rgba(255,255,255,0.58),transparent_34%),radial-gradient(circle_at_18%_72%,rgba(250,204,21,0.2),transparent_32%),linear-gradient(135deg,rgba(64,34,112,0.28),rgba(64,34,112,0.02)_46%,rgba(255,255,255,0.22))]" />
-          <div class="absolute inset-0 bg-[radial-gradient(circle_at_70%_18%,rgba(255,255,255,0.55),transparent_45%)]" />
+          <div class="absolute -bottom-16 -left-16 h-64 w-64 rounded-full bg-amber-200/25 blur-3xl" />
+          <div class="absolute right-16 top-20 h-44 w-44 rounded-full bg-white/30 blur-3xl" />
 
-          <!-- Host Badge -->
+          <img
-          <div class="absolute bottom-7 right-7 w-[230px] rounded-[24px] border border-white/70 bg-white/80 p-5 shadow-lg backdrop-blur">
+            :src="landingHeroCharacter"
-            <p class="text-[10px] font-semibold uppercase tracking-[0.3em] text-slate-400">Host</p>
+            alt="VTuber Award Host mit Trophäe"
+            class="absolute right-[-18px] top-8 z-10 h-[470px] max-w-none object-contain drop-shadow-[0_30px_50px_rgba(32,13,77,0.38)] sm:right-6 sm:top-4 sm:h-[600px] lg:right-8 xl:right-12 xl:h-[640px]"
+          />
+
+          <div class="absolute bottom-0 left-0 right-0 z-20 bg-gradient-to-t from-[#241049]/92 via-[#241049]/48 to-transparent px-6 pb-6 pt-28 sm:px-8 sm:pb-8">
+            <div class="max-w-[330px] rounded-[24px] border border-white/25 bg-white/82 p-5 shadow-[0_24px_70px_rgba(32,13,77,0.28)] backdrop-blur">
+              <p class="text-[10px] font-semibold uppercase tracking-[0.3em] text-violet-500">Host</p>
               <p class="mt-1 flex items-center gap-2 font-[Cormorant_Garamond] text-3xl text-violet-800">
                 Jayuhime <Sparkles class="h-5 w-5 text-amber-400" />
               </p>
-            <p class="text-sm text-slate-500">VTuber &amp; Award Host</p>
+              <p class="text-sm text-slate-600">VTuber &amp; Award Host</p>
-            <div class="mt-3 flex items-center gap-2 text-violet-500">
+              <div class="mt-4 grid grid-cols-3 gap-2 text-violet-600">
-              <span class="grid h-8 w-8 place-items-center rounded-full bg-violet-50">
+                <span class="inline-flex items-center justify-center rounded-full bg-violet-50 px-3 py-2">
                   <Video class="h-4 w-4" />
                 </span>
-              <span class="grid h-8 w-8 place-items-center rounded-full bg-violet-50">
+                <span class="inline-flex items-center justify-center rounded-full bg-violet-50 px-3 py-2">
                   <PartyPopper class="h-4 w-4" />
                 </span>
-              <span class="grid h-8 w-8 place-items-center rounded-full bg-violet-50">
+                <span class="inline-flex items-center justify-center rounded-full bg-violet-50 px-3 py-2">
-                <svg class="h-3.5 w-3.5" viewBox="0 0 19 19"><use href="/icons.svg#x-icon" /></svg>
+                  <Trophy class="h-4 w-4" />
                 </span>
               </div>
             </div>
           </div>
+        </div>
       </Card>
     </section>
 
@@ -328,21 +336,32 @@ const winnersScopeYear = computed(() => heroYear.value - 1)
     </section>
 
     <!-- ============ SO FUNKTIONIERT'S ============ -->
-    <section class="space-y-10">
+    <section class="space-y-7 rounded-[32px] border border-violet-100/80 bg-white/72 px-6 py-8 shadow-[0_28px_90px_rgba(124,92,255,0.09)] sm:px-8">
       <div class="text-center">
         <p class="text-xs font-semibold uppercase tracking-[0.4em] text-amber-500">So funktioniert's</p>
-        <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">In drei Schritten zur großen Bühne</h2>
       </div>
-      <div class="grid gap-6 md:grid-cols-3">
+      <div class="grid gap-8 md:grid-cols-3">
-        <div v-for="(step, index) in steps" :key="step.title" class="relative text-center">
+        <div v-for="(step, index) in steps" :key="step.title" class="relative">
-          <div :class="['mx-auto grid h-20 w-20 place-items-center rounded-3xl bg-gradient-to-br shadow-[0_18px_40px_rgba(124,92,255,0.18)]', step.accent]">
+          <img :src="step.image" alt="" aria-hidden="true" class="mx-auto h-40 w-full max-w-[292px] object-contain" />
-            <component :is="step.icon" class="h-8 w-8" />
+          <div
+            v-if="index < steps.length - 1"
+            class="pointer-events-none absolute right-[-48px] top-16 hidden h-14 w-24 text-violet-300 md:block"
+            aria-hidden="true"
+          >
+            <svg viewBox="0 0 110 54" class="h-full w-full fill-none">
+              <path d="M8 36C38 10 69 8 97 31" stroke="currentColor" stroke-width="6" stroke-linecap="round" opacity=".58" />
+              <path d="M96 31l-17-3 8 16 9-13z" fill="currentColor" opacity=".68" />
+            </svg>
           </div>
-          <span class="mt-5 inline-flex h-8 w-8 items-center justify-center rounded-full border border-violet-200 bg-white text-sm font-semibold text-violet-600">
+          <div class="mt-4 flex items-start gap-4">
+            <span class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full border-2 border-violet-200 bg-white font-[Cormorant_Garamond] text-2xl font-semibold text-violet-700">
               {{ index + 1 }}
             </span>
-          <h3 class="mt-3 font-[Cormorant_Garamond] text-3xl text-violet-800">{{ step.title }}</h3>
+            <div>
-          <p class="mx-auto mt-2 max-w-xs text-sm leading-7 text-slate-600">{{ step.text }}</p>
+              <h3 class="font-[Cormorant_Garamond] text-3xl font-semibold uppercase tracking-[0.02em] text-violet-800">{{ step.title }}</h3>
+              <p class="mt-2 max-w-xs text-base leading-8 text-slate-600">{{ step.text }}</p>
+            </div>
+          </div>
         </div>
       </div>
     </section>