CtaStage

npx shadcn@latest add "https://designpass.dev/r/CtaStage-TS-TW.json"

/*!
 * CtaStage, a DesignPass.dev block by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/blocks/cta-stage
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import type { ComponentProps, ReactNode } from "react";
import SoftPatterns, {
  type SoftPatternsPresetId,
} from "@/components/backgrounds/SoftPatterns";
import SlideText from "@/components/text/SlideText";
import JellyButton from "@/components/controls/JellyButton";

type SoftField = Pick<
  ComponentProps<typeof SoftPatterns>,
  | "pattern"
  | "backgroundColor"
  | "color"
  | "spacing"
  | "weight"
  | "patternOpacity"
  | "washOpacity"
  | "washSpread"
  | "washPosition"
>;

export type CtaStageProps = {
  headline?: string;
  subcopy?: string;
  ctaLabel?: string;
  onCtaClick?: () => void;
  /**
   * Atmosphere layer. Pass any DesignPass background. When set, `field` /
   * `preset` are ignored.
   */
  atmosphere?: ReactNode;
  preset?: SoftPatternsPresetId;
  field?: SoftField;
  className?: string;
};

const BLOCK_RAIL =
  "relative z-10 mx-auto flex w-full min-w-0 max-w-5xl px-4 sm:px-6 lg:px-8";

/**
 * Closing CTA stage: SlideText headline over a pluggable atmosphere wash
 * and a JellyButton. SoftPatterns is the default wash. Centered stack with
 * room to breathe; the headline drifts up when the section scrolls in.
 */
export default function CtaStage({
  headline = "Ready for a quieter ops inbox?",
  subcopy = "Start an Atlas sandbox in minutes. No card required until Studio.",
  ctaLabel = "Start free",
  onCtaClick,
  atmosphere,
  preset = "claude",
  field,
  className = "",
}: CtaStageProps) {
  const wash =
    atmosphere ??
    (field ? <SoftPatterns {...field} /> : <SoftPatterns preset={preset} />);

  return (
    <section
      className={`relative isolate flex min-h-[min(32rem,70svh)] overflow-hidden sm:min-h-[min(36rem,65svh)] ${className}`}
    >
      <div className="absolute inset-0">{wash}</div>
      <div className="pointer-events-none absolute inset-0 bg-black/35" />

      <div
        className={`${BLOCK_RAIL} flex flex-1 flex-col items-center justify-center gap-6 py-20 text-center sm:gap-7 sm:py-24 lg:py-28`}
      >
        <div className="min-w-0 max-w-3xl">
          <SlideText
            text={headline}
            splitBy="words"
            direction="bottom"
            distance={18}
            stagger={48}
            duration={650}
            tilt={0}
            className="text-balance text-3xl font-bold tracking-tight text-white sm:text-4xl md:text-5xl"
          />
          {subcopy ? (
            <p className="mx-auto mt-4 max-w-xl text-pretty text-base leading-relaxed text-white/70 sm:mt-5 sm:text-lg">
              {subcopy}
            </p>
          ) : null}
        </div>
        <div className="w-full max-w-xs shrink-0 sm:w-auto sm:max-w-none">
          <JellyButton
            type="button"
            className="w-full sm:w-auto"
            onClick={onCtaClick}
          >
            {ctaLabel}
          </JellyButton>
        </div>
      </div>
    </section>
  );
}