RepresentationContactSection

The RepresentationContactSection component displays a comprehensive grid of regional contact information for FiNAN representation across the Nordic region. Each region card includes flag icons, descriptive text, and email contact details.

Component Type

Presentation Component - Static display component with hardcoded regional contact information.

Usage

Used on the contact page to provide detailed regional contact information for Filipino nurses seeking support in their specific Nordic country or region.

Used on:

• src/pages/contact.astro - Main contact page

Props

This component does not accept any props. All regional data is defined within the component’s frontmatter.

Code Example

Basic Usage

---
import RepresentationContactSection from '@/components/RepresentationContactSection.astro';
---

<RepresentationContactSection />

No configuration needed - all content is built into the component.

Component Structure

The component consists of a 2-column grid (responsive to single column on mobile) containing regional contact cards.

Each Region Card Contains

1. Flag Icons - Visual identifiers for countries/territories in the region
2. Region Title - Name of the region (e.g., “Kingdom of Denmark”)
3. Description - Helpful context about services and support available
4. Contact Emails - Region-specific email addresses

Regions Covered

The component displays contact information for 5 Nordic regions:

1. Kingdom of Denmark

Includes: Denmark, Faroe Islands, Greenland

Services: Licensing support, cultural integration, professional development

Contacts:

• Denmark: denmark@finan.eu.com
• Faroe Islands: faroeislands@finan.eu.com
• Greenland: greenland@finan.eu.com

2. Finland & Åland

Includes: Finland, Åland Islands

Services: Valvira registration, language support, networking events

Contacts:

• finland@finan.eu.com

3. Iceland

Includes: Iceland

Services: Healthcare licensing, relocation support, community integration

Contacts:

• iceland@finan.eu.com

4. Norway

Includes: Norway

Services: Nurse authorization, career opportunities, community events

Contacts:

• norway@finan.eu.com

5. Sweden

Includes: Sweden

Services: Socialstyrelsen registration, Swedish language resources, professional networking

Contacts:

• sweden@finan.eu.com

Email Addresses

The email addresses shown above are examples from the component. In production documentation, always use placeholder emails like example@finan.eu.com to avoid exposing real contact information.

Data Structure

The component defines regions as an array in the frontmatter:

const regions = [
  {
    title: string;                    // Region name
    flags: Array<{                    // Flag icons to display
      src: string;                    // Path to flag SVG
      alt: string;                    // Accessible alt text
    }>;
    description: string;              // Services and support description
    contacts: Array<{                 // Email contacts
      label: string;                  // Optional label (empty for single contact)
      email: string;                  // Email address
    }>;
  }
];

Visual Design

Layout Grid

• Desktop (≥ 768px): 2-column grid with gap
• Mobile (< 768px): Single column, stacked cards

Card Styling

Each card features:

• White background with subtle gray border
• Rounded corners for modern appearance
• Padding for comfortable reading
• Flag icons displayed at top (40px height)
• Responsive spacing between elements

Typography Hierarchy

Region Title:    text-2xl font-bold text-gray-900
Description:     text-gray-700 (regular weight)
Email Labels:    font-medium text-gray-900
Email Links:     text-blue-600 underline, hover:text-blue-800

Responsive Behavior

The component adapts to different screen sizes:

• Mobile (< 640px): Single column, 1rem padding
• Tablet (640px - 768px): Single column, 1.5rem padding
• Desktop (≥ 768px): 2-column grid, max-width 896px

Container constraints:

• Maximum width: max-w-4xl (896px)
• Centered with auto margins
• Horizontal padding for mobile safety

Accessibility

• Semantic HTML: Uses proper heading hierarchy (<h3> for region titles)
• Alt text: All flag images have descriptive alt attributes
• Email links: Properly formatted mailto: links
• Keyboard navigation: All links are keyboard-accessible
• Color contrast: Text colors meet WCAG AA standards
• Data attributes: Email links include data-email for potential JavaScript enhancement

Asset Dependencies

Flag Icons Required

The component requires SVG flag files in public/assets/flags/:

• flag_denmark.svg
• flag_faroe_islands.svg
• flag_greenland.svg
• flag_finland.svg
• flag_aland_islands.svg
• flag_iceland.svg
• flag_norway.svg
• flag_sweden.svg

Note

Flag icons are 40px height (h-10) with auto width to maintain aspect ratio. Ensure SVG files have proper viewBox attributes for correct scaling.

Common Use Cases

Contact Page

---
import Layout from '@/layouts/Layout.astro';
import PageHeader from '@/components/PageHeader.astro';
import RepresentationContactSection from '@/components/RepresentationContactSection.astro';
---

<Layout title="Contact Us - FiNAN">
  <PageHeader
    heading="Get in Touch"
    description="Connect with your regional representation"
  />
  <RepresentationContactSection />
</Layout>

Representation Overview Page

---
import RepresentationContactSection from '@/components/RepresentationContactSection.astro';
---

<section class="py-16">
  <div class="container">
    <h2>Regional Contacts</h2>
    <RepresentationContactSection />
  </div>
</section>

Content Management

