Features Comparison

<section class="ws-features bg-[var(--ws-features-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-features-icon-color)]">Why switch</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">Before and after</h2>
      <p class="mt-4 text-pretty text-base text-[var(--ws-features-text-soft)]">See the difference our platform makes for your team.</p>
    </div>
    <div class="mt-14 grid gap-8 lg:grid-cols-2">
      <div class="rounded-2xl border border-red-200 bg-red-50/50 p-8">
        <h3 class="text-lg font-semibold text-red-900">Without Us</h3>
        <ul class="mt-6 space-y-4">
          <li class="flex items-start gap-3">
            <svg class="mt-0.5 h-5 w-5 shrink-0 text-red-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            <div>
              <p class="text-sm font-medium text-red-900">Hours wasted on boilerplate</p>
              <p class="mt-1 text-sm text-red-700/80">Every new page starts from scratch, duplicating work across teams.</p>
            </div>
          </li>
          <li class="flex items-start gap-3">
            <svg class="mt-0.5 h-5 w-5 shrink-0 text-red-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            <div>
              <p class="text-sm font-medium text-red-900">Inconsistent UI patterns</p>
              <p class="mt-1 text-sm text-red-700/80">No shared source of truth means every developer interprets designs differently.</p>
            </div>
          </li>
          <li class="flex items-start gap-3">
            <svg class="mt-0.5 h-5 w-5 shrink-0 text-red-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            <div>
              <p class="text-sm font-medium text-red-900">Slow shipping velocity</p>
              <p class="mt-1 text-sm text-red-700/80">Building custom sections for each project eats into feature development time.</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="rounded-2xl border border-emerald-200 bg-emerald-50/50 p-8">
        <h3 class="text-lg font-semibold text-emerald-900">With Us</h3>
        <ul class="mt-6 space-y-4">
          <li class="flex items-start gap-3">
            <svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
            <div>
              <p class="text-sm font-medium text-emerald-900">Copy-paste ready patterns</p>
              <p class="mt-1 text-sm text-emerald-700/80">Production-quality sections in seconds. Just copy, paste, and customize.</p>
            </div>
          </li>
          <li class="flex items-start gap-3">
            <svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
            <div>
              <p class="text-sm font-medium text-emerald-900">Consistent design language</p>
              <p class="mt-1 text-sm text-emerald-700/80">Shared family model ensures every variant aligns with your brand tokens.</p>
            </div>
          </li>
          <li class="flex items-start gap-3">
            <svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
            <div>
              <p class="text-sm font-medium text-emerald-900">Ship 3x faster</p>
              <p class="mt-1 text-sm text-emerald-700/80">Pre-built, accessible, responsive sections let your team focus on features, not layout.</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>