Announcement Bar

A slim banner at the very top of the page for promotions or news.

What it does

AnnouncementBar renders a thin colored strip above the header with a short message and an optional CTA link. It is one of the first things visitors see, so it is most effective for time-sensitive promotions or major announcements.

Configuration

// src/config.ts
announcementBar: {
  show: true,
  text: "Black Friday: 40% off this weekend only —",
  ctaText: "grab it now",
  ctaHref: "/#pricing",
},

show — set to false to hide the bar globally without touching any component code. Toggle it back to true whenever your next promotion starts.
text — the main message. Keep it short — one sentence or less. The bar has limited space and most visitors will only glance at it.
ctaText — the clickable link label that follows the text. Short action words work best: grab it now, see plans, learn more.
ctaHref — where the link points. Usually /#pricing for promotions or a specific page for announcements.

TipThe most effective announcements are specific and time-bound. Instead of "Save on all plans", write "50% off until Friday". Urgency and a clear number make people actually click.

TipHide the bar when there is nothing to announce. Leaving a stale promotion up erodes trust — visitors notice when a "limited time" deal has been running for months.