HowWeHelp

The HowWeHelp component presents FiNAN’s three primary advocacy areas in a 3-column card grid. Each card includes an icon, short description, and link for readers to explore a focus area.

Overview

File: src/components/HowWeHelp.astro Data Config: Hardcoded in component (no external data file) Used On: Homepage (active)

This component is ideal for:

Highlighting FiNAN’s core advocacy areas
Providing a quick overview of support services
Linking to detailed guidance pages

Props

This component has no props. All content is embedded in src/components/HowWeHelp.astro.

Component Structure

The component contains a centered header and three card blocks. Each card includes an icon, heading, description, and text link with an arrow icon.

<section class="bg-gray-50 py-16 md:py-24">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mb-16 text-center">
      <h2 class="mb-6 text-3xl font-bold text-gray-900 md:text-5xl">
        Our Advocacy
      </h2>
      <p class="mx-auto max-w-4xl text-lg leading-relaxed text-gray-700">
        FiNAN supports Filipino nurses in the Nordics through guidance,
        advocacy, and community building.
      </p>
    </div>

    <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
      <!-- Card content -->
    </div>
  </div>
</section>

Usage

Import the component in your Astro page:

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

Render the component with no props:
```
<HowWeHelp />
```
Update content by editing the component file directly:
- Path: src/components/HowWeHelp.astro
- Update card titles, descriptions, and links inline

Card Content

1. Licensing Guidance

Icon: /assets/icons/placeholder-icon.svg
Title: “Licensing Guidance”
Description: Guidance for obtaining or renewing Nordic RN licenses.
Link: # (placeholder)

2. Cultural Integration

Icon: /assets/icons/placeholder-icon.svg
Title: “Cultural Integration”
Description: Support for adapting to life and work in the Nordics.
Link: # (placeholder)

3. Policy Advocacy

Icon: /assets/icons/placeholder-icon.svg
Title: “Policy Advocacy”
Description: Collaboration with policymakers and healthcare institutions.
Link: # (placeholder)

Styling Details

Background: Light gray (bg-gray-50)
Padding: py-16 on mobile, py-24 on md+ screens
Layout: 3 columns on md+ screens, 1 column on mobile
Cards: White background with border and shadow on hover
Icons: Nested in a colored square with inverted placeholder SVG

For Content Editors

Updating Card Text

Open the component:
- Repository: finan-website
- Path: src/components/HowWeHelp.astro

Edit the card content:

<h3 class="mb-4 text-2xl font-bold text-gray-900">
  Licensing Guidance
</h3>
<p class="mb-6 leading-relaxed text-gray-700">
  Get step-by-step support for obtaining or renewing your Nordic RN license.
</p>

Update links by replacing href="#" with real destinations.

Notes

Keep descriptions roughly the same length for visual balance.
Replace placeholder-icon.svg with real icons once available.

Component Location

Referenced From:

src/pages/index.astro (homepage)

OurAdvocacy - Refined version with different card layout and icons
Pillars - Similar card grid for organizational values
Statistics - Metrics-focused grid section