1a:I[52397,["/_next/static/immutable/chunks/2igrrcde_vc4p.js","/_next/static/immutable/chunks/0n36v-3cexsuq.js","/_next/static/immutable/chunks/3-6-6opb2l_5p.js","/_next/static/immutable/chunks/41t6fga463v64.js"],"Workbench"] 1b:T150c,import type { ComponentConfig } from "@puckeditor/core"; /** * Sticky CTA Bar — a slim message-and-button bar that rides the bottom of the screen with * position: sticky, then settles into the page where it was placed. No JavaScript, so no dismiss. * Register: `StickyCtaBarBlock: stickyCtaBarBlock` in puck.config.tsx. */ type Tone = "dark" | "indigo" | "light"; export type StickyCtaBarProps = { regionLabel: string; badge: string; message: string; detail: string; ctaLabel: string; ctaHref: string; tone: Tone; }; const tones: Record = { dark: { bar: "bg-neutral-950/95 ring-1 ring-white/10 shadow-2xl shadow-neutral-950/30", badge: "bg-indigo-500/20 text-indigo-200 ring-1 ring-indigo-400/30 ring-inset", message: "text-white", detail: "text-neutral-300", cta: "bg-white text-neutral-950 hover:bg-indigo-50", ring: "focus-visible:outline-white", }, indigo: { bar: "bg-indigo-700 ring-1 ring-indigo-900/20 shadow-2xl shadow-indigo-950/30", badge: "bg-white/15 text-white ring-1 ring-white/25 ring-inset", message: "text-white", detail: "text-indigo-100", cta: "bg-white text-indigo-700 hover:bg-indigo-50", ring: "focus-visible:outline-white", }, light: { bar: "bg-white/95 ring-1 ring-neutral-200 shadow-2xl shadow-neutral-900/15", badge: "bg-indigo-50 text-indigo-700 ring-1 ring-indigo-600/15 ring-inset", message: "text-neutral-950", detail: "text-neutral-600", cta: "bg-indigo-600 text-white hover:bg-indigo-700", ring: "focus-visible:outline-indigo-600", }, }; export const stickyCtaBarBlock: ComponentConfig = { label: "Sticky CTA Bar", metadata: { help: "Place it near the top of the page: it rides the bottom of the screen until readers scroll past that spot, then settles into the page. It only sticks within the container it's dropped in. Visitors can't close it, so keep it for time-limited campaigns and use one per page.", }, fields: { regionLabel: { type: "text", label: "Region name", metadata: { help: "Read by screen readers to announce the bar, such as \"Year-end appeal\". Not shown." } }, badge: { type: "text", label: "Badge", metadata: { help: "A short tag before the message, such as 2× match. Leave blank to hide it." } }, message: { type: "text", label: "Message", metadata: { help: "One short line. Tip: drop this block near the top of the page so it sticks while people read; visitors can't close it." } }, detail: { type: "text", label: "Detail", metadata: { help: "Optional second line, hidden on phones to keep the bar slim." } }, ctaLabel: { type: "text", label: "Button text" }, ctaHref: { type: "text", label: "Button link", metadata: { help: "A path (/donate), full URL, #anchor, mailto: or tel:." } }, tone: { type: "select", label: "Style", options: [ { label: "Dark", value: "dark" }, { label: "Indigo", value: "indigo" }, { label: "Light", value: "light" }, ], }, }, defaultProps: { regionLabel: "Year-end appeal", badge: "2× match", message: "Every gift is doubled through December 31.", detail: "A neighbor has pledged to match up to $50,000 in gifts to the food pantry.", ctaLabel: "Double my gift", ctaHref: "/donate", tone: "dark", }, render: ({ regionLabel, badge, message, detail, ctaLabel, ctaHref, tone }) => { const t = tones[tone] ?? tones.dark; if (!message && !ctaLabel) return <>; return ( ); }, }; 1c:T8a82,

import type { ComponentConfig } from "@puckeditor/core";

/**
 * Sticky CTA Bar — a slim message-and-button bar that rides the bottom of the screen with
 * position: sticky, then settles into the page where it was placed. No JavaScript, so no dismiss.
 * Register: `StickyCtaBarBlock: stickyCtaBarBlock` in puck.config.tsx.
 */

type Tone = "dark" | "indigo" | "light";

export type StickyCtaBarProps = {
  regionLabel: string;
  badge: string;
  message: string;
  detail: string;
  ctaLabel: string;
  ctaHref: string;
  tone: Tone;
};

