Code Comparison

<section class="ws-comparison bg-[var(--ws-comparison-bg)] py-16">
  <div class="mx-auto max-w-4xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <h2 class="text-2xl font-bold tracking-tight text-[var(--ws-comparison-text)] sm:text-3xl">Code Comparison</h2>
      <p class="mt-3 text-base text-[var(--ws-comparison-text-soft)]">See the difference at a glance.</p>
    </div>

    <div class="mt-10 grid gap-6 sm:grid-cols-2">
      <div class="overflow-hidden rounded-xl border border-red-200">
        <div class="flex items-center gap-2 border-b border-red-200 bg-red-50 px-4 py-2.5">
          <svg class="h-4 w-4 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>
          <span class="text-sm font-semibold text-red-700">Before</span>
        </div>
        <pre class="overflow-x-auto bg-[var(--ws-code-preview-bg)] p-4 font-mono text-sm leading-relaxed text-slate-300"><code><span class="text-slate-500">// Nested callbacks</span>
getUser(id, <span class="text-amber-300">function</span>(user) {
  getPosts(user, <span class="text-amber-300">function</span>(posts) {
    getComments(posts, <span class="text-amber-300">function</span>(comments) {
      render(comments);
    });
  });
});</code></pre>
      </div>

      <div class="overflow-hidden rounded-xl border border-emerald-200">
        <div class="flex items-center gap-2 border-b border-emerald-200 bg-emerald-50 px-4 py-2.5">
          <svg class="h-4 w-4 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>
          <span class="text-sm font-semibold text-emerald-700">After</span>
        </div>
        <pre class="overflow-x-auto bg-[var(--ws-code-preview-bg)] p-4 font-mono text-sm leading-relaxed text-slate-300"><code><span class="text-slate-500">// Async/await</span>
<span class="text-amber-300">const</span> user = <span class="text-purple-400">await</span> getUser(id);
<span class="text-amber-300">const</span> posts = <span class="text-purple-400">await</span> getPosts(user);
<span class="text-amber-300">const</span> comments = <span class="text-purple-400">await</span> getComments(posts);
render(comments);</code></pre>
      </div>
    </div>
  </div>
</section>