Pillars Component

The Pillars component showcases FiNAN’s four foundational values: Humanity, Empowerment, Research, and Professional Development. It features a two-column header layout followed by a 4-column grid of interactive cards with icons.

Overview

File: src/components/Pillars.astro Data Config: src/data/pillarsConfig.ts Used On: Homepage (active)

This component is ideal for:

Communicating organizational values and mission pillars
Creating visual hierarchy for core principles
Providing interactive navigation to detailed value pages
Building trust through transparent mission statements

Props

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

Data Configuration

TypeScript Interface

interface PillarCard {
  title: string;       // Card heading
  description: string; // Card body text
  icon: string;        // SVG icon path
  href: string;        // Link destination
}

interface PillarsData {
  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: PillarCard[];  // Array of 4 pillars
}

Example Configuration

export const pillarsConfig: PillarsData = {
  section: {
    subtitle: 'Our Foundation',
    title: 'Four Pillars<br />of Commitment',
    description: 'FiNAN is built on four core pillars that guide our mission and values.',
    buttons: {
      primary: {
        text: 'Be a member',
        href: '/membership',
      },
      secondary: {
        text: 'Learn more about FiNAN',
        href: '/about',
      },
    },
  },
  cards: [
    {
      title: 'Humanity',
      description: 'Helping to achieve the Sustainable Development Goals (SDGs).',
      icon: '/assets/icons/pillars/pillars-humanity.svg',
      href: '#',
    },
    {
      title: 'Empowerment',
      description: 'Giving voice to Filipino Nurses living in the Nordic Region.',
      icon: '/assets/icons/pillars/pillars-empowerment.svg',
      href: '#',
    },
    {
      title: 'Research',
      description: 'Evidence-based practice in decision-making and policies.',
      icon: '/assets/icons/pillars/pillars-research.svg',
      href: '#',
    },
    {
      title: 'Professional Development',
      description: 'Professional Networking and Continuing Education',
      icon: '/assets/icons/pillars/pillars-professional-development.svg',
      href: '#',
    },
  ],
};

Usage

Import the component in your Astro page:

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

Add to page layout with no props:
```
<Pillars />
```
Update content by editing src/data/pillarsConfig.ts:
- Modify cards array to change pillar content
- Update button links and section text
- Ensure SVG icons exist in /public/assets/icons/pillars/

Visual Structure

┌─────────────────────────────────────────────────────────────┐
│  Subtitle                                                   │
│                                                             │
│  ┌──────────────┬─────────────────────────────────────┐   │
│  │ Title        │ Description                          │   │
│  │              │                                      │   │
│  │              │ [Primary Button] [Secondary Btn →]   │   │
│  └──────────────┴─────────────────────────────────────┘   │
│                                                             │
│  ┌──────┐  ┌──────┐  ┌──────┐  ┌──────┐                  │
│  │ 🔹   │  │ 🔹   │  │ 🔹   │  │ 🔹   │                  │
│  │      │  │      │  │      │  │      │                  │
│  │Title │  │Title │  │Title │  │Title │                  │
│  │Text..│  │Text..│  │Text..│  │Text..│                  │
│  └──────┘  └──────┘  └──────┘  └──────┘                  │
└─────────────────────────────────────────────────────────────┘

Styling Details

Background: Light gray (bg-gray-50)
Padding: Responsive vertical padding (16-24 on md+)
Card Layout: 4-column grid on large screens, 2-column on medium, 1-column on mobile
Cards: White background with border, hover effects (border color + shadow)
Icons: 8x8 sizing (h-8 w-8)
Interactive: Cards are <a> tags with full-card clickability
Hover State: Blue border and shadow on hover

Icon Requirements

Each pillar requires an SVG icon file located in:

public/
└── assets/
    └── icons/
        └── pillars/
            ├── pillars-humanity.svg
            ├── pillars-empowerment.svg
            ├── pillars-research.svg
            └── pillars-professional-development.svg

Icon Guidelines:

Format: SVG (scalable vector graphics)
Size: 32x32px or 64x64px
Style: Simple, single-color or two-tone
Color: Should work with light background

For Content Editors

Updating Pillar Content

To update pillar descriptions or titles:

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

Edit the cards array:

cards: [
  {
    title: 'Humanity',
    description: 'Updated description here',  // ← Modify this
    icon: '/assets/icons/pillars/pillars-humanity.svg',
    href: '#',
  },
  // ... other cards
]