const tones: Record<Tone, { bar: string; badge: string; message: string; detail: string; cta: string; ring: string }> = {
  dark: {
    bar: "bg-neutral-950/95 ring-1 ring-white/10 shadow-2xl shadow-neutral-950/30",
    badge: "bg-indigo-500/20 text-indigo-200 ring-1 ring-indigo-400/30 ring-inset",
    message: "text-white",
    detail: "text-neutral-300",
    cta: "bg-white text-neutral-950 hover:bg-indigo-50",
    ring: "focus-visible:outline-white",
  },
  indigo: {
    bar: "bg-indigo-700 ring-1 ring-indigo-900/20 shadow-2xl shadow-indigo-950/30",
    badge: "bg-white/15 text-white ring-1 ring-white/25 ring-inset",
    message: "text-white",
    detail: "text-indigo-100",
    cta: "bg-white text-indigo-700 hover:bg-indigo-50",
    ring: "focus-visible:outline-white",
  },
  light: {
    bar: "bg-white/95 ring-1 ring-neutral-200 shadow-2xl shadow-neutral-900/15",
    badge: "bg-indigo-50 text-indigo-700 ring-1 ring-indigo-600/15 ring-inset",
    message: "text-neutral-950",
    detail: "text-neutral-600",
    cta: "bg-indigo-600 text-white hover:bg-indigo-700",
    ring: "focus-visible:outline-indigo-600",
  },
};

export const stickyCtaBarBlock: ComponentConfig<StickyCtaBarProps> = {
  label: "Sticky CTA Bar",
  metadata: {
    help: "Place it near the top of the page: it rides the bottom of the screen until readers scroll past that spot, then settles into the page. It only sticks within the container it's dropped in. Visitors can't close it, so keep it for time-limited campaigns and use one per page.",
  },
  fields: {
    regionLabel: { type: "text", label: "Region name", metadata: { help: "Read by screen readers to announce the bar, such as \"Year-end appeal\". Not shown." } },
    badge: { type: "text", label: "Badge", metadata: { help: "A short tag before the message, such as 2× match. Leave blank to hide it." } },
    message: { type: "text", label: "Message", metadata: { help: "One short line. Tip: drop this block near the top of the page so it sticks while people read; visitors can't close it." } },
    detail: { type: "text", label: "Detail", metadata: { help: "Optional second line, hidden on phones to keep the bar slim." } },
    ctaLabel: { type: "text", label: "Button text" },
    ctaHref: { type: "text", label: "Button link", metadata: { help: "A path (/donate), full URL, #anchor, mailto: or tel:." } },
    tone: {
      type: "select",
      label: "Style",
      options: [
        { label: "Dark", value: "dark" },
        { label: "Indigo", value: "indigo" },
        { label: "Light", value: "light" },
      ],
    },
  },
  defaultProps: {
    regionLabel: "Year-end appeal",
    badge: "2× match",
    message: "Every gift is doubled through December 31.",
    detail: "A neighbor has pledged to match up to $50,000 in gifts to the food pantry.",
    ctaLabel: "Double my gift",
    ctaHref: "/donate",
    tone: "dark",
  },
  render: ({ regionLabel, badge, message, detail, ctaLabel, ctaHref, tone }) => {
    const t = tones[tone] ?? tones.dark;
    if (!message && !ctaLabel) return <></>;
    return (
      <aside aria-label={regionLabel || "Announcement"} className="pointer-events-none sticky bottom-0 z-40 px-3 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] sm:px-6">
        <div className={`pointer-events-auto mx-auto flex max-w-4xl items-center gap-3 rounded-2xl py-2.5 pr-2.5 pl-4 backdrop-blur-sm sm:gap-6 sm:pl-5 ${t.bar}`}>
          <div className="flex min-w-0 flex-1 items-center gap-3">
            {badge ? <span className={`hidden shrink-0 rounded-full px-2.5 py-1 text-xs font-semibold whitespace-nowrap sm:inline-flex ${t.badge}`}>{badge}</span> : null}
            {message || detail ? (
              <div className="min-w-0">
                {message ? <p className={`text-sm leading-5 font-semibold text-pretty sm:text-base sm:leading-6 ${t.message}`}>{message}</p> : null}
                {detail ? <p className={`hidden text-sm leading-5 sm:line-clamp-1 ${t.detail}`}>{detail}</p> : null}
              </div>
            ) : null}
          </div>
          {ctaLabel ? (
            <a
              href={ctaHref || "#"}
              className={`inline-flex min-h-11 shrink-0 items-center justify-center gap-1.5 rounded-xl px-4 text-sm font-semibold shadow-xs transition focus-visible:outline-2 focus-visible:outline-offset-2 sm:px-5 ${t.cta} ${t.ring}`}
            >
              {ctaLabel}
              <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className="hidden size-4 sm:block">
                <path fillRule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.64l-3.22-3.22a.75.75 0 1 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06l3.22-3.22H3.75A.75.75 0 0 1 3 10Z" clipRule="evenodd" />
              </svg>
            </a>
          ) : null}
        </div>
      </aside>
    );
  },
};

