import { ArrowRightIcon } from "lucide-react"
import { Announcement } from "@/components/ui/announcement"import { Button } from "@/components/ui/button"import { Section, SectionHeader } from "@/components/ui/section"
export default function SectionPage() {  return (    <div className="w-full overflow-hidden rounded-xl border bg-background">      <Section size="lg">        <div className="flex flex-col items-center gap-6">          <Announcement badge="New" href="#">            Relay Analyst answers questions about your receivables          </Announcement>          <SectionHeader            as="h1"            size="lg"            align="center"            title="Get paid on time without chasing anyone"            lead="Relay sends invoices, reminds customers before they are late and reconciles every payment with your ledger."            actions={              <>                <Button size="lg">Start free trial</Button>                <Button size="lg" variant="ghost">                  Book a demo                  <ArrowRightIcon data-icon="inline-end" />                </Button>              </>            }          />        </div>      </Section>      <Section tone="muted" divider>        <SectionHeader eyebrow="Collections" title="Reminders that sound like you" lead="Set the tone once. Relay writes each reminder from the invoice, the customer's history and your notes." />        <dl className="grid divide-y rounded-xl border bg-card sm:grid-cols-3 sm:divide-x sm:divide-y-0">          {[            ["Paid on time", "87%"],            ["Days to pay", "21"],            ["Hours saved a month", "34"],          ].map(([label, value]) => (            <div key={label} className="flex flex-col gap-1 p-6">              <dt className="text-sm text-muted-foreground">{label}</dt>              <dd className="text-3xl font-semibold tracking-tight tabular-nums">{value}</dd>            </div>          ))}        </dl>      </Section>    </div>  )}