Skip to content
FiNAN Logo FiNAN Docs

HeroHeader

The HeroHeader component provides a visually striking hero section specifically designed for the homepage, featuring a large background image, mission statement, and action buttons.

Overview

Section titled “Overview”
  • Type: Layout Component
  • Category: Hero Section
  • Complexity: Moderate
  • File: src/components/HeroHeader.astro

Features

Section titled “Features”
  • Integrated Navbar - Includes navigation at the top
  • Full-Width Background - Optimized hero image with overlay
  • Dual CTAs - Primary and secondary action buttons
  • Configuration-Driven - Content from heroConfig.ts
  • Responsive Design - Mobile-first approach with centered text

Props

Section titled “Props”
// No props - uses heroConfig.ts for content

This component doesn’t accept props. Content is managed in:

src/data/heroConfig.ts

Usage

Section titled “Usage”
---
import HeroHeader from '@/components/HeroHeader.astro';
---


<HeroHeader />

Configuration

Section titled “Configuration”

Edit src/data/heroConfig.ts to modify hero content:

src/data/heroConfig.ts
export const heroConfig = {
  title: 'Empowering Filipino Nurses in the Nordics',
  description: 'FiNAN connects, supports, and advocates for Filipino nurses across Denmark, Finland, Iceland, Norway, and Sweden.',
  buttons: {
    primary: {
      text: 'Learn More',
      url: '/about',
    },
    secondary: {
      text: 'Contact Us',
      url: '/contact',
    },
  },
};

Hero Structure

Section titled “Hero Structure”

Components

Section titled “Components”
  1. Navbar - Integrated navigation at top
  2. Background Image - Full-width hero image with overlay
  3. Content Container
    • Title (H1)
    • Description paragraph
    • Two action buttons (primary and secondary)

Image Optimization

Section titled “Image Optimization”

The hero image uses Astro’s Image component with:

  • Format: WebP for optimal compression
  • Quality: 55 for balance of size/quality
  • Loading: Eager (loading="eager")
  • Priority: High (fetchpriority="high")
  • Dimensions: 1920x1080
<Image
  src={heroImage}
  alt="Filipino nurses working together in Nordic healthcare"
  loading="eager"
  fetchpriority="high"
  format="webp"
  quality={55}
  width={1920}
  height={1080}
/>

Styling

Section titled “Styling”

Layout

Section titled “Layout”
  • Padding: py-20 on mobile, py-32 on desktop
  • Overlay: Dark gray overlay (bg-gray-900/70) for text readability
  • Text Alignment: Left on mobile, center on desktop

Typography

Section titled “Typography”
  • Title: 4xl on mobile, 5xl on desktop, bold
  • Description: lg on mobile, xl on desktop
  • Color: White text for contrast

Buttons

Section titled “Buttons”
  • Primary: White background, gray text, solid appearance
  • Secondary: Transparent with white border, white text
  • Hover States: Both buttons have smooth transitions
  • Layout: Stacked on mobile, horizontal on desktop

Responsive Behavior

Section titled “Responsive Behavior”

Mobile (below 640px)

Section titled “Mobile (below 640px)”
  • Text left-aligned
  • Buttons stacked vertically, full width
  • Smaller text sizes
  • Less vertical padding

Desktop (640px and above)

Section titled “Desktop (640px and above)”
  • Text centered
  • Buttons side-by-side, auto width
  • Larger text sizes
  • More vertical padding

Accessibility

Section titled “Accessibility”
  • Heading Hierarchy: Uses H1 for main title
  • Alt Text: Descriptive alt for hero image
  • Button Labels: Clear, action-oriented text
  • Keyboard Navigation: All interactive elements are focusable
  • Color Contrast: Overlay ensures WCAG AA compliance

Performance Optimization

Section titled “Performance Optimization”

  1. Image Loading

    • Uses loading="eager" for above-fold content
    • WebP format for smaller file sizes
    • Explicit dimensions prevent layout shift

  2. Critical Rendering

    • Hero is above the fold, loads immediately
    • Font loading optimized
    • No render-blocking JavaScript

Common Modifications

Section titled “Common Modifications”

Changing Hero Image

Section titled “Changing Hero Image”

Replace the import in the component:

---
import heroImage from '../assets/images/new-hero.webp';
---
Section titled “Updating Button Text/Links”

Edit src/data/heroConfig.ts:

buttons: {
  primary: {
    text: 'Join Us',
    url: '/membership',
  },
  secondary: {
    text: 'Learn More',
    url: '/about',
  },
}

Adjusting Overlay Darkness

Section titled “Adjusting Overlay Darkness”

Modify the overlay div’s class:

<!-- Lighter overlay -->
<div class="absolute inset-0 bg-gray-900/50"></div>


<!-- Darker overlay -->
<div class="absolute inset-0 bg-gray-900/80"></div>

Dependencies

Section titled “Dependencies”
  • Navbar.astro - Integrated navigation
  • heroConfig.ts - Content configuration
  • hero-image.webp - Background image asset

Used On

Section titled “Used On”
  • Homepage (src/pages/index.astro) only
Section titled “Related Components”

Source Code

Section titled “Source Code”

View the complete implementation:

https://github.com/poncardasm/finan-website/blob/main/src/components/HeroHeader.astro
https://github.com/poncardasm/finan-website/blob/main/src/data/heroConfig.ts
https://github.com/poncardasm/finan-website/blob/main/src/assets/images/hero-image.webp