1d:T1c12,# Add the "Sticky CTA Bar" block to this P1 project Add a Puck component from P1 Blocks ({origin}/blocks/sticky-cta-bar) to this Pantheon Content Publisher (P1) Next.js project. Slim message-and-button bar that sticks to the bottom of the screen with CSS, for time-limited campaigns. ## Steps 1. Create `components/puck/sticky-cta-bar-block.tsx` with the exact file contents below. If `components/puck/` doesn't exist, find the folder where this project keeps its Puck components (look at the imports in `puck.config.tsx`) and put it there. 2. In `puck.config.tsx`, import it: `import { stickyCtaBarBlock } from "./components/puck/sticky-cta-bar-block";` 3. Register it under `components` as `StickyCtaBarBlock: stickyCtaBarBlock`. 4. Add `"StickyCtaBarBlock"` to the best-fitting entry in `categories` (this block's library category is "Conversion"). Create a category only if none fits. 5. Run the project's type check (usually `pnpm typecheck`) and resolve anything project-specific. 6. If `package.json` has a `sync:registry` script, tell the user it must run (or that CI will run it) before the new component appears in the P1 editor. ## Rules - Do not add dependencies. The block is self-contained by design: one type-only import from `@puckeditor/core`, Tailwind v4 classes, no client JavaScript. - Keep the files as-is unless the user asks for changes. The accent color is `indigo-*`; if the project has brand colors, offer to swap them with a find-and-replace on `indigo-`. - Images are plain `imageUrl` + `imageAlt` text fields. If this project defines a P1 media-library field (search for `"p1-media"`), offer to switch to it. - Don't change prop names in `defaultProps`. Content editors' saved pages depend on them. ## File: `components/puck/sticky-cta-bar-block.tsx` ```tsx import type { ComponentConfig } from "@puckeditor/core"; /** * Sticky CTA Bar — a slim message-and-button bar that rides the bottom of the screen with * position: sticky, then settles into the page where it was placed. No JavaScript, so no dismiss. * Register: `StickyCtaBarBlock: stickyCtaBarBlock` in puck.config.tsx. */ type Tone = "dark" | "indigo" | "light"; export type StickyCtaBarProps = { regionLabel: string; badge: string; message: string; detail: string; ctaLabel: string; ctaHref: string; tone: Tone; }; const tones: Record = { dark: { bar: "bg-neutral-950/95 ring-1 ring-white/10 shadow-2xl shadow-neutral-950/30", badge: "bg-indigo-500/20 text-indigo-200 ring-1 ring-indigo-400/30 ring-inset", message: "text-white", detail: "text-neutral-300", cta: "bg-white text-neutral-950 hover:bg-indigo-50", ring: "focus-visible:outline-white", }, indigo: { bar: "bg-indigo-700 ring-1 ring-indigo-900/20 shadow-2xl shadow-indigo-950/30", badge: "bg-white/15 text-white ring-1 ring-white/25 ring-inset", message: "text-white", detail: "text-indigo-100", cta: "bg-white text-indigo-700 hover:bg-indigo-50", ring: "focus-visible:outline-white", }, light: { bar: "bg-white/95 ring-1 ring-neutral-200 shadow-2xl shadow-neutral-900/15", badge: "bg-indigo-50 text-indigo-700 ring-1 ring-indigo-600/15 ring-inset", message: "text-neutral-950", detail: "text-neutral-600", cta: "bg-indigo-600 text-white hover:bg-indigo-700", ring: "focus-visible:outline-indigo-600", }, }; export const stickyCtaBarBlock: ComponentConfig = { label: "Sticky CTA Bar", metadata: { help: "Place it near the top of the page: it rides the bottom of the screen until readers scroll past that spot, then settles into the page. It only sticks within the container it's dropped in. Visitors can't close it, so keep it for time-limited campaigns and use one per page.", }, fields: { regionLabel: { type: "text", label: "Region name", metadata: { help: "Read by screen readers to announce the bar, such as \"Year-end appeal\". Not shown." } }, badge: { type: "text", label: "Badge", metadata: { help: "A short tag before the message, such as 2× match. Leave blank to hide it." } }, message: { type: "text", label: "Message", metadata: { help: "One short line. Tip: drop this block near the top of the page so it sticks while people read; visitors can't close it." } }, detail: { type: "text", label: "Detail", metadata: { help: "Optional second line, hidden on phones to keep the bar slim." } }, ctaLabel: { type: "text", label: "Button text" }, ctaHref: { type: "text", label: "Button link", metadata: { help: "A path (/donate), full URL, #anchor, mailto: or tel:." } }, tone: { type: "select", label: "Style", options: [ { label: "Dark", value: "dark" }, { label: "Indigo", value: "indigo" }, { label: "Light", value: "light" }, ], }, }, defaultProps: { regionLabel: "Year-end appeal", badge: "2× match", message: "Every gift is doubled through December 31.", detail: "A neighbor has pledged to match up to $50,000 in gifts to the food pantry.", ctaLabel: "Double my gift", ctaHref: "/donate", tone: "dark", }, render: ({ regionLabel, badge, message, detail, ctaLabel, ctaHref, tone }) => { const t = tones[tone] ?? tones.dark; if (!message && !ctaLabel) return <>; return ( ); }, }; ``` 1e:T11fb,/** * Sticky CTA Bar — a slim message-and-button bar that rides the bottom of the screen with * position: sticky, then settles into the page where it was placed. No JavaScript, so no dismiss. * Usage: ``, or pass your own props. Every prop is optional. */ type Tone = "dark" | "indigo" | "light"; export type StickyCtaBarProps = { /** Region name. Read by screen readers to announce the bar, such as "Year-end appeal". Not shown. */ regionLabel: string; /** Badge. A short tag before the message, such as 2× match. Leave blank to hide it. */ badge: string; /** Message. One short line. Tip: drop this block near the top of the page so it sticks while people read; visitors can't close it. */ message: string; /** Detail. Optional second line, hidden on phones to keep the bar slim. */ detail: string; /** Button text */ ctaLabel: string; /** Button link. A path (/donate), full URL, #anchor, mailto: or tel:. */ ctaHref: string; /** Style */ tone: Tone; }; const tones: Record = { dark: { bar: "bg-neutral-950/95 ring-1 ring-white/10 shadow-2xl shadow-neutral-950/30", badge: "bg-indigo-500/20 text-indigo-200 ring-1 ring-indigo-400/30 ring-inset", message: "text-white", detail: "text-neutral-300", cta: "bg-white text-neutral-950 hover:bg-indigo-50", ring: "focus-visible:outline-white", }, indigo: { bar: "bg-indigo-700 ring-1 ring-indigo-900/20 shadow-2xl shadow-indigo-950/30", badge: "bg-white/15 text-white ring-1 ring-white/25 ring-inset", message: "text-white", detail: "text-indigo-100", cta: "bg-white text-indigo-700 hover:bg-indigo-50", ring: "focus-visible:outline-white", }, light: { bar: "bg-white/95 ring-1 ring-neutral-200 shadow-2xl shadow-neutral-900/15", badge: "bg-indigo-50 text-indigo-700 ring-1 ring-indigo-600/15 ring-inset", message: "text-neutral-950", detail: "text-neutral-600", cta: "bg-indigo-600 text-white hover:bg-indigo-700", ring: "focus-visible:outline-indigo-600", }, }; /** Sample content: `` renders the block as previewed. Replace it with your own. */ export const stickyCtaBarExample: StickyCtaBarProps = { regionLabel: "Year-end appeal", badge: "2× match", message: "Every gift is doubled through December 31.", detail: "A neighbor has pledged to match up to $50,000 in gifts to the food pantry.", ctaLabel: "Double my gift", ctaHref: "/donate", tone: "dark", }; export function StickyCtaBar(props: Partial) { const { regionLabel, badge, message, detail, ctaLabel, ctaHref, tone } = props as StickyCtaBarProps; const t = tones[tone] ?? tones.dark; if (!message && !ctaLabel) return <>; return ( ); } 1f:T67c7,

