SaaS starter

import { Link } from "../router";

export function Landing() {
  return (
    <section className="py-12 text-center sm:py-20">
      <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">Your product, one sentence.</h1>
      <p className="mx-auto mt-4 max-w-xl text-lg text-slate-600">Describe the outcome you deliver. Ask Codexa to rewrite this hero for your audience.</p>
      <div className="mt-8 flex justify-center gap-3">
        <Link to="/signup" className="rounded-lg bg-blue-600 px-5 py-3 text-sm font-medium text-white hover:bg-blue-700">
          Create account
        </Link>
        <Link to="/pricing" className="rounded-lg border border-slate-300 px-5 py-3 text-sm font-medium hover:bg-white">
          See pricing
        </Link>
      </div>
      <div className="mt-16 grid gap-6 text-left sm:grid-cols-3">
        {[
          ["Workspaces", "Invite teammates and manage roles."],
          ["Usage limits", "Metered plans enforced server-side."],
          ["Audit log", "Every change recorded."],
        ].map(([title, body]) => (
          <div key={title} className="rounded-xl border border-slate-200 bg-white p-6">
            <h2 className="font-medium">{title}</h2>
            <p className="mt-2 text-sm text-slate-600">{body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}