Landing: Opportunities and Programmes: Section

[stepsen89]

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

[lilyndk]

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]

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]

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).

[lilyndk]

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

[joanaBrit]

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.