[✨] SurPathHub: Next.js migration

mkubdev commented 1 year ago

Related Issue

Closes: #125

Added the complete design from Figma.

I created SurPathLayout.js which is a wrapper added into _app.js! This provides a layout to get the custom navbar and the footer on every page:

You should use flex to get content growing/fitting inside.
Every section is a component, but there is still optimization for the index.js page. (Like better folder structure is possible)
CSS Framework is Tailwind, added SurPath color into tailwind.config.json
Almost fully responsive

The Footer component still needs work for mobile 👍🏻
Using JSON Hardcoded Mocked structure to display elements from components, so it should be easier to implement data fetching.

What sort of change have you made:

[x] Bug fix (non-breaking change which fixes an issue)
[x] New feature (non-breaking change which adds functionality)
[x] Code style update (formatting, local variables)
[x] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[x] This change requires a documentation update

[x] My code follows the guidelines of this project.
[x] I have performed a self-review of my own code.
[x] I have commented on my code, particularly wherever it was hard to understand.
[x] I have made corresponding changes to the documentation.
[x] My changes generate no new warnings.
[x] I have added tests that prove my fix is effective or that my feature works.
[x] Any dependent changes have been merged and published in downstream modules.