Section

---
import { Button } from "@/components/ui/button"
import { Section, SectionContainer } from "@/components/ui/section"
---

<Section>
  <SectionContainer class="gap-6">
    <div class="flex max-w-2xl flex-col gap-3">
      <p class="text-primary text-sm font-medium">Launch checklist</p>
      <h2 class="text-3xl font-semibold tracking-tight">
        Plan the next release
      </h2>
      <p class="text-muted-foreground leading-7">
        Keep copy, actions, and supporting details aligned in one predictable
        section.
      </p>
    </div>
    <div class="border-border grid gap-3 border-t pt-6 sm:grid-cols-3">
      <p class="text-sm"><span class="font-medium">01</span> Scope</p>
      <p class="text-sm"><span class="font-medium">02</span> Review</p>
      <p class="text-sm"><span class="font-medium">03</span> Ship</p>
    </div>
    <div class="flex flex-wrap gap-3">
      <Button>Review plan</Button>
      <Button variant="outline">Open docs</Button>
    </div>
  </SectionContainer>
</Section>

---
import { Section, SectionContainer } from "@/components/ui/section"
---

<Section variant="floating">
  <SectionContainer class="gap-6">
    <div class="flex max-w-2xl flex-col gap-3">
      <p class="text-primary text-sm font-medium">Customer story</p>
      <h2 class="text-3xl font-semibold tracking-tight">
        A quieter layout for long-form copy
      </h2>
      <p class="text-muted-foreground leading-7">
        Floating sections frame a focused slice of content without changing the
        page width contract.
      </p>
    </div>
    <blockquote
      class="border-primary/40 text-muted-foreground border-l-2 pl-4 text-sm leading-6"
    >
      "The section feels separate from the surrounding page, while still using
      the same layout rhythm."
    </blockquote>
  </SectionContainer>
</Section>