/**
 * Sticky CTA Bar — a slim message-and-button bar that rides the bottom of the screen with
 * position: sticky, then settles into the page where it was placed. No JavaScript, so no dismiss.
 * Usage: `<StickyCtaBar {...stickyCtaBarExample} />`, or pass your own props. Every prop is optional.
 */

type Tone = "dark" | "indigo" | "light";

export type StickyCtaBarProps = {
  /** Region name. Read by screen readers to announce the bar, such as "Year-end appeal". Not shown. */
  regionLabel: string;
  /** Badge. A short tag before the message, such as 2× match. Leave blank to hide it. */
  badge: string;
  /** Message. One short line. Tip: drop this block near the top of the page so it sticks while people read; visitors can't close it. */
  message: string;
  /** Detail. Optional second line, hidden on phones to keep the bar slim. */
  detail: string;
  /** Button text */
  ctaLabel: string;
  /** Button link. A path (/donate), full URL, #anchor, mailto: or tel:. */
  ctaHref: string;
  /** Style */
  tone: Tone;
};

const tones: Record<Tone, { bar: string; badge: string; message: string; detail: string; cta: string; ring: string }> = {
  dark: {
    bar: "bg-neutral-950/95 ring-1 ring-white/10 shadow-2xl shadow-neutral-950/30",
    badge: "bg-indigo-500/20 text-indigo-200 ring-1 ring-indigo-400/30 ring-inset",
    message: "text-white",
    detail: "text-neutral-300",
    cta: "bg-white text-neutral-950 hover:bg-indigo-50",
    ring: "focus-visible:outline-white",
  },
  indigo: {
    bar: "bg-indigo-700 ring-1 ring-indigo-900/20 shadow-2xl shadow-indigo-950/30",
    badge: "bg-white/15 text-white ring-1 ring-white/25 ring-inset",
    message: "text-white",
    detail: "text-indigo-100",
    cta: "bg-white text-indigo-700 hover:bg-indigo-50",
    ring: "focus-visible:outline-white",
  },
  light: {
    bar: "bg-white/95 ring-1 ring-neutral-200 shadow-2xl shadow-neutral-900/15",
    badge: "bg-indigo-50 text-indigo-700 ring-1 ring-indigo-600/15 ring-inset",
    message: "text-neutral-950",
    detail: "text-neutral-600",
    cta: "bg-indigo-600 text-white hover:bg-indigo-700",
    ring: "focus-visible:outline-indigo-600",
  },
};

