Statistics

The Statistics component showcases FiNAN’s organizational impact through large, visually prominent statistics cards. It features a two-column header with title, description, and action buttons, followed by a grid of statistical metrics.

Overview

File: src/components/Statistics.astro
Data Config: src/data/statisticsConfig.ts
Used On: Homepage (currently commented out)

This component is ideal for:

Displaying key organizational metrics (members, success rates, funds raised)
Building credibility through quantifiable impact
Encouraging membership conversion with prominent CTAs
Creating visual hierarchy with large numeric values

Props

This component has no props - all content is configured through the data file.

Data Configuration

TypeScript Interface

interface StatisticCard {
  value: string; // Large display value (e.g., "500+", "99%", "€15K")
  title: string; // Card heading
  description: string; // Supporting text
}

interface StatisticsData {
  section: {
    subtitle: string; // Small text above title
    title: string; // Main heading (supports HTML)
    description: string; // Paragraph text
    buttons: {
      primary: {
        text: string;
        href: string;
      };
      secondary: {
        text: string;
        href: string;
      };
    };
  };
  cards: StatisticCard[]; // Array of 3 statistics
}

Example Configuration

export const statisticsConfig: StatisticsData = {
  section: {
    subtitle: 'Our Impact in Numbers',
    title: 'Empowering Filipino<br />Nurses Across the Nordics',
    description:
      "From building a strong professional community to guiding nurses through licensing and integration, FiNAN's work is reflected in the numbers.",
    buttons: {
      primary: {
        text: 'Be a Member',
        href: 'https://example.com/membership-form',
      },
      secondary: {
        text: 'About FiNAN',
        href: 'https://example.com/',
      },
    },
  },
  cards: [
    {
      value: '500+',
      title: 'Registered Members',
      description: "Across 5 Nordic countries, united under FiNAN's mission.",
    },
    {
      value: '99%',
      title: 'Licensing Success Rate',
      description:
        "Members who obtained Nordic RN licenses with FiNAN's guidance.",
    },
    {
      value: '€15K',
      title: 'Funds Raised',
      description: 'For humanitarian projects and community support.',
    },
  ],
};

Usage

Import the component in your Astro page:

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

Add to page layout with no props:
```
<Statistics />
```
Update statistics by editing src/data/statisticsConfig.ts:
- Modify cards array to update values
- Edit section text and button links as needed
- Run pnpm build to validate changes

Styling Details

Background: Light gray (bg-gray-50)
Padding: Responsive vertical padding (16-24 on md+)
Card Layout: 3-column grid on medium screens and up
Value Typography: Extra-large bold text (5xl/6xl)
Cards: White background with subtle border
Buttons:
- Primary: Blue background with hover effect
- Secondary: Text-only with arrow icon

For Content Editors

Updating Statistics

To update the displayed statistics:

Navigate to the data file:
- Repository: finan-website
- Path: src/data/statisticsConfig.ts

Edit the cards array:

cards: [
  {
    value: '750+', // ← Update this number
    title: 'Registered Members',
    description: "Across 5 Nordic countries, united under FiNAN's mission.",
  },
  // ... other cards
];

Save and commit changes:

git add src/data/statisticsConfig.ts
git commit -m "chore: update membership statistics to 750+"
git push

Best Practices

Keep values concise: Use abbreviations (K for thousands, M for millions)
Use + or ~: Indicate approximate or growing numbers (e.g., “500+”)
Consistent formatting: Use similar patterns for all three cards
Update regularly: Keep statistics current (review quarterly)
Descriptive titles: Make the metric clear without reading description

Common Updates

What to Update	Where in Config
Member count	`cards[0].value`
Success rate	`cards[1].value`
Funds raised	`cards[2].value`
Button links	`section.buttons.primary.href`
Section text	`section.description`

Component Location

Referenced From:

src/pages/index.astro:27 (currently commented out)

To enable this component on the homepage, uncomment line 27 in index.astro:

<!-- <Statistics /> -->  ← Remove comment markers

Design Patterns

Number Formatting

The component supports various numeric formats:

Exact numbers: "350", "1,250"
Ranges: "500+", "1000+"
Percentages: "99%", "95%"
Currency: "€15K", "$50K", "£100K"
Abbreviations: "2.5K", "1.2M"

Title HTML Support

The title field supports HTML for line breaks:

title: 'Empowering Filipino<br />Nurses Across the Nordics',

This creates responsive line breaks for better visual hierarchy.

Accessibility

Semantic HTML structure with <section> wrapper
Heading hierarchy preserved with <h2> and <h3> tags
Descriptive button text (avoid generic “Learn More”)
Sufficient color contrast for all text
Focus states on interactive elements

Pillars - Similar layout with 4 cards instead of 3
CTABanner - Alternative call-to-action component
Partners - Similar grid layout pattern

Troubleshooting

Statistics not appearing on homepage

Solution: Uncomment the component in src/pages/index.astro:27:

<!-- <Statistics /> -->
<Statistics />

Build error: “Cannot find module ‘statisticsConfig’”

Solution: Ensure the data file exists at src/data/statisticsConfig.ts and exports statisticsConfig.

Cards not displaying in grid

Solution: Verify you have exactly 3 cards in the cards array. The layout is optimized for 3 items.

Performance

Zero JavaScript: Pure HTML/CSS component
Static data: Content embedded at build time
Responsive images: N/A (no images used)
CSS: Minimal Tailwind utilities, tree-shaken in production

Future Enhancements

Potential improvements for this component:

Add animated counting effect for numbers
Support for more than 3 statistics (responsive grid)
Icon support for each statistic card
Link individual cards to detailed reports
Add trend indicators (↑ up, ↓ down)