├── .nvmrc ├── src ├── components │ ├── Question │ │ ├── index.js │ │ ├── Question.style.js │ │ └── Question.js │ ├── Page │ │ ├── index.js │ │ ├── Page.js │ │ └── Page.style.js │ ├── Step │ │ ├── index.js │ │ ├── Step.js │ │ └── Step.style.js │ ├── Button │ │ ├── index.js │ │ ├── Button.js │ │ └── Button.style.js │ ├── Heading │ │ ├── index.js │ │ ├── Heading.js │ │ └── Heading.style.js │ ├── Slider │ │ ├── index.js │ │ ├── Slider.js │ │ └── Slider.style.js │ ├── MediaCard │ │ ├── index.js │ │ ├── MediaCard.js │ │ └── MediaCard.style.js │ ├── Paragraph │ │ ├── index.js │ │ ├── Paragraph.js │ │ └── Paragraph.style.js │ └── Chart │ │ ├── index.js │ │ ├── Chart.style.js │ │ └── Chart.js ├── pages │ ├── Quiz │ │ ├── index.js │ │ ├── Quiz.style.js │ │ ├── utils.js │ │ └── Quiz.js │ ├── Landing │ │ ├── index.js │ │ ├── Landing.style.js │ │ └── Landing.js │ ├── Results │ │ ├── index.js │ │ ├── Results.style.js │ │ └── Results.js │ └── Components │ │ ├── index.js │ │ └── Components.js ├── utils │ ├── index.js │ ├── colors.js │ └── media.js ├── assets │ ├── arrow.svg │ ├── mockChart.svg │ └── articleMock.svg ├── setupTests.js ├── index.js ├── index.css ├── App.js ├── model │ ├── MediaCards.js │ ├── LeadershipQuiz.js │ ├── RoleQuiz.js │ └── Manager5to6.js └── hooks │ ├── useNavigation.js │ └── useChartData.js ├── public ├── favicon.ico ├── logo192.png ├── logo512.png ├── robots.txt ├── manifest.json └── index.html ├── craco.config.js ├── jsconfig.json ├── prettier.config.js ├── .eslintrc.json ├── .gitignore ├── package.json └── README.md /.nvmrc: -------------------------------------------------------------------------------- 1 | 18.16.0 -------------------------------------------------------------------------------- /src/components/Question/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/Quiz/index.js: -------------------------------------------------------------------------------- 1 | export { Quiz } from './Quiz'; 2 | -------------------------------------------------------------------------------- /src/components/Page/index.js: -------------------------------------------------------------------------------- 1 | export { Page } from './Page'; 2 | -------------------------------------------------------------------------------- /src/components/Step/index.js: -------------------------------------------------------------------------------- 1 | export { Step } from './Step'; 2 | -------------------------------------------------------------------------------- /src/pages/Landing/index.js: -------------------------------------------------------------------------------- 1 | export { Landing } from './Landing'; 2 | -------------------------------------------------------------------------------- /src/pages/Results/index.js: -------------------------------------------------------------------------------- 1 | export { Results } from './Results'; 2 | -------------------------------------------------------------------------------- /src/components/Button/index.js: -------------------------------------------------------------------------------- 1 | export { Button } from './Button'; 2 | -------------------------------------------------------------------------------- /src/components/Heading/index.js: -------------------------------------------------------------------------------- 1 | export { Heading } from './Heading'; 2 | -------------------------------------------------------------------------------- /src/components/Slider/index.js: -------------------------------------------------------------------------------- 1 | export { Slider } from './Slider'; 2 | -------------------------------------------------------------------------------- /src/components/MediaCard/index.js: -------------------------------------------------------------------------------- 1 | export { MediaCard } from './MediaCard'; 2 | -------------------------------------------------------------------------------- /src/components/Paragraph/index.js: -------------------------------------------------------------------------------- 1 | export { Paragraph } from './Paragraph'; 2 | -------------------------------------------------------------------------------- /src/pages/Components/index.js: -------------------------------------------------------------------------------- 1 | export { Components } from './Components'; 2 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pt-br/iceo/main/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pt-br/iceo/main/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pt-br/iceo/main/public/logo512.png -------------------------------------------------------------------------------- /src/components/Chart/index.js: -------------------------------------------------------------------------------- 1 | import Chart from './Chart'; 2 | 3 | export { Chart }; 4 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | export { media } from './media'; 2 | export { colors } from './colors'; 3 | -------------------------------------------------------------------------------- /craco.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | babel: { 3 | plugins: ['babel-plugin-styled-components'], 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "@/*": ["src/*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/components/Page/Page.js: -------------------------------------------------------------------------------- 1 | import { PageWrapper } from './Page.style'; 2 | 3 | export const Page = ({ children }) => { 4 | return {children}; 5 | }; 6 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | singleQuote: true, 3 | trailingComma: 'es5', 4 | arrowParens: 'avoid', 5 | endOfLine: 'lf', 6 | tabWidth: 2, 7 | printWidth: 75 8 | } 9 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "react-app", 3 | "rules": { 4 | "no-console": "warn", 5 | "jsx-a11y/img-redundant-alt": 0, 6 | "jsx-a11y/alt-text": 0, 7 | "react-hooks/exhaustive-deps": 0 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/assets/arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/Step/Step.js: -------------------------------------------------------------------------------- 1 | import { StepWrapper, StepText } from './Step.style'; 2 | 3 | export const Step = ({ children, mg }) => { 4 | return ( 5 | 6 | {children} 7 | 8 | ); 9 | }; 10 | -------------------------------------------------------------------------------- /src/pages/Quiz/Quiz.style.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ButtonContainer = styled.div` 4 | display: flex; 5 | flex-direction: row; 6 | justify-content: space-between; 7 | width: 100%; 8 | 9 | margin-top: 40px; 10 | `; 11 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/components/Paragraph/Paragraph.js: -------------------------------------------------------------------------------- 1 | import { Regular, Small } from './Paragraph.style'; 2 | 3 | export const Paragraph = ({ children, mg, small = false }) => { 4 | if (small) { 5 | return {children}; 6 | } 7 | 8 | return {children}; 9 | }; 10 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /src/utils/colors.js: -------------------------------------------------------------------------------- 1 | export const colors = { 2 | chart_1: '#FDC572', 3 | chart_2: '#0F477F', 4 | chart_3: '#02C9A5', 5 | button: '#ABF7E4', 6 | button_hover: '#71F0D9', 7 | button_text: '#105C4E', 8 | 9 | gray: '#3E3E40', 10 | black: '#1A1B1D', 11 | light_green: '#E1FFF5', 12 | white: '#FFFFFF', 13 | light_grey: '#F1F3F6', 14 | }; 15 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 4 | 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 11 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/components/Page/Page.style.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | import { media } from 'utils'; 4 | 5 | export const PageWrapper = styled.div` 6 | display: flex; 7 | flex-direction: column; 8 | margin: 20px; 9 | max-width: 1040px; 10 | 11 | ${media.tablet` 12 | margin: 80px 100px; 13 | `}; 14 | 15 | ${media.desktop` 16 | margin: 80px auto; 17 | padding: 0 200px; 18 | `}; 19 | `; 20 | -------------------------------------------------------------------------------- /src/components/Heading/Heading.js: -------------------------------------------------------------------------------- 1 | import { H1, H2, H3, H4 } from './Heading.style'; 2 | 3 | export const Heading = ({ children, mg, type = 1 }) => { 4 | switch (type) { 5 | case 2: 6 | return

{children}

; 7 | case 3: 8 | return

{children}

; 9 | case 4: 10 | return

{children}

; 11 | default: 12 | return

{children}

; 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /src/pages/Results/Results.style.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | import { media } from 'utils'; 4 | 5 | export const SuggestionsTitleWrapper = styled.div` 6 | max-width: 660px; 7 | `; 8 | 9 | export const MediaCardsWrapper = styled.div` 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: space-between; 14 | gap: 20px; 15 | 16 | ${media.tablet` 17 | flex-direction: row; 18 | `}; 19 | `; 20 | -------------------------------------------------------------------------------- /src/components/Chart/Chart.style.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ChartWrapper = styled.div` 4 | position: relative; 5 | div { 6 | height: 600px; 7 | } 8 | `; 9 | 10 | export const LeadershipTitle = styled.div` 11 | position: absolute; 12 | font-weight: 600; 13 | top: 41%; 14 | right: -83px; 15 | `; 16 | 17 | export const RoleTitle = styled.div` 18 | position: absolute; 19 | font-weight: 600; 20 | top: 40%; 21 | left: -30px; 22 | `; 23 | -------------------------------------------------------------------------------- /src/components/Paragraph/Paragraph.style.js: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components'; 2 | 3 | import { colors } from 'utils'; 4 | 5 | const DefaultStyle = css` 6 | color: ${colors.gray}; 7 | `; 8 | 9 | export const Regular = styled.div` 10 | ${DefaultStyle}; 11 | 12 | font-size: 16px; 13 | ${props => props.mg && `margin: ${props.mg}`}; 14 | `; 15 | 16 | export const Small = styled.div` 17 | ${DefaultStyle}; 18 | 19 | font-size: 14px; 20 | ${props => props.mg && `margin: ${props.mg}`}; 21 | `; 22 | -------------------------------------------------------------------------------- /src/components/Step/Step.style.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | import { colors } from 'utils'; 4 | 5 | export const StepWrapper = styled.div` 6 | user-select: none; 7 | padding: 12px 20px; 8 | max-width: fit-content; 9 | text-align: center; 10 | background-color: ${colors.light_green}; 11 | 12 | ${props => props.mg && `margin: ${props.mg}`}; 13 | `; 14 | 15 | export const StepText = styled.div` 16 | color: ${colors.black}; 17 | font-size: 18px; 18 | font-weight: 600; 19 | `; 20 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { Landing } from 'pages/Landing'; 2 | import { Quiz } from 'pages/Quiz'; 3 | import { Results } from 'pages/Results'; 4 | 5 | import { useNavigation } from 'hooks/useNavigation'; 6 | 7 | const App = () => { 8 | const { currentStep } = useNavigation(); 9 | 10 | switch (currentStep) { 11 | case 1: 12 | case 2: 13 | return ; 14 | case 3: 15 | return ; 16 | default: 17 | return ; 18 | } 19 | }; 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "iCEO", 3 | "name": "iCEO", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/components/Button/Button.js: -------------------------------------------------------------------------------- 1 | import { 2 | ButtonWrapperType1, 3 | ButtonWrapperType2, 4 | ButtonTextType1, 5 | ButtonTextType2, 6 | } from './Button.style'; 7 | 8 | export const Button = ({ children, mg, onClick, type = 1 }) => { 9 | if (type === 1) { 10 | return ( 11 | 12 | {children} 13 | 14 | ); 15 | } 16 | 17 | return ( 18 | 19 | {children} 20 | 21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /src/components/Chart/Chart.js: -------------------------------------------------------------------------------- 1 | import Highcharts from 'highcharts'; 2 | import HighchartsReact from 'highcharts-react-official'; 3 | import HighchartsMore from 'highcharts/highcharts-more'; 4 | import { ChartWrapper, LeadershipTitle, RoleTitle } from './Chart.style'; 5 | 6 | HighchartsMore(Highcharts); 7 | 8 | const Chart = ({ options }) => { 9 | return ( 10 | 11 | 12 | Leadership & Management 13 | Role Specifics 14 | 15 | ); 16 | }; 17 | 18 | export default Chart; 19 | -------------------------------------------------------------------------------- /src/components/Question/Question.style.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { colors, media } from 'utils'; 3 | 4 | export const QuestionWrapper = styled.div` 5 | display: flex; 6 | flex-direction: column; 7 | padding: 32px 52px; 8 | gap: 30px; 9 | justify-content: space-between; 10 | background: ${props => 11 | props.background ? colors.light_grey : colors.white}; 12 | ${media.desktop` 13 | flex-direction: row; 14 | `} 15 | `; 16 | 17 | export const QuestionDetails = styled.div` 18 | flex-basis: 60%; 19 | `; 20 | 21 | export const QuestionBullets = styled.ul` 22 | padding-left: 25px; 23 | `; 24 | 25 | export const Bullet = styled.li``; 26 | 27 | export const AnswerContainer = styled.div` 28 | width: 100%; 29 | flex-basis: 40%; 30 | align-self: center; 31 | `; 32 | -------------------------------------------------------------------------------- /src/utils/media.js: -------------------------------------------------------------------------------- 1 | import { css } from 'styled-components'; 2 | 3 | export const sizes = { 4 | reallySmall: ['max', 380], 5 | phoneLandscape: ['min', 576], 6 | tablet: ['min', 768], 7 | desktop: ['min', 992], 8 | large: ['min', 1200], 9 | larger: ['min', 1440], 10 | fullscreen: ['min', 1600], 11 | fullHd: ['min', 1920], 12 | ultrawide: ['min', 2560], 13 | }; 14 | 15 | export const breakpoints = () => { 16 | let breakpoints = {}; 17 | for (let b in sizes) { 18 | breakpoints[b] = sizes[b][1]; 19 | } 20 | return breakpoints; 21 | }; 22 | 23 | export const media = Object.keys(sizes).reduce((acc, label) => { 24 | acc[label] = (...args) => css` 25 | @media (${sizes[label][0]}-width: ${sizes[label][1]}px) { 26 | ${css(...args)}; 27 | } 28 | `; 29 | return acc; 30 | }, {}); 31 | -------------------------------------------------------------------------------- /src/components/Heading/Heading.style.js: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components'; 2 | 3 | import { colors } from 'utils'; 4 | 5 | const DefaultStyle = css` 6 | color: ${colors.black}; 7 | margin: 0 0 16px 0; 8 | `; 9 | 10 | export const H1 = styled.h1` 11 | ${DefaultStyle}; 12 | 13 | font-weight: 600; 14 | ${props => props.mg && `margin: ${props.mg}`}; 15 | `; 16 | 17 | export const H2 = styled.h2` 18 | ${DefaultStyle}; 19 | 20 | font-weight: 500; 21 | ${props => props.mg && `margin: ${props.mg}`}; 22 | `; 23 | 24 | export const H3 = styled.h3` 25 | ${DefaultStyle}; 26 | 27 | font-weight: 500; 28 | ${props => props.mg && `margin: ${props.mg}`}; 29 | `; 30 | 31 | export const H4 = styled.h4` 32 | ${DefaultStyle}; 33 | 34 | font-weight: 500; 35 | ${props => props.mg && `margin: ${props.mg}`}; 36 | `; 37 | -------------------------------------------------------------------------------- /src/model/MediaCards.js: -------------------------------------------------------------------------------- 1 | import articleMock from 'assets/articleMock.svg'; 2 | 3 | export const mediaCards = [ 4 | { 5 | categoryTitle: 'Delivering Feedback', 6 | title: 'Yieldstreet in-house manager training', 7 | image: articleMock, 8 | link: 'https://app.rippling.com/apps/RipplingLMS/employee/my-courses', 9 | }, 10 | { 11 | categoryTitle: 'Day-to-Day Management', 12 | title: 'Yieldstreet Best Practices on 1:1s', 13 | image: articleMock, 14 | link: 'https://docs.google.com/document/d/1OEu98chzZvt-5cs_KEY6XWPH1PvEHviwMkqBb89HXaQ/edit?usp=sharing', 15 | }, 16 | { 17 | categoryTitle: 'Fostering Relationships', 18 | title: 'The Power of Healthy Relationships at Work', 19 | image: articleMock, 20 | link: 'https://hbr.org/2022/06/the-power-of-healthy-relationships-at-work', 21 | }, 22 | ]; 23 | -------------------------------------------------------------------------------- /src/pages/Quiz/utils.js: -------------------------------------------------------------------------------- 1 | import { leadershipQuiz } from 'model/LeadershipQuiz'; 2 | import { roleQuiz } from 'model/RoleQuiz'; 3 | 4 | export const getQuizData = step => { 5 | switch (step) { 6 | case 1: 7 | return leadershipQuiz; 8 | default: 9 | return roleQuiz; 10 | } 11 | }; 12 | 13 | export const getMappedVote = value => { 14 | switch (value) { 15 | case 0: 16 | return { y: 5, code: 'Assist' }; 17 | case 1: 18 | return { y: 10, code: 'Do' }; 19 | case 2: 20 | return { y: 15, code: 'Guide' }; 21 | default: 22 | return { y: 20, code: 'Lead' }; 23 | } 24 | }; 25 | 26 | export const getSliderVote = value => { 27 | switch (value) { 28 | case 5: 29 | return 0; 30 | case 10: 31 | return 1; 32 | case 15: 33 | return 2; 34 | default: 35 | return 3; 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /src/hooks/useNavigation.js: -------------------------------------------------------------------------------- 1 | import { useCallback } from 'react'; 2 | import createPersistedState from 'use-persisted-state'; 3 | 4 | const useStepState = createPersistedState('step'); 5 | 6 | const scrollTop = () => { 7 | window.scrollTo({ 8 | top: 0, 9 | behavior: 'smooth', 10 | }); 11 | }; 12 | 13 | export const useNavigation = () => { 14 | const [step, setStep] = useStepState(0); 15 | 16 | const resetSteps = useCallback(() => { 17 | setStep(0); 18 | scrollTop(); 19 | }); 20 | 21 | const goBack = useCallback(() => { 22 | if (step === 0) { 23 | return; 24 | } 25 | 26 | setStep(step - 1); 27 | scrollTop(); 28 | }, [step, setStep]); 29 | 30 | const goForward = useCallback(() => { 31 | setStep(step + 1); 32 | scrollTop(); 33 | }, [step, setStep]); 34 | 35 | return { 36 | currentStep: step, 37 | goBack, 38 | goForward, 39 | resetSteps, 40 | }; 41 | }; 42 | -------------------------------------------------------------------------------- /src/pages/Landing/Landing.style.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | import { media, colors } from 'utils'; 4 | 5 | export const LandingCenter = styled.div` 6 | display: flex; 7 | flex-direction: column; 8 | justify-content: center; 9 | align-self: center; 10 | max-width: 1000px; 11 | 12 | ${media.tablet` 13 | height: 360px; 14 | `}; 15 | 16 | ${media.desktop` 17 | height: 660px; 18 | `}; 19 | `; 20 | 21 | export const LandingWrapper = styled.div` 22 | display: flex; 23 | flex-direction: column-reverse; 24 | align-items: center; 25 | justify-content: space-between; 26 | gap: 20px; 27 | 28 | ${media.tablet` 29 | flex-direction: row; 30 | gap: 60px; 31 | `}; 32 | `; 33 | 34 | export const LeftWrapper = styled.div` 35 | display: flex; 36 | flex-direction: column; 37 | flex-basis: 50%; 38 | `; 39 | 40 | export const RightWrapper = styled.div``; 41 | 42 | export const MockChart = styled.img` 43 | width: 100%; 44 | `; 45 | -------------------------------------------------------------------------------- /src/components/MediaCard/MediaCard.js: -------------------------------------------------------------------------------- 1 | import { Heading } from 'components/Heading'; 2 | import { Paragraph } from 'components/Paragraph'; 3 | 4 | import arrowIcon from 'assets/arrow.svg'; 5 | 6 | import { 7 | MediaCardWrapper, 8 | CategoryTitleWrapper, 9 | ContentWrapper, 10 | ImageWrapper, 11 | TextWrapper, 12 | Title, 13 | Arrow, 14 | ArticleImg, 15 | } from './MediaCard.style'; 16 | 17 | export const MediaCard = ({ categoryTitle, title, image, link }) => { 18 | return ( 19 | 20 | 21 | {categoryTitle} 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | {title} 30 | 31 | 32 | 33 | ); 34 | }; 35 | -------------------------------------------------------------------------------- /src/components/Question/Question.js: -------------------------------------------------------------------------------- 1 | import { Heading } from 'components/Heading'; 2 | import { 3 | QuestionWrapper, 4 | QuestionDetails, 5 | QuestionBullets, 6 | Bullet, 7 | AnswerContainer, 8 | } from './Question.style'; 9 | import { Paragraph } from 'components/Paragraph'; 10 | import { Slider } from 'components/Slider'; 11 | 12 | export const Question = ({ 13 | title, 14 | details, 15 | background, 16 | onChange, 17 | value, 18 | }) => { 19 | return ( 20 | 21 | 22 | {title} 23 | 24 | {details.map(detail => ( 25 | 26 | {detail} 27 | 28 | ))} 29 | 30 | 31 | 32 | 33 | 34 | 35 | ); 36 | }; 37 | -------------------------------------------------------------------------------- /src/pages/Components/Components.js: -------------------------------------------------------------------------------- 1 | import { Page } from 'components/Page'; 2 | import { Heading } from 'components/Heading'; 3 | import { Paragraph } from 'components/Paragraph'; 4 | import { Button } from 'components/Button'; 5 | import { Step } from 'components/Step'; 6 | 7 | import { Results } from 'pages/Results'; 8 | import { Question } from 'components/Question/Question'; 9 | 10 | export const Components = () => { 11 | return ( 12 | 13 | 1 14 | Heading 15 | Paragraph 16 | 19 | 22 | 23 | 24 | 25 | 26 | ); 27 | }; 28 | -------------------------------------------------------------------------------- /src/hooks/useChartData.js: -------------------------------------------------------------------------------- 1 | import { useMemo, useCallback } from 'react'; 2 | import createPersistedState from 'use-persisted-state'; 3 | 4 | import { getSliderVote } from 'pages/Quiz/utils'; 5 | 6 | const useChartAnswers = createPersistedState('chartData'); 7 | 8 | const getDefaultDataSet = () => { 9 | const dataSet = {}; 10 | 11 | [...Array(13)].forEach((_, i) => { 12 | dataSet[i] = { y: 5, code: 'Assist' }; 13 | }); 14 | 15 | return dataSet; 16 | }; 17 | 18 | export const useChartData = () => { 19 | const [chartData, setChartData] = useChartAnswers(getDefaultDataSet()); 20 | 21 | const mappedChartData = useMemo(() => { 22 | return Object.values(chartData); 23 | }, [chartData]); 24 | 25 | const sliderData = useMemo(() => { 26 | return mappedChartData.map(val => getSliderVote(val.y)); 27 | }, [mappedChartData]); 28 | 29 | const resetChartData = useCallback(() => { 30 | setChartData(getDefaultDataSet()); 31 | }, []); 32 | 33 | return { 34 | chartData, 35 | setChartData, 36 | mappedChartData, 37 | sliderData, 38 | resetChartData, 39 | }; 40 | }; 41 | -------------------------------------------------------------------------------- /src/components/Slider/Slider.js: -------------------------------------------------------------------------------- 1 | import ReactSlider from 'react-slider'; 2 | import { Wrapper } from './Slider.style'; 3 | 4 | export const Slider = ({ onChange, value }) => { 5 | const thumbMap = value => { 6 | switch (value) { 7 | case 0: 8 | return 'Assist'; 9 | case 1: 10 | return 'Do'; 11 | case 2: 12 | return 'Guide'; 13 | default: 14 | return 'Lead'; 15 | } 16 | }; 17 | 18 | return ( 19 | 20 | ( 30 |
{state.valueNow}
31 | )} 32 | renderMark={props => ( 33 | 34 | {thumbMap(props.key)} 35 | 36 | )} 37 | onChange={onChange} 38 | /> 39 | 40 | ); 41 | }; 42 | -------------------------------------------------------------------------------- /src/components/MediaCard/MediaCard.style.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | import { Regular } from 'components/Paragraph/Paragraph.style'; 4 | import { colors, media } from 'utils'; 5 | 6 | export const MediaCardWrapper = styled.a` 7 | display: flex; 8 | flex-direction: column; 9 | align-self: stretch; 10 | flex: 1; 11 | padding: 20px; 12 | background-color: ${colors.light_grey}; 13 | text-decoration: none; 14 | 15 | ${media.tablet` 16 | max-width: 310px; 17 | `}; 18 | `; 19 | 20 | export const CategoryTitleWrapper = styled.div` 21 | display: flex; 22 | align-items: baseline; 23 | justify-content: space-between; 24 | margin-bottom: 10px; 25 | `; 26 | 27 | export const ContentWrapper = styled.div` 28 | display: flex; 29 | gap: 10px; 30 | align-items: center; 31 | `; 32 | 33 | export const ImageWrapper = styled.div``; 34 | 35 | export const TextWrapper = styled.div` 36 | display: flex; 37 | flex-direction: column; 38 | `; 39 | 40 | export const Title = styled(Regular)` 41 | text-decoration: underline; 42 | `; 43 | 44 | export const Arrow = styled.img``; 45 | 46 | export const ArticleImg = styled.img``; 47 | -------------------------------------------------------------------------------- /src/pages/Landing/Landing.js: -------------------------------------------------------------------------------- 1 | import { Page } from 'components/Page'; 2 | import { Heading } from 'components/Heading'; 3 | import { Paragraph } from 'components/Paragraph'; 4 | import { Button } from 'components/Button'; 5 | 6 | import { useNavigation } from 'hooks/useNavigation'; 7 | 8 | import { 9 | LandingCenter, 10 | LandingWrapper, 11 | LeftWrapper, 12 | RightWrapper, 13 | MockChart, 14 | } from './Landing.style'; 15 | 16 | import mockChart from 'assets/mockChart.svg'; 17 | 18 | export const Landing = () => { 19 | const { goForward } = useNavigation(); 20 | 21 | return ( 22 | 23 | 24 | 25 | 26 | Welcome to iCEO! 27 | 28 | You are the CEO of your own career! 29 | 30 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | ); 41 | }; 42 | -------------------------------------------------------------------------------- /src/components/Button/Button.style.js: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components'; 2 | 3 | import { media, colors } from 'utils'; 4 | 5 | const DefaultStyle = css` 6 | cursor: pointer; 7 | user-select: none; 8 | border-radius: 6px; 9 | padding: 12px 18px; 10 | max-width: 100%; 11 | text-align: center; 12 | transition: all 0.2s ease-in-out 0s; 13 | 14 | ${media.tablet` 15 | max-width: fit-content; 16 | `}; 17 | `; 18 | 19 | export const ButtonWrapperType1 = styled.div` 20 | ${DefaultStyle}; 21 | 22 | background-color: ${colors.button}; 23 | ${props => props.mg && `margin: ${props.mg}`}; 24 | 25 | &:hover { 26 | background-color: ${colors.button_hover}; 27 | } 28 | `; 29 | export const ButtonWrapperType2 = styled.div` 30 | ${DefaultStyle}; 31 | 32 | background-color: ${colors.white}; 33 | border: 1px solid ${colors.black}; 34 | ${props => props.mg && `margin: ${props.mg}`}; 35 | `; 36 | 37 | export const ButtonTextType1 = styled.div` 38 | color: ${colors.button_text}; 39 | font-size: 16px; 40 | font-weight: 600; 41 | text-transform: capitalize; 42 | `; 43 | 44 | export const ButtonTextType2 = styled.div` 45 | color: ${colors.black}; 46 | font-size: 16px; 47 | text-transform: capitalize; 48 | `; 49 | -------------------------------------------------------------------------------- /src/components/Slider/Slider.style.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Wrapper = styled.div` 4 | .horizontal-slider { 5 | width: 100%; 6 | max-width: 500px; 7 | height: 50px; 8 | } 9 | 10 | .example-track { 11 | position: relative; 12 | background: #000; 13 | } 14 | 15 | .horizontal-slider .example-track { 16 | top: 23px; 17 | height: 4px; 18 | } 19 | 20 | .horizontal-slider .example-thumb { 21 | outline: none; 22 | top: 16px; 23 | width: 18px; 24 | height: 18px; 25 | border-radius: 50%; 26 | line-height: 0; 27 | font-size: 0; 28 | margin-left: 2px; 29 | } 30 | 31 | .example-thumb { 32 | font-size: 0.9em; 33 | text-align: center; 34 | background-color: black; 35 | color: white; 36 | cursor: pointer; 37 | border: 5px solid white; 38 | box-sizing: border-box; 39 | } 40 | 41 | .mark-text { 42 | position: absolute; 43 | font-size: 14px; 44 | left: 0; 45 | bottom: 30px; 46 | font-weight: 500; 47 | } 48 | 49 | .horizontal-slider { 50 | .example-mark:nth-of-type(4) { 51 | .mark-text { 52 | right: 0; 53 | left: unset; 54 | } 55 | } 56 | .example-mark:nth-of-type(3) { 57 | .mark-text { 58 | right: -9px; 59 | left: unset; 60 | } 61 | } 62 | } 63 | 64 | .horizontal-slider .example-mark { 65 | top: 14px; 66 | width: 18px; 67 | height: 18px; 68 | background: white; 69 | border: 2px solid black; 70 | border-radius: 50%; 71 | } 72 | `; 73 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 24 | iCEO 25 | 26 | 27 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "iceo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://pt-br.github.io/iceo", 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^5.16.5", 8 | "@testing-library/react": "^13.4.0", 9 | "@testing-library/user-event": "^13.5.0", 10 | "gh-pages": "^5.0.0", 11 | "highcharts": "^11.1.0", 12 | "highcharts-react-official": "^3.2.0", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-scripts": "5.0.1", 16 | "react-slider": "^2.0.5", 17 | "styled-components": "^6.0.0-rc.3", 18 | "use-persisted-state": "^0.3.3", 19 | "web-vitals": "^2.1.4" 20 | }, 21 | "devDependencies": { 22 | "@craco/craco": "^7.1.0", 23 | "babel-plugin-styled-components": "^2.1.3", 24 | "eslint": "^7.12.1", 25 | "eslint-config-node": "^4.1.0", 26 | "eslint-config-prettier": "^6.11.0", 27 | "eslint-config-react-app": "^7.0.1", 28 | "eslint-plugin-node": "^11.1.0", 29 | "eslint-plugin-prettier": "^3.1.4", 30 | "husky": "1.1.2", 31 | "lint-staged": "^10.5.4", 32 | "prettier": "^2.8.8" 33 | }, 34 | "scripts": { 35 | "start": "craco start", 36 | "build": "craco build", 37 | "test": "craco test", 38 | "eject": "craco eject", 39 | "deploy": "craco build && gh-pages -d build" 40 | }, 41 | "eslintConfig": { 42 | "extends": [ 43 | "react-app", 44 | "react-app/jest" 45 | ] 46 | }, 47 | "browserslist": { 48 | "production": [ 49 | ">0.2%", 50 | "not dead", 51 | "not op_mini all" 52 | ], 53 | "development": [ 54 | "last 1 chrome version", 55 | "last 1 firefox version", 56 | "last 1 safari version" 57 | ] 58 | }, 59 | "husky": { 60 | "hooks": { 61 | "pre-commit": "lint-staged" 62 | } 63 | }, 64 | "lint-staged": { 65 | "src/**/!(*test).js": [ 66 | "prettier --write", 67 | "eslint --fix" 68 | ] 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/pages/Quiz/Quiz.js: -------------------------------------------------------------------------------- 1 | import { Button } from 'components/Button'; 2 | import { Heading } from 'components/Heading'; 3 | import { Question } from 'components/Question/Question'; 4 | import { Step } from 'components/Step'; 5 | import { ButtonContainer } from './Quiz.style'; 6 | import { Page } from 'components/Page'; 7 | import { Paragraph } from 'components/Paragraph'; 8 | import { getMappedVote, getQuizData } from './utils'; 9 | 10 | import { useNavigation } from 'hooks/useNavigation'; 11 | import { useChartData } from 'hooks/useChartData'; 12 | 13 | export const Quiz = () => { 14 | const { sliderData, setChartData } = useChartData(); 15 | 16 | const { currentStep, goBack, goForward } = useNavigation(); 17 | 18 | const quizData = getQuizData(currentStep); 19 | 20 | const onChange = (idx, opt) => { 21 | const offset = currentStep !== 1 ? 6 : 0; 22 | const mappedVal = getMappedVote(opt); 23 | 24 | setChartData(prevState => ({ 25 | ...prevState, 26 | [idx + offset]: mappedVal, 27 | })); 28 | }; 29 | 30 | return ( 31 | 32 | {currentStep} 33 | 34 | {quizData.title} 35 | 36 | 37 | {quizData.subtitle} 38 | 39 | {quizData.questions.map((question, idx) => ( 40 | onChange(idx, opt)} 42 | title={question.title} 43 | details={question.details} 44 | background={!(idx % 2)} 45 | value={sliderData[(currentStep !== 1 ? 6 : 0) + idx]} 46 | /> 47 | ))} 48 | 49 | {currentStep > 1 ? ( 50 | 53 | ) : ( 54 |
55 | )} 56 | 57 | 58 | 59 | ); 60 | }; 61 | -------------------------------------------------------------------------------- /src/model/LeadershipQuiz.js: -------------------------------------------------------------------------------- 1 | export const leadershipQuiz = { 2 | title: 'Let’s Talk Leadership and Management', 3 | subtitle: 4 | '“Leadership and learning are indispensable to each other.”- JFK. Please take some time to measure yourself against these competencies', 5 | questions: [ 6 | { 7 | title: 'Inspires Others:', 8 | details: [ 9 | 'Communicate Yieldstreet’s bold vision by drawing the connection between the future and our current day-to-day.', 10 | 'Challenge the status quo by frequently and thoughtfully challenging "what is" for "what could be."', 11 | ], 12 | }, 13 | { 14 | title: 'Develops Talent:', 15 | details: [ 16 | 'Identify and invest in strengths by seeking out team members’ passions and skills and delegating work to support those. Develops talent with a coaching approach.', 17 | 'Sets goals and delegates well and does not micromanage.', 18 | ], 19 | }, 20 | { 21 | title: 'Day to Day Management:', 22 | details: [ 23 | 'Prioritizing workloads and delegating evenly based on skill and capacity. Holds regular 1:1s with their direct report.', 24 | 'Troubleshoots with direct reports on a day to day basis, removing or working through roadblocks. Delivers and receives feedback well and frequently.', 25 | ], 26 | }, 27 | { 28 | title: 'Hiring:', 29 | details: [ 30 | 'Identifies hiring needs for the organization in relation to business goals and longer-term strategy.', 31 | 'Identifies well-rounded candidates that fit the business needs and the team and company culture.', 32 | 'Avoids unnecessary levels of management and maintains an appropriate span of control given the size of your team, skills, and nature of work.', 33 | ], 34 | }, 35 | { 36 | title: 'Onboarding:', 37 | details: [ 38 | 'Structures and drive new team members’ experience and ramp up.', 39 | 'Warmly welcome and integrate new hires into team norms and work.', 40 | 'Communicates team’s strategy, goals, and stakeholders and delivers clear 30-60-90 day plan and holds new hires to account.', 41 | ], 42 | }, 43 | { 44 | title: 'Delivers Feedback:', 45 | details: [ 46 | 'Embodies radical candor. Delivers feedback by caring personally and challenging directly.', 47 | 'Seeks out upward feedback regularly and receives with grace.', 48 | ], 49 | }, 50 | ], 51 | }; 52 | -------------------------------------------------------------------------------- /src/pages/Results/Results.js: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | 3 | import { Page } from 'components/Page'; 4 | import { Heading } from 'components/Heading'; 5 | import { Paragraph } from 'components/Paragraph'; 6 | import { Chart } from 'components/Chart'; 7 | import { Button } from 'components/Button'; 8 | import { MediaCard } from 'components/MediaCard'; 9 | 10 | import { getOptions as Manager5to6Options } from 'model/Manager5to6'; 11 | import { mediaCards } from 'model/MediaCards'; 12 | 13 | import { useChartData } from 'hooks/useChartData'; 14 | import { useNavigation } from 'hooks/useNavigation'; 15 | 16 | import { 17 | SuggestionsTitleWrapper, 18 | MediaCardsWrapper, 19 | } from './Results.style'; 20 | 21 | export const Results = () => { 22 | const { resetSteps } = useNavigation(); 23 | const { resetChartData, mappedChartData } = useChartData(); 24 | 25 | const mediaCardsRender = useMemo(() => { 26 | return mediaCards.map( 27 | ({ categoryTitle, title, description, image, link }) => ( 28 | 35 | ) 36 | ); 37 | }, []); 38 | 39 | return ( 40 | 41 | Here is your Career Journey Map 42 | 43 | Here’s what we’ll use to plot a course for your own development 44 | 45 | 46 | 47 | 48 | Here’s how you can embrace those opportunities for improvement 49 | and get you on a path toward promotion. 50 | 51 | 52 | 53 | So you have some gaps? Congratulations, you’re human! 54 | 55 | 56 | Here are a few resources, both internal and external, that can help 57 | you bridge the gap between where you are and where your manager 58 | needs you to be to achieve your next level. 59 | 60 | {mediaCardsRender} 61 | 71 | 72 | ); 73 | }; 74 | -------------------------------------------------------------------------------- /src/model/RoleQuiz.js: -------------------------------------------------------------------------------- 1 | export const roleQuiz = { 2 | title: 'Let’s Talk About Your Unique Role', 3 | subtitle: 4 | 'As a Manager on the Investment Team, you’re responsible for implementing investment strategies, conducting DD, and overseeing the acquisition and management of assets. Please take some time to measure yourself against these competencies.', 5 | questions: [ 6 | { 7 | title: 'Investment Level Underwriting and Analysis:', 8 | details: [ 9 | 'Evaluates (rank merits or detractors of any deal) and synthesizes an investment recommendation.', 10 | ], 11 | }, 12 | { 13 | title: 'Develop and Foster Relationships with Originating Partners:', 14 | details: [ 15 | 'Clearly communicates Yieldstreet’s value prop, capabilities, and requirements (structural nuances - 3C5/3C1, Financial structure, and regulatory requirements).', 16 | 'Demonstrates ability to navigate and alleviate partner hesitancy.', 17 | ], 18 | }, 19 | { 20 | title: 'Sound Structural and Legal Comprehension:', 21 | details: [ 22 | 'Demonstrates holistic understanding and negotiation skills of a real estate legal structure. Reviews loan documents to ensure alignment with term sheet and that all protections are fully captured.', 23 | 'Evaluates deal-level investment risks, compares expected returns to comps and provides thoughtful summaries/analyses.', 24 | 'Oversees collection and analysis of KYC checks and follow up with legal and compliance teams when warranted.', 25 | ], 26 | }, 27 | { 28 | title: 'Collaborative & Resourceful:', 29 | details: [ 30 | 'Works seamlessly within and across teams (e.g., FinOps, Marketing and Legal) to deliver highest work product (e.g., credit memos, Series Note Supplements and Offering pages to internal Marketing and Legal teams).', 31 | 'Coordinates seamlessly across FinOps, PM, and TM regarding loan fundings and compliance considering relevant deadlines and contingency plans for potential slippage of same.', 32 | 'Secures and deploys resources effectively, efficiently and intelligently.', 33 | ], 34 | }, 35 | { 36 | title: 'Workouts and Restructuring:', 37 | details: [ 38 | 'Partners with PRM and outside resources (including counsel) to drive maximum recovery and resolution for investors.', 39 | ], 40 | }, 41 | { 42 | title: 'Strategic Problem Solving:', 43 | details: [ 44 | 'Takes on ad-hoc projects and creates solutions to help other departments across the organization.', 45 | ], 46 | }, 47 | { 48 | title: 'Strong Presentation Skills:', 49 | details: [ 50 | 'Design effective presentations with supporting materials across a wide variety of projects.', 51 | ], 52 | }, 53 | ], 54 | }; 55 | -------------------------------------------------------------------------------- /src/model/Manager5to6.js: -------------------------------------------------------------------------------- 1 | import { colors } from 'utils'; 2 | 3 | export const getOptions = quizData => ({ 4 | chart: { 5 | polar: true, 6 | }, 7 | 8 | title: { 9 | text: '', 10 | // x: -80, 11 | }, 12 | 13 | pane: { 14 | size: '80%', 15 | }, 16 | 17 | xAxis: { 18 | categories: [ 19 | 'Inspires Others', 20 | 'Develops Talent', 21 | 'Day to Day Management', 22 | 'Hiring', 23 | 'Onboarding', 24 | 'Delivers Feedback', 25 | 'Investment Level Underwriting and Analysis', 26 | 'Develop and Foster Relationships with Originating Partners', 27 | 'Sound Structural and Legal Comprehension', 28 | 'Collaborative & Resourceful', 29 | 'Workouts and Restructuring', 30 | 'Strategic Problem Solving', 31 | 'Strong Presentation Skills', 32 | ], 33 | tickmarkPlacement: 'on', 34 | lineWidth: 0, 35 | labels: { 36 | distance: 35, 37 | }, 38 | }, 39 | 40 | yAxis: { 41 | gridLineInterpolation: 'polygon', 42 | lineWidth: 0, 43 | min: 0, 44 | labels: { enabled: false }, 45 | ceiling: 20, 46 | }, 47 | 48 | plotOptions: { 49 | area: {}, 50 | line: { 51 | marker: { 52 | enabled: false, 53 | }, 54 | }, 55 | series: { 56 | lineWidth: 2, 57 | }, 58 | }, 59 | 60 | tooltip: { 61 | shared: true, 62 | pointFormat: 63 | '{series.name}: {point.code}
', 64 | }, 65 | 66 | legend: {}, 67 | 68 | series: [ 69 | { 70 | // type: 'area', 71 | name: 'Ideal', 72 | data: [ 73 | { y: 15, code: 'Guide' }, 74 | { y: 15, code: 'Guide' }, 75 | { y: 15, code: 'Guide' }, 76 | { y: 15, code: 'Guide' }, 77 | { y: 20, code: 'Lead' }, 78 | { y: 15, code: 'Guide' }, 79 | { y: 15, code: 'Guide' }, 80 | { y: 15, code: 'Guide' }, 81 | { y: 15, code: 'Guide' }, 82 | { y: 15, code: 'Guide' }, 83 | { y: 20, code: 'Lead' }, 84 | { y: 15, code: 'Guide' }, 85 | { y: 20, code: 'Lead' }, 86 | ], 87 | color: colors.chart_1, 88 | }, 89 | { 90 | // type: 'area', 91 | name: 'Manager Evaluation', 92 | data: [ 93 | { y: 15, code: 'Guide' }, 94 | { y: 15, code: 'Guide' }, 95 | { y: 10, code: 'Do' }, 96 | { y: 15, code: 'Guide' }, 97 | { y: 20, code: 'Lead' }, 98 | { y: 10, code: 'Do' }, 99 | { y: 15, code: 'Guide' }, 100 | { y: 10, code: 'Do' }, 101 | { y: 15, code: 'Guide' }, 102 | { y: 15, code: 'Guide' }, 103 | { y: 20, code: 'Lead' }, 104 | { y: 15, code: 'Guide' }, 105 | { y: 20, code: 'Lead' }, 106 | ], 107 | color: colors.chart_2, 108 | }, 109 | { 110 | // type: 'area', 111 | name: 'Self Evaluation', 112 | data: quizData, 113 | color: colors.chart_3, 114 | }, 115 | ], 116 | 117 | responsive: { 118 | rules: [ 119 | { 120 | condition: { 121 | maxWidth: 500, 122 | }, 123 | chartOptions: { 124 | legend: { 125 | align: 'center', 126 | verticalAlign: 'bottom', 127 | layout: 'horizontal', 128 | }, 129 | pane: { 130 | size: '70%', 131 | }, 132 | }, 133 | }, 134 | ], 135 | }, 136 | 137 | credits: { 138 | enabled: false, 139 | }, 140 | }); 141 | -------------------------------------------------------------------------------- /src/assets/mockChart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn deploy` 10 | 11 | Deploy the app to Github pages. 12 | 13 | ### `yarn start` 14 | 15 | Runs the app in the development mode.\ 16 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 17 | 18 | The page will reload when you make changes.\ 19 | You may also see any lint errors in the console. 20 | 21 | ### `yarn test` 22 | 23 | Launches the test runner in the interactive watch mode.\ 24 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 25 | 26 | ### `yarn build` 27 | 28 | Builds the app for production to the `build` folder.\ 29 | It correctly bundles React in production mode and optimizes the build for the best performance. 30 | 31 | The build is minified and the filenames include the hashes.\ 32 | Your app is ready to be deployed! 33 | 34 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 35 | 36 | ### `yarn eject` 37 | 38 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 39 | 40 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 41 | 42 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 43 | 44 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 45 | 46 | ## Learn More 47 | 48 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 49 | 50 | To learn React, check out the [React documentation](https://reactjs.org/). 51 | 52 | ### Code Splitting 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 55 | 56 | ### Analyzing the Bundle Size 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 59 | 60 | ### Making a Progressive Web App 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 63 | 64 | ### Advanced Configuration 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 67 | 68 | ### Deployment 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 71 | 72 | ### `yarn build` fails to minify 73 | 74 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 75 | -------------------------------------------------------------------------------- /src/assets/articleMock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | --------------------------------------------------------------------------------