├── .gitignore
├── README.md
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
├── src
    ├── App.js
    ├── App.test.js
    ├── assets
    │   ├── fonts
    │   │   ├── eina01-bold-webfont.17ecfa75.woff2
    │   │   ├── eina01-regular-webfont.57ac5b4b.woff2
    │   │   └── eina01-semibold-webfont.93d21e16.woff2
    │   └── images
    │   │   └── line-bg.svg
    ├── components
    │   ├── Section1.js
    │   ├── Section2.js
    │   ├── Section3.js
    │   ├── Section4.js
    │   ├── Section5.js
    │   └── Section6.js
    ├── index.js
    ├── index.scss
    ├── pages
    │   └── Landing.js
    ├── serviceWorker.js
    ├── setupTests.js
    ├── styles
    │   ├── app.scss
    │   ├── breakpoints.scss
    │   ├── components
    │   │   ├── section.scss
    │   │   └── sections.scss
    │   └── variables.scss
    └── utils
    │   └── index.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 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 2 | 
 3 | ## Available Scripts
 4 | 
 5 | In the project directory, you can run:
 6 | 
 7 | ### `yarn start`
 8 | 
 9 | Runs the app in the development mode.<br />
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 | 
12 | The page will reload if you make edits.<br />
13 | You will also see any lint errors in the console.
14 | 
15 | ### `yarn test`
16 | 
17 | Launches the test runner in the interactive watch mode.<br />
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19 | 
20 | ### `yarn build`
21 | 
22 | Builds the app for production to the `build` folder.<br />
23 | It correctly bundles React in production mode and optimizes the build for the best performance.
24 | 
25 | The build is minified and the filenames include the hashes.<br />
26 | Your app is ready to be deployed!
27 | 
28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29 | 
30 | ### `yarn eject`
31 | 
32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33 | 
34 | 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.
35 | 
36 | 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.
37 | 
38 | 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.
39 | 
40 | ## Learn More
41 | 
42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43 | 
44 | To learn React, check out the [React documentation](https://reactjs.org/).
45 | 
46 | ### Code Splitting
47 | 
48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
49 | 
50 | ### Analyzing the Bundle Size
51 | 
52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
53 | 
54 | ### Making a Progressive Web App
55 | 
56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
57 | 
58 | ### Advanced Configuration
59 | 
60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
61 | 
62 | ### Deployment
63 | 
64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
65 | 
66 | ### `yarn build` fails to minify
67 | 
68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
69 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-starter",
 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 |     "framer-motion": "^2.7.6",
10 |     "gsap": "^3.5.1",
11 |     "node-sass": "^4.14.1",
12 |     "react": "^16.13.1",
13 |     "react-dom": "^16.13.1",
14 |     "react-scripts": "3.4.3"
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/oluwadareseyi/abeg-rebuild/e576d851b4f4ed9548888cd7c1417010827c3ced/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
10 |     />
11 |     <meta name="theme-color" content="#000000" />
12 |     <meta
13 |       name="description"
14 |       content="Web site created using create-react-app"
15 |     />
16 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
17 |     <!--
18 |       manifest.json provides metadata used when your web app is installed on a
19 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
20 |     -->
21 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
22 |     <!--
23 |       Notice the use of %PUBLIC_URL% in the tags above.
24 |       It will be replaced with the URL of the `public` folder during the build.
25 |       Only files inside the `public` folder can be referenced from the HTML.
26 | 
27 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
28 |       work correctly both with client-side routing and a non-root public URL.
29 |       Learn how to configure a non-root public URL by running `npm run build`.
30 |     -->
31 |     <title>React App</title>
32 |   </head>
33 |   <body>
34 |     <noscript>You need to enable JavaScript to run this app.</noscript>
35 |     <div id="root"></div>
36 |     <!--
37 |       This HTML file is a template.
38 |       If you open it directly in the browser, you will see an empty page.
39 | 
40 |       You can add webfonts, meta tags, or analytics to this file.
41 |       The build step will place the bundled scripts into the <body> tag.
42 | 
43 |       To begin the development, run `npm start` or `yarn start`.
44 |       To create a production bundle, use `npm run build` or `yarn build`.
45 |     -->
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oluwadareseyi/abeg-rebuild/e576d851b4f4ed9548888cd7c1417010827c3ced/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oluwadareseyi/abeg-rebuild/e576d851b4f4ed9548888cd7c1417010827c3ced/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 Landing from "./pages/Landing";
 3 | import "./styles/app.scss";
 4 | 
 5 | function App() {
 6 |   return (
 7 |     <div className="pages">
 8 |       <Landing />
 9 |     </div>
10 |   );
11 | }
12 | 
13 | export default App;
14 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from '@testing-library/react';
 3 | import App from './App';
 4 | 
 5 | test('renders learn react link', () => {
 6 |   const { getByText } = render(<App />);
 7 |   const linkElement = getByText(/learn react/i);
 8 |   expect(linkElement).toBeInTheDocument();
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/assets/fonts/eina01-bold-webfont.17ecfa75.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oluwadareseyi/abeg-rebuild/e576d851b4f4ed9548888cd7c1417010827c3ced/src/assets/fonts/eina01-bold-webfont.17ecfa75.woff2


--------------------------------------------------------------------------------
/src/assets/fonts/eina01-regular-webfont.57ac5b4b.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oluwadareseyi/abeg-rebuild/e576d851b4f4ed9548888cd7c1417010827c3ced/src/assets/fonts/eina01-regular-webfont.57ac5b4b.woff2


--------------------------------------------------------------------------------
/src/assets/fonts/eina01-semibold-webfont.93d21e16.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oluwadareseyi/abeg-rebuild/e576d851b4f4ed9548888cd7c1417010827c3ced/src/assets/fonts/eina01-semibold-webfont.93d21e16.woff2


--------------------------------------------------------------------------------
/src/assets/images/line-bg.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" width="2720" height="1071" viewBox="0 0 2720 1071">
 2 |   <g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-width="2.6" opacity=".05" transform="translate(2 2)">
 3 |     <path d="M711.996047 82L834.321648 82C840.06541 82 844.721648 86.6562389 844.721648 92.4000006 844.721648 92.4915702 844.720439 92.5831359 844.718021 92.6746737L819.267549 1055.97473C819.118676 1061.60953 814.50795 1066.10005 808.871176 1066.10005L673.820354 1066.10005C668.076592 1066.10005 663.420353 1061.44382 663.420353 1055.70005 663.420353 1055.56274 663.423073 1055.42543 663.428511 1055.28822L701.604204 91.9881706C701.825307 86.4090081 706.412505 82 711.996047 82zM452.678423 82L561.736501 82C567.426687 82 572.060433 86.5729386 572.135594 92.2626281L584.860825 1055.56268C584.936694 1061.30594 580.342365 1066.02328 574.599104 1066.09915 574.553316 1066.09975 574.507524 1066.10005 574.461732 1066.10005L478.128885 1066.10005C472.492111 1066.10005 467.881384 1061.60953 467.732512 1055.97473L442.28205 92.6746735C442.130352 86.9329154 446.661992 82.1553255 452.40375 82.0036278 452.495288 82.0012094 452.586853 82 452.678423 82zM244.400013 82L340.179695 82C345.923457 82 350.579696 86.6562389 350.579696 92.4000006 350.579696 92.5373176 350.576976 92.6746212 350.571539 92.8118305L312.395845 1056.11188C312.174742 1061.69105 307.587544 1066.10005 302.004002 1066.10005L244.400013 1066.10005C238.656252 1066.10005 234.000013 1061.44382 234.000013 1055.70005L234.000013 92.4000006C234.000013 86.6562389 238.656252 82 244.400013 82z"/>
 4 |     <rect width="117" height="984.1" y="82" rx="10.4"/>
 5 |     <path d="M933.538343 82L1068.32165 82C1074.06541 82 1078.72165 86.6562389 1078.72165 92.4000006 1078.72165 92.4915702 1078.72044 92.5831359 1078.71803 92.6746735L1053.26756 1055.97473C1053.11869 1061.60953 1048.50796 1066.10005 1042.87119 1066.10005L946.263574 1066.10005C940.573388 1066.10005 935.939642 1061.52712 935.864481 1055.83743L923.13925 92.537373C923.063381 86.7941124 927.65771 82.076776 933.400971 82.0009073 933.446759 82.0003024 933.492551 82 933.538343 82zM1154.82038 82L1315.17976 82C1320.92352 82 1325.57976 86.6562389 1325.57976 92.4000006 1325.57976 92.5373177 1325.57704 92.6746213 1325.5716 92.8118306L1287.3959 1056.11188C1287.17479 1061.69105 1282.58759 1066.10005 1277.00405 1066.10005L1192.99607 1066.10005C1187.41253 1066.10005 1182.82533 1061.69105 1182.60423 1056.11188L1144.42854 92.8118305C1144.20109 87.0725739 1148.66929 82.2356046 1154.40855 82.0081572 1154.54576 82.0027196 1154.68306 82 1154.82038 82zM1414.12894 82L1484.87121 82C1490.50799 82 1495.11872 86.49052 1495.26759 92.1253276L1520.71805 1055.42538C1520.86975 1061.16714 1516.33811 1065.94473 1510.59635 1066.09643 1510.50481 1066.09884 1510.41325 1066.10005 1510.32168 1066.10005L1388.67847 1066.10005C1382.93471 1066.10005 1378.27847 1061.44382 1378.27847 1055.70005 1378.27847 1055.60848 1378.27968 1055.51692 1378.2821 1055.42538L1403.73256 92.1253276C1403.88144 86.49052 1408.49216 82 1414.12894 82z"/>
 6 |     <path d="M36.1451854 18L106.854815 18C112.498093 18 117.111654 22.5005226 117.251616 28.1420647L142.735586 1055.34206C142.87804 1061.08406 138.338715 1065.85435 132.59672 1065.9968 132.510758 1065.99893 132.424773 1066 132.338784 1066L10.6612159 1066C4.91745422 1066 .26121536 1061.34376.26121536 1055.6.26121536 1055.51401.262281807 1055.42803.264414455 1055.34206L25.7483839 28.1420647C25.8883458 22.5005226 30.5019074 18 36.1451854 18zM244.273957 0L340.850577 0C346.495547-1.03696412e-15 351.109845 4.50312597 351.247486 10.1464174L376.740169 1055.34642C376.880219 1061.08847 372.338897 1065.85686 366.596843 1065.99691 366.512331 1065.99897 366.427797 1066 366.34326 1066L231.527615 1066C225.783854 1066 221.127615 1061.34376 221.127615 1055.6 221.127615 1055.55772 221.127873 1055.51545 221.128388 1055.47318L233.874729 10.2731807C233.944167 4.57930754 238.57966 1.525688e-14 244.273957 0zM453.053487 0L600.600024 0C606.343785-1.05511191e-15 611.000024 4.65623886 611.000024 10.4000006L611.000024 1055.6C611.000024 1061.34376 606.343785 1066 600.600024 1066L516.785194 1066C511.287245 1066 506.739093 1061.72073 506.404474 1056.23297L442.672766 11.0329713C442.323186 5.29985767 446.687403.368860087 452.420516.019279985 452.631262.00642964156 452.84235 1.60259968e-14 453.053487 0z" transform="translate(2105 .1)"/>
 7 |     <path d="M1622.27403.100054145L1718.85065.100054145C1724.49562.100054145 1729.10992 4.60318011 1729.24756 10.2464716L1754.74024 1055.44647C1754.88029 1061.18852 1750.33897 1065.95691 1744.59692 1066.09696 1744.51241 1066.09902 1744.42787 1066.10005 1744.34334 1066.10005L1609.52769 1066.10005C1603.78393 1066.10005 1599.12769 1061.44382 1599.12769 1055.70005 1599.12769 1055.65778 1599.12795 1055.61551 1599.12846 1055.57323L1611.87481 10.3732349C1611.94424 4.67936169 1616.57974.100054145 1622.27403.100054145zM1831.05356.100054145L1978.6001.100054145C1984.34386.100054145 1989.0001 4.756293 1989.0001 10.5000547L1989.0001 1055.70005C1989.0001 1061.44382 1984.34386 1066.10005 1978.6001 1066.10005L1894.78527 1066.10005C1889.28732 1066.10005 1884.73917 1061.82078 1884.40455 1056.33302L1820.67284 11.1330255C1820.32326 5.39991181 1824.68748.468914232 1830.42059.11933413 1830.63134.106483786 1830.84243.100054145 1831.05356.100054145z"/>
 8 |     <rect width="2374" height="117" x="152.1" y="144.4" rx="10.4"/>
 9 |     <rect width="2374" height="117" x="152.1" y="378.4" rx="10.4"/>
10 |     <rect width="2374" height="117" x="152.1" y="612.4" rx="10.4"/>
11 |     <rect width="2374" height="117" x="152.1" y="846.4" rx="10.4"/>
12 |   </g>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/src/components/Section1.js:
--------------------------------------------------------------------------------
  1 | import { motion } from "framer-motion";
  2 | import React from "react";
  3 | import { transition } from "../utils";
  4 | 
  5 | const spring = { type: "spring", bounce: 0.7, stiffness: 200, duration: 0.8 };
  6 | 
  7 | const sectionVariant = {
  8 |   hidden: {
  9 |     opacity: 0,
 10 |   },
 11 |   visible: {
 12 |     opacity: 1,
 13 |   },
 14 |   leave: {
 15 |     opacity: 0,
 16 |     transition: { ...transition, delay: 1.1 },
 17 |   },
 18 | };
 19 | 
 20 | const titleVariant = {
 21 |   hidden: {
 22 |     y: 50,
 23 |   },
 24 |   visible: {
 25 |     y: 0,
 26 |   },
 27 |   leave: {
 28 |     y: 50,
 29 |     transition: { ...transition, delay: 1.1 },
 30 |   },
 31 | };
 32 | 
 33 | const bubble1 = {
 34 |   hidden: {
 35 |     scale: 0,
 36 |   },
 37 |   visible: {
 38 |     scale: 1,
 39 |     transition: { ...spring },
 40 |   },
 41 |   leave: {
 42 |     scale: 0.5,
 43 |     opacity: 0,
 44 |     transition: { ...spring, duration: 0.7, delay: 0.7, bounce: 0.6 },
 45 |   },
 46 | };
 47 | 
 48 | const bubble2 = {
 49 |   hidden: {
 50 |     scale: 0,
 51 |     x: 140,
 52 |     y: 140,
 53 |   },
 54 |   visible: {
 55 |     scale: 1,
 56 |     x: 140,
 57 |     y: 140,
 58 |     transition: { ...spring, delay: 0.1 },
 59 |   },
 60 |   leave: {
 61 |     scale: 0.5,
 62 |     x: 140,
 63 |     opacity: 0,
 64 |     y: 140,
 65 |     transition: { ...spring, delay: 0.7, duration: 0.5 },
 66 |   },
 67 | };
 68 | 
 69 | const bubble3 = {
 70 |   hidden: {
 71 |     scale: 0,
 72 |     x: -140,
 73 |     y: -140,
 74 |   },
 75 |   visible: {
 76 |     scale: 1,
 77 |     x: -140,
 78 |     y: -140,
 79 |     transition: { ...spring, delay: 0.2 },
 80 |   },
 81 |   leave: {
 82 |     scale: 0.5,
 83 |     x: -140,
 84 |     opacity: 0,
 85 |     y: -140,
 86 |     transition: { ...spring, delay: 0.8, duration: 0.5 },
 87 |   },
 88 | };
 89 | 
 90 | const bubble4 = {
 91 |   hidden: {
 92 |     scale: 0,
 93 |     x: 140,
 94 |     y: -140,
 95 |   },
 96 |   visible: {
 97 |     scale: 1,
 98 |     x: 140,
 99 |     y: -140,
100 |     transition: { ...spring, delay: 0.3 },
101 |   },
102 |   leave: {
103 |     scale: 0.5,
104 |     opacity: 0,
105 |     x: 140,
106 |     y: -140,
107 |     transition: { ...spring, delay: 0.9, duration: 0.5 },
108 |   },
109 | };
110 | 
111 | const bubble5 = {
112 |   hidden: {
113 |     scale: 0,
114 |     x: -140,
115 |     y: 140,
116 |   },
117 |   visible: {
118 |     scale: 1,
119 |     x: -140,
120 |     y: 140,
121 |     transition: { ...spring, delay: 0.4 },
122 |   },
123 |   leave: {
124 |     scale: 0.5,
125 |     opacity: 0,
126 |     x: -140,
127 |     y: 140,
128 |     transition: { ...spring, delay: 1, duration: 0.5 },
129 |   },
130 | };
131 | 
132 | const Section1 = () => {
133 |   return (
134 |     <motion.section
135 |       variants={sectionVariant}
136 |       key="one"
137 |       exit="leave"
138 |       initial="hidden"
139 |       animate="visible"
140 |       transition={{ ...transition }}
141 |     >
142 |       <div className="section-inner section-1">
143 |         <div className="left">
144 |           <div className="title">
145 |             <span>
146 |               <motion.span
147 |                 variants={titleVariant}
148 |                 transition={{ ...transition, delay: 0.1 }}
149 |                 className="hide-text"
150 |               >
151 |                 <span>Make Someone</span>
152 |               </motion.span>
153 |             </span>
154 |             <br />
155 |             <span>
156 |               <motion.span
157 |                 variants={titleVariant}
158 |                 transition={{ ...transition, delay: 0.2 }}
159 |                 className="hide-text"
160 |               >
161 |                 <span>Happy With Cash</span>
162 |               </motion.span>
163 |             </span>
164 |           </div>
165 |           <motion.div
166 |             variants={titleVariant}
167 |             transition={{ ...transition, delay: 0.1 }}
168 |             className="sub"
169 |           >
170 |             Do you want to pay for the food you ordered for a friend, send money
171 |             to your babe or friends? use Anon.
172 |           </motion.div>
173 | 
174 |           <motion.div
175 |             variants={titleVariant}
176 |             transition={{ ...transition, delay: 0.1 }}
177 |             className="buttons"
178 |           >
179 |             <div className="button">
180 |               <div className="coming">Coming soon</div>
181 |               <div className="app">App Store</div>
182 |             </div>
183 |             <div className="button">
184 |               <div className="coming">Coming soon</div>
185 |               <div className="app">Google Play</div>
186 |             </div>
187 |           </motion.div>
188 |         </div>
189 | 
190 |         <div className="right">
191 |           <motion.div
192 |             variants={bubble1}
193 |             className="circle circle-1"
194 |           ></motion.div>
195 |           <motion.div
196 |             variants={bubble2}
197 |             className="circle circle-2"
198 |           ></motion.div>
199 |           <motion.div
200 |             variants={bubble3}
201 |             className="circle circle-3"
202 |           ></motion.div>
203 |           <motion.div
204 |             variants={bubble4}
205 |             className="circle circle-4"
206 |           ></motion.div>
207 |           <motion.div
208 |             variants={bubble5}
209 |             className="circle circle-5"
210 |           ></motion.div>
211 |         </div>
212 |       </div>
213 |     </motion.section>
214 |   );
215 | };
216 | 
217 | export default Section1;
218 | 


--------------------------------------------------------------------------------
/src/components/Section2.js:
--------------------------------------------------------------------------------
  1 | import { motion } from "framer-motion";
  2 | import React from "react";
  3 | import { transition } from "../utils";
  4 | 
  5 | const sectionVariant = {
  6 |   hidden: {
  7 |     opacity: 0,
  8 |   },
  9 |   visible: {
 10 |     opacity: 1,
 11 |   },
 12 |   leave: {
 13 |     opacity: 0,
 14 |     transition: { ...transition, delay: 0.5 },
 15 |   },
 16 | };
 17 | 
 18 | const titleVariant = {
 19 |   hidden: {
 20 |     y: 50,
 21 |   },
 22 |   visible: {
 23 |     y: 0,
 24 |   },
 25 |   leave: {
 26 |     y: 50,
 27 |     transition: { ...transition, delay: 0.5 },
 28 |   },
 29 | };
 30 | 
 31 | const imageVariant = {
 32 |   hidden: {
 33 |     y: 100,
 34 |     opacity: 0,
 35 |   },
 36 |   visible: {
 37 |     y: 0,
 38 |     opacity: 1,
 39 |     transition: { ...transition, duration: 1, type: "spring", bounce: 0.4 },
 40 |   },
 41 |   leave: {
 42 |     y: 100,
 43 |     opacity: 0,
 44 |     transition: {
 45 |       ...transition,
 46 |       duration: 0.7,
 47 |       type: "spring",
 48 |       bounce: 0.2,
 49 |       delay: 0.5,
 50 |     },
 51 |   },
 52 | };
 53 | 
 54 | const Section2 = () => {
 55 |   return (
 56 |     <motion.section
 57 |       variants={sectionVariant}
 58 |       key="two"
 59 |       exit="leave"
 60 |       initial="hidden"
 61 |       animate="visible"
 62 |       transition={{ ...transition }}
 63 |     >
 64 |       <div className="section-inner section-2">
 65 |         <div className="left">
 66 |           <div className="title">
 67 |             <span>
 68 |               <motion.span
 69 |                 variants={titleVariant}
 70 |                 transition={{ ...transition, delay: 0.1 }}
 71 |                 className="hide-text"
 72 |               >
 73 |                 <span>Digitally Kick A**</span>
 74 |               </motion.span>
 75 |             </span>
 76 |           </div>
 77 |           <motion.div
 78 |             variants={titleVariant}
 79 |             transition={{ ...transition, delay: 0.1 }}
 80 |             className="sub"
 81 |           >
 82 |             With Anon you get a digital wallet that can be funded by a transfer
 83 |             from any bank.
 84 |           </motion.div>
 85 | 
 86 |           <motion.div
 87 |             variants={titleVariant}
 88 |             transition={{ ...transition, delay: 0.1 }}
 89 |             className="buttons"
 90 |           >
 91 |             <div className="button button-txt">
 92 |               <div className="coming">Withdraw your cash</div>
 93 |             </div>
 94 |             <div className="button button-txt">
 95 |               <div className="coming">Fund your wallet</div>
 96 |             </div>
 97 |           </motion.div>
 98 |         </div>
 99 |         <div className="right">
100 |           <motion.div variants={imageVariant} className="right-bg">
101 |             <img
102 |               src="https://abeg.app/static/media/p2p-screenshot-1.bc76ac98.png"
103 |               alt="phone"
104 |             />
105 |           </motion.div>
106 |         </div>
107 |       </div>
108 |     </motion.section>
109 |   );
110 | };
111 | 
112 | export default Section2;
113 | 


--------------------------------------------------------------------------------
/src/components/Section3.js:
--------------------------------------------------------------------------------
  1 | import { motion } from "framer-motion";
  2 | import React from "react";
  3 | import { transition } from "../utils";
  4 | 
  5 | const sectionVariant = {
  6 |   hidden: {
  7 |     opacity: 0,
  8 |   },
  9 |   visible: {
 10 |     opacity: 1,
 11 |   },
 12 |   leave: {
 13 |     opacity: 0,
 14 |     transition: { ...transition, delay: 0.5 },
 15 |   },
 16 | };
 17 | 
 18 | const titleVariant = {
 19 |   hidden: {
 20 |     y: 50,
 21 |   },
 22 |   visible: {
 23 |     y: 0,
 24 |   },
 25 |   leave: {
 26 |     y: 50,
 27 |     transition: { ...transition, delay: 0.5 },
 28 |   },
 29 | };
 30 | 
 31 | const imageVariant = {
 32 |   hidden: {
 33 |     y: 100,
 34 |     opacity: 0,
 35 |   },
 36 |   visible: {
 37 |     y: 0,
 38 |     opacity: 1,
 39 |     transition: {
 40 |       ...transition,
 41 |       duration: 1,
 42 |       type: "spring",
 43 |       bounce: 0.4,
 44 |       staggerChildren: 0.1,
 45 |       delayChildren: 0.1,
 46 |     },
 47 |   },
 48 |   leave: {
 49 |     y: 100,
 50 |     opacity: 0,
 51 |     transition: {
 52 |       ...transition,
 53 |       duration: 0.5,
 54 |       type: "spring",
 55 |       bounce: 0.1,
 56 |       delay: 0.2,
 57 |       staggerChildren: 0.05,
 58 |     },
 59 |   },
 60 | };
 61 | 
 62 | const circleVariant = {
 63 |   hidden: {
 64 |     scale: 0,
 65 |     opacity: 0,
 66 |     y: 20,
 67 |     x: 20,
 68 |     z: 20,
 69 |   },
 70 |   visible: {
 71 |     scale: 1,
 72 |     x: 0,
 73 |     y: 0,
 74 |     z: 0,
 75 |     opacity: 1,
 76 |     transition: {
 77 |       type: "tween",
 78 |       ease: "easeOut",
 79 |       duration: 0.5,
 80 |     },
 81 |   },
 82 |   leave: {
 83 |     scale: 0,
 84 |     opacity: 0,
 85 |     transition: {
 86 |       delay: 0.1,
 87 |       duration: 0.01,
 88 |     },
 89 |   },
 90 | };
 91 | 
 92 | const bellVariant = {
 93 |   hidden: {
 94 |     scale: 0,
 95 |     opacity: 0,
 96 |     rotate: -380,
 97 |   },
 98 |   visible: {
 99 |     scale: 1,
100 |     rotate: 0,
101 |     opacity: 1,
102 |     transition: {
103 |       type: "spring",
104 |       bounce: 0.4,
105 |       duration: 0.6,
106 |     },
107 |   },
108 |   leave: {
109 |     scale: 0,
110 |     rotate: -380,
111 |     opacity: 0,
112 |     transition: {
113 |       duration: 0.01,
114 |       delay: 0.1,
115 |     },
116 |   },
117 | };
118 | 
119 | const phoneVariant = {
120 |   hidden: {
121 |     y: 50,
122 |     opacity: 0,
123 |   },
124 |   visible: {
125 |     y: 0,
126 |     opacity: 1,
127 |     transition: {
128 |       delay: 0.4,
129 |     },
130 |   },
131 |   leave: {
132 |     y: 50,
133 |     opacity: 0,
134 |     delay: 0.1,
135 |   },
136 | };
137 | 
138 | const notVariant = {
139 |   hidden: {
140 |     y: 50,
141 |     opacity: 0,
142 |   },
143 |   visible: {
144 |     y: 0,
145 |     opacity: 1,
146 |     transition: {
147 |       delay: 0.8,
148 |     },
149 |   },
150 |   leave: {
151 |     opacity: 0,
152 |     delay: 0.1,
153 |   },
154 | };
155 | 
156 | const Section3 = () => {
157 |   return (
158 |     <motion.section
159 |       variants={sectionVariant}
160 |       key="one"
161 |       exit="leave"
162 |       initial="hidden"
163 |       animate="visible"
164 |       transition={{ ...transition }}
165 |     >
166 |       <div className="section-inner section-3">
167 |         <div className="left">
168 |           <div className="title">
169 |             <span>
170 |               <motion.span
171 |                 variants={titleVariant}
172 |                 transition={{ ...transition, delay: 0.1 }}
173 |                 className="hide-text"
174 |               >
175 |                 <span>Sending Money</span>
176 |               </motion.span>
177 |             </span>
178 |             <br />
179 |             <span>
180 |               <motion.span
181 |                 variants={titleVariant}
182 |                 transition={{ ...transition, delay: 0.2 }}
183 |                 className="hide-text"
184 |               >
185 |                 <span>
186 |                   Can Be Fun Too{" "}
187 |                   <span role="img" aria-label="dancing-woman">
188 |                     💃🏽
189 |                   </span>
190 |                 </span>
191 |               </motion.span>
192 |             </span>
193 |           </div>
194 |           <motion.div
195 |             variants={titleVariant}
196 |             transition={{ ...transition, delay: 0.1 }}
197 |             className="sub"
198 |           >
199 |             Send money to people on your contact list using their phone numbers
200 |             or via payment links that can be shared however you decide or even
201 |             using bank accounts.
202 |           </motion.div>
203 | 
204 |           <motion.div
205 |             variants={titleVariant}
206 |             transition={{ ...transition, delay: 0.1 }}
207 |             className="buttons"
208 |           >
209 |             <div className="button button-txt">
210 |               <div className="coming">Coming soon</div>
211 |             </div>
212 |             <div className="button button-txt">
213 |               <div className="coming">Coming soon</div>
214 |             </div>
215 |           </motion.div>
216 |         </div>
217 |         <div className="right">
218 |           <motion.div variants={notVariant} className="notification">
219 |             <img
220 |               src="https://abeg.app/static/media/notification.322758bd.png"
221 |               alt=""
222 |             />
223 |           </motion.div>
224 |           <motion.div variants={imageVariant} className="right-bg">
225 |             <motion.div variants={phoneVariant} className="phone">
226 |               <img
227 |                 src="https://abeg.app/static/media/lock-screen.50390647.png"
228 |                 alt=""
229 |               />
230 |             </motion.div>
231 | 
232 |             <motion.div variants={bellVariant} className="circle bell-con">
233 |               <i class="fas fa-bell"></i>
234 |             </motion.div>
235 |             <div className="circle circle-1">
236 |               <motion.div
237 |                 variants={circleVariant}
238 |                 className="inner-circle"
239 |               ></motion.div>
240 |             </div>
241 |             <div className="circle circle-2">
242 |               <motion.div
243 |                 variants={circleVariant}
244 |                 className="inner-circle"
245 |               ></motion.div>
246 |             </div>
247 |             <div className="circle circle-3">
248 |               <motion.div
249 |                 variants={circleVariant}
250 |                 className="inner-circle"
251 |               ></motion.div>
252 |             </div>
253 |             <div className="circle circle-4">
254 |               <motion.div
255 |                 variants={circleVariant}
256 |                 className="inner-circle"
257 |               ></motion.div>
258 |             </div>
259 |           </motion.div>
260 |         </div>
261 |       </div>
262 |     </motion.section>
263 |   );
264 | };
265 | 
266 | export default Section3;
267 | 


--------------------------------------------------------------------------------
/src/components/Section4.js:
--------------------------------------------------------------------------------
  1 | import { motion } from "framer-motion";
  2 | import React from "react";
  3 | import { transition } from "../utils";
  4 | 
  5 | const sectionVariant = {
  6 |   hidden: {
  7 |     opacity: 0,
  8 |   },
  9 |   visible: {
 10 |     opacity: 1,
 11 |   },
 12 |   leave: {
 13 |     opacity: 0,
 14 |     transition: { ...transition, delay: 0.8 },
 15 |   },
 16 | };
 17 | 
 18 | const innerVariant = {
 19 |   hidden: {
 20 |     rotateY: -90,
 21 |   },
 22 |   visible: {
 23 |     rotateY: 0,
 24 |     transition: {
 25 |       type: "tween",
 26 |       ease: "easeOut",
 27 |       duration: 0.8,
 28 |       delay: 0.4,
 29 |     },
 30 |   },
 31 |   leave: {
 32 |     rotateY: -90,
 33 |     transition: {
 34 |       type: "tween",
 35 |       ease: "easeIn",
 36 |       duration: 0.3,
 37 |       delay: 0.7,
 38 |     },
 39 |   },
 40 | };
 41 | 
 42 | const phoneVariant = {
 43 |   hidden: {
 44 |     y: 50,
 45 |     opacity: 0,
 46 |   },
 47 |   visible: {
 48 |     y: 0,
 49 |     opacity: 1,
 50 |     transition: {
 51 |       delay: 0.5,
 52 |       duration: 0.5,
 53 |       type: "tween",
 54 |       ease: "easeIn",
 55 |     },
 56 |   },
 57 |   leave: {
 58 |     y: 50,
 59 |     opacity: 0,
 60 |     transition: {
 61 |       delay: 0.3,
 62 |       duration: 0.3,
 63 |     },
 64 |   },
 65 | };
 66 | 
 67 | const phone2Variant = {
 68 |   hidden: {
 69 |     y: 50,
 70 |     opacity: 0,
 71 |   },
 72 |   visible: {
 73 |     y: 0,
 74 |     opacity: 1,
 75 |     transition: {
 76 |       delay: 0.6,
 77 |       duration: 0.5,
 78 |       type: "tween",
 79 |       ease: "easeIn",
 80 |     },
 81 |   },
 82 |   leave: {
 83 |     y: 50,
 84 |     opacity: 0,
 85 |     transition: {
 86 |       delay: 0.4,
 87 |       duration: 0.3,
 88 |     },
 89 |   },
 90 | };
 91 | 
 92 | const phone3Variant = {
 93 |   hidden: {
 94 |     y: 50,
 95 |     opacity: 0,
 96 |   },
 97 |   visible: {
 98 |     y: 0,
 99 |     opacity: 1,
100 |     transition: {
101 |       delay: 0.7,
102 |       duration: 0.5,
103 |       type: "tween",
104 |       ease: "easeIn",
105 |     },
106 |   },
107 |   leave: {
108 |     y: 50,
109 |     opacity: 0,
110 |     transition: {
111 |       delay: 0.5,
112 |       duration: 0.3,
113 |     },
114 |   },
115 | };
116 | 
117 | const Section4 = () => {
118 |   return (
119 |     <motion.section
120 |       variants={sectionVariant}
121 |       key="four"
122 |       exit="leave"
123 |       initial="hidden"
124 |       animate="visible"
125 |       transition={{ ...transition }}
126 |     >
127 |       <motion.div
128 |         variants={innerVariant}
129 |         transition={{ ...transition }}
130 |         className="inner-section section-4"
131 |       >
132 |         <motion.div variants={phoneVariant} className="title">
133 |           Just Go Cashless, Abeg
134 |         </motion.div>
135 |         <motion.div variants={phone2Variant} className="buttons">
136 |           <div className="button">
137 |             <div className="coming">Coming soon</div>
138 |             <div className="app">App Store</div>
139 |           </div>
140 |           <div className="button">
141 |             <div className="coming">Get it on</div>
142 |             <div className="app">Google Play</div>
143 |           </div>
144 |         </motion.div>
145 |         <motion.img
146 |           variants={phone3Variant}
147 |           src="https://abeg.app/static/media/placard-screenshot.a5cd8f5e.png"
148 |           alt=""
149 |         />
150 |       </motion.div>
151 |     </motion.section>
152 |   );
153 | };
154 | 
155 | export default Section4;
156 | 


--------------------------------------------------------------------------------
/src/components/Section5.js:
--------------------------------------------------------------------------------
 1 | import { motion } from "framer-motion";
 2 | import React from "react";
 3 | import { transition } from "../utils";
 4 | 
 5 | const sectionVariant = {
 6 |   hidden: {
 7 |     opacity: 0,
 8 |     y: 50,
 9 |   },
10 |   visible: {
11 |     opacity: 1,
12 |     y: 0,
13 |   },
14 |   leave: {
15 |     opacity: 0,
16 |     y: 50,
17 |     transition: { ...transition, delay: 0.7 },
18 |   },
19 | };
20 | 
21 | const Section5 = () => {
22 |   return (
23 |     <section className="section-5">
24 |       <motion.div
25 |         key="five"
26 |         variants={sectionVariant}
27 |         exit="leave"
28 |         initial="hidden"
29 |         animate="visible"
30 |         transition={{ ...transition }}
31 |       >
32 |         Abeg, I don try, na clone.
33 |       </motion.div>
34 |     </section>
35 |   );
36 | };
37 | 
38 | export default Section5;
39 | 


--------------------------------------------------------------------------------
/src/components/Section6.js:
--------------------------------------------------------------------------------
 1 | import { motion } from "framer-motion";
 2 | import React from "react";
 3 | import { transition } from "../utils";
 4 | 
 5 | const sectionVariant = {
 6 |   hidden: {
 7 |     opacity: 0,
 8 |     y: 50,
 9 |   },
10 |   visible: {
11 |     opacity: 1,
12 |     y: 0,
13 |   },
14 |   leave: {
15 |     opacity: 0,
16 |     y: 50,
17 |     transition: { ...transition, delay: 0.7 },
18 |   },
19 | };
20 | 
21 | const Section6 = () => {
22 |   return (
23 |     <section className="section-5">
24 |       <motion.div
25 |         key="five"
26 |         variants={sectionVariant}
27 |         exit="leave"
28 |         initial="hidden"
29 |         animate="visible"
30 |         transition={{ ...transition }}
31 |       >
32 |         You still came here? Tragic.
33 |       </motion.div>
34 |     </section>
35 |   );
36 | };
37 | 
38 | export default Section6;
39 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import "./index.scss";
 4 | import App from "./App";
 5 | import * as serviceWorker from "./serviceWorker";
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>,
11 |   document.getElementById("root")
12 | );
13 | 
14 | // If you want your app to work offline and load faster, you can change
15 | // unregister() to register() below. Note this comes with some pitfalls.
16 | // Learn more about service workers: https://bit.ly/CRA-PWA
17 | serviceWorker.unregister();
18 | 


--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,600&display=swap');
 2 | @import './styles/breakpoints.scss';
 3 | 
 4 | // Resets
 5 | * {
 6 |     box-sizing: border-box;
 7 | 
 8 |     &::before,
 9 |     &::after {
10 |         box-sizing: border-box;
11 |     }
12 | }
13 | 
14 | a {
15 |     text-decoration: none;
16 |     color: inherit;
17 | }
18 | 
19 | body {
20 |     margin: 0;
21 |     background: #166fc9;
22 |     color: #ffffff;
23 |     font-family: "Eina", sans-serif;
24 |     font-size: 16px;
25 | 
26 |     @include media("<=1200px") {
27 |         font-size: 14px;
28 |     }
29 | }
30 | 
31 | // Fonts
32 | @font-face {
33 |     font-family: 'Eina';
34 |     src: url('./assets/fonts/eina01-regular-webfont.57ac5b4b.woff2') format('woff2');
35 |     font-weight: 400;
36 |     font-style: normal;
37 |     font-display: swap;
38 | }
39 | 
40 | @font-face {
41 |     font-family: 'Eina';
42 |     src: url('./assets/fonts/eina01-semibold-webfont.93d21e16.woff2') format('woff2');
43 |     font-weight: 500;
44 |     font-style: normal;
45 |     font-display: swap;
46 | }
47 | 
48 | @font-face {
49 |     font-family: 'Eina';
50 |     src: url('./assets/fonts/eina01-bold-webfont.17ecfa75.woff2') format('woff2');
51 |     font-weight: 600;
52 |     font-style: normal;
53 |     font-display: swap;
54 | }


--------------------------------------------------------------------------------
/src/pages/Landing.js:
--------------------------------------------------------------------------------
 1 | import { AnimatePresence } from "framer-motion";
 2 | import gsap from "gsap";
 3 | import React, { useState, useEffect } from "react";
 4 | import Section1 from "../components/Section1";
 5 | import Section2 from "../components/Section2";
 6 | import Section3 from "../components/Section3";
 7 | import Section4 from "../components/Section4";
 8 | import Section5 from "../components/Section5";
 9 | import Section6 from "../components/Section6";
10 | 
11 | const SECTIONS = {
12 |   1: <Section1 />,
13 |   2: <Section2 />,
14 |   3: <Section3 />,
15 |   4: <Section4 />,
16 |   5: <Section5 />,
17 |   6: <Section6 />,
18 | };
19 | 
20 | const Landing = () => {
21 |   const [activeSection, setActiveSection] = useState(1);
22 |   const [isScrolling, setIsScrolling] = useState(false);
23 | 
24 |   useEffect(() => {
25 |     gsap.to(".line-bg", {
26 |       duration: 3,
27 |       x: `-${6.67 * activeSection}%`,
28 |       ease: "Elastic.easeOut",
29 |     });
30 |     const handleScroll = (e) => {
31 |       if (isScrolling) return;
32 |       if (e.deltaY > 0 || e.deltaY === -0) {
33 |         if (activeSection === 6) return;
34 |         setIsScrolling(true);
35 |         setActiveSection(activeSection + 1);
36 |       } else {
37 |         if (activeSection <= 1) return;
38 |         setIsScrolling(true);
39 |         setActiveSection((state) => state - 1);
40 |       }
41 | 
42 |       setTimeout(() => {
43 |         setIsScrolling(false);
44 |       }, 2000);
45 |     };
46 |     window.addEventListener("wheel", handleScroll);
47 | 
48 |     return () => {
49 |       window.removeEventListener("wheel", handleScroll);
50 |     };
51 |   }, [activeSection, isScrolling]);
52 |   return (
53 |     <div className="landing">
54 |       <nav>
55 |         <div className="logo">Anon</div>
56 |       </nav>
57 | 
58 |       {/* The line background that has an elastic effect on scroll */}
59 |       <div className="line-bg"></div>
60 | 
61 |       {/* Section mounts/unmounts based on state */}
62 |       <div className="all-sections">
63 |         <AnimatePresence exitBeforeEnter>
64 |           <div key={activeSection}>{SECTIONS[activeSection]}</div>
65 |         </AnimatePresence>
66 |       </div>
67 | 
68 |       {/* Scroll indicator */}
69 |       <div className="indicator-con pd-10">
70 |         <div className="inner">
71 |           <div className="balls">
72 |             {[...new Array(6)].map((_, i) => (
73 |               <div
74 |                 key={i}
75 |                 className={`ball ball-${i + 1} ${
76 |                   i + 1 <= activeSection ? "active" : ""
77 |                 } ${1 + i === activeSection ? "active-num" : ""}`}
78 |                 data-num={`0${i + 1}`}
79 |               ></div>
80 |             ))}
81 |           </div>
82 | 
83 |           <div className="line"></div>
84 |           <div
85 |             className="line-scroll"
86 |             style={{ width: `${(activeSection - 1) * 20}%` }}
87 |           ></div>
88 |         </div>
89 |       </div>
90 |     </div>
91 |   );
92 | };
93 | 
94 | export default Landing;
95 | 


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.0/8 are considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl, {
104 |     headers: { 'Service-Worker': 'script' },
105 |   })
106 |     .then(response => {
107 |       // Ensure service worker exists, and that we really are getting a JS file.
108 |       const contentType = response.headers.get('content-type');
109 |       if (
110 |         response.status === 404 ||
111 |         (contentType != null && contentType.indexOf('javascript') === -1)
112 |       ) {
113 |         // No service worker found. Probably a different app. Reload the page.
114 |         navigator.serviceWorker.ready.then(registration => {
115 |           registration.unregister().then(() => {
116 |             window.location.reload();
117 |           });
118 |         });
119 |       } else {
120 |         // Service worker found. Proceed as normal.
121 |         registerValidSW(swUrl, config);
122 |       }
123 |     })
124 |     .catch(() => {
125 |       console.log(
126 |         'No internet connection found. App is running in offline mode.'
127 |       );
128 |     });
129 | }
130 | 
131 | export function unregister() {
132 |   if ('serviceWorker' in navigator) {
133 |     navigator.serviceWorker.ready
134 |       .then(registration => {
135 |         registration.unregister();
136 |       })
137 |       .catch(error => {
138 |         console.error(error.message);
139 |       });
140 |   }
141 | }
142 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 | 


