Hero Creative Collage

<section class="ws-hero relative isolate overflow-hidden bg-[var(--ws-hero-bg)] py-24 sm:py-32">
  <!-- Floating creative elements — left side -->
  <div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
    <!-- Top-left: orange/yellow shape cluster -->
    <div class="absolute -left-8 top-8 flex rotate-[-12deg] flex-col gap-2">
      <div class="h-20 w-28 rounded-2xl bg-gradient-to-br from-orange-400 to-yellow-300 shadow-lg shadow-orange-500/30"></div>
      <div class="ml-6 h-14 w-20 rounded-xl bg-gradient-to-br from-yellow-300 to-amber-400 shadow-md shadow-yellow-500/20"></div>
    </div>
    <!-- Bottom-left: teal/cyan shape -->
    <div class="absolute bottom-16 -left-4 rotate-[8deg]">
      <div class="h-24 w-32 rounded-2xl bg-gradient-to-tr from-teal-400 to-cyan-300 shadow-lg shadow-teal-500/30"></div>
    </div>
    <!-- Mid-left: small accent dot cluster -->
    <div class="absolute left-1/4 top-1/4 rotate-[20deg]">
      <div class="h-10 w-10 rounded-full bg-violet-500/60 blur-[1px]"></div>
    </div>
    <!-- Sparkle stars -->
    <svg class="absolute left-16 top-16 h-6 w-6 text-yellow-300/80" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.5 5h5.5l-4.5 3.3 1.7 5.2L12 12.3l-4.2 3.2 1.7-5.2L5 7h5.5z"/></svg>
    <svg class="absolute left-32 bottom-24 h-4 w-4 text-cyan-300/70" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.5 5h5.5l-4.5 3.3 1.7 5.2L12 12.3l-4.2 3.2 1.7-5.2L5 7h5.5z"/></svg>

    <!-- Top-right: pink/purple shape -->
    <div class="absolute -right-6 top-12 rotate-[10deg]">
      <div class="h-28 w-20 rounded-2xl bg-gradient-to-b from-fuchsia-500 to-violet-600 shadow-lg shadow-fuchsia-500/30"></div>
    </div>
    <!-- Mid-right: stylized eye / abstract blob -->
    <div class="absolute right-8 top-36 h-16 w-16 rotate-[-5deg] rounded-full bg-gradient-to-br from-orange-300 to-red-400 shadow-md shadow-orange-500/20"></div>
    <!-- Bottom-right: image-like tile -->
    <div class="absolute bottom-12 -right-4 rotate-[6deg]">
      <div class="h-28 w-36 rounded-2xl bg-gradient-to-tl from-indigo-500 to-blue-400 shadow-lg shadow-indigo-500/30">
        <div class="absolute inset-3 rounded-xl bg-white/10"></div>
      </div>
    </div>
    <!-- Sparkle top-right -->
    <svg class="absolute right-20 top-8 h-5 w-5 text-fuchsia-300/80" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.5 5h5.5l-4.5 3.3 1.7 5.2L12 12.3l-4.2 3.2 1.7-5.2L5 7h5.5z"/></svg>
    <svg class="absolute right-36 bottom-20 h-4 w-4 text-violet-300/60" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.5 5h5.5l-4.5 3.3 1.7 5.2L12 12.3l-4.2 3.2 1.7-5.2L5 7h5.5z"/></svg>
    <!-- Small cross/plus decorations -->
    <svg class="absolute left-1/3 top-6 h-5 w-5 text-white/20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
    <svg class="absolute right-1/4 bottom-8 h-4 w-4 text-white/15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
  </div>

  <!-- Content -->
  <div class="relative mx-auto max-w-2xl px-6 text-center">
    <h1 class="text-balance text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">
      Alles, was Kreative brauchen.
    </h1>
    <p class="mx-auto mt-5 max-w-xl text-pretty text-lg leading-relaxed text-slate-300">
      Setze jede Idee um — mit Produkten für Kreativprojekte jeder Art und jeder Größenordnung.
    </p>
    <div class="mt-9 flex flex-wrap items-center justify-center gap-3">
      <a href="#" class="rounded-full bg-[var(--ws-hero-action-bg)] px-7 py-3 text-sm font-bold text-[var(--ws-hero-action-text)] shadow-lg transition hover:bg-[var(--ws-hero-action-bg-hover)]">
        Alle Abo-Optionen
      </a>
      <a href="#" class="rounded-full border border-white/20 px-7 py-3 text-sm font-semibold text-white transition hover:bg-white/10">
        Weitere Infos
      </a>
    </div>
  </div>
</section>