revamp teams page

[elyashium]

[Feature Request] Build and Populate Team Page

Description

This issue is for the creation of a new "Team" page to showcase our members and leads. The page should feature a clean, professional layout with profile cards for each member. Initially, all data (images, names, roles, links) will be hardcoded. This allows for rapid UI development and testing before backend integration is complete.

Objectives

• Create a Visually Engaging Layout: Design and build a grid or similar layout to display team member profiles.
• Develop a Reusable Profile Card Component: Each card should be well-structured and contain essential information about a team member.
• Ensure Responsiveness: The page and its components must be fully responsive and look great on all devices, from mobile to desktop.

---

Page Requirements

1. Overall Page Layout

• The page should have a clear title, such as "Our Team" or "Meet the Team."
• Member profiles should be organized in a grid layout that adjusts gracefully to different screen sizes.
• Consider having separate sections for "Leads" and "Members" if applicable.

2. Profile Card Component

Each profile card must contain the following elements:

• Profile Image: A clear, professional-looking photo of the team member.
  • Initial Implementation: Use hardcoded image paths. Images should be stored locally in the project's assets folder (e.g., /public/images/team/).
• Member Name: The full name of the team member.
• Role/Title: Their position or role within the team (e.g., "Project Lead," "Frontend Developer").
• Quick Links: An icon-based section for social and contact links. Each icon should be a clickable link opening in a new tab.
  • LinkedIn profile
  • GitHub profile
  • Email (using a mailto: link)

Implementation Notes

• Static Data: Create a local data file (e.g., a JSON file or a JavaScript array of objects) to store the hardcoded information for each team member. This will make it easier to transition to a database later.
• Styling: Ensure the design is clean, professional, and consistent with the rest of the website's visual identity.
• Placeholder Images: Use uniform placeholders if actual member photos are not yet available.