Dark Email Signup CTA

"use client"

import { Heading } from "@/components/editorial/heading"
import {
  Section,
  SectionBackground,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Start your first project with us",
  body: "Share your email and we’ll prepare a workspace by this evening. Invite colleagues when the timing suits you.",
  placeholder: "Your work email",
  cta: "Get started",
} as const

export default function Cta03() {
  return (
    <Section className="dark overflow-hidden pt-37.5 pb-30 md:pt-40 md:pb-32 lg:pt-60.5 lg:pb-36 xl:pt-56 xl:pb-39">
      <SectionHeader align="center" size="lg">
        <SectionTitleGroup>
          <Heading
            size="lg"
            className="[--font-display:var(--font-instrument)]"
          >
            {COPY.title}
          </Heading>
        </SectionTitleGroup>
        <SectionDescription className="max-w-xl sm:text-lg/8">
          {COPY.body}
        </SectionDescription>
      </SectionHeader>
      <SectionContent>
        {/* The form is the block, so it sits in the content, not the header. */}
        <form
          onSubmit={(e) => e.preventDefault()}
          className="w-full max-w-lg self-center"
        >
          {/* Glass pill: a faint wash, a 1px shine along the top, a lit edge */}
          <InputGroup className="h-14 bg-[linear-gradient(to_right,transparent,color-mix(in_oklab,var(--foreground)_20%,transparent),transparent),linear-gradient(135deg,color-mix(in_oklab,var(--foreground)_8%,transparent),color-mix(in_oklab,var(--foreground)_2%,transparent))] bg-size-[calc(100%-32px)_1px,100%_100%] bg-position-[center_top,center] bg-no-repeat pl-3 shadow-[inset_0_0_0_1px_color-mix(in_oklab,var(--foreground)_8%,transparent),inset_0_1px_0_color-mix(in_oklab,var(--foreground)_10%,transparent)]">
            <InputGroupInput
              type="email"
              name="email"
              autoComplete="email"
              aria-label="Email address"
              className="md:text-base"
              placeholder={COPY.placeholder}
              required
            />
            <InputGroupAddon align="inline-end" className="pr-1.5">
              <InputGroupButton
                type="submit"
                variant="default"
                className="h-11 rounded-full px-5 text-base"
              >
                {COPY.cta}
              </InputGroupButton>
            </InputGroupAddon>
          </InputGroup>
        </form>
      </SectionContent>
      {/* Warm floor: grain fading out as it climbs, over a rising warm dark */}
      <SectionBackground className="top-auto h-122.5 md:h-157.25 lg:h-160.25 xl:h-172.25">
        <span className="absolute inset-0 block grain mask-[linear-gradient(0deg,oklch(0_0_0),transparent)] opacity-30" />
        <span className="absolute inset-0 block bg-linear-to-b from-transparent to-[oklch(0.288_0.009_67)]" />
      </SectionBackground>
    </Section>
  )
}

pnpm dlx shadcn add @01orbital/cta-03

npx shadcn add @01orbital/cta-03

yarn shadcn add @01orbital/cta-03

bunx --bun shadcn add @01orbital/cta-03