Product landing page

export default function App() {
  return (
    <div className="min-h-screen bg-white text-slate-900">
      <header className="mx-auto flex max-w-5xl items-center justify-between px-6 py-5">
        <span className="font-semibold">Launchpad</span>
        <a href="#pricing" className="rounded-lg bg-slate-900 px-4 py-2 text-sm font-medium text-white">Get started</a>
      </header>
      <section className="mx-auto max-w-3xl px-6 pt-16 pb-20 text-center">
        <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">Ship your product faster</h1>
        <p className="mt-4 text-lg text-slate-600">Replace this copy with your value proposition. Ask Codexa to adjust tone, sections, and layout.</p>
        <div className="mt-8 flex justify-center gap-3">
          <a href="#pricing" className="rounded-lg bg-blue-600 px-5 py-3 text-sm font-medium text-white">Start free</a>
          <a href="#features" className="rounded-lg border border-slate-300 px-5 py-3 text-sm font-medium">Learn more</a>
        </div>
      </section>
      <section id="features" className="mx-auto grid max-w-5xl gap-6 px-6 pb-20 sm:grid-cols-3">
        {["Fast setup", "Secure by default", "Scales with you"].map((f) => (
          <div key={f} className="rounded-xl border border-slate-200 p-6">
            <h3 className="font-medium">{f}</h3>
            <p className="mt-2 text-sm text-slate-600">Short description of this feature and why it matters.</p>
          </div>
        ))}
      </section>
      <section id="pricing" className="bg-slate-50 py-20">
        <div className="mx-auto grid max-w-5xl gap-6 px-6 sm:grid-cols-3">
          {[["Free", "₹0"], ["Pro", "₹999/mo"], ["Team", "₹2,999/mo"]].map(([name, price]) => (
            <div key={name} className="rounded-xl border border-slate-200 bg-white p-6">
              <h3 className="font-medium">{name}</h3>
              <p className="mt-2 text-2xl font-semibold">{price}</p>
              <a href="#" className="mt-6 block rounded-lg bg-slate-900 px-4 py-2 text-center text-sm text-white">Choose {name}</a>
            </div>
          ))}
        </div>
      </section>
      <footer className="mx-auto max-w-5xl px-6 py-10 text-sm text-slate-500">© {new Date().getFullYear()} Launchpad</footer>
    </div>
  );
}