Hero Split Hover Expand

<section class="ws-hero ws-hero-split-expand overflow-hidden" style="--hero-text: var(--ws-color-text);">
  <div class="flex min-h-[60vh] flex-col lg:flex-row">

    <!-- Left panel -->
    <div
      class="group/left relative flex flex-1 cursor-pointer flex-col items-center justify-center overflow-hidden p-12 text-center transition-all duration-500 ease-in-out
             lg:flex-[1] lg:hover:flex-[1.6] lg:[&:has(~*:hover)]:flex-[0.4]"
    >
      <div class="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 transition-transform duration-500 group-hover/left:scale-105"></div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
      <div class="relative z-10 flex flex-col items-center gap-5">
        <span class="text-xs font-semibold uppercase tracking-[0.25em] text-white/60">For Creators</span>
        <h2 class="text-balance text-3xl font-bold text-white lg:text-4xl xl:text-5xl">Build your portfolio.</h2>
        <p class="max-w-sm text-sm text-white/70 opacity-0 transition-opacity duration-300 group-hover/left:opacity-100">
          Showcase your work with beautiful templates designed for creatives.
        </p>
        <a href="#" class="inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 text-sm font-semibold text-slate-900 transition hover:bg-slate-100"> <!-- ws-ok -->
          Get started
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </a>
      </div>
    </div>

    <!-- Right panel -->
    <div
      class="group/right relative flex flex-1 cursor-pointer flex-col items-center justify-center overflow-hidden p-12 text-center transition-all duration-500 ease-in-out
             lg:flex-[1] lg:hover:flex-[1.6] lg:[&:has(~*:hover)]:flex-[0.4]"
    >
      <div class="absolute inset-0 bg-gradient-to-bl from-violet-900 via-purple-800 to-indigo-900 transition-transform duration-500 group-hover/right:scale-105"></div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
      <div class="relative z-10 flex flex-col items-center gap-5">
        <span class="text-xs font-semibold uppercase tracking-[0.25em] text-white/60">For Teams</span>
        <h2 class="text-balance text-3xl font-bold text-white lg:text-4xl xl:text-5xl">Scale your business.</h2>
        <p class="max-w-sm text-sm text-white/70 opacity-0 transition-opacity duration-300 group-hover/right:opacity-100">
          Powerful collaboration tools and analytics that grow with your team.
        </p>
        <a href="#" class="inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 text-sm font-semibold text-slate-900 transition hover:bg-slate-100"> <!-- ws-ok -->
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </a>
      </div>
    </div>

  </div>
</section>