OurAdvocacy

The OurAdvocacy component (implemented as OurAdvocacy.astro but previously named HowWeHelp.astro) showcases FiNAN’s three primary service areas: Licensing Guidance, Cultural Integration, and Policy Advocacy. It features a centered header followed by a 3-column card grid.

Overview

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

This component is ideal for:

Communicating organizational service offerings
Highlighting core advocacy and support areas
Providing navigation to detailed resource pages
Building trust through transparent mission communication

Props

This component has no props - all content is hardcoded in the component file.

Component Structure

Unlike most FiNAN components, OurAdvocacy does not use an external data configuration file. Content is embedded directly in the component at src/components/OurAdvocacy.astro:8-85.

Hardcoded Content

<section class="bg-gray-50 py-16 md:py-24">
  <div class="mx-auto max-w-7xl px-6">
    <!-- Header -->
    <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>

    <!-- Cards Grid -->
    <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 OurAdvocacy from '../components/OurAdvocacy.astro';
---

Add to page layout with no props:
```
<OurAdvocacy />
```
Update content by editing the component file directly:
- Path: src/components/OurAdvocacy.astro
- Modify card titles, descriptions, and icons inline
- No external data file to manage

Visual Structure

┌─────────────────────────────────────────────────────────┐
│                   Our Advocacy                          │
│         FiNAN supports Filipino nurses...               │
│                                                         │
│  ┌────────────┐  ┌────────────┐  ┌────────────┐       │
│  │    🔹     │  │    🔹     │  │    🔹     │       │
│  │           │  │           │  │           │       │
│  │ Licensing │  │ Cultural  │  │  Policy   │       │
│  │ Guidance  │  │Integration│  │ Advocacy  │       │
│  │           │  │           │  │           │       │
│  │ Get step- │  │ Receive   │  │ We active-│       │
│  │ by-step...│  │ dedicated.│  │ ly collab.│       │
│  └────────────┘  └────────────┘  └────────────┘       │
└─────────────────────────────────────────────────────────┘

Card Content

1. Licensing Guidance

Icon: /assets/icons/advocacy_b-licensing-guidance.svg
Title: “Licensing Guidance”
Description: “Get step-by-step support for obtaining or renewing your Nordic RN license, tailored to each country’s specific requirements.”
Link: # (placeholder)

2. Cultural Integration

Icon: /assets/icons/advocacy_b-cultural-integration.svg
Title: “Cultural Integration”
Description: “Receive dedicated support to help you adapt and thrive in life across the Nordic region.”
Link: # (placeholder)

3. Policy Advocacy

Icon: /assets/icons/advocacy_b-policy.svg
Title: “Policy Advocacy”
Description: “We actively collaborate with government policymakers, hospitals, healthcare institutions, and universities to improve recognition of Filipino nurses’ qualifications.”
Link: # (placeholder)

Styling Details

Background: Light gray (bg-gray-50)
Padding: Responsive vertical padding (16-24 on md+)
Header: Centered text with max-width constraint
Card Layout: 3-column grid on medium+ screens, 1-column on mobile
Cards: White background with border, hover effects (blue border + shadow)
Icons: 8x8 sizing (h-8 w-8)
Interactive: Cards are <a> tags with full-card clickability

Icon Requirements

Each advocacy area requires an SVG icon:

public/
└── assets/
    └── icons/
        ├── advocacy_b-licensing-guidance.svg
        ├── advocacy_b-cultural-integration.svg
        └── advocacy_b-policy.svg

Icon Guidelines:

Format: SVG (scalable vector graphics)
Size: 32x32px or larger
Style: Simple, consistent across all three icons
Color: Should work on white background

For Content Editors

Updating Advocacy Content

Unlike other components, this one requires editing the component file directly:

Navigate to the component:
- Repository: finan-website
- Path: src/components/OurAdvocacy.astro

Find the card you want to edit (lines 21-82):

<a href="#" class="...">
  <img src="/assets/icons/advocacy_b-licensing-guidance.svg" alt="..." />
  <h3 class="...">Licensing Guidance</h3>
  <p class="...">
    Get step-by-step support...  <!-- ← Edit this text -->
  </p>
</a>

Update the content:
- Edit the <h3> tag for the title
- Edit the <p> tag for the description
- Change the href="#" to link to relevant pages

Save and test:

pnpm dev
# Visit http://localhost:4321 to preview changes

Commit changes:

git add src/components/OurAdvocacy.astro
git commit -m "docs: update advocacy descriptions"
git push

⚠️ Important Notes

Be careful with HTML structure: Don’t accidentally delete tags
Maintain consistent formatting: Keep description lengths similar
Test after editing: Always preview changes before committing
Consider creating a data file: For easier content management (see Refactoring below)

