search

Women-Coding-Community / wcc-frontend

MIT License
2 stars 4 forks source link

Landing: Opportunities and Programmes: Section #9

Open stepsen89 opened 2 weeks ago

stepsen89 commented 2 weeks ago

Landing page contains opportunities and programmes section: containing title, description and a map over the tiles we want to display.

Icons can be mapped within FE application

Image

lilyndk commented 2 weeks ago

List of icons used in this design from Google's Material Symbols font icons library:

  1. Mentorship Material icon name/link: ‘diversity_2’
  2. Events Material icon name/link: ‘calendar_month’
  3. Book club Material icon name/link: ‘book_2’
  4. CV Material icon name/link: ‘work’
  5. Mock Interviews Material icon name/link: ‘group’
  6. Leetcode Material icon name/link: ‘code_blocks’
stepsen89 commented 1 week ago

Hi @lilyndk

We would need the icon name like diversity_2 (defined at the bottom of the icon description on Google Font) - but I believe that is defined in the backend

lilyndk commented 1 week ago

Hi @joanaBrit

I've added this 'yellow note' in Figma to note the mappings of elements to the MUI ‘styling color and typography variables’. If we use those variables, the styles should closely align with the Figma designs once we add update the theme colors and typography styles (which I’m still working on defining).

Image

lilyndk commented 1 week ago

We probably want to make the 'gradient background' style reusable, since it's also used on the 'Celebrate Her' page for example.

joanaBrit commented 1 week ago

Hi @lilyndk I made a component for the gradient background, making it reusable. I think the styling is done, but let's see if it's okay when you guys check it. Just missing the tests to make, I will study and write them.