Creating Pages

This guide walks you through the process of adding a new page to the FiNAN website. FiNAN uses Astro’s file-based routing system, making page creation straightforward.

1. Create the File

Pages are located in the src/pages directory. The file path directly determines the URL route.

src/pages/about.astro -> https://finan.eu.com/about
src/pages/events/2026.astro -> https://finan.eu.com/events/2026

To create a new page, create a new .astro file in the appropriate directory.

2. Copy the Template

Start by copying the standard page template. This ensures you have all the necessary imports and structure.

---
import Layout from '../layouts/Layout.astro';
import Navbar from '../components/Navbar.astro';
import Footer from '../components/Footer.astro';
import PageHeader from '../components/PageHeader.astro';

// Page configuration
const title = "Your Page Title";
const description = "A brief description for SEO purposes.";
---

<Layout title={title} description={description}>
  <main>
    <Navbar />

    <!-- Optional: Add a Hero Header -->
    <PageHeader
      title={title}
      description={description}
    />

    <!-- Page Content -->
    <section class="bg-white py-16">
      <div class="mx-auto max-w-4xl px-4 sm:px-6">
        <h2 class="text-3xl font-bold tracking-tight text-gray-900">
          Section Title
        </h2>
        <p class="mt-4 text-lg text-gray-600">
          Your content goes here.
        </p>
      </div>
    </section>

  </main>
  <Footer />
</Layout>

3. Customize Content

Typography

Use Tailwind CSS classes for consistent typography:

Headings: text-3xl font-bold tracking-tight text-gray-900 md:text-4xl
Body Text: text-lg text-gray-700 or text-gray-600 for lighter text
Spacing: mb-6 for paragraph spacing, mt-4 for element separation

Adding Components

Import and use existing components to build your page. Common components include:

<CTABanner /> - Call to action at the bottom of pages
<Committee /> - Display committee members (requires data setup)
<RegistrationSection /> - Membership registration form

4. Update Sitemap

The website generates a sitemap automatically using @astrojs/sitemap. However, creating a file automatically adds it to the build output. You do not need to manually register the page anywhere.

5. Verify the Page

Run the development server: npm run dev
Navigate to your new route (e.g., http://localhost:4321/your-new-page)
Check the following:
- Title: Is the browser tab showing the correct title?
- Responsiveness: Does it look good on mobile?
- SEO: Inspect the <head> to verify meta tags.

Dynamic Pages

For pages that share a structure but show different data (like the Country Representation pages), use Astro’s dynamic routing.

Create a file with brackets, e.g., src/pages/representation/[country].astro.
Export a getStaticPaths function to define which URLs should be generated.

export function getStaticPaths() {
  return [
    {params: {country: 'finland'}},
    {params: {country: 'sweden'}},
    // ...
  ];
}

const { country } = Astro.params;

See the creating components guide for more on building reusable UI elements.