Component Location

Referenced From:

src/components/OurAdvocacy.astro:1-86 (component definition)
src/pages/index.astro:8,31 (imported and used on homepage)

Design Patterns

Three-Column Layout

The component is optimized for exactly 3 cards:

Large screens (md+): 3 columns
Mobile: 1 column × 3 rows

Centered Header

Unlike Pillars and Statistics (which use two-column headers), this component uses a centered header for visual variety on the homepage.

Link Destinations

Current cards use href="#" (no navigation). To make them functional:

Create dedicated advocacy pages:

src/pages/advocacy/licensing-guidance.astro
src/pages/advocacy/cultural-integration.astro
src/pages/advocacy/policy.astro

Update hrefs in component:

<a href="/advocacy/licensing-guidance" class="...">

Refactoring to Data Config

To align with FiNAN’s component pattern, consider extracting content to a data file:

Create data configuration file:

export interface AdvocacyCard {
  title: string;
  description: string;
  icon: string;
  href: string;
}

export interface AdvocacyData {
  section: {
    title: string;
    description: string;
  };
  cards: AdvocacyCard[];
}

export const advocacyConfig: AdvocacyData = {
  section: {
    title: 'Our Advocacy',
    description: 'FiNAN supports Filipino nurses in the Nordics...',
  },
  cards: [
    {
      title: 'Licensing Guidance',
      description: 'Get step-by-step support for obtaining...',
      icon: '/assets/icons/advocacy_b-licensing-guidance.svg',
      href: '#',
    },
    // ... more cards
  ],
};

Update component to use data:

---
import { advocacyConfig } from '../data/advocacyConfig';
---

<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>{advocacyConfig.section.title}</h2>
      <p>{advocacyConfig.section.description}</p>
    </div>

    <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
      {advocacyConfig.cards.map((card) => (
        <a href={card.href} class="...">
          <img src={card.icon} alt={`${card.title} icon`} />
          <h3>{card.title}</h3>
          <p>{card.description}</p>
        </a>
      ))}
    </div>
  </div>
</section>

Benefits of refactoring:
- Easier for non-technical editors to update content
- Type safety with TypeScript interfaces
- Consistent pattern with other components
- Separation of content from presentation

Accessibility

Semantic HTML with <section> wrapper
Heading hierarchy: <h2> for main title, <h3> for card titles
Centered text layout accessible to screen readers
Image alt text: ${cardTitle} icon
Keyboard navigable card links (Tab key)
Sufficient color contrast for all text
Focus visible on interactive elements

Pillars - Similar card grid with 4 items
Statistics - Similar layout with 3 cards
HowWeHelp - Previous name for this component

Troubleshooting

Icons not displaying

Solutions:

Verify files exist: ls public/assets/icons/advocacy_*.svg
Check paths start with /assets/ (not /public/assets/)
Validate SVG markup
Check browser console for 404 errors

Content changes not appearing

Solutions:

Clear dev server cache: Stop and restart pnpm dev
Hard refresh browser: Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows)
Check you’re editing the correct file: src/components/OurAdvocacy.astro

Build errors after editing

Solutions:

Verify all HTML tags are properly closed
Check for typos in class names
Ensure no special characters break strings
Run pnpm build to see specific error messages

Performance

Zero JavaScript: Pure HTML/CSS component
Static content: Embedded at build time
SVG icons: Small file size, scalable
CSS: Minimal Tailwind utilities
Hover effects: CSS-only transitions

Best Practices

Content Writing

Actionable titles: Start with verbs when possible
Clear descriptions: Explain the “what” and “why”
Consistent length: Keep all three descriptions similar length
Audience focus: Write from user’s perspective
Professional tone: Maintain organizational voice

Maintenance

Regular reviews: Update content quarterly
Accuracy: Ensure descriptions match actual services
Link maintenance: Update placeholder links to real pages
Icon updates: Keep visual style consistent with brand

Future Enhancements

Potential improvements:

Extract content to external data configuration file
Add real navigation links to detailed pages
Include contact CTAs within cards
Add success stories or testimonials
Support for expandable cards with more detail
Integration with service request forms
Analytics tracking on card clicks

OurAdvocacy

Overview

Props

Component Structure

Hardcoded Content

Usage

Visual Structure

Card Content

1. Licensing Guidance

2. Cultural Integration

3. Policy Advocacy

Styling Details

Icon Requirements

For Content Editors

Updating Advocacy Content

⚠️ Important Notes

Component Location

Design Patterns

Three-Column Layout

Centered Header

Link Destinations

Refactoring to Data Config

Accessibility

Related Components

Troubleshooting

Icons not displaying

Content changes not appearing

Build errors after editing

Performance

Best Practices

Content Writing

Maintenance

Future Enhancements