Portfolio Interactive List

<section class="ws-portfolio-list bg-[var(--ws-color-surface)] py-16">
  <div class="mx-auto max-w-5xl px-6">
    <h2 class="mb-12 text-sm font-semibold uppercase tracking-wider text-slate-400">Selected Work</h2>

    <div class="divide-y divide-slate-200 border-y border-slate-200">
      <!-- Project row -->
      <a href="#" class="group relative flex items-center justify-between py-8 transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50">
        <div class="flex items-center gap-6">
          <span class="text-sm font-mono text-slate-300">01</span>
          <h3 class="text-2xl font-bold text-slate-900 transition-colors group-hover:text-blue-600 dark:group-hover:text-blue-400 lg:text-3xl">Brand Evolution</h3>
        </div>
        <div class="flex items-center gap-6">
          <span class="hidden text-sm text-slate-400 sm:block">/ Branding</span>
          <!-- Hover image -->
          <div class="pointer-events-none absolute right-24 top-1/2 z-10 h-40 w-56 -translate-y-1/2 overflow-hidden rounded-xl opacity-0 shadow-2xl transition-all duration-500 group-hover:opacity-100 group-hover:translate-x-0 translate-x-4">
            <div class="h-full w-full bg-gradient-to-br from-blue-200 to-indigo-300 dark:from-blue-800 dark:to-indigo-700"></div>
          </div>
          <svg class="h-5 w-5 text-slate-300 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </div>
      </a>

      <a href="#" class="group relative flex items-center justify-between py-8 transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50">
        <div class="flex items-center gap-6">
          <span class="text-sm font-mono text-slate-300">02</span>
          <h3 class="text-2xl font-bold text-slate-900 transition-colors group-hover:text-emerald-600 dark:group-hover:text-emerald-400 lg:text-3xl">Digital Platform</h3>
        </div>
        <div class="flex items-center gap-6">
          <span class="hidden text-sm text-slate-400 sm:block">/ Development</span>
          <div class="pointer-events-none absolute right-24 top-1/2 z-10 h-40 w-56 -translate-y-1/2 overflow-hidden rounded-xl opacity-0 shadow-2xl transition-all duration-500 group-hover:opacity-100 group-hover:translate-x-0 translate-x-4">
            <div class="h-full w-full bg-gradient-to-br from-emerald-200 to-teal-300 dark:from-emerald-800 dark:to-teal-700"></div>
          </div>
          <svg class="h-5 w-5 text-slate-300 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </div>
      </a>

      <a href="#" class="group relative flex items-center justify-between py-8 transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50">
        <div class="flex items-center gap-6">
          <span class="text-sm font-mono text-slate-300">03</span>
          <h3 class="text-2xl font-bold text-slate-900 transition-colors group-hover:text-amber-600 dark:group-hover:text-amber-400 lg:text-3xl">Mobile Experience</h3>
        </div>
        <div class="flex items-center gap-6">
          <span class="hidden text-sm text-slate-400 sm:block">/ App Design</span>
          <div class="pointer-events-none absolute right-24 top-1/2 z-10 h-40 w-56 -translate-y-1/2 overflow-hidden rounded-xl opacity-0 shadow-2xl transition-all duration-500 group-hover:opacity-100 group-hover:translate-x-0 translate-x-4">
            <div class="h-full w-full bg-gradient-to-br from-amber-200 to-orange-300 dark:from-amber-800 dark:to-orange-700"></div>
          </div>
          <svg class="h-5 w-5 text-slate-300 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </div>
      </a>

      <a href="#" class="group relative flex items-center justify-between py-8 transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50">
        <div class="flex items-center gap-6">
          <span class="text-sm font-mono text-slate-300">04</span>
          <h3 class="text-2xl font-bold text-slate-900 transition-colors group-hover:text-purple-600 dark:group-hover:text-purple-400 lg:text-3xl">Visual Identity</h3>
        </div>
        <div class="flex items-center gap-6">
          <span class="hidden text-sm text-slate-400 sm:block">/ Identity</span>
          <div class="pointer-events-none absolute right-24 top-1/2 z-10 h-40 w-56 -translate-y-1/2 overflow-hidden rounded-xl opacity-0 shadow-2xl transition-all duration-500 group-hover:opacity-100 group-hover:translate-x-0 translate-x-4">
            <div class="h-full w-full bg-gradient-to-br from-purple-200 to-fuchsia-300 dark:from-purple-800 dark:to-fuchsia-700"></div>
          </div>
          <svg class="h-5 w-5 text-slate-300 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </div>
      </a>
    </div>
  </div>
</section>