<div class="w-full space-y-6">
  <div class="w-full p-8 md:p-12 rounded-xl bg-primary text-primary-foreground shadow-lg flex flex-col justify-center min-h-[300px]">
    <h2 class="text-3xl md:text-5xl font-bold max-w-2xl">Stacked Block Layout</h2>
    <p class="text-lg opacity-90 mt-4 max-w-xl">Ideal for marketing pages, articles, and sequential content where each section takes full width.</p>
  </div>
  <div class="w-full p-8 md:p-12 rounded-xl border border-border bg-card shadow-sm">
    <h3 class="text-2xl font-semibold mb-4">Content Block</h3>
    <div class="space-y-4 text-muted-foreground">
      <div class="h-4 bg-muted rounded w-full"></div>
      <div class="h-4 bg-muted rounded w-5/6"></div>
      <div class="h-4 bg-muted rounded w-4/6"></div>
    </div>
  </div>
  <div class="w-full p-8 md:p-12 rounded-xl border border-border bg-card shadow-sm flex items-center gap-6">
    <div class="h-24 w-24 rounded-full bg-muted shrink-0"></div>
    <div>
      <h3 class="text-xl font-semibold">Media Block</h3>
      <p class="text-muted-foreground mt-1 text-sm">Blocks can contain alternating media and text content easily.</p>
    </div>
  </div>
</div>