33 | {children}
34 |
35 | );
36 | }
37 |
38 | FormHint.propTypes = propTypes;
39 | FormHint.defaultProps = defaultProps;
40 |
41 | export default FormHint;
--------------------------------------------------------------------------------
/src/components/elements/FormLabel.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 |
5 | const propTypes = {
6 | children: PropTypes.node,
7 | labelHidden: PropTypes.bool,
8 | id: PropTypes.string
9 | }
10 |
11 | const defaultProps = {
12 | children: null,
13 | labelHidden: false,
14 | id: null
15 | }
16 |
17 | const FormLabel = ({
18 | className,
19 | children,
20 | labelHidden,
21 | id,
22 | ...props
23 | }) => {
24 |
25 | const classes = classNames(
26 | 'form-label',
27 | labelHidden && 'screen-reader',
28 | className
29 | );
30 |
31 | return (
32 |
39 | );
40 | }
41 |
42 | FormLabel.propTypes = propTypes;
43 | FormLabel.defaultProps = defaultProps;
44 |
45 | export default FormLabel;
--------------------------------------------------------------------------------
/src/components/elements/Image.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useEffect } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const propTypes = {
5 | src: PropTypes.oneOfType([
6 | PropTypes.object,
7 | PropTypes.string
8 | ]).isRequired,
9 | width: PropTypes.number,
10 | height: PropTypes.number,
11 | alt: PropTypes.string
12 | }
13 |
14 | const defaultProps = {
15 | src: undefined,
16 | width: undefined,
17 | height: undefined,
18 | alt: undefined
19 | }
20 |
21 | const Image = ({
22 | className,
23 | src,
24 | width,
25 | height,
26 | alt,
27 | ...props
28 | }) => {
29 |
30 | const [loaded, setLoaded] = useState(false);
31 |
32 | const image = useRef(null);
33 |
34 | useEffect(() => {
35 | handlePlaceholder(image.current);
36 | // eslint-disable-next-line react-hooks/exhaustive-deps
37 | }, []);
38 |
39 | const placeholderSrc = (w, h) => {
40 | return `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}"%3E%3C/svg%3E`;
41 | }
42 |
43 | const handlePlaceholder = (img) => {
44 | const placeholder = document.createElement('img');
45 | if (!loaded) {
46 | img.style.display = 'none';
47 | img.before(placeholder);
48 | placeholder.src = placeholderSrc(
49 | img.getAttribute('width') || 0,
50 | img.getAttribute('height') || 0
51 | );
52 | placeholder.width = img.getAttribute('width');
53 | placeholder.height = img.getAttribute('height');
54 | placeholder.style.opacity = '0';
55 | img.className && placeholder.classList.add(img.className);
56 | placeholder.remove();
57 | img.style.display = '';
58 | }
59 | }
60 |
61 | function onLoad() {
62 | setLoaded(true);
63 | }
64 |
65 | return (
66 |
79 |
91 | {hint &&
77 |
109 | }
110 |
111 | )
112 | }
113 |
114 | Modal.propTypes = propTypes;
115 | Modal.defaultProps = defaultProps;
116 |
117 | export default Modal;
--------------------------------------------------------------------------------
/src/components/elements/Radio.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 |
5 | const propTypes = {
6 | children: PropTypes.node,
7 | name: PropTypes.string.isRequired,
8 | value: PropTypes.string,
9 | disabled: PropTypes.bool,
10 | checked: PropTypes.bool
11 | }
12 |
13 | const defaultProps = {
14 | children: null,
15 | name: undefined,
16 | value: '',
17 | disabled: false,
18 | checked: false
19 | }
20 |
21 | const Radio = ({
22 | className,
23 | children,
24 | name,
25 | value,
26 | disabled,
27 | checked,
28 | ...props
29 | }) => {
30 |
31 | const classes = classNames(
32 | 'form-radio',
33 | className
34 | );
35 |
36 | return (
37 |
48 | );
49 | }
50 |
51 | Radio.propTypes = propTypes;
52 | Radio.defaultProps = defaultProps;
53 |
54 | export default Radio;
55 |
--------------------------------------------------------------------------------
/src/components/elements/Select.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import FormLabel from './FormLabel';
5 | import FormHint from './FormHint';
6 |
7 | const propTypes = {
8 | children: PropTypes.node,
9 | label: PropTypes.string,
10 | labelHidden: PropTypes.bool,
11 | name: PropTypes.string,
12 | status: PropTypes.string,
13 | disabled: PropTypes.bool,
14 | value: PropTypes.oneOfType([
15 | PropTypes.string,
16 | PropTypes.number,
17 | ]),
18 | size: PropTypes.string,
19 | placeholder: PropTypes.string,
20 | hint: PropTypes.string
21 | }
22 |
23 | const defaultProps = {
24 | children: null,
25 | label: '',
26 | labelHidden: false,
27 | name: undefined,
28 | status: '',
29 | disabled: false,
30 | value: undefined,
31 | size: '',
32 | placeholder: null,
33 | hint: null
34 | }
35 |
36 | const Select = ({
37 | className,
38 | children,
39 | label,
40 | labelHidden,
41 | name,
42 | status,
43 | disabled,
44 | value,
45 | size,
46 | placeholder,
47 | hint,
48 | ...props
49 | }) => {
50 |
51 | const classes = classNames(
52 | 'form-select',
53 | size && `form-select-${size}`,
54 | status && `form-${status}`,
55 | className
56 | );
57 |
58 | return (
59 | <>
60 | {label &&
78 | {video ?
79 |
108 |
80 | {videoTag === 'iframe' ?
81 | :
87 |
92 | }
93 |
:
94 | <>
95 | {!closeHidden &&
96 |
101 | }
102 |
103 | {children}
104 |
105 |
106 | }
107 |
83 |
131 |
88 |
130 |
21 |
22 |
23 |
30 |
31 | );
32 | }
33 |
34 | export default Logo;
--------------------------------------------------------------------------------
/src/components/sections/Cta.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import { SectionProps } from '../../utils/SectionProps';
5 | import Input from '../elements/Input';
6 |
7 | const propTypes = {
8 | ...SectionProps.types,
9 | split: PropTypes.bool
10 | }
11 |
12 | const defaultProps = {
13 | ...SectionProps.defaults,
14 | split: false
15 | }
16 |
17 | const Cta = ({
18 | className,
19 | topOuterDivider,
20 | bottomOuterDivider,
21 | topDivider,
22 | bottomDivider,
23 | hasBgColor,
24 | invertColor,
25 | split,
26 | ...props
27 | }) => {
28 |
29 | const outerClasses = classNames(
30 | 'cta section center-content-mobile reveal-from-bottom',
31 | topOuterDivider && 'has-top-divider',
32 | bottomOuterDivider && 'has-bottom-divider',
33 | hasBgColor && 'has-bg-color',
34 | invertColor && 'invert-color',
35 | className
36 | );
37 |
38 | const innerClasses = classNames(
39 | 'cta-inner section-inner',
40 | topDivider && 'has-top-divider',
41 | bottomDivider && 'has-bottom-divider',
42 | split && 'cta-split'
43 | );
44 |
45 | return (
46 |
22 |
23 |
30 |
51 |
68 |
54 |
67 |
55 |
59 | 56 | For previewing layouts and visual? 57 |
58 |
60 |
61 |
64 |
65 |
66 |
63 |
148 |
64 |
147 |
66 |
67 |
146 |
68 |
92 |
93 |
69 |
79 |
70 | Lightning fast workflow
71 |
72 | 73 | Data-driven insights 74 |
75 |76 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 77 |
78 |
85 |
91 |
94 |
118 |
119 |
95 |
105 |
96 | Lightning fast workflow
97 |
98 | 99 | Data-driven insights 100 |
101 |102 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 103 |
104 |
111 |
117 |
120 |
144 |
145 |
121 |
131 |
122 | Lightning fast workflow
123 |
124 | 125 | Data-driven insights 126 |
127 |128 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 129 |
130 |
137 |
143 |
57 |
196 |
58 |
195 |
60 |
61 |
194 |
62 |
82 |
83 |
63 |
81 |
64 |
72 |
65 |
71 |
73 |
80 | 74 | Robust Workflow 75 |
76 |77 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. 78 |
79 |
84 |
104 |
105 |
85 |
103 |
86 |
94 |
87 |
93 |
95 |
102 | 96 | Robust Workflow 97 |
98 |99 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. 100 |
101 |
106 |
126 |
127 |
107 |
125 |
108 |
116 |
109 |
115 |
117 |
124 | 118 | Robust Workflow 119 |
120 |121 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. 122 |
123 |
128 |
148 |
149 |
129 |
147 |
130 |
138 |
131 |
137 |
139 |
146 | 140 | Robust Workflow 141 |
142 |143 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. 144 |
145 |
150 |
170 |
171 |
151 |
169 |
152 |
160 |
153 |
159 |
161 |
168 | 162 | Robust Workflow 163 |
164 |165 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. 166 |
167 |
172 |
192 |
193 |
173 |
191 |
174 |
182 |
175 |
181 |
183 |
190 | 184 | Robust Workflow 185 |
186 |187 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. 188 |
189 |
49 |
53 |
50 | {children}
51 |
52 |
61 |
105 |
62 |
104 |
63 |
82 | 64 | Landing template for startups 65 |
66 |
67 |
81 | 68 | Our landing page template works on all devices, so you only have to set it up once, and get beautiful results forever. 69 |
70 |
71 |
72 |
75 |
78 |
79 |
80 |
83 |
89 |
97 |
57 |
115 |
58 |
114 |
60 |
61 |
113 |
62 |
77 |
78 |
63 |
76 |
64 |
68 |
75 | 65 | — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum cillum dolore eu fugiat. 66 |
67 |
79 |
94 |
95 |
80 |
93 |
81 |
85 |
92 | 82 | — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum cillum dolore eu fugiat. 83 |
84 |
96 |
111 |
112 |
97 |
110 |
98 |
102 |
109 | 99 | — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum cillum dolore eu fugiat. 100 |
101 |
41 |
55 | }
56 |
57 | );
58 | }
59 |
60 | SectionHeader.propTypes = propTypes;
61 | SectionHeader.defaultProps = defaultProps;
62 |
63 | export default SectionHeader;
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { Router } from "react-router-dom";
4 | import { createBrowserHistory } from "history";
5 |
6 | import App from './App';
7 | import * as serviceWorker from './serviceWorker';
8 |
9 | //import './App.css';
10 | import './assets/scss/style.scss';
11 |
12 | const history = createBrowserHistory();
13 |
14 | ReactDOM.render(
15 |
42 | {children}
43 | {data.title &&
44 | {data.title}
49 | }
50 | {data.paragraph &&
51 |
54 | {data.paragraph}
52 | } 53 |