/** Sample content: `<StickyCtaBar {...stickyCtaBarExample} />` renders the block as previewed. Replace it with your own. */
export const stickyCtaBarExample: StickyCtaBarProps = {
  regionLabel: "Year-end appeal",
  badge: "2× match",
  message: "Every gift is doubled through December 31.",
  detail: "A neighbor has pledged to match up to $50,000 in gifts to the food pantry.",
  ctaLabel: "Double my gift",
  ctaHref: "/donate",
  tone: "dark",
};

export function StickyCtaBar(props: Partial<StickyCtaBarProps>) {
  const { regionLabel, badge, message, detail, ctaLabel, ctaHref, tone } = props as StickyCtaBarProps;
  const t = tones[tone] ?? tones.dark;
  if (!message && !ctaLabel) return <></>;
  return (
    <aside aria-label={regionLabel || "Announcement"} className="pointer-events-none sticky bottom-0 z-40 px-3 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] sm:px-6">
      <div className={`pointer-events-auto mx-auto flex max-w-4xl items-center gap-3 rounded-2xl py-2.5 pr-2.5 pl-4 backdrop-blur-sm sm:gap-6 sm:pl-5 ${t.bar}`}>
        <div className="flex min-w-0 flex-1 items-center gap-3">
          {badge ? <span className={`hidden shrink-0 rounded-full px-2.5 py-1 text-xs font-semibold whitespace-nowrap sm:inline-flex ${t.badge}`}>{badge}</span> : null}
          {message || detail ? (
            <div className="min-w-0">
              {message ? <p className={`text-sm leading-5 font-semibold text-pretty sm:text-base sm:leading-6 ${t.message}`}>{message}</p> : null}
              {detail ? <p className={`hidden text-sm leading-5 sm:line-clamp-1 ${t.detail}`}>{detail}</p> : null}
            </div>
          ) : null}
        </div>
        {ctaLabel ? (
          <a
            href={ctaHref || "#"}
            className={`inline-flex min-h-11 shrink-0 items-center justify-center gap-1.5 rounded-xl px-4 text-sm font-semibold shadow-xs transition focus-visible:outline-2 focus-visible:outline-offset-2 sm:px-5 ${t.cta} ${t.ring}`}
          >
            {ctaLabel}
            <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className="hidden size-4 sm:block">
              <path fillRule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.64l-3.22-3.22a.75.75 0 1 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06l3.22-3.22H3.75A.75.75 0 0 1 3 10Z" clipRule="evenodd" />
            </svg>
          </a>
        ) : null}
      </div>
    </aside>
  );
}

20:T1732,

Editor fields