This issue documents the implementation of all landing page sections including required dependencies, components and illustrations.
Hero
The first section will be the “hero” of the landing page that renders a short project description and the animated SVG component Arctic Landscape. The animation will be triggered through the React Waypoint project.
Color Palettes
The 2nd and 3rd sections will be about Nord's color palettes and they will provide information about the modularity and contrast. All palettes will be visualized through a new "color palette card" component that'll consist of the actual color as small, rounded boxes and the associated color code as label using the hexadecimal format.
“Nordify”
The 4th section will present Nord's port projects which can be used to “nordify” the favorite apps and platforms of the users. It'll consist of the text content as well as a new illustration that might also be animated later on using a 3D parallax effect that renders based on the current mouse position in the section.
Color Swatches
The 5th section will be about Nord's “native” color swatches. It will consist of the same elements like the 4th section, but will render a new non-animated illustration showing a application UI with Nord loaded as color palette.
Syntax Highlighting
The 6th section will be all about Nord's features to highlight code. Next to the text content and summary it will also render a new and animated illustration.
Community
The 7th and also last section will present details about Nord's communities. It will render the animated Arctic Ocean Fractal component and a short summary about how to join and being part of the Nord community.
Responsive Design
All sections will follow the responsive design concept to adjust the rendered content based on the available width and provide an optimal UX on smaller viewports.
This issue documents the implementation of all landing page sections including required dependencies, components and illustrations.
Hero
The first section will be the “hero” of the landing page that renders a short project description and the animated SVG component Arctic Landscape. The animation will be triggered through the React Waypoint project.
Color Palettes
The 2nd and 3rd sections will be about Nord's color palettes and they will provide information about the modularity and contrast. All palettes will be visualized through a new "color palette card" component that'll consist of the actual color as small, rounded boxes and the associated color code as label using the hexadecimal format.
“Nordify”
The 4th section will present Nord's port projects which can be used to “nordify” the favorite apps and platforms of the users. It'll consist of the text content as well as a new illustration that might also be animated later on using a 3D parallax effect that renders based on the current mouse position in the section.
Color Swatches
The 5th section will be about Nord's “native” color swatches. It will consist of the same elements like the 4th section, but will render a new non-animated illustration showing a application UI with Nord loaded as color palette.
Syntax Highlighting
The 6th section will be all about Nord's features to highlight code. Next to the text content and summary it will also render a new and animated illustration.
Community
The 7th and also last section will present details about Nord's communities. It will render the animated Arctic Ocean Fractal component and a short summary about how to join and being part of the Nord community.
Responsive Design
All sections will follow the responsive design concept to adjust the rendered content based on the available width and provide an optimal UX on smaller viewports.
Tasks
<pre>and<code>elements.