Skip to content

Update PRG page to match newest Figma design #660

Description

@Rutjake

Enhancement Description

The goal of this issue is to update the "Mikä on PRG?" (What is PRG?) page to match the latest Figma designs. This includes updating the board members section, the company contact information, and implementing a new navigation component for official documents.


🌟 Benefits of the Enhancement

  • User Experience: The website will look more professional, visually cohesive, and provide a seamless, consistent user experience across all device sizes.
  • Project Impact: Modernizes the UI layout, improves code maintainability through modular components, and ensures document navigation is intuitive.

🛠️ Proposed Implementation

  • Technical Details:

  • Create a new interactive navigation component (tab/button layout) to switch between the Action Plan (toimintasuunnitelma), Action Report (toimintakertomus), and Association Rules (yhdistyksen säännöt).

  • 💡 Note: You can look at the existing NavigateTeachers component as a reference/model for how to implement this navigation structure.

  • Update the layout grid for the board members (PRG hallitus) and company contact details (Yritystiedot).

  • Ensure full responsiveness so that the entire page layout, profile cards, navigation component, and footer text scale and function flawlessly on all devices (desktop, tablet, and mobile).

  • Ensure that i18n (internationalization) remains intact and functions correctly for all new and updated elements.

  • Implementation Plan:

    • Update the layout and styling for the board members (PRG hallitus) section to match Figma.
    • Build and integrate the new navigation component for switching between official association documents.
    • Update the layout and styling for the company contact info (Yritystiedot) section at the bottom.
    • Apply responsive design to ensure all elements (especially the member cards and document navigation tabs) are optimized for mobile and smaller screens.
    • Verify that all text content and labels are correctly linked to i18n keys.

📎 Additional Information

⚠️ Note on Mobile Layout: A dedicated mobile design is not available in Figma. The developer should use their own best judgment to implement the mobile layout, keeping it consistent with how other parts of the website scale down from desktop to mobile views.

🔗Figma Designs

📷 Preview:

Image

Metadata

Metadata

Assignees

Labels

enhancementFor improvements to existing features

Type

No type
No fields configured for issues without a type.

Projects

Status
No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions