Add learning material page in community

[moritzfelipe]

https://www.figma.com/file/0BRR6Ch2qbOEUT4zIdmmzg/Dacade-2?type=design&node-id=1376-4705&mode=design&t=bFFDklhiYsxlO4bC-0

The materials should be ordered by beginner to intermediate to advanced.

### Tasks
- [ ] https://github.com/dacadeorg/dacade-frontend-app/issues/1227

[moritzfelipe]

Araya is not ready yet 100% with the design but should be ready next Wednesday. Ask them once you come to the design implementation. You can start with the backend.

[techgirlonlinee]

Overview: We need to provide a section where the user could learn the materials if they don't have sufficient knowledge to complete the challenge. This needs to be easily accessible when the user is on the platform and wants to complete the certificate.

User journey: The user lands on the community page and are able to navigate to the "learning material" section below the "challenge" section. They are able to view the course (which are comprised of multiple learning modules) and also the modules which they can pick specifically of what they want to learn in particular. 1.1) If they click on the course card, they are taken to the course page. (this page currently exists) The user will be able to navigate through different modules here through the left side navigation or they can also scroll down and navigate through the "previous" and "next" buttons at the bottom of the page. 1.2) If they click on the module card, they are taken to the module page. This is a new page that doesn't exist yet and needs to be build. The module page is similar to the course page except that the left side navigation is different. The user will be able to navigate between relevant learning materials (including other courses or modules), or relevant challenges that they are able to complete. 2) In the case that the user is in the challenge page, they will only be able to see the learning modules (and not the course). When they click on the module card, it goes to the flow of 1.2

Goals: User to easily understand and navigate through to the learning materials. That means that the module components that exists need to look the same everywhere. They also need to look similar to the different types of cards including the challenge cards, hackathon cards, and also the course cards. Make sure you re-use components, spacings, paddings, fonts, pills, lines, for those elements. Type and spacing system have changed according to the new design system to refer to the design in this ticket to apply to the components.

Requirements:

• course cards expands the full width of the row everywhere. note: pay attention to the max-width of the content text
• module cards are divided into half of the width of the row. this visually indicates to the user that the modules are smaller than the course
• course and module cards are distinguished by different symbols but use the same brand primary color of their respective community
• course cards shows how many modules are the course while module card shows which other courses the module appears in

Reference: Community page in step 1 https://www.figma.com/file/0BRR6Ch2qbOEUT4zIdmmzg/Dacade-2?type=design&node-id=2011%3A13256&mode=design&t=vAsu1J3FSneZyCHc-1

Module page in step 1.2 https://www.figma.com/file/0BRR6Ch2qbOEUT4zIdmmzg/Dacade-2?type=design&node-id=2011%3A13620&mode=design&t=vAsu1J3FSneZyCHc-1

Challenge page in step 2 https://www.figma.com/file/0BRR6Ch2qbOEUT4zIdmmzg/Dacade-2?type=design&node-id=2011%3A13441&mode=design&t=vAsu1J3FSneZyCHc-1