Promo Page React template for Tailwind CSS v4

Add to a project

Pro item: the CLI needs a Pro account. See plans

Usage

Import PromoPage from @/components/templates/promo-page.

// app/(marketing)/deals/page.tsx
"use client"

import Link from "next/link"
import { getPromoPhase, PromoPage } from "@/components/templates/promo-page"
import { PROMO_ENDS_AT, PROMO_STARTS_AT } from "@/components/templates/promo-page-data"

export default function DealsRoute() {
  return (
    <PromoPage
      linkComponent={Link}
      phase={getPromoPhase(PROMO_STARTS_AT, PROMO_ENDS_AT)}
      now={null}
      ctaTone="brand"
      onClaim={async (plan, seats) => {
        const response = await fetch("/api/checkout", { method: "POST", body: JSON.stringify({ plan: plan.id, seats, code: "ACME40" }) })
        if (!response.ok) throw new Error("Could not apply the deal")
      }}
      onNotify={async (email) => {
        await fetch("/api/sale-alerts", { method: "POST", body: JSON.stringify({ email }) })
      }}
    />
  )
}

Props

• designdefault "classic"
  "classic" | "bold" | "minimal"

  The whole page's look. classic: a split hero with the coupon and gift tags over a sunburst, a dark closing band; bold: the all-black Black Friday page in both themes, a pill header, a giant title in the offer color under a night-blue glow, offer-colored countdown tiles, rounder cards, a quote wall, FAQ cards, an offer-colored closing band and a wordmark footer; minimal: a transparent header, a centered hero with the coupon alone, outlined flat cards, no bands, a ruled closing band and a simple footer. The *Props overrides still win.

• phasedefault "live"
  "teaser" | "live" | "last-call" | "ended"

  Where the sale is. teaser: a countdown to the start, a notify-me form and locked plan cards; live: the offer with a countdown to the end; last-call: the same with red urgency in the pill, label, countdown and phone bar; ended: a stamped coupon, regular prices, a waitlist form and no calculator, bonuses or terms. getPromoPhase computes it from the dates.

• discountdefault 40
  number

  Percent off. It flows into every label ({discount}), the coupon, the stickers and every price and total.

• codedefault "ACME40"
  string

  The promo code on the coupon, the copy chips, the checkout link and the labels ({code}).

• startsAtdefault "2026-11-27T08:00:00Z"
  Date | number | string

  When the sale starts (Nov 27 at 12:00 AM PT): the teaser countdown and {start} in the copy.

• endsAtdefault "2026-12-02T07:59:59Z"
  Date | number | string

  When the sale ends (Dec 1 at 11:59 PM PT): the countdowns and {end} in the copy.

• nowdefault "PROMO_SAMPLE_NOW[phase]"
  Date | number | string | null

  The clock the countdowns start from. The default is a fixed sample per phase (a week before, mid-sale, the final hours, the day after) so server and client render the same digits; null uses the visitor's real clock.

• tickdefault true
  boolean

  The countdowns run on from now after hydration; false freezes them (screenshots).

• timeZonedefault "America/Los_Angeles"
  string

  The IANA zone the dates in the copy are formatted in, so every visitor reads the same day.

• plansdefault "PROMO_PLANS"
  PromoPlan[]

  The offer cards: { id: "pro" | "business", name, description, yearlyMonthly (regular price per user per month, billed yearly), monthly, featuresTitle?, features, seats (on load), badge?, featured? }.

• extrasdefault "PROMO_EXTRAS"
  PromoExtra[]

  The bonus tiles: { id, icon?, tag, title, description, value }.

• testimonialsdefault "PROMO_TESTIMONIALS"
  Testimonial[]

  Quotes from last year's sale: { quote, name, role?, company?, companyIcon?, metric? }.

• termsdefault "PROMO_TERMS"
  PromoTerm[]

  The plain-English terms: { id, title, content }; strings may hold {discount}, {code}, {start} and {end}.

• faqdefault "PROMO_FAQ"
  FaqItem[]

  { question, answer } pairs; string answers may hold the same placeholders.

• spotsdefault "{ claimed: 2418, total: 5000 }"
  PromoSpots

  The onboarding spots progress in the hero.

• labelsdefault "DEFAULT_PROMO_PAGE_LABELS"
  Partial<PromoPageLabels>

  Every visible string, with {discount}, {code}, {start}, {end} and {year} filled in (a few take more, like {plan} or {seats}).

