Layouts

<div className="w-full max-w-5xl mx-auto px-6 py-8 space-y-6">
  {/* Header */}
  <div>
    <h1 className="text-xl font-semibold">Page Title</h1>
    <p className="text-sm text-muted-foreground">Description</p>
  </div>

  {/* Content */}
  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
    {cards}
  </div>
</div>

<section className="py-20 px-4">
  <div className="max-w-6xl mx-auto">
    <div className="text-center mb-12">
      <Badge>Label</Badge>
      <h2 className="text-2xl md:text-4xl font-bold mt-4">
        Section Title
      </h2>
      <p className="text-muted-foreground max-w-md mx-auto mt-4">
        Description text
      </p>
    </div>
    {/* Content */}
  </div>
</section>