- {children}
-
- );
-}
-
-FormHint.propTypes = propTypes;
-FormHint.defaultProps = defaultProps;
-
-export default FormHint;
\ No newline at end of file
diff --git a/src/components/elements/FormLabel.js b/src/components/elements/FormLabel.js
deleted file mode 100644
index 88a5d5b94..000000000
--- a/src/components/elements/FormLabel.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const propTypes = {
- children: PropTypes.node,
- labelHidden: PropTypes.bool,
- id: PropTypes.string
-}
-
-const defaultProps = {
- children: null,
- labelHidden: false,
- id: null
-}
-
-const FormLabel = ({
- className,
- children,
- labelHidden,
- id,
- ...props
-}) => {
-
- const classes = classNames(
- 'form-label',
- labelHidden && 'screen-reader',
- className
- );
-
- return (
-
- );
-}
-
-FormLabel.propTypes = propTypes;
-FormLabel.defaultProps = defaultProps;
-
-export default FormLabel;
\ No newline at end of file
diff --git a/src/components/elements/Image.js b/src/components/elements/Image.js
deleted file mode 100644
index c0f93fb04..000000000
--- a/src/components/elements/Image.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-
-const propTypes = {
- src: PropTypes.oneOfType([
- PropTypes.object,
- PropTypes.string
- ]).isRequired,
- width: PropTypes.number,
- height: PropTypes.number,
- alt: PropTypes.string
-}
-
-const defaultProps = {
- src: undefined,
- width: undefined,
- height: undefined,
- alt: undefined
-}
-
-const Image = ({
- className,
- src,
- width,
- height,
- alt,
- ...props
-}) => {
-
- const [loaded, setLoaded] = useState(false);
-
- const image = useRef(null);
-
- useEffect(() => {
- handlePlaceholder(image.current);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
- const placeholderSrc = (w, h) => {
- return `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}"%3E%3C/svg%3E`;
- }
-
- const handlePlaceholder = (img) => {
- const placeholder = document.createElement('img');
- if (!loaded) {
- img.style.display = 'none';
- img.before(placeholder);
- placeholder.src = placeholderSrc(
- img.getAttribute('width') || 0,
- img.getAttribute('height') || 0
- );
- placeholder.width = img.getAttribute('width');
- placeholder.height = img.getAttribute('height');
- placeholder.style.opacity = '0';
- img.className && placeholder.classList.add(img.className);
- placeholder.remove();
- img.style.display = '';
- }
- }
-
- function onLoad() {
- setLoaded(true);
- }
-
- return (
-
-
- {hint &&
-
- }
-
- )
-}
-
-Modal.propTypes = propTypes;
-Modal.defaultProps = defaultProps;
-
-export default Modal;
\ No newline at end of file
diff --git a/src/components/elements/Radio.js b/src/components/elements/Radio.js
deleted file mode 100644
index 3a2ab924b..000000000
--- a/src/components/elements/Radio.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const propTypes = {
- children: PropTypes.node,
- name: PropTypes.string.isRequired,
- value: PropTypes.string,
- disabled: PropTypes.bool,
- checked: PropTypes.bool
-}
-
-const defaultProps = {
- children: null,
- name: undefined,
- value: '',
- disabled: false,
- checked: false
-}
-
-const Radio = ({
- className,
- children,
- name,
- value,
- disabled,
- checked,
- ...props
-}) => {
-
- const classes = classNames(
- 'form-radio',
- className
- );
-
- return (
-
- );
-}
-
-Radio.propTypes = propTypes;
-Radio.defaultProps = defaultProps;
-
-export default Radio;
diff --git a/src/components/elements/Select.js b/src/components/elements/Select.js
deleted file mode 100644
index 8eef6c5b5..000000000
--- a/src/components/elements/Select.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import FormLabel from './FormLabel';
-import FormHint from './FormHint';
-
-const propTypes = {
- children: PropTypes.node,
- label: PropTypes.string,
- labelHidden: PropTypes.bool,
- name: PropTypes.string,
- status: PropTypes.string,
- disabled: PropTypes.bool,
- value: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- ]),
- size: PropTypes.string,
- placeholder: PropTypes.string,
- hint: PropTypes.string
-}
-
-const defaultProps = {
- children: null,
- label: '',
- labelHidden: false,
- name: undefined,
- status: '',
- disabled: false,
- value: undefined,
- size: '',
- placeholder: null,
- hint: null
-}
-
-const Select = ({
- className,
- children,
- label,
- labelHidden,
- name,
- status,
- disabled,
- value,
- size,
- placeholder,
- hint,
- ...props
-}) => {
-
- const classes = classNames(
- 'form-select',
- size && `form-select-${size}`,
- status && `form-${status}`,
- className
- );
-
- return (
- <>
- {label &&
- {video ?
-
-
- {videoTag === 'iframe' ?
- :
-
- }
-
:
- <>
- {!closeHidden &&
-
- }
-
- {children}
-
-
- }
-
-
-
-
-
-
- )}
-
- );
-}
-
-export default Banner;
\ No newline at end of file
diff --git a/src/components/layout/partials/FooterNav.js b/src/components/layout/partials/FooterNav.js
deleted file mode 100644
index b88e64ed8..000000000
--- a/src/components/layout/partials/FooterNav.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { Link } from 'react-router-dom';
-
-const FooterNav = ({
- className,
- ...props
-}) => {
-
- const classes = classNames(
- 'footer-nav',
- className
- );
-
- return (
-
- );
-}
-
-export default FooterNav;
\ No newline at end of file
diff --git a/src/components/layout/partials/FooterSocial.js b/src/components/layout/partials/FooterSocial.js
deleted file mode 100644
index b4ea601c3..000000000
--- a/src/components/layout/partials/FooterSocial.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-const FooterSocial = ({
- className,
- ...props
-}) => {
-
- const classes = classNames(
- 'footer-social',
- className
- );
-
- return (
-
- );
-}
-
-export default FooterSocial;
\ No newline at end of file
diff --git a/src/components/layout/partials/Logo.js b/src/components/layout/partials/Logo.js
deleted file mode 100644
index dff1d071e..000000000
--- a/src/components/layout/partials/Logo.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { Link } from 'react-router-dom';
-import Image from '../../elements/Image';
-
-const Logo = ({
- className,
- ...props
-}) => {
-
- const classes = classNames(
- 'brand',
- className
- );
-
- return (
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default Logo;
\ No newline at end of file
diff --git a/src/components/sections/Cta.js b/src/components/sections/Cta.js
deleted file mode 100644
index c52c70d91..000000000
--- a/src/components/sections/Cta.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { SectionProps } from '../../utils/SectionProps';
-import Input from '../elements/Input';
-
-const propTypes = {
- ...SectionProps.types,
- split: PropTypes.bool
-}
-
-const defaultProps = {
- ...SectionProps.defaults,
- split: false
-}
-
-const Cta = ({
- className,
- topOuterDivider,
- bottomOuterDivider,
- topDivider,
- bottomDivider,
- hasBgColor,
- invertColor,
- split,
- ...props
-}) => {
-
- const outerClasses = classNames(
- 'cta section center-content-mobile reveal-from-bottom',
- topOuterDivider && 'has-top-divider',
- bottomOuterDivider && 'has-bottom-divider',
- hasBgColor && 'has-bg-color',
- invertColor && 'invert-color',
- className
- );
-
- const innerClasses = classNames(
- 'cta-inner section-inner',
- topDivider && 'has-top-divider',
- bottomDivider && 'has-bottom-divider',
- split && 'cta-split'
- );
-
- return (
-
-
-
-
-
-
-
-
-
- - For previewing layouts and visual? -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Lightning fast workflow
-
- - Data-driven insights -
-- 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. -
-
-
-
-
-
-
-
-
- Lightning fast workflow
-
- - Data-driven insights -
-- 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. -
-
-
-
-
-
-
-
-
- Lightning fast workflow
-
- - Data-driven insights -
-- 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. -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - Robust Workflow -
-- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. -
-
-
-
-
-
-
-
-
-
-
-
- - Robust Workflow -
-- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. -
-
-
-
-
-
-
-
-
-
-
-
- - Robust Workflow -
-- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. -
-
-
-
-
-
-
-
-
-
-
-
- - Robust Workflow -
-- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. -
-
-
-
-
-
-
-
-
-
-
-
- - Robust Workflow -
-- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. -
-
-
-
-
-
-
-
-
-
-
-
- - Robust Workflow -
-- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. -
-
-
-
- {children}
-
-
-
-
-
-
-
- - Landing template for startups -
-
-
- - Our landing page template works on all devices, so you only have to set it up once, and get beautiful results forever. -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - — 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. -
-
-
-
-
-
-
-
-
- - — 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. -
-
-
-
-
-
-
-
-
- - — 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. -
-
-
- }
-
- );
-}
-
-SectionHeader.propTypes = propTypes;
-SectionHeader.defaultProps = defaultProps;
-
-export default SectionHeader;
\ No newline at end of file
diff --git a/src/css/additional-styles/range-slider.css b/src/css/additional-styles/range-slider.css
new file mode 100644
index 000000000..6a108245d
--- /dev/null
+++ b/src/css/additional-styles/range-slider.css
@@ -0,0 +1,57 @@
+/* Range slider */
+:root {
+ --range-thumb-size: 36px;
+}
+
+input[type=range] {
+ appearance: none;
+ background: #ccc;
+ border-radius: 3px;
+ height: 6px;
+ margin-top: (--range-thumb-size - 6px) * 0.5;
+ margin-bottom: (--range-thumb-size - 6px) * 0.5;
+ --thumb-size: #{--range-thumb-size};
+}
+
+input[type=range]::-webkit-slider-thumb {
+ appearance: none;
+ -webkit-appearance: none;
+ background-color: #000;
+ background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+ background-position: center;
+ background-repeat: no-repeat;
+ border: 0;
+ border-radius: 50%;
+ cursor: pointer;
+ height: --range-thumb-size;
+ width: --range-thumb-size;
+}
+
+input[type=range]::-moz-range-thumb {
+ background-color: #000;
+ background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+ background-position: center;
+ background-repeat: no-repeat;
+ border: 0;
+ border: none;
+ border-radius: 50%;
+ cursor: pointer;
+ height: --range-thumb-size;
+ width: --range-thumb-size;
+}
+
+input[type=range]::-ms-thumb {
+ background-color: #000;
+ background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+ background-position: center;
+ background-repeat: no-repeat;
+ border: 0;
+ border-radius: 50%;
+ cursor: pointer;
+ height: --range-thumb-size;
+ width: --range-thumb-size;
+}
+
+input[type=range]::-moz-focus-outer {
+ border: 0;
+}
\ No newline at end of file
diff --git a/src/css/additional-styles/theme.css b/src/css/additional-styles/theme.css
new file mode 100644
index 000000000..83c548e07
--- /dev/null
+++ b/src/css/additional-styles/theme.css
@@ -0,0 +1,152 @@
+.form-input:focus,
+.form-textarea:focus,
+.form-multiselect:focus,
+.form-select:focus,
+.form-checkbox:focus,
+.form-radio:focus {
+ @apply ring-0;
+}
+
+/* Hamburger button */
+.hamburger svg > *:nth-child(1),
+.hamburger svg > *:nth-child(2),
+.hamburger svg > *:nth-child(3) {
+ transform-origin: center;
+ transform: rotate(0deg);
+}
+
+.hamburger svg > *:nth-child(1) {
+ transition: y 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 0.1s ease-in;
+}
+
+.hamburger svg > *:nth-child(2) {
+ transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+
+.hamburger svg > *:nth-child(3) {
+ transition: y 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), width 0.1s 0.25s ease-in;
+}
+
+.hamburger.active svg > *:nth-child(1) {
+ opacity: 0;
+ y: 11;
+ transform: rotate(225deg);
+ transition: y 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.1s 0.12s ease-out;
+}
+
+.hamburger.active svg > *:nth-child(2) {
+ transform: rotate(225deg);
+ transition: transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.hamburger.active svg > *:nth-child(3) {
+ y: 11;
+ transform: rotate(135deg);
+ transition: y 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.1s ease-out;
+}
+
+/* Pulsing animation */
+@keyframes pulseLoop {
+ 0% { opacity: 0; transform: scale(0.1) translateZ(0); }
+ 40% { opacity: 1; }
+ 60% { opacity: 1; }
+ 100% { opacity: 0; transform: scale(2) translateZ(0); }
+}
+.pulse {
+ transform: scale(0.1);
+ opacity: 0;
+ transform-origin: center;
+ animation: pulseLoop 8000ms linear infinite;
+}
+.pulse-1 {
+ animation-delay: -2000ms;
+}
+.pulse-2 {
+ animation-delay: -4000ms;
+}
+.pulse-3 {
+ animation-delay: -6000ms;
+}
+
+/* Custom AOS distance */
+@media screen {
+ html:not(.no-js) [data-aos=fade-up] {
+ -webkit-transform: translate3d(0, 10px, 0);
+ transform: translate3d(0, 10px, 0);
+ }
+
+ html:not(.no-js) [data-aos=fade-down] {
+ -webkit-transform: translate3d(0, -10px, 0);
+ transform: translate3d(0, -10px, 0);
+ }
+
+ html:not(.no-js) [data-aos=fade-right] {
+ -webkit-transform: translate3d(-10px, 0, 0);
+ transform: translate3d(-10px, 0, 0);
+ }
+
+ html:not(.no-js) [data-aos=fade-left] {
+ -webkit-transform: translate3d(10px, 0, 0);
+ transform: translate3d(10px, 0, 0);
+ }
+
+ html:not(.no-js) [data-aos=fade-up-right] {
+ -webkit-transform: translate3d(-10px, 10px, 0);
+ transform: translate3d(-10px, 10px, 0);
+ }
+
+ html:not(.no-js) [data-aos=fade-up-left] {
+ -webkit-transform: translate3d(10px, 10px, 0);
+ transform: translate3d(10px, 10px, 0);
+ }
+
+ html:not(.no-js) [data-aos=fade-down-right] {
+ -webkit-transform: translate3d(-10px, -10px, 0);
+ transform: translate3d(-10px, -10px, 0);
+ }
+
+ html:not(.no-js) [data-aos=fade-down-left] {
+ -webkit-transform: translate3d(10px, -10px, 0);
+ transform: translate3d(10px, -10px, 0);
+ }
+
+ html:not(.no-js) [data-aos=zoom-in-up] {
+ -webkit-transform: translate3d(0, 10px, 0) scale(.6);
+ transform: translate3d(0, 10px, 0) scale(.6);
+ }
+
+ html:not(.no-js) [data-aos=zoom-in-down] {
+ -webkit-transform: translate3d(0, -10px, 0) scale(.6);
+ transform: translate3d(0, -10px, 0) scale(.6);
+ }
+
+ html:not(.no-js) [data-aos=zoom-in-right] {
+ -webkit-transform: translate3d(-10px, 0, 0) scale(.6);
+ transform: translate3d(-10px, 0, 0) scale(.6);
+ }
+
+ html:not(.no-js) [data-aos=zoom-in-left] {
+ -webkit-transform: translate3d(10px, 0, 0) scale(.6);
+ transform: translate3d(10px, 0, 0) scale(.6);
+ }
+
+ html:not(.no-js) [data-aos=zoom-out-up] {
+ -webkit-transform: translate3d(0, 10px, 0) scale(1.2);
+ transform: translate3d(0, 10px, 0) scale(1.2);
+ }
+
+ html:not(.no-js) [data-aos=zoom-out-down] {
+ -webkit-transform: translate3d(0, -10px, 0) scale(1.2);
+ transform: translate3d(0, -10px, 0) scale(1.2);
+ }
+
+ html:not(.no-js) [data-aos=zoom-out-right] {
+ -webkit-transform: translate3d(-10px, 0, 0) scale(1.2);
+ transform: translate3d(-10px, 0, 0) scale(1.2);
+ }
+
+ html:not(.no-js) [data-aos=zoom-out-left] {
+ -webkit-transform: translate3d(10px, 0, 0) scale(1.2);
+ transform: translate3d(10px, 0, 0) scale(1.2);
+ }
+}
\ No newline at end of file
diff --git a/src/css/additional-styles/toggle-switch.css b/src/css/additional-styles/toggle-switch.css
new file mode 100644
index 000000000..05b92eaa0
--- /dev/null
+++ b/src/css/additional-styles/toggle-switch.css
@@ -0,0 +1,27 @@
+/* Switch element */
+.form-switch {
+ @apply relative select-none;
+ width: 60px;
+}
+
+.form-switch label {
+ @apply block overflow-hidden cursor-pointer h-8 rounded-full;
+}
+
+.form-switch label>span:first-child {
+ @apply absolute block rounded-full;
+ width: 28px;
+ height: 28px;
+ top: 2px;
+ left: 2px;
+ right: 50%;
+ transition: all .15s ease-out;
+}
+
+.form-switch input[type="checkbox"]:checked+label {
+ @apply bg-purple-600;
+}
+
+.form-switch input[type="checkbox"]:checked+label>span:first-child {
+ left: 30px;
+}
\ No newline at end of file
diff --git a/src/css/additional-styles/utility-patterns.css b/src/css/additional-styles/utility-patterns.css
new file mode 100644
index 000000000..f7f39df81
--- /dev/null
+++ b/src/css/additional-styles/utility-patterns.css
@@ -0,0 +1,79 @@
+/* Typography */
+.h1 {
+ @apply text-4xl font-extrabold leading-tight tracking-tighter;
+}
+
+.h2 {
+ @apply text-3xl font-extrabold leading-tight tracking-tighter;
+}
+
+.h3 {
+ @apply text-3xl font-bold leading-tight;
+}
+
+.h4 {
+ @apply text-2xl font-bold leading-snug tracking-tight;
+}
+
+@screen md {
+ .h1 {
+ @apply text-5xl;
+ }
+
+ .h2 {
+ @apply text-4xl;
+ }
+}
+
+/* Buttons */
+.btn,
+.btn-sm {
+ @apply font-medium inline-flex items-center justify-center border border-transparent rounded-sm leading-snug transition duration-150 ease-in-out;
+}
+
+.btn {
+ @apply px-8 py-3;
+}
+
+.btn-sm {
+ @apply px-4 py-2;
+}
+
+/* Forms */
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select,
+.form-checkbox,
+.form-radio {
+ @apply bg-transparent border border-gray-700 focus:border-gray-500;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select,
+.form-checkbox {
+ @apply rounded-sm;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select {
+ @apply py-3 px-4;
+}
+
+.form-input,
+.form-textarea {
+ @apply placeholder-gray-500;
+}
+
+.form-select {
+ @apply pr-10;
+}
+
+.form-checkbox,
+.form-radio {
+ @apply text-purple-600;
+}
\ No newline at end of file
diff --git a/src/css/style.css b/src/css/style.css
new file mode 100644
index 000000000..df3801a28
--- /dev/null
+++ b/src/css/style.css
@@ -0,0 +1,24 @@
+@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Inter:wght@400;500;600;700;800;900&display=fallback');
+
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+
+/* Additional styles */
+@import 'additional-styles/utility-patterns.css';
+@import 'additional-styles/range-slider.css';
+@import 'additional-styles/toggle-switch.css';
+@import 'additional-styles/theme.css';
+
+@import 'tailwindcss/utilities';
+
+/* Additional Tailwind directives: https://tailwindcss.com/docs/functions-and-directives/#responsive */
+@layer utilities {
+ .rtl {
+ direction: rtl;
+ }
+}
+
+/* See Alpine.js: https://github.com/alpinejs/alpine#x-cloak */
+[x-cloak=""] {
+ display: none;
+}
diff --git a/src/css/tailwind.config.js b/src/css/tailwind.config.js
new file mode 100644
index 000000000..981730254
--- /dev/null
+++ b/src/css/tailwind.config.js
@@ -0,0 +1,75 @@
+module.exports = {
+ content: [
+ './index.html',
+ './src/**/*.{js,jsx,ts,tsx}',
+ ],
+ theme: {
+ extend: {
+ colors: {
+ gray: {
+ 100: '#EBF1F5',
+ 200: '#D9E3EA',
+ 300: '#C5D2DC',
+ 400: '#9BA9B4',
+ 500: '#707D86',
+ 600: '#55595F',
+ 700: '#33363A',
+ 800: '#25282C',
+ 900: '#151719',
+ },
+ purple: {
+ 100: '#F4F4FF',
+ 200: '#E2E1FF',
+ 300: '#CBCCFF',
+ 400: '#ABABFF',
+ 500: '#8D8DFF',
+ 600: '#5D5DFF',
+ 700: '#4B4ACF',
+ 800: '#38379C',
+ 900: '#262668',
+ },
+ },
+ spacing: {
+ '9/16': '56.25%',
+ '3/4': '75%',
+ '1/1': '100%',
+ },
+ fontFamily: {
+ inter: ['Inter', 'sans-serif'],
+ 'architects-daughter': ['"Architects Daughter"', 'sans-serif']
+ },
+ fontSize: {
+ xs: '0.75rem',
+ sm: '0.875rem',
+ base: '1rem',
+ lg: '1.125rem',
+ xl: '1.25rem',
+ '2xl': '1.5rem',
+ '3xl': '2rem',
+ '4xl': '2.5rem',
+ '5xl': '3.25rem',
+ '6xl': '4rem',
+ },
+ inset: {
+ 'full': '100%',
+ },
+ letterSpacing: {
+ tighter: '-0.02em',
+ tight: '-0.01em',
+ normal: '0',
+ wide: '0.01em',
+ wider: '0.02em',
+ widest: '0.4em',
+ },
+ minWidth: {
+ '10': '2.5rem',
+ },
+ scale: {
+ '98': '.98'
+ },
+ },
+ },
+ plugins: [
+ require('@tailwindcss/forms'),
+ ],
+};
diff --git a/src/favicon.svg b/src/favicon.svg
new file mode 100644
index 000000000..de4aeddc1
--- /dev/null
+++ b/src/favicon.svg
@@ -0,0 +1,15 @@
+
diff --git a/src/images/favicon.png b/src/images/favicon.png
new file mode 100644
index 000000000..99860bc42
Binary files /dev/null and b/src/images/favicon.png differ
diff --git a/src/images/features-03-image-01.png b/src/images/features-03-image-01.png
new file mode 100644
index 000000000..01bb0457f
Binary files /dev/null and b/src/images/features-03-image-01.png differ
diff --git a/src/images/features-03-image-02.png b/src/images/features-03-image-02.png
new file mode 100644
index 000000000..6986e7891
Binary files /dev/null and b/src/images/features-03-image-02.png differ
diff --git a/src/images/features-03-image-03.png b/src/images/features-03-image-03.png
new file mode 100644
index 000000000..8e5479bef
Binary files /dev/null and b/src/images/features-03-image-03.png differ
diff --git a/src/images/hero-image-01.jpg b/src/images/hero-image-01.jpg
new file mode 100644
index 000000000..1ffc8239f
Binary files /dev/null and b/src/images/hero-image-01.jpg differ
diff --git a/src/images/testimonial-01.jpg b/src/images/testimonial-01.jpg
new file mode 100644
index 000000000..e0fec24af
Binary files /dev/null and b/src/images/testimonial-01.jpg differ
diff --git a/src/images/testimonial-02.jpg b/src/images/testimonial-02.jpg
new file mode 100644
index 000000000..593194c46
Binary files /dev/null and b/src/images/testimonial-02.jpg differ
diff --git a/src/images/testimonial-03.jpg b/src/images/testimonial-03.jpg
new file mode 100644
index 000000000..1618ca0fa
Binary files /dev/null and b/src/images/testimonial-03.jpg differ
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 82081fdeb..000000000
--- a/src/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Router } from "react-router-dom";
-import { createBrowserHistory } from "history";
-
-import App from './App';
-import * as serviceWorker from './serviceWorker';
-
-//import './App.css';
-import './assets/scss/style.scss';
-
-const history = createBrowserHistory();
-
-ReactDOM.render(
-
- {children}
- {data.title &&
- {data.title}
- }
- {data.paragraph &&
-
- {data.paragraph}
- } -
+ {/* Site header */}
+
+ {/* Page illustration */}
+
+
+ {/* Page sections */}
+
+
+
+ );
+}
+
+export default Home;
\ No newline at end of file
diff --git a/src/pages/ResetPassword.jsx b/src/pages/ResetPassword.jsx
new file mode 100644
index 000000000..017ad49f2
--- /dev/null
+++ b/src/pages/ResetPassword.jsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import Header from '../partials/Header';
+import PageIllustration from '../partials/PageIllustration';
+import Banner from '../partials/Banner';
+
+function ResetPassword() {
+ return (
+
+
+ {/* Site header */}
+
+
+ {/* Page illustration */}
+
+
+
+
+
+
+
+
+ );
+}
+
+export default ResetPassword;
\ No newline at end of file
diff --git a/src/pages/SignIn.jsx b/src/pages/SignIn.jsx
new file mode 100644
index 000000000..f3b610f4f
--- /dev/null
+++ b/src/pages/SignIn.jsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import Header from '../partials/Header';
+import PageIllustration from '../partials/PageIllustration';
+import Banner from '../partials/Banner';
+
+function SignIn() {
+ return (
+
+
+
+
+ {/* Page header */}
+
+
+
+
+ {/* Form */}
+ Forgot your password?
+We'll email you instructions on how to reset it.
+
+
+
+
+
+ Cancel
+
+
+
+ {/* Site header */}
+
+
+ {/* Page illustration */}
+
+
+
+
+
+
+
+
+ );
+}
+
+export default SignIn;
\ No newline at end of file
diff --git a/src/pages/SignUp.jsx b/src/pages/SignUp.jsx
new file mode 100644
index 000000000..b5a2ef765
--- /dev/null
+++ b/src/pages/SignUp.jsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import Header from '../partials/Header';
+import PageIllustration from '../partials/PageIllustration';
+import Banner from '../partials/Banner';
+
+function SignUp() {
+ return (
+
+
+
+
+ {/* Page header */}
+
+
+
+
+ {/* Form */}
+ Welcome back. We exist to make entrepreneurship easier.
+
+
+
+
+
+
+
+
+ Or, sign in with your email
+
+
+ Don’t you have an account? Sign up
+
+
+
+ {/* Site header */}
+
+
+ {/* Page illustration */}
+
+
+
+
+
+
+
+
+ );
+}
+
+export default SignUp;
\ No newline at end of file
diff --git a/src/partials/Banner.jsx b/src/partials/Banner.jsx
new file mode 100644
index 000000000..04daac55f
--- /dev/null
+++ b/src/partials/Banner.jsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+
+function Banner() {
+
+ const [bannerOpen, setBannerOpen] = useState(true);
+
+ return (
+ <>
+ {bannerOpen && (
+
+
+
+
+ {/* Page header */}
+
+
+
+
+ {/* Form */}
+ Welcome. We exist to make entrepreneurship easier.
+
+
+
+
+
+
+
+
+ Or, register with your email
+
+
+ Already using Open PRO? Sign in
+
+
+
+ )}
+
+ );
+}
+
+export default Banner;
\ No newline at end of file
diff --git a/src/partials/FeaturesBlocks.jsx b/src/partials/FeaturesBlocks.jsx
new file mode 100644
index 000000000..f84c24a29
--- /dev/null
+++ b/src/partials/FeaturesBlocks.jsx
@@ -0,0 +1,102 @@
+import React from 'react';
+
+function FeaturesBlocks() {
+ return (
+
+
+
+
+
+
+
+
+ {/* Section header */}
+
+
+
+
+ {/* Items */}
+ The majority our customers do not understand their workflows.
+Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+ {/* 1st item */}
+
+
+
+
+
+
+ {/* 2nd item */}
+ Instant Features
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
+
+
+
+
+ {/* 3rd item */}
+ Instant Features
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
+
+
+
+
+ {/* 4th item */}
+ Instant Features
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
+
+
+
+
+ {/* 5th item */}
+ Instant Features
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
+
+
+
+
+ {/* 6th item */}
+ Instant Features
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
+
+
+
+
+ Instant Features
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
+
+
+
+
+ {/* Section header */}
+
+
+
+
+ {/* Items */}
+ Reach goals that matter
+ One product, unlimited solutions
+Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit laborum — semper quis lectus nulla.
+
+
+ {/* 1st item */}
+
+
+
+ {/* Image */}
+
+
+ {/* 2nd item */}
+
+ 
+
+ {/* Content */}
+
+
+
+
+ More speed. Less spend
+ Keep projects on schedule
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+-
+
- + + Duis aute irure dolor in reprehenderit + +
- + + Excepteur sint occaecat + +
- + + Amet consectetur adipiscing elit + +
+ {/* Image */}
+
+
+ {/* 3rd item */}
+
+ 
+
+ {/* Content */}
+
+
+
+
+ More speed. Less spend
+ Keep projects on schedule
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+-
+
- + + Duis aute irure dolor in reprehenderit + +
- + + Excepteur sint occaecat + +
- + + Amet consectetur adipiscing elit + +
+ {/* Image */}
+
+
+
+ 
+
+ {/* Content */}
+
+
+
+
+ More speed. Less spend
+ Keep projects on schedule
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+-
+
- + + Duis aute irure dolor in reprehenderit + +
- + + Excepteur sint occaecat + +
- + + Amet consectetur adipiscing elit + +
+
+
+
+ {/* Site branding */}
+
+
+ {/* Logo */}
+
+
+
+
+
+ {/* Desktop navigation */}
+
+
+ {/* Mobile menu */}
+
+
+ {/* Hamburger button */}
+
+
+ {/*Mobile navigation */}
+
+
+
+
+
+ {/* Illustration behind hero content */}
+
+
+ {/* Hero content */}
+
+
+ {/* Section header */}
+
+
+
+
+ {/* Hero image */}
+ + Landing template for startups +
++ Our landing page template works on all devices, so you only have to set it up once, and get beautiful results forever. +
+
+
+
+
+
+ Learn more
+
+
+
+
+
+ {/* Modal */}
+ setVideoModalOpen(false)}>
+
+
+
+
+
+
+
+ {/* CTA box */}
+
+
+
+ {/* Background illustration */}
+
+
+
+
+
+
+ {/* CTA content */}
+
+
+
+
+
+ {/* CTA form */}
+
+
+ Stay in the loop
+Join our newsletter to get top news before anyone else.
+
+
+
+
+ {/* Section header */}
+
+
+
+
+ {/* Testimonials */}
+ Don't take our word for it
+Vitae aliquet nec ullamcorper sit amet risus nullam eget felis semper quis lectus nulla at volutpat diam ut venenatis tellus—in ornare.
+
+
+ {/* 1st testimonial */}
+
+
+
+
+
+ {/* 2nd testimonial */}
+
+
+
+ 
+
+
+ — Open PRO lets me quickly get the insights I care about so that I can focus on my productive work. I've had Open PRO for about 24 hours now and I honestly don't know how I functioned without it before.+
+ Anastasia Dan - UX Board
+
+
+
+
+ {/* 3rd testimonial */}
+
+
+
+ 
+
+
+ — Open PRO lets me quickly get the insights I care about so that I can focus on my productive work. I've had Open PRO for about 24 hours now and I honestly don't know how I functioned without it before.+
+ Anastasia Dan - UX Board
+
+
+
+
+
+
+
+ 
+
+
+ — Open PRO lets me quickly get the insights I care about so that I can focus on my productive work. I've had Open PRO for about 24 hours now and I honestly don't know how I functioned without it before.+
+ Anastasia Dan - UX Board
+
+
+ {children}
+
+