"use client";

import { Shield, Sparkles, Zap } from "lucide-react";
import { motion, type Variants } from "motion/react";
import * as React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

// ---------------------------------------------------------------------------
// Animation variants
// ---------------------------------------------------------------------------

const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1, delayChildren: 0.15 },
  },
};

const itemVariants: Variants = {
  hidden: { opacity: 0, y: 16, filter: "blur(4px)" },
  visible: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: { type: "spring", stiffness: 300, damping: 24 },
  },
};

const avatarVariants: Variants = {
  hidden: { scale: 0, opacity: 0 },
  visible: {
    scale: 1,
    opacity: 1,
    transition: { type: "spring", stiffness: 500, damping: 15 },
  },
};

const avatarContainerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.06, delayChildren: 0 },
  },
};

const wordContainerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.08, delayChildren: 0.1 },
  },
};

const wordVariants: Variants = {
  hidden: { opacity: 0, y: 20, filter: "blur(8px)" },
  visible: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: { duration: 0.5, ease: [0.25, 0.4, 0.25, 1] },
  },
};

const featureGridVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1, delayChildren: 0.1 },
  },
};

const featureCardVariants: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { type: "spring", stiffness: 260, damping: 24 },
  },
};

// ---------------------------------------------------------------------------
// Animated text helper
// ---------------------------------------------------------------------------

function AnimatedWords({
  children,
  className,
}: {
  children: string;
  className?: string;
}) {
  const words = children.split(" ");
  return (
    <motion.span
      className={cn("inline-flex flex-wrap justify-center", className)}
      variants={wordContainerVariants}
    >
      {words.map((word, index) => (
        <motion.span
          className="mr-[0.25em] inline-block"
          key={index}
          variants={wordVariants}
        >
          {word}
        </motion.span>
      ))}
    </motion.span>
  );
}

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

const ACCENT = "hsl(30 70% 50%)";

export interface WaitlistMinimalFeature {
  title: string;
  description: string;
  icon?: React.ComponentType<{ className?: string }>;
}

export interface WaitlistMinimalRootProps
  extends Omit<React.ComponentPropsWithoutRef<"section">, "title" | "onSubmit"> {
  srTitle?: string;
  title?: string;
  description?: React.ReactNode;
  ctaLabel?: string;
  inputPlaceholder?: string;
  socialProofAvatars?: string[];
  socialProofCount?: number;
  features?: WaitlistMinimalFeature[];
  accentColor?: string;
  onSubmit?: (email: string) => void;
}

// ---------------------------------------------------------------------------
// Context
// ---------------------------------------------------------------------------

interface WaitlistMinimalContextValue {
  srTitle: string;
  title: string;
  description: React.ReactNode;
  ctaLabel: string;
  inputPlaceholder: string;
  socialProofAvatars: string[];
  socialProofCount: number;
  features: WaitlistMinimalFeature[];
  accentColor: string;
  onSubmit?: (email: string) => void;
}

const WaitlistMinimalContext = React.createContext<
  WaitlistMinimalContextValue | undefined
>(undefined);

function useWaitlistMinimalContext() {
  const ctx = React.useContext(WaitlistMinimalContext);
  if (!ctx) {
    throw new Error(
      "WaitlistMinimal components must be used within WaitlistMinimalRoot"
    );
  }
  return ctx;
}

export function useWaitlistMinimal() {
  return useWaitlistMinimalContext();
}

// ---------------------------------------------------------------------------
// Default data
// ---------------------------------------------------------------------------

const defaultFeatures: WaitlistMinimalFeature[] = [
  {
    title: "Early Access",
    description:
      "Be the first to experience new features before anyone else.",
    icon: Sparkles,
  },
  {
    title: "Lightning Fast",
    description: "Built for performance from the ground up. No compromises.",
    icon: Zap,
  },
  {
    title: "Private by Default",
    description:
      "Your data stays yours. End-to-end encrypted, zero tracking.",
    icon: Shield,
  },
];

const defaultAvatars = [
  "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=64&h=64&fit=crop&crop=faces",
  "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=64&h=64&fit=crop&crop=faces",
  "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&fit=crop&crop=faces",
  "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=64&h=64&fit=crop&crop=faces",
  "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=64&h=64&fit=crop&crop=faces",
];

