import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function CtaNewsletter() {
  return (
    <section className="border-t border-border px-6 py-20">
      <div className="mx-auto grid max-w-4xl items-center gap-10 md:grid-cols-2">
        <div>
          <h2 className="text-2xl font-semibold tracking-tight">
            One email a month, written by the people who shipped it
          </h2>
          <p className="mt-3 text-sm leading-relaxed text-muted">
            What changed, what broke, and what we learned from it. No launches
            you already read about somewhere else.
          </p>
        </div>

        <form className="w-full">
          <Label htmlFor="newsletter-email" className="sr-only">
            Email address
          </Label>
          <div className="flex flex-col gap-3 sm:flex-row">
            <Input
              id="newsletter-email"
              type="email"
              autoComplete="email"
              placeholder="you@company.com"
              required
            />
            <Button type="submit" className="shrink-0">
              Subscribe
            </Button>
          </div>
          <p className="mt-3 text-xs text-muted">
            Unsubscribe in one click. We never pass the address on.
          </p>
        </form>
      </div>
    </section>
  )
}
Call to action

Tinted band

Your database already has an API. Go and take it.

Newsletter capture

One email a month, written by the people who shipped it
