├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
├── assets
│ ├── clients.jpg
│ ├── hero.mp4
│ ├── logo.png
│ ├── security.jpg
│ ├── svg
│ │ ├── ChartUp.svg
│ │ ├── Connection.svg
│ │ ├── Deal.svg
│ │ └── Work.svg
│ └── teamwork.jpg
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
├── src
├── App.js
├── components
│ ├── Carousel
│ │ ├── Carousel.js
│ │ └── CarouselStyles.js
│ ├── Content
│ │ ├── Content.js
│ │ └── ContentStyles.js
│ ├── Features
│ │ ├── Features.js
│ │ └── FeaturesStyles.js
│ ├── Footer
│ │ ├── Footer.js
│ │ └── FooterStyles.js
│ ├── Form
│ │ ├── Form.js
│ │ ├── FormStyles.js
│ │ └── validateForm.js
│ ├── Hero
│ │ ├── Hero.js
│ │ └── HeroStyles.js
│ ├── Navbar
│ │ ├── Navbar.js
│ │ └── NavbarStyles.js
│ ├── Pricing
│ │ ├── Pricing.js
│ │ └── PricingStyles.js
│ └── index.js
├── data
│ ├── CarouselData.js
│ ├── FeaturesData.js
│ ├── FooterData.js
│ ├── HeroData.js
│ ├── NavbarData.js
│ └── PricingData.js
├── globalStyles.js
├── index.js
└── pages
│ ├── Home.js
│ ├── PricingPage.js
│ └── SignupPage.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `yarn start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 |
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 |
17 | ### `yarn test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `yarn build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `yarn eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 |
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 |
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
48 | ### Code Splitting
49 |
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 |
52 | ### Analyzing the Bundle Size
53 |
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 |
56 | ### Making a Progressive Web App
57 |
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 |
60 | ### Advanced Configuration
61 |
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 |
64 | ### Deployment
65 |
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 |
68 | ### `yarn build` fails to minify
69 |
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-finance-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.11.4",
7 | "@testing-library/react": "^11.1.0",
8 | "@testing-library/user-event": "^12.1.10",
9 | "react": "^17.0.2",
10 | "react-dom": "^17.0.2",
11 | "react-scripts": "4.0.3",
12 | "web-vitals": "^1.0.1",
13 | "framer-motion": "^4.1.17",
14 | "react-icons": "^3.10.0",
15 | "react-intersection-observer": "^8.32.1",
16 | "react-router-dom": "^5.2.0",
17 | "react-slick": "^0.28.1",
18 | "styled-components": "^5.1.1"
19 | },
20 | "scripts": {
21 | "start": "react-scripts start",
22 | "build": "react-scripts build",
23 | "test": "react-scripts test",
24 | "eject": "react-scripts eject"
25 | },
26 | "eslintConfig": {
27 | "extends": [
28 | "react-app",
29 | "react-app/jest"
30 | ]
31 | },
32 | "browserslist": {
33 | "production": [
34 | ">0.2%",
35 | "not dead",
36 | "not op_mini all"
37 | ],
38 | "development": [
39 | "last 1 chrome version",
40 | "last 1 firefox version",
41 | "last 1 safari version"
42 | ]
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/public/assets/clients.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-data-website/71465ccfdc2926cf1e4a3820daf736a59124333e/public/assets/clients.jpg
--------------------------------------------------------------------------------
/public/assets/hero.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-data-website/71465ccfdc2926cf1e4a3820daf736a59124333e/public/assets/hero.mp4
--------------------------------------------------------------------------------
/public/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-data-website/71465ccfdc2926cf1e4a3820daf736a59124333e/public/assets/logo.png
--------------------------------------------------------------------------------
/public/assets/security.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-data-website/71465ccfdc2926cf1e4a3820daf736a59124333e/public/assets/security.jpg
--------------------------------------------------------------------------------
/public/assets/svg/ChartUp.svg:
--------------------------------------------------------------------------------
1 |
37 |
--------------------------------------------------------------------------------
/public/assets/svg/Connection.svg:
--------------------------------------------------------------------------------
1 |
53 |
--------------------------------------------------------------------------------
/public/assets/svg/Deal.svg:
--------------------------------------------------------------------------------
1 |
185 |
--------------------------------------------------------------------------------
/public/assets/svg/Work.svg:
--------------------------------------------------------------------------------
1 |
31 |
--------------------------------------------------------------------------------
/public/assets/teamwork.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-data-website/71465ccfdc2926cf1e4a3820daf736a59124333e/public/assets/teamwork.jpg
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-data-website/71465ccfdc2926cf1e4a3820daf736a59124333e/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
14 |
15 |
24 |
25 |
26 |
27 |
31 | React App
32 |
33 |
34 |
35 |
36 |
46 |
47 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-data-website/71465ccfdc2926cf1e4a3820daf736a59124333e/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-data-website/71465ccfdc2926cf1e4a3820daf736a59124333e/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import GlobalStyle from './globalStyles';
3 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
4 | import Navbar from './components/Navbar/Navbar';
5 |
6 | //Pages
7 | import Home from './pages/Home';
8 | import SignUp from './pages/SignupPage';
9 | import Pricing from './pages/PricingPage';
10 | import Footer from './components/Footer/Footer';
11 |
12 | function App() {
13 | return (
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | );
25 | }
26 |
27 | export default App;
28 |
--------------------------------------------------------------------------------
/src/components/Carousel/Carousel.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { FaArrowCircleLeft, FaArrowCircleRight } from 'react-icons/fa';
3 | import { IconContext } from 'react-icons';
4 | import { data, sliderSettings } from '../../data/CarouselData';
5 | import { Row, Heading, Section, TextWrapper } from '../../globalStyles';
6 | import {
7 | ButtonContainer,
8 | ReviewSlider,
9 | ImageWrapper,
10 | CarouselImage,
11 | CardButton,
12 | } from './CarouselStyles';
13 |
14 | const Carousel = () => {
15 | const [sliderRef, setSliderRef] = useState(null);
16 |
17 | return (
18 |
19 |
20 |
21 | Find more about us
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | {data.map((el, index) => (
33 |
34 |
35 |
36 | {el.title}
37 |
38 |
39 | {el.description}
40 |
41 | Learn More
42 |
43 | ))}
44 |
45 |
46 | );
47 | };
48 |
49 | export default Carousel;
50 |
--------------------------------------------------------------------------------
/src/components/Carousel/CarouselStyles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Row } from '../../globalStyles';
3 | import Slider from 'react-slick';
4 |
5 | export const CarouselImage = styled.img`
6 | width: 100%;
7 | height: 300px;
8 | border-radius: 10px 10px 0 0;
9 | object-fit: cover;
10 | vertical-align: middle;
11 | `;
12 |
13 | export const ImageWrapper = styled.div`
14 | width: 90%;
15 | display: flex !important;
16 | justify-content: center;
17 | flex-direction: column;
18 | align-items: center;
19 | border-radius: 10px;
20 | outline: none;
21 | height: 430px;
22 |
23 | @media screen and (min-width: 440px) {
24 | border: 1px solid #bebebe;
25 | }
26 | `;
27 |
28 | export const ButtonContainer = styled(Row)`
29 | & svg {
30 | margin: 0 1rem;
31 | cursor: pointer;
32 | }
33 |
34 | & svg:hover {
35 | opacity: 0.7;
36 | transition: opacity 0.2s ease-in;
37 | }
38 | @media screen and (max-width: 960px) {
39 | margin: 0 auto;
40 | }
41 | `;
42 |
43 | export const ReviewSlider = styled(Slider)`
44 | width: 100%;
45 |
46 | .slick-track {
47 | display: flex;
48 | padding: 30px;
49 | gap: 3rem;
50 | }
51 | .slick-slide {
52 | display: flex;
53 | justify-content: center;
54 | margin-bottom: 1;
55 | outline: none;
56 | }
57 |
58 | .slick-list {
59 | overflow: hidden;
60 | }
61 | `;
62 |
63 | export const CardButton = styled.button`
64 | background-color: #1d609c;
65 | font-size: 1.3rem;
66 | padding: 5px 10px;
67 | color: #fff;
68 | cursor: pointer;
69 | width: 100%;
70 | font-weight: 600;
71 | margin: auto 0 0 0;
72 | border: none;
73 | border-radius: 0 0 10px 10px;
74 |
75 | &:hover {
76 | background-color: #112f4a;
77 | transition: background-color 0.2s ease-in;
78 | }
79 | `;
80 |
--------------------------------------------------------------------------------
/src/components/Content/Content.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { Container, Section } from '../../globalStyles';
3 | import {
4 | ContentRow,
5 | TextWrapper,
6 | TopLine,
7 | Heading,
8 | ContentButton,
9 | Subtitle,
10 | ImgWrapper,
11 | Img,
12 | ContentColumn,
13 | } from './ContentStyles.js';
14 |
15 | import { useInView } from 'react-intersection-observer';
16 | import { useAnimation } from 'framer-motion';
17 |
18 | export const Content = ({
19 | primary,
20 | topLine,
21 | headline,
22 | description,
23 | buttonLabel,
24 | img,
25 | alt,
26 | inverse,
27 | reverse,
28 | }) => {
29 | const initial = { opacity: 0, y: 30 };
30 | const animation = useAnimation();
31 |
32 | const { ref, inView } = useInView({ threshold: 0.2 });
33 |
34 | useEffect(() => {
35 | if (inView) {
36 | animation.start({
37 | opacity: 1,
38 | y: 0,
39 | });
40 | }
41 | }, [inView, animation]);
42 |
43 | return (
44 |
45 |
46 |
47 |
48 |
49 |
54 | {topLine.text}
55 |
56 |
62 | {headline}
63 |
64 |
70 | {description}
71 |
72 |
79 | {buttonLabel}
80 |
81 |
82 |
83 |
88 |
89 |
95 |
96 |
97 |
98 |
99 |
100 | );
101 | };
102 |
--------------------------------------------------------------------------------
/src/components/Content/ContentStyles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { motion } from 'framer-motion';
3 |
4 | export const ContentRow = styled.div`
5 | display: flex;
6 | margin: 0 -15px -15px -15px;
7 | flex-wrap: wrap;
8 | align-items: center;
9 | flex-direction: ${({ reverse }) => (reverse ? 'row-reverse' : 'row')};
10 | justify-content: space-around;
11 |
12 | @media screen and (max-width: 768px) {
13 | flex-direction: column-reverse;
14 | }
15 | `;
16 |
17 | export const ContentColumn = styled(motion.div)`
18 | margin-bottom: 15px;
19 | padding-right: 15px;
20 | padding-left: 15px;
21 | flex: 1;
22 | z-index: 10;
23 | display: flex;
24 | flex-direction: column;
25 | @media screen and (max-width: 768px) {
26 | max-width: 100% !important;
27 | flex-basis: 100%;
28 | justify-content: center;
29 | align-items: center;
30 | }
31 | `;
32 |
33 | export const TextWrapper = styled.div`
34 | max-width: 540px;
35 | padding-top: 0;
36 |
37 | @media screen and (max-width: 768px) {
38 | padding-bottom: 65px;
39 | > h1,
40 | p {
41 | text-align: center;
42 | }
43 | display: flex;
44 | flex-direction: column;
45 | align-items: center;
46 | }
47 |
48 | > img {
49 | width: 300px;
50 | margin-left: -3px;
51 | }
52 | `;
53 |
54 | export const ImgWrapper = styled(motion.div)`
55 | display: flex;
56 | justify-content: 'flex-end';
57 | max-height: 700px;
58 | justify-content: center;
59 | position: relative;
60 | `;
61 |
62 | export const TopLine = styled(motion.div)`
63 | font-size: 0.9rem;
64 | line-height: 16px;
65 | font-weight: 550;
66 | letter-spacing: 1.4px;
67 | margin-bottom: 1.3rem;
68 | color: #979797;
69 | `;
70 |
71 | export const Img = styled(motion.img)`
72 | padding-right: 0;
73 | border: 0;
74 | max-width: 100%;
75 | vertical-align: middle;
76 | display: inline-block;
77 | object-fit: cover;
78 | max-height: 700px;
79 | z-index: 1;
80 | `;
81 |
82 | export const Heading = styled(motion.h2)`
83 | margin-bottom: 24px;
84 | font-size: 3rem;
85 | line-height: 1.1;
86 | font-weight: 600;
87 | color: ${({ inverse }) => (inverse ? '#0c4577' : 'white')};
88 |
89 | @media screen and (max-width: 768px) {
90 | text-align: center;
91 | }
92 | `;
93 |
94 | export const Subtitle = styled(motion.p)`
95 | max-width: 440px;
96 | margin-bottom: 35px;
97 | line-height: 24px;
98 | color: ${({ inverse }) => (inverse ? '#6a6a6a' : 'white')};
99 | `;
100 |
101 | export const ContentButton = styled(motion.button)`
102 | height: 3rem;
103 | padding: 16px 32px;
104 | font-weight: 700;
105 | font-size: 0.8rem;
106 | line-height: 18px;
107 | letter-spacing: 1.54px;
108 | text-transform: uppercase;
109 | cursor: pointer;
110 | background: none;
111 | color: ${({ inverse }) => (inverse ? '#0c4577' : 'white')};
112 |
113 | border-radius: 4px;
114 | white-space: nowrap;
115 | padding: ${({ big }) => (big ? '12px 64px' : '10px 20px')};
116 | font-size: ${({ fontBig }) => (fontBig ? '20px' : '16px')};
117 | outline: none;
118 | border: 2px solid ${({ inverse }) => (inverse ? '#0c4577' : 'white')};
119 | cursor: pointer;
120 | position: relative;
121 | overflow: hidden;
122 |
123 | &:before {
124 | background: ${({ inverse }) => (inverse ? '#0c4577' : 'white')};
125 | content: '';
126 | position: absolute;
127 | top: 50%;
128 | left: 50%;
129 | transform: translate(-50%, -50%);
130 | z-index: -1;
131 | transition: all 0.6s ease;
132 | width: 100%;
133 | height: 0%;
134 | transform: translate(-50%, -50%) rotate(45deg);
135 | }
136 |
137 | &:hover:before {
138 | height: 500%;
139 | }
140 |
141 | &:hover {
142 | color: ${({ inverse }) => (inverse ? 'white' : 'black')};
143 | }
144 | `;
145 |
--------------------------------------------------------------------------------
/src/components/Features/Features.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Container, Section } from '../../globalStyles';
3 | import {
4 | FeatureText,
5 | FeatureTitle,
6 | FeatureWrapper,
7 | FeatureColumn,
8 | FeatureImageWrapper,
9 | FeatureName,
10 | FeatureTextWrapper,
11 | } from './FeaturesStyles';
12 | import { featuresData } from '../../data/FeaturesData';
13 |
14 | const Features = () => {
15 | const initial = {
16 | y: 40,
17 | opacity: 0,
18 | };
19 | const animate = {
20 | y: 0,
21 | opacity: 1,
22 | };
23 |
24 | return (
25 |
26 |
27 |
28 | What We Offer
29 |
30 |
31 | {featuresData.map((el, index) => (
32 |
38 |
39 | {el.icon}
40 |
41 | {el.name}
42 | {el.description}
43 |
44 | ))}
45 |
46 |
47 |
48 | );
49 | };
50 |
51 | export default Features;
52 |
--------------------------------------------------------------------------------
/src/components/Features/FeaturesStyles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { motion } from 'framer-motion';
3 |
4 | export const FeatureTitle = styled.h2`
5 | text-align: center;
6 | font-size: clamp(1.3rem, 13vw, 3.1rem);
7 | line-height: 1.06;
8 | letter-spacing: 0.4rem;
9 | margin: auto;
10 | `;
11 |
12 | export const FeatureTextWrapper = styled.div`
13 | position: relative;
14 | padding: 0 0 20px;
15 | margin-bottom: 4rem;
16 | `;
17 |
18 | export const FeatureWrapper = styled.div`
19 | display: grid;
20 | grid-template-columns: repeat(3, 1fr);
21 | margin-top: 4rem;
22 | grid-gap: 2rem;
23 |
24 | @media screen and (max-width: 1100px) {
25 | grid-template-columns: repeat(2, 1fr);
26 | grid-row-gap: 3rem;
27 | }
28 |
29 | @media screen and (max-width: 568px) {
30 | grid-template-columns: repeat(1, 1fr);
31 | }
32 | `;
33 |
34 | export const FeatureColumn = styled(motion.div)`
35 | display: flex;
36 | flex-flow: column;
37 | justify-content: center;
38 | align-items: center;
39 | background: #f3f3f3;
40 | padding: 10px;
41 | box-shadow: 0 0 32px 8px #d0d0d0;
42 | border-radius: 20px;
43 | `;
44 |
45 | export const FeatureImageWrapper = styled.div`
46 | margin-bottom: 1rem;
47 | border-radius: 50%;
48 | border: 2px solid #000;
49 |
50 | padding: 30px;
51 | `;
52 | export const FeatureName = styled.h3`
53 | font-weight: 600;
54 | font-size: 1.3rem;
55 | letter-spacing: 2px;
56 |
57 | @media screen and (max-width: 768px) {
58 | font-weight: 400;
59 | font-size: 1rem;
60 | letter-spacing: 1.3px;
61 | }
62 | `;
63 | export const FeatureText = styled.p`
64 | margin: 1rem 0 auto;
65 | text-align: center;
66 | font-size: 0.9rem;
67 | line-height: 1.73;
68 | letter-spacing: 0.5px;
69 | color: #626881;
70 |
71 | @media screen and (max-width: 768px) {
72 | display: none;
73 | }
74 | `;
75 |
--------------------------------------------------------------------------------
/src/components/Footer/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | FooterLinkItems,
4 | FooterLinkTitle,
5 | FooterLink,
6 | FooterLogo,
7 | SocialIcon,
8 | FooterRights,
9 | FooterSocialIcon,
10 | FooterWrapper,
11 | FooterAddress,
12 | FooterColumn,
13 | FooterGrid,
14 | } from './FooterStyles';
15 | import { footerData, footerSocialData } from '../../data/FooterData';
16 | import { Row, Section } from '../../globalStyles';
17 |
18 | function Footer() {
19 | return (
20 |
21 |
22 |
23 |
45 | {footerData.map((footerItem, index) => (
46 |
47 | {footerItem.title}
48 | {footerItem.links.map((link, linkIndex) => (
49 |
50 | {link}
51 |
52 | ))}
53 |
54 | ))}
55 |
56 | Delta © 2021
57 |
58 |
59 | );
60 | }
61 |
62 | export default Footer;
63 |
--------------------------------------------------------------------------------
/src/components/Footer/FooterStyles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Link } from 'react-router-dom';
3 | import { Column, Row } from '../../globalStyles';
4 |
5 | export const FooterContainer = styled.div`
6 | background-color: #101522;
7 | padding: 4rem 0 2rem 0;
8 | `;
9 |
10 | export const FooterWrapper = styled.div`
11 | max-width: 1280px;
12 | margin-left: auto;
13 | margin-right: auto;
14 | `;
15 |
16 | export const FooterSubscription = styled.section`
17 | display: flex;
18 | flex-direction: column;
19 | justify-content: center;
20 | align-items: center;
21 | text-align: center;
22 | margin-bottom: 24px;
23 | padding: 24px;
24 | color: #fff;
25 | `;
26 |
27 | export const FooterSubHeading = styled.p`
28 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial,
29 | sans-serif;
30 | margin-bottom: 24px;
31 | font-size: 24px;
32 | `;
33 |
34 | export const FooterRow = styled(Row)`
35 | flex-wrap: wrap;
36 | @media screen and (max-width: 820px) {
37 | > div {
38 | width: 20%;
39 | }
40 |
41 | > div:first-child {
42 | width: 100%;
43 | }
44 | }
45 |
46 | @media screen and (max-width: 420px) {
47 | flex-direction: column;
48 | align-items: center;
49 |
50 | * {
51 | width: 100%;
52 | text-align: center;
53 | }
54 | }
55 | `;
56 |
57 | export const FooterGrid = styled.div`
58 | display: grid;
59 | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
60 | justify-content: center;
61 | align-items: center;
62 | `;
63 |
64 | export const FooterColumn = styled(Column)`
65 | @media screen and (max-width: 999px) {
66 | align-items: center;
67 | grid-column: 1/-1;
68 | }
69 | `;
70 |
71 | export const FooterSubText = styled.p`
72 | margin-bottom: 24px;
73 | font-size: 20px;
74 | `;
75 |
76 | export const FooterLinksContainer = styled.div`
77 | width: 100%;
78 | max-width: 1000px;
79 | display: flex;
80 | justify-content: center;
81 |
82 | @media screen and (max-width: 820px) {
83 | padding-top: 32px;
84 | }
85 | `;
86 |
87 | export const FooterLinkItems = styled.div`
88 | display: flex;
89 | flex-direction: column;
90 | margin: 16px;
91 | text-align: left;
92 | box-sizing: border-box;
93 | color: #fff;
94 |
95 | @media screen and (max-width: 1000px) {
96 | align-items: center;
97 | }
98 | `;
99 |
100 | export const FooterLinkTitle = styled.h2`
101 | margin-bottom: 16px;
102 | `;
103 |
104 | export const FooterLink = styled(Link)`
105 | color: #fff;
106 | text-decoration: none;
107 | margin-bottom: 0.5rem;
108 |
109 | &:hover {
110 | color: #0467fb;
111 | transition: 0.3s ease-out;
112 | }
113 | `;
114 |
115 | export const FooterLogo = styled(Link)`
116 | color: #fff;
117 | justify-self: start;
118 | cursor: pointer;
119 | text-decoration: none;
120 | font-size: 2rem;
121 | display: flex;
122 | align-items: center;
123 | margin-bottom: 16px;
124 | `;
125 |
126 | export const SocialIcon = styled.img`
127 | margin-right: 10px;
128 | width: 40px;
129 | `;
130 |
131 | export const FooterRights = styled.div`
132 | color: #fff;
133 | margin-bottom: 16px;
134 | width: 100%;
135 | font-size: 0.8rem;
136 | text-align: center;
137 | border-top: 1px solid #2d3748;
138 | padding: 1rem 0;
139 | margin: 1rem 0 0;
140 | `;
141 |
142 | export const FooterSocialIcon = styled.a`
143 | color: #fff;
144 | font-size: 24px;
145 | `;
146 |
147 | export const FooterAddress = styled.div`
148 | color: white;
149 | margin: 0.4rem auto 0.4rem;
150 | max-width: 20rem;
151 | font-weight: 500;
152 | font-size: 0.875rem;
153 | line-height: 2;
154 | text-align: center;
155 |
156 | @media screen and (min-width: 1000px) {
157 | margin-left: 0px;
158 | text-align: left;
159 | margin-right: 1rem;
160 | }
161 | `;
162 |
--------------------------------------------------------------------------------
/src/components/Form/Form.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import {
3 | FormColumn,
4 | FormWrapper,
5 | FormInput,
6 | FormSection,
7 | FormRow,
8 | FormLabel,
9 | FormInputRow,
10 | FormMessage,
11 | FormButton,
12 | FormTitle,
13 | } from './FormStyles';
14 | import { Container } from '../../globalStyles';
15 | import validateForm from './validateForm';
16 |
17 | const Form = () => {
18 | const [name, setName] = useState('');
19 | const [email, setEmail] = useState('');
20 | const [password, setPassword] = useState('');
21 | const [confirmPass, setConfirmPass] = useState('');
22 | const [error, setError] = useState(null);
23 | const [success, setSuccess] = useState(null);
24 |
25 | const handleSubmit = (e) => {
26 | e.preventDefault();
27 | const resultError = validateForm({ name, email, password, confirmPass });
28 |
29 | if (resultError !== null) {
30 | setError(resultError);
31 | return;
32 | }
33 | setName('');
34 | setEmail('');
35 | setPassword('');
36 | setConfirmPass('');
37 | setError(null);
38 | setSuccess('Application was submitted!');
39 | };
40 |
41 | const messageVariants = {
42 | hidden: { y: 30, opacity: 0 },
43 | animate: { y: 0, opacity: 1, transition: { delay: 0.2, duration: 0.4 } },
44 | };
45 |
46 | const formData = [
47 | { label: 'Name', value: name, onChange: (e) => setName(e.target.value), type: 'text' },
48 | { label: 'Email', value: email, onChange: (e) => setEmail(e.target.value), type: 'email' },
49 | {
50 | label: 'Password',
51 | value: password,
52 | onChange: (e) => setPassword(e.target.value),
53 | type: 'password',
54 | },
55 | {
56 | label: 'Confirm Password',
57 | value: confirmPass,
58 | onChange: (e) => setConfirmPass(e.target.value),
59 | type: 'password',
60 | },
61 | ];
62 | return (
63 |
64 |
65 |
66 |
67 | Sign up
68 |
69 | {formData.map((el, index) => (
70 |
71 | {el.label}
72 |
78 |
79 | ))}
80 |
81 | Signup
82 |
83 | {error && (
84 |
90 | {error}
91 |
92 | )}
93 | {success && (
94 |
99 | {success}
100 |
101 | )}
102 |
103 |
104 |
105 |
106 | );
107 | };
108 |
109 | export default Form;
110 |
--------------------------------------------------------------------------------
/src/components/Form/FormStyles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { motion } from 'framer-motion';
3 |
4 | export const FormSection = styled.div`
5 | /* color: #fff; */
6 | padding: 160px 0;
7 | /* background: ${({ inverse }) => (inverse ? '#101522' : '#fff')}; */
8 | background: #101522;
9 | `;
10 |
11 | export const FormTitle = styled.h1`
12 | margin-bottom: 24px;
13 | font-size: 48px;
14 | line-height: 1.1;
15 | font-weight: 600;
16 | `;
17 |
18 | export const FormContainer = styled.div`
19 | display: flex;
20 | `;
21 | export const FormColumn = styled.div`
22 | /* margin-bottom: 15px; */
23 | padding: 50px;
24 | background: white;
25 | border: 20px;
26 | /* padding: ${({ small }) => (small ? '0 50px' : '0 15px')}; */
27 | flex: 1;
28 | max-width: 60%;
29 | display: flex;
30 | justify-content: center;
31 | align-items: center;
32 | border-radius: 20px;
33 | flex-direction: column;
34 | @media screen and (max-width: 768px) {
35 | max-width: 100% !important;
36 | flex-basis: 100%;
37 | }
38 |
39 | img {
40 | @media screen and (max-width: 768px) {
41 | display: none;
42 | }
43 | }
44 | `;
45 |
46 | export const FormRow = styled.div`
47 | display: flex;
48 | justify-content: center;
49 | margin: 0 -15px -15px -15px;
50 | flex-wrap: wrap;
51 | align-items: center;
52 | `;
53 |
54 | export const FormWrapper = styled.form`
55 | /* max-width: 540px; */
56 | padding-top: 0;
57 | width: 100%;
58 | `;
59 |
60 | export const FormMessage = styled(motion.div)`
61 | color: ${({ error }) => (error ? 'red' : 'green')};
62 | padding: 5px;
63 | text-align: center;
64 | margin-top: 1rem;
65 | `;
66 |
67 | export const FormInputRow = styled.div`
68 | display: flex;
69 | justify-content: center;
70 | flex-direction: column;
71 | align-items: stretch;
72 | margin-bottom: 1.4rem;
73 |
74 | > p {
75 | font-size: 0.8rem;
76 | margin-top: 0.5rem;
77 | color: #f00e0e;
78 | }
79 | `;
80 | export const FormInput = styled.input`
81 | display: block;
82 | padding-left: 10px;
83 | outline: none;
84 | border-radius: 2px;
85 | height: 40px;
86 | width: 100%;
87 | border: none;
88 | border-bottom: 1px solid #cfcfcf;
89 | font-size: 1rem;
90 | `;
91 |
92 | export const FormLabel = styled.label`
93 | display: inline-block;
94 | font-size: 0.9rem;
95 | margin-bottom: 0.3rem;
96 | color: #afafaf;
97 | `;
98 | export const FormImgWrapper = styled.div`
99 | max-width: 555px;
100 | display: flex;
101 | justify-content: ${({ start }) => (start ? 'flex-start' : 'flex-end')};
102 | `;
103 | export const FormImg = styled.img`
104 | padding-right: 0;
105 | border: 0;
106 | max-width: 100%;
107 | vertical-align: middle;
108 | display: inline-block;
109 | max-height: 500px;
110 | `;
111 |
112 | export const FormButton = styled.button`
113 | border-radius: 4px;
114 | background: none;
115 | margin-top: 1.5rem;
116 | white-space: nowrap;
117 | /* color: #fff; */
118 | outline: none;
119 | width: 100%;
120 | font-size: 1.4rem;
121 | padding: 5px 15px;
122 | border: 2px solid black;
123 | cursor: pointer;
124 | position: relative;
125 | overflow: hidden;
126 |
127 | &:hover {
128 | color: white;
129 | transition: background-color 0.4s ease-in;
130 | background-color: black;
131 | }
132 | `;
133 |
--------------------------------------------------------------------------------
/src/components/Form/validateForm.js:
--------------------------------------------------------------------------------
1 | export default function validateForm({ name, email, password, confirmPass }) {
2 | if (!name.trim()) {
3 | return 'Username required';
4 | }
5 | // else if (!/^[A-Za-z]+/.test(name.trim())) {
6 | // errors.name = 'Enter a valid name';
7 | // }
8 |
9 | const regex =
10 | /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
11 | if (!email) {
12 | return 'Email required';
13 | } else if (regex.test(email.toLocalLowerCase)) {
14 | return 'Email address is invalid';
15 | }
16 | if (!password) {
17 | return 'Password is required';
18 | } else if (password.length < 6) {
19 | return 'Password needs to be 6 characters or more';
20 | }
21 |
22 | if (!confirmPass) {
23 | return 'Enter Confirm password is required';
24 | } else if (confirmPass !== password) {
25 | return 'Passwords do not match';
26 | }
27 | return null;
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/Hero/Hero.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import { Button, Container, MainHeading } from '../../globalStyles';
4 | import { HeroVideo, HeroSection, HeroText, ButtonWrapper, HeroButton } from './HeroStyles';
5 |
6 | const Hero = () => {
7 | return (
8 |
9 |
10 |
11 | Your data is secure with us
12 |
13 | We provide the best security systems for clients all over the world
14 |
15 |
16 |
17 |
18 |
19 | Find More
20 |
21 |
22 |
23 | );
24 | };
25 |
26 | export default Hero;
27 |
--------------------------------------------------------------------------------
/src/components/Hero/HeroStyles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Button } from '../../globalStyles';
3 |
4 | export const HeroSection = styled.section`
5 | height: 100vh;
6 | background-position: center;
7 | background-size: cover;
8 | padding-top: clamp(70px, 25vh, 220px);
9 | box-shadow: inset 0 0 0 1000px rgba (0, 0, 0, 0.2);
10 | `;
11 |
12 | export const HeroVideo = styled.video`
13 | object-fit: cover;
14 | width: 100%;
15 | height: 100%;
16 | background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
17 | top: 0;
18 | position: absolute;
19 | z-index: -1;
20 | `;
21 |
22 | export const HeroText = styled.p`
23 | margin-bottom: 35px;
24 | font-size: clamp(0.9rem, 1.5vw, 1.3rem);
25 | line-height: 24px;
26 | text-align: center;
27 | letter-spacing: 2px;
28 | color: #fff;
29 | `;
30 |
31 | export const ButtonWrapper = styled.div`
32 | width: 100%;
33 | display: flex;
34 | justify-content: center;
35 | flex-flow: wrap;
36 | gap: 0.5rem;
37 | `;
38 |
39 | export const HeroButton = styled(Button)`
40 | color: black;
41 |
42 | &:before {
43 | background: #fff;
44 | height: 500%;
45 | }
46 |
47 | &:hover:before {
48 | height: 0%;
49 | }
50 |
51 | &:hover {
52 | color: white;
53 | }
54 | `;
55 |
--------------------------------------------------------------------------------
/src/components/Navbar/Navbar.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { FaRProject, FaTimes } from 'react-icons/fa';
3 | import { CgMenuRight } from 'react-icons/cg';
4 | import { IconContext } from 'react-icons';
5 | import {
6 | Nav,
7 | NavbarContainer,
8 | NavLogo,
9 | NavIcon,
10 | MobileIcon,
11 | NavMenu,
12 | NavLinks,
13 | NavItem,
14 | } from './NavbarStyles.js';
15 | import { useLocation, useHistory } from 'react-router-dom';
16 | import { data } from '../../data/NavbarData';
17 |
18 | const Navbar = () => {
19 | const [show, setShow] = useState(false);
20 |
21 | let history = useHistory();
22 | let location = useLocation();
23 |
24 | const handleClick = () => {
25 | setShow(!show);
26 | };
27 |
28 | const scrollTo = (id) => {
29 | const element = document.getElementById(id);
30 |
31 | element.scrollIntoView({
32 | behavior: 'smooth',
33 | });
34 | };
35 |
36 | const closeMobileMenu = (to, id) => {
37 | if (id && location.pathname === '/') {
38 | scrollTo(id);
39 | }
40 |
41 | history.push(to);
42 | setShow(false);
43 | };
44 |
45 | return (
46 |
47 |
67 |
68 | );
69 | };
70 |
71 | export default Navbar;
72 |
--------------------------------------------------------------------------------
/src/components/Navbar/NavbarStyles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Container } from '../../globalStyles';
3 | import { Link } from 'react-router-dom';
4 |
5 | export const Nav = styled.nav`
6 | background: transparent;
7 | margin-bottom: -80px;
8 | height: 80px;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | font-size: 1.2rem;
13 | position: absolute;
14 | top: 0;
15 | z-index: 50;
16 | width: 100%;
17 |
18 | transition: background-color 0.3s ease-in;
19 | `;
20 |
21 | export const NavbarContainer = styled(Container)`
22 | display: flex;
23 | justify-content: start;
24 | height: 80px;
25 |
26 | ${Container}
27 | `;
28 |
29 | export const NavLogo = styled(Link)`
30 | color: #fff;
31 | justify-self: flex-start;
32 | cursor: pointer;
33 | text-decoration: none;
34 | font-size: 2rem;
35 | display: flex;
36 | align-items: center;
37 | z-index: 50;
38 | `;
39 |
40 | export const NavIcon = styled.img`
41 | margin-right: 1rem;
42 | width: 3rem;
43 | `;
44 |
45 | export const MobileIcon = styled.div`
46 | display: none;
47 | z-index: 50;
48 |
49 | @media screen and (max-width: 960px) {
50 | display: block;
51 | position: absolute;
52 | top: 0;
53 | right: 0;
54 | transform: translate(-100%, 60%);
55 | font-size: 1.8rem;
56 | cursor: pointer;
57 | }
58 | `;
59 |
60 | export const NavMenu = styled.ul`
61 | display: flex;
62 | align-items: center;
63 | list-style: none;
64 | text-align: center;
65 | width: 100%;
66 |
67 | @media screen and (max-width: 960px) {
68 | flex-direction: column;
69 | width: 100%;
70 | height: 100vh;
71 | position: fixed;
72 | padding-top: 30%;
73 | top: 0;
74 | left: 0;
75 | opacity: ${({ show }) => (show ? 1 : 0)};
76 | visibility: ${({ show }) => (show ? 'visible' : 'hidden')};
77 | transform: translateY(${({ show }) => (show ? '0' : '-10px')});
78 | transition: opacity 0.5s ease;
79 | background-color: #071c2f;
80 | }
81 |
82 | > li:first-child {
83 | margin-left: auto;
84 | }
85 | `;
86 |
87 | export const NavItem = styled.li`
88 | height: 80px;
89 | cursor: pointer;
90 |
91 | @media screen and (max-width: 960px) {
92 | width: 100%;
93 |
94 | &:hover {
95 | border: none;
96 | }
97 | }
98 | `;
99 |
100 | export const NavLinks = styled.span`
101 | color: #fff;
102 | display: flex;
103 | align-items: center;
104 | text-decoration: none;
105 | padding: 0.5rem 1rem;
106 | height: 100%;
107 |
108 | &:hover {
109 | color: #c8c9d8;
110 | transition: all 0.3s ease;
111 | }
112 |
113 | @media screen and (max-width: 960px) {
114 | text-align: center;
115 | padding: 2rem;
116 | width: 100%;
117 | display: table;
118 |
119 | &:hover {
120 | color: #4b59f7;
121 | transition: all 0.3s ease;
122 | }
123 | }
124 | `;
125 |
126 | export const NavBtnLink = styled(Link)`
127 | display: flex;
128 | justify-content: center;
129 | align-items: center;
130 | text-decoration: none;
131 | padding: 8px 16px;
132 | height: 100%;
133 | width: 100%;
134 | border: none;
135 | outline: none;
136 | `;
137 |
--------------------------------------------------------------------------------
/src/components/Pricing/Pricing.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button, Heading, TextWrapper } from '../../globalStyles';
3 | import { IconContext } from 'react-icons/lib';
4 | import {
5 | PricingSection,
6 | PricingWrapper,
7 | PricingContainer,
8 | PricingCardInfo,
9 | PricingCardPlan,
10 | PricingCardCost,
11 | PricingCardFeatures,
12 | PricingCardText,
13 | PricingCardFeature,
14 | PricingCard,
15 | } from './PricingStyles';
16 | import { pricingData } from '../../data/PricingData';
17 |
18 | function Pricing() {
19 | return (
20 |
21 |
22 |
23 | Pick Your Best Option
24 |
25 |
32 | Create, maintain and store your data with Delta.
33 |
34 |
35 | {pricingData.map((card, index) => (
36 |
37 |
38 | {card.title}
39 | {card.price}
40 | {card.description}
41 |
42 | {card.features.map((feature, index) => (
43 |
44 | {feature}
45 |
46 | ))}
47 |
48 |
49 |
50 |
51 | ))}
52 |
53 |
54 |
55 |
56 | );
57 | }
58 | export default Pricing;
59 |
--------------------------------------------------------------------------------
/src/components/Pricing/PricingStyles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const PricingSection = styled.div`
4 | padding: 160px 0;
5 | display: flex;
6 | flex-direction: column;
7 | justify-content: center;
8 | background: #101522;
9 | `;
10 |
11 | export const PricingWrapper = styled.div`
12 | display: flex;
13 | flex-direction: column;
14 | align-items: center;
15 | margin: 0 auto;
16 |
17 | @media screen and (max-width: 960px) {
18 | margin: 0 30px;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | }
23 | `;
24 |
25 | export const PricingContainer = styled.div`
26 | display: flex;
27 | justify-content: center;
28 | flex-flow: wrap;
29 | > div {
30 | margin: 0.7rem;
31 | }
32 |
33 | @media screen and (max-width: 768px) {
34 | display: flex;
35 | flex-direction: column;
36 | justify-content: center;
37 | align-items: center;
38 | width: 100%;
39 | > div {
40 | width: 90%;
41 | }
42 | }
43 | `;
44 |
45 | export const PricingCard = styled.div`
46 | &:hover {
47 | transform: scale(1.06);
48 | transition: all 0.3s ease-out;
49 | }
50 | `;
51 |
52 | export const PricingCardInfo = styled.div`
53 | background: #242424;
54 | box-shadow: 0 6px 20px rgba(56, 125, 255, 0.2);
55 | width: 280px;
56 | text-decoration: none;
57 | border-radius: 4px;
58 | height: 100%;
59 |
60 | display: flex;
61 | flex-direction: column;
62 | padding: 24px;
63 | color: #fff;
64 | margin: auto;
65 | > button {
66 | margin-top: auto;
67 |
68 | &:hover {
69 | color: black;
70 | background: white;
71 | transition: background 0.3s ease;
72 | }
73 | }
74 |
75 | @media screen and (max-width: 768px) {
76 | width: 90%;
77 |
78 | &:hover {
79 | transform: none;
80 | }
81 | }
82 | `;
83 |
84 | export const PricingCardPlan = styled.h3`
85 | margin-bottom: 5px;
86 | font-size: 2rem;
87 | `;
88 |
89 | export const PricingCardCost = styled.h4`
90 | font-size: 1.2rem;
91 | `;
92 |
93 | export const PricingCardText = styled.p`
94 | font-size: 1.1rem;
95 | margin: 0.4rem 0 1.3rem;
96 | color: #a9b3c1;
97 | `;
98 |
99 | export const PricingCardFeatures = styled.ul`
100 | margin: 16px 0 32px;
101 | list-style: none;
102 | display: flex;
103 | flex-direction: column;
104 | color: #a9b3c1;
105 | `;
106 |
107 | export const PricingCardFeature = styled.li`
108 | margin-bottom: 1rem;
109 | display: flex;
110 | font-size: 0.94rem;
111 |
112 | &:before {
113 | content: '🎧';
114 | margin-right: 0.4rem;
115 | }
116 | `;
117 |
--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-data-website/71465ccfdc2926cf1e4a3820daf736a59124333e/src/components/index.js
--------------------------------------------------------------------------------
/src/data/CarouselData.js:
--------------------------------------------------------------------------------
1 | export const data = [
2 | {
3 | title: 'What our clients say',
4 | description:
5 | 'Our clients happily stay with our services for more several years now. See real reviews from our clients.',
6 | image: './assets/clients.jpg',
7 | },
8 | {
9 | title: 'Our security ',
10 | description: 'Learn more about our security systems to make sure your data is always safe',
11 | image: './assets/security.jpg',
12 | },
13 | {
14 | title: 'Our Team',
15 | description: 'Our team consists of the best experts in the industry, learn about them',
16 | image: './assets/teamwork.jpg',
17 | },
18 | {
19 | title: 'Our servers',
20 | description: 'Find more about hardware and software used for your service',
21 | image: 'https://images.pexels.com/photos/325229/pexels-photo-325229.jpeg?cs=srgb&dl=pexels-manuel-geissinger-325229.jpg&fm=jpg',
22 | },
23 | {
24 | title: 'Our top clients',
25 | description: 'We have provided services to top clients in tech industry',
26 | image: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80',
27 | },
28 | ];
29 |
30 | export const sliderSettings = {
31 | arrows: false,
32 | slidesToShow: 3,
33 | focusOnselect: false,
34 | accessability: false,
35 | responsive: [
36 | {
37 | breakpoint: 1280,
38 | settings: {
39 | slidesToShow: 2,
40 | },
41 | },
42 |
43 | {
44 | breakpoint: 900,
45 | settings: {
46 | slidesToShow: 1,
47 | },
48 | },
49 | ],
50 | };
51 |
--------------------------------------------------------------------------------
/src/data/FeaturesData.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { BsFillShieldLockFill } from 'react-icons/bs';
4 | import { IoIosOptions } from 'react-icons/io';
5 | import { AiOutlineCloudUpload } from 'react-icons/ai';
6 | import { BiSupport, BiDollar } from 'react-icons/bi';
7 | import { GrHostMaintenance } from 'react-icons/gr';
8 | const iconStyle = (Icon) => ;
9 |
10 | export const featuresData = [
11 | {
12 | name: 'Best Security',
13 | description: 'We offer the best data security to our clients, which makes us stand out',
14 | icon: iconStyle(BsFillShieldLockFill),
15 | imgClass: 'one',
16 | },
17 | {
18 | name: 'Ease of Use',
19 | description: 'Our system is easy to use and integrate',
20 | icon: iconStyle(IoIosOptions),
21 | imgClass: 'two',
22 | },
23 | {
24 | name: 'Maintenance',
25 | description: 'Our code is written in highest standards, which makes it highly sustainable',
26 | icon: iconStyle(GrHostMaintenance),
27 | imgClass: 'three',
28 | },
29 | {
30 | name: '24/7 Support',
31 | description: 'Our team is available at all times in case you need us',
32 | icon: iconStyle(BiSupport),
33 | imgClass: 'four',
34 | },
35 | {
36 | name: 'Price',
37 | description: 'We offer the highest value/cost ratio',
38 | icon: iconStyle(BiDollar),
39 | imgClass: 'five',
40 | },
41 | {
42 | name: 'Scalable',
43 | description:
44 | 'Our servers are located all over the world, therefore improving scalability and speed ',
45 | icon: iconStyle(AiOutlineCloudUpload),
46 | imgClass: 'six',
47 | },
48 | ];
49 |
--------------------------------------------------------------------------------
/src/data/FooterData.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { FaFacebook, FaInstagram, FaYoutube, FaTwitter, FaLinkedin } from 'react-icons/fa';
3 |
4 | const iconStyle = (Icon) => ;
5 |
6 | export const footerSocialData = [
7 | {
8 | name: 'Facebook',
9 | icon: iconStyle(FaFacebook),
10 | },
11 | {
12 | name: 'Instagram',
13 | icon: iconStyle(FaInstagram),
14 | },
15 | {
16 | name: 'YouTube',
17 | icon: iconStyle(FaYoutube),
18 | },
19 | {
20 | name: 'Twitter',
21 | icon: iconStyle(FaTwitter),
22 | },
23 | {
24 | name: 'LinkedIn',
25 | icon: iconStyle(FaLinkedin),
26 | },
27 | ];
28 |
29 | export const footerData = [
30 | {
31 | title: 'Main',
32 | links: ['Blog', 'FAQs', 'Support', 'About us'],
33 | },
34 | {
35 | title: 'Product',
36 | links: ['Login', 'Personal', 'Business', 'Team'],
37 | },
38 | {
39 | title: 'Press',
40 | links: ['Logos', 'Events', 'Stories', 'Office'],
41 | },
42 | {
43 | title: 'Legal',
44 | links: ['GDPR', 'Privacy Policy', 'Terms of Service', 'Disclaimer'],
45 | },
46 | ];
47 |
--------------------------------------------------------------------------------
/src/data/HeroData.js:
--------------------------------------------------------------------------------
1 | export const heroOne = {
2 | reverse: true,
3 | inverse: true,
4 | topLine: {
5 | text: 'Founded in 2012',
6 | },
7 | headline: "We've been in business for 9 years",
8 | description: 'We have designed and implemented the best cloud security solutions',
9 | buttonLabel: 'Find More',
10 | imgStart: 'start',
11 | img: './assets/svg/Deal.svg',
12 | start: 'true',
13 | };
14 |
15 | export const heroTwo = {
16 | reverse: false,
17 | inverse: false,
18 | topLine: {
19 | text: 'Designed & Developed',
20 | },
21 | headline: 'The best practices',
22 | description: 'Our clients have had the best experience working with us',
23 | buttonLabel: 'View Project',
24 |
25 | linkTo: '/more',
26 | imgStart: 'start',
27 | img: './assets/svg/Connection.svg',
28 | start: 'true',
29 | };
30 |
31 | export const heroThree = {
32 | reverse: true,
33 | inverse: true,
34 | topLine: {
35 | text: 'Highly reputed brand',
36 | },
37 | headline: 'Why us? ',
38 | description:
39 | 'Our 9 year experience have allowed us to use the most innovative technologies and methodologies',
40 | buttonLabel: 'View Project',
41 |
42 | linkTo: '/download',
43 | imgStart: '',
44 | img: './assets/svg/ChartUp.svg',
45 | start: 'true',
46 | };
47 |
--------------------------------------------------------------------------------
/src/data/NavbarData.js:
--------------------------------------------------------------------------------
1 | export const data = [
2 | {
3 | to: '/',
4 | text: 'About',
5 | id: 'about',
6 | },
7 | {
8 | to: '/pricing',
9 | text: 'Pricing',
10 | },
11 | {
12 | to: '/signup',
13 | text: 'Contact',
14 | },
15 | ];
16 |
--------------------------------------------------------------------------------
/src/data/PricingData.js:
--------------------------------------------------------------------------------
1 | export const pricingData = [
2 | {
3 | title: 'Basic',
4 | price: '$7.99 user/month after offer period',
5 | numAcc: '50-100 accounts',
6 | features: ['Secure accounts', 'Best for small business', 'Easy', 'Affordable', '1GB RAM'],
7 | },
8 | {
9 | title: 'Standard',
10 | price: '$18.99 user/month after offer period',
11 | numAcc: '50-500 accounts',
12 | features: [
13 | 'Secure accounts',
14 | 'Best for small business',
15 | 'Customizable',
16 | '3GB RAM',
17 | '1TB SSD',
18 | ],
19 | },
20 | {
21 | title: 'Premium',
22 | price: '$32.50 user/month after offer period',
23 | numAcc: '50-1000 accounts',
24 | features: [
25 | 'Secure accounts',
26 | 'Best for small business',
27 | 'Customizable',
28 | 'Easy Integration',
29 | 'Development Team',
30 | 'DNS & Domain included',
31 | ],
32 | },
33 |
34 | {
35 | title: 'Enterprise',
36 | price: '$55.50 user/month after offer period ',
37 | numAcc: '1000+ Accounts',
38 | features: ['Unlimited Storage', 'Scalability', 'Free DNS & Domain'],
39 | },
40 | ];
41 |
--------------------------------------------------------------------------------
/src/globalStyles.js:
--------------------------------------------------------------------------------
1 | import styled, { createGlobalStyle } from 'styled-components';
2 |
3 | const GlobalStyle = createGlobalStyle`
4 | *{
5 | box-sizing: border-box;
6 | margin: 0;
7 | padding: 0;
8 | font-family: 'Montserrat', sans-serif;
9 | }
10 | `;
11 |
12 | export const Container = styled.div`
13 | width: 100%;
14 | max-width: 1300px;
15 | margin-right: auto;
16 | margin-left: auto;
17 | padding: 0 50px;
18 |
19 | @media screen and (max-width: 960px) {
20 | padding: 0 30px;
21 | }
22 | `;
23 | export const MainHeading = styled.h1`
24 | font-size: clamp(2.3rem, 6vw, 4.5rem);
25 | margin-bottom: 2rem;
26 | color: ${({ inverse }) => (inverse ? '$403ae3' : '#fff')};
27 | width: 100%;
28 | letter-spacing: 4px;
29 | text-align: center;
30 | `;
31 |
32 | export const Heading = styled.h2`
33 | font-size: clamp(1.3rem, 13vw, 3.1rem);
34 | margin: ${({ margin }) => (margin ? margin : '')};
35 | margin-bottom: ${({ mb }) => (mb ? mb : '')};
36 | margin-top: ${({ mt }) => (mt ? mt : '')};
37 | color: ${({ inverse }) => (inverse ? '$403ae3' : '#fff')};
38 | letter-spacing: 0.4rem;
39 | line-height: 1.06;
40 | text-align: center;
41 | width: ${({ width }) => (width ? width : '100%')};
42 | `;
43 | export const TextWrapper = styled.span`
44 | color: ${({ color }) => (color ? color : '')};
45 | font-size: ${({ size }) => (size ? size : '')};
46 | font-weight: ${({ weight }) => (weight ? weight : '')};
47 | letter-spacing: ${({ spacing }) => (spacing ? spacing : '')};
48 | padding: ${({ padding }) => (padding ? padding : '')};
49 | margin: ${({ margin }) => (margin ? margin : '')};
50 | margin-bottom: ${({ mb }) => (mb ? mb : '')};
51 | margin-top: ${({ mt }) => (mt ? mt : '')};
52 | `;
53 | export const Section = styled.section`
54 | padding: ${({ padding }) => (padding ? padding : '140px 0')};
55 | margin: ${({ margin }) => (margin ? margin : '')};
56 | background: ${({ inverse }) => (inverse ? 'white' : '#071c2f')};
57 | position: ${({ position }) => (position ? position : '')};
58 | width: ${({ width }) => (width ? width : 'auto')};
59 | min-width: ${({ minWidth }) => (minWidth ? minWidth : 'auto')};
60 | max-width: ${({ maxWidth }) => (maxWidth ? maxWidth : 'auto')};
61 | height: ${({ height }) => (height ? height : 'auto')};
62 | max-height: ${({ maxHeight }) => (maxHeight ? maxHeight : 'auto')};
63 | min-height: ${({ minHeight }) => (minHeight ? minHeight : 'auto')};
64 |
65 | @media screen and (max-width: 768px) {
66 | padding: ${({ smPadding }) => (smPadding ? smPadding : '70px 0')};
67 | }
68 | `;
69 |
70 | export const Row = styled.div`
71 | display: flex;
72 | justify-content: ${({ justify }) => (justify ? justify : '')};
73 | align-items: ${({ align }) => (align ? align : '')};
74 | gap: ${({ gap }) => (gap ? gap : '')};
75 | padding: ${({ padding }) => (padding ? padding : '')};
76 | margin: ${({ margin }) => (margin ? margin : '')};
77 | position: ${({ position }) => (position ? position : '')};
78 | width: ${({ width }) => (width ? width : 'auto')};
79 | min-width: ${({ minWidth }) => (minWidth ? minWidth : 'auto')};
80 | max-width: ${({ maxWidth }) => (maxWidth ? maxWidth : 'auto')};
81 | height: ${({ height }) => (height ? height : 'auto')};
82 | max-height: ${({ maxHeight }) => (maxHeight ? maxHeight : 'auto')};
83 | min-height: ${({ minHeight }) => (minHeight ? minHeight : 'auto')};
84 | flex-wrap: ${({ wrap }) => (wrap ? wrap : '')};
85 | `;
86 |
87 | export const Column = styled.div`
88 | display: flex;
89 | flex-direction: column;
90 | justify-content: ${({ justify }) => (justify ? justify : '')};
91 | align-items: ${({ align }) => (align ? align : '')};
92 | gap: ${({ gap }) => (gap ? gap : '')};
93 | padding: ${({ padding }) => (padding ? padding : '')};
94 | margin: ${({ margin }) => (margin ? margin : '')};
95 | position: ${({ position }) => (position ? position : '')};
96 | width: ${({ width }) => (width ? width : 'auto')};
97 | min-width: ${({ minWidth }) => (minWidth ? minWidth : 'auto')};
98 | max-width: ${({ maxWidth }) => (maxWidth ? maxWidth : 'auto')};
99 | height: ${({ height }) => (height ? height : 'auto')};
100 | max-height: ${({ maxHeight }) => (maxHeight ? maxHeight : 'auto')};
101 | min-height: ${({ minHeight }) => (minHeight ? minHeight : 'auto')};
102 | `;
103 |
104 | export const Button = styled.button`
105 | border-radius: 4px;
106 | background: none;
107 | white-space: nowrap;
108 | padding: 10px 20px;
109 | font-size: 16px;
110 | color: #fff;
111 | outline: none;
112 | border: 2px solid #fff;
113 | cursor: pointer;
114 | overflow: hidden;
115 | position: relative;
116 |
117 | &:before {
118 | background: #fff;
119 | content: '';
120 | position: absolute;
121 | top: 50%;
122 | left: 50%;
123 | transform: translate(-50%, -50%);
124 | z-index: -1;
125 | transition: all 0.6s ease;
126 | width: 100%;
127 | height: 0%;
128 | transform: translate(-50%, -50%) rotate(45deg);
129 | }
130 |
131 | &:hover:before {
132 | height: 500%;
133 | }
134 |
135 | &:hover {
136 | color: black;
137 | }
138 | `;
139 |
140 | export default GlobalStyle;
141 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | ReactDOM.render(
6 |
7 |
8 | ,
9 | document.getElementById('root')
10 | );
11 |
--------------------------------------------------------------------------------
/src/pages/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Carousel from '../components/Carousel/Carousel';
3 | import { Content } from '../components/Content/Content';
4 | import Features from '../components/Features/Features';
5 | import Hero from '../components/Hero/Hero';
6 | import { heroOne, heroTwo, heroThree } from '../data/HeroData';
7 |
8 | // Hero Feature Content Carousel
9 |
10 | const Home = () => {
11 | return (
12 | <>
13 |
14 |
15 |
16 |
17 |
18 |
19 | >
20 | );
21 | };
22 |
23 | export default Home;
24 |
--------------------------------------------------------------------------------
/src/pages/PricingPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Pricing from '../components/Pricing/Pricing';
3 |
4 | const PricingPage = () => {
5 | return ;
6 | };
7 |
8 | export default PricingPage;
9 |
--------------------------------------------------------------------------------
/src/pages/SignupPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Form from '../components/Form/Form';
3 |
4 | function SignUp() {
5 | return (
6 | <>
7 |
8 | >
9 | );
10 | }
11 |
12 | export default SignUp;
13 |
--------------------------------------------------------------------------------