Calls to action

"use client";

import { Mail } from "lucide-react";
import * as React from "react";

import { Button, Input } from "@waveinno/ui";

export default function CtaNewsletter() {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  return (
    <section className="mx-auto max-w-6xl px-4 py-16 sm:px-6">
      <div className="grid items-center gap-8 rounded-[24px] border border-border bg-surface p-8 sm:p-10 lg:grid-cols-2">
        <div>
          <h2 className="disp text-[26px] font-bold tracking-[-0.02em] text-text leading-[1.15]">Parking, once a month</h2>
          <p className="mt-2 text-[15px] text-muted">What we shipped, what owners are doing well, nothing else. 4,000 readers.</p>
        </div>
        <form
          onSubmit={(e) => {
            e.preventDefault();
            if (/\S+@\S+\.\S+/.test(email)) setSent(true);
          }}
          className="flex flex-col gap-2 sm:flex-row"
        >
          {sent ? (
            <p className="flex h-11 flex-1 items-center gap-2 rounded-ctl bg-success-subtle px-4 text-[14px] font-medium text-success">Check your inbox to confirm.</p>
          ) : (
            <>
              <Input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@company.com" leading={<Mail />} className="h-11" aria-label="Email" />
              <Button type="submit" variant="primary" className="h-11 shrink-0 px-6">
                Subscribe
              </Button>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

import { ArrowRight } from "lucide-react";

import { Button } from "@waveinno/ui";

export default function CtaSimple() {
  return (
    <section className="px-4 py-20 sm:px-6">
      <div className="mx-auto max-w-2xl text-center">
        <h2 className="disp text-[32px] font-bold leading-[1.12] tracking-[-0.03em] text-text sm:text-[40px]">Ready when your gates are</h2>
        <p className="mx-auto mt-4 max-w-lg text-[16px] leading-[1.65] text-body">Set up your first site this afternoon. Free for one site, for as long as you like.</p>
        <div className="mt-8 flex flex-wrap justify-center gap-3">
          <Button variant="primary" size="lg">
            Start free <ArrowRight />
          </Button>
          <Button variant="ghost" size="lg">
            Talk to sales
          </Button>
        </div>
      </div>
    </section>
  );
}