Portfolio Base

<section class="ws-portfolio bg-[var(--ws-portfolio-bg)] px-6 py-20">
  <div class="mx-auto max-w-7xl">
    <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-portfolio-text)] sm:text-4xl">Our Work</h2>
    <p class="mt-4 max-w-2xl text-base text-[var(--ws-portfolio-text-soft)]">A selection of recent projects showcasing our design and engineering capabilities.</p>

    <div class="mt-12 grid gap-8 sm:grid-cols-2">
      <!-- Project 1 -->
      <div class="group overflow-hidden rounded-2xl border border-[var(--ws-portfolio-border)]">
        <div class="flex aspect-[16/10] items-center justify-center bg-gradient-to-br from-violet-200 to-indigo-300 dark:from-violet-800 dark:to-indigo-700" role="img" aria-label="Project Horizon">
          <svg class="h-10 w-10 text-white/60" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
        </div>
        <div class="p-5">
          <span class="inline-flex rounded-full bg-[var(--ws-portfolio-accent)]/10 px-2.5 py-0.5 text-xs font-medium text-[var(--ws-portfolio-accent)]">Web App</span>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-portfolio-text)]">Project Horizon</h3>
          <a href="#" class="mt-2 inline-flex text-sm font-medium text-[var(--ws-portfolio-accent)] transition hover:opacity-80">View Project &rarr;</a>
        </div>
      </div>

      <!-- Project 2 -->
      <div class="group overflow-hidden rounded-2xl border border-[var(--ws-portfolio-border)]">
        <div class="flex aspect-[16/10] items-center justify-center bg-gradient-to-br from-emerald-200 to-teal-300 dark:from-emerald-800 dark:to-teal-700" role="img" aria-label="Project Canopy">
          <svg class="h-10 w-10 text-white/60" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
        </div>
        <div class="p-5">
          <span class="inline-flex rounded-full bg-[var(--ws-portfolio-accent)]/10 px-2.5 py-0.5 text-xs font-medium text-[var(--ws-portfolio-accent)]">Mobile</span>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-portfolio-text)]">Project Canopy</h3>
          <a href="#" class="mt-2 inline-flex text-sm font-medium text-[var(--ws-portfolio-accent)] transition hover:opacity-80">View Project &rarr;</a>
        </div>
      </div>

      <!-- Project 3 -->
      <div class="group overflow-hidden rounded-2xl border border-[var(--ws-portfolio-border)]">
        <div class="flex aspect-[16/10] items-center justify-center bg-gradient-to-br from-amber-200 to-orange-300 dark:from-amber-800 dark:to-orange-700" role="img" aria-label="Project Ember">
          <svg class="h-10 w-10 text-white/60" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
        </div>
        <div class="p-5">
          <span class="inline-flex rounded-full bg-[var(--ws-portfolio-accent)]/10 px-2.5 py-0.5 text-xs font-medium text-[var(--ws-portfolio-accent)]">Branding</span>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-portfolio-text)]">Project Ember</h3>
          <a href="#" class="mt-2 inline-flex text-sm font-medium text-[var(--ws-portfolio-accent)] transition hover:opacity-80">View Project &rarr;</a>
        </div>
      </div>

      <!-- Project 4 -->
      <div class="group overflow-hidden rounded-2xl border border-[var(--ws-portfolio-border)]">
        <div class="flex aspect-[16/10] items-center justify-center bg-gradient-to-br from-rose-200 to-pink-300 dark:from-rose-800 dark:to-pink-700" role="img" aria-label="Project Bloom">
          <svg class="h-10 w-10 text-white/60" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
        </div>
        <div class="p-5">
          <span class="inline-flex rounded-full bg-[var(--ws-portfolio-accent)]/10 px-2.5 py-0.5 text-xs font-medium text-[var(--ws-portfolio-accent)]">Web App</span>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-portfolio-text)]">Project Bloom</h3>
          <a href="#" class="mt-2 inline-flex text-sm font-medium text-[var(--ws-portfolio-accent)] transition hover:opacity-80">View Project &rarr;</a>
        </div>
      </div>
    </div>
  </div>
</section>