// ---------------------------------------------------------------------------
// Root
// ---------------------------------------------------------------------------

export const WaitlistMinimalRoot = React.forwardRef<
  HTMLElement,
  WaitlistMinimalRootProps
>(
  (
    {
      className,
      children,
      srTitle = "Join the waitlist",
      title = "Something new is coming",
      description = "A faster, more thoughtful way to build. Sign up for early access.",
      ctaLabel = "Join Now",
      inputPlaceholder = "you@email.com",
      socialProofAvatars = defaultAvatars,
      socialProofCount = 2847,
      features = defaultFeatures,
      accentColor = ACCENT,
      onSubmit,
      ...props
    },
    ref
  ) => {
    const contextValue = React.useMemo<WaitlistMinimalContextValue>(
      () => ({
        srTitle,
        title,
        description,
        ctaLabel,
        inputPlaceholder,
        socialProofAvatars,
        socialProofCount,
        features,
        accentColor,
        onSubmit,
      }),
      [
        srTitle,
        title,
        description,
        ctaLabel,
        inputPlaceholder,
        socialProofAvatars,
        socialProofCount,
        features,
        accentColor,
        onSubmit,
      ]
    );

    return (
      <WaitlistMinimalContext.Provider value={contextValue}>
        <section
          className={cn("relative w-full overflow-hidden", className)}
          data-slot="waitlist-minimal-root"
          ref={ref}
          style={{ "--waitlist-accent": accentColor } as React.CSSProperties}
          {...props}
        >
          <h2 className="sr-only">{srTitle}</h2>
          {children}
        </section>
      </WaitlistMinimalContext.Provider>
    );
  }
);
WaitlistMinimalRoot.displayName = "WaitlistMinimalRoot";

// ---------------------------------------------------------------------------
// Background
// ---------------------------------------------------------------------------

export function WaitlistMinimalBackground({
  className,
  ...props
}: React.ComponentPropsWithoutRef<"div">) {
  return (
    <div
      aria-hidden
      className={cn("pointer-events-none absolute inset-0", className)}
      data-slot="waitlist-minimal-background"
      {...props}
    >
      <div
        className="absolute inset-0 opacity-[0.04] dark:opacity-[0.025]"
        style={{
          background: `
            radial-gradient(ellipse 50% 60% at 50% 40%, currentColor 0%, transparent 70%)
          `,
        }}
      />
    </div>
  );
}

// ---------------------------------------------------------------------------
// Container
// ---------------------------------------------------------------------------

export function WaitlistMinimalContainer({
  className,
  ...props
}: React.ComponentPropsWithoutRef<"div">) {
  return (
    <div
      className={cn(
        "container relative z-10 flex flex-col items-center py-20 sm:py-28 lg:py-36",
        className
      )}
      data-slot="waitlist-minimal-container"
      {...props}
    />
  );
}

// ---------------------------------------------------------------------------
// Heading
// ---------------------------------------------------------------------------

export interface WaitlistMinimalHeadingProps
  extends Omit<React.ComponentPropsWithoutRef<"div">, "title" | "onDrag" | "onDragEnd" | "onDragStart" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDrop" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration"> {
  title?: string;
  headingClassName?: string;
}

