-
-
Notifications
You must be signed in to change notification settings - Fork 24
/
SectionHero.jsx
81 lines (73 loc) · 2.7 KB
/
SectionHero.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/*
* Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
* Copyright (C) 2018-present Sven Greb <development@svengreb.de>
*
* Project: Nord Docs
* Repository: https://github.com/arcticicestudio/nord-docs
* License: MIT
*/
import React, { PureComponent } from "react";
import { Waypoint } from "react-waypoint";
import ArcticLandscape, { POSE_DRAW, POSE_ERASE } from "arctic-landscape";
import { Content } from "containers/core/Section";
import Button from "atoms/core/Button";
import { H1 } from "atoms/core/html-elements";
import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo";
import { ROUTE_DOCS, ROUTE_ROOT } from "config/routes/mappings";
import { sectionIdFor } from "utils";
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 <development@arcticicestudio.com>
* @author Sven Greb <development@svengreb.de>
* @since 0.3.0
*/
export default class SectionHero extends PureComponent {
state = {
arcticLandscapePose: POSE_ERASE
};
handleArcticLandscapeWaypointEnter = () => this.setState({ arcticLandscapePose: POSE_DRAW });
render() {
const { arcticLandscapePose } = this.state;
return (
<Section id={SECTION_ID}>
<DecorationCanvas>
<Cloud1 />
<Cloud2 />
<Cloud3 />
</DecorationCanvas>
<Content centered>
<FeatureDuo>
<Visualization reverseRowOrder>
<Waypoint onEnter={this.handleArcticLandscapeWaypointEnter} />
<ArcticLandscape pose={arcticLandscapePose} />
</Visualization>
<Text>
<Headline as={H1} large>
An arctic, north-bluish color palette.
</Headline>
<Subline>
Created for the clean and uncluttered design pattern to achieve a optimal focus and readability for code
syntax highlighting and UI components.
</Subline>
<Actions>
<Button to={ROUTE_DOCS} variant="primary">
Get Started
</Button>
<Button ghost outlined quiet to={ROUTE_DOCS} variant="secondary">
Documentation
</Button>
</Actions>
</Text>
</FeatureDuo>
</Content>
<WaveDivider />
</Section>
);
}
}