diff --git a/src/assets/images/decorations/cloud-abstract-flat-2.svg b/src/assets/images/decorations/cloud-abstract-flat-2.svg new file mode 100644 index 00000000..3c310303 --- /dev/null +++ b/src/assets/images/decorations/cloud-abstract-flat-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/decorations/cloud-abstract-flat-3.svg b/src/assets/images/decorations/cloud-abstract-flat-3.svg new file mode 100644 index 00000000..92492102 --- /dev/null +++ b/src/assets/images/decorations/cloud-abstract-flat-3.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/decorations/cloud-abstract-flat.svg b/src/assets/images/decorations/cloud-abstract-flat.svg new file mode 100644 index 00000000..2ce63b4f --- /dev/null +++ b/src/assets/images/decorations/cloud-abstract-flat.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/decorations/map-path-marker.svg b/src/assets/images/decorations/map-path-marker.svg new file mode 100644 index 00000000..66d63cce --- /dev/null +++ b/src/assets/images/decorations/map-path-marker.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/images/decorations/nordic-backpack.svg b/src/assets/images/decorations/nordic-backpack.svg new file mode 100644 index 00000000..26eb7b9d --- /dev/null +++ b/src/assets/images/decorations/nordic-backpack.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/decorations/nordic-compass.svg b/src/assets/images/decorations/nordic-compass.svg new file mode 100644 index 00000000..09719a2e --- /dev/null +++ b/src/assets/images/decorations/nordic-compass.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/images/decorations/vector-design-collage.svg b/src/assets/images/decorations/vector-design-collage.svg new file mode 100644 index 00000000..6ad5852a --- /dev/null +++ b/src/assets/images/decorations/vector-design-collage.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/images/decorations/vector-design-sketch-tools.svg b/src/assets/images/decorations/vector-design-sketch-tools.svg new file mode 100644 index 00000000..894388d3 --- /dev/null +++ b/src/assets/images/decorations/vector-design-sketch-tools.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/atoms/core/vectors/decorations/GleamingFrostWind.jsx b/src/components/atoms/core/vectors/decorations/GleamingFrostWind.jsx new file mode 100644 index 00000000..860890b0 --- /dev/null +++ b/src/components/atoms/core/vectors/decorations/GleamingFrostWind.jsx @@ -0,0 +1,60 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import { rgba } from "polished"; + +import { nord } from "styles/theme"; + +const GLEAM_GRADIENT_ID = "frost-wind-gleam-gradient"; + +/** + * An SVG vector component that renders an animated, gleaming frost wind. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @version 0.6.0 + */ +const GleamingFrostWind = props => ( + + + + + + + + + + + + + + + +); + +export default GleamingFrostWind; diff --git a/src/components/organisms/page/landing/SectionCommunity/SectionCommunity.jsx b/src/components/organisms/page/landing/SectionCommunity/SectionCommunity.jsx new file mode 100644 index 00000000..7759fd7d --- /dev/null +++ b/src/components/organisms/page/landing/SectionCommunity/SectionCommunity.jsx @@ -0,0 +1,68 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React, { PureComponent } from "react"; +import Waypoint from "react-waypoint"; +import ArcticOceanFractal, { POSE_HIDE, POSE_SHOW } from "arctic-ocean-fractal"; + +import { WaveFooter } from "atoms/core/vectors/divider"; +import Button from "atoms/core/Button"; +import Section, { Content } from "containers/core/Section"; +import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/landing/FeatureDuo"; +import { ROUTE_COMMUNITY, ROUTE_ROOT } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; + +const SECTION_ID = sectionIdFor(ROUTE_ROOT, 6); + +/** + * The component that represents the community section of the landing page. + * It handles the state for the rendered "Arctic Ocean Fractal" SVG animation component that is triggered through a + * waypoint with a bottom offset. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +export default class SectionCommunity extends PureComponent { + state = { + arcticOceanFractalPose: POSE_HIDE + }; + + handleArcticOceanFractalWaypointEnter = () => this.setState({ arcticOceanFractalPose: POSE_SHOW }); + + render() { + const { arcticOceanFractalPose } = this.state; + + return ( +
+ + + + Never swim alone in the big arctic ocean. + + Join the community for news and updates around Nord and chat with many other developers & designers, + submit your ideas or ask for help. + + + + + + + + + + + + +
+ ); + } +} diff --git a/src/components/organisms/page/landing/SectionCommunity/index.js b/src/components/organisms/page/landing/SectionCommunity/index.js new file mode 100644 index 00000000..c098b61e --- /dev/null +++ b/src/components/organisms/page/landing/SectionCommunity/index.js @@ -0,0 +1,10 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +export { default } from "./SectionCommunity"; diff --git a/src/components/organisms/page/landing/SectionHero/SectionHero.jsx b/src/components/organisms/page/landing/SectionHero/SectionHero.jsx index 7f19c61f..abb12285 100644 --- a/src/components/organisms/page/landing/SectionHero/SectionHero.jsx +++ b/src/components/organisms/page/landing/SectionHero/SectionHero.jsx @@ -7,32 +7,75 @@ * License: MIT */ -import React from "react"; +import React, { PureComponent } from "react"; +import Waypoint from "react-waypoint"; +import ArcticLandscape, { POSE_DRAW, POSE_ERASE } from "arctic-landscape"; -import { WaveFooter } from "atoms/core/vectors/divider"; -import Section, { Content } from "containers/core/Section"; -import EmptyState from "molecules/core/EmptyState"; +import { Content } from "containers/core/Section"; +import Button from "atoms/core/Button"; +import { H1 } from "atoms/core/HTMLElements"; +import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/landing/FeatureDuo"; +import { ROUTE_DOCS, ROUTE_ROOT } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; -import { emptyStateIllustrationStyles } from "../../shared/styles"; +import { Cloud1, Cloud2, Cloud3, DecorationCanvas, WaveDivider } from "./styled"; +import { Section } from "../shared"; + +const SECTION_ID = sectionIdFor(ROUTE_ROOT, 0); /** * The component that represents the hero section of the landing page. + * It handles the state for the rendered "Arctic Landscape" SVG animation component that is triggered through a + * waypoint. * * @author Arctic Ice Studio * @author Sven Greb * @since 0.3.0 */ -const SectionHero = () => ( -
- - - - -
-); - -export default SectionHero; +export default class SectionHero extends PureComponent { + state = { + arcticLandscapePose: POSE_ERASE + }; + + handleArcticLandscapeWaypointEnter = () => this.setState({ arcticLandscapePose: POSE_DRAW }); + + render() { + const { arcticLandscapePose } = this.state; + + return ( +
+ + + + + + + + + + + + + + An arctic, north-bluish color palette. + + + Created for the clean and uncluttered design pattern to achieve a optimal focus and readability for code + syntax highlighting and UI components. + + + + + + + + + +
+ ); + } +} diff --git a/src/components/organisms/page/landing/SectionHero/styled/Cloud1.jsx b/src/components/organisms/page/landing/SectionHero/styled/Cloud1.jsx new file mode 100644 index 00000000..b2d307f4 --- /dev/null +++ b/src/components/organisms/page/landing/SectionHero/styled/Cloud1.jsx @@ -0,0 +1,31 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { ReactComponent as CloudAbstractFlat } from "assets/images/decorations/cloud-abstract-flat.svg"; + +import { decorationBaseStyles, decorationSectionHeroFillColor } from "../../shared/styles"; + +/** + * A vector decoration component that renders a flat abstract cloud. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const Cloud1 = styled(CloudAbstractFlat)` + ${decorationBaseStyles}; + fill: ${decorationSectionHeroFillColor}; + width: 9.5em; + top: 8%; + left: 8%; +`; + +export default Cloud1; diff --git a/src/components/organisms/page/landing/SectionHero/styled/Cloud2.jsx b/src/components/organisms/page/landing/SectionHero/styled/Cloud2.jsx new file mode 100644 index 00000000..9e997151 --- /dev/null +++ b/src/components/organisms/page/landing/SectionHero/styled/Cloud2.jsx @@ -0,0 +1,31 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { ReactComponent as CloudAbstractFlat2 } from "assets/images/decorations/cloud-abstract-flat-2.svg"; + +import { decorationBaseStyles, decorationSectionHeroFillColor } from "../../shared/styles"; + +/** + * A vector decoration component that renders a flat abstract cloud. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const Cloud2 = styled(CloudAbstractFlat2)` + ${decorationBaseStyles}; + fill: ${decorationSectionHeroFillColor}; + width: 9.5em; + top: 34%; + left: 3%; +`; + +export default Cloud2; diff --git a/src/components/organisms/page/landing/SectionHero/styled/Cloud3.jsx b/src/components/organisms/page/landing/SectionHero/styled/Cloud3.jsx new file mode 100644 index 00000000..f2dd9669 --- /dev/null +++ b/src/components/organisms/page/landing/SectionHero/styled/Cloud3.jsx @@ -0,0 +1,31 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { ReactComponent as CloudAbstractFlat3 } from "assets/images/decorations/cloud-abstract-flat-3.svg"; + +import { decorationBaseStyles, decorationSectionHeroFillColor } from "../../shared/styles"; + +/** + * A vector decoration component that renders a flat abstract cloud. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const Cloud3 = styled(CloudAbstractFlat3)` + ${decorationBaseStyles}; + fill: ${decorationSectionHeroFillColor}; + width: 9.5em; + left: 38%; + bottom: 24%; +`; + +export default Cloud3; diff --git a/src/components/organisms/page/landing/SectionHero/styled/DecorationCanvas.jsx b/src/components/organisms/page/landing/SectionHero/styled/DecorationCanvas.jsx new file mode 100644 index 00000000..eff658e4 --- /dev/null +++ b/src/components/organisms/page/landing/SectionHero/styled/DecorationCanvas.jsx @@ -0,0 +1,29 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import BaseDecorationCanvas from "../../shared/DecorationCanvas"; + +/** + * A container for absolute positioned decoration components. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const DecorationCanvas = styled(BaseDecorationCanvas)` + display: none; + + ${({ theme }) => theme.media.desktopPlus` + display: unset; + `}; +`; + +export default DecorationCanvas; diff --git a/src/components/organisms/page/landing/SectionHero/styled/WaveDivider.jsx b/src/components/organisms/page/landing/SectionHero/styled/WaveDivider.jsx new file mode 100644 index 00000000..2177a52d --- /dev/null +++ b/src/components/organisms/page/landing/SectionHero/styled/WaveDivider.jsx @@ -0,0 +1,32 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { WaveSmooth } from "atoms/core/vectors/divider"; +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const fillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.secondary[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.secondary[MODE_DARK_NIGHT_FROST] +}); + +/** + * A "smooth" vector wave to render a visual differentiation to the next section. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const WaveDivider = styled(WaveSmooth)` + fill: ${fillColor}; + transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +export default WaveDivider; diff --git a/src/components/organisms/page/landing/SectionHero/styled/index.js b/src/components/organisms/page/landing/SectionHero/styled/index.js new file mode 100644 index 00000000..149f6457 --- /dev/null +++ b/src/components/organisms/page/landing/SectionHero/styled/index.js @@ -0,0 +1,23 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +/** + * @file Provides shared components for the landing page orgaism components. + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ + +import Cloud1 from "./Cloud1"; +import Cloud2 from "./Cloud2"; +import Cloud3 from "./Cloud3"; +import DecorationCanvas from "./DecorationCanvas"; +import WaveDivider from "./WaveDivider"; + +export { Cloud1, Cloud2, Cloud3, DecorationCanvas, WaveDivider }; diff --git a/src/components/organisms/page/landing/SectionNativeColorSwatch/SectionNativeColorSwatch.jsx b/src/components/organisms/page/landing/SectionNativeColorSwatch/SectionNativeColorSwatch.jsx new file mode 100644 index 00000000..d967e605 --- /dev/null +++ b/src/components/organisms/page/landing/SectionNativeColorSwatch/SectionNativeColorSwatch.jsx @@ -0,0 +1,61 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; + +import Button from "atoms/core/Button"; +import { Content } from "containers/core/Section"; +import { ReactComponent as ColorSwatches } from "assets/images/illustrations/color-swatches.svg"; +import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/landing/FeatureDuo"; +import { ROUTE_DOCS, ROUTE_ROOT } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; + +import { Section } from "../shared"; +import { darkenedThemeModeBackgroundbackgroundColor } from "../shared/styles"; +import { DecorationCanvas, SketchTools, VectorDesignCollage, WaveDivider } from "./styled"; + +const SECTION_ID = sectionIdFor(ROUTE_ROOT, 4); + +/** + * The component that represents the native color swatch section of the landing page. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const SectionNativeColorSwatch = () => ( +
+ + + + + + + + All colors right in your toolbox. + + Nord is available in various native color swatch formats to be easily installed into your favorite + applications. + + + + + + + + + + + +
+); + +export default SectionNativeColorSwatch; diff --git a/src/components/organisms/page/landing/SectionNativeColorSwatch/index.js b/src/components/organisms/page/landing/SectionNativeColorSwatch/index.js new file mode 100644 index 00000000..7760cfba --- /dev/null +++ b/src/components/organisms/page/landing/SectionNativeColorSwatch/index.js @@ -0,0 +1,10 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +export { default } from "./SectionNativeColorSwatch"; diff --git a/src/components/organisms/page/landing/SectionNativeColorSwatch/styled/DecorationCanvas.jsx b/src/components/organisms/page/landing/SectionNativeColorSwatch/styled/DecorationCanvas.jsx new file mode 100644 index 00000000..d81e3fb0 --- /dev/null +++ b/src/components/organisms/page/landing/SectionNativeColorSwatch/styled/DecorationCanvas.jsx @@ -0,0 +1,29 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import BaseDecorationCanvas from "../../shared/DecorationCanvas"; + +/** + * A container for absolute positioned decoration components. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const DecorationCanvas = styled(BaseDecorationCanvas)` + display: none; + + ${({ theme }) => theme.media.tabletLandscape` + display: unset; + `}; +`; + +export default DecorationCanvas; diff --git a/src/components/organisms/page/landing/SectionNativeColorSwatch/styled/SketchTools.jsx b/src/components/organisms/page/landing/SectionNativeColorSwatch/styled/SketchTools.jsx new file mode 100644 index 00000000..4c6c5339 --- /dev/null +++ b/src/components/organisms/page/landing/SectionNativeColorSwatch/styled/SketchTools.jsx @@ -0,0 +1,39 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { ReactComponent as VectorDesignSketchToolsSvg } from "assets/images/decorations/vector-design-sketch-tools.svg"; + +import { decorationBaseStyles, decorationSectionColorSwatchFillColor } from "../../shared/styles"; + +/** + * A vector decoration component that renders vector design sketch tools. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const SketchTools = styled(VectorDesignSketchToolsSvg)` + ${decorationBaseStyles}; + fill: ${decorationSectionColorSwatchFillColor}; + width: 4em; + top: 11%; + left: 6%; + + ${({ theme }) => theme.media.desktop` + width: 5em; + `}; + + ${({ theme }) => theme.media.desktopPlus` + width: 6em; + `}; +`; + +export default SketchTools; diff --git a/src/components/organisms/page/landing/SectionNativeColorSwatch/styled/VectorDesignCollage.jsx b/src/components/organisms/page/landing/SectionNativeColorSwatch/styled/VectorDesignCollage.jsx new file mode 100644 index 00000000..5c12dc3d --- /dev/null +++ b/src/components/organisms/page/landing/SectionNativeColorSwatch/styled/VectorDesignCollage.jsx @@ -0,0 +1,41 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { ReactComponent as VectorDesignCollageSvg } from "assets/images/decorations/vector-design-collage.svg"; + +import { decorationBaseStyles, decorationSectionColorSwatchFillColor } from "../../shared/styles"; + +/** + * A vector decoration component that renders a vector design collage. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const VectorDesignCollage = styled(VectorDesignCollageSvg)` + ${decorationBaseStyles}; + fill: ${decorationSectionColorSwatchFillColor}; + width: 14em; + bottom: 12%; + left: 20%; + + ${({ theme }) => theme.media.desktop` + width: 16em; + bottom: 15%; + `}; + + ${({ theme }) => theme.media.desktopPlus` + width: 18em; + left: 25%; + `}; +`; + +export default VectorDesignCollage; diff --git a/src/components/organisms/page/landing/SectionNativeColorSwatch/styled/WaveDivider.jsx b/src/components/organisms/page/landing/SectionNativeColorSwatch/styled/WaveDivider.jsx new file mode 100644 index 00000000..88bc1518 --- /dev/null +++ b/src/components/organisms/page/landing/SectionNativeColorSwatch/styled/WaveDivider.jsx @@ -0,0 +1,32 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { WaveSmooth2 } from "atoms/core/vectors/divider"; +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const fillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.secondary[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.secondary[MODE_DARK_NIGHT_FROST] +}); + +/** + * A "smooth" vector wave to render a visual differentiation to the next section. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const WaveDivider = styled(WaveSmooth2)` + fill: ${fillColor}; + transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +export default WaveDivider; diff --git a/src/components/organisms/page/landing/SectionNativeColorSwatch/styled/index.js b/src/components/organisms/page/landing/SectionNativeColorSwatch/styled/index.js new file mode 100644 index 00000000..f6a25332 --- /dev/null +++ b/src/components/organisms/page/landing/SectionNativeColorSwatch/styled/index.js @@ -0,0 +1,15 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import DecorationCanvas from "./DecorationCanvas"; +import SketchTools from "./SketchTools"; +import VectorDesignCollage from "./VectorDesignCollage"; +import WaveDivider from "./WaveDivider"; + +export { DecorationCanvas, SketchTools, VectorDesignCollage, WaveDivider }; diff --git a/src/components/organisms/page/landing/SectionPalettesContrast/SectionPalettesContrast.jsx b/src/components/organisms/page/landing/SectionPalettesContrast/SectionPalettesContrast.jsx new file mode 100644 index 00000000..5175f9a7 --- /dev/null +++ b/src/components/organisms/page/landing/SectionPalettesContrast/SectionPalettesContrast.jsx @@ -0,0 +1,80 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import { ThemeProvider } from "styled-components"; + +import { Content } from "containers/core/Section"; +import Button from "atoms/core/Button"; +import ColorPaletteCard from "atoms/core/ColorPaletteCard"; +import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/landing/FeatureDuo"; +import { ROUTE_DOCS, ROUTE_ROOT } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; +import { + colors, + palettes, + themedMode, + THEME_KEY_MODE, + MODE_BRIGHT_SNOW_FLURRY, + MODE_DARK_NIGHT_FROST +} from "styles/theme"; + +import { ColorPaletteWrapper, DecorationCanvas, Section } from "../shared"; +import { GleamingFrostWind, WaveDivider } from "./styled"; + +const SECTION_ID = sectionIdFor(ROUTE_ROOT, 2); + +const pinnedThemeMode = { [THEME_KEY_MODE]: MODE_DARK_NIGHT_FROST }; + +const pinnedThemeBackgroundColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.base[MODE_DARK_NIGHT_FROST], + [MODE_DARK_NIGHT_FROST]: colors.background.base[MODE_DARK_NIGHT_FROST] +}); + +/** + * The component that represents the color palette contrast section of the landing page. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const SectionPalettesContrast = () => ( +
+ + + + + + + + + + + + + + Beautiful and harmonic color contrasts. + + Inspired by the beauty of the arctic, the colors reflect the cold, yet harmonious world of ice and the + colorfulness of the Aurora Borealis. + + + + + + + + + +
+); + +export default SectionPalettesContrast; diff --git a/src/components/organisms/page/landing/SectionPalettesContrast/index.js b/src/components/organisms/page/landing/SectionPalettesContrast/index.js new file mode 100644 index 00000000..c789570c --- /dev/null +++ b/src/components/organisms/page/landing/SectionPalettesContrast/index.js @@ -0,0 +1,10 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +export { default } from "./SectionPalettesContrast"; diff --git a/src/components/organisms/page/landing/SectionPalettesContrast/styled/GleamingFrostWind.jsx b/src/components/organisms/page/landing/SectionPalettesContrast/styled/GleamingFrostWind.jsx new file mode 100644 index 00000000..9477ed32 --- /dev/null +++ b/src/components/organisms/page/landing/SectionPalettesContrast/styled/GleamingFrostWind.jsx @@ -0,0 +1,60 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import CoreGleamingFrostWind from "atoms/core/vectors/decorations/GleamingFrostWind"; + +import { decorationBaseStyles } from "../../shared/styles"; + +/** + * An SVG vector component that renders an animated, gleaming frost wind. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @version 0.6.0 + */ +const GleamingFrostWind = styled(CoreGleamingFrostWind)` + ${decorationBaseStyles}; + width: 3em; + top: 25.5em; + left: -1em; + + ${({ theme }) => theme.media.phoneLandscape` + width: 5em; + top: 18em; + left: -2em; + `}; + + ${({ theme }) => theme.media.tabletPortrait` + width: 7em; + top: 14em; + left: -2.5em; + `}; + + ${({ theme }) => theme.media.tabletLandscape` + width: 9em; + top: -4.5em; + left: -3.5em; + `}; + + ${({ theme }) => theme.media.desktop` + width: 12em; + top: -6.5em; + left: -4.5em; + `}; + + ${({ theme }) => theme.media.desktopPlus` + width: 15em; + top: -8.5em; + left: -6em; + `}; +`; + +export default GleamingFrostWind; diff --git a/src/components/organisms/page/landing/SectionPalettesContrast/styled/WaveDivider.jsx b/src/components/organisms/page/landing/SectionPalettesContrast/styled/WaveDivider.jsx new file mode 100644 index 00000000..6cd3c709 --- /dev/null +++ b/src/components/organisms/page/landing/SectionPalettesContrast/styled/WaveDivider.jsx @@ -0,0 +1,34 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { WaveSmoothFlat } from "atoms/core/vectors/divider"; +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +import { darkenedSectionBackgroundColor } from "../../../shared/styles"; + +const fillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.primary[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: darkenedSectionBackgroundColor +}); + +/** + * A "smooth" and "flat" vector wave to render a visual differentiation to the next section. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const WaveDivider = styled(WaveSmoothFlat)` + fill: ${fillColor}; + transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +export default WaveDivider; diff --git a/src/components/organisms/page/landing/SectionPalettesContrast/styled/index.js b/src/components/organisms/page/landing/SectionPalettesContrast/styled/index.js new file mode 100644 index 00000000..1952317e --- /dev/null +++ b/src/components/organisms/page/landing/SectionPalettesContrast/styled/index.js @@ -0,0 +1,13 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import GleamingFrostWind from "./GleamingFrostWind"; +import WaveDivider from "./WaveDivider"; + +export { GleamingFrostWind, WaveDivider }; diff --git a/src/components/organisms/page/landing/SectionPalettesModularity/SectionPalettesModularity.jsx b/src/components/organisms/page/landing/SectionPalettesModularity/SectionPalettesModularity.jsx new file mode 100644 index 00000000..597d35d9 --- /dev/null +++ b/src/components/organisms/page/landing/SectionPalettesModularity/SectionPalettesModularity.jsx @@ -0,0 +1,66 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; + +import { Content } from "containers/core/Section"; +import Button from "atoms/core/Button"; +import ColorPaletteCard from "atoms/core/ColorPaletteCard"; +import { Code } from "atoms/core/HTMLElements"; +import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/landing/FeatureDuo"; +import { ROUTE_DOCS, ROUTE_ROOT } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; +import { palettes } from "styles/theme"; + +import { ColorPaletteWrapper, DecorationCanvas, Section } from "../shared"; +import { NordicBackpack, NordicCompass, MapPathMarker, WaveDivider } from "./styled"; + +const SECTION_ID = sectionIdFor(ROUTE_ROOT, 1); + +/** + * The component that represents the color palette modularity section of the landing page. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const SectionPalettesModularity = () => ( +
+ + + + + + + + + + + + + + + Modular structure. + + Nord colors are numbered from nord0 to nord15 where each component contains a + different amount of colors. + + + + + + + + +
+); + +export default SectionPalettesModularity; diff --git a/src/components/organisms/page/landing/SectionPalettesModularity/index.js b/src/components/organisms/page/landing/SectionPalettesModularity/index.js new file mode 100644 index 00000000..a146211d --- /dev/null +++ b/src/components/organisms/page/landing/SectionPalettesModularity/index.js @@ -0,0 +1,10 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +export { default } from "./SectionPalettesModularity"; diff --git a/src/components/organisms/page/landing/SectionPalettesModularity/styled/MapPathMarker.jsx b/src/components/organisms/page/landing/SectionPalettesModularity/styled/MapPathMarker.jsx new file mode 100644 index 00000000..634ce326 --- /dev/null +++ b/src/components/organisms/page/landing/SectionPalettesModularity/styled/MapPathMarker.jsx @@ -0,0 +1,51 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { ReactComponent as MapPathMarkerSvg } from "assets/images/decorations/map-path-marker.svg"; + +import { decorationBaseStyles, decorationSectionColorPaletteModularityFillColor } from "../../shared/styles"; + +/** + * A vector decoration component that renders a map path marker. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const MapPathMarker = styled(MapPathMarkerSvg)` + ${decorationBaseStyles}; + fill: ${decorationSectionColorPaletteModularityFillColor}; + width: 3em; + right: 6%; + top: -1%; + + ${({ theme }) => theme.media.phoneLandscape` + width: 4em; + `}; + + ${({ theme }) => theme.media.tabletPortrait` + width: 4.5em; + `}; + + ${({ theme }) => theme.media.tabletLandscape` + width: 5em; + top: -3%; + `}; + + ${({ theme }) => theme.media.desktop` + width: 5.5em; + top: -4%; + right: unset; + left: 42%; + `}; +`; + +export default MapPathMarker; diff --git a/src/components/organisms/page/landing/SectionPalettesModularity/styled/NordicBackpack.jsx b/src/components/organisms/page/landing/SectionPalettesModularity/styled/NordicBackpack.jsx new file mode 100644 index 00000000..25646542 --- /dev/null +++ b/src/components/organisms/page/landing/SectionPalettesModularity/styled/NordicBackpack.jsx @@ -0,0 +1,54 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { ReactComponent as NordicBackpackSvg } from "assets/images/decorations/nordic-backpack.svg"; + +import { decorationBaseStyles, decorationSectionColorPaletteModularityFillColor } from "../../shared/styles"; + +/** + * A vector decoration component that renders a nordic backpack. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const NordicBackpack = styled(NordicBackpackSvg)` + ${decorationBaseStyles}; + fill: ${decorationSectionColorPaletteModularityFillColor}; + width: 2.5em; + bottom: 6%; + right: 6%; + + ${({ theme }) => theme.media.phoneLandscape` + width: 3em; + bottom: 10%; + right: 10%; + `}; + + ${({ theme }) => theme.media.tabletPortrait` + width: 4em; + `}; + + ${({ theme }) => theme.media.tabletLandscape` + width: 4.5em; + right: unset; + left: 28%; + bottom: 25%; + `}; + + ${({ theme }) => theme.media.desktop` + width: 5em; + bottom: 30%; + left: 34%; + `}; +`; + +export default NordicBackpack; diff --git a/src/components/organisms/page/landing/SectionPalettesModularity/styled/NordicCompass.jsx b/src/components/organisms/page/landing/SectionPalettesModularity/styled/NordicCompass.jsx new file mode 100644 index 00000000..cb14850b --- /dev/null +++ b/src/components/organisms/page/landing/SectionPalettesModularity/styled/NordicCompass.jsx @@ -0,0 +1,51 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { ReactComponent as NordicCompassSvg } from "assets/images/decorations/nordic-compass.svg"; + +import { decorationBaseStyles, decorationSectionColorPaletteModularityFillColor } from "../../shared/styles"; + +/** + * A vector decoration component that renders a nordic compass. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const NordicCompass = styled(NordicCompassSvg)` + ${decorationBaseStyles}; + fill: ${decorationSectionColorPaletteModularityFillColor}; + width: 3em; + top: 2%; + left: 2%; + + ${({ theme }) => theme.media.phoneLandscape` + width: 3.5em; + `}; + + ${({ theme }) => theme.media.tabletPortrait` + width: 4.5em; + `}; + + ${({ theme }) => theme.media.tabletLandscape` + width: 5.5em; + top: 8%; + left: 4%; + `}; + + ${({ theme }) => theme.media.desktop` + width: 6em; + top: 11%; + left: 6%; + `}; +`; + +export default NordicCompass; diff --git a/src/components/organisms/page/landing/SectionPalettesModularity/styled/WaveDivider.jsx b/src/components/organisms/page/landing/SectionPalettesModularity/styled/WaveDivider.jsx new file mode 100644 index 00000000..3a1f1904 --- /dev/null +++ b/src/components/organisms/page/landing/SectionPalettesModularity/styled/WaveDivider.jsx @@ -0,0 +1,32 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { WaveRough } from "atoms/core/vectors/divider"; +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const fillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.base[MODE_DARK_NIGHT_FROST], + [MODE_DARK_NIGHT_FROST]: colors.background.base[MODE_DARK_NIGHT_FROST] +}); + +/** + * A "rough" vector wave to render a visual differentiation to the next section. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const WaveDivider = styled(WaveRough)` + fill: ${fillColor}; + transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +export default WaveDivider; diff --git a/src/components/organisms/page/landing/SectionPalettesModularity/styled/index.js b/src/components/organisms/page/landing/SectionPalettesModularity/styled/index.js new file mode 100644 index 00000000..60d1a952 --- /dev/null +++ b/src/components/organisms/page/landing/SectionPalettesModularity/styled/index.js @@ -0,0 +1,15 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import MapPathMarker from "./MapPathMarker"; +import NordicBackpack from "./NordicBackpack"; +import NordicCompass from "./NordicCompass"; +import WaveDivider from "./WaveDivider"; + +export { MapPathMarker, NordicBackpack, NordicCompass, WaveDivider }; diff --git a/src/components/organisms/page/landing/SectionPorts/SectionPorts.jsx b/src/components/organisms/page/landing/SectionPorts/SectionPorts.jsx new file mode 100644 index 00000000..87ac64a3 --- /dev/null +++ b/src/components/organisms/page/landing/SectionPorts/SectionPorts.jsx @@ -0,0 +1,56 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; + +import Button from "atoms/core/Button"; +import { Content } from "containers/core/Section"; +import { ReactComponent as Nordify } from "assets/images/illustrations/nordify.svg"; +import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/landing/FeatureDuo"; +import { ROUTE_PORTS, ROUTE_ROOT } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; + +import { Section } from "../shared"; +import { darkenedThemeModeBackgroundbackgroundColor } from "../shared/styles"; +import WavyLineDivider from "./styled/WavyLineDivider"; + +const SECTION_ID = sectionIdFor(ROUTE_ROOT, 3); + +/** + * The component that represents the port project section of the landing page. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const SectionPorts = () => ( +
+ + + + Nordify your digital home. + + Choose from many port projects to unify the style of your favorite applications and platforms. + + + + + + + + + + + +
+); + +export default SectionPorts; diff --git a/src/components/organisms/page/landing/SectionPorts/index.js b/src/components/organisms/page/landing/SectionPorts/index.js new file mode 100644 index 00000000..e0187feb --- /dev/null +++ b/src/components/organisms/page/landing/SectionPorts/index.js @@ -0,0 +1,10 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +export { default } from "./SectionPorts"; diff --git a/src/components/organisms/page/landing/SectionPorts/styled/WavyLineDivider.jsx b/src/components/organisms/page/landing/SectionPorts/styled/WavyLineDivider.jsx new file mode 100644 index 00000000..4ebe0618 --- /dev/null +++ b/src/components/organisms/page/landing/SectionPorts/styled/WavyLineDivider.jsx @@ -0,0 +1,33 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { LinesWavyIntersecting } from "atoms/core/vectors/divider"; +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const strokeColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.nord5, + [MODE_DARK_NIGHT_FROST]: colors.nord3 +}); + +/** + * Two "wavy intersecting" lines to render a visual differentiation to the next section. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const WavyLineDivider = styled(LinesWavyIntersecting)` + stroke: ${strokeColor}; + fill: none; + transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +export default WavyLineDivider; diff --git a/src/components/organisms/page/landing/SectionSyntax/SectionSyntax.jsx b/src/components/organisms/page/landing/SectionSyntax/SectionSyntax.jsx new file mode 100644 index 00000000..873e8682 --- /dev/null +++ b/src/components/organisms/page/landing/SectionSyntax/SectionSyntax.jsx @@ -0,0 +1,67 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React, { PureComponent } from "react"; +import Waypoint from "react-waypoint"; + +import Button from "atoms/core/Button"; +import { Content } from "containers/core/Section"; +import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/landing/FeatureDuo"; +import { ROUTE_DOCS, ROUTE_ROOT } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; + +import { Section } from "../shared"; +import { CodeSyntaxLines, WaveDivider, POSE_DRAW, POSE_ERASE } from "./styled"; + +const SECTION_ID = sectionIdFor(ROUTE_ROOT, 5); + +/** + * The component that represents the code syntax section of the landing page. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +export default class SectionSyntax extends PureComponent { + state = { + codeSyntaxLinesPose: POSE_ERASE + }; + + handleCodeSyntaxLinesWaypointEnter = () => this.setState({ codeSyntaxLinesPose: POSE_DRAW }); + + render() { + const { codeSyntaxLinesPose } = this.state; + + return ( +
+ + + + + + + + Beautiful code to keep focused. + + Each color is carefully designed with a syntax meaning and an balanced color distribution for syntax + elements to help to keep the focus on the important aspects. + + + + + + + + +
+ ); + } +} diff --git a/src/components/organisms/page/landing/SectionSyntax/index.js b/src/components/organisms/page/landing/SectionSyntax/index.js new file mode 100644 index 00000000..600fcfdf --- /dev/null +++ b/src/components/organisms/page/landing/SectionSyntax/index.js @@ -0,0 +1,10 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +export { default } from "./SectionSyntax"; diff --git a/src/components/organisms/page/landing/SectionSyntax/styled/CodeSyntaxLines.jsx b/src/components/organisms/page/landing/SectionSyntax/styled/CodeSyntaxLines.jsx new file mode 100644 index 00000000..4bff849b --- /dev/null +++ b/src/components/organisms/page/landing/SectionSyntax/styled/CodeSyntaxLines.jsx @@ -0,0 +1,124 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import PropTypes from "prop-types"; +import posed from "react-pose"; +import styled from "styled-components"; + +import { nord } from "styles/theme"; + +const POSE_DRAW = "draw"; +const POSE_ERASE = "erase"; + +const transitionSpringEaseInQuad = { + type: "tween", + /** + * The `ease-in-quad` transition easing values. + * + * @see https://easings.net/#easeInQuad + */ + ease: [0.55, 0.085, 0.68, 0.53], + duration: 1000 +}; + +const poseConfig = { + [POSE_DRAW]: { + pathLength: 100, + transition: { pathLength: { ...transitionSpringEaseInQuad } } + }, + [POSE_ERASE]: { + pathLength: 0, + transition: { pathLength: { ...transitionSpringEaseInQuad } } + }, + passive: { + strokeLinecap: ["pathLength", v => (v === 0 ? "butt" : "round")] + } +}; + +const Svg = styled(posed.svg())` + ${({ theme }) => theme.media.tabletLandscape` + max-width: 70%; + `}; +`; + +const CodeLine = posed.path(poseConfig); + +/** + * An SVG vector component that renders an editor window with animated code lines. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const CodeSyntaxLines = ({ pose, ...passProps }) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +CodeSyntaxLines.propTypes = { + pose: PropTypes.oneOf([POSE_DRAW, POSE_ERASE]).isRequired +}; + +export { POSE_DRAW, POSE_ERASE }; +export default CodeSyntaxLines; diff --git a/src/components/organisms/page/landing/SectionSyntax/styled/WaveDivider.jsx b/src/components/organisms/page/landing/SectionSyntax/styled/WaveDivider.jsx new file mode 100644 index 00000000..d3338d33 --- /dev/null +++ b/src/components/organisms/page/landing/SectionSyntax/styled/WaveDivider.jsx @@ -0,0 +1,32 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { WaveRoaring } from "atoms/core/vectors/divider"; +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const fillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.base[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.background.base[MODE_DARK_NIGHT_FROST] +}); + +/** + * A "roaring" vector wave to render a visual differentiation to the next section. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const WaveDivider = styled(WaveRoaring)` + fill: ${fillColor}; + transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +export default WaveDivider; diff --git a/src/components/organisms/page/landing/SectionSyntax/styled/index.js b/src/components/organisms/page/landing/SectionSyntax/styled/index.js new file mode 100644 index 00000000..21f17f11 --- /dev/null +++ b/src/components/organisms/page/landing/SectionSyntax/styled/index.js @@ -0,0 +1,13 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import CodeSyntaxLines, { POSE_DRAW, POSE_ERASE } from "./CodeSyntaxLines"; +import WaveDivider from "./WaveDivider"; + +export { CodeSyntaxLines, WaveDivider, POSE_DRAW, POSE_ERASE }; diff --git a/src/components/organisms/page/landing/index.js b/src/components/organisms/page/landing/index.js index f980d4c5..b92dce33 100644 --- a/src/components/organisms/page/landing/index.js +++ b/src/components/organisms/page/landing/index.js @@ -15,7 +15,20 @@ * @since 0.3.0 */ +import SectionCommunity from "./SectionCommunity"; import SectionHero from "./SectionHero"; +import SectionNativeColorSwatch from "./SectionNativeColorSwatch"; +import SectionPalettesContrast from "./SectionPalettesContrast"; +import SectionPalettesModularity from "./SectionPalettesModularity"; +import SectionPorts from "./SectionPorts"; +import SectionSyntax from "./SectionSyntax"; -/* eslint-disable-next-line import/prefer-default-export */ -export { SectionHero }; +export { + SectionCommunity, + SectionHero, + SectionNativeColorSwatch, + SectionPalettesContrast, + SectionPalettesModularity, + SectionPorts, + SectionSyntax +}; diff --git a/src/components/organisms/page/landing/shared/ColorPaletteWrapper.jsx b/src/components/organisms/page/landing/shared/ColorPaletteWrapper.jsx new file mode 100644 index 00000000..7af3f5b2 --- /dev/null +++ b/src/components/organisms/page/landing/shared/ColorPaletteWrapper.jsx @@ -0,0 +1,46 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +/** + * A wrapper for two color palette card components that adjust the layout. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const ColorPaletteWrapper = styled.div` + display: grid; + grid-row-gap: 4em; + font-size: 0.8em; + + ${({ theme }) => theme.media.phoneLandscape` + font-size: inherit; + `}; + + ${({ reverseOffset, theme }) => theme.media.desktop` + display: flex; + flex-direction: column; + + > :first-child { + margin-bottom: 8%; + margin-left: ${!reverseOffset && "18%"}; + margin-right: ${reverseOffset && "18%"}; + } + + > :last-child { + margin-top: 8%; + margin-left: ${reverseOffset && "18%"}; + margin-right: ${!reverseOffset && "18%"}; + } + `}; +`; + +export default ColorPaletteWrapper; diff --git a/src/components/organisms/page/landing/shared/DecorationCanvas.jsx b/src/components/organisms/page/landing/shared/DecorationCanvas.jsx new file mode 100644 index 00000000..bcfdd97e --- /dev/null +++ b/src/components/organisms/page/landing/shared/DecorationCanvas.jsx @@ -0,0 +1,27 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +/** + * A container for absolute positioned decoration components. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const DecorationCanvas = styled.div` + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +`; + +export default DecorationCanvas; diff --git a/src/components/organisms/page/landing/shared/Section.jsx b/src/components/organisms/page/landing/shared/Section.jsx new file mode 100644 index 00000000..5ce1cf13 --- /dev/null +++ b/src/components/organisms/page/landing/shared/Section.jsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import CoreSection from "containers/core/Section"; + +/** + * A main container that applies section specific styles and CSS workarounds. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const Section = styled(CoreSection)` + /* The relative position is necessary for sections that render absolute positioned decorations. */ + position: relative; + /* + * Due to a bug in Firefox there is a one pixel gap between the SVG section divider (skewed wave) of the previous + * section and this section. The workaround moves this section up by the amount of pixels specified by the "gapWidth" + * prop to ensure the gap is closed. Values larger than one pixel are necessary because the previous section is + * affected by the same problem and applied the same workaround which results in a gap larger than one pixel between + * these sections. + */ + top: ${({ gapWidth }) => gapWidth && `-${gapWidth}px`}; + /* Some sections need to use special background colors to differ from the previous and/or next section. */ + background-color: ${({ bgColor }) => bgColor}; +`; + +export default Section; diff --git a/src/components/organisms/page/landing/shared/index.js b/src/components/organisms/page/landing/shared/index.js new file mode 100644 index 00000000..10652c4f --- /dev/null +++ b/src/components/organisms/page/landing/shared/index.js @@ -0,0 +1,21 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +/** + * @file Provides shared components for the landing page orgaism components. + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ + +import ColorPaletteWrapper from "./ColorPaletteWrapper"; +import DecorationCanvas from "./DecorationCanvas"; +import Section from "./Section"; + +export { ColorPaletteWrapper, DecorationCanvas, Section }; diff --git a/src/components/organisms/page/landing/shared/styles.js b/src/components/organisms/page/landing/shared/styles.js new file mode 100644 index 00000000..a26d0107 --- /dev/null +++ b/src/components/organisms/page/landing/shared/styles.js @@ -0,0 +1,63 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +/** + * @file Provides shared styles for the landing page section components. + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ + +import { css } from "styled-components"; +import { rgba } from "polished"; + +import { + colors, + motion, + themedMode, + zIndexFor, + MODE_BRIGHT_SNOW_FLURRY, + MODE_DARK_NIGHT_FROST, + Z_INDEX_ELEMENTS +} from "styles/theme"; + +import { darkenedSectionBackgroundColor } from "../../shared/styles"; + +const darkenedThemeModeBackgroundbackgroundColor = themedMode({ + [MODE_DARK_NIGHT_FROST]: darkenedSectionBackgroundColor +}); + +const decorationBaseStyles = css` + position: absolute; + z-index: ${zIndexFor(Z_INDEX_ELEMENTS.DECORATIONS)}; + transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +const decorationSectionColorPaletteModularityFillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.nord5, + [MODE_DARK_NIGHT_FROST]: colors.nord1 +}); + +const decorationSectionHeroFillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord6, 0.4), + [MODE_DARK_NIGHT_FROST]: colors.nord1 +}); + +const decorationSectionColorSwatchFillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.nord6, + [MODE_DARK_NIGHT_FROST]: colors.nord2 +}); + +export { + darkenedThemeModeBackgroundbackgroundColor, + decorationBaseStyles, + decorationSectionColorPaletteModularityFillColor, + decorationSectionColorSwatchFillColor, + decorationSectionHeroFillColor +}; diff --git a/src/components/organisms/page/shared/styles.js b/src/components/organisms/page/shared/styles.js index 4feafa1a..a132cd7b 100644 --- a/src/components/organisms/page/shared/styles.js +++ b/src/components/organisms/page/shared/styles.js @@ -7,9 +7,17 @@ * License: MIT */ +/** + * @file Provides shared styles for all page components. + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ + import { css } from "styled-components"; +import { darken } from "polished"; -import { media } from "styles/theme"; +import { media, nord } from "styles/theme"; const emptyStateIllustrationStyles = css` width: 7em; @@ -35,4 +43,11 @@ const errorState404IllustrationStyles = css` `} `; -export { emptyStateIllustrationStyles, errorState404IllustrationStyles }; +/** + * A darkened background color for landing page section components. + * + * @since 0.6.0 + */ +const darkenedSectionBackgroundColor = darken(0.045, nord.nord0); + +export { darkenedSectionBackgroundColor, emptyStateIllustrationStyles, errorState404IllustrationStyles }; diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 9ebb2215..b8b0f81e 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -11,7 +11,15 @@ import React from "react"; import { locationPropTypes } from "data/pages/shared/propTypes"; import BaseLayout from "layouts/core/BaseLayout"; -import { SectionHero } from "organisms/page/landing"; +import { + SectionCommunity, + SectionHero, + SectionNativeColorSwatch, + SectionPalettesContrast, + SectionPalettesModularity, + SectionPorts, + SectionSyntax +} from "organisms/page/landing"; /** * The landing page component representing the root/index of the site. @@ -23,6 +31,12 @@ import { SectionHero } from "organisms/page/landing"; const Landing = ({ location: { pathname } }) => ( + + + + + + ); diff --git a/src/styles/theme/constants.js b/src/styles/theme/constants.js index d64b48fb..967a3310 100644 --- a/src/styles/theme/constants.js +++ b/src/styles/theme/constants.js @@ -46,6 +46,7 @@ const THEME_KEY_MODE = "mode"; */ const Z_INDEX_ELEMENTS = { CONTENT: "content", + DECORATIONS: "decorations", HEADER: "header", HEADER_COMPACT_SLIDE_MENU: "header-compact-slide-menu", MAIN: "main" @@ -58,6 +59,7 @@ const Z_INDEX_ELEMENTS = { * @since 0.3.0 */ const Z_INDEX_ELEMENT_ORDER = [ + Z_INDEX_ELEMENTS.DECORATIONS, Z_INDEX_ELEMENTS.MAIN, Z_INDEX_ELEMENTS.CONTENT, Z_INDEX_ELEMENTS.HEADER, diff --git a/src/styles/theme/media.js b/src/styles/theme/media.js index db8be1b7..514cc902 100644 --- a/src/styles/theme/media.js +++ b/src/styles/theme/media.js @@ -33,7 +33,7 @@ const media = { tabletPortrait: generateMediaQuery`(min-width: ${query(breakpoints.tabletPortraitLowerBoundary)})`, tabletLandscape: generateMediaQuery`(min-width: ${query(breakpoints.tabletLandscapeLowerBoundary)})`, desktop: generateMediaQuery`(min-width: ${query(breakpoints.desktopLowerBoundary)})`, - desktopPlus: generateMediaQuery`(min-width: ${query(breakpoints.desktopPlus)})`, + desktopPlus: generateMediaQuery`(min-width: ${query(breakpoints.desktopPlusLowerBoundary)})`, breakpoints }; diff --git a/test/components/atoms/core/Button/__snapshots__/Button.test.jsx.snap b/test/components/atoms/core/Button/__snapshots__/Button.test.jsx.snap index 83a0bd79..98889312 100644 --- a/test/components/atoms/core/Button/__snapshots__/Button.test.jsx.snap +++ b/test/components/atoms/core/Button/__snapshots__/Button.test.jsx.snap @@ -38,6 +38,7 @@ exports[`logical behavior renders external URLs with \`href\` prop 1`] = ` -moz-user-select: none; -ms-user-select: none; user-select: none; + line-height: 1.15; color: #4c566a; background-color: rgba(236,239,244,0.45); -webkit-transition: background-color 200ms ease-in, border-color 200ms ease-in, box-shadow 200ms ease-in, color 200ms ease-in; @@ -115,6 +116,7 @@ exports[`logical behavior renders external URLs with \`to\` prop 1`] = ` -moz-user-select: none; -ms-user-select: none; user-select: none; + line-height: 1.15; color: #4c566a; background-color: rgba(236,239,244,0.45); -webkit-transition: background-color 200ms ease-in, border-color 200ms ease-in, box-shadow 200ms ease-in, color 200ms ease-in; @@ -192,6 +194,7 @@ exports[`logical behavior renders inernal URLs with \`href\` prop 1`] = ` -moz-user-select: none; -ms-user-select: none; user-select: none; + line-height: 1.15; color: #4c566a; background-color: rgba(236,239,244,0.45); -webkit-transition: background-color 200ms ease-in, border-color 200ms ease-in, box-shadow 200ms ease-in, color 200ms ease-in; @@ -270,6 +273,7 @@ exports[`logical behavior renders inernal URLs with \`to\` prop 1`] = ` -moz-user-select: none; -ms-user-select: none; user-select: none; + line-height: 1.15; color: #4c566a; background-color: rgba(236,239,244,0.45); -webkit-transition: background-color 200ms ease-in, border-color 200ms ease-in, box-shadow 200ms ease-in, color 200ms ease-in; @@ -334,6 +338,7 @@ exports[`theme styles has borders with 'dashed' and 'outlined' props 1`] = ` -moz-user-select: none; -ms-user-select: none; user-select: none; + line-height: 1.15; color: #4c566a; background-color: rgba(236,239,244,0.45); -webkit-transition: background-color 200ms ease-in, border-color 200ms ease-in, box-shadow 200ms ease-in, color 200ms ease-in; @@ -399,6 +404,7 @@ exports[`theme styles has borders with 'outlined' prop 1`] = ` -moz-user-select: none; -ms-user-select: none; user-select: none; + line-height: 1.15; color: #4c566a; background-color: rgba(236,239,244,0.45); -webkit-transition: background-color 200ms ease-in, border-color 200ms ease-in, box-shadow 200ms ease-in, color 200ms ease-in; @@ -464,6 +470,7 @@ exports[`theme styles matches the snapshot with 'primary' variant 1`] = ` -moz-user-select: none; -ms-user-select: none; user-select: none; + line-height: 1.15; color: #3b4252; background-color: #88c0d0; -webkit-transition: background-color 200ms ease-in, border-color 200ms ease-in, box-shadow 200ms ease-in, color 200ms ease-in; @@ -526,6 +533,7 @@ exports[`theme styles matches the snapshot with 'secondary' variant 1`] = ` -moz-user-select: none; -ms-user-select: none; user-select: none; + line-height: 1.15; color: #3b4252; background-color: #81a1c1; -webkit-transition: background-color 200ms ease-in, border-color 200ms ease-in, box-shadow 200ms ease-in, color 200ms ease-in; @@ -588,6 +596,7 @@ exports[`theme styles matches the snapshot with 'simple' variant 1`] = ` -moz-user-select: none; -ms-user-select: none; user-select: none; + line-height: 1.15; color: #4c566a; background-color: rgba(236,239,244,0.45); -webkit-transition: background-color 200ms ease-in, border-color 200ms ease-in, box-shadow 200ms ease-in, color 200ms ease-in; @@ -650,6 +659,7 @@ exports[`theme styles matches the snapshot with 'subtle' variant 1`] = ` -moz-user-select: none; -ms-user-select: none; user-select: none; + line-height: 1.15; color: #5e81ac; background-color: transparent; -webkit-transition: background-color 200ms ease-in, border-color 200ms ease-in, box-shadow 200ms ease-in, color 200ms ease-in; diff --git a/test/components/organisms/core/Header/styled/__snapshots__/Header.test.jsx.snap b/test/components/organisms/core/Header/styled/__snapshots__/Header.test.jsx.snap index f71489f2..5a9998dc 100644 --- a/test/components/organisms/core/Header/styled/__snapshots__/Header.test.jsx.snap +++ b/test/components/organisms/core/Header/styled/__snapshots__/Header.test.jsx.snap @@ -10,7 +10,7 @@ exports[`theme styles has correct height in pinned mode 1`] = ` top: 0; height: 3.5em; width: 100%; - z-index: 2; + z-index: 3; background-color: #fff; box-shadow: 0 5px 10px 0 rgba(216,222,233,0.15); -webkit-transition: height 250ms ease-in-out, box-shadow 250ms ease-in-out, background-color 400ms ease-in-out; @@ -37,7 +37,7 @@ exports[`theme styles has correct height in unpinned mode 1`] = ` top: 0; height: 5em; width: 100%; - z-index: 2; + z-index: 3; background-color: #fff; -webkit-transition: height 250ms ease-in-out, box-shadow 250ms ease-in-out, background-color 400ms ease-in-out; transition: height 250ms ease-in-out, box-shadow 250ms ease-in-out, background-color 400ms ease-in-out; diff --git a/test/components/organisms/core/Header/styled/__snapshots__/SlideMenuBox.test.jsx.snap b/test/components/organisms/core/Header/styled/__snapshots__/SlideMenuBox.test.jsx.snap index 9abdd5ee..39f98d20 100644 --- a/test/components/organisms/core/Header/styled/__snapshots__/SlideMenuBox.test.jsx.snap +++ b/test/components/organisms/core/Header/styled/__snapshots__/SlideMenuBox.test.jsx.snap @@ -7,7 +7,7 @@ exports[`theme styles has correct top position based on header height in unpinne width: 100%; background-color: #fff; text-align: center; - z-index: 3; + z-index: 4; overflow-y: auto; -webkit-transition: background-color 400ms ease-in-out; transition: background-color 400ms ease-in-out; @@ -32,7 +32,7 @@ exports[`theme styles has correct top position based on the header height in pin width: 100%; background-color: #fff; text-align: center; - z-index: 3; + z-index: 4; overflow-y: auto; -webkit-transition: background-color 400ms ease-in-out; transition: background-color 400ms ease-in-out; diff --git a/test/components/organisms/page/landing/SectionHero/SectionHero.test.jsx b/test/components/organisms/page/landing/SectionHero/SectionHero.test.jsx deleted file mode 100644 index 046c957d..00000000 --- a/test/components/organisms/page/landing/SectionHero/SectionHero.test.jsx +++ /dev/null @@ -1,20 +0,0 @@ -/* - * Copyright (C) 2018-present Arctic Ice Studio - * Copyright (C) 2018-present Sven Greb - * - * Project: Nord Docs - * Repository: https://github.com/arcticicestudio/nord-docs - * License: MIT - */ - -import React from "react"; - -import { SectionHero } from "organisms/page/landing"; -import { renderWithTheme } from "nord-docs-test-utils"; - -describe("rendering", () => { - test("renders and is visible", () => { - const { container } = renderWithTheme(); - expect(container.firstChild).toBeVisible(); - }); -});