export function WaitlistMinimalHeading({
  className,
  title,
  headingClassName,
  children,
  ...props
}: WaitlistMinimalHeadingProps) {
  const context = useWaitlistMinimalContext();
  const resolvedTitle = title ?? context.title;

  return (
    <motion.div
      className={cn("text-center", className)}
      data-slot="waitlist-minimal-heading-wrap"
      variants={itemVariants}
      {...props}
    >
      {children ?? (
        <div
          aria-hidden="true"
          className={cn(
            "text-balance font-semibold text-4xl tracking-[-0.04em] sm:text-5xl md:text-6xl",
            headingClassName
          )}
          data-slot="waitlist-minimal-heading"
        >
          <AnimatedWords>{resolvedTitle}</AnimatedWords>
        </div>
      )}
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// Description
// ---------------------------------------------------------------------------

export interface WaitlistMinimalDescriptionProps
  extends Omit<React.ComponentPropsWithoutRef<"div">, "onDrag" | "onDragEnd" | "onDragStart" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDrop" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration"> {
  description?: React.ReactNode;
  descriptionClassName?: string;
}

export function WaitlistMinimalDescription({
  className,
  description,
  descriptionClassName,
  children,
  ...props
}: WaitlistMinimalDescriptionProps) {
  const context = useWaitlistMinimalContext();
  const resolvedDescription = description ?? context.description;

  return (
    <motion.div
      className={cn("mx-auto mt-5 max-w-lg text-center", className)}
      data-slot="waitlist-minimal-description-wrap"
      variants={itemVariants}
      {...props}
    >
      {children ?? (
        <p
          className={cn(
            "text-pretty text-lg leading-relaxed text-foreground/50 sm:text-xl",
            descriptionClassName
          )}
          data-slot="waitlist-minimal-description"
        >
          {resolvedDescription}
        </p>
      )}
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// Capture (email input + CTA)
// ---------------------------------------------------------------------------

export interface WaitlistMinimalCaptureProps
  extends Omit<React.ComponentPropsWithoutRef<"div">, "onDrag" | "onDragEnd" | "onDragStart" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDrop" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration"> {
  ctaLabel?: string;
  inputPlaceholder?: string;
}

export function WaitlistMinimalCapture({
  className,
  ctaLabel,
  inputPlaceholder,
  children,
  ...props
}: WaitlistMinimalCaptureProps) {
  const context = useWaitlistMinimalContext();
  const resolvedCta = ctaLabel ?? context.ctaLabel;
  const resolvedPlaceholder = inputPlaceholder ?? context.inputPlaceholder;
  const [email, setEmail] = React.useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (email.trim() && context.onSubmit) {
      context.onSubmit(email.trim());
    }
  };

  return (
    <motion.div
      className={cn("mt-8 w-full max-w-md", className)}
      data-slot="waitlist-minimal-capture"
      variants={itemVariants}
      {...props}
    >
      {children ?? (
        <form
          className={cn(
            "flex items-center gap-0 rounded-xl bg-card p-1.5 transition-shadow duration-200",
            "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_2px_-1px_rgba(0,0,0,0.06),0px_2px_4px_0px_rgba(0,0,0,0.04)]",
            "dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.06),0px_1px_2px_-1px_rgba(255,255,255,0.03),0px_2px_4px_0px_rgba(0,0,0,0.2)]",
            "focus-within:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_1px_2px_-1px_rgba(0,0,0,0.08),0px_2px_4px_0px_rgba(0,0,0,0.06)]",
            "dark:focus-within:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1),0px_1px_2px_-1px_rgba(255,255,255,0.05),0px_2px_4px_0px_rgba(0,0,0,0.25)]"
          )}
          onSubmit={handleSubmit}
        >
          <Input
            className="flex-1 border-0 bg-transparent shadow-none focus-visible:ring-0"
            onChange={(e) => setEmail(e.target.value)}
            placeholder={resolvedPlaceholder}
            required
            type="email"
            value={email}
          />
          <motion.div whileTap={{ scale: 0.97 }}>
            <Button
              className="shrink-0 rounded-lg"
              size="sm"
              type="submit"
            >
              {resolvedCta}
            </Button>
          </motion.div>
        </form>
      )}
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// Social Proof (avatar stack + count)
// ---------------------------------------------------------------------------

export interface WaitlistMinimalSocialProofProps
  extends Omit<React.ComponentPropsWithoutRef<"div">, "onDrag" | "onDragEnd" | "onDragStart" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDrop" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration"> {
  avatars?: string[];
  count?: number;
}

export function WaitlistMinimalSocialProof({
  className,
  avatars,
  count,
  children,
  ...props
}: WaitlistMinimalSocialProofProps) {
  const context = useWaitlistMinimalContext();
  const resolvedAvatars = avatars ?? context.socialProofAvatars;
  const resolvedCount = count ?? context.socialProofCount;

  return (
    <motion.div
      className={cn(
        "mt-6 flex items-center gap-3",
        className
      )}
      data-slot="waitlist-minimal-social-proof"
      variants={itemVariants}
      {...props}
    >
      {children ?? (
        <>
          <motion.div
            className="flex -space-x-2"
            variants={avatarContainerVariants}
          >
            {resolvedAvatars.map((src, i) => (
              <motion.img
                alt=""
                className="size-7 rounded-full object-cover ring-2 ring-background [outline-offset:-1px] [outline:1px_solid_rgba(0,0,0,0.1)] dark:[outline-color:rgba(255,255,255,0.1)]"
                key={i}
                src={src}
                variants={avatarVariants}
              />
            ))}
          </motion.div>
          <p className="text-sm text-muted-foreground">
            <span className="tabular-nums font-medium text-foreground">
              {resolvedCount.toLocaleString()}
            </span>{" "}
            people joined
          </p>
        </>
      )}
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// Features (3-column hints)
// ---------------------------------------------------------------------------

export interface WaitlistMinimalFeaturesProps
  extends Omit<React.ComponentPropsWithoutRef<"div">, "onDrag" | "onDragEnd" | "onDragStart" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDrop" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration"> {
  features?: WaitlistMinimalFeature[];
}

export function WaitlistMinimalFeatures({
  className,
  features,
  children,
  ...props
}: WaitlistMinimalFeaturesProps) {
  const context = useWaitlistMinimalContext();
  const resolvedFeatures = features ?? context.features;

  return (
    <motion.div
      className={cn("mt-16 w-full max-w-2xl", className)}
      data-slot="waitlist-minimal-features-wrap"
      variants={itemVariants}
      {...props}
    >
      <motion.div className="mb-8 h-px w-full bg-border" />

      <motion.div
        className="grid grid-cols-1 gap-6 sm:grid-cols-3"
        variants={featureGridVariants}
      >
        {children ??
          resolvedFeatures.map((feature) => (
            <WaitlistMinimalFeatureCard
              feature={feature}
              key={feature.title}
            />
          ))}
      </motion.div>
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// FeatureCard
// ---------------------------------------------------------------------------

export interface WaitlistMinimalFeatureCardProps
  extends Omit<React.ComponentPropsWithoutRef<"div">, "onDrag" | "onDragEnd" | "onDragStart" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDrop" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration"> {
  feature: WaitlistMinimalFeature;
}

export function WaitlistMinimalFeatureCard({
  className,
  feature,
  ...props
}: WaitlistMinimalFeatureCardProps) {
  const { accentColor } = useWaitlistMinimalContext();
  const Icon = feature.icon;

  return (
    <motion.div
      className={cn("flex flex-col items-center text-center", className)}
      data-slot="waitlist-minimal-feature-card"
      variants={featureCardVariants}
      {...props}
    >
      {Icon && (
        <motion.div
          className="mb-3 flex size-10 items-center justify-center rounded-lg"
          style={{
            backgroundColor: `color-mix(in srgb, ${accentColor} 12%, transparent)`,
          }}
          whileHover={{ y: -2 }}
          transition={{ type: "spring", stiffness: 400, damping: 17 }}
        >
          <span className="contents" style={{ color: accentColor }}>
            <Icon className="size-5" />
          </span>
        </motion.div>
      )}
      <span className="text-sm font-medium tracking-tight">
        {feature.title}
      </span>
      <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
        {feature.description}
      </p>
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// Composed shorthand
// ---------------------------------------------------------------------------

export interface WaitlistMinimalProps extends WaitlistMinimalRootProps {
  containerClassName?: string;
  headingClassName?: string;
  descriptionClassName?: string;
  captureClassName?: string;
  socialProofClassName?: string;
  featuresClassName?: string;
}

export function WaitlistMinimal({
  containerClassName,
  headingClassName,
  descriptionClassName,
  captureClassName,
  socialProofClassName,
  featuresClassName,
  ...props
}: WaitlistMinimalProps) {
  return (
    <WaitlistMinimalRoot {...props}>
      <WaitlistMinimalBackground />
      <WaitlistMinimalContainer className={containerClassName}>
        <motion.div
          className="flex w-full flex-col items-center"
          initial="hidden"
          animate="visible"
          variants={containerVariants}
        >
          <WaitlistMinimalHeading headingClassName={headingClassName} />
          <WaitlistMinimalDescription
            descriptionClassName={descriptionClassName}
          />
          <WaitlistMinimalCapture className={captureClassName} />
          <WaitlistMinimalSocialProof className={socialProofClassName} />
          <WaitlistMinimalFeatures className={featuresClassName} />
        </motion.div>
      </WaitlistMinimalContainer>
    </WaitlistMinimalRoot>
  );
}

export default WaitlistMinimal;
Download Block

Add UI Components

Alternative Options

Download Block

Add UI Components

Alternative Options