--------------------------------------------------------------------------------
/src/styles/app.scss:
--------------------------------------------------------------------------------
1 | @import './breakpoints.scss';
2 | @import './variables.scss';
3 | @import './components/sections.scss';
4 | @import './components/section.scss';


--------------------------------------------------------------------------------
/src/styles/breakpoints.scss:
--------------------------------------------------------------------------------
  1 | $breakpoints: (
  2 |   "phone": 425px,
  3 |   "tablet": 768px,
  4 |   "desktop": 1366px,
  5 |   "LGdesktop": 1920px
  6 | ) !default;
  7 | 
  8 | ///
  9 | /// Creates a list of static expressions or media types
 10 | ///
 11 | /// @author Eduardo Boucas
 12 | ///
 13 | /// @example scss - Creates a single media type (screen)
 14 | ///  $media-expressions: ('screen': 'screen');
 15 | ///
 16 | /// @example scss - Creates a static expression with logical disjunction (OR operator)
 17 | ///  $media-expressions: (
 18 | ///		'retina2x': (
 19 | ///			'(-webkit-min-device-pixel-ratio: 2)',
 20 | ///			'(min-resolution: 192dpi)'
 21 | ///		)
 22 | ///	);
 23 | ///
 24 | $media-expressions: (
 25 |   "screen": "screen",
 26 |   "print": "print",
 27 |   "handheld": "handheld",
 28 |   "retina2x": (
 29 |     "(-webkit-min-device-pixel-ratio: 2)",
 30 |     "(min-resolution: 192dpi)"
 31 |   ),
 32 |   "retina3x": (
 33 |     "(-webkit-min-device-pixel-ratio: 3)",
 34 |     "(min-resolution: 350dpi)"
 35 |   )
 36 | ) !default;
 37 | 
 38 | ///
 39 | /// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals
 40 | ///
 41 | /// @author Eduardo Boucas
 42 | ///
 43 | /// @example scss - Interval for pixels is defined as `1` by default
 44 | ///  @include media(">128px") {}
 45 | ///
 46 | ///	 /* Generates: */
 47 | ///	 @media (min-width: 129px) {}
 48 | ///
 49 | /// @example scss - Interval for ems is defined as `0.01` by default
 50 | ///  @include media(">20em") {}
 51 | ///
 52 | ///	 /* Generates: */
 53 | ///	 @media (min-width: 20.01em) {}
 54 | ///
 55 | /// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;`
 56 | ///  @include media(">2.0rem") {}
 57 | ///
 58 | ///	 /* Generates: */
 59 | ///	 @media (min-width: 2.1rem) {}
 60 | ///
 61 | $unit-intervals: (
 62 |   "px": 1,
 63 |   "em": 0.01,
 64 |   "rem": 0.1
 65 | ) !default;
 66 | ///
 67 | /// Generates a media query based on a list of conditions
 68 | ///
 69 | /// @author Eduardo Boucas
 70 | ///
 71 | /// @param {List}   $conditions  - Media query conditions
 72 | ///
 73 | /// @example scss - With a single set breakpoint
 74 | ///  @include media(">phone") { }
 75 | ///
 76 | /// @example scss - With two set breakpoints
 77 | ///  @include media(">phone", "<=tablet") { }
 78 | ///
 79 | /// @example scss - With custom values
 80 | ///  @include media(">=358px", "<850px") { }
 81 | ///
 82 | /// @example scss - With set breakpoints with custom values
 83 | ///  @include media(">desktop", "<=1350px") { }
 84 | ///
 85 | /// @example scss - With a static expression
 86 | ///  @include media("retina2x") { }
 87 | ///
 88 | /// @example scss - Mixing everything
 89 | ///  @include media(">=350px", "<tablet", "retina3x") { }
 90 | ///
 91 | @mixin media($conditions...) {
 92 |   @for $i from 1 through length($conditions) {
 93 |     $conditions: set-nth(
 94 |       $conditions,
 95 |       $i,
 96 |       parse-expression(nth($conditions, $i))
 97 |     );
 98 |   }
 99 | 
100 |   $branches: get-query-branches($conditions);
101 |   $query: "";
102 | 
103 |   @each $branch in $branches {
104 |     @if (str-length($query) != 0) {
105 |       $query: $query + ", ";
106 |     }
107 | 
108 |     $query: $query + $branch;
109 |   }
110 | 
111 |   @media #{$query} {
112 |     @content;
113 |   }
114 | }
115 | 
116 | ///
117 | /// Reads a list of media query expressions and separates logical disjunctions into different branches
118 | ///
119 | /// @author Eduardo Boucas
120 | ///
121 | /// @param {List}   $expressions  - list of expressions
122 | ///
123 | /// @throws `$expression` is not a valid expression
124 | ///
125 | /// @return {List | Null}
126 | ///
127 | @function get-query-branches($expressions) {
128 |   $result: "";
129 |   $has-groups: false;
130 | 
131 |   // Getting initial snapshot and looking for groups
132 |   @each $expression in $expressions {
133 |     @if (str-length($result) != 0) {
134 |       $result: $result + " and ";
135 |     }
136 | 
137 |     @if (type-of($expression) == "string") {
138 |       $result: $result + $expression;
139 |     } @else if (type-of($expression) == "list") {
140 |       $result: $result + nth($expression, 1);
141 |       $has-groups: true;
142 |     } @else {
143 |       @warn '#{$expression} is not a valid expression.';
144 |     }
145 |   }
146 | 
147 |   // If we have groups, we have to create all possible combinations
148 |   @if $has-groups {
149 |     @each $expression in $expressions {
150 |       @if (type-of($expression) == "list") {
151 |         $first: nth($expression, 1);
152 | 
153 |         @each $member in $expression {
154 |           @if ($member != $first) {
155 |             @each $partial in $result {
156 |               $result: join(
157 |                 $result,
158 |                 str-replace-first($first, $member, $partial)
159 |               );
160 |             }
161 |           }
162 |         }
163 |       }
164 |     }
165 |   }
166 | 
167 |   @return $result;
168 | }
169 | 
170 | ///
171 | /// Parses a string to form a media query expression
172 | ///
173 | /// @author Eduardo Boucas
174 | ///
175 | /// @param {String}   $expression  - expression (in string)
176 | ///
177 | /// @throws Expression with type `type-of($expression)` detected, string expected
178 | /// @throws `$expression` is missing an operator
179 | /// @throws Unknown unit: `$unit`
180 | ///
181 | /// @return {String | Null}
182 | ///
183 | @function parse-expression($expression) {
184 |   $operator: "";
185 |   $value: "";
186 |   $element: "";
187 |   $result: "";
188 |   $is-width: true;
189 | 
190 |   @if (type-of($expression) != "string") {
191 |     @warn 'Expression with type `#{type-of($expression)}` detected, string expected.';
192 |   }
193 | 
194 |   // Separating the operator from the rest of the expression
195 |   @if (str-slice($expression, 2, 2) == "=") {
196 |     $operator: str-slice($expression, 1, 2);
197 |     $value: str-slice($expression, 3);
198 |   } @else {
199 |     $operator: str-slice($expression, 1, 1);
200 |     $value: str-slice($expression, 2);
201 |   }
202 | 
203 |   // Checking what type of expression we're dealing with
204 |   @if map-has-key($breakpoints, $value) {
205 |     $result: map-get($breakpoints, $value);
206 |   } @else if map-has-key($media-expressions, $expression) {
207 |     $result: map-get($media-expressions, $expression);
208 |     $is-width: false;
209 |   } @else {
210 |     $result: to-number($value);
211 |   }
212 | 
213 |   @if ($is-width) {
214 |     $unit: unit($result);
215 |     $interval: 0;
216 | 
217 |     @if (map-has-key($unit-intervals, $unit)) {
218 |       $interval: map-get($unit-intervals, $unit);
219 |     } @else {
220 |       @warn 'Unknown unit: #{$unit}';
221 |     }
222 | 
223 |     @if ($operator == ">") {
224 |       $element: "(min-width: #{$result + $interval})";
225 |     } @else if ($operator == "<") {
226 |       $element: "(max-width: #{$result - $interval})";
227 |     } @else if ($operator == ">=") {
228 |       $element: "(min-width: #{$result})";
229 |     } @else if ($operator == "<=") {
230 |       $element: "(max-width: #{$result})";
231 |     } @else {
232 |       @warn '#{$expression} is missing an operator.';
233 |     }
234 |   } @else {
235 |     $element: $result;
236 |   }
237 | 
238 |   @return $element;
239 | }
240 | 
241 | ///
242 | /// Replaces the first occurence of the string with the replacement string
243 | ///
244 | /// @author Eduardo Boucas
245 | ///
246 | /// @param {String}   $search  - The value being searched for
247 | /// @param {String}   $replace  - The replacement string
248 | /// @param {String}   $subject  - The string being replaced on
249 | ///
250 | /// @return {String | Null}
251 | ///
252 | @function str-replace-first($search, $replace, $subject) {
253 |   $search-start: str-index($subject, $search);
254 | 
255 |   @if $search-start == null {
256 |     @return $subject;
257 |   }
258 | 
259 |   $result: str-slice($subject, 0, $search-start - 1);
260 |   $result: $result + $replace;
261 |   $result: $result + str-slice($subject, $search-start + str-length($search));
262 | 
263 |   @return $result;
264 | }
265 | 
266 | ///
267 | /// Casts a number to a string
268 | ///
269 | /// @author Hugo Giraudel
270 | ///
271 | /// @param {String}   $string  - Number to be parsed
272 | ///
273 | /// @return {List | Null}
274 | ///
275 | @function to-number($string) {
276 |   // Matrices
277 |   $strings: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
278 |   $numbers: 0 1 2 3 4 5 6 7 8 9;
279 | 
280 |   // Result
281 |   $result: 0;
282 |   $divider: 0;
283 |   $minus: false;
284 | 
285 |   // Looping through all characters
286 |   @for $i from 1 through str-length($string) {
287 |     $character: str-slice($string, $i, $i);
288 |     $index: index($strings, $character);
289 | 
290 |     @if $character == "-" {
291 |       $minus: true;
292 |     } @else if $character == "." {
293 |       $divider: 1;
294 |     } @else {
295 |       @if type-of($index) != "number" {
296 |         $result: if($minus, $result * -1, $result);
297 |         @return _length($result, str-slice($string, $i));
298 |       }
299 | 
300 |       $number: nth($numbers, $index);
301 | 
302 |       @if $divider == 0 {
303 |         $result: $result * 10;
304 |       } @else {
305 |         // Move the decimal dot to the left
306 |         $divider: $divider * 10;
307 |         $number: $number / $divider;
308 |       }
309 | 
310 |       $result: $result + $number;
311 |     }
312 |   }
313 | 
314 |   @return if($minus, $result * -1, $result);
315 | }
316 | 
317 | @function _length($number, $unit) {
318 |   $strings: "px" "cm" "mm" "%" "ch" "pica" "in" "em" "rem" "pt" "pc" "ex" "vw"
319 |     "vh" "vmin" "vmax";
320 |   $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax;
321 |   $index: index($strings, $unit);
322 | 
323 |   @if type-of($index) != "number" {
324 |     @warn 'Unknown unit `#{$unit}`.';
325 |     @return false;
326 |   }
327 | 
328 |   @return $number * nth($units, $index);
329 | }
330 | 


