Page Structure

This guide explains the standard structure of a page in the FiNAN website, including layout usage, components, and SEO configuration.

Page Anatomy

All pages in the FiNAN website follow a consistent structure powered by Astro. A typical page consists of:

Frontmatter: Imports and data fetching.
Layout Component: Wraps the entire content and handles the <head> section.
Main Content: Structural containers for the page body.
Standard Components: Navigation, header, and footer.

Standard Template

Here is the standard template for a new page:

---
// 1. Imports
import Layout from '../layouts/Layout.astro';
import Navbar from '../components/Navbar.astro';
import PageHeader from '../components/PageHeader.astro';
import Footer from '../components/Footer.astro';
import heroImage from '../assets/images/hero-image.webp';

// 2. Data/Props
const pageTitle = "Page Title";
const pageDesc = "Page description for SEO and header";
---

<!-- 3. Layout Wrapper -->
<Layout title={pageTitle} description={pageDesc}>
  <main>
    <!-- 4. Navigation -->
    <Navbar />

    <!-- 5. Page Header -->
    <PageHeader
      title={pageTitle}
      description={pageDesc}
      backgroundImage={heroImage}
      backgroundAlt="Descriptive alt text"
    />

    <!-- 6. Page Content Sections -->
    <section class="bg-white py-16">
      <div class="mx-auto max-w-4xl px-4 sm:px-6">
        <!-- Content goes here -->
      </div>
    </section>
  </main>

  <!-- 7. Footer -->
  <Footer />
</Layout>

Layout Component

The Layout component (src/layouts/Layout.astro) is the shell of every page. It is responsible for:

Global Styles: Importing ../styles/global.css.
SEO: Rendering <meta> tags and Open Graph data using astro-seo.
Fonts: Preloading and setting up Google Fonts (Open Sans).
Structured Data: Injecting JSON-LD schema.
View Transitions: Enabling smooth client-side routing.

Props

The layout accepts the following props to customize the page metadata:

Prop	Type	Default	Description
`title`	`string`	Site Title	The page title. It will be suffixed with `
`description`	`string`	Site Desc	The meta description for SEO.
`image`	`string`	Default OG Image	Path to the social sharing image.
`noindex`	`boolean`	`false`	If true, prevents search engines from indexing the page.

SEO Configuration

SEO is handled centrally in src/data/siteConfig.ts but can be customized per page.

Global Configuration

The siteConfig.ts file contains the default values for the entire site:

Basic SEO: Default title, description, and site URL.
Open Graph: Default social sharing images and settings.
Social Links: URLs for social media profiles.

Directorysrc/
- Directorydata/
  - siteConfig.ts

Page-Level SEO

You can override the global SEO settings by passing props to the Layout component.

<Layout
  title="Contact Us"
  description="Get in touch with the FiNAN team."
  image="/images/contact-hero.jpg"
>
  <!-- Page content -->
</Layout>

This will automatically update:

The <title> tag.
The <meta name="description"> tag.
Open Graph og:title, og:description, and og:image tags.
Twitter Card tags.

Common Layout Patterns

Width constraints

Most content pages use a constrained width container to ensure readability.

<div class="mx-auto max-w-4xl px-4 sm:px-6">
  <!-- Content limited to 4xl (approx 896px) -->
</div>

Vertical Spacing

Use py-16 (padding y-axis) for standard section spacing.

<section class="bg-white py-16">
  <!-- Section content -->
</section>