Save and commit changes:

git add src/data/pillarsConfig.ts
git commit -m "docs: update pillar descriptions"
git push

Adding New Icons

If you need to update pillar icons:

Prepare your SVG icon:
- Export as SVG from design tool
- Optimize using SVGOMG
- Ensure dimensions are square (e.g., 32x32px)
Add to the project:
- Place file in public/assets/icons/pillars/
- Use kebab-case naming: pillars-your-pillar-name.svg

Update the config:

icon: '/assets/icons/pillars/pillars-your-pillar-name.svg',

Test the icon:

pnpm dev
# Visit http://localhost:4321 and verify icon displays

Common Updates

What to Update	Where in Config
Pillar title	`cards[n].title`
Pillar description	`cards[n].description`
Pillar link	`cards[n].href`
Pillar icon	`cards[n].icon`
Section heading	`section.title`
Button links	`section.buttons.primary.href`

Component Location

Referenced From:

src/pages/index.astro:28 (active on homepage)

Card Interaction

Each pillar card is a clickable link (<a> tag) with:

Default State: White background, gray border
Hover State: Blue border (border-blue-900), elevated shadow
Focus State: Browser default outline for keyboard navigation
Cursor: Pointer cursor on hover
Transition: Smooth transition on all properties

Design Patterns

Four-Column Layout

The component is optimized for exactly 4 cards:

Large screens (lg+): 4 columns
Medium screens (md): 2 columns × 2 rows
Mobile: 1 column × 4 rows

If you need a different number of pillars, consider:

Using a different component pattern
Adjusting grid columns in the component file

Title HTML Support

The title field supports HTML for line breaks:

title: 'Four Pillars<br />of Commitment',

This creates responsive line breaks for better visual hierarchy.

Link Destinations

Current pillar cards use href: '#' (no navigation). To make them functional:

Create dedicated pillar pages:

src/pages/pillars/humanity.astro
src/pages/pillars/empowerment.astro
src/pages/pillars/research.astro
src/pages/pillars/professional-development.astro

Update hrefs in config:

{
  title: 'Humanity',
  href: '/pillars/humanity',  // ← Update from '#'
  // ...
}

Accessibility

Semantic HTML with <section> wrapper
Heading hierarchy: <h2> for main title, <h3> for card titles
Descriptive link text within cards
Image alt text for icons: ${card.title} icon
Keyboard navigable (Tab key to move between cards)
Sufficient color contrast for text
Focus visible on interactive elements

Statistics - Similar layout with 3 cards instead of 4
OurAdvocacy - Similar card grid for advocacy areas
Partners - Similar grid layout pattern

Troubleshooting

Icons not displaying

Causes:

SVG file doesn’t exist at specified path
Incorrect file path in config
SVG file has errors or invalid markup

Solutions:

Verify file exists: ls public/assets/icons/pillars/
Check path starts with /assets/ (not /public/assets/)
Validate SVG using online validator
Check browser console for 404 errors

Cards not in 4-column layout

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

Build error: “Cannot find module ‘pillarsConfig’”

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

Card hover not working

Solution: Ensure cards are <a> tags (not <div>). Check that href attribute is present.

Performance

Zero JavaScript: Pure HTML/CSS component
Static data: Content embedded at build time
SVG icons: Small file size, scalable without quality loss
CSS: Minimal Tailwind utilities, tree-shaken in production
Hover effects: CSS-only transitions (hardware accelerated)

Best Practices

Content Writing

Keep titles short: 1-3 words maximum
Descriptions are concise: 1-2 sentences
Action-oriented language: Focus on impact and outcomes
Consistent length: All descriptions roughly same length
Clear value proposition: Immediately convey purpose

Visual Design

Maintain 4 pillars: Avoid adding/removing without redesigning layout
Consistent icon style: All icons should have similar visual weight
Icon meaning: Icons should visually represent the pillar concept
Color harmony: Icons should work with FiNAN’s color palette

Link Strategy

Meaningful destinations: Don’t use # in production
Consistent navigation: All cards should link somewhere
External links: Add target="_blank" rel="noopener" if linking externally
Track interactions: Consider adding analytics events

Future Enhancements

Potential improvements for this component:

Support for variable number of pillars (responsive grid)
Animated icons on hover
Expandable cards with more detail
Progress indicators or metrics per pillar
Video or image backgrounds for cards
Modal overlays instead of page navigation