Implement main organism components for all sections

This commit implements all docs page section component including
required changes to other components.

>> Hero

The first section is the "hero" of the docs page that renders a
description about the page's purpose.

>> Contents Cards

The 2nd section is about Nord's documentation contents where each
category is represented as card rendered in a two-column grid layout.
Each card contains a topic icon, colorized with a accent color from
Nord's palettes and a short summary about the topic's links.

Currently this includes the "Getting Started" and "References" category.

>> Responsive Design

All sections following the "responsive design concept" (1) to adjust the
rendered content based on the available width and provide an optimal UX
on smaller viewports.

References:
  (1) #52

Associated epic: GH-63
GH-117

src/components/organisms/page/docs/DocsPage.jsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+/**
+ * A content wrapper component that applies page specific styles.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.8.0
+ */
+const DocsPage = styled.div`
+  font-family: ${({ theme }) => theme.typography.typefaces.straight};
+`;
+
+export default DocsPage;

src/components/organisms/page/docs/SectionContents/SectionContents.jsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+
+import { WaveFooter } from "atoms/core/vectors/divider";
+import Section, { Content } from "containers/core/Section";
+import { BookOpen, Zap } from "atoms/core/vectors/icons";
+import { ROUTE_DOCS } from "config/routes/mappings";
+import { topicsGettingStarted, topicsReferences } from "data/components/organisms/page/docs/SectionContents/topics";
+import { sectionIdFor } from "utils";
+import { colors } from "styles/theme";
+
+import { ContentsCard, Grid } from "./styled";
+
+const SECTION_ID = sectionIdFor(ROUTE_DOCS, 1);
+
+/**
+ * The component that represents the contents section of the docs page.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.8.0
+ */
+const SectionContents = () => (
+  <Section id={SECTION_ID} variant="tertiary">
+    <Content centered>
+      <Grid>
+        <ContentsCard
+          accentColor={colors.nord8}
+          logoComponent={Zap}
+          svgType="stroke"
+          title="Getting Started"
+          topics={topicsGettingStarted}
+        >
+          Get to know the color palettes, use the native swatches or start to integrate it in your own projects.
+        </ContentsCard>
+        <ContentsCard accentColor={colors.nord10} logoComponent={BookOpen} title="References" topics={topicsReferences}>
+          Learn about the design guideslines, detailed technical views and all port projects of Nord.
+        </ContentsCard>
+      </Grid>
+    </Content>
+    <WaveFooter />
+  </Section>
+);
+
+export default SectionContents;

src/components/organisms/page/docs/SectionContents/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+export { default } from "./SectionContents";

src/components/organisms/page/docs/SectionContents/styled/ContentsCard/ContentsCard.jsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+
+import { A, H3, P } from "atoms/core/HTMLElements";
+
+import {
+  ArrowIcon,
+  Card,
+  CardIcon as Icon,
+  CardItem as Topic,
+  CardItemContent as TopicContent,
+  CardItemIcon as TopicIcon,
+  CardItems as Topics,
+  CardItemTag as TopicTag,
+  CardItemTitle as TopicTitle
+} from "../../../shared";
+
+/**
+ * A card component that renders information about a docs category and its topics.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.8.0
+ */
+const ContentsCard = ({ accentColor, children, topics, logoComponent: SvgLogo, svgType, title, ...passProps }) => {
+  const renderedTopics = topics.map(({ url, title: topicTitle, iconComponent: SvgIcon, svgType: topicIconSvgType }) => (
+    <Topic key={topicTitle} as={url && A} href={url} inProgress={!url}>
+      <TopicContent>
+        <TopicIcon accentColor={accentColor} iconComponent={SvgIcon} svgType={topicIconSvgType} />
+        <TopicTitle color={accentColor} inProgress={!url}>
+          {topicTitle}
+        </TopicTitle>
+      </TopicContent>
+      {!url ? <TopicTag accentColor={accentColor}>In Progress</TopicTag> : <ArrowIcon />}
+    </Topic>
+  ));
+  return (
+    <Card {...passProps}>
+      <Icon accentColor={accentColor} iconComponent={SvgLogo} svgType={svgType} />
+      <div>
+        <H3>{title}</H3>
+        <P>{children}</P>
+      </div>
+      <Topics>{renderedTopics}</Topics>
+    </Card>
+  );
+};
+
+export default ContentsCard;

