Faq 15

"use client"

type FaqComparison = {
  label: string
  starter: string
  pro: string
}

const rows: FaqComparison[] = [
  {
    label: "Projects",
    starter: "Up to 3",
    pro: "Unlimited",
  },
  {
    label: "Custom domain",
    starter: "Add-on",
    pro: "Included",
  },
  {
    label: "Editors",
    starter: "2 included",
    pro: "10 included",
  },
  {
    label: "Preview links",
    starter: "Yes",
    pro: "Yes + password",
  },
  {
    label: "Export",
    starter: "HTML only",
    pro: "HTML + JSON",
  },
]

export function Faq() {
  return (
    <section
      aria-label="FAQ"
      className="mx-auto flex w-full max-w-2xl flex-col gap-8 text-foreground motion-reduce:**:animate-none motion-reduce:**:transition-none"
    >
      <header className="flex flex-col gap-3">
        <div className="flex flex-col gap-2">
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl md:text-5xl">
            Starter or Pro?
          </h1>
          <p className="text-muted-foreground">
            Five things people compare before they upgrade.
          </p>
        </div>
      </header>

      <div className="overflow-hidden rounded-2xl bg-card shadow-elevated-sm">
        <table className="w-full table-fixed text-left text-sm">
          <caption className="sr-only">Starter and Pro plan comparison</caption>
          <thead className="border-b text-xs font-medium tracking-wide text-muted-foreground uppercase">
            <tr>
              <th scope="col" className="p-3 font-medium sm:p-4">
                Topic
              </th>
              <th scope="col" className="p-3 text-center font-medium sm:p-4">
                Starter
              </th>
              <th scope="col" className="p-3 text-center font-medium sm:p-4">
                Pro
              </th>
            </tr>
          </thead>
          <tbody>
            {rows.map((row) => (
              <tr key={row.label} className="border-b last:border-b-0">
                <th scope="row" className="p-3 font-medium sm:p-4">
                  {row.label}
                </th>
                <td className="p-3 text-center text-muted-foreground sm:p-4">
                  {row.starter}
                </td>
                <td className="p-3 text-center sm:p-4">{row.pro}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  )
}