├── .env
├── .gitignore
├── README.md
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
├── src
├── App.js
├── components
│ ├── Footer
│ │ ├── Footer.elements.js
│ │ └── Footer.js
│ ├── InfoSection
│ │ ├── InfoSection.elements.js
│ │ └── InfoSection.js
│ ├── Navbar
│ │ ├── Navbar.elements.js
│ │ └── Navbar.js
│ ├── Pricing
│ │ ├── Pricing.elements.js
│ │ └── Pricing.js
│ ├── ScrollToTop.js
│ └── index.js
├── globalStyles.js
├── images
│ ├── profile.jpg
│ ├── svg-1.svg
│ ├── svg-2.svg
│ └── svg-3.svg
├── index.js
└── pages
│ ├── HomePage
│ ├── Data.js
│ └── Home.js
│ ├── Products
│ ├── Data.js
│ └── Products.js
│ ├── Services
│ ├── Data.js
│ └── Services.js
│ └── SignUp
│ ├── Data.js
│ └── SignUp.js
└── yarn.lock
/.env:
--------------------------------------------------------------------------------
1 | SKIP_PREFLIGHT_CHECK=true
--------------------------------------------------------------------------------
/.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 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 |
4 | ## Available Scripts
5 |
6 | In the project directory, you can run:
7 |
8 | ### `yarn start`
9 |
10 | Runs the app in the development mode.
11 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
12 |
13 | The page will reload if you make edits.
14 | You will also see any lint errors in the console.
15 |
16 | ### `yarn test`
17 |
18 | Launches the test runner in the interactive watch mode.
19 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
20 |
21 | ### `yarn build`
22 |
23 | Builds the app for production to the `build` folder.
24 | It correctly bundles React in production mode and optimizes the build for the best performance.
25 |
26 | The build is minified and the filenames include the hashes.
27 | Your app is ready to be deployed!
28 |
29 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
30 |
31 | ### `yarn eject`
32 |
33 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
34 |
35 | 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.
36 |
37 | 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.
38 |
39 | 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.
40 |
41 | ## Learn More
42 |
43 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
44 |
45 | To learn React, check out the [React documentation](https://reactjs.org/).
46 |
47 | ### Code Splitting
48 |
49 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
50 |
51 | ### Analyzing the Bundle Size
52 |
53 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
54 |
55 | ### Making a Progressive Web App
56 |
57 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
58 |
59 | ### Advanced Configuration
60 |
61 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
62 |
63 | ### Deployment
64 |
65 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
66 |
67 | ### `yarn build` fails to minify
68 |
69 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
70 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-website-v2",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^4.2.4",
7 | "@testing-library/react": "^9.3.2",
8 | "@testing-library/user-event": "^7.1.2",
9 | "react": "^16.13.1",
10 | "react-dom": "^16.13.1",
11 | "react-icons": "^3.10.0",
12 | "react-router-dom": "^5.2.0",
13 | "react-scripts": "3.4.2",
14 | "styled-components": "^5.1.1"
15 | },
16 | "scripts": {
17 | "start": "react-scripts start",
18 | "build": "react-scripts build",
19 | "test": "react-scripts test",
20 | "eject": "react-scripts eject"
21 | },
22 | "eslintConfig": {
23 | "extends": "react-app"
24 | },
25 | "browserslist": {
26 | "production": [
27 | ">0.2%",
28 | "not dead",
29 | "not op_mini all"
30 | ],
31 | "development": [
32 | "last 1 chrome version",
33 | "last 1 firefox version",
34 | "last 1 safari version"
35 | ]
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/briancodex/react-website-styled-components-v1/049fd7fff658d179c0381940055133c232104ec9/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
21 |
22 |
31 | React App
32 |
33 |
34 |
35 |
36 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/briancodex/react-website-styled-components-v1/049fd7fff658d179c0381940055133c232104ec9/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/briancodex/react-website-styled-components-v1/049fd7fff658d179c0381940055133c232104ec9/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 Home from './pages/HomePage/Home';
4 | import Services from './pages/Services/Services';
5 | import Products from './pages/Products/Products';
6 | import SignUp from './pages/SignUp/SignUp';
7 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
8 | import ScrollToTop from './components/ScrollToTop';
9 | import { Navbar, Footer } from './components';
10 |
11 | function App() {
12 | return (
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | );
26 | }
27 |
28 | export default App;
29 |
--------------------------------------------------------------------------------
/src/components/Footer/Footer.elements.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { FaMagento } from 'react-icons/fa';
3 | import { Link } from 'react-router-dom';
4 |
5 | export const FooterContainer = styled.div`
6 | background-color: #101522;
7 | padding: 4rem 0 2rem 0;
8 | display: flex;
9 | flex-direction: column;
10 | justify-content: center;
11 | align-items: center;
12 | `;
13 |
14 | export const FooterSubscription = styled.section`
15 | display: flex;
16 | flex-direction: column;
17 | justify-content: center;
18 | align-items: center;
19 | text-align: center;
20 | margin-bottom: 24px;
21 | padding: 24px;
22 | color: #fff;
23 | `;
24 |
25 | export const FooterSubHeading = styled.p`
26 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
27 | 'Lucida Sans', Arial, sans-serif;
28 | margin-bottom: 24px;
29 | font-size: 24px;
30 | `;
31 |
32 | export const FooterSubText = styled.p`
33 | margin-bottom: 24px;
34 | font-size: 20px;
35 | `;
36 |
37 | export const Form = styled.form`
38 | display: flex;
39 | justify-content: center;
40 | align-items: center;
41 |
42 | @media screen and (max-width: 820px) {
43 | flex-direction: column;
44 | width: 80%;
45 | }
46 | `;
47 |
48 | export const FormInput = styled.input`
49 | padding: 10px 20px;
50 | border-radius: 2px;
51 | margin-right: 10px;
52 | outline: none;
53 | border: none;
54 | font-size: 16px;
55 | border: 1px solid #fff;
56 |
57 | &::placeholder {
58 | color: #242424;
59 | }
60 |
61 | @media screen and (max-width: 820px) {
62 | width: 100%;
63 | margin: 0 0 16px 0;
64 | }
65 | `;
66 |
67 | export const FooterLinksContainer = styled.div`
68 | width: 100%;
69 | max-width: 1000px;
70 | display: flex;
71 | justify-content: center;
72 |
73 | @media screen and (max-width: 820px) {
74 | padding-top: 32px;
75 | }
76 | `;
77 |
78 | export const FooterLinksWrapper = styled.div`
79 | display: flex;
80 |
81 | @media screen and (max-width: 820px) {
82 | flex-direction: column;
83 | }
84 | `;
85 |
86 | export const FooterLinkItems = styled.div`
87 | display: flex;
88 | flex-direction: column;
89 | align-items: flex-start;
90 | margin: 16px;
91 | text-align: left;
92 | width: 160px;
93 | box-sizing: border-box;
94 | color: #fff;
95 |
96 | @media screen and (max-width: 420px) {
97 | margin: 0;
98 | padding: 10px;
99 | width: 100%;
100 | }
101 | `;
102 |
103 | export const FooterLinkTitle = styled.h2`
104 | margin-bottom: 16px;
105 | `;
106 |
107 | export const FooterLink = styled(Link)`
108 | color: #fff;
109 | text-decoration: none;
110 | margin-bottom: 0.5rem;
111 |
112 | &:hover {
113 | color: #0467fb;
114 | transition: 0.3s ease-out;
115 | }
116 | `;
117 |
118 | export const SocialMedia = styled.section`
119 | max-width: 1000px;
120 | width: 100%;
121 | `;
122 |
123 | export const SocialMediaWrap = styled.div`
124 | display: flex;
125 | justify-content: space-between;
126 | align-items: center;
127 | width: 90%;
128 | max-width: 1000px;
129 | margin: 40px auto 0 auto;
130 |
131 | @media screen and (max-width: 820px) {
132 | flex-direction: column;
133 | }
134 | `;
135 |
136 | export const SocialLogo = styled(Link)`
137 | color: #fff;
138 | justify-self: start;
139 | cursor: pointer;
140 | text-decoration: none;
141 | font-size: 2rem;
142 | display: flex;
143 | align-items: center;
144 | margin-bottom: 16px;
145 | `;
146 |
147 | export const SocialIcon = styled(FaMagento)`
148 | margin-right: 10px;
149 | `;
150 |
151 | export const WebsiteRights = styled.small`
152 | color: #fff;
153 | margin-bottom: 16px;
154 | `;
155 |
156 | export const SocialIcons = styled.div`
157 | display: flex;
158 | justify-content: space-between;
159 | align-items: center;
160 | width: 240px;
161 | `;
162 |
163 | export const SocialIconLink = styled.a`
164 | color: #fff;
165 | font-size: 24px;
166 | `;
167 |
--------------------------------------------------------------------------------
/src/components/Footer/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from '../../globalStyles';
3 | import {
4 | FaFacebook,
5 | FaInstagram,
6 | FaYoutube,
7 | FaTwitter,
8 | FaLinkedin
9 | } from 'react-icons/fa';
10 | import {
11 | FooterContainer,
12 | FooterSubscription,
13 | FooterSubText,
14 | FooterSubHeading,
15 | Form,
16 | FormInput,
17 | FooterLinksContainer,
18 | FooterLinksWrapper,
19 | FooterLinkItems,
20 | FooterLinkTitle,
21 | FooterLink,
22 | SocialMedia,
23 | SocialMediaWrap,
24 | SocialLogo,
25 | SocialIcon,
26 | WebsiteRights,
27 | SocialIcons,
28 | SocialIconLink
29 | } from './Footer.elements';
30 |
31 | function Footer() {
32 | return (
33 |
34 |
35 |
36 | Join our exclusive membership to receive the latest news and trends
37 |
38 | You can unsubscribe at any time.
39 |
43 |
44 |
45 |
46 |
47 | About Us
48 | How it works
49 | Testimonials
50 | Careers
51 | Investors
52 | Terms of Service
53 |
54 |
55 | Contact Us
56 | Contact
57 | Support
58 | Destinations
59 | Sponsorships
60 |
61 |
62 |
63 |
64 | Videos
65 | Submit Video
66 | Ambassadors
67 | Agency
68 | Influencer
69 |
70 |
71 | Social Media
72 | Instagram
73 | Facebook
74 | Youtube
75 | Twitter
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 | ULTRA
84 |
85 | ULTRA © 2020
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 | );
114 | }
115 |
116 | export default Footer;
117 |
--------------------------------------------------------------------------------
/src/components/InfoSection/InfoSection.elements.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const InfoSec = styled.div`
4 | color: #fff;
5 | padding: 160px 0;
6 | background: ${({ lightBg }) => (lightBg ? '#fff' : '#101522')};
7 | `;
8 |
9 | export const InfoRow = styled.div`
10 | display: flex;
11 | margin: 0 -15px -15px -15px;
12 | flex-wrap: wrap;
13 | align-items: center;
14 | flex-direction: ${({ imgStart }) => (imgStart ? 'row-reverse' : 'row')};
15 | `;
16 |
17 | export const InfoColumn = styled.div`
18 | margin-bottom: 15px;
19 | padding-right: 15px;
20 | padding-left: 15px;
21 | flex: 1;
22 | max-width: 50%;
23 | flex-basis: 50%;
24 |
25 | @media screen and (max-width: 768px) {
26 | max-width: 100%;
27 | flex-basis: 100%;
28 | display: flex;
29 | justify-content: center;
30 | }
31 | `;
32 |
33 | export const TextWrapper = styled.div`
34 | max-width: 540px;
35 | padding-top: 0;
36 | padding-bottom: 60px;
37 |
38 | @media screen and (max-width: 768px) {
39 | padding-bottom: 65px;
40 | }
41 | `;
42 |
43 | export const ImgWrapper = styled.div`
44 | max-width: 555px;
45 | display: flex;
46 | justify-content: ${({ start }) => (start ? 'flex-start' : 'flex-end')};
47 | `;
48 |
49 | export const TopLine = styled.div`
50 | color: ${({ lightTopLine }) => (lightTopLine ? '#a9b3c1' : '#4B59F7')};
51 | font-size: 18px;
52 | line-height: 16px;
53 | font-weight: 700;
54 | letter-spacing: 1.4px;
55 | margin-bottom: 16px;
56 | `;
57 |
58 | export const Img = styled.img`
59 | padding-right: 0;
60 | border: 0;
61 | max-width: 100%;
62 | vertical-align: middle;
63 | display: inline-block;
64 | max-height: 500px;
65 | `;
66 |
67 | export const Heading = styled.h1`
68 | margin-bottom: 24px;
69 | font-size: 48px;
70 | line-height: 1.1;
71 | font-weight: 600;
72 | color: ${({ lightText }) => (lightText ? '#f7f8fa' : '#1c2237')};
73 | `;
74 |
75 | export const Subtitle = styled.p`
76 | max-width: 440px;
77 | margin-bottom: 35px;
78 | font-size: 18px;
79 | line-height: 24px;
80 | color: ${({ lightTextDesc }) => (lightTextDesc ? '#a9b3c1' : '#1c2237')};
81 | `;
82 |
--------------------------------------------------------------------------------
/src/components/InfoSection/InfoSection.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import { Container, Button } from '../../globalStyles';
4 | import {
5 | InfoSec,
6 | InfoRow,
7 | InfoColumn,
8 | TextWrapper,
9 | TopLine,
10 | Heading,
11 | Subtitle,
12 | ImgWrapper,
13 | Img
14 | } from './InfoSection.elements';
15 |
16 | function InfoSection({
17 | primary,
18 | lightBg,
19 | topLine,
20 | lightTopLine,
21 | lightText,
22 | lightTextDesc,
23 | headline,
24 | description,
25 | buttonLabel,
26 | img,
27 | alt,
28 | imgStart,
29 | start
30 | }) {
31 | return (
32 | <>
33 |
34 |
35 |
36 |
37 |
38 | {topLine}
39 | {headline}
40 | {description}
41 |
42 |
45 |
46 |
47 |
48 |
49 |
50 | 
51 |
52 |
53 |
54 |
55 |
56 |
57 | );
58 | }
59 |
60 | export default InfoSection;
61 |
--------------------------------------------------------------------------------
/src/components/Navbar/Navbar.elements.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { FaMagento } from 'react-icons/fa';
3 | import { Link } from 'react-router-dom';
4 | import { Container } from '../../globalStyles';
5 |
6 | export const Nav = styled.nav`
7 | background: #101522;
8 | height: 80px;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | font-size: 1.2rem;
13 | position: sticky;
14 | top: 0;
15 | z-index: 999;
16 | `;
17 |
18 | export const NavbarContainer = styled(Container)`
19 | display: flex;
20 | justify-content: space-between;
21 | height: 80px;
22 |
23 | ${Container}
24 | `;
25 |
26 | export const NavLogo = styled(Link)`
27 | color: #fff;
28 | justify-self: flex-start;
29 | cursor: pointer;
30 | text-decoration: none;
31 | font-size: 2rem;
32 | display: flex;
33 | align-items: center;
34 | `;
35 |
36 | export const NavIcon = styled(FaMagento)`
37 | margin-right: 0.5rem;
38 | `;
39 |
40 | export const MobileIcon = styled.div`
41 | display: none;
42 |
43 | @media screen and (max-width: 960px) {
44 | display: block;
45 | position: absolute;
46 | top: 0;
47 | right: 0;
48 | transform: translate(-100%, 60%);
49 | font-size: 1.8rem;
50 | cursor: pointer;
51 | }
52 | `;
53 |
54 | export const NavMenu = styled.ul`
55 | display: flex;
56 | align-items: center;
57 | list-style: none;
58 | text-align: center;
59 |
60 | @media screen and (max-width: 960px) {
61 | display: flex;
62 | flex-direction: column;
63 | width: 100%;
64 | height: 90vh;
65 | position: absolute;
66 | top: 80px;
67 | left: ${({ click }) => (click ? 0 : '-100%')};
68 | opacity: 1;
69 | transition: all 0.5s ease;
70 | background: #101522;
71 | }
72 | `;
73 |
74 | export const NavItem = styled.li`
75 | height: 80px;
76 | border-bottom: 2px solid transparent;
77 |
78 | &:hover {
79 | border-bottom: 2px solid #4b59f7;
80 | }
81 |
82 | @media screen and (max-width: 960px) {
83 | width: 100%;
84 |
85 | &:hover {
86 | border: none;
87 | }
88 | }
89 | `;
90 |
91 | export const NavItemBtn = styled.li`
92 | @media screen and (max-width: 960px) {
93 | display: flex;
94 | justify-content: center;
95 | align-items: center;
96 | width: 100%;
97 | height: 120px;
98 | }
99 | `;
100 |
101 | export const NavLinks = styled(Link)`
102 | color: #fff;
103 | display: flex;
104 | align-items: center;
105 | text-decoration: none;
106 | padding: 0.5rem 1rem;
107 | height: 100%;
108 |
109 | @media screen and (max-width: 960px) {
110 | text-align: center;
111 | padding: 2rem;
112 | width: 100%;
113 | display: table;
114 |
115 | &:hover {
116 | color: #4b59f7;
117 | transition: all 0.3s ease;
118 | }
119 | }
120 | `;
121 |
122 | export const NavBtnLink = styled(Link)`
123 | display: flex;
124 | justify-content: center;
125 | align-items: center;
126 | text-decoration: none;
127 | padding: 8px 16px;
128 | height: 100%;
129 | width: 100%;
130 | border: none;
131 | outline: none;
132 | `;
133 |
--------------------------------------------------------------------------------
/src/components/Navbar/Navbar.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { FaBars, FaTimes } from 'react-icons/fa';
3 | import { IconContext } from 'react-icons/lib';
4 | import { Button } from '../../globalStyles';
5 | import {
6 | Nav,
7 | NavbarContainer,
8 | NavLogo,
9 | NavIcon,
10 | MobileIcon,
11 | NavMenu,
12 | NavItem,
13 | NavItemBtn,
14 | NavLinks,
15 | NavBtnLink
16 | } from './Navbar.elements';
17 |
18 | function Navbar() {
19 | const [click, setClick] = useState(false);
20 | const [button, setButton] = useState(true);
21 |
22 | const handleClick = () => setClick(!click);
23 | const closeMobileMenu = () => setClick(false);
24 |
25 | const showButton = () => {
26 | if (window.innerWidth <= 960) {
27 | setButton(false);
28 | } else {
29 | setButton(true);
30 | }
31 | };
32 |
33 | useEffect(() => {
34 | showButton();
35 | }, []);
36 |
37 | window.addEventListener('resize', showButton);
38 |
39 | return (
40 | <>
41 |
42 |
83 |
84 |
85 | );
86 | }
87 |
88 | export default Navbar;
89 |
--------------------------------------------------------------------------------
/src/components/Pricing/Pricing.elements.js:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom';
2 | import styled from 'styled-components';
3 |
4 | export const PricingSection = styled.div`
5 | padding: 100px 0 160px;
6 | display: flex;
7 | flex-direction: column;
8 | justify-content: center;
9 | background: #4b59f7;
10 | `;
11 |
12 | export const PricingWrapper = styled.div`
13 | display: flex;
14 | flex-direction: column;
15 | align-items: center;
16 | margin: 0 auto;
17 |
18 | @media screen and (max-width: 960px) {
19 | margin: 0 30px;
20 | display: flex;
21 | flex-direction: column;
22 | align-items: center;
23 | }
24 | `;
25 |
26 | export const PricingHeading = styled.h1`
27 | color: #fff;
28 | font-size: 48px;
29 | margin-bottom: 24px;
30 | `;
31 |
32 | export const PricingContainer = styled.div`
33 | display: flex;
34 | justify-content: center;
35 | align-items: center;
36 |
37 | @media screen and (max-width: 960px) {
38 | display: flex;
39 | flex-direction: column;
40 | justify-content: center;
41 | align-items: center;
42 | width: 100%;
43 | }
44 | `;
45 |
46 | export const PricingCard = styled(Link)`
47 | background: #242424;
48 | box-shadow: 0 6px 20px rgba(56, 125, 255, 0.2);
49 | width: 280px;
50 | height: 500px;
51 | text-decoration: none;
52 | border-radius: 4px;
53 |
54 | &:nth-child(2) {
55 | margin: 24px;
56 | }
57 |
58 | &:hover {
59 | transform: scale(1.06);
60 | transition: all 0.3s ease-out;
61 | color: #1c2237;
62 | }
63 |
64 | @media screen and (max-width: 960px) {
65 | width: 90%;
66 |
67 | &:hover {
68 | transform: none;
69 | }
70 | }
71 | `;
72 |
73 | export const PricingCardInfo = styled.div`
74 | display: flex;
75 | flex-direction: column;
76 | height: 500px;
77 | padding: 24px;
78 | align-items: center;
79 | color: #fff;
80 | `;
81 |
82 | export const PricingCardIcon = styled.div`
83 | margin: 24px 0;
84 | `;
85 |
86 | export const PricingCardPlan = styled.h3`
87 | margin-bottom: 5px;
88 | font-size: 24px;
89 | `;
90 |
91 | export const PricingCardCost = styled.h4`
92 | font-size: 40px;
93 | `;
94 |
95 | export const PricingCardLength = styled.p`
96 | font-size: 14px;
97 | margin-bottom: 24px;
98 | `;
99 |
100 | export const PricingCardFeatures = styled.ul`
101 | margin: 16px 0 32px;
102 | list-style: none;
103 | display: flex;
104 | flex-direction: column;
105 | align-items: center;
106 | color: #a9b3c1;
107 | `;
108 |
109 | export const PricingCardFeature = styled.li`
110 | margin-bottom: 10px;
111 | `;
112 |
--------------------------------------------------------------------------------
/src/components/Pricing/Pricing.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from '../../globalStyles';
3 | import { AiFillThunderbolt } from 'react-icons/ai';
4 | import { GiCrystalBars } from 'react-icons/gi';
5 | import { GiCutDiamond, GiRock } from 'react-icons/gi';
6 | import { GiFloatingCrystal } from 'react-icons/gi';
7 | import { IconContext } from 'react-icons/lib';
8 | import {
9 | PricingSection,
10 | PricingWrapper,
11 | PricingHeading,
12 | PricingContainer,
13 | PricingCard,
14 | PricingCardInfo,
15 | PricingCardIcon,
16 | PricingCardPlan,
17 | PricingCardCost,
18 | PricingCardLength,
19 | PricingCardFeatures,
20 | PricingCardFeature
21 | } from './Pricing.elements';
22 |
23 | function Pricing() {
24 | return (
25 |
26 |
27 |
28 | Our Services
29 |
30 |
31 |
32 |
33 |
34 |
35 | Starter Pack
36 | $99.99
37 | per month
38 |
39 | 100 New Users
40 | $10,000 Budget
41 | Retargeting analytics
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | Gold Rush
52 | $299.99
53 | per month
54 |
55 | 1000 New Users
56 | $50,000 Budget
57 | Lead Gen Analytics
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 | Diamond Kings
68 | $999.99
69 | per month
70 |
71 | Unlimited Users
72 | Unlimited Budget
73 | 24/7 Support
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 | );
83 | }
84 | export default Pricing;
85 |
--------------------------------------------------------------------------------
/src/components/ScrollToTop.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { useLocation } from 'react-router-dom';
3 |
4 | export default function ScrollToTop() {
5 | const { pathname } = useLocation();
6 |
7 | useEffect(
8 | () => {
9 | window.scrollTo(0, 0);
10 | },
11 | [pathname]
12 | );
13 |
14 | return null;
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | export { default as Navbar } from './Navbar/Navbar';
2 | export { default as Footer } from './Footer/Footer';
3 | export { default as InfoSection } from './InfoSection/InfoSection';
4 | export { default as Pricing } from './Pricing/Pricing';
5 |
--------------------------------------------------------------------------------
/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: 'Source Sans Pro', sans-serif;
9 | }
10 | `;
11 |
12 | export const Container = styled.div`
13 | z-index: 1;
14 | width: 100%;
15 | max-width: 1300px;
16 | margin-right: auto;
17 | margin-left: auto;
18 | padding-right: 50px;
19 | padding-left: 50px;
20 |
21 | @media screen and (max-width: 991px) {
22 | padding-right: 30px;
23 | padding-left: 30px;
24 | }
25 | `;
26 |
27 | export const Button = styled.button`
28 | border-radius: 4px;
29 | background: ${({ primary }) => (primary ? '#4B59F7' : '#0467FB')};
30 | white-space: nowrap;
31 | padding: ${({ big }) => (big ? '12px 64px' : '10px 20px')};
32 | color: #fff;
33 | font-size: ${({ fontBig }) => (fontBig ? '20px' : '16px')};
34 | outline: none;
35 | border: none;
36 | cursor: pointer;
37 |
38 | &:hover {
39 | transition: all 0.3s ease-out;
40 | background: #fff;
41 | background-color: ${({ primary }) => (primary ? '#0467FB' : '#4B59F7')};
42 | }
43 |
44 | @media screen and (max-width: 960px) {
45 | width: 100%;
46 | }
47 | `;
48 |
49 | export default GlobalStyle;
50 |
--------------------------------------------------------------------------------
/src/images/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/briancodex/react-website-styled-components-v1/049fd7fff658d179c0381940055133c232104ec9/src/images/profile.jpg
--------------------------------------------------------------------------------
/src/images/svg-1.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/images/svg-2.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/images/svg-3.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import App from './App';
5 |
6 | ReactDOM.render(, document.getElementById('root'));
7 |
--------------------------------------------------------------------------------
/src/pages/HomePage/Data.js:
--------------------------------------------------------------------------------
1 | export const homeObjOne = {
2 | primary: true,
3 | lightBg: false,
4 | lightTopLine: true,
5 | lightText: true,
6 | lightTextDesc: true,
7 | topLine: 'Marketing Agency',
8 | headline: 'Lead Generation Specialist for Online Businesses',
9 | description:
10 | 'We help business owners increase their revenue. Our team of unique specialist can help you achieve your business goals.',
11 | buttonLabel: 'Get Started',
12 | imgStart: '',
13 | img: require('../../images/svg-1.svg'),
14 | alt: 'Credit Card',
15 | start: ''
16 | };
17 |
18 | export const homeObjTwo = {
19 | primary: true,
20 | lightBg: false,
21 | lightTopLine: true,
22 | lightText: true,
23 | lightTextDesc: true,
24 | topLine: 'Instant Setup',
25 | headline: 'Extremely quick onboarding process',
26 | description:
27 | "Once you've joined, our team of specialist will reach out to you and get you set up in minutes.",
28 | buttonLabel: 'Learn More',
29 | imgStart: '',
30 | img: require('../../images/svg-2.svg'),
31 | alt: 'Vault',
32 | start: ''
33 | };
34 |
35 | export const homeObjThree = {
36 | primary: false,
37 | lightBg: true,
38 | lightTopLine: false,
39 | lightText: false,
40 | lightTextDesc: false,
41 | topLine: 'Sarah Jeni',
42 | headline:
43 | 'Ultra helped me increase my revenue by over 3X in less than 3 months!',
44 | description:
45 | "Their team is wonderful! I can't believe I didn't start working with them earlier.",
46 | buttonLabel: 'View Case Study',
47 | imgStart: 'start',
48 | img: require('../../images/profile.jpg'),
49 | alt: 'Vault',
50 | start: 'true'
51 | };
52 |
53 | export const homeObjFour = {
54 | primary: true,
55 | lightBg: false,
56 | lightTopLine: true,
57 | lightText: true,
58 | lightTextDesc: true,
59 | topLine: 'Secure Database',
60 | headline: 'All your data is stored on our secure server',
61 | description:
62 | 'You will never have to worry about your information getting leaked. Our team of security experts will ensure your records are kept safe.',
63 | buttonLabel: 'Sign Up Now',
64 | imgStart: 'start',
65 | img: require('../../images/svg-3.svg'),
66 | alt: 'Vault',
67 | start: 'true'
68 | };
69 |
--------------------------------------------------------------------------------
/src/pages/HomePage/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { homeObjOne, homeObjTwo, homeObjThree, homeObjFour } from './Data';
3 | import { InfoSection, Pricing } from '../../components';
4 |
5 | function Home() {
6 | return (
7 | <>
8 |
9 |
10 |
11 |
12 |
13 |
14 | );
15 | }
16 |
17 | export default Home;
18 |
--------------------------------------------------------------------------------
/src/pages/Products/Data.js:
--------------------------------------------------------------------------------
1 | export const homeObjOne = {
2 | lightBg: true,
3 | lightText: false,
4 | lightTopLine: false,
5 | lightTextDesc: false,
6 | topLine: 'View Our Products',
7 | headline: 'Shop through our catalog of products',
8 | description:
9 | 'We provide worldwide shipping to all countries. If there are any issues, just issue a refund and we will process your request',
10 | buttonLabel: 'Shop Now',
11 | imgStart: '',
12 | img: require('../../images/svg-1.svg'),
13 | alt: 'Credit Card'
14 | };
15 |
16 | export const homeObjTwo = {
17 | lightBg: false,
18 | lightText: true,
19 | lightTopLine: true,
20 | lightTextDesc: true,
21 | topLine: '100% Secure',
22 | headline: 'Stay protected 24/7 anywhere anytime',
23 | description:
24 | 'We have you covered no matter where you are located. Over 140 locations worldwide to ensure you have access anytime',
25 | buttonLabel: 'Learn More',
26 | imgStart: '',
27 | img: require('../../images/svg-1.svg'),
28 | alt: 'Vault'
29 | };
30 |
31 | export const homeObjThree = {
32 | lightBg: true,
33 | lightText: false,
34 | lightTextDesc: false,
35 | topLine: 'Easy Setup',
36 | headline: 'Super fast and simple onboarding process',
37 | description:
38 | "Get everything set up and ready in under 10 minutes. All you need to do is add your information and you're ready to go.",
39 | buttonLabel: 'Start Now',
40 | imgStart: 'start',
41 | img: require('../../images/svg-1.svg'),
42 | alt: 'Vault'
43 | };
44 |
45 | export const homeObjFour = {
46 | lightBg: false,
47 | lightText: true,
48 | lightTextDesc: true,
49 | topLine: 'DATA ANALYTICS',
50 | headline: 'Every transaction is stored on our secure cloud database',
51 | description:
52 | 'Never ever have to worry again about saved reciepts. We store your data, so you can access it anytime.',
53 | buttonLabel: 'Sign Up Now',
54 | imgStart: 'start',
55 | img: require('../../images/svg-1.svg'),
56 | alt: 'Vault'
57 | };
58 |
--------------------------------------------------------------------------------
/src/pages/Products/Products.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { InfoSection } from '../../components';
3 | import { homeObjOne, homeObjTwo } from './Data';
4 |
5 | function Products() {
6 | return (
7 | <>
8 |
9 |
10 |
11 | );
12 | }
13 |
14 | export default Products;
15 |
--------------------------------------------------------------------------------
/src/pages/Services/Data.js:
--------------------------------------------------------------------------------
1 | export const homeObjOne = {
2 | lightBg: false,
3 | lightText: true,
4 | lightTextDesc: true,
5 | topLine: 'Exclusive Access',
6 | headline: 'Unlimited Transactions with zero fees',
7 | description:
8 | 'Get access to our exclusive diamond card that allows you to send unlimited transactions without getting charged any fees',
9 | buttonLabel: 'Get Started',
10 | imgStart: '',
11 | img: require('../../images/svg-1.svg'),
12 | alt: 'Credit Card'
13 | };
14 |
15 | export const homeObjTwo = {
16 | lightBg: false,
17 | lightText: true,
18 | lightTextDesc: true,
19 | topLine: '100% Secure',
20 | headline: 'Stay protected 24/7 anywhere anytime',
21 | description:
22 | 'We have you covered no matter where you are located. Over 140 locations worldwide to ensure you have access anytime',
23 | buttonLabel: 'Learn More',
24 | imgStart: '',
25 | img: require('../../images/svg-1.svg'),
26 | alt: 'Vault'
27 | };
28 |
29 | export const homeObjThree = {
30 | lightBg: true,
31 | lightText: false,
32 | lightTextDesc: false,
33 | topLine: 'Easy Setup',
34 | headline: 'Super fast and simple onboarding process',
35 | description:
36 | "Get everything set up and ready in under 10 minutes. All you need to do is add your information and you're ready to go.",
37 | buttonLabel: 'Start Now',
38 | imgStart: 'start',
39 | img: require('../../images/svg-1.svg'),
40 | alt: 'Vault'
41 | };
42 |
43 | export const homeObjFour = {
44 | lightBg: false,
45 | lightText: true,
46 | lightTextDesc: true,
47 | topLine: 'Data Analytics',
48 | headline: 'Every transaction is stored on our secure cloud database',
49 | description:
50 | 'Never ever have to worry again about saved reciepts. We store your data, so you can access it anytime.',
51 | buttonLabel: 'Sign Up Now',
52 | imgStart: 'start',
53 | img: require('../../images/svg-1.svg'),
54 | alt: 'Vault'
55 | };
56 |
--------------------------------------------------------------------------------
/src/pages/Services/Services.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { InfoSection, Pricing } from '../../components';
3 | import { homeObjOne, homeObjThree } from './Data';
4 |
5 | function Services() {
6 | return (
7 | <>
8 |
9 |
10 |
11 |
12 | );
13 | }
14 |
15 | export default Services;
16 |
--------------------------------------------------------------------------------
/src/pages/SignUp/Data.js:
--------------------------------------------------------------------------------
1 | export const homeObjOne = {
2 | lightBg: false,
3 | lightText: true,
4 | lightTopLine: true,
5 | lightTextDesc: true,
6 | topLine: 'Sign up Today',
7 | headline: 'Join today to receive an exclusive offer',
8 | description:
9 | 'Get access to our exclusive diamond king package. Limited quantity available.',
10 | buttonLabel: 'Sign Up',
11 | imgStart: '',
12 | img: require('../../images/svg-2.svg'),
13 | alt: 'Credit Card'
14 | };
15 |
16 | export const homeObjTwo = {
17 | lightBg: false,
18 | lightText: true,
19 | lightTopLine: true,
20 | lightTextDesc: true,
21 | topLine: '100% Secure',
22 | headline: 'Stay protected 24/7 anywhere anytime',
23 | description:
24 | 'We have you covered no matter where you are located. Over 140 locations worldwide to ensure you have access anytime',
25 | buttonLabel: 'Learn More',
26 | imgStart: '',
27 | img: require('../../images/svg-1.svg'),
28 | alt: 'Vault'
29 | };
30 |
31 | export const homeObjThree = {
32 | lightBg: true,
33 | lightText: false,
34 | lightTopLine: true,
35 | lightTextDesc: false,
36 | topLine: 'Easy Setup',
37 | headline: 'Super fast and simple onboarding process',
38 | description:
39 | "Get everything set up and ready in under 10 minutes. All you need to do is add your information and you're ready to go.",
40 | buttonLabel: 'Start Now',
41 | imgStart: 'start',
42 | img: require('../../images/svg-1.svg'),
43 | alt: 'Vault'
44 | };
45 |
46 | export const homeObjFour = {
47 | lightBg: false,
48 | lightText: true,
49 | lightTopLine: true,
50 | lightTextDesc: true,
51 | topLine: 'Data Analytics',
52 | headline: 'Every transaction is stored on our secure cloud database',
53 | description:
54 | 'Never ever have to worry again about saved reciepts. We store your data, so you can access it anytime.',
55 | buttonLabel: 'Sign Up Now',
56 | imgStart: 'start',
57 | img: require('../../images/svg-1.svg'),
58 | alt: 'Vault'
59 | };
60 |
--------------------------------------------------------------------------------
/src/pages/SignUp/SignUp.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { InfoSection } from '../../components';
3 | import { homeObjOne, homeObjThree } from './Data';
4 |
5 | function SignUp() {
6 | return (
7 | <>
8 |
9 |
10 |
11 | );
12 | }
13 |
14 | export default SignUp;
15 |
--------------------------------------------------------------------------------