src/components/organisms/page/docs/SectionContents/styled/Grid.jsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+/**
+ * A configurable and responsive grid for card components.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.8.0
+ */
+const Grid = styled.div`
+  display: grid;
+  grid-gap: 4em;
+
+  ${({ theme }) => theme.media.tabletLandscape`
+    grid-template-columns: repeat(2, 1fr);
+    ${({ isExtended }) => isExtended && "grid-template-rows: repeat(2, auto)"};
+  `};
+`;
+
+export default Grid;

src/components/organisms/page/docs/SectionContents/styled/index.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import ContentsCard from "./ContentsCard/ContentsCard";
+import Grid from "./Grid";
+
+export { ContentsCard, Grid };

src/components/organisms/page/docs/SectionHero/SectionHero.jsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+
+import Section, { Content } from "containers/core/Section";
+import { ROUTE_DOCS } from "config/routes/mappings";
+import { sectionIdFor } from "utils";
+
+import { Headline, Subline } from "./styled";
+
+const SECTION_ID = sectionIdFor(ROUTE_DOCS, 0);
+
+/**
+ * The component that represents the hero section of the docs page.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+const SectionHero = () => (
+  <Section id={SECTION_ID} variant="tertiary">
+    <Content centered>
+      <Headline>Documentation</Headline>
+      <Subline>
+        Read about major concepts, dive into technical details, adapt design guidelines and learn all about Nord&#x27;s
+        port projects.
+      </Subline>
+    </Content>
+  </Section>
+);
+
+export default SectionHero;

src/components/organisms/page/docs/SectionLanding/index.js → src/components/organisms/page/docs/SectionHero/index.js

@@ -7,4 +7,4 @@
  * License:    MIT
  */
 
-export { default } from "./SectionLanding";
+export { default } from "./SectionHero";

src/components/organisms/page/docs/SectionHero/styled/Headline.jsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+import { H1 } from "atoms/core/HTMLElements";
+import { media, motion, ms } from "styles/theme";
+
+/**
+ * A component that represents the large headline of the hero section.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.8.0
+ */
+const Headline = styled(H1)`
+  font-weight: bold;
+  margin-bottom: 0.8em;
+  font-size: ${ms(6)};
+  transition: color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+  text-align: center;
+
+  ${media.tabletLandscape`
+    font-size: ${ms(7)};
+  `};
+
+  ${media.desktop`
+    font-size: ${ms(8)};
+  `};
+`;
+
+export default Headline;

src/components/organisms/page/docs/SectionHero/styled/Subline.jsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+import { P } from "atoms/core/HTMLElements";
+import { motion, ms } from "styles/theme";
+
+/**
+ * A component that represents the subline of the hero section's headline.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.8.0
+ */
+const Subline = styled(P)`
+  font-size: ${ms(2)};
+  transition: color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+  max-width: 65%;
+  margin: 0 auto;
+  text-align: center;
+`;
+
+export default Subline;

src/components/organisms/page/docs/SectionHero/styled/index.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import Headline from "./Headline";
+import Subline from "./Subline";
+
+export { Headline, Subline };

src/components/organisms/page/docs/index.js

@@ -14,7 +14,8 @@
  * @since 0.3.0
  */
 
-import SectionLanding from "./SectionLanding";
+import DocsPage from "./DocsPage";
+import SectionContents from "./SectionContents";
+import SectionHero from "./SectionHero";
 
-/* eslint-disable-next-line import/prefer-default-export */
-export { SectionLanding };
+export { DocsPage, SectionContents, SectionHero };