--------------------------------------------------------------------------------
/src/styles/components/section.scss:
--------------------------------------------------------------------------------
  1 | // Styles unique to one section.
  2 | .section-1 {
  3 | 
  4 |     .left {
  5 |         .sub {
  6 |             max-width: 75%;
  7 |         }
  8 |     }
  9 | 
 10 |     .right {
 11 | 
 12 |         display: flex;
 13 |         justify-content: center;
 14 |         align-items: center;
 15 | 
 16 | 
 17 | 
 18 |         .circle {
 19 |             background: $blue;
 20 |             border: 1.4em solid lighten($blue, 20%);
 21 |             border-radius: 50%;
 22 |             transform-origin: center center;
 23 |         }
 24 | 
 25 |         .circle-1 {
 26 |             width: 8.5em;
 27 |             height: 8.5em;
 28 |         }
 29 | 
 30 |         .circle {
 31 |             &:not(:first-of-type) {
 32 |                 position: absolute;
 33 |             }
 34 |         }
 35 | 
 36 |         .circle-2 {
 37 |             width: 6em;
 38 |             height: 6em;
 39 |             border-width: 1.2em;
 40 |         }
 41 | 
 42 |         .circle-3 {
 43 |             width: 9em;
 44 |             height: 9em;
 45 |         }
 46 | 
 47 |         .circle-4 {
 48 |             width: 6em;
 49 |             height: 6em;
 50 |             border-width: 1.2em;
 51 |         }
 52 | 
 53 |         .circle-5 {
 54 |             width: 7em;
 55 |             height: 7em;
 56 |         }
 57 |     }
 58 | }
 59 | 
 60 | .section-2 {
 61 |     .left {
 62 |         flex: 0 0 50%;
 63 |         max-width: 50%;
 64 | 
 65 |         .title {
 66 |             line-height: 1.3;
 67 |             margin-bottom: 20px;
 68 |         }
 69 | 
 70 |         .sub {
 71 |             max-width: 360px;
 72 |         }
 73 |     }
 74 | 
 75 |     .right {
 76 |         display: flex;
 77 |         align-items: flex-end;
 78 | 
 79 |         .right-bg {
 80 |             overflow: hidden;
 81 |             height: 460px;
 82 |             background: lighten($blue, 3%);
 83 |             text-align: center;
 84 |             padding: 130px 20px;
 85 |             width: 90%;
 86 |             border-radius: 2em;
 87 | 
 88 |             img {
 89 |                 width: 87%;
 90 |                 transform: rotate(-5deg);
 91 |             }
 92 |         }
 93 |     }
 94 | }
 95 | 
 96 | .section-3 {
 97 |     .left {
 98 |         flex: 0 0 53%;
 99 |         max-width: 53%;
100 | 
101 |         .title {
102 |             line-height: 1.15;
103 |         }
104 |     }
105 | 
106 |     .right {
107 |         display: flex;
108 |         align-items: flex-end;
109 |         justify-content: center;
110 |         position: relative;
111 | 
112 |         .notification {
113 |             position: absolute;
114 |             z-index: 2;
115 |             display: flex;
116 |             justify-content: center;
117 |             bottom: -40px;
118 |             will-change: transform, opacity;
119 | 
120 | 
121 |             img {
122 |                 width: 62%;
123 |             }
124 |         }
125 | 
126 |         .right-bg {
127 |             overflow: hidden;
128 |             height: 460px;
129 |             background: lighten($blue, 3%);
130 |             text-align: center;
131 |             width: 90%;
132 |             border-radius: 2em;
133 |             display: flex;
134 |             justify-content: center;
135 |             align-items: center;
136 |             text-align: center;
137 |             position: relative;
138 |             will-change: transform, opacity;
139 | 
140 | 
141 |             .phone {
142 |                 position: absolute;
143 |                 width: 100%;
144 |                 display: flex;
145 |                 justify-content: center;
146 |                 z-index: 1;
147 |                 will-change: transform, opacity;
148 | 
149 |                 img {
150 |                     position: absolute;
151 |                     width: 80%;
152 |                     top: -1.6em;
153 |                 }
154 |             }
155 | 
156 | 
157 | 
158 |             .circle {
159 |                 display: flex;
160 |                 align-items: center;
161 |                 justify-content: center;
162 |                 position: relative;
163 |                 top: -3.5em;
164 | 
165 |                 .inner-circle {
166 |                     transform-origin: center center;
167 |                     position: absolute;
168 |                     border: 1px solid $white;
169 |                     border-radius: 100%;
170 |                     will-change: transform, opacity;
171 |                 }
172 |             }
173 | 
174 |             .bell-con {
175 |                 will-change: transform, opacity;
176 | 
177 |                 .fas {
178 |                     position: absolute;
179 |                     width: 50px;
180 |                     height: 50px;
181 |                     display: flex;
182 |                     justify-content: center;
183 |                     align-items: center;
184 |                     font-size: 1.3em;
185 |                     background: lighten($blue, 10%);
186 |                     border-radius: 100%;
187 |                 }
188 |             }
189 | 
190 |             .circle-1 {
191 |                 opacity: 0.5;
192 |             }
193 | 
194 |             .circle-2 {
195 |                 opacity: 0.4;
196 |             }
197 | 
198 |             .circle-3 {
199 |                 opacity: 0.3;
200 |             }
201 | 
202 |             .circle-4 {
203 |                 opacity: 0.2;
204 |             }
205 | 
206 |             .circle-1 .inner-circle {
207 |                 width: 7.5em;
208 |                 height: 7.5em;
209 |             }
210 | 
211 |             .circle-2 .inner-circle {
212 |                 width: 14em;
213 |                 height: 14em;
214 |             }
215 | 
216 |             .circle-3 .inner-circle {
217 |                 width: 21em;
218 |                 height: 21em;
219 |             }
220 | 
221 |             .circle-4 .inner-circle {
222 |                 width: 29em;
223 |                 height: 29em;
224 |             }
225 |         }
226 |     }
227 | }
228 | 
229 | .button.button-txt {
230 |     padding: 20px 40px !important;
231 | }
232 | 
233 | 
234 | 
235 | .section-4 {
236 |     width: 100%;
237 |     height: 23em;
238 |     border-radius: 24px;
239 |     background: darken($blue, 4%);
240 |     will-change: transform;
241 |     overflow: hidden;
242 |     display: flex;
243 |     flex-direction: column;
244 |     padding-top: 40px;
245 |     justify-content: space-between;
246 |     align-items: center;
247 | 
248 |     .title {
249 |         font-weight: 500;
250 |         font-size: 2.2em;
251 |         will-change: transform;
252 |     }
253 | 
254 |     .buttons {
255 |         display: flex;
256 |         will-change: transform;
257 | 
258 |         .button {
259 |             background: $white;
260 |             color: $blue;
261 |             padding: 12px 22px;
262 |             border-radius: 12px;
263 |             font-weight: 400;
264 |             width: 9em;
265 |             display: flex;
266 |             flex-direction: column;
267 | 
268 |             .coming {
269 |                 font-size: .65em;
270 |             }
271 | 
272 |             .app {
273 |                 font-weight: 600;
274 |             }
275 | 
276 |             &:first-of-type {
277 |                 margin-right: 10px;
278 |             }
279 |         }
280 |     }
281 | 
282 |     img {
283 |         width: 40%;
284 |         will-change: transform;
285 |     }
286 | }
287 | 
288 | .section-5 {
289 |     justify-content: center;
290 |     font-weight: 500;
291 |     font-size: 2.5em;
292 | 
293 | }
294 | 


--------------------------------------------------------------------------------
/src/styles/components/sections.scss:
--------------------------------------------------------------------------------
  1 | // general styles for all the sections.
  2 | 
  3 | .landing {
  4 |     position: relative;
  5 | 
  6 |     nav {
  7 |         padding: 30px 10%;
  8 |         position: absolute;
  9 |         top: 0;
 10 |         left: 0;
 11 |         z-index: 10;
 12 | 
 13 |         .logo {
 14 |             font-family: 'Poppins', sans-serif;
 15 |             font-style: italic;
 16 |             font-weight: 600;
 17 |             font-size: 29px;
 18 |             cursor: pointer;
 19 |         }
 20 |     }
 21 | }
 22 | 
 23 | .pd-10 {
 24 |     padding: 0 10%;
 25 | }
 26 | 
 27 | .all-sections {
 28 |     position: relative;
 29 | 
 30 |     section {
 31 |         padding: 0 10%;
 32 |         position: absolute;
 33 |         min-height: 100vh;
 34 |         max-height: 100vh;
 35 |         top: 0;
 36 |         left: 0;
 37 |         width: 100%;
 38 |         overflow: hidden;
 39 |         display: flex;
 40 |         align-items: center;
 41 |     }
 42 | 
 43 | 
 44 | }
 45 | 
 46 | // General styling for the sections.
 47 | .section-inner {
 48 |     display: flex;
 49 |     justify-content: space-between;
 50 |     align-items: center;
 51 |     width: 100%;
 52 | 
 53 |     .left {
 54 |         flex: 0 0 50%;
 55 |         max-width: 50%;
 56 | 
 57 |         .title {
 58 |             font-weight: 600;
 59 |             font-size: 2.9em;
 60 |             position: relative;
 61 |             line-height: 1.1;
 62 |             display: inline-block;
 63 |             margin-bottom: 30px;
 64 | 
 65 |             >span {
 66 |                 overflow: hidden;
 67 |                 display: inline-block;
 68 | 
 69 |                 .hide-text {
 70 |                     position: relative;
 71 |                     overflow: hidden;
 72 |                     display: block;
 73 |                     will-change: transform;
 74 |                 }
 75 |             }
 76 |         }
 77 | 
 78 |         .sub {
 79 |             // padding-right: 150px;
 80 |             max-width: 90%;
 81 |             opacity: 0.6;
 82 |             font-size: 1.11em;
 83 |             line-height: 1.7;
 84 |             margin-bottom: 30px;
 85 |         }
 86 | 
 87 |         .buttons {
 88 |             display: flex;
 89 | 
 90 |             .button {
 91 |                 background: darken($blue, 3%);
 92 |                 padding: 13px 40px;
 93 |                 border-radius: 12px;
 94 |                 font-weight: 400;
 95 | 
 96 |                 .coming {
 97 |                     font-size: .65em;
 98 |                 }
 99 | 
100 |                 .app {
101 |                     font-weight: 600;
102 |                 }
103 | 
104 |                 &:first-of-type {
105 |                     margin-right: 30px;
106 |                 }
107 |             }
108 |         }
109 |     }
110 | 
111 |     .right {
112 |         flex: 0 0 50%;
113 |         max-width: 50%;
114 |     }
115 | }
116 | 
117 | .line-bg {
118 |     position: fixed;
119 |     top: 0;
120 |     left: 0;
121 |     height: 100vh;
122 |     background: url('../../assets/images/line-bg.svg') 50% repeat;
123 |     width: 170vw;
124 |     background-size: 170%;
125 | }
126 | 
127 | .indicator-con {
128 |     position: fixed;
129 |     width: 100%;
130 |     bottom: 30px;
131 |     left: 0;
132 | 
133 |     .inner {
134 |         position: relative;
135 |         display: flex;
136 |         align-items: center;
137 |         height: 18px;
138 |         width: 100%;
139 |     }
140 | 
141 |     .balls {
142 |         position: absolute;
143 |         left: 0;
144 |         display: flex;
145 |         justify-content: space-between;
146 |         width: 100%;
147 | 
148 |         .ball {
149 |             width: 5px;
150 |             height: 5px;
151 |             position: relative;
152 |             position: relative;
153 |             width: 12px;
154 |             height: 12px;
155 |             border-radius: 10px;
156 |             background-color: lighten($blue, 20%);
157 |             border: 3px solid darken($blue, 10%);
158 |             cursor: pointer;
159 |             transition: all .5s ease-in;
160 | 
161 |             &::after {
162 |                 content: attr(data-num);
163 |                 color: $yellow;
164 |                 white-space: nowrap;
165 |                 position: absolute;
166 |                 font-size: 8px;
167 |                 font-weight: 600;
168 |                 top: -18px;
169 |                 left: -1.5px;
170 |                 transition: all, 1s ease-in;
171 |                 transform: translate(0, 20px);
172 |                 opacity: 0;
173 |             }
174 |         }
175 | 
176 |         .ball.active {
177 |             background-color: $yellow;
178 |         }
179 | 
180 |         .ball.active-num {
181 |             &::after {
182 |                 transform: translate(0, 0);
183 |                 opacity: 1;
184 |             }
185 |         }
186 | 
187 |     }
188 | 
189 |     .line {
190 |         width: 100%;
191 |         position: relative;
192 |         background: lighten($blue, 30%);
193 |         height: 1px;
194 |         z-index: -2;
195 |     }
196 | 
197 |     .line-scroll {
198 |         position: absolute;
199 |         background: $yellow;
200 |         height: 1.2px;
201 |         z-index: -1;
202 |         transition: all 1s ease-in;
203 |     }
204 | }
205 | 


--------------------------------------------------------------------------------
/src/styles/variables.scss:
--------------------------------------------------------------------------------
1 | $blue: #166fc9;
2 | $white: #ffffff;
3 | $black: #000000;
4 | $yellow: rgb(255, 173, 13);


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | export const transition = { ease: "easeOut", duration: 0.5 };
2 | 


--------------------------------------------------------------------------------