US - category overview page

Value proposition

As a User I want to be able to choose from more than 4 categories In order to find events that exactly match my needs

[ ] These is a category overview page
[ ] by default, the 4 main categories and the number of events in it are displayed
[ ] clicking the text of a main category leads to the filtered overview page
[ ] clicking a button on the category reveals or hides the sub-categories as an accordeon with number of events shown
[ ] clicking a sub-category leads to a filtered overview page of the sub category
[ ] if there is no event, the sub-category is not shown
[ ] App design matches our design criteria

[x] Create new branch US_category-overview
[x] Create pages/categories/index.js
[ ] Create a CategoryAccordeon component
- [ ] it fetches the category data with the useData hook
- [ ] it maps over the main categories (filtered by isPartenCategory = ture) and renders a CategoryAccordeonCard Component
[ ] create CategoryAccordeonCard component
- [ ] it renders the categories name, the number of Events, and a button
- [ ] clicking the arrow button opens and closes the Accordeon with smoothly animated transitions
- [ ] the buttons rotate in a semicircle motion, pointing downwards when the accordion is closed and upwards when it is open
- [ ] render a list of CategoryAccordeonCard components mapping over the sub categories (filtering by "parentCategory"._id = category.parentCategory)
- [ ] the sub categories get the prop $subCategory to style them differently than the main categories cards
- [ ] clicking the button again closes the accordeon
[ ] Style new elements according our styling criteria