Code Preview Split

<div class="ws-code-preview grid gap-6 md:grid-cols-2 md:items-start">
  <!-- Left: Description -->
  <div class="space-y-4">
    <div class="flex items-center gap-3">
      <span class="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 text-sm font-bold text-white" aria-hidden="true">1</span>
      <h3 class="text-xl font-semibold text-slate-900">Install Dependencies</h3>
    </div>
    <p class="text-slate-600">Set up your project with the required packages. The CLI will scaffold everything you need to get started.</p>
    <ul class="space-y-2 text-sm text-slate-600" role="list">
      <li class="flex items-start gap-2">
        <svg class="mt-0.5 h-4 w-4 shrink-0 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
        </svg>
        <span>Automatic project scaffolding</span>
      </li>
      <li class="flex items-start gap-2">
        <svg class="mt-0.5 h-4 w-4 shrink-0 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
        </svg>
        <span>TypeScript and Tailwind pre-configured</span>
      </li>
      <li class="flex items-start gap-2">
        <svg class="mt-0.5 h-4 w-4 shrink-0 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
        </svg>
        <span>Dev server with hot reload</span>
      </li>
    </ul>
  </div>
  <!-- Right: Terminal code block -->
  <div class="overflow-hidden rounded-lg border border-[var(--ws-code-preview-border)] bg-[var(--ws-code-preview-bg)] shadow-lg">
    <div class="flex items-center gap-2 border-b border-[var(--ws-code-preview-border)] bg-[var(--ws-code-preview-header-bg)] px-4 py-3">
      <span class="h-3 w-3 rounded-full bg-red-500" aria-hidden="true"></span>
      <span class="h-3 w-3 rounded-full bg-yellow-500" aria-hidden="true"></span>
      <span class="h-3 w-3 rounded-full bg-green-500" aria-hidden="true"></span>
      <span class="ml-3 text-sm font-medium text-[var(--ws-code-preview-text)]">Terminal</span>
    </div>
    <pre class="overflow-x-auto p-4 font-mono text-sm leading-relaxed text-[var(--ws-code-preview-text)]"><code><span class="text-green-400">$</span> npm create astro@latest my-project
<span class="text-green-400">$</span> cd my-project
<span class="text-green-400">$</span> npm install
<span class="text-green-400">$</span> npm run dev</code></pre>
  </div>
</div>