• hrefsdefault "DEFAULT_PROMO_PAGE_HREFS"
  Partial<PromoPageHrefs>

  { checkout, pricing, sales, terms }. The checkout link gets ?plan=&seats=&code= appended.

• defaultSeatsdefault 25
  number

  The savings calculator's team size on load.

• defaultPlandefault "business"
  "pro" | "business"

  The savings calculator's plan on load.

• maxSeatsdefault 200
  number

  The most seats the steppers and the calculator's slider go to.

• showAnnouncementdefault true
  boolean

  The strip above the header bar.

• showCountdowndefault true
  boolean

  The countdowns in the hero and the closing band.

• showCodedefault true
  boolean

  The copyable code chips.

• showSpotsdefault true
  boolean

  The onboarding spots progress in the hero (live and last call).

• showPlansdefault true
  boolean

  The plan cards.

• showCalculatordefault true
  boolean

  The savings calculator (hidden once the sale ended).

• showExtrasdefault true
  boolean

  The bonus tiles (hidden once the sale ended).

• showTestimonialsdefault true
  boolean

  The quotes from last year's sale.

• showTermsdefault true
  boolean

  The plain-English terms (hidden once the sale ended).

• showFaqdefault true
  boolean

  The FAQ.

• showCtadefault true
  boolean

  The closing band.

• showStickyBardefault true
  boolean

  The phone bar pinned to the bottom once the hero scrolls away (below 768px, not when ended).

• alternatedefault true
  boolean

  Bands in the bandBackground look on every other visible section. Applies to the classic and bold designs.

• backgrounddefault "aurora"
  "plain" | "soft" | "glow" | "aurora" | "grid" | "dots"

  The main background: plain is the bare page color; the others tint the page and add a glow, an aurora, a grid or dots over the first screen. A design picks its own unless you set one. classic uses aurora, bold a glow with gradient bands, minimal plain; on a plain page the bold hero draws its own offer-colored spotlight.

• backgroundColordefault "oklch(0.62 0.14 275)"
  string

  The tint and glow color of the main background.

• bandBackgrounddefault "muted"
  "muted" | "tinted" | "gradient" | "dots"

  The secondary background of the alternating bands. Cards, fields and tiles inside a band are lifted one step above it, so they never share its color.

• bandColordefault "oklch(0.62 0.14 275)"
  string

  The tint of tinted and gradient bands; defaults to backgroundColor.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Checks, the slider, the spots bar, badges and the offer color when offerColor is empty.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Claim buttons, the notify form, the phone bar and the header's Get started.

• offerColordefault "#FFD43B"
  string

  The festive color of the coupon, the savings stickers, the deal bar and the bold design's title and closing band. Text on it turns black or white by lightness. Empty follows tone.

• headerdefault true
  boolean

  The marketing header; off inside a site layout.

• footerdefault true
  boolean

  The marketing footer with its newsletter form.

• headerProps
  Partial<MarketingHeaderProps>

  Passed to MarketingHeader.

• footerProps
  Partial<MarketingFooterProps>

  Passed to MarketingFooter.

• testimonialsProps
  Partial<TestimonialsSectionProps>

  Overrides for the TestimonialsSection.

• faqProps
  Partial<FaqSectionProps>

  Overrides for the FaqSection.

• onClaim
  (plan: PromoPlan, seats: number) => (void | Promise<unknown>)

  A plan's Claim button. A promise keeps it spinning, a rejection shows an error. Without it: 900 ms, then the code applied and a checkout link.

• onNotify
  (email: string) => (void | Promise<unknown>)

  The notify-me (teaser) and waitlist (ended) forms; a rejection shows an error. Without it: 900 ms, then success.

• onCopyCode
  (code: string) => void

  A code chip copied the code.

• onSubscribe
  (email: string) => (void | Promise<unknown>)

  The footer newsletter; a rejected promise shows an error.

• animateIndefault true
  boolean

  The hero rises in once and the coupon settles into place; false keeps the page still (thumbnails). Reduced motion always does.

• localedefault "en-US"
  string

  Intl locale for prices, totals, counters and dates. Empty follows UIProvider.

• currencydefault "USD"
  string

  ISO currency for every price; the plan amounts are taken as is.

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  The router link for every link on the page (next/link in an app).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<PromoPageSlot, string>>

  Classes for header, hero, pill, title, art, code, status, countdown, spots, notify, plans, plan, calculator, extras, extra, testimonials, terms, faq, cta, sticky and footer.

Parts