Updating Regional Information

To update contact information, edit the regions array in the component’s frontmatter:

---
const regions = [
  {
    title: 'Finland & Åland',
    flags: [
      { src: '/assets/flags/flag_finland.svg', alt: 'Finland flag' },
      { src: '/assets/flags/flag_aland_islands.svg', alt: 'Åland Islands flag' },
    ],
    description: 'Updated description here...',
    contacts: [
      { label: '', email: 'new-email@finan.eu.com' }
    ],
  },
  // ... other regions
];
---

Adding a New Region

To add a new Nordic region:

1. Add flag SVG to public/assets/flags/
2. Add region object to the regions array:

{
  title: 'New Region Name',
  flags: [
    { src: '/assets/flags/flag_new.svg', alt: 'New flag' }
  ],
  description: 'Services and support description for this region.',
  contacts: [
    { label: 'Sub-region', email: 'region@finan.eu.com' }
  ],
}

3. Order matters: Regions display in array order

Managing Multiple Contacts

For regions with multiple contacts (like Kingdom of Denmark):

contacts: [
  { label: 'Denmark', email: 'denmark@finan.eu.com' },
  { label: 'Faroe Islands', email: 'faroeislands@finan.eu.com' },
  { label: 'Greenland', email: 'greenland@finan.eu.com' },
]

For regions with single contacts (like Iceland):

contacts: [
  { label: '', email: 'iceland@finan.eu.com' }  // Empty label
]

Email Link Enhancement

The component includes data-email attributes on email links:

<a
  href="mailto:denmark@finan.eu.com"
  data-email="denmark@finan.eu.com"
>
  denmark@finan.eu.com
</a>

This enables:

• Analytics tracking - Track email link clicks
• Spam protection - Potential JavaScript obfuscation
• Custom handlers - Override default mailto behavior

Tip

Consider adding email obfuscation JavaScript to protect against email scraping bots while maintaining accessibility.

Related Components

• NordicRepresentation - Quick navigation links to representation pages
• Committee - Displays committee members for specific countries
• PageHeader - Often used above this component on contact pages

Implementation Notes

Why Hardcoded Data?

The component uses hardcoded regional data instead of external configuration because:

1. Stable information - Regional structure changes infrequently
2. Type safety - Direct TypeScript typing without schemas
3. Performance - No external data fetching needed
4. Simplicity - Single source of truth in component file

Alternative Approaches

For projects requiring frequent updates, consider:

1. External data file: Move regions array to src/data/regions.ts
2. CMS integration: Fetch from Ghost CMS or headless CMS
3. Props-based: Accept regions as a prop for flexibility

Design Decisions

Grid Layout (2 Columns)

The 2-column grid provides:

• Balanced visual weight - Prevents overwhelming single column
• Efficient space usage - Fits more information above fold
• Scanability - Easy to compare regions side-by-side

Flag Icon Placement

Flags at the top of cards:

• Visual hierarchy - Immediately identifies region
• Cultural recognition - Users recognize flags quickly
• Consistent branding - Matches NordicRepresentation component

Description Text

Each region includes contextual descriptions to:

• Set expectations - Users know what support is available
• Build trust - Shows FiNAN understands regional differences
• Guide users - Helps them choose correct contact

Source Code

File location: src/components/RepresentationContactSection.astro

Dependencies:

• SVG flag files in public/assets/flags/
• No external data dependencies

Troubleshooting

Missing flag icons

Issue: Flag images don’t display or show broken icons

Solutions:

1. Verify all flag SVG files exist in public/assets/flags/
2. Check file paths match exactly (case-sensitive)
3. Ensure SVG files have proper viewBox attributes
4. Open SVG files directly in browser to test validity

Email links not working

Issue: Clicking email links does nothing or shows error

Solutions:

1. Ensure user has default email client configured
2. Check mailto: syntax is correct
3. Verify email addresses have no typos or extra spaces
4. Test with different email clients (Gmail, Outlook, Apple Mail)

Layout broken on mobile

Issue: Cards overlap or have spacing issues on mobile

Solutions:

1. Verify Tailwind CSS is loaded properly
2. Check that responsive classes aren’t overridden
3. Test on real devices (not just browser dev tools)
4. Inspect computed styles in browser DevTools

Wrong email addresses displayed

Issue: Outdated or incorrect email addresses showing

Solution: Update the regions array in the component frontmatter. Remember, this component has no external data source - all updates must be made directly in the file.

Security Considerations

Caution

Email Address Exposure: This component displays email addresses in plain text, making them vulnerable to web scraping and spam. Consider implementing:

1. Email obfuscation - JavaScript-based encoding
2. Contact forms - Instead of direct mailto links
3. CAPTCHA protection - For contact form submissions
4. Spam filtering - On email server side

Future Enhancements

Potential improvements to consider:

1. Contact form integration - Replace mailto with form modal
2. Dynamic data loading - Fetch from CMS or config file
3. Localization support - Multi-language descriptions
4. Social media links - Add WhatsApp, LinkedIn, etc.
5. Office hours display - Show availability by timezone