top-banner-generator

# Components: Top Banner (Announcement Bar) Guides top announcement bar and sticky banner design for conversion. Top banners answer visitor questions in ~3 seconds (trust, discount, free shipping, urgency) and can increase coupon redemption by 30-50% when used well. **When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output. ## Initial Assessment **Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for offers, messaging, and Section 12 (Visual Identity). Identify: 1. **Goal**: Lead capture, promo, urgency, trust, free shipping 2. **Placement**: Above header (sticky) or below; dismissible or persistent 3. **Audience**: All visitors vs segmented (geo, returning, cart abandoners) ## Best Practices ### Use Cases | Use | Example | |-----|---------| | **Lead capture** | Newsletter, lead magnet, demo request | | **Promo** | Discount code, flash sale, free shipping threshold | | **Urgency** | Limited-time offer, countdown | | **Trust** | Guarantee, security, shipping info | | **Launch** | Product launch, event, cross-sell | ### Discount Banner Types | Discount Type | Banner Example | Related | |---------------|----------------|---------| | **Annual discount** | "Save 20% with annual billing" | discount-marketing-strategy | | **Student/education** | "Students: 30% off today, 15% off ongoing" | education-program | | **Startups/education** | "Startups: Special pricing — Apply now" | startups-page-generator | | **BFCM / seasonal** | "Black Friday: 25% off — Use code BF25" | discount-marketing-strategy | | **First-time** | "New users: 20% off first year" | discount-marketing-strategy | | **Referral code** | "Get $10 off — Refer a friend" | referral-program | **Placement**: Discount banner is P1 for student/education (homepage); pricing page also shows. See **education-program** for placement priority (registration P0, pricing P1, banner P1). ### Design - **Clear hierarchy**: Message + CTA in ~400ms "blink test" - **Minimal copy**: One line typical; link for "Learn more" - **High contrast**: Stand out from page; CTA color distinct - **Mobile-first**: 70%+ traffic on mobile; thumb-friendly close/CTA ### Technical - **Desktop**: 1920x600px keeps content above fold; 16:9 common - **Mobile**: 800x1200px (2:3 portrait); use separate assets, not scaled - **Performance**: Optimize images; oversized banners hurt LCP and SEO ### Avoid - Crowding the header; leave space for nav and logo - Too many CTAs; one primary action - Stale messaging; refresh every 2-4 weeks ## Output Format - **Message** and CTA copy - **Placement** (sticky top, below header) - **Targeting** (all vs segment) - **Design** notes (contrast, mobile) ## Related Skills - **discount-marketing-strategy**: Promo/discount strategy; banner displays discount code; 30–50% redemption lift - **education-program**: Student discount banner (P1 placement); "Students: X% off" copy - **pricing-page-generator**: Discount banner supports pricing page; Special programs, promo placement - **cta-generator**: Banner CTA design - **newsletter-signup-generator**: Lead capture in banner - **brand-visual-generator**: Colors, typography for banner - **navigation-menu-generator**: Banner sits above or integrates with nav