Skip to content

refactor(navigation): update site architecture and routing according to Figma #669

Description

@Rutjake

🛠 Refactor Description

Restructure the website's information architecture and navigation according to the updated Figma design. This refactor updates the site routes, navigation menus, and page hierarchies to match the new color-coded structure (Orange: Homepage, Purple: Navigation, Blue: Sub-pages, Yellow/Green: Detailed Sub-pages).

Currently, the existing pages and their corresponding routes are defined in the main branch. These existing page components will serve as the initial base and will be mapped to the new architecture.

Responsiveness Requirement: The new navigation structure and routing must be fully functional and optimized for both desktop and mobile views.


🔍 Reason for Refactor

To improve the site's User Experience (UX) and content hierarchy. Obsolete navigation items (such as Yhteisö, Hahmot, and Tiimi) are being replaced with clearer naming and new specialized flow pages (e.g., Opetuspaketti and character development tracks for Defenssisoturit).


🗂 Affected Areas

1. Navigation Bar (Purple) & Replacements

  • Ota yhteyttä (Replaces: Yhteisö -> Tule mukaan)
  • Mikä on PRG? (Replaces: Tiimi -> PRG)
  • Alt-zonen historia (Replaces: Tiimi -> Meistä)
  • Kehittäjät ja suunnittelijat (Replaces: Tiimi -> Tiimi)

2. Peli / Game (Blue & Yellow/Green)

  • Tutustu peliin (Replaces: Pelaa)
  • Defenssisoturit (Replaces: Hahmot)
    • (Under revision) Character development pages: Tunnottomat, Hämääjät, Tottelijat, Peilaajat, Torjujat, Sulautujat, Ällistäjät
  • Klaanit
    • (Under revision) Clan view: Peli -> Klaanit -> Minun Klaani
  • Balanssiäänestys & Tulostaulukko

3. Galleria / Gallery (Blue)

  • Sarjakuva
  • Pelihahmojen kehityskaari (Replaces: Galleria -> Kuvat -> Hahmot)
  • Pelimusiikki (Replaces: Galleria -> Kokoelmat -> Musiikki)
  • (In progress / Not yet existing): Sielunlinnan huonekalut, Muut pelin ikonit

🚀 Proposed Changes

  • Routing & Navigation: Update header/navigation components and URL routes to reflect the new structure.
  • Reusing Current Components: Re-map the existing page components currently in the main branch to the updated navigation hierarchy.
  • Under Revision Pages: Update existing templates (character development, clan view, PRG pages) to fit the new requirements.
  • In Progress Pages: Set up placeholders/stub components for completely new flows (e.g., 7-step teaching package) until full designs/components are ready.

🛑 Current Code Issues (if applicable)

  • Navigation structure and routes currently in main reflect the old architecture (Tiimi, Pelaa, Yhteisö).
  • Missing multi-step routing for character development paths and the new teaching package.

Expected Outcome

  • Navigation fully aligned with the updated Figma design.
  • Existing pages from main re-routed to their corresponding positions in the new structure.
  • Clear routing setup and placeholders for upcoming content flows.

📋 Additional Information

📷Preview:
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    refactorFor code refactoring

    Type

    No type

    Projects

    Status
    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions