CTABanner

The CTABanner component displays a full-width call-to-action section with a heading, description, and primary button. Content is managed via a shared config file so updates can be made in one place.

Overview

File: src/components/CTABanner.astro Data config: src/data/ctaBannerConfig.ts Used on: Homepage, About, Contact, FAQ, Guides & Resources, Representation pages

This component is ideal for:

• Promoting membership or donation initiatives
• Creating a consistent CTA across multiple pages
• Updating messaging in a single configuration file

Props

This component has no props. All copy and links are defined in ctaBannerConfig.

Usage

1. Import the component into an Astro page:

   ---
   import CTABanner from '../components/CTABanner.astro';
   ---

2. Render the component where needed:

   <CTABanner />

3. Update CTA copy by editing the config file:

   • Path: src/data/ctaBannerConfig.ts
   • Update heading, description, or buttons.primary

Data configuration

CTA configuration structure

export interface CTABannerContent {
  heading: string;
  description: string;
  buttons: {
    secondary: CTAButton;
    primary: CTAButton;
  };
}

Example configuration

export const ctaBannerConfig = {
  heading: 'Join FiNAN and Empower Filipino Nurses in the Nordic Region',
  description: 'Be part of a non-profit community that supports, guides, and advocates for Filipino nurses across the Nordic region.',
  buttons: {
    primary: {
      text: 'Be a member',
      href: '/membership',
    },
    secondary: {
      text: 'Donate',
      href: '#donate',
    },
  },
} as const;

Rendering behavior

• Renders a dark background banner with centered content
• Primary button uses a rounded pill style
• Secondary button is currently commented out in the component

Styling details

• Background: bg-gray-800
• Padding: py-16
• Text alignment: Centered on mobile, left on large screens
• Button layout: Stacked on mobile, inline on wider screens

For content editors

Updating CTA text

1. Open the config file:

   • Repository: finan-website
   • Path: src/data/ctaBannerConfig.ts

2. Edit the heading or description:

   heading: 'New CTA headline',
   description: 'Updated supporting sentence.',

3. Save and preview the change on any page that uses the banner.

Notes

• The secondary button is disabled in the component markup. Re-enable it if needed.
• Keep CTA headlines short to avoid wrapping on mobile screens.

Related components

• Partnership - Partnership call-to-action section
• BannerTriennialGathering - Event announcement banner
• EventHeaderSection - Event hero with CTA buttons