Budget Basics uses modular approach to make it more re-usuable in future. This might repeat some styles in css but it's about finding that middle ground between DRY and re-usability principle.
The header component which accepts
desc- acts a title or a description.color- background color.searchPage- If the prop is passed, it will remove the search link from top.
This component can be used to show important news or updates on the site. It accepts data props which if empty, will prevent the component from rendering.
Individual card component for the homepage. It accepts chapter prop which includes all details required of the said chapter..
A Youtube carousel, currently build using iFrames and flexbox. It is optmized using react-lite-youtube-embed.
Footer component used throughout the site. A different file is availble in folder which includes all required in object format. It is imported and used in main component. This makes it easier to use a CMS to build the footer in future.
Sidebar component as seen in chapter page for Desktop users. It is made sticky usign position: sticky and uses GSAP to select current section reached based on scroll position.
Similar to Sidebar but for mobile devices.
Navigation on bottom of Chapter page to navigate to next or previous chapter. Accepts back and forward props requiring chapter number of previous and next chapter respectively.
SEO component to handle all of the meta data throughout the platform. If it is used, it will use default values for that page.
Basic Layout component. Read more here