├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .prettierrc ├── .watchmanconfig ├── App.js ├── LICENSE ├── README.md ├── app.json ├── babel.config.js ├── jsconfig.json ├── package.json ├── src ├── assets │ ├── avatar-default.jpg │ ├── avatar.jpg │ ├── background1.jpg │ ├── background10.jpg │ ├── background11.jpg │ ├── background12.jpg │ ├── background13.jpg │ ├── background14.jpg │ ├── background15.jpg │ ├── background16.jpg │ ├── background2.jpg │ ├── background3.jpg │ ├── background4.jpg │ ├── background5.jpg │ ├── background6.jpg │ ├── background7.jpg │ ├── background8.jpg │ ├── background9.jpg │ ├── icon-courses.svg │ ├── icon-email-active.png │ ├── icon-email-animated.gif │ ├── icon-email.png │ ├── icon-home.svg │ ├── icon-light.svg │ ├── icon-logout.svg │ ├── icon-menu.svg │ ├── icon-night.svg │ ├── icon-notifications.svg │ ├── icon-password-active.png │ ├── icon-password-animated.gif │ ├── icon-password.png │ ├── icon-play.svg │ ├── icon-refresh.svg │ ├── icon-star.svg │ ├── icon.png │ ├── logo-dc.png │ ├── logo-figma.png │ ├── logo-framerx.png │ ├── logo-invision.png │ ├── logo-react.png │ ├── logo-sketch.png │ ├── logo-studio.png │ ├── logo-swift.png │ ├── logo-vue.png │ ├── logo-xcode.png │ ├── logo-xd.png │ ├── lottie-ae.json │ ├── lottie-checked-done.json │ ├── lottie-glow-loading.json │ ├── lottie-loading-double.json │ ├── lottie-loading-fluid.json │ ├── lottie-loading-text.json │ ├── lottie-loading.json │ ├── lottie-preloader.json │ └── splash.png ├── components │ ├── Card │ │ ├── Card.js │ │ ├── Card_Styles.js │ │ └── index.js │ ├── Course │ │ ├── Course.js │ │ ├── Course_Styles.js │ │ └── index.js │ ├── Logo │ │ ├── Logo.js │ │ ├── Logo_Styles.js │ │ └── index.js │ ├── Menu │ │ ├── Menu.js │ │ ├── Menu_Styles.js │ │ └── index.js │ ├── MenuOption │ │ ├── MenuOption.js │ │ ├── MenuOption_Styles.js │ │ └── index.js │ └── Project │ │ ├── Project.js │ │ ├── Project_Styles.js │ │ └── index.js ├── data │ ├── courses.js │ ├── items.js │ ├── logos.js │ └── projects.js ├── navigator │ ├── AppNavigator.js │ └── transitionConfig.js ├── screens │ ├── HomeScreen │ │ ├── HomeScreen.js │ │ ├── HomeScreen_Styles.js │ │ └── index.js │ ├── ProjectsScreen │ │ ├── ProjectsScreen.js │ │ ├── ProjectsScreen_Styles.js │ │ └── index.js │ └── SectionScreen │ │ ├── SectionScreen.js │ │ ├── SectionScreen_Styles.js │ │ └── index.js ├── services │ └── client.js └── store │ └── index.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es6: true, 5 | }, 6 | extends: [ 7 | 'airbnb', 8 | 'prettier', 9 | 'prettier/react' 10 | ], 11 | globals: { 12 | Atomics: 'readonly', 13 | SharedArrayBuffer: 'readonly', 14 | }, 15 | parser: 'babel-eslint', 16 | parserOptions: { 17 | ecmaFeatures: { 18 | jsx: true, 19 | }, 20 | ecmaVersion: 2018, 21 | sourceType: 'module', 22 | }, 23 | plugins: [ 24 | 'react', 25 | 'prettier', 26 | 'react-hooks' 27 | ], 28 | rules: { 29 | "prettier/prettier": [ 30 | "error", 31 | { 32 | "trailingComma": "es5", 33 | "singleQuote": true, 34 | "printWidth": 120, 35 | } 36 | ], 37 | 'react/jsx-filename-extension': [ 38 | 'warn', 39 | {extensions: ['.jsx', '.js']} 40 | ], 41 | 'import/prefer-default-export': 'off', 42 | "no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true }], 43 | 'no-console': ["error", {allow: ["tron"]}], 44 | 'no-param-reassign': 'off', 45 | 'react-hooks/rules-of-hooks': 'error', 46 | 'react-hooks/exhaustive-deps': 'warn', 47 | 'global-require': 'off', 48 | 'no-underscore-dangle': 'off' 49 | }, 50 | settings: { 51 | "import/resolver": { 52 | "babel-plugin-root-import": { 53 | "rootPathSuffix": "src" 54 | } 55 | } 56 | }, 57 | }; 58 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/* 3 | npm-debug.* 4 | *.jks 5 | *.p12 6 | *.key 7 | *.mobileprovision 8 | *.orig.* 9 | web-build/ 10 | web-report/ 11 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "singleQuote": true, 4 | "printWidth": 120 5 | } 6 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Provider } from 'react-redux'; 3 | import { ApolloProvider } from 'react-apollo'; 4 | 5 | import client from '~/services/client'; 6 | import store from '~/store'; 7 | 8 | import AppNavigator from '~/navigator/AppNavigator'; 9 | 10 | export default function App() { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Luke Morales 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Design+Code 3 |
4 | Design+Code 5 |

6 | 7 |

8 | Animations and Gestures Manipulation Heavy React Native App 9 |

10 |

11 | GitHub top language 12 | 13 | GitHub language count 14 | 15 | 16 | Codacy grade 17 | 18 | 19 | Repository size 20 | 21 | GitHub last commit 22 | 23 | 24 | 25 | Repository issues 26 | 27 | 28 | GitHub 29 |

30 | 31 |

32 | Technologies   |    33 | How To Use   |    34 | License 35 |

36 | 37 |

38 | App Demo 39 | App Demo 40 |

41 | 42 | ## :rocket: Technologies 43 | 44 | This project was developed with the following technologies: 45 | 46 | - [Expo](https://expo.io/) 47 | - [React-Native](https://facebook.github.io/react-native/) 48 | - [React Native Gesture Handler](https://kmagiera.github.io/react-native-gesture-handler/) 49 | - [React Navigation](https://reactnavigation.org/) 50 | - [Redux](https://redux.js.org/) 51 | - [GraphQl](https://graphql.org/learn/) 52 | - [Apollo](https://www.apollographql.com/) 53 | - [styled-components](https://www.styled-components.com/) 54 | - [react-native-showdown](https://github.com/jerolimov/react-native-showdown) 55 | - [@expo/vector-icons](https://expo.github.io/vector-icons/) 56 | - [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) 57 | - [PropTypes](https://github.com/facebook/prop-types) 58 | - [VS Code][vc] with [EditorConfig][vceditconfig] and [ESLint][vceslint] 59 | 60 | ## :information_source: How To Use 61 | 62 | To clone and run this application, you'll need [Git](https://git-scm.com), [Node.js v10.16][nodejs] or higher + [Yarn v1.13][yarn] or higher installed on your computer. From your command line: 63 | 64 | ```bash 65 | # Clone this repository 66 | $ git clone https://github.com/lukemorales/react-native-design-code designCode 67 | 68 | # Go into the repository 69 | $ cd designCode 70 | 71 | # Install dependencies 72 | $ yarn install 73 | 74 | # Run the app (iOS) 75 | $ yarn ios 76 | 77 | # Run the app (Android) 78 | $ yarn android 79 | ``` 80 | 81 | ## :memo: License 82 | This project is under the MIT license. See the [LICENSE](https://github.com/lukemorales/react-native-design-code/blob/master/LICENSE) for more information. 83 | 84 | --- 85 | 86 | Made with ♥ by Luke Morales :wave: [Get in touch!](https://www.linkedin.com/in/lukemorales/) 87 | 88 | [nodejs]: https://nodejs.org/ 89 | [yarn]: https://yarnpkg.com/ 90 | [vc]: https://code.visualstudio.com/ 91 | [vceditconfig]: https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig 92 | [vceslint]: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint 93 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "Design+Code", 4 | "slug": "designcode-app", 5 | "privacy": "public", 6 | "sdkVersion": "33.0.0", 7 | "platforms": ["ios", "android", "web"], 8 | "version": "1.0.0", 9 | "orientation": "portrait", 10 | "icon": "src/assets/icon.png", 11 | "splash": { 12 | "image": "src/assets/splash.png", 13 | "resizeMode": "contain", 14 | "backgroundColor": "#f0f3f5" 15 | }, 16 | "updates": { 17 | "fallbackToCacheTimeout": 0 18 | }, 19 | "assetBundlePatterns": ["**/*"], 20 | "ios": { 21 | "supportsTablet": true 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | plugins: [ 5 | [ 6 | 'module-resolver', 7 | { 8 | extensions: ['.js', '.jsx', '.ts', '.tsx', '.android.js', '.android.tsx', '.ios.js', '.ios.tsx'], 9 | root: ['./'], 10 | alias: { 11 | '~': './src', 12 | '@components': './src/components', 13 | '@screens': './src/screens', 14 | '@stores': './src/stores', 15 | '@services': './src/services', 16 | '@assets': './src/assets', 17 | }, 18 | }, 19 | ], 20 | ], 21 | presets: ['babel-preset-expo'], 22 | }; 23 | }; 24 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "~/*": ["*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject" 9 | }, 10 | "dependencies": { 11 | "@expo/vector-icons": "^10.0.0", 12 | "apollo-boost": "^0.4.3", 13 | "expo": "^33.0.0", 14 | "expo-linear-gradient": "~5.0.1", 15 | "graphql": "^14.4.2", 16 | "graphql-tag": "^2.10.1", 17 | "prop-types": "^15.7.2", 18 | "react": "16.8.3", 19 | "react-apollo": "^2.5.8", 20 | "react-dom": "^16.8.6", 21 | "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz", 22 | "react-native-gesture-handler": "^1.3.0", 23 | "react-native-showdown": "^0.4.0", 24 | "react-native-web": "^0.11.4", 25 | "react-navigation": "^3.11.1", 26 | "react-redux": "^7.1.0", 27 | "redux": "^4.0.4", 28 | "styled-components": "^4.3.2" 29 | }, 30 | "devDependencies": { 31 | "babel-eslint": "^10.0.2", 32 | "babel-plugin-module-resolver": "^3.2.0", 33 | "babel-plugin-root-import": "^6.4.1", 34 | "babel-preset-expo": "^5.1.1", 35 | "eslint": "^5.16.0", 36 | "eslint-config-airbnb": "^17.1.1", 37 | "eslint-config-prettier": "^6.0.0", 38 | "eslint-import-resolver-babel-plugin-root-import": "^1.1.1", 39 | "eslint-plugin-import": "^2.18.2", 40 | "eslint-plugin-jsx-a11y": "^6.2.3", 41 | "eslint-plugin-prettier": "^3.1.0", 42 | "eslint-plugin-react": "^7.14.2", 43 | "eslint-plugin-react-hooks": "^1.6.1", 44 | "prettier": "^1.18.2" 45 | }, 46 | "private": true 47 | } 48 | -------------------------------------------------------------------------------- /src/assets/avatar-default.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/avatar-default.jpg -------------------------------------------------------------------------------- /src/assets/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/avatar.jpg -------------------------------------------------------------------------------- /src/assets/background1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/background1.jpg -------------------------------------------------------------------------------- /src/assets/background10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/background10.jpg -------------------------------------------------------------------------------- /src/assets/background11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/background11.jpg -------------------------------------------------------------------------------- /src/assets/background12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/background12.jpg -------------------------------------------------------------------------------- /src/assets/background13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/background13.jpg -------------------------------------------------------------------------------- /src/assets/background14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/background14.jpg -------------------------------------------------------------------------------- /src/assets/background15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/background15.jpg -------------------------------------------------------------------------------- /src/assets/background16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/background16.jpg -------------------------------------------------------------------------------- /src/assets/background2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/background2.jpg -------------------------------------------------------------------------------- /src/assets/background3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/background3.jpg -------------------------------------------------------------------------------- /src/assets/background4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/background4.jpg -------------------------------------------------------------------------------- /src/assets/background5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/background5.jpg -------------------------------------------------------------------------------- /src/assets/background6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/background6.jpg -------------------------------------------------------------------------------- /src/assets/background7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/background7.jpg -------------------------------------------------------------------------------- /src/assets/background8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/background8.jpg -------------------------------------------------------------------------------- /src/assets/background9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/background9.jpg -------------------------------------------------------------------------------- /src/assets/icon-courses.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/icon-email-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/icon-email-active.png -------------------------------------------------------------------------------- /src/assets/icon-email-animated.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/icon-email-animated.gif -------------------------------------------------------------------------------- /src/assets/icon-email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/icon-email.png -------------------------------------------------------------------------------- /src/assets/icon-home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/icon-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/icon-logout.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icon-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/assets/icon-night.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icon-notifications.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/icon-password-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/icon-password-active.png -------------------------------------------------------------------------------- /src/assets/icon-password-animated.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/icon-password-animated.gif -------------------------------------------------------------------------------- /src/assets/icon-password.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/icon-password.png -------------------------------------------------------------------------------- /src/assets/icon-play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/icon-refresh.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icon-star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/icon.png -------------------------------------------------------------------------------- /src/assets/logo-dc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/logo-dc.png -------------------------------------------------------------------------------- /src/assets/logo-figma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/logo-figma.png -------------------------------------------------------------------------------- /src/assets/logo-framerx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/logo-framerx.png -------------------------------------------------------------------------------- /src/assets/logo-invision.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/logo-invision.png -------------------------------------------------------------------------------- /src/assets/logo-react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/logo-react.png -------------------------------------------------------------------------------- /src/assets/logo-sketch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/logo-sketch.png -------------------------------------------------------------------------------- /src/assets/logo-studio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/logo-studio.png -------------------------------------------------------------------------------- /src/assets/logo-swift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/logo-swift.png -------------------------------------------------------------------------------- /src/assets/logo-vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/logo-vue.png -------------------------------------------------------------------------------- /src/assets/logo-xcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/logo-xcode.png -------------------------------------------------------------------------------- /src/assets/logo-xd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/logo-xd.png -------------------------------------------------------------------------------- /src/assets/lottie-ae.json: -------------------------------------------------------------------------------- 1 | { 2 | "v": "5.5.0", 3 | "fr": 29.9700012207031, 4 | "ip": 0, 5 | "op": 30.0000012219251, 6 | "w": 200, 7 | "h": 200, 8 | "nm": "Comp 1", 9 | "ddd": 0, 10 | "assets": [], 11 | "layers": [ 12 | { 13 | "ddd": 0, 14 | "ind": 1, 15 | "ty": 4, 16 | "nm": "Shape Layer 1", 17 | "sr": 1, 18 | "ks": { 19 | "o": { "a": 0, "k": 100, "ix": 11 }, 20 | "r": { "a": 0, "k": 0, "ix": 10 }, 21 | "p": { "a": 0, "k": [104.25, 162.5, 0], "ix": 2 }, 22 | "a": { "a": 0, "k": [0, 0, 0], "ix": 1 }, 23 | "s": { "a": 0, "k": [100, 100, 100], "ix": 6 } 24 | }, 25 | "ao": 0, 26 | "shapes": [ 27 | { 28 | "ty": "gr", 29 | "it": [ 30 | { 31 | "ty": "rc", 32 | "d": 1, 33 | "s": { 34 | "a": 1, 35 | "k": [ 36 | { 37 | "i": { "x": [0.667, 0.667], "y": [1, 1] }, 38 | "o": { "x": [0.069, 0.228], "y": [1.643, 2.198] }, 39 | "t": 0, 40 | "s": [30, 30] 41 | }, 42 | { "t": 14.0000005702317, "s": [100, 130] } 43 | ], 44 | "ix": 2 45 | }, 46 | "p": { "a": 0, "k": [0, 0], "ix": 3 }, 47 | "r": { 48 | "a": 1, 49 | "k": [ 50 | { 51 | "i": { "x": [0.833], "y": [0.833] }, 52 | "o": { "x": [0.167], "y": [0.167] }, 53 | "t": 0, 54 | "s": [100] 55 | }, 56 | { "t": 14.0000005702317, "s": [10] } 57 | ], 58 | "ix": 4 59 | }, 60 | "nm": "Rectangle Path 1", 61 | "mn": "ADBE Vector Shape - Rect", 62 | "hd": false 63 | }, 64 | { 65 | "ty": "st", 66 | "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 3 }, 67 | "o": { "a": 0, "k": 100, "ix": 4 }, 68 | "w": { "a": 0, "k": 0, "ix": 5 }, 69 | "lc": 1, 70 | "lj": 1, 71 | "ml": 4, 72 | "bm": 0, 73 | "nm": "Stroke 1", 74 | "mn": "ADBE Vector Graphic - Stroke", 75 | "hd": false 76 | }, 77 | { 78 | "ty": "fl", 79 | "c": { 80 | "a": 1, 81 | "k": [ 82 | { 83 | "i": { "x": [0.833], "y": [0.833] }, 84 | "o": { "x": [0.167], "y": [0.167] }, 85 | "t": 0, 86 | "s": [1, 1, 1, 1] 87 | }, 88 | { "t": 14.0000005702317, "s": [0, 0, 0, 1] } 89 | ], 90 | "ix": 4 91 | }, 92 | "o": { "a": 0, "k": 100, "ix": 5 }, 93 | "r": 1, 94 | "bm": 0, 95 | "nm": "Fill 1", 96 | "mn": "ADBE Vector Graphic - Fill", 97 | "hd": false 98 | }, 99 | { 100 | "ty": "tr", 101 | "p": { "a": 0, "k": [-4.722, -49.092], "ix": 2 }, 102 | "a": { "a": 0, "k": [0, 0], "ix": 1 }, 103 | "s": { "a": 0, "k": [100, 100], "ix": 3 }, 104 | "r": { "a": 0, "k": 0, "ix": 6 }, 105 | "o": { "a": 0, "k": 100, "ix": 7 }, 106 | "sk": { "a": 0, "k": 0, "ix": 4 }, 107 | "sa": { "a": 0, "k": 0, "ix": 5 }, 108 | "nm": "Transform" 109 | } 110 | ], 111 | "nm": "Rectangle 1", 112 | "np": 3, 113 | "cix": 2, 114 | "bm": 0, 115 | "ix": 1, 116 | "mn": "ADBE Vector Group", 117 | "hd": false 118 | } 119 | ], 120 | "ip": 0, 121 | "op": 30.0000012219251, 122 | "st": 0, 123 | "bm": 0 124 | } 125 | ], 126 | "markers": [] 127 | } 128 | -------------------------------------------------------------------------------- /src/assets/lottie-checked-done.json: -------------------------------------------------------------------------------- 1 | {"v":"4.6.3","fr":24,"ip":0,"op":21,"w":320,"h":320,"nm":"checklist","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 13","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":300},"p":{"a":0,"k":[160,159.5,0]},"a":{"a":0,"k":[0,-34,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p667_1_0p167_0p167","0p667_1_0p167_0p167"],"t":6,"s":[15.021,15.021],"e":[0,0]},{"t":17}]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":6,"s":[0.0823529,0.6784314,0.3843137,1],"e":[0,0.7921569,0.4470588,1]},{"t":17}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p667_1_0p167_0p167","t":6,"s":[-8.142,-92.147],"e":[-7.675,-162.544],"to":[0.07779947668314,-11.7327470779419],"ti":[-0.07779947668314,11.7327470779419]},{"t":17}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[83.981,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p667_1_0p167_0p167"],"t":6,"s":[20.367],"e":[6.367]},{"t":17}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 2","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":6,"s":[15.021,15.021],"e":[0,0]},{"t":21}]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":6,"s":[0.0823529,0.6784314,0.3843137,1],"e":[0,0.9070925,0.5119235,1]},{"t":17}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":6,"s":[16.585,-99.759],"e":[28.521,-187.495],"to":[1.9892578125,-14.6227216720581],"ti":[-1.9892578125,14.6227216720581]},{"t":21}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[97.419,116],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":6,"s":[14.733],"e":[8.733]},{"t":21}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group"}],"ip":6,"op":22,"st":-21,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 12","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":250},"p":{"a":0,"k":[160,159.5,0]},"a":{"a":0,"k":[0,-34,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p667_1_0p167_0p167","0p667_1_0p167_0p167"],"t":6,"s":[15.021,15.021],"e":[0,0]},{"t":17}]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":6,"s":[0.0823529,0.6784314,0.3843137,1],"e":[0,0.7921569,0.4470588,1]},{"t":17}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p667_1_0p167_0p167","t":6,"s":[-8.142,-92.147],"e":[-7.675,-162.544],"to":[0.07779947668314,-11.7327470779419],"ti":[-0.07779947668314,11.7327470779419]},{"t":17}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[83.981,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p667_1_0p167_0p167"],"t":6,"s":[20.367],"e":[6.367]},{"t":17}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 2","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":6,"s":[15.021,15.021],"e":[0,0]},{"t":21}]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":6,"s":[0.0823529,0.6784314,0.3843137,1],"e":[0,0.9070925,0.5119235,1]},{"t":17}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":6,"s":[16.585,-99.759],"e":[28.521,-187.495],"to":[1.9892578125,-14.6227216720581],"ti":[-1.9892578125,14.6227216720581]},{"t":21}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[97.419,116],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":6,"s":[14.733],"e":[8.733]},{"t":21}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group"}],"ip":6,"op":22,"st":-21,"bm":0,"sr":1},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 11","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":200},"p":{"a":0,"k":[160,159.5,0]},"a":{"a":0,"k":[0,-34,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p667_1_0p167_0p167","0p667_1_0p167_0p167"],"t":6,"s":[15.021,15.021],"e":[0,0]},{"t":17}]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":6,"s":[0.0823529,0.6784314,0.3843137,1],"e":[0,0.7921569,0.4470588,1]},{"t":17}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p667_1_0p167_0p167","t":6,"s":[-8.142,-92.147],"e":[-7.675,-162.544],"to":[0.07779947668314,-11.7327470779419],"ti":[-0.07779947668314,11.7327470779419]},{"t":17}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[83.981,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p667_1_0p167_0p167"],"t":6,"s":[20.367],"e":[6.367]},{"t":17}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 2","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":6,"s":[15.021,15.021],"e":[0,0]},{"t":21}]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":6,"s":[0.0823529,0.6784314,0.3843137,1],"e":[0,0.9070925,0.5119235,1]},{"t":17}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":6,"s":[16.585,-99.759],"e":[28.521,-187.495],"to":[1.9892578125,-14.6227216720581],"ti":[-1.9892578125,14.6227216720581]},{"t":21}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[97.419,116],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":6,"s":[14.733],"e":[8.733]},{"t":21}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group"}],"ip":6,"op":22,"st":-21,"bm":0,"sr":1},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 10","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":150},"p":{"a":0,"k":[160,159.5,0]},"a":{"a":0,"k":[0,-34,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p667_1_0p167_0p167","0p667_1_0p167_0p167"],"t":6,"s":[15.021,15.021],"e":[0,0]},{"t":17}]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":6,"s":[0.0823529,0.6784314,0.3843137,1],"e":[0,0.7921569,0.4470588,1]},{"t":17}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p667_1_0p167_0p167","t":6,"s":[-8.142,-92.147],"e":[-7.675,-162.544],"to":[0.07779947668314,-11.7327470779419],"ti":[-0.07779947668314,11.7327470779419]},{"t":17}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[83.981,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p667_1_0p167_0p167"],"t":6,"s":[20.367],"e":[6.367]},{"t":17}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 2","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":6,"s":[15.021,15.021],"e":[0,0]},{"t":21}]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":6,"s":[0.0823529,0.6784314,0.3843137,1],"e":[0,0.9070925,0.5119235,1]},{"t":17}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":6,"s":[16.585,-99.759],"e":[28.521,-187.495],"to":[1.9892578125,-14.6227216720581],"ti":[-1.9892578125,14.6227216720581]},{"t":21}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[97.419,116],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":6,"s":[14.733],"e":[8.733]},{"t":21}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group"}],"ip":6,"op":22,"st":-21,"bm":0,"sr":1},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 9","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":100},"p":{"a":0,"k":[160,159.5,0]},"a":{"a":0,"k":[0,-34,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p667_1_0p167_0p167","0p667_1_0p167_0p167"],"t":6,"s":[15.021,15.021],"e":[0,0]},{"t":17}]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":6,"s":[0.0823529,0.6784314,0.3843137,1],"e":[0,0.7921569,0.4470588,1]},{"t":17}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p667_1_0p167_0p167","t":6,"s":[-8.142,-92.147],"e":[-7.675,-162.544],"to":[0.07779947668314,-11.7327470779419],"ti":[-0.07779947668314,11.7327470779419]},{"t":17}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[83.981,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p667_1_0p167_0p167"],"t":6,"s":[20.367],"e":[6.367]},{"t":17}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 2","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":6,"s":[15.021,15.021],"e":[0,0]},{"t":21}]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":6,"s":[0.0823529,0.6784314,0.3843137,1],"e":[0,0.9070925,0.5119235,1]},{"t":17}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":6,"s":[16.585,-99.759],"e":[28.521,-187.495],"to":[1.9892578125,-14.6227216720581],"ti":[-1.9892578125,14.6227216720581]},{"t":21}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[97.419,116],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":6,"s":[14.733],"e":[8.733]},{"t":21}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group"}],"ip":6,"op":22,"st":-21,"bm":0,"sr":1},{"ddd":0,"ind":7,"ty":4,"nm":"Shape Layer 8","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":50},"p":{"a":0,"k":[160,159.5,0]},"a":{"a":0,"k":[0,-34,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p667_1_0p167_0p167","0p667_1_0p167_0p167"],"t":6,"s":[15.021,15.021],"e":[0,0]},{"t":17}]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":6,"s":[0.0823529,0.6784314,0.3843137,1],"e":[0,0.7921569,0.4470588,1]},{"t":17}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p667_1_0p167_0p167","t":6,"s":[-8.142,-92.147],"e":[-7.675,-162.544],"to":[0.07779947668314,-11.7327470779419],"ti":[-0.07779947668314,11.7327470779419]},{"t":17}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[83.981,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p667_1_0p167_0p167"],"t":6,"s":[20.367],"e":[6.367]},{"t":17}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 2","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":6,"s":[15.021,15.021],"e":[0,0]},{"t":21}]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":6,"s":[0.0823529,0.6784314,0.3843137,1],"e":[0,0.9070925,0.5119235,1]},{"t":17}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":6,"s":[16.585,-99.759],"e":[28.521,-187.495],"to":[1.9892578125,-14.6227216720581],"ti":[-1.9892578125,14.6227216720581]},{"t":21}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[97.419,116],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":6,"s":[14.733],"e":[8.733]},{"t":21}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group"}],"ip":6,"op":22,"st":-21,"bm":0,"sr":1},{"ddd":0,"ind":8,"ty":4,"nm":"Shape Layer 7","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[160,159.5,0]},"a":{"a":0,"k":[0,-34,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p667_1_0p167_0p167","0p667_1_0p167_0p167"],"t":6,"s":[15.021,15.021],"e":[0,0]},{"t":17}]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":6,"s":[0.0823529,0.6784314,0.3843137,1],"e":[0,0.7921569,0.4470588,1]},{"t":17}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p667_1_0p167_0p167","t":6,"s":[-8.142,-92.147],"e":[-7.675,-162.544],"to":[0.07779947668314,-11.7327470779419],"ti":[-0.07779947668314,11.7327470779419]},{"t":17}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[83.981,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p667_1_0p167_0p167"],"t":6,"s":[20.367],"e":[6.367]},{"t":17}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 2","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":6,"s":[15.021,15.021],"e":[0,0]},{"t":21}]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":6,"s":[0.0823529,0.6784314,0.3843137,1],"e":[0,0.9070925,0.5119235,1]},{"t":17}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":6,"s":[16.585,-99.759],"e":[28.521,-187.495],"to":[1.9892578125,-14.6227216720581],"ti":[-1.9892578125,14.6227216720581]},{"t":21}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[97.419,116],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":6,"s":[14.733],"e":[8.733]},{"t":21}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group"}],"ip":6,"op":22,"st":-21,"bm":0,"sr":1},{"ddd":0,"ind":9,"ty":4,"nm":"Shape Layer 5","parent":11,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":-44},"p":{"a":0,"k":[0.378,-0.641,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[7.39,7.39,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0]],"o":[[0,0]],"v":[[-274.219,-254.097]],"c":false}},"nm":"Path 1","mn":"ADBE Vector Shape - Group"},{"ty":"st","c":{"a":0,"k":[1,1,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 2","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-17,-16],[-17,10.5],[41,10.5]],"c":false}},"nm":"Path 1","mn":"ADBE Vector Shape - Group"},{"ty":"st","c":{"a":0,"k":[1,1,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":1,"ml":5,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group"}],"ip":7,"op":22,"st":-21,"bm":0,"sr":1},{"ddd":0,"ind":10,"ty":4,"nm":"Shape Layer 6","ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":4,"s":[50],"e":[0]},{"t":14}]},"r":{"a":0,"k":0},"p":{"a":0,"k":[160,160,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0.333]},"n":["0p667_1_0p333_0","0p667_1_0p333_0","0p667_0p667_0p333_0p333"],"t":4,"s":[100,100,100],"e":[1085,1085,100]},{"t":14}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[19.779,19.779]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0,0.7921569,0.4470588,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.068,0.036],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":4,"op":22,"st":-23,"bm":0,"sr":1},{"ddd":0,"ind":11,"ty":4,"nm":"Shape Layer 4","ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":6,"s":[30],"e":[100]},{"t":9}]},"r":{"a":0,"k":0},"p":{"a":0,"k":[160.312,161.188,0]},"a":{"a":0,"k":[0.812,-0.562,0]},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0.333]},"n":["0p667_1_0p333_0","0p667_1_0p333_0","0p667_0p667_0p333_0p333"],"t":6,"s":[100,100,100],"e":[1087,1087,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0.333]},"n":["0p667_1_0p333_0","0p667_1_0p333_0","0p667_0p667_0p333_0p333"],"t":11,"s":[1087,1087,100],"e":[866,866,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0.333]},"n":["0p833_0p833_0p333_0","0p833_0p833_0p333_0","0p833_0p833_0p333_0p333"],"t":13,"s":[866,866,100],"e":[878,878,100]},{"t":16}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[10.068,10.068]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0,0.7921569,0.4470588,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[0.784,-0.716],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":6,"op":22,"st":-19,"bm":0,"sr":1},{"ddd":0,"ind":12,"ty":4,"nm":"Shape Layer 3","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[161,160,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0.333]},"n":["0p667_1_0p333_0","0p667_1_0p333_0","0p667_0p667_0p333_0p333"],"t":3,"s":[100,100,100],"e":[224,224,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0.333]},"n":["0p667_1_0p333_0","0p667_1_0p333_0","0p667_0p667_0p333_0p333"],"t":4,"s":[224,224,100],"e":[476,476,100]},{"t":8}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[6.009,6.009]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":4,"s":[0.0558609,0.688557,0.3778246,1],"e":[0.1089485,0.6693168,0.3941063,1]},{"t":8}]},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":4,"s":[0],"e":[100]},{"t":5}]},"w":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":4,"s":[3],"e":[0]},{"t":8}]},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":0,"k":[0,0.7921569,0.4470588,1]},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":3,"s":[100],"e":[99]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":4,"s":[99],"e":[0]},{"t":5}]},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.338,0.065],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[649.112,649.112],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 2","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":3,"op":22,"st":-21,"bm":0,"sr":1},{"ddd":0,"ind":13,"ty":4,"nm":"Shape Layer 2","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[160.142,159.987,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[377.603,377.603,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[22.315,22.315]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"a":0,"k":[0.8352941,0.8352941,0.8352941,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":0,"k":[1,1,1,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.038,0.003],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":-21,"op":22,"st":-21,"bm":0,"sr":1}]} -------------------------------------------------------------------------------- /src/assets/lottie-glow-loading.json: -------------------------------------------------------------------------------- 1 | {"v":"4.6.8","fr":29.9700012207031,"ip":0,"op":69.0000028104276,"w":256,"h":256,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Glow ball","ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[360]},{"t":69.0000028104276}]},"p":{"a":0,"k":[127.984,127.969,0]},"a":{"a":0,"k":[-0.182,32.385,0]},"s":{"a":0,"k":[132,132,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[14.125,14.125]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.1635217,0.8509804,0.8105415,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.063,1.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 8","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":315},"p":{"a":0,"k":[127.984,127.969,0]},"a":{"a":0,"k":[-0.182,32.385,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":56,"s":[132,132,100],"e":[145,145,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":59,"s":[145,145,100],"e":[132,132,100]},{"t":63.0000025660426}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[14.125,14.125]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0.1647059,0.6313726,0.8509804,1],"e":[0.1647059,0.6313726,0.8509804,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":56,"s":[0.1647059,0.6313726,0.8509804,1],"e":[0.1647059,0.8509804,0.8117647,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":62,"s":[0.1647059,0.8509804,0.8117647,1],"e":[0.1647059,0.6313726,0.8509804,1]},{"t":69.0000028104276}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.063,1.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 7","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":270},"p":{"a":0,"k":[127.984,127.969,0]},"a":{"a":0,"k":[-0.182,32.385,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":48,"s":[132,132,100],"e":[145,145,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":51,"s":[145,145,100],"e":[132,132,100]},{"t":55.0000022401959}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[14.125,14.125]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0.1647059,0.6313726,0.8509804,1],"e":[0.1647059,0.6745098,0.8431373,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":47,"s":[0.1647059,0.6745098,0.8431373,1],"e":[0.1647059,0.8509804,0.8117647,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":58,"s":[0.1647059,0.8509804,0.8117647,1],"e":[0.1647059,0.6313726,0.8509804,1]},{"t":69.0000028104276}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.063,1.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 6","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":225},"p":{"a":0,"k":[127.984,127.969,0]},"a":{"a":0,"k":[-0.182,32.385,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":39,"s":[132,132,100],"e":[145,145,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":42,"s":[145,145,100],"e":[132,132,100]},{"t":46.0000018736184}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[14.125,14.125]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0.1647059,0.6313726,0.8509804,1],"e":[0.1647059,0.6313726,0.8509804,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":37,"s":[0.1647059,0.6313726,0.8509804,1],"e":[0.1647059,0.8509804,0.8117647,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":43,"s":[0.1647059,0.8509804,0.8117647,1],"e":[0.1647059,0.6313726,0.8509804,1]},{"t":48.0000019550801}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.063,1.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 5","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":180},"p":{"a":0,"k":[127.984,127.969,0]},"a":{"a":0,"k":[-0.182,32.385,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":31,"s":[132,132,100],"e":[145,145,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":34,"s":[145,145,100],"e":[132,132,100]},{"t":38.0000015477717}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[14.125,14.125]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0.1647059,0.6313726,0.8509804,1],"e":[0.1647059,0.6313726,0.8509804,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":26,"s":[0.1647059,0.6313726,0.8509804,1],"e":[0.1647059,0.8509804,0.8117647,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":38,"s":[0.1647059,0.8509804,0.8117647,1],"e":[0.1647059,0.6313726,0.8509804,1]},{"t":42.0000017106951}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.063,1.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 4","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":135},"p":{"a":0,"k":[127.984,127.969,0]},"a":{"a":0,"k":[-0.182,32.385,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":23,"s":[132,132,100],"e":[145,145,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":26,"s":[145,145,100],"e":[132,132,100]},{"t":30.0000012219251}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[14.125,14.125]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0.1647059,0.6313726,0.8509804,1],"e":[0.1647059,0.8509804,0.8117647,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[0.1647059,0.8509804,0.8117647,1],"e":[0.1647059,0.6313726,0.8509804,1]},{"t":38.0000015477717}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.063,1.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":7,"ty":4,"nm":"Shape Layer 3","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":90},"p":{"a":0,"k":[127.984,127.969,0]},"a":{"a":0,"k":[-0.182,32.385,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":14,"s":[132,132,100],"e":[145,145,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":17,"s":[145,145,100],"e":[132,132,100]},{"t":21.0000008553475}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[14.125,14.125]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0.1647059,0.6313726,0.8509804,1],"e":[0.1647059,0.8509804,0.8117647,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":22,"s":[0.1647059,0.8509804,0.8117647,1],"e":[0.1647059,0.6313726,0.8509804,1]},{"t":28.0000011404634}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.063,1.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":8,"ty":4,"nm":"Shape Layer 2","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":45},"p":{"a":0,"k":[127.984,127.969,0]},"a":{"a":0,"k":[-0.182,32.385,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":7,"s":[132,132,100],"e":[145,145,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":10,"s":[145,145,100],"e":[132,132,100]},{"t":14.0000005702317}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[14.125,14.125]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0.1647059,0.6313726,0.8509804,1],"e":[0.1647059,0.8509804,0.8117647,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":16,"s":[0.1647059,0.8509804,0.8117647,1],"e":[0.1647059,0.6313726,0.8509804,1]},{"t":22.0000008960784}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.063,1.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":9,"ty":4,"nm":"Shape Layer 1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[127.984,127.969,0]},"a":{"a":0,"k":[-0.182,32.385,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[132,132,100],"e":[145,145,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":3,"s":[145,145,100],"e":[132,132,100]},{"t":7.00000028511585}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[14.125,14.125]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0.1647059,0.6313726,0.8509804,1],"e":[0.1647059,0.8509804,0.8117647,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":5,"s":[0.1647059,0.8509804,0.8117647,1],"e":[0.1647059,0.6313726,0.8509804,1]},{"t":16.0000006516934}]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.063,1.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1}]} -------------------------------------------------------------------------------- /src/assets/lottie-loading-double.json: -------------------------------------------------------------------------------- 1 | {"v":"5.1.16","fr":24,"ip":0,"op":48,"w":1600,"h":1600,"nm":"Roam","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":4,"s":[0],"e":[360]},{"t":31}],"ix":10},"p":{"a":0,"k":[792.641,800.641,0],"ix":2},"a":{"a":0,"k":[-173.359,-127.359,0],"ix":1},"s":{"a":0,"k":[122.553,122.553,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[225.281,225.281],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.224043573118,0.549071248372,0.957107843137,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":20,"ix":5},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-173.359,-127.359],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":4,"s":[0],"e":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":14,"s":[0],"e":[100]},{"t":31}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":4,"s":[0],"e":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":14,"s":[100],"e":[100]},{"t":31}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":48,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":0,"s":[0],"e":[360]},{"t":42}],"ix":10},"p":{"a":0,"k":[792.641,800.641,0],"ix":2},"a":{"a":0,"k":[-173.359,-127.359,0],"ix":1},"s":{"a":0,"k":[190.553,190.553,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[225.281,225.281],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.175536151961,1,0.939832320868,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":20,"ix":5},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-173.359,-127.359],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":0,"s":[0],"e":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":24,"s":[0],"e":[100]},{"t":38}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":0,"s":[0],"e":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":24,"s":[100],"e":[100]},{"t":38}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":48,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"BKG","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[800,800,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[190.553,190.553,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[924.781,926.667],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.149404862348,0.073189215567,0.308363970588,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0.578,-2.677],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":48,"st":0,"bm":0}],"markers":[]} -------------------------------------------------------------------------------- /src/assets/lottie-loading-text.json: -------------------------------------------------------------------------------- 1 | {"v":"5.1.6","fr":30,"ip":0,"op":94,"w":300,"h":300,"nm":"Comp 2","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[81,59.26,0],"ix":2},"a":{"a":0,"k":[-30,-6.544,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.651,0.667,0.667],"y":[0.998,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"n":["0p651_0p998_0p333_0","0p667_1_0p333_0","0p667_1_0p333_0"],"t":9,"s":[0,75.476,100],"e":[110,75.476,100]},{"i":{"x":[0.524,0.833,0.833],"y":[0.97,1,1]},"o":{"x":[0.379,0.167,0.167],"y":[0.013,0,0]},"n":["0p524_0p97_0p379_0p013","0p833_1_0p167_0","0p833_1_0p167_0"],"t":21,"s":[110,75.476,100],"e":[100,75.476,100]},{"t":29}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[85.26,14.271],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":2,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.941176470588,0.949019607843,0.960784313725,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[12.63,-8.364],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":118,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[81,41.26,0],"ix":2},"a":{"a":0,"k":[-30,-6.544,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.651,0.667,0.667],"y":[0.997,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"n":["0p651_0p997_0p333_0","0p667_1_0p333_0","0p667_1_0p333_0"],"t":3,"s":[0,75.476,100],"e":[90,75.476,100]},{"i":{"x":[0.524,0.833,0.833],"y":[0.94,1,1]},"o":{"x":[0.379,0.167,0.167],"y":[0.027,0,0]},"n":["0p524_0p94_0p379_0p027","0p833_1_0p167_0","0p833_1_0p167_0"],"t":15,"s":[90,75.476,100],"e":[85,75.476,100]},{"t":23}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[85.26,14.271],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":2,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.941176470588,0.949019607843,0.960784313725,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[12.63,-8.364],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":166,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[48.961,49.211,0],"ix":2},"a":{"a":0,"k":[-66.789,-32.789,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.044,0.044,0.667],"y":[0.991,0.991,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"n":["0p044_0p991_0p333_0","0p044_0p991_0p333_0","0p667_1_0p333_0"],"t":0,"s":[0,0,100],"e":[93,93,100]},{"t":12}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[38.422,38.422],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":4,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.894117647059,0.901960784314,0.921568627451,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-66.789,-32.789],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":166,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Comp 1","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[150,175,0],"ix":2},"a":{"a":0,"k":[100,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":200,"h":100,"ip":62,"op":152,"st":62,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"Comp 1","refId":"comp_0","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":62,"s":[100],"e":[60]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":76,"s":[60],"e":[60]},{"t":94}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.182,"y":1},"o":{"x":0.333,"y":0},"n":"0p182_1_0p333_0","t":62,"s":[150,175,0],"e":[150,123.5,0],"to":[0,-8.58333301544189,0],"ti":[0,8.58333301544189,0]},{"i":{"x":0.182,"y":0.182},"o":{"x":0.167,"y":0.167},"n":"0p182_0p182_0p167_0p167","t":76,"s":[150,123.5,0],"e":[150,123.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":94}],"ix":2},"a":{"a":0,"k":[100,50,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.069,0.069,0.667],"y":[0.995,0.995,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"n":["0p069_0p995_0p333_0","0p069_0p995_0p333_0","0p667_1_0p333_0"],"t":62,"s":[100,100,100],"e":[80,80,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"n":["0p833_1_0p333_0","0p833_1_0p333_0","0p833_1_0p333_0"],"t":76,"s":[80,80,100],"e":[80,80,100]},{"t":94}],"ix":6}},"ao":0,"w":200,"h":100,"ip":30,"op":120,"st":30,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"Comp 1","refId":"comp_0","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[100],"e":[60]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":44,"s":[60],"e":[60]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":62,"s":[60],"e":[0]},{"t":76}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.182,"y":1},"o":{"x":0.333,"y":0},"n":"0p182_1_0p333_0","t":30,"s":[150,175,0],"e":[150,123.5,0],"to":[0,-8.58333301544189,0],"ti":[0,8.58333301544189,0]},{"i":{"x":0.182,"y":0.182},"o":{"x":0.167,"y":0.167},"n":"0p182_0p182_0p167_0p167","t":44,"s":[150,123.5,0],"e":[150,123.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.182,"y":1},"o":{"x":0.167,"y":0},"n":"0p182_1_0p167_0","t":62,"s":[150,123.5,0],"e":[150,86.5,0],"to":[0,-6.16666650772095,0],"ti":[0,6.16666650772095,0]},{"t":76}],"ix":2},"a":{"a":0,"k":[100,50,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.069,0.069,0.667],"y":[0.995,0.995,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"n":["0p069_0p995_0p333_0","0p069_0p995_0p333_0","0p667_1_0p333_0"],"t":30,"s":[100,100,100],"e":[80,80,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"n":["0p833_1_0p333_0","0p833_1_0p333_0","0p833_1_0p333_0"],"t":44,"s":[80,80,100],"e":[80,80,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"n":["0p833_1_0p167_0","0p833_1_0p167_0","0p833_1_0p167_0"],"t":62,"s":[80,80,100],"e":[50,50,100]},{"t":76}],"ix":6}},"ao":0,"w":200,"h":100,"ip":-2,"op":88,"st":-2,"bm":0},{"ddd":0,"ind":4,"ty":0,"nm":"Comp 1","refId":"comp_0","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":-1,"s":[100],"e":[60]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":13,"s":[60],"e":[60]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":31,"s":[60],"e":[0]},{"t":45}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.182,"y":1},"o":{"x":0.333,"y":0},"n":"0p182_1_0p333_0","t":-1,"s":[150,175,0],"e":[150,123.5,0],"to":[0,-8.58333301544189,0],"ti":[0,8.58333301544189,0]},{"i":{"x":0.182,"y":0.182},"o":{"x":0.167,"y":0.167},"n":"0p182_0p182_0p167_0p167","t":13,"s":[150,123.5,0],"e":[150,123.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.182,"y":1},"o":{"x":0.167,"y":0},"n":"0p182_1_0p167_0","t":31,"s":[150,123.5,0],"e":[150,86.5,0],"to":[0,-6.16666650772095,0],"ti":[0,6.16666650772095,0]},{"t":45}],"ix":2},"a":{"a":0,"k":[100,50,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.069,0.069,0.667],"y":[0.995,0.995,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"n":["0p069_0p995_0p333_0","0p069_0p995_0p333_0","0p667_1_0p333_0"],"t":-1,"s":[100,100,100],"e":[80,80,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"n":["0p833_1_0p333_0","0p833_1_0p333_0","0p833_1_0p333_0"],"t":13,"s":[80,80,100],"e":[80,80,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"n":["0p833_1_0p167_0","0p833_1_0p167_0","0p833_1_0p167_0"],"t":31,"s":[80,80,100],"e":[50,50,100]},{"t":45}],"ix":6}},"ao":0,"w":200,"h":100,"ip":-33,"op":57,"st":-33,"bm":0},{"ddd":0,"ind":5,"ty":0,"nm":"Comp 1","refId":"comp_0","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":-35,"s":[100],"e":[60]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":-21,"s":[60],"e":[60]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":-1,"s":[60],"e":[0]},{"t":13}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.182,"y":1},"o":{"x":0.333,"y":0},"n":"0p182_1_0p333_0","t":-35,"s":[150,175,0],"e":[150,123.5,0],"to":[0,-8.58333301544189,0],"ti":[0,8.58333301544189,0]},{"i":{"x":0.182,"y":0.182},"o":{"x":0.167,"y":0.167},"n":"0p182_0p182_0p167_0p167","t":-21,"s":[150,123.5,0],"e":[150,123.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.182,"y":1},"o":{"x":0.167,"y":0},"n":"0p182_1_0p167_0","t":-1,"s":[150,123.5,0],"e":[150,86.5,0],"to":[0,-6.16666650772095,0],"ti":[0,6.16666650772095,0]},{"t":13}],"ix":2},"a":{"a":0,"k":[100,50,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.069,0.069,0.667],"y":[0.995,0.995,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"n":["0p069_0p995_0p333_0","0p069_0p995_0p333_0","0p667_1_0p333_0"],"t":-35,"s":[100,100,100],"e":[80,80,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"n":["0p833_1_0p333_0","0p833_1_0p333_0","0p833_1_0p333_0"],"t":-21,"s":[80,80,100],"e":[80,80,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"n":["0p833_1_0p167_0","0p833_1_0p167_0","0p833_1_0p167_0"],"t":-1,"s":[80,80,100],"e":[50,50,100]},{"t":13}],"ix":6}},"ao":0,"w":200,"h":100,"ip":-76,"op":14,"st":-76,"bm":0}],"markers":[]} -------------------------------------------------------------------------------- /src/assets/lottie-loading.json: -------------------------------------------------------------------------------- 1 | {"v":"5.1.15","fr":60,"ip":0,"op":141,"w":300,"h":300,"nm":"Composição 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Camada de forma 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[1080]},{"t":180}],"ix":10},"p":{"a":0,"k":[150,150,0],"ix":2},"a":{"a":0,"k":[-14.604,-15.104,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[106.793,106.793],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Caminho da elipse 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.109803921569,0.109803921569,0.109803921569,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":11,"ix":5},"lc":2,"lj":1,"ml":4,"nm":"Traçado 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-14.604,-15.104],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformar"}],"nm":"Elipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":60,"s":[0],"e":[67]},{"t":119}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[3],"e":[70]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":60,"s":[70],"e":[70]},{"t":119}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Aparar caminhos 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":900,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Camada de forma 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[1080]},{"t":180}],"ix":10},"p":{"a":0,"k":[150,150,0],"ix":2},"a":{"a":0,"k":[-14.604,-15.104,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[106.793,106.793],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Caminho da elipse 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,0,0.552941176471,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":10,"ix":5},"lc":2,"lj":1,"ml":4,"nm":"Traçado 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-14.604,-15.104],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformar"}],"nm":"Elipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":20,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":69.916,"s":[0],"e":[67]},{"t":119}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":20,"s":[3],"e":[70]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":69.916,"s":[70],"e":[70]},{"t":119}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Aparar caminhos 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":900,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Camada de forma 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[1080]},{"t":180}],"ix":10},"p":{"a":0,"k":[150,150,0],"ix":2},"a":{"a":0,"k":[-14.604,-15.104,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[106.793,106.793],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Caminho da elipse 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.537254901961,0,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":10,"ix":5},"lc":2,"lj":1,"ml":4,"nm":"Traçado 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-14.604,-15.104],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformar"}],"nm":"Elipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":41,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":80.328,"s":[0],"e":[67]},{"t":119}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":41,"s":[3],"e":[70]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":80.328,"s":[70],"e":[70]},{"t":119}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Aparar caminhos 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":900,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Camada de forma 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[1080]},{"t":180}],"ix":10},"p":{"a":0,"k":[150,150,0],"ix":2},"a":{"a":0,"k":[-14.604,-15.104,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[106.793,106.793],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Caminho da elipse 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.117647058824,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":10,"ix":5},"lc":2,"lj":1,"ml":4,"nm":"Traçado 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-14.604,-15.104],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformar"}],"nm":"Elipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":54,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":86.773,"s":[0],"e":[67]},{"t":119}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":54,"s":[3],"e":[70]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":86.773,"s":[70],"e":[70]},{"t":119}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Aparar caminhos 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":900,"st":0,"bm":0}],"markers":[]} -------------------------------------------------------------------------------- /src/assets/lottie-preloader.json: -------------------------------------------------------------------------------- 1 | { 2 | "v": "4.5.7", 3 | "fr": 25, 4 | "ip": 0, 5 | "op": 33, 6 | "w": 800, 7 | "h": 600, 8 | "ddd": 0, 9 | "assets": [ 10 | { 11 | "id": "comp_0", 12 | "layers": [ 13 | { 14 | "ddd": 0, 15 | "ind": 0, 16 | "ty": 3, 17 | "nm": "Null 1", 18 | "ks": { 19 | "o": { "a": 0, "k": 0 }, 20 | "r": { 21 | "a": 1, 22 | "k": [ 23 | { 24 | "i": { "x": [0.268], "y": [1] }, 25 | "o": { "x": [0.73], "y": [0] }, 26 | "n": ["0p268_1_0p73_0"], 27 | "t": 0, 28 | "s": [0], 29 | "e": [180] 30 | }, 31 | { "t": 33 } 32 | ] 33 | }, 34 | "p": { 35 | "a": 1, 36 | "k": [ 37 | { 38 | "i": { "x": 0.277, "y": 1 }, 39 | "o": { "x": 0.721, "y": 0 }, 40 | "n": "0p277_1_0p721_0", 41 | "t": 0, 42 | "s": [460, 304, 0], 43 | "e": [338, 298, 0], 44 | "to": [-20.3333339691162, -1, 0], 45 | "ti": [20.3333339691162, 1, 0] 46 | }, 47 | { "t": 33 } 48 | ] 49 | }, 50 | "a": { "a": 0, "k": [0, 0, 0] }, 51 | "s": { "a": 0, "k": [200, 200, 100] } 52 | }, 53 | "ao": 0, 54 | "ip": 0, 55 | "op": 33, 56 | "st": 0, 57 | "bm": 0, 58 | "sr": 1 59 | }, 60 | { 61 | "ddd": 0, 62 | "ind": 1, 63 | "ty": 4, 64 | "nm": "Shape Layer 4", 65 | "parent": 0, 66 | "ks": { 67 | "o": { "a": 0, "k": 100 }, 68 | "r": { "a": 0, "k": 0 }, 69 | "p": { 70 | "a": 1, 71 | "k": [ 72 | { 73 | "i": { "x": 0.26, "y": 1 }, 74 | "o": { "x": 0.731, "y": 0 }, 75 | "n": "0p26_1_0p731_0", 76 | "t": 6, 77 | "s": [14.5, -1.375, 0], 78 | "e": [14.5, 28.625, 0], 79 | "to": [0, 0, 0], 80 | "ti": [0, 0, 0] 81 | }, 82 | { 83 | "i": { "x": 0.267, "y": 1 }, 84 | "o": { "x": 0.716, "y": 0 }, 85 | "n": "0p267_1_0p716_0", 86 | "t": 19, 87 | "s": [14.5, 28.625, 0], 88 | "e": [14.5, -1.375, 0], 89 | "to": [0, 0, 0], 90 | "ti": [0, 0, 0] 91 | }, 92 | { "t": 32 } 93 | ] 94 | }, 95 | "a": { "a": 0, "k": [-99.5, -5.375, 0] }, 96 | "s": { 97 | "a": 1, 98 | "k": [ 99 | { 100 | "i": { "x": [0.279, 0.279, 0.667], "y": [1, 1, 0.667] }, 101 | "o": { "x": [0.728, 0.728, 0.333], "y": [0, 0, 0.333] }, 102 | "n": [ 103 | "0p279_1_0p728_0", 104 | "0p279_1_0p728_0", 105 | "0p667_0p667_0p333_0p333" 106 | ], 107 | "t": 6, 108 | "s": [75, 75, 100], 109 | "e": [150, 150, 100] 110 | }, 111 | { 112 | "i": { "x": [0.275, 0.275, 0.667], "y": [1, 1, 0.667] }, 113 | "o": { "x": [0.729, 0.729, 0.333], "y": [0, 0, 0.333] }, 114 | "n": [ 115 | "0p275_1_0p729_0", 116 | "0p275_1_0p729_0", 117 | "0p667_0p667_0p333_0p333" 118 | ], 119 | "t": 19, 120 | "s": [150, 150, 100], 121 | "e": [75, 75, 100] 122 | }, 123 | { "t": 32 } 124 | ] 125 | } 126 | }, 127 | "ao": 0, 128 | "shapes": [ 129 | { 130 | "ty": "gr", 131 | "it": [ 132 | { 133 | "d": 1, 134 | "ty": "el", 135 | "s": { "a": 0, "k": [20.969, 20.969] }, 136 | "p": { "a": 0, "k": [0, 0] }, 137 | "nm": "Ellipse Path 1", 138 | "mn": "ADBE Vector Shape - Ellipse" 139 | }, 140 | { 141 | "ty": "st", 142 | "c": { "a": 0, "k": [0.64, 0.16, 0.16, 1] }, 143 | "o": { "a": 0, "k": 100 }, 144 | "w": { "a": 0, "k": 0 }, 145 | "lc": 1, 146 | "lj": 1, 147 | "ml": 4, 148 | "nm": "Stroke 1", 149 | "mn": "ADBE Vector Graphic - Stroke" 150 | }, 151 | { 152 | "ty": "fl", 153 | "c": { 154 | "a": 1, 155 | "k": [ 156 | { 157 | "i": { "x": [0.833], "y": [0.833] }, 158 | "o": { "x": [0.167], "y": [0.167] }, 159 | "n": ["0p833_0p833_0p167_0p167"], 160 | "t": 0, 161 | "s": [0.84, 0.09, 0.38, 1], 162 | "e": [0.18, 0.78, 0.69, 1] 163 | }, 164 | { 165 | "i": { "x": [0.833], "y": [0.833] }, 166 | "o": { "x": [0.167], "y": [0.167] }, 167 | "n": ["0p833_0p833_0p167_0p167"], 168 | "t": 17, 169 | "s": [0.18, 0.78, 0.69, 1], 170 | "e": [0.84, 0.09, 0.38, 1] 171 | }, 172 | { "t": 33 } 173 | ] 174 | }, 175 | "o": { "a": 0, "k": 100 }, 176 | "nm": "Fill 1", 177 | "mn": "ADBE Vector Graphic - Fill" 178 | }, 179 | { 180 | "ty": "tr", 181 | "p": { "a": 0, "k": [-99.516, -5.516], "ix": 2 }, 182 | "a": { "a": 0, "k": [0, 0], "ix": 1 }, 183 | "s": { "a": 0, "k": [100, 100], "ix": 3 }, 184 | "r": { "a": 0, "k": 0, "ix": 6 }, 185 | "o": { "a": 0, "k": 100, "ix": 7 }, 186 | "sk": { "a": 0, "k": 0, "ix": 4 }, 187 | "sa": { "a": 0, "k": 0, "ix": 5 }, 188 | "nm": "Transform" 189 | } 190 | ], 191 | "nm": "Ellipse 1", 192 | "np": 3, 193 | "mn": "ADBE Vector Group" 194 | } 195 | ], 196 | "ip": 0, 197 | "op": 33, 198 | "st": 0, 199 | "bm": 0, 200 | "sr": 1 201 | }, 202 | { 203 | "ddd": 0, 204 | "ind": 2, 205 | "ty": 4, 206 | "nm": "Shape Layer 3", 207 | "parent": 0, 208 | "ks": { 209 | "o": { "a": 0, "k": 100 }, 210 | "r": { "a": 0, "k": 0 }, 211 | "p": { 212 | "a": 1, 213 | "k": [ 214 | { 215 | "i": { "x": 0.281, "y": 1 }, 216 | "o": { "x": 0.73, "y": 0 }, 217 | "n": "0p281_1_0p73_0", 218 | "t": 4, 219 | "s": [-15.5, -1.375, 0], 220 | "e": [-15.5, -31.375, 0], 221 | "to": [0, 0, 0], 222 | "ti": [0, 0, 0] 223 | }, 224 | { 225 | "i": { "x": 0.266, "y": 1 }, 226 | "o": { "x": 0.737, "y": 0 }, 227 | "n": "0p266_1_0p737_0", 228 | "t": 17, 229 | "s": [-15.5, -31.375, 0], 230 | "e": [-15.5, -1.375, 0], 231 | "to": [0, 0, 0], 232 | "ti": [0, 0, 0] 233 | }, 234 | { "t": 30 } 235 | ] 236 | }, 237 | "a": { "a": 0, "k": [-99.5, -5.375, 0] }, 238 | "s": { 239 | "a": 1, 240 | "k": [ 241 | { 242 | "i": { "x": [0.279, 0.279, 0.667], "y": [1, 1, 0.667] }, 243 | "o": { "x": [0.728, 0.728, 0.333], "y": [0, 0, 0.333] }, 244 | "n": [ 245 | "0p279_1_0p728_0", 246 | "0p279_1_0p728_0", 247 | "0p667_0p667_0p333_0p333" 248 | ], 249 | "t": 4, 250 | "s": [75, 75, 100], 251 | "e": [150, 150, 100] 252 | }, 253 | { 254 | "i": { "x": [0.275, 0.275, 0.667], "y": [1, 1, 0.667] }, 255 | "o": { "x": [0.729, 0.729, 0.333], "y": [0, 0, 0.333] }, 256 | "n": [ 257 | "0p275_1_0p729_0", 258 | "0p275_1_0p729_0", 259 | "0p667_0p667_0p333_0p333" 260 | ], 261 | "t": 17, 262 | "s": [150, 150, 100], 263 | "e": [75, 75, 100] 264 | }, 265 | { "t": 30 } 266 | ] 267 | } 268 | }, 269 | "ao": 0, 270 | "shapes": [ 271 | { 272 | "ty": "gr", 273 | "it": [ 274 | { 275 | "d": 1, 276 | "ty": "el", 277 | "s": { "a": 0, "k": [20.969, 20.969] }, 278 | "p": { "a": 0, "k": [0, 0] }, 279 | "nm": "Ellipse Path 1", 280 | "mn": "ADBE Vector Shape - Ellipse" 281 | }, 282 | { 283 | "ty": "st", 284 | "c": { "a": 0, "k": [0.64, 0.16, 0.16, 1] }, 285 | "o": { "a": 0, "k": 100 }, 286 | "w": { "a": 0, "k": 0 }, 287 | "lc": 1, 288 | "lj": 1, 289 | "ml": 4, 290 | "nm": "Stroke 1", 291 | "mn": "ADBE Vector Graphic - Stroke" 292 | }, 293 | { 294 | "ty": "fl", 295 | "c": { 296 | "a": 1, 297 | "k": [ 298 | { 299 | "i": { "x": [0.833], "y": [0.833] }, 300 | "o": { "x": [0.167], "y": [0.167] }, 301 | "n": ["0p833_0p833_0p167_0p167"], 302 | "t": 0, 303 | "s": [0.84, 0.09, 0.38, 1], 304 | "e": [0.61, 0.76, 0.03, 1] 305 | }, 306 | { 307 | "i": { "x": [0.833], "y": [0.833] }, 308 | "o": { "x": [0.167], "y": [0.167] }, 309 | "n": ["0p833_0p833_0p167_0p167"], 310 | "t": 17, 311 | "s": [0.61, 0.76, 0.03, 1], 312 | "e": [0.84, 0.09, 0.38, 1] 313 | }, 314 | { "t": 33 } 315 | ] 316 | }, 317 | "o": { "a": 0, "k": 100 }, 318 | "nm": "Fill 1", 319 | "mn": "ADBE Vector Graphic - Fill" 320 | }, 321 | { 322 | "ty": "tr", 323 | "p": { "a": 0, "k": [-99.516, -5.516], "ix": 2 }, 324 | "a": { "a": 0, "k": [0, 0], "ix": 1 }, 325 | "s": { "a": 0, "k": [100, 100], "ix": 3 }, 326 | "r": { "a": 0, "k": 0, "ix": 6 }, 327 | "o": { "a": 0, "k": 100, "ix": 7 }, 328 | "sk": { "a": 0, "k": 0, "ix": 4 }, 329 | "sa": { "a": 0, "k": 0, "ix": 5 }, 330 | "nm": "Transform" 331 | } 332 | ], 333 | "nm": "Ellipse 1", 334 | "np": 3, 335 | "mn": "ADBE Vector Group" 336 | } 337 | ], 338 | "ip": 0, 339 | "op": 33, 340 | "st": 0, 341 | "bm": 0, 342 | "sr": 1 343 | }, 344 | { 345 | "ddd": 0, 346 | "ind": 3, 347 | "ty": 4, 348 | "nm": "Shape Layer 2", 349 | "parent": 0, 350 | "ks": { 351 | "o": { "a": 0, "k": 100 }, 352 | "r": { "a": 0, "k": 0 }, 353 | "p": { 354 | "a": 1, 355 | "k": [ 356 | { 357 | "i": { "x": 0.28, "y": 1 }, 358 | "o": { "x": 0.729, "y": 0 }, 359 | "n": "0p28_1_0p729_0", 360 | "t": 2, 361 | "s": [-45.5, -1.375, 0], 362 | "e": [-45.5, 28.625, 0], 363 | "to": [0, 0, 0], 364 | "ti": [0, 0, 0] 365 | }, 366 | { 367 | "i": { "x": 0.287, "y": 1 }, 368 | "o": { "x": 0.714, "y": 0 }, 369 | "n": "0p287_1_0p714_0", 370 | "t": 15, 371 | "s": [-45.5, 28.625, 0], 372 | "e": [-45.5, -1.375, 0], 373 | "to": [0, 0, 0], 374 | "ti": [0, 0, 0] 375 | }, 376 | { "t": 28 } 377 | ] 378 | }, 379 | "a": { "a": 0, "k": [-99.5, -5.375, 0] }, 380 | "s": { 381 | "a": 1, 382 | "k": [ 383 | { 384 | "i": { "x": [0.279, 0.279, 0.667], "y": [1, 1, 0.667] }, 385 | "o": { "x": [0.728, 0.728, 0.333], "y": [0, 0, 0.333] }, 386 | "n": [ 387 | "0p279_1_0p728_0", 388 | "0p279_1_0p728_0", 389 | "0p667_0p667_0p333_0p333" 390 | ], 391 | "t": 2, 392 | "s": [75, 75, 100], 393 | "e": [150, 150, 100] 394 | }, 395 | { 396 | "i": { "x": [0.275, 0.275, 0.667], "y": [1, 1, 0.667] }, 397 | "o": { "x": [0.729, 0.729, 0.333], "y": [0, 0, 0.333] }, 398 | "n": [ 399 | "0p275_1_0p729_0", 400 | "0p275_1_0p729_0", 401 | "0p667_0p667_0p333_0p333" 402 | ], 403 | "t": 15, 404 | "s": [150, 150, 100], 405 | "e": [75, 75, 100] 406 | }, 407 | { "t": 28 } 408 | ] 409 | } 410 | }, 411 | "ao": 0, 412 | "shapes": [ 413 | { 414 | "ty": "gr", 415 | "it": [ 416 | { 417 | "d": 1, 418 | "ty": "el", 419 | "s": { "a": 0, "k": [20.969, 20.969] }, 420 | "p": { "a": 0, "k": [0, 0] }, 421 | "nm": "Ellipse Path 1", 422 | "mn": "ADBE Vector Shape - Ellipse" 423 | }, 424 | { 425 | "ty": "st", 426 | "c": { "a": 0, "k": [0.64, 0.16, 0.16, 1] }, 427 | "o": { "a": 0, "k": 100 }, 428 | "w": { "a": 0, "k": 0 }, 429 | "lc": 1, 430 | "lj": 1, 431 | "ml": 4, 432 | "nm": "Stroke 1", 433 | "mn": "ADBE Vector Graphic - Stroke" 434 | }, 435 | { 436 | "ty": "fl", 437 | "c": { 438 | "a": 1, 439 | "k": [ 440 | { 441 | "i": { "x": [0.833], "y": [0.833] }, 442 | "o": { "x": [0.167], "y": [0.167] }, 443 | "n": ["0p833_0p833_0p167_0p167"], 444 | "t": 0, 445 | "s": [0.84, 0.09, 0.38, 1], 446 | "e": [0.95, 0.47, 0.36, 1] 447 | }, 448 | { 449 | "i": { "x": [0.833], "y": [0.833] }, 450 | "o": { "x": [0.167], "y": [0.167] }, 451 | "n": ["0p833_0p833_0p167_0p167"], 452 | "t": 17, 453 | "s": [0.95, 0.47, 0.36, 1], 454 | "e": [0.84, 0.09, 0.38, 1] 455 | }, 456 | { "t": 33 } 457 | ] 458 | }, 459 | "o": { "a": 0, "k": 100 }, 460 | "nm": "Fill 1", 461 | "mn": "ADBE Vector Graphic - Fill" 462 | }, 463 | { 464 | "ty": "tr", 465 | "p": { "a": 0, "k": [-99.516, -5.516], "ix": 2 }, 466 | "a": { "a": 0, "k": [0, 0], "ix": 1 }, 467 | "s": { "a": 0, "k": [100, 100], "ix": 3 }, 468 | "r": { "a": 0, "k": 0, "ix": 6 }, 469 | "o": { "a": 0, "k": 100, "ix": 7 }, 470 | "sk": { "a": 0, "k": 0, "ix": 4 }, 471 | "sa": { "a": 0, "k": 0, "ix": 5 }, 472 | "nm": "Transform" 473 | } 474 | ], 475 | "nm": "Ellipse 1", 476 | "np": 3, 477 | "mn": "ADBE Vector Group" 478 | } 479 | ], 480 | "ip": 0, 481 | "op": 33, 482 | "st": 0, 483 | "bm": 0, 484 | "sr": 1 485 | }, 486 | { 487 | "ddd": 0, 488 | "ind": 4, 489 | "ty": 4, 490 | "nm": "Shape Layer 1", 491 | "parent": 0, 492 | "ks": { 493 | "o": { "a": 0, "k": 100 }, 494 | "r": { "a": 0, "k": 0 }, 495 | "p": { 496 | "a": 1, 497 | "k": [ 498 | { 499 | "i": { "x": 0.279, "y": 1 }, 500 | "o": { "x": 0.728, "y": 0 }, 501 | "n": "0p279_1_0p728_0", 502 | "t": 0, 503 | "s": [-75.5, -1.375, 0], 504 | "e": [-75.5, -31.375, 0], 505 | "to": [0, -5, 0], 506 | "ti": [0, 0, 0] 507 | }, 508 | { 509 | "i": { "x": 0.264, "y": 1 }, 510 | "o": { "x": 0.735, "y": 0 }, 511 | "n": "0p264_1_0p735_0", 512 | "t": 13, 513 | "s": [-75.5, -31.375, 0], 514 | "e": [-75.5, -1.375, 0], 515 | "to": [0, 0, 0], 516 | "ti": [0, -5, 0] 517 | }, 518 | { "t": 26 } 519 | ] 520 | }, 521 | "a": { "a": 0, "k": [-99.5, -5.375, 0] }, 522 | "s": { 523 | "a": 1, 524 | "k": [ 525 | { 526 | "i": { "x": [0.279, 0.279, 0.667], "y": [1, 1, 0.667] }, 527 | "o": { "x": [0.728, 0.728, 0.333], "y": [0, 0, 0.333] }, 528 | "n": [ 529 | "0p279_1_0p728_0", 530 | "0p279_1_0p728_0", 531 | "0p667_0p667_0p333_0p333" 532 | ], 533 | "t": 0, 534 | "s": [75, 75, 100], 535 | "e": [150, 150, 100] 536 | }, 537 | { 538 | "i": { "x": [0.275, 0.275, 0.667], "y": [1, 1, 0.667] }, 539 | "o": { "x": [0.729, 0.729, 0.333], "y": [0, 0, 0.333] }, 540 | "n": [ 541 | "0p275_1_0p729_0", 542 | "0p275_1_0p729_0", 543 | "0p667_0p667_0p333_0p333" 544 | ], 545 | "t": 13, 546 | "s": [150, 150, 100], 547 | "e": [75, 75, 100] 548 | }, 549 | { "t": 26 } 550 | ] 551 | } 552 | }, 553 | "ao": 0, 554 | "shapes": [ 555 | { 556 | "ty": "gr", 557 | "it": [ 558 | { 559 | "d": 1, 560 | "ty": "el", 561 | "s": { "a": 0, "k": [20.969, 20.969] }, 562 | "p": { "a": 0, "k": [0, 0] }, 563 | "nm": "Ellipse Path 1", 564 | "mn": "ADBE Vector Shape - Ellipse" 565 | }, 566 | { 567 | "ty": "st", 568 | "c": { "a": 0, "k": [0.64, 0.16, 0.16, 1] }, 569 | "o": { "a": 0, "k": 100 }, 570 | "w": { "a": 0, "k": 0 }, 571 | "lc": 1, 572 | "lj": 1, 573 | "ml": 4, 574 | "nm": "Stroke 1", 575 | "mn": "ADBE Vector Graphic - Stroke" 576 | }, 577 | { 578 | "ty": "fl", 579 | "c": { "a": 0, "k": [0.84, 0.09, 0.38, 1] }, 580 | "o": { "a": 0, "k": 100 }, 581 | "nm": "Fill 1", 582 | "mn": "ADBE Vector Graphic - Fill" 583 | }, 584 | { 585 | "ty": "tr", 586 | "p": { "a": 0, "k": [-99.516, -5.516], "ix": 2 }, 587 | "a": { "a": 0, "k": [0, 0], "ix": 1 }, 588 | "s": { "a": 0, "k": [100, 100], "ix": 3 }, 589 | "r": { "a": 0, "k": 0, "ix": 6 }, 590 | "o": { "a": 0, "k": 100, "ix": 7 }, 591 | "sk": { "a": 0, "k": 0, "ix": 4 }, 592 | "sa": { "a": 0, "k": 0, "ix": 5 }, 593 | "nm": "Transform" 594 | } 595 | ], 596 | "nm": "Ellipse 1", 597 | "np": 3, 598 | "mn": "ADBE Vector Group" 599 | } 600 | ], 601 | "ip": 0, 602 | "op": 33, 603 | "st": 0, 604 | "bm": 0, 605 | "sr": 1 606 | } 607 | ] 608 | } 609 | ], 610 | "layers": [ 611 | { 612 | "ddd": 0, 613 | "ind": 0, 614 | "ty": 0, 615 | "nm": "Komplet", 616 | "refId": "comp_0", 617 | "ks": { 618 | "o": { "a": 0, "k": 100 }, 619 | "r": { "a": 0, "k": 0 }, 620 | "p": { "a": 0, "k": [400, 300, 0] }, 621 | "a": { "a": 0, "k": [400, 300, 0] }, 622 | "s": { "a": 0, "k": [100, 100, 100] } 623 | }, 624 | "ao": 0, 625 | "w": 800, 626 | "h": 600, 627 | "ip": 0, 628 | "op": 15, 629 | "st": -18, 630 | "bm": 0, 631 | "sr": 1 632 | }, 633 | { 634 | "ddd": 0, 635 | "ind": 1, 636 | "ty": 0, 637 | "nm": "Komplet", 638 | "refId": "comp_0", 639 | "ks": { 640 | "o": { "a": 0, "k": 100 }, 641 | "r": { "a": 0, "k": 0 }, 642 | "p": { "a": 0, "k": [400, 300, 0] }, 643 | "a": { "a": 0, "k": [400, 300, 0] }, 644 | "s": { "a": 0, "k": [100, 100, 100] } 645 | }, 646 | "ao": 0, 647 | "w": 800, 648 | "h": 600, 649 | "ip": 15, 650 | "op": 33, 651 | "st": 15, 652 | "bm": 0, 653 | "sr": 1 654 | } 655 | ] 656 | } 657 | -------------------------------------------------------------------------------- /src/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukemorales/react-native-design-code/fa866a7cbe4dd10af47ae0d268290383279e0298/src/assets/splash.png -------------------------------------------------------------------------------- /src/components/Card/Card.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Dimensions } from 'react-native'; 4 | import { Container, Cover, Image, Title, Content, Logo, Wrapper, Caption, Subtitle } from './Card_Styles'; 5 | 6 | const screenWidth = Dimensions.get('window').width; 7 | 8 | export default function Card({ hero, title, logo, caption, subtitle }) { 9 | return ( 10 | 11 | 12 | 13 | {title} 14 | 15 | 16 | 17 | 18 | {caption} 19 | {subtitle} 20 | 21 | 22 | 23 | ); 24 | } 25 | 26 | Card.propTypes = { 27 | hero: PropTypes.shape({ 28 | url: PropTypes.string, 29 | }).isRequired, 30 | title: PropTypes.string.isRequired, 31 | logo: PropTypes.PropTypes.shape({ 32 | url: PropTypes.string, 33 | }).isRequired, 34 | caption: PropTypes.string.isRequired, 35 | subtitle: PropTypes.string.isRequired, 36 | }; 37 | -------------------------------------------------------------------------------- /src/components/Card/Card_Styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native'; 2 | 3 | export const Container = styled.View` 4 | background: white; 5 | width: ${({ screenWidth }) => screenWidth - 100}; 6 | height: 280px; 7 | `; 8 | 9 | export const Cover = styled.View` 10 | width: 100%; 11 | height: 200px; 12 | overflow: hidden; 13 | border-top-left-radius: 14px; 14 | border-top-right-radius: 14px; 15 | `; 16 | 17 | export const Image = styled.Image` 18 | width: 100%; 19 | height: 100%; 20 | background: #3c4560; 21 | position: absolute; 22 | top: 0; 23 | left: 0; 24 | `; 25 | 26 | export const Title = styled.Text` 27 | color: white; 28 | font-size: 24px; 29 | font-weight: bold; 30 | margin: 20px 0 0 20px; 31 | width: 170px; 32 | `; 33 | 34 | export const Content = styled.View` 35 | padding: 0 0 0 20px; 36 | flex-direction: row; 37 | align-items: center; 38 | height: 80px; 39 | `; 40 | 41 | export const Logo = styled.Image` 42 | width: 44px; 43 | height: 44px; 44 | `; 45 | 46 | export const Wrapper = styled.View` 47 | margin-left: 10px; 48 | `; 49 | 50 | export const Caption = styled.Text` 51 | color: #3c4560; 52 | font-size: 20px; 53 | font-weight: 600; 54 | `; 55 | 56 | export const Subtitle = styled.Text` 57 | color: #b8bece; 58 | font-weight: 600; 59 | font-size: 15px; 60 | text-transform: uppercase; 61 | margin-top: 2px; 62 | `; 63 | -------------------------------------------------------------------------------- /src/components/Card/index.js: -------------------------------------------------------------------------------- 1 | import Card from './Card'; 2 | 3 | export default Card; 4 | -------------------------------------------------------------------------------- /src/components/Course/Course.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Dimensions } from 'react-native'; 4 | import { Container, Cover, Hero, Logo, Title, Subtitle, Content, Avatar, Caption, Author } from './Course_Styles'; 5 | 6 | const screenWidth = Dimensions.get('window').width; 7 | 8 | export default function Course({ hero, logo, subtitle, title, avatar, caption, author }) { 9 | return ( 10 | 11 | 12 | 13 | 14 | {subtitle} 15 | {title} 16 | 17 | 18 | 19 | {caption} 20 | Taught by: {author} 21 | 22 | 23 | ); 24 | } 25 | 26 | Course.propTypes = { 27 | hero: PropTypes.node.isRequired, 28 | logo: PropTypes.node.isRequired, 29 | subtitle: PropTypes.string.isRequired, 30 | title: PropTypes.string.isRequired, 31 | avatar: PropTypes.node.isRequired, 32 | caption: PropTypes.string.isRequired, 33 | author: PropTypes.string.isRequired, 34 | }; 35 | -------------------------------------------------------------------------------- /src/components/Course/Course_Styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native'; 2 | 3 | export const Container = styled.View` 4 | width: ${({ screenWidth }) => screenWidth - 40}; 5 | height: 335px; 6 | border-radius: 14px; 7 | background: white; 8 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); 9 | elevation: 10; 10 | margin: 15px 20px; 11 | `; 12 | 13 | export const Cover = styled.View` 14 | height: 260px; 15 | border-top-right-radius: 14px; 16 | border-top-left-radius: 14px; 17 | overflow: hidden; 18 | justify-content: flex-end; 19 | `; 20 | 21 | export const Hero = styled.Image` 22 | position: absolute; 23 | width: 100%; 24 | height: 100%; 25 | background: #3c4560; 26 | `; 27 | 28 | export const Logo = styled.Image` 29 | width: 48px; 30 | height: 48px; 31 | position: absolute; 32 | top: 90px; 33 | left: 50%; 34 | margin-left: -24px; 35 | `; 36 | 37 | export const Title = styled.Text` 38 | font-size: 24px; 39 | color: white; 40 | font-weight: 600; 41 | margin-top: 4px; 42 | width: 170px; 43 | margin-bottom: 20px; 44 | margin-left: 20px; 45 | `; 46 | 47 | export const Subtitle = styled.Text` 48 | font-size: 15px; 49 | color: rgba(255, 255, 255, 0.8); 50 | font-weight: 500; 51 | text-transform: uppercase; 52 | margin-left: 20px; 53 | `; 54 | 55 | export const Content = styled.View` 56 | padding-left: 62px; 57 | justify-content: center; 58 | height: 75px; 59 | `; 60 | 61 | export const Avatar = styled.Image` 62 | width: 32px; 63 | height: 32px; 64 | position: absolute; 65 | top: 20px; 66 | left: 20px; 67 | border-radius: 16px; 68 | `; 69 | 70 | export const Caption = styled.Text` 71 | font-size: 14px; 72 | color: #3c4560; 73 | font-weight: 500; 74 | max-width: 260px; 75 | `; 76 | 77 | export const Author = styled.Text` 78 | font-size: 13px; 79 | color: #b8bece; 80 | font-weight: 500; 81 | margin-top: 4px; 82 | `; 83 | -------------------------------------------------------------------------------- /src/components/Course/index.js: -------------------------------------------------------------------------------- 1 | import Course from './Course'; 2 | 3 | export default Course; 4 | -------------------------------------------------------------------------------- /src/components/Logo/Logo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Container, Image, Text } from './Logo_Styles'; 4 | 5 | export default function Logo({ image, text }) { 6 | return ( 7 | 8 | 9 | {text} 10 | 11 | ); 12 | } 13 | 14 | Logo.propTypes = { 15 | image: PropTypes.node.isRequired, 16 | text: PropTypes.string.isRequired, 17 | }; 18 | -------------------------------------------------------------------------------- /src/components/Logo/Logo_Styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native'; 2 | 3 | export const Container = styled.View` 4 | flex-direction: row; 5 | background: white; 6 | height: 60px; 7 | padding: 12px 16px; 8 | border-radius: 10px; 9 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); 10 | elevation: 8; 11 | align-items: center; 12 | justify-content: center; 13 | margin: 12px 8px; 14 | `; 15 | 16 | export const Image = styled.Image` 17 | width: 36px; 18 | height: 36px; 19 | `; 20 | 21 | export const Text = styled.Text` 22 | font-weight: 600; 23 | font-size: 17px; 24 | margin-left: 8px; 25 | `; 26 | -------------------------------------------------------------------------------- /src/components/Logo/index.js: -------------------------------------------------------------------------------- 1 | import Logo from './Logo'; 2 | 3 | export default Logo; 4 | -------------------------------------------------------------------------------- /src/components/Menu/Menu.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useCallback } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { connect } from 'react-redux'; 4 | import { Animated, Dimensions } from 'react-native'; 5 | import * as Icon from '@expo/vector-icons'; 6 | import { AnimatedContainer, Cover, Image, Title, Subtitle, CloseButton, CloseView, Content } from './Menu_Styles'; 7 | 8 | import MenuOption from '../MenuOption'; 9 | import items from '~/data/items'; 10 | 11 | const screenHeight = Dimensions.get('screen').height; 12 | 13 | function Menu({ action, closeMenu }) { 14 | const [top] = useState(new Animated.Value(screenHeight)); 15 | 16 | const toggleMenu = useCallback(() => { 17 | if (action === 'openMenu') { 18 | Animated.spring(top, { 19 | toValue: 68, 20 | bounciness: 6, 21 | useNativeDriver: true, 22 | }).start(); 23 | } 24 | 25 | if (action === 'closeMenu') { 26 | Animated.spring(top, { 27 | toValue: screenHeight, 28 | useNativeDriver: true, 29 | }).start(); 30 | } 31 | }, [action, top]); 32 | 33 | useEffect(() => { 34 | toggleMenu(); 35 | }, [action, toggleMenu]); 36 | 37 | return ( 38 | 39 | 40 | 41 | Luke Morales 42 | Your Next React Native Developer 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | {items.map(item => ( 51 | 52 | ))} 53 | 54 | 55 | ); 56 | } 57 | 58 | const mapStateToProps = state => ({ action: state.action }); 59 | 60 | const mapDispatchToProps = dispatch => ({ 61 | closeMenu: () => 62 | dispatch({ 63 | type: 'CLOSE_MENU', 64 | }), 65 | }); 66 | 67 | Menu.propTypes = { 68 | action: PropTypes.string.isRequired, 69 | closeMenu: PropTypes.func.isRequired, 70 | }; 71 | 72 | export default connect( 73 | mapStateToProps, 74 | mapDispatchToProps 75 | )(Menu); 76 | -------------------------------------------------------------------------------- /src/components/Menu/Menu_Styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native'; 2 | import { RectButton } from 'react-native-gesture-handler'; 3 | import { Animated } from 'react-native'; 4 | 5 | export const AnimatedContainer = styled(Animated.View)` 6 | position: absolute; 7 | background: white; 8 | width: 100%; 9 | height: 100%; 10 | z-index: 100; 11 | border-radius: 10px; 12 | overflow: hidden; 13 | `; 14 | 15 | export const Cover = styled.View` 16 | height: 142px; 17 | background: black; 18 | align-items: center; 19 | justify-content: center; 20 | `; 21 | 22 | export const Image = styled.Image` 23 | position: absolute; 24 | width: 100%; 25 | height: 100%; 26 | `; 27 | 28 | export const Title = styled.Text` 29 | color: white; 30 | font-size: 24px; 31 | font-weight: 600; 32 | `; 33 | 34 | export const Subtitle = styled.Text` 35 | font-size: 13; 36 | color: rgba(255, 255, 255, 0.5); 37 | margin-top: 8px; 38 | `; 39 | export const CloseButton = styled(RectButton)` 40 | position: absolute; 41 | top: 115px; 42 | left: 50%; 43 | margin-left: -22px; 44 | z-index: 1; 45 | border-radius: 26px; 46 | background-color: white; 47 | elevation: 20; 48 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); 49 | `; 50 | 51 | export const CloseView = styled.View` 52 | width: 52px; 53 | height: 52px; 54 | justify-content: center; 55 | align-items: center; 56 | `; 57 | 58 | export const Content = styled.View` 59 | height: ${({ screenHeight }) => screenHeight}; 60 | background: #f0f3f5; 61 | padding: 50px; 62 | `; 63 | -------------------------------------------------------------------------------- /src/components/Menu/index.js: -------------------------------------------------------------------------------- 1 | import Menu from './Menu'; 2 | 3 | export default Menu; 4 | -------------------------------------------------------------------------------- /src/components/MenuOption/MenuOption.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import * as Icon from '@expo/vector-icons'; 4 | import { Container, IconView, Content, Title, Text } from './MenuOption_Styles'; 5 | 6 | export default function MenuOption({ icon, title, text }) { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | {title} 14 | {text} 15 | 16 | 17 | ); 18 | } 19 | 20 | MenuOption.propTypes = { 21 | icon: PropTypes.string.isRequired, 22 | title: PropTypes.string.isRequired, 23 | text: PropTypes.string.isRequired, 24 | }; 25 | -------------------------------------------------------------------------------- /src/components/MenuOption/MenuOption_Styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native'; 2 | 3 | export const Container = styled.View` 4 | flex-direction: row; 5 | margin: 15px 0 15px 70px; 6 | `; 7 | 8 | export const IconView = styled.View` 9 | width: 32; 10 | height: 32; 11 | justify-content: center; 12 | align-items: center; 13 | `; 14 | 15 | export const Content = styled.View` 16 | padding-left: 20; 17 | `; 18 | 19 | export const Title = styled.Text` 20 | color: #3c4560; 21 | font-size: 24; 22 | font-weight: 600; 23 | `; 24 | 25 | export const Text = styled.Text` 26 | color: #3c4560; 27 | font-weight: 600; 28 | opacity: 0.6; 29 | margin-top: 5px; 30 | `; 31 | -------------------------------------------------------------------------------- /src/components/MenuOption/index.js: -------------------------------------------------------------------------------- 1 | import MenuOption from './MenuOption'; 2 | 3 | export default MenuOption; 4 | -------------------------------------------------------------------------------- /src/components/Project/Project.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Animated, Dimensions, TouchableWithoutFeedback } from 'react-native'; 4 | import * as Icon from '@expo/vector-icons'; 5 | import { connect } from 'react-redux'; 6 | import { 7 | AnimatedGradient, 8 | AnimatedContainer, 9 | Cover, 10 | Image, 11 | AnimatedTitle, 12 | Author, 13 | AnimatedText, 14 | CloseButton, 15 | AnimatedCloseView, 16 | } from './Project_Styles'; 17 | 18 | const mapStateToProps = state => { 19 | return { 20 | action: state.action, 21 | }; 22 | }; 23 | 24 | const mapDispatchToProps = dispatch => { 25 | return { 26 | openCard: () => 27 | dispatch({ 28 | type: 'OPEN_CARD', 29 | }), 30 | closeCard: () => 31 | dispatch({ 32 | type: 'CLOSE_CARD', 33 | }), 34 | }; 35 | }; 36 | 37 | const screenWidth = Dimensions.get('window').width; 38 | const screenHeight = Dimensions.get('screen').height; 39 | const tabBarHeight = 68; 40 | 41 | function Project({ image, title, author, text, canOpen, openCard: dispatchOpenCard, closeCard: dispatchCloseCard }) { 42 | const [cardWidth] = useState(new Animated.Value(315)); 43 | const [cardHeight] = useState(new Animated.Value(460)); 44 | 45 | function openCard() { 46 | if (!canOpen) { 47 | return; 48 | } 49 | Animated.parallel([ 50 | Animated.spring(cardWidth, { 51 | toValue: screenWidth, 52 | }), 53 | Animated.spring(cardHeight, { 54 | toValue: screenHeight - tabBarHeight, 55 | }), 56 | ]).start(); 57 | dispatchOpenCard(); 58 | } 59 | 60 | function closeCard() { 61 | Animated.parallel([ 62 | Animated.spring(cardWidth, { 63 | toValue: 315, 64 | bounciness: 4, 65 | }), 66 | Animated.spring(cardHeight, { 67 | toValue: 460, 68 | bounciness: 6, 69 | }), 70 | ]).start(); 71 | dispatchCloseCard(); 72 | } 73 | 74 | return ( 75 | openCard()}> 76 | 87 | 88 | 89 | 102 | {title} 103 | 104 | by {author} 105 | 106 | 119 | 128 | {text} 129 | 130 | 139 | closeCard()}> 140 | 141 | 142 | 143 | 144 | 145 | ); 146 | } 147 | 148 | export default connect( 149 | mapStateToProps, 150 | mapDispatchToProps 151 | )(Project); 152 | 153 | Project.propTypes = { 154 | image: PropTypes.node.isRequired, 155 | title: PropTypes.string.isRequired, 156 | author: PropTypes.string.isRequired, 157 | text: PropTypes.string.isRequired, 158 | canOpen: PropTypes.bool, 159 | openCard: PropTypes.func.isRequired, 160 | closeCard: PropTypes.func.isRequired, 161 | }; 162 | 163 | Project.defaultProps = { 164 | canOpen: false, 165 | }; 166 | -------------------------------------------------------------------------------- /src/components/Project/Project_Styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native'; 2 | import { Animated } from 'react-native'; 3 | import { LinearGradient } from 'expo-linear-gradient'; 4 | 5 | export const AnimatedGradient = Animated.createAnimatedComponent(LinearGradient); 6 | 7 | export const AnimatedContainer = styled(Animated.View)` 8 | border-radius: 14px; 9 | background-color: white; 10 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); 11 | elevation: 15; 12 | `; 13 | 14 | export const Cover = styled.View` 15 | height: 290px; 16 | border-top-left-radius: 14px; 17 | border-top-right-radius: 14px; 18 | overflow: hidden; 19 | `; 20 | 21 | export const Image = styled.Image` 22 | width: 100%; 23 | height: 290px; 24 | `; 25 | 26 | export const AnimatedTitle = styled(Animated.Text)` 27 | position: absolute; 28 | top: 20px; 29 | left: 20px; 30 | font-size: 24px; 31 | font-weight: bold; 32 | color: white; 33 | width: 300px; 34 | `; 35 | 36 | export const Author = styled.Text` 37 | position: absolute; 38 | bottom: 20px; 39 | left: 20px; 40 | color: rgba(255, 255, 255, 0.8); 41 | font-size: 15px; 42 | font-weight: 600; 43 | text-transform: uppercase; 44 | `; 45 | 46 | export const AnimatedText = styled(Animated.Text)` 47 | font-size: 17px; 48 | margin: 20px; 49 | line-height: 24px; 50 | color: #3c4560; 51 | `; 52 | 53 | export const CloseButton = styled.TouchableOpacity` 54 | background: white; 55 | width: 48px; 56 | height: 48px; 57 | justify-content: center; 58 | align-items: center; 59 | `; 60 | 61 | export const AnimatedCloseView = styled(Animated.View)` 62 | border-radius: 24px; 63 | overflow: hidden; 64 | elevation: 20; 65 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); 66 | position: absolute; 67 | top: 40px; 68 | right: 20px; 69 | `; 70 | -------------------------------------------------------------------------------- /src/components/Project/index.js: -------------------------------------------------------------------------------- 1 | import Project from './Project'; 2 | 3 | export default Project; 4 | -------------------------------------------------------------------------------- /src/data/courses.js: -------------------------------------------------------------------------------- 1 | const courses = [ 2 | { 3 | title: 'Prototype in InVision Studio', 4 | subtitle: '10 sections', 5 | image: require('~/assets/background13.jpg'), 6 | logo: require('~/assets/logo-studio.png'), 7 | author: 'Meng To', 8 | avatar: require('~/assets/avatar.jpg'), 9 | caption: 'Design an interactive prototype', 10 | }, 11 | { 12 | title: 'React for Designers', 13 | subtitle: '12 sections', 14 | image: require('~/assets/background11.jpg'), 15 | logo: require('~/assets/logo-react.png'), 16 | author: 'Meng To', 17 | avatar: require('~/assets/avatar.jpg'), 18 | caption: 'Learn to design and code a React site', 19 | }, 20 | { 21 | title: 'Design and Code with Framer X', 22 | subtitle: '10 sections', 23 | image: require('~/assets/background14.jpg'), 24 | logo: require('~/assets/logo-framerx.png'), 25 | author: 'Meng To', 26 | avatar: require('~/assets/avatar.jpg'), 27 | caption: 'Create powerful design and code components for your app', 28 | }, 29 | { 30 | title: 'Design System in Figma', 31 | subtitle: '10 sections', 32 | image: require('~/assets/background6.jpg'), 33 | logo: require('~/assets/logo-figma.png'), 34 | author: 'Meng To', 35 | avatar: require('~/assets/avatar.jpg'), 36 | caption: 'Complete guide to designing a site using a collaborative design tool', 37 | }, 38 | ]; 39 | 40 | export default courses; 41 | -------------------------------------------------------------------------------- /src/data/items.js: -------------------------------------------------------------------------------- 1 | const items = [ 2 | { 3 | icon: 'ios-settings', 4 | title: 'Account', 5 | text: 'settings', 6 | }, 7 | { 8 | icon: 'ios-card', 9 | title: 'Billing', 10 | text: 'payments', 11 | }, 12 | { 13 | icon: 'ios-compass', 14 | title: 'Learn React', 15 | text: 'start course', 16 | }, 17 | { 18 | icon: 'ios-exit', 19 | title: 'Log out', 20 | text: 'see you soon!', 21 | }, 22 | ]; 23 | 24 | export default items; 25 | -------------------------------------------------------------------------------- /src/data/logos.js: -------------------------------------------------------------------------------- 1 | const logos = [ 2 | { 3 | image: require('~/assets/logo-framerx.png'), 4 | text: 'Framer X', 5 | }, 6 | { 7 | image: require('~/assets/logo-figma.png'), 8 | text: 'Figma', 9 | }, 10 | { 11 | image: require('~/assets/logo-studio.png'), 12 | text: 'Studio', 13 | }, 14 | { 15 | image: require('~/assets/logo-react.png'), 16 | text: 'React', 17 | }, 18 | { 19 | image: require('~/assets/logo-swift.png'), 20 | text: 'Swift', 21 | }, 22 | { 23 | image: require('~/assets/logo-sketch.png'), 24 | text: 'Sketch', 25 | }, 26 | ]; 27 | 28 | export default logos; 29 | -------------------------------------------------------------------------------- /src/data/projects.js: -------------------------------------------------------------------------------- 1 | const projects = [ 2 | { 3 | title: 'Price Tag', 4 | image: require('~/assets/background5.jpg'), 5 | author: 'Liu Yi', 6 | text: 7 | 'Thanks to Design+Code, I improved my design skill and learned to do animations for my app Price Tag, a top news app in China.', 8 | }, 9 | { 10 | title: 'The DM App - Ananoumous Chat', 11 | image: require('~/assets/background6.jpg'), 12 | author: 'Chad Goodman', 13 | text: 14 | 'Design+Code was the first resource I used when breaking into software. I went from knowing nothing about design or code to building a production ready app from scratch. ', 15 | }, 16 | { 17 | title: 'Nikhiljay', 18 | image: require('~/assets/background7.jpg'), 19 | author: "Nikhil D'Souza", 20 | text: 21 | "Recently finished the React course by @Mengto, and I 10/10 would recommend. I already rewrote my personal website in @reactjs and I'm very excited with it.", 22 | }, 23 | ]; 24 | 25 | export default projects; 26 | -------------------------------------------------------------------------------- /src/navigator/AppNavigator.js: -------------------------------------------------------------------------------- 1 | /* eslint react/prop-types: 0 */ 2 | import React from 'react'; 3 | import { createBottomTabNavigator, createStackNavigator, createAppContainer } from 'react-navigation'; 4 | import * as Icon from '@expo/vector-icons'; 5 | import transitionConfig from './transitionConfig'; 6 | 7 | import HomeScreen from '~/screens/HomeScreen'; 8 | import SectionScreen from '~/screens/SectionScreen'; 9 | import ProjectsScreen from '~/screens/ProjectsScreen'; 10 | 11 | const activeColor = '#4775f2'; 12 | const inactiveColor = '#b8bece'; 13 | 14 | const HomeStack = createStackNavigator( 15 | { 16 | Home: HomeScreen, 17 | Section: SectionScreen, 18 | }, 19 | { 20 | mode: 'modal', 21 | transitionConfig, 22 | } 23 | ); 24 | 25 | HomeStack.navigationOptions = ({ navigation }) => { 26 | let tabBarVisible = true; 27 | const { routeName } = navigation.state.routes[navigation.state.index]; 28 | 29 | if (routeName === 'Section') { 30 | tabBarVisible = false; 31 | } 32 | 33 | return { 34 | tabBarVisible, 35 | tabBarLabel: 'Home', 36 | tabBarIcon: ({ focused }) => ( 37 | 38 | ), 39 | }; 40 | }; 41 | 42 | const ProjectsStack = createStackNavigator({ 43 | Projects: ProjectsScreen, 44 | }); 45 | 46 | ProjectsStack.navigationOptions = { 47 | tabBarLabel: 'Projects', 48 | tabBarIcon: ({ focused }) => ( 49 | 50 | ), 51 | }; 52 | 53 | const TabNavigator = createBottomTabNavigator( 54 | { 55 | HomeStack, 56 | ProjectsStack, 57 | }, 58 | { 59 | mode: 'modal', 60 | tabBarOptions: { 61 | style: { 62 | paddingBottom: 10, 63 | paddingTop: 8, 64 | height: 68, 65 | elevation: 12, 66 | }, 67 | }, 68 | } 69 | ); 70 | 71 | export default createAppContainer(TabNavigator); 72 | -------------------------------------------------------------------------------- /src/navigator/transitionConfig.js: -------------------------------------------------------------------------------- 1 | import { Animated, Easing } from 'react-native'; 2 | 3 | const transitionConfig = () => { 4 | return { 5 | transitionSpec: { 6 | duration: 750, 7 | easing: Easing.out(Easing.poly(4)), 8 | timing: Animated.timing, 9 | useNativeDriver: true, 10 | }, 11 | screenInterpolator: sceneProps => { 12 | const { layout, position, scene } = sceneProps; 13 | 14 | const thisSceneIndex = scene.index; 15 | const width = layout.initWidth; 16 | 17 | const translateX = position.interpolate({ 18 | inputRange: [thisSceneIndex - 1, thisSceneIndex], 19 | outputRange: [width, 0], 20 | }); 21 | 22 | return { transform: [{ translateX }] }; 23 | }, 24 | }; 25 | }; 26 | 27 | export default transitionConfig; 28 | -------------------------------------------------------------------------------- /src/screens/HomeScreen/HomeScreen.js: -------------------------------------------------------------------------------- 1 | /* eslint react/forbid-prop-types: 0 */ 2 | import React, { useState, useEffect, useCallback } from 'react'; 3 | import PropTypes from 'prop-types'; 4 | import { connect } from 'react-redux'; 5 | import { ScrollView, SafeAreaView, TouchableOpacity, Animated, Easing, StatusBar } from 'react-native'; 6 | import * as Icon from '@expo/vector-icons'; 7 | import { Query } from 'react-apollo'; 8 | import gql from 'graphql-tag'; 9 | import { 10 | Message, 11 | RootView, 12 | AnimatedContainer, 13 | TitleBar, 14 | Avatar, 15 | Title, 16 | Name, 17 | Subtitle, 18 | CardButton, 19 | } from './HomeScreen_Styles'; 20 | 21 | import courses from '~/data/courses'; 22 | import logos from '~/data/logos'; 23 | 24 | import Card from '~/components/Card'; 25 | import Logo from '~/components/Logo'; 26 | import Course from '~/components/Course'; 27 | import Menu from '~/components/Menu'; 28 | 29 | const CardsQuery = gql` 30 | { 31 | cardsCollection { 32 | items { 33 | title 34 | subtitle 35 | caption 36 | image { 37 | url 38 | } 39 | logo { 40 | url 41 | } 42 | content 43 | } 44 | } 45 | } 46 | `; 47 | 48 | function HomeScreen({ action, openMenu, navigation }) { 49 | const [scale] = useState(new Animated.Value(1)); 50 | const [opacity] = useState(new Animated.Value(1)); 51 | 52 | useEffect(() => { 53 | StatusBar.setBarStyle('dark-content', true); 54 | }, []); 55 | 56 | const toggleMenu = useCallback(() => { 57 | if (action === 'openMenu') { 58 | Animated.spring(opacity, { 59 | toValue: 0.5, 60 | useNativeDriver: true, 61 | }).start(); 62 | Animated.timing(scale, { 63 | toValue: 0.9, 64 | duration: 300, 65 | easing: Easing.in(), 66 | useNativeDriver: true, 67 | }).start(); 68 | 69 | StatusBar.setBarStyle('light-content', true); 70 | } 71 | 72 | if (action === 'closeMenu') { 73 | Animated.spring(opacity, { 74 | toValue: 1, 75 | useNativeDriver: true, 76 | }).start(); 77 | Animated.timing(scale, { 78 | toValue: 1, 79 | duration: 300, 80 | easing: Easing.in(), 81 | useNativeDriver: true, 82 | }).start(); 83 | StatusBar.setBarStyle('dark-content', true); 84 | } 85 | }, [action, opacity, scale]); 86 | 87 | useEffect(() => { 88 | toggleMenu(); 89 | }, [toggleMenu]); 90 | 91 | return ( 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | Welcome Back, 102 | Luke 103 | 109 | 110 | 115 | {logos.map(logo => ( 116 | 117 | ))} 118 | 119 | Continue Learning 120 | 125 | 126 | {({ loading, error, data }) => { 127 | if (loading) return Loading...; 128 | if (error) return Could not fetch data =/; 129 | 130 | return ( 131 | <> 132 | {data.cardsCollection.items.map(card => ( 133 | { 136 | navigation.push('Section', { 137 | section: card, 138 | }); 139 | }} 140 | > 141 | 148 | 149 | ))} 150 | 151 | ); 152 | }} 153 | 154 | 155 | Popular Courses 156 | {courses.map(course => ( 157 | 167 | ))} 168 | 169 | 170 | 171 | 172 | ); 173 | } 174 | 175 | HomeScreen.navigationOptions = { 176 | header: null, 177 | }; 178 | 179 | const mapStateToProps = state => ({ action: state.action }); 180 | 181 | const mapDispatchToProps = dispatch => ({ 182 | openMenu: () => dispatch({ type: 'OPEN_MENU' }), 183 | }); 184 | 185 | HomeScreen.propTypes = { 186 | action: PropTypes.string.isRequired, 187 | openMenu: PropTypes.func.isRequired, 188 | navigation: PropTypes.object.isRequired, 189 | }; 190 | 191 | export default connect( 192 | mapStateToProps, 193 | mapDispatchToProps 194 | )(HomeScreen); 195 | -------------------------------------------------------------------------------- /src/screens/HomeScreen/HomeScreen_Styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Animated } from 'react-native'; 3 | 4 | export const Message = styled.Text``; 5 | 6 | export const RootView = styled.View` 7 | background: black; 8 | flex: 1; 9 | `; 10 | 11 | export const AnimatedContainer = styled(Animated.View)` 12 | flex: 1; 13 | background: #f0f3f5; 14 | border-top-left-radius: 10px; 15 | border-top-right-radius: 10px; 16 | overflow: hidden; 17 | `; 18 | 19 | export const TitleBar = styled.View` 20 | width: 100%; 21 | margin: 50px 0 0; 22 | padding: 0 0 0 80px; 23 | `; 24 | 25 | export const Avatar = styled.Image` 26 | width: 44px; 27 | height: 44px; 28 | background: #3c4560; 29 | border-radius: 22px; 30 | margin: 0 0 0 20px; 31 | `; 32 | 33 | export const Title = styled.Text` 34 | font-size: 16px; 35 | color: #b8bece; 36 | font-weight: 500; 37 | `; 38 | 39 | export const Name = styled.Text` 40 | font-size: 20px; 41 | color: #3c4560; 42 | font-weight: bold; 43 | `; 44 | 45 | export const Subtitle = styled.Text` 46 | color: #b8bece; 47 | font-weight: 600; 48 | font-size: 15px; 49 | margin: 20px 0 0 20px; 50 | text-transform: uppercase; 51 | `; 52 | 53 | export const CardButton = styled.TouchableOpacity` 54 | border-radius: 14px; 55 | overflow: hidden; 56 | margin: 0 0 0 20px; 57 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.9); 58 | elevation: 15; 59 | background: white; 60 | `; 61 | -------------------------------------------------------------------------------- /src/screens/HomeScreen/index.js: -------------------------------------------------------------------------------- 1 | import HomeScreen from './HomeScreen'; 2 | 3 | export default HomeScreen; 4 | -------------------------------------------------------------------------------- /src/screens/ProjectsScreen/ProjectsScreen.js: -------------------------------------------------------------------------------- 1 | /* eslint react/forbid-prop-types: 0 */ 2 | import React, { Component } from 'react'; 3 | import PropTypes from 'prop-types'; 4 | import { PanResponder, Animated } from 'react-native'; 5 | import { connect } from 'react-redux'; 6 | import Project from '~/components/Project'; 7 | import projects from '~/data/projects'; 8 | import { AnimatedMask, Container, AnimatedStackCard, AnimatedThirdStackCard } from './ProjectsScreen_Styles'; 9 | 10 | class ProjectsScreen extends Component { 11 | static navigationOptions = { 12 | header: null, 13 | }; 14 | 15 | static propTypes = { 16 | action: PropTypes.string.isRequired, 17 | }; 18 | 19 | state = { 20 | pan: new Animated.ValueXY(), 21 | scale: new Animated.Value(0.9), 22 | translateY: new Animated.Value(44), 23 | thirdScale: new Animated.Value(0.8), 24 | thirdTranslateY: new Animated.Value(-50), 25 | opacity: new Animated.Value(0), 26 | index: 0, 27 | }; 28 | 29 | componentWillMount() { 30 | const { pan, scale, translateY, thirdScale, thirdTranslateY, opacity } = this.state; 31 | this._panResponder = PanResponder.create({ 32 | onMoveShouldSetPanResponder: (event, gestureState) => { 33 | const { action } = this.props; 34 | if (gestureState.dx === 0 && gestureState.dy === 0) { 35 | return false; 36 | } 37 | if (action === 'openCard') { 38 | return false; 39 | } 40 | return true; 41 | }, 42 | onPanResponderGrant: () => { 43 | Animated.parallel([ 44 | Animated.timing(opacity, { 45 | toValue: 1, 46 | }), 47 | Animated.spring(scale, { 48 | toValue: 1, 49 | useNativeDriver: true, 50 | }), 51 | Animated.spring(translateY, { 52 | toValue: 0, 53 | useNativeDriver: true, 54 | }), 55 | 56 | Animated.spring(thirdScale, { 57 | toValue: 0.9, 58 | useNativeDriver: true, 59 | }), 60 | Animated.spring(thirdTranslateY, { 61 | toValue: 44, 62 | useNativeDriver: true, 63 | }), 64 | ]).start(); 65 | }, 66 | onPanResponderMove: Animated.event([ 67 | null, 68 | { 69 | dx: pan.x, 70 | dy: pan.y, 71 | }, 72 | ]), 73 | onPanResponderRelease: () => { 74 | const positionY = pan.y.__getValue(); 75 | const { index } = this.state; 76 | 77 | Animated.timing(opacity, { 78 | toValue: 0, 79 | }).start(); 80 | 81 | if (positionY > 180) { 82 | Animated.timing(pan, { 83 | toValue: { x: 0, y: 800 }, 84 | useNativeDriver: true, 85 | }).start(() => { 86 | pan.setValue({ 87 | x: 0, 88 | y: 0, 89 | }); 90 | scale.setValue(0.9); 91 | translateY.setValue(44); 92 | thirdScale.setValue(0.8); 93 | thirdTranslateY.setValue(-50); 94 | this.setState({ index: this.getNextIndex(index) }); 95 | }); 96 | } else { 97 | Animated.parallel([ 98 | Animated.spring(pan, { 99 | toValue: { x: 0, y: 0 }, 100 | bounciness: 6, 101 | useNativeDriver: true, 102 | }), 103 | 104 | Animated.timing(opacity, { 105 | toValue: 0, 106 | }), 107 | Animated.spring(scale, { 108 | toValue: 0.9, 109 | useNativeDriver: true, 110 | }), 111 | Animated.spring(translateY, { 112 | toValue: 44, 113 | useNativeDriver: true, 114 | }), 115 | 116 | Animated.spring(thirdScale, { 117 | toValue: 0.8, 118 | useNativeDriver: true, 119 | }), 120 | Animated.spring(thirdTranslateY, { 121 | toValue: -50, 122 | useNativeDriver: true, 123 | }), 124 | ]).start(); 125 | } 126 | }, 127 | }); 128 | } 129 | 130 | getNextIndex = index => { 131 | const nextIndex = index + 1; 132 | 133 | if (nextIndex > projects.length - 1) { 134 | return 0; 135 | } 136 | 137 | return nextIndex; 138 | }; 139 | 140 | render() { 141 | const { pan, scale, translateY, thirdScale, thirdTranslateY, index, opacity } = this.state; 142 | return ( 143 | 144 | 149 | 153 | 160 | 161 | 162 | 168 | 169 | 170 | 176 | 177 | 178 | ); 179 | } 180 | } 181 | 182 | const mapStateToProps = state => ({ 183 | action: state.action, 184 | }); 185 | 186 | export default connect(mapStateToProps)(ProjectsScreen); 187 | -------------------------------------------------------------------------------- /src/screens/ProjectsScreen/ProjectsScreen_Styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native'; 2 | import { Animated } from 'react-native'; 3 | 4 | export const AnimatedMask = styled(Animated.View)` 5 | position: absolute; 6 | top: 0; 7 | left: 0; 8 | width: 100%; 9 | height: 100%; 10 | background: #4775f237; 11 | z-index: -5; 12 | `; 13 | 14 | export const Container = styled.View` 15 | flex: 1; 16 | justify-content: center; 17 | align-items: center; 18 | background: #f0f3f5; 19 | `; 20 | 21 | export const AnimatedStackCard = styled(Animated.View)` 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | z-index: -1; 26 | width: 100%; 27 | height: 100%; 28 | justify-content: center; 29 | align-items: center; 30 | `; 31 | 32 | export const AnimatedThirdStackCard = styled(Animated.View)` 33 | position: absolute; 34 | top: 0; 35 | left: 0; 36 | z-index: -2; 37 | width: 100%; 38 | height: 100%; 39 | justify-content: center; 40 | align-items: center; 41 | `; 42 | -------------------------------------------------------------------------------- /src/screens/ProjectsScreen/index.js: -------------------------------------------------------------------------------- 1 | import ProjectsScreen from './ProjectsScreen'; 2 | 3 | export default ProjectsScreen; 4 | -------------------------------------------------------------------------------- /src/screens/SectionScreen/SectionScreen.js: -------------------------------------------------------------------------------- 1 | /* eslint react/forbid-prop-types: 0 */ 2 | import React, { useEffect } from 'react'; 3 | import PropTypes from 'prop-types'; 4 | import { StatusBar, ScrollView } from 'react-native'; 5 | import * as Icon from '@expo/vector-icons'; 6 | import Markdown from 'react-native-showdown'; 7 | 8 | import { 9 | htmlStyles, 10 | Container, 11 | Cover, 12 | Hero, 13 | Wrapper, 14 | Logo, 15 | Subtitle, 16 | Title, 17 | Caption, 18 | CloseButton, 19 | Content, 20 | } from './SectionScreen_Styles'; 21 | 22 | export default function SectionScreen({ navigation }) { 23 | const section = navigation.getParam('section'); 24 | useEffect(() => { 25 | StatusBar.setBarStyle('light-content', true); 26 | return () => { 27 | StatusBar.setBarStyle('dark-content', true); 28 | }; 29 | }, []); 30 | 31 | return ( 32 | 33 | 34 | 35 | 36 | 37 | 38 | {section.subtitle} 39 | 40 | {section.title} 41 | {section.caption} 42 | 43 | { 45 | navigation.goBack(); 46 | }} 47 | > 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | ); 56 | } 57 | 58 | SectionScreen.navigationOptions = { 59 | header: null, 60 | }; 61 | 62 | SectionScreen.propTypes = { 63 | navigation: PropTypes.object.isRequired, 64 | }; 65 | -------------------------------------------------------------------------------- /src/screens/SectionScreen/SectionScreen_Styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native'; 2 | import { RectButton } from 'react-native-gesture-handler'; 3 | 4 | export const Container = styled.View` 5 | flex: 1; 6 | `; 7 | 8 | export const Cover = styled.View` 9 | height: 375px; 10 | `; 11 | 12 | export const Hero = styled.Image` 13 | width: 100%; 14 | height: 100%; 15 | position: absolute; 16 | background: #212c4f; 17 | `; 18 | 19 | export const Wrapper = styled.View` 20 | flex-direction: row; 21 | align-items: center; 22 | position: absolute; 23 | top: 48px; 24 | left: 20px; 25 | `; 26 | 27 | export const Logo = styled.Image` 28 | width: 24px; 29 | height: 24px; 30 | `; 31 | 32 | export const Subtitle = styled.Text` 33 | font-size: 15px; 34 | color: rgba(255, 255, 255, 0.8); 35 | font-weight: 600; 36 | margin-left: 6px; 37 | text-transform: uppercase; 38 | `; 39 | 40 | export const Title = styled.Text` 41 | font-size: 24px; 42 | color: white; 43 | font-weight: bold; 44 | width: 170px; 45 | position: absolute; 46 | top: 78px; 47 | left: 20px; 48 | `; 49 | 50 | export const Caption = styled.Text` 51 | color: white; 52 | font-size: 17px; 53 | position: absolute; 54 | left: 20px; 55 | bottom: 20px; 56 | width: 300px; 57 | `; 58 | 59 | export const CloseButton = styled(RectButton)` 60 | background: white; 61 | width: 48px; 62 | height: 48px; 63 | border-radius: 24px; 64 | elevation: 15; 65 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); 66 | justify-content: center; 67 | align-items: center; 68 | position: absolute; 69 | top: 40px; 70 | right: 20px; 71 | `; 72 | 73 | export const Content = styled.View` 74 | height: 1000px; 75 | padding: 12px; 76 | `; 77 | 78 | export const htmlStyles = ` 79 | * { 80 | font-family: -apple-system; 81 | margin: 0; 82 | padding: 0; 83 | font-size: 17px; 84 | font-weight: normal; 85 | color: #3c4560; 86 | line-height: 24px; 87 | } 88 | 89 | h2 { 90 | font-size: 20px; 91 | text-transform: uppercase; 92 | color: #b8bece; 93 | font-weight: 600; 94 | margin-top: 50px; 95 | } 96 | 97 | p { 98 | margin-top: 20px; 99 | } 100 | 101 | a { 102 | color: #4775f2; 103 | font-weight: 600; 104 | text-decoration: none; 105 | } 106 | 107 | img { 108 | width: 100%; 109 | margin-top: 20px; 110 | border-radius: 10px; 111 | } 112 | 113 | strong { 114 | font-weight: 700; 115 | } 116 | 117 | pre { 118 | padding: 20px; 119 | background: #212C4F; 120 | overflow: hidden; 121 | word-wrap: break-word; 122 | border-radius: 10px; 123 | margin-top: 20px; 124 | } 125 | 126 | code { 127 | color: white; 128 | } 129 | `; 130 | -------------------------------------------------------------------------------- /src/screens/SectionScreen/index.js: -------------------------------------------------------------------------------- 1 | import SectionScreen from './SectionScreen'; 2 | 3 | export default SectionScreen; 4 | -------------------------------------------------------------------------------- /src/services/client.js: -------------------------------------------------------------------------------- 1 | import ApolloClient from 'apollo-boost'; 2 | 3 | const client = new ApolloClient({ 4 | uri: 'https://graphql.contentful.com/content/v1/spaces/ldcl3ayg0mhx/', 5 | credentials: 'same-origin', 6 | headers: { 7 | Authorization: `Bearer 93f3808c25c1f5bdb95476ca8576c6eaa12b5587efb956efb242ceead7cb3840`, 8 | }, 9 | }); 10 | 11 | export default client; 12 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux'; 2 | 3 | const INITIAL_STATE = { 4 | action: '', 5 | }; 6 | 7 | const reducer = (state = INITIAL_STATE, action) => { 8 | switch (action.type) { 9 | case 'OPEN_MENU': 10 | return { action: 'openMenu' }; 11 | case 'CLOSE_MENU': 12 | return { action: 'closeMenu' }; 13 | case 'OPEN_CARD': 14 | return { action: 'openCard' }; 15 | case 'CLOSE_CARD': 16 | return { action: 'closeCard' }; 17 | default: 18 | return state; 19 | } 20 | }; 21 | 22 | const store = createStore(reducer); 23 | 24 | export default store; 25 | --------------------------------------------------------------------------------