├── .gitignore ├── README.md ├── debug.log ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── Components ├── Footer │ ├── FooterElements.jsx │ └── Index.jsx ├── Hero │ ├── HeroElements.jsx │ └── Index.jsx ├── Info │ ├── Data.jsx │ ├── Index.jsx │ └── InfoElements.jsx ├── Navbar │ ├── Index.jsx │ └── NavElements.jsx ├── Services │ ├── Index.jsx │ └── ServiceElements.jsx └── SideBar │ ├── Index.jsx │ └── SideBarElements.jsx ├── Images ├── 1.svg ├── 2.svg ├── 3.svg ├── Account.svg ├── Account2.svg ├── OT.svg ├── Vf.svg ├── img1.svg └── img2.svg ├── Pages └── Home.jsx ├── Utilities └── ButtonElements.jsx ├── Videos └── video.mp4 └── index.js /.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 | # Live 2 | 3 | https://crypto-landing-page.netlify.app/ 4 | 5 | # Preview 6 | 7 | ![image](https://user-images.githubusercontent.com/60300927/117189688-188a1b00-adfc-11eb-96c7-e14c275574e8.png) 8 | -------------------------------------------------------------------------------- /debug.log: -------------------------------------------------------------------------------- 1 | [0501/215240.389:ERROR:persistent_memory_allocator.cc(777)] Corruption detected in shared-memory segment. 2 | [0503/223807.003:ERROR:persistent_memory_allocator.cc(777)] Corruption detected in shared-memory segment. 3 | [0504/144733.199:ERROR:persistent_memory_allocator.cc(777)] Corruption detected in shared-memory segment. 4 | [0505/121110.197:ERROR:persistent_memory_allocator.cc(777)] Corruption detected in shared-memory segment. 5 | [0505/223525.608:ERROR:persistent_memory_allocator.cc(777)] Corruption detected in shared-memory segment. 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "project1", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.12.0", 7 | "@testing-library/react": "^11.2.6", 8 | "@testing-library/user-event": "^12.8.3", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-icons": "^4.2.0", 12 | "react-router-dom": "^5.2.0", 13 | "react-scripts": "4.0.3", 14 | "react-scroll": "^1.8.2", 15 | "styled-components": "^5.2.3", 16 | "web-vitals": "^1.1.1" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hrithik5/Crypto-Landing-Page/4dddcb7e4003e2f95052e4940a84c9361cfbc765/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 19 | 20 | 29 | React App 30 | 31 | 32 | 33 |
34 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hrithik5/Crypto-Landing-Page/4dddcb7e4003e2f95052e4940a84c9361cfbc765/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hrithik5/Crypto-Landing-Page/4dddcb7e4003e2f95052e4940a84c9361cfbc765/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.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); 2 | 3 | * { 4 | 5 | box-sizing: border-box; 6 | margin: 0; 7 | padding: 0; 8 | font-family: 'Poppins', sans-serif; 9 | } -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' 4 | import Home from './Pages/Home' 5 | 6 | function App() { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /src/Components/Footer/FooterElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { Link } from 'react-router-dom' 3 | 4 | export const FooterContainer = styled.footer` 5 | background-color: #101522; 6 | ` 7 | 8 | export const FooterWrap = styled.div` 9 | padding: 48px 24px; 10 | display: flex; 11 | flex-direction: column; 12 | justify-content: center; 13 | align-items: center; 14 | max-width: 1100px; 15 | margin: 0 auto; 16 | ` 17 | 18 | export const FooterLinkContainer = styled.div` 19 | display: flex; 20 | justify-content: center; 21 | 22 | @media screen and (max-width:820px) { 23 | padding-top: 32px; 24 | } 25 | ` 26 | 27 | export const FooterLinkWrapper = styled.div` 28 | display: flex; 29 | 30 | @media screen and (max-width:820px) { 31 | flex-direction: column; 32 | } 33 | ` 34 | 35 | export const FooterLinkItems = styled.div` 36 | display: flex; 37 | flex-direction: column; 38 | align-items: flex-start; 39 | margin: 16px; 40 | text-align: left; 41 | width: 160px; 42 | box-sizing: border-box; 43 | color: #fff; 44 | 45 | @media screen and (max-width:420px) { 46 | margin: 0; 47 | padding: 10px; 48 | width: 100%; 49 | } 50 | ` 51 | 52 | export const FooterLinkTitle = styled.h1` 53 | font-size: 14px; 54 | margin-bottom: 16px; 55 | ` 56 | 57 | export const FooterLink = styled(Link)` 58 | color: #fff; 59 | text-decoration: none; 60 | margin-bottom: 0.5rem; 61 | font-size: 14px; 62 | 63 | &:hover { 64 | color: #01bf71; 65 | transition: 0.3s ease-out; 66 | } 67 | ` 68 | 69 | export const SocialMedia = styled.section` 70 | max-width: 1000px; 71 | width: 100%; 72 | ` 73 | 74 | export const SocialMediaWrap = styled.div` 75 | display: flex; 76 | justify-content: space-between; 77 | align-items: center; 78 | max-width: 1100px; 79 | margin: 40px auto 0 auto; 80 | 81 | @media screen and (max-width:820px) { 82 | flex-direction: column; 83 | } 84 | ` 85 | 86 | export const SocialLogo = styled(Link)` 87 | color: #fff; 88 | justify-self:start; 89 | cursor: pointer; 90 | text-decoration: none; 91 | font-size: 1.5rem; 92 | display : flex; 93 | align-items: center; 94 | margin-bottom: 16px; 95 | font-weight: bold; 96 | ` 97 | 98 | export const WebsiteRights = styled.small` 99 | color: #fff; 100 | margin-bottom:16px; 101 | ` 102 | 103 | export const SocialIcons = styled.div` 104 | display: flex; 105 | justify-content: space-between; 106 | align-items: center; 107 | width: 240px; 108 | ` 109 | 110 | export const SocialIconLink = styled.a` 111 | color: #fff; 112 | font-size: 24px; 113 | ` -------------------------------------------------------------------------------- /src/Components/Footer/Index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | FooterContainer, 4 | FooterLink, 5 | FooterLinkContainer, 6 | FooterLinkItems, 7 | FooterLinkTitle, 8 | FooterLinkWrapper, 9 | FooterWrap, 10 | SocialIconLink, 11 | SocialIcons, 12 | SocialLogo, 13 | SocialMedia, 14 | SocialMediaWrap, 15 | WebsiteRights 16 | } from './FooterElements' 17 | import { 18 | FaFacebook, 19 | FaInstagram, 20 | FaTwitter, 21 | FaYoutube 22 | } from 'react-icons/fa' 23 | import { animateScroll as scroll } from 'react-scroll'; 24 | 25 | const Footer = () => { 26 | 27 | const toggleHome = () => { 28 | scroll.scrollToTop() 29 | } 30 | 31 | return ( 32 | <> 33 | 34 | 35 | 36 | 37 | 38 | About Us 39 | How it works? 40 | Testimonials 41 | Careers 42 | Investors 43 | Terms of Services 44 | 45 | 46 | Videos 47 | Submit Video 48 | Ambassador 49 | Agency 50 | Influencer 51 | 52 | 53 | 54 | 55 | Contact Us 56 | Contact 57 | Support 58 | Sponsorship 59 | 60 | 61 | Business 62 | Blog 63 | Referral Program 64 | Media Assets 65 | Security 66 | 67 | 68 | 69 | 70 | 71 | 72 | dolla 73 | 74 | {new Date().getFullYear()} All rights reserved. 75 | 76 | 77 | 81 | 82 | 83 | 87 | 88 | 89 | 93 | 94 | 95 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | ) 108 | } 109 | 110 | export default Footer 111 | -------------------------------------------------------------------------------- /src/Components/Hero/HeroElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { MdArrowForward, MdKeyboardArrowRight } from 'react-icons/md' 3 | 4 | export const HeroContainer = styled.div` 5 | background: #0c0c0c; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | padding: 0 30px; 10 | height: 650px; 11 | position: relative; 12 | z-index: 1; 13 | 14 | :before { 15 | content: ''; 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | right: 0; 20 | bottom: 0; 21 | background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%), 22 | linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 100%); 23 | z-index: 1 24 | 25 | } 26 | ` 27 | 28 | export const HeroBg = styled.div` 29 | position: absolute; 30 | top: 0; 31 | right: 0; 32 | bottom: 0; 33 | left: 0; 34 | width: 100%; 35 | height: 100%; 36 | overflow: hidden; 37 | ` 38 | 39 | export const VideoBg = styled.video` 40 | width: 100%; 41 | height: 100%; 42 | -o-object-fit: cover; 43 | object-fit: cover; 44 | background: #232a34; 45 | 46 | ` 47 | 48 | export const HeroContent = styled.div` 49 | z-index: 3; 50 | max-width: 1200px; 51 | position: absolute; 52 | padding: 8px 24px; 53 | display: flex; 54 | flex-direction: column; 55 | align-index: center; 56 | ` 57 | 58 | export const HeroTitle = styled.h1` 59 | color: #ffff; 60 | font-size:48px; 61 | text-align: center; 62 | 63 | @media screen and (max-width: 768px) { 64 | font-size: 40px; 65 | } 66 | 67 | @media screen and (max-width: 480px) { 68 | font-size: 32px; 69 | } 70 | ` 71 | 72 | export const HeroP = styled.p` 73 | margin-top: 24px; 74 | color: #fff; 75 | fonst-size:24px; 76 | text-align: center; 77 | max-width: 600px; 78 | 79 | @media screen and (max-width: 768px) { 80 | font-size: 24px; 81 | } 82 | 83 | @media screen and (max-width: 480px) { 84 | font-size: 18px; 85 | } 86 | ` 87 | 88 | export const HeroBtnWrapper = styled.div` 89 | margin-top: 32px; 90 | display: flex; 91 | flex-direction: column; 92 | align-items: center; 93 | ` 94 | 95 | export const ArrowForward = styled(MdArrowForward)` 96 | margin-left: 8px; 97 | font-size: 20px; 98 | ` 99 | export const ArrowRight = styled(MdKeyboardArrowRight)` 100 | margin-left: 8px; 101 | font-size: 20px; 102 | ` -------------------------------------------------------------------------------- /src/Components/Hero/Index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { 3 | HeroContainer, 4 | HeroBg, 5 | VideoBg, 6 | ArrowForward, 7 | HeroContent, 8 | HeroP, 9 | HeroTitle, 10 | HeroBtnWrapper, 11 | ArrowRight 12 | } from '../Hero/HeroElements' 13 | import { Button } from '../../Utilities/ButtonElements' 14 | import Video from '../../Videos/video.mp4' 15 | 16 | const Hero = () => { 17 | 18 | const [hover, setHover] = useState(false); 19 | 20 | const onHover = () => { 21 | setHover(!hover); 22 | } 23 | 24 | return ( 25 | <> 26 | 27 | 28 | 29 | 30 | 31 | Virtual Banking Made Easy 32 | 33 | SignUp for a new account today and recieve $250 34 | in credit towards your next payment. 35 | 36 | 37 | 46 | 47 | 48 | 49 | 50 | ) 51 | } 52 | 53 | export default Hero 54 | -------------------------------------------------------------------------------- /src/Components/Info/Data.jsx: -------------------------------------------------------------------------------- 1 | 2 | export const homeObj1 = { 3 | id: 'about', 4 | lightBg: false, 5 | lightText: true, 6 | lightTextDesc: true, 7 | topLine: 'Premium Bank', 8 | headline: 'Unlimited Transactions with zero fees', 9 | description: 'Get access to our exclusive app that allows you to send unlimited money', 10 | buttonLabel: 'Get Started', 11 | imgStart: false, 12 | img: require('../../Images/OT.svg').default, 13 | alt: 'Car', 14 | dark: true, 15 | primary: true, 16 | darkText: false 17 | } 18 | export const homeObj2 = { 19 | id: 'discover', 20 | lightBg: true, 21 | lightText: false, 22 | lightTextDesc: false, 23 | topLine: 'Unlimited Access', 24 | headline: 'Login your account at any time', 25 | description: 'We have you covered no matter where you are located. All you need is internet connection and a phone.', 26 | buttonLabel: 'Learn More', 27 | imgStart: true, 28 | img: require('../../Images/3.svg').default, 29 | alt: 'Piggybank', 30 | dark: false, 31 | primary: false, 32 | darkText: true 33 | } 34 | export const homeObj3 = { 35 | id: 'signup', 36 | lightBg: true, 37 | lightText: false, 38 | lightTextDesc: false, 39 | topLine: 'Join our Team', 40 | headline: 'Creating and account is extremely easy', 41 | description: 'Get everything set up and readyin under 10 minutes. All you need to do is add your information and you are good to go', 42 | buttonLabel: 'Start Now', 43 | imgStart: false, 44 | img: require('../../Images/Account2.svg').default, 45 | alt: 'Paper', 46 | dark: false, 47 | primary: false, 48 | darkText: true 49 | } -------------------------------------------------------------------------------- /src/Components/Info/Index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | InfoContainer, 4 | InfoWrapper, 5 | InfoRow, 6 | BtnWrap, 7 | Column1, 8 | Column2, 9 | Heading, 10 | ImgWrap, 11 | Subtitle, 12 | TextWrapper, 13 | TopLine, 14 | Img 15 | } from '../Info/InfoElements' 16 | 17 | import { Button } from '../../Utilities/ButtonElements' 18 | 19 | const InfoSection = ({ 20 | lightBg, 21 | imgStart, 22 | topLine, 23 | lightText, 24 | darkText, 25 | headline, 26 | description, 27 | buttonLabel, 28 | alt, 29 | img, 30 | id, 31 | primary, 32 | dark, 33 | dark2 34 | }) => { 35 | 36 | return ( 37 | <> 38 | 39 | 40 | 41 | 42 | 43 | {topLine} 44 | {headline} 45 | {description}
46 | 47 | 57 | 58 | 59 | 60 | 61 | 62 | {alt} 63 | 64 | 65 | 66 | 67 | 68 | 69 | ) 70 | } 71 | 72 | export default InfoSection 73 | -------------------------------------------------------------------------------- /src/Components/Info/InfoElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const InfoContainer = styled.div` 4 | color: #fff; 5 | background: ${({ lightBg }) => (lightBg ? '#f9f9f9' : '#010606')}; 6 | 7 | @media screen and (max-width:768px) { 8 | padding: 100px 0; 9 | } 10 | ` 11 | 12 | export const InfoWrapper = styled.div` 13 | display: grid; 14 | z-index: 1; 15 | height: 630px; 16 | width: 100%; 17 | max-width: 1100px; 18 | margin-right: auto; 19 | margin-left: auto; 20 | padding: 0 24px; 21 | justify-content: center; 22 | ` 23 | 24 | export const InfoRow = styled.div` 25 | display: grid; 26 | grid-auto-columns: minmax(auto, 1fr); 27 | align-items: center; 28 | grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)}; 29 | 30 | @media screen and (max-width:768px) { 31 | grid-template-areas: ${({ imgStart }) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)}; 32 | } 33 | ` 34 | 35 | export const Column1 = styled.div` 36 | margin-bottom: 15px; 37 | padding: 0 15px; 38 | grid-area: col1; 39 | ` 40 | 41 | export const Column2 = styled.div` 42 | margin-bottom: 15px; 43 | padding: 0 15px; 44 | grid-area: col2; 45 | ` 46 | 47 | export const TextWrapper = styled.div` 48 | max-width: 540px; 49 | padding-top: 0; 50 | padding-bottom: 60px; 51 | ` 52 | 53 | export const TopLine = styled.p` 54 | color: #01bf71; 55 | font-size: 16px; 56 | line-height:16px; 57 | font-weight: 700; 58 | letter-spacing: 1.4px; 59 | text-transform: uppercase; 60 | margin-bottom: 16px; 61 | ` 62 | export const Heading = styled.h1` 63 | color: #000; 64 | margin-bottom: 24px; 65 | font-size: 48px; 66 | line-height:1.1; 67 | font-weight: 600; 68 | color: ${({ lightText }) => (lightText ? '#f7f8fa' : '#010606')}; 69 | 70 | 71 | @media screen and (max-width:480px) { 72 | font-size: 32px; 73 | } 74 | ` 75 | 76 | export const Subtitle = styled.p` 77 | max-width: 440px; 78 | margin-bottm: 35px; 79 | font-size: 18px; 80 | line-height: 24px; 81 | color: ${({ darkText }) => (darkText ? '#010606' : '#fff')}; 82 | ` 83 | 84 | export const BtnWrap = styled.div` 85 | display: flex; 86 | justify-content: flex-start; 87 | ` 88 | 89 | export const ImgWrap = styled.div` 90 | max-width: 555px; 91 | height: 100%; 92 | ` 93 | 94 | export const Img = styled.img` 95 | width: 100%; 96 | margin: 0 0 10px 0; 97 | padding-right: 0; 98 | 99 | ` 100 | 101 | -------------------------------------------------------------------------------- /src/Components/Navbar/Index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import { FaBars } from 'react-icons/fa' 3 | import { animateScroll as scroll } from 'react-scroll' 4 | import { 5 | Nav, 6 | NavbarContainer, 7 | NavLogo, 8 | MobileIcon, NavMenu, 9 | NavItem, 10 | NavLinks, 11 | NavBtn, 12 | NavBtnLink 13 | } from './NavElements' 14 | 15 | const Navbar = ({ toggle }) => { 16 | 17 | const [scrollNav, setScrollNav] = useState(false); 18 | 19 | const changeNav = () => { 20 | if (window.scrollY >= 80) { 21 | setScrollNav(true); 22 | } else { 23 | setScrollNav(false); 24 | } 25 | } 26 | useEffect(() => { 27 | window.addEventListener('scroll', changeNav) 28 | }, []) 29 | 30 | const toggleHome = () => { 31 | scroll.scrollToTop() 32 | } 33 | 34 | 35 | return ( 36 | <> 37 | 92 | 93 | ); 94 | }; 95 | 96 | export default Navbar 97 | -------------------------------------------------------------------------------- /src/Components/Navbar/NavElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { Link as LinkR } from 'react-router-dom' 3 | import { Link as LinkS } from 'react-scroll' 4 | 5 | export const Nav = styled.nav` 6 | background: ${({ scrollNav }) => scrollNav ? "#000" : 'transparent'}; 7 | height: 80px; 8 | margin-top: -80px; 9 | display: flex; 10 | justify-content: center; 11 | align-item: center; 12 | font-size: 1rem; 13 | position: sticky; 14 | top: 0; 15 | z-index: 10; 16 | 17 | @media screen and (max-width:960px) { 18 | transition:0.8s all ease 19 | } 20 | ` 21 | 22 | export const NavbarContainer = styled.div` 23 | display: flex; 24 | justify-content: space-between; 25 | height: 80px; 26 | z-index: 1; 27 | width: 100%; 28 | padding: 0 24px; 29 | max-width: 1100px; 30 | ` 31 | 32 | export const NavLogo = styled(LinkR)` 33 | color: #fff; 34 | justify-self: flex-start; 35 | cursor: pointer; 36 | font-size: 1.5rem; 37 | display: flex; 38 | align-items: center; 39 | margin-left: 24px; 40 | font-weight: bold; 41 | text-decoration: none; 42 | ` 43 | export const MobileIcon = styled.div` 44 | dsiplay: none; 45 | 46 | @media screen and (max-width: 768px) { 47 | display: block; 48 | position: absolute; 49 | top: 0; 50 | right: 0; 51 | transform: translate(-100%, 60%); 52 | font-size: 1.8rem; 53 | cursor: pointer; 54 | color: #fff; 55 | } 56 | ` 57 | export const NavMenu = styled.ul` 58 | display: flex; 59 | align-items: center; 60 | list-style: none; 61 | text-align: center; 62 | margin-right:-22px; 63 | 64 | @media screen and (max-width: 768px) { 65 | display: none; 66 | } 67 | ` 68 | 69 | export const NavItem = styled.li` 70 | height: 80px; 71 | ` 72 | 73 | export const NavLinks = styled(LinkS)` 74 | color: #fff; 75 | display: flex; 76 | align-items: center; 77 | text-decoration: none; 78 | padding: 0 1rem; 79 | height: 100%; 80 | cursor: pointer; 81 | 82 | &.active { 83 | border-bottom: 3px solid #01bf71; 84 | } 85 | ` 86 | 87 | export const NavBtn = styled.nav` 88 | display:flex; 89 | align-items: center; 90 | 91 | @media screen and (max-width:768px) { 92 | display: none; 93 | } 94 | ` 95 | 96 | export const NavBtnLink = styled(LinkR)` 97 | border-radius: 50px; 98 | background: #01bf71; // Green Color 99 | white-space: nowrap; 100 | padding: 10px 22px; 101 | color: #010606; 102 | font-size: 16px; 103 | outline: none; 104 | border: none; 105 | cursor: pointer; 106 | transition: all 0.2s ease-in-out; 107 | text-decoration: none; 108 | 109 | &:hover { 110 | transition: all 0.2s ease-in-out; 111 | background: #fff; 112 | color: #010606; 113 | } 114 | ` -------------------------------------------------------------------------------- /src/Components/Services/Index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | ServicesContainer, 4 | ServicesCard, 5 | ServicesH1, 6 | ServicesH2, 7 | ServicesP, 8 | ServicesWrapper, 9 | ServicesIcon 10 | } from './ServiceElements' 11 | import Icon1 from '../../Images/1.svg' 12 | import Icon2 from '../../Images/Vf.svg' 13 | import Icon3 from '../../Images/Account.svg' 14 | 15 | const Services = () => { 16 | return ( 17 | <> 18 | 19 | Our Services 20 | 21 | 22 | 23 | Reduce Expenses 24 | We help yoy reduce fees and increase your overall revenue. 25 | 26 | 27 | 28 | Virtual Offices 29 | You can access our platform anywhere from the world. 30 | 31 | 32 | 33 | Premium Benefits 34 | Unlock our special membership offers and sove more. 35 | 36 | 37 | 38 | 39 | ) 40 | } 41 | 42 | export default Services 43 | -------------------------------------------------------------------------------- /src/Components/Services/ServiceElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const ServicesContainer = styled.div` 4 | height: 550px; 5 | display: flex; 6 | flex-direction: column; 7 | justify-content: center; 8 | background:#010606; 9 | 10 | @media screen and (max-width:768px) { 11 | height: 1250px; 12 | } 13 | 14 | @media screen and (max-width:480px) { 15 | height: 1300px; 16 | } 17 | ` 18 | 19 | export const ServicesWrapper = styled.div` 20 | max-width: 1000px; 21 | margin: 0 auto; 22 | display: grid; 23 | grid-template-columns: 1fr 1fr 1fr; 24 | align-items: center; 25 | grid-gap: 16px; 26 | padding: 0 50px; 27 | 28 | @media screen and (max-width:1000px) { 29 | grid-template-columns: 1fr 1fr; 30 | } 31 | 32 | @media screen and (max-width:768px) { 33 | grid-template-columns: 1fr; 34 | padding: 0 20px; 35 | } 36 | ` 37 | 38 | export const ServicesCard = styled.div` 39 | background: #fff; 40 | display: flex; 41 | flex-direction: column; 42 | justify-content: flex-start; 43 | align-items: center; 44 | border-radius: 10px; 45 | max-height: 340px; 46 | padding: 30px; 47 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 48 | transition: all 0.2s ease-in-out; 49 | 50 | &:hover { 51 | transform : scale(1.02); 52 | tansition: all 0.2 ease-in-out 53 | cursor: pointer; 54 | } 55 | ` 56 | 57 | export const ServicesIcon = styled.img` 58 | height: 160px; 59 | width: 160px; 60 | margin-bottom: 10px; 61 | ` 62 | 63 | export const ServicesH1 = styled.h1` 64 | font-size: 2.5rem; 65 | color: #fff; 66 | margin-bottom: 64px; 67 | align-items: center; 68 | text-align: center; 69 | 70 | @media screen and (max-width:480px) { 71 | font-size: 2rem; 72 | } 73 | ` 74 | 75 | export const ServicesH2 = styled.h2` 76 | font-size: 1rem; 77 | margin-bottom: 10px; 78 | ` 79 | 80 | export const ServicesP = styled.p` 81 | font-size: 1rem; 82 | text-align: center; 83 | ` -------------------------------------------------------------------------------- /src/Components/SideBar/Index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | SidebarContainer, 4 | Icon, 5 | CloseIcon, 6 | SidebarWrapper, 7 | SidebarMenu, 8 | SidebarLink, 9 | SidebarBtnWrap, 10 | SidebarRoute, 11 | 12 | } from './SideBarElements' 13 | 14 | const Sidebar = ({ toggle, isOpen }) => { 15 | return ( 16 | <> 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | About 25 | 26 | 27 | Discover 28 | 29 | 30 | Services 31 | 32 | 33 | Sign Up 34 | 35 | 36 | 37 | Sign In 38 | 39 | 40 | 41 | 42 | ) 43 | } 44 | 45 | export default Sidebar 46 | -------------------------------------------------------------------------------- /src/Components/SideBar/SideBarElements.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { Link as LinkR } from 'react-router-dom' 3 | import { Link as LinkS } from 'react-scroll' 4 | import { FaTimes } from 'react-icons/fa' 5 | 6 | export const SidebarContainer = styled.aside` 7 | position: fixed; 8 | z-index: 999; 9 | width: 100%; 10 | height: 100%; 11 | background: #0d0d0d; 12 | display:grid; 13 | align-items: center; 14 | top:0; 15 | left: 0; 16 | transition: 0.3s ease-in-out; 17 | opacity:${({ isOpen }) => (isOpen ? '100%' : '0')}; 18 | top: ${({ isOpen }) => (isOpen ? '0' : '-100%')}; 19 | ` 20 | 21 | export const CloseIcon = styled(FaTimes)` 22 | color: #fff; 23 | ` 24 | 25 | export const Icon = styled.div` 26 | position: absolute; 27 | top: 1.2rem; 28 | right: 1.5rem; 29 | background: transparent; 30 | font-size: 2rem; 31 | cursor: pointer; 32 | outline: none; 33 | ` 34 | 35 | export const SidebarWrapper = styled.div` 36 | color: #fff; 37 | ` 38 | 39 | export const SidebarMenu = styled.ul` 40 | display:grid; 41 | grid-template-columns: 1fr; 42 | grid-template-rows: repeat(6, 70px); 43 | text-align: center; 44 | 45 | @media screen and (max-width:480px) { 46 | grid-template-rows: repeat(6, 60px); 47 | } 48 | ` 49 | 50 | 51 | export const SidebarLink = styled(LinkS)` 52 | display:flex; 53 | align-items: center; 54 | justify-content: center; 55 | font-size:1.5rem; 56 | text-decoration: none; 57 | list-style: none; 58 | transition: 0.2s ease-in-out; 59 | color: #fff; 60 | cursor: pointer; 61 | 62 | &:hover { 63 | color: #01bf71; 64 | transition: 0.2s ease-in-out; 65 | } 66 | ` 67 | 68 | export const SidebarBtnWrap = styled.div` 69 | display: flex; 70 | justify-content: center; 71 | ` 72 | 73 | 74 | export const SidebarRoute = styled(LinkR)` 75 | border-radius: 50px; 76 | background: #01bf71; 77 | white-space: nowrap; 78 | padding: 16px 64px; 79 | color: #010606; 80 | font-size: 16px; 81 | outline: none; 82 | border: none; 83 | cursor: pointer; 84 | transition: 0.2s ease-in-out; 85 | text-decoration: none; 86 | 87 | &:hover { 88 | transition: all 0.2s ease-in-out; 89 | background:#fff; 90 | color: #010606; 91 | } 92 | ` 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /src/Images/1.svg: -------------------------------------------------------------------------------- 1 | discount -------------------------------------------------------------------------------- /src/Images/2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Images/3.svg: -------------------------------------------------------------------------------- 1 | nakamoto -------------------------------------------------------------------------------- /src/Images/Account.svg: -------------------------------------------------------------------------------- 1 | revenue -------------------------------------------------------------------------------- /src/Images/Account2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Images/OT.svg: -------------------------------------------------------------------------------- 1 | online_transactions -------------------------------------------------------------------------------- /src/Images/Vf.svg: -------------------------------------------------------------------------------- 1 | noted -------------------------------------------------------------------------------- /src/Images/img1.svg: -------------------------------------------------------------------------------- 1 | fast car -------------------------------------------------------------------------------- /src/Images/img2.svg: -------------------------------------------------------------------------------- 1 | digital currency -------------------------------------------------------------------------------- /src/Pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import Navbar from '../Components/Navbar/Index' 3 | import Sidebar from '../Components/SideBar/Index' 4 | import Hero from '../Components/Hero/Index' 5 | import InfoSection from '../Components/Info/Index' 6 | import Services from '../Components/Services/Index' 7 | import { homeObj1, homeObj2, homeObj3 } from '../Components/Info/Data' 8 | import Footer from '../Components/Footer/Index' 9 | 10 | const Home = () => { 11 | 12 | const [isOpen, setIsOpen] = useState(false); 13 | 14 | const toggle = () => { 15 | setIsOpen(!isOpen); 16 | } 17 | 18 | return ( 19 | <> 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |