Skip to content
FiNAN Logo FiNAN Docs

Footer

The Footer component provides site-wide footer navigation, social media links, and organizational information.

Overview

Section titled “Overview”
  • Type: Layout Component
  • Category: Navigation
  • Complexity: Simple
  • File: src/components/Footer.astro

Features

Section titled “Features”
  • Organization Info - FiNAN logo and mission statement
  • Social Media Links - Dynamic links from configuration
  • Multi-Column Navigation - Representation and site links
  • Copyright Notice - Automatic year update
  • Responsive Grid - Adapts from 1 to 2 columns

Props

Section titled “Props”
// No props - uses imported configuration

This component doesn’t accept props. It uses data from:

  • src/data/socialMediaConfig.ts for social links

Usage

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


<Footer />
Section titled “Footer Structure”

Left Column

Section titled “Left Column”
  • FiNAN Logo (h-20 on mobile, h-24 on desktop)
  • Mission Statement - Brief description of organization
  • Social Media Section with links from config

Right Columns

Section titled “Right Columns”

  1. Representation Links

    • Kingdom of Denmark
    • Finland
    • Iceland
    • Norway
    • Sweden

  2. Site Navigation

    • About Us
    • Membership
    • Contact Us
    • FAQs
    • Privacy Policy

Bottom Section

Section titled “Bottom Section”
  • Copyright Notice - © 2026 FiNAN. All rights reserved.

Social Media Configuration

Section titled “Social Media Configuration”

Social links are imported from socialMediaConfig.ts:

src/data/socialMediaConfig.ts
export const socialMediaLinks = [
  {
    name: 'Facebook',
    url: 'https://facebook.com/finan',
    icon: '/assets/social/facebook.svg',
    alt: 'Facebook icon',
  },
  // ... more platforms
];
Section titled “Adding Social Media Links”

Styling

Section titled “Styling”

Layout

Section titled “Layout”
  • Grid: 1 column on mobile, 2 columns on large screens (lg:grid-cols-2)
  • Spacing: pt-12 pb-8 on mobile, pt-20 on desktop
  • Border: Top border with border-t border-gray-200

Colors

Section titled “Colors”
  • Background: White (bg-white)
  • Text: Gray-900 for headings, Gray-500 for links
  • Hover: Links darken to Gray-900 on hover

Typography

Section titled “Typography”
  • Headings: text-base font-semibold
  • Links: text-base font-normal
  • Description: text-base leading-6 font-normal

Implementation Details

Section titled “Implementation Details”

Dynamic Social Media Rendering

Section titled “Dynamic Social Media Rendering”
{socialMediaLinks.map((social) => (
  <li>
    <a href={social.url} class="flex items-center gap-3">
      <img src={social.icon} alt={social.alt} class="h-5 w-5" />
      <span>{social.name}</span>
    </a>
  </li>
))}
Section titled “Automatic Copyright Year”
---
const currentYear = new Date().getFullYear();
---


<p class="text-gray-500">
  © {currentYear} FiNAN. All rights reserved.
</p>

Common Modifications

Section titled “Common Modifications”
Section titled “Adding a Footer Link”

Add to the appropriate navigation column:

<li>
  <a
    href="/new-page"
    class="text-base font-normal text-gray-500 no-underline transition-colors hover:text-gray-900"
  >
    New Page
  </a>
</li>

Updating Organization Description

Section titled “Updating Organization Description”

Edit the paragraph in the left column:

<p class="max-w-md text-base leading-6 font-normal text-gray-900">
  Updated mission statement here.
</p>

Accessibility

Section titled “Accessibility”
  • Semantic HTML: Proper <footer>, <nav>, <ul> structure
  • Alt Text: Icons have descriptive alt attributes
  • Link Underlines: Removed visually but maintained focus states
  • Heading Hierarchy: Proper <h3> usage for sections

Dependencies

Section titled “Dependencies”
  • socialMediaConfig.ts - Social media links configuration
  • public/finan-logo.svg - Footer logo
  • public/assets/social/ - Social media icons

Used On

Section titled “Used On”
  • All pages - Included in base layout or directly in pages

Performance

Section titled “Performance”
  • Logo uses loading="eager" if above fold
  • Social icons load efficiently (small SVG files)
  • No JavaScript required - fully static
Section titled “Related Components”
  • Navbar - Companion header navigation

Source Code

Section titled “Source Code”

View the complete implementation:

https://github.com/poncardasm/finan-website/blob/main/src/components/Footer.astro
https://github.com/poncardasm/finan-website/blob/main/src/data/socialMediaConfig.ts