CTA Section with Glow

CTAs

About

A closing call to action: a large serif title with an accent word that catches the light, one button with a sheen, stars and a soft light in the middle. From the Midnight Lite template (MIT).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds CTA Section with Glow to your project and fits it to your theme.

Code

How CTA Section with Glow is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import type { CSSProperties } from "react"

import { NightCta } from "@/components/ui/night-cta"

const fraunces =
  "@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..600,0..100;1,9..144,300..600,0..100&display=swap');"

const settings = {
  lead: "Hand it off",
  accent: "tonight.",
  button: "Start free",
  paper: "#f7f5f0",
  ink: "#141a2e",
  muted: "#4a5166",
  primary: "#a8803a",
}

// Midnight by day as theme tokens: warm paper, night-blue ink, deep gold with white text on it; gold stars
function day(s: typeof settings) {
  const t: Record<string, string> = {
    background: s.paper,
    foreground: s.ink,
    primary: s.primary,
    "primary-foreground": "#ffffff",
    "muted-foreground": s.muted,
    ring: s.primary,
  }
  return {
    ...Object.fromEntries(Object.entries(t).flatMap(([k, v]) => [[`--${k}`, v], [`--color-${k}`, v]])),
    "--mn-star": "#a5813f",
    "--mn-star-k": "1.6",
  } as CSSProperties
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <div className="flex min-h-svh w-full flex-col justify-center" style={{ ...day(s), "--font-display": "Fraunces, ui-serif, Georgia, serif", background: s.paper } as CSSProperties}>
      <style>{fraunces}</style>
      <NightCta
        title={{ lead: s.lead, accent: s.accent }}
        lead="Start free. Your first brief arrives tomorrow at 7:00."
        button={{ label: s.button, href: "#" }}
        note="Free plan · No card required"
      />
    </div>
  )
}