mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
confetti and misc refactors
This commit is contained in:
tomlum
parent
f17ee45ceb
commit
cfe63c5b75
16 changed files with 755 additions and 134 deletions
|
|
@ -140,6 +140,7 @@ module.exports.selectToken = state => get(state, ['session', 'session', 'user',
|
||||||
module.exports.selectIsAdmin = state => get(state, ['session', 'session', 'permissions', 'admin'], false);
|
module.exports.selectIsAdmin = state => get(state, ['session', 'session', 'permissions', 'admin'], false);
|
||||||
module.exports.selectIsSocial = state => get(state, ['session', 'session', 'permissions', 'social'], false);
|
module.exports.selectIsSocial = state => get(state, ['session', 'session', 'permissions', 'social'], false);
|
||||||
module.exports.selectIsEducator = state => get(state, ['session', 'session', 'permissions', 'educator'], false);
|
module.exports.selectIsEducator = state => get(state, ['session', 'session', 'permissions', 'educator'], false);
|
||||||
|
module.exports.selectIsEducator = state => get(state, ['session', 'session', 'permissions', 'educator'], false);
|
||||||
module.exports.selectProjectCommentsGloballyEnabled = state =>
|
module.exports.selectProjectCommentsGloballyEnabled = state =>
|
||||||
get(state, ['session', 'session', 'flags', 'project_comments_enabled'], false);
|
get(state, ['session', 'session', 'flags', 'project_comments_enabled'], false);
|
||||||
module.exports.selectStudioCommentsGloballyEnabled = state =>
|
module.exports.selectStudioCommentsGloballyEnabled = state =>
|
||||||
|
|
|
||||||
|
|
@ -1,76 +1,122 @@
|
||||||
import React, {useState} from 'react';
|
import React, {useState, useEffect} from 'react';
|
||||||
const FormattedMessage = require('react-intl').FormattedMessage;
|
const FormattedMessage = require('react-intl').FormattedMessage;
|
||||||
const render = require('../../lib/render.jsx');
|
const render = require('../../lib/render.jsx');
|
||||||
|
const thumbnailUrl = require('../../lib/user-thumbnail');
|
||||||
const injectIntl = require('react-intl').injectIntl;
|
const injectIntl = require('react-intl').injectIntl;
|
||||||
const connect = require('react-redux').connect;
|
const connect = require('react-redux').connect;
|
||||||
import useWindowSize from 'react-use/lib/useWindowSize';
|
import useWindowSize from 'react-use/lib/useWindowSize';
|
||||||
import Confetti from 'react-confetti';
|
import Confetti from 'react-confetti';
|
||||||
|
|
||||||
const Button = require('../../components/forms/button.jsx');
|
import Button from '../../components/forms/button.jsx';
|
||||||
|
import Modal from '../../components/modal/base/modal.jsx';
|
||||||
|
|
||||||
require('./scratcher-onboarding.scss');
|
require('./scratcher-onboarding.scss');
|
||||||
|
|
||||||
const steps = [
|
const steps = [
|
||||||
{
|
{
|
||||||
section: 'Treat everyone with respect',
|
section: 'Become a Scratcher - Treat everyone with respect',
|
||||||
header: 'Scratchers treat everyone with respect.',
|
header: 'Scratchers treat everyone with respect.',
|
||||||
body: 'Everyone on Scratch is encouraged to share things that excite them and are important to them—we hope that you find ways to celebrate your own identity on Scratch, and allow others to do the same.',
|
body: 'Everyone on Scratch is encouraged to share things that excite them and are important to them—we hope that you find ways to celebrate your own identity on Scratch, and allow others to do the same.',
|
||||||
image: 'respect-illustration.svg',
|
image: 'respect-illustration.svg',
|
||||||
imageLeft: true
|
imageLeft: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
section: 'Be safe',
|
section: 'Become a Scratcher - Be safe',
|
||||||
header: 'Scratchers are safe: we keep personal and contact information private.',
|
header: 'Scratchers are safe: we keep personal and contact information private.',
|
||||||
body: 'This includes not sharing real last names, phone numbers, addresses, hometowns, school names, email addresses, usernames or links to social media sites, video chatting applications, or websites with private chat functionality.',
|
body: 'This includes not sharing real last names, phone numbers, addresses, hometowns, school names, email addresses, usernames or links to social media sites, video chatting applications, or websites with private chat functionality.',
|
||||||
image: 'safe-illustration.svg'
|
image: 'safe-illustration.svg'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
section: 'Give helpful feedback',
|
section: 'Become a Scratcher - Give helpful feedback',
|
||||||
header: 'Scratchers give helpful feedback.',
|
header: 'Scratchers give helpful feedback.',
|
||||||
body: 'When commenting on a project, remember to say something you like about it, offer suggestions, and be kind, not critical.',
|
body: 'When commenting on a project, remember to say something you like about it, offer suggestions, and be kind, not critical.',
|
||||||
image: 'feedback-illustration.svg',
|
image: 'feedback-illustration.svg',
|
||||||
imageLeft: true
|
imageLeft: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
section: 'Embrace remix culture',
|
section: 'Become a Scratcher - Embrace remix culture',
|
||||||
header: 'Scratchers embrace remix culture.',
|
header: 'Scratchers embrace remix culture.',
|
||||||
body: 'Remixing is when you build upon someone else’s projects, code, ideas, images, or anything else they share on Scratch to make your own unique creation.',
|
body: 'Remixing is when you build upon someone else’s projects, code, ideas, images, or anything else they share on Scratch to make your own unique creation.',
|
||||||
image: 'remix-illustration-1.svg'
|
image: 'remix-illustration-1.svg'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
section: 'Embrace remix culture',
|
section: 'Become a Scratcher - Embrace remix culture',
|
||||||
header: 'Remixing is a great way to collaborate and connect with other Scratchers.',
|
header: 'Remixing is a great way to collaborate and connect with other Scratchers.',
|
||||||
body: 'You are encouraged to use anything you find on Scratch in your own creations, as long as you provide credit to everyone whose work you used and make a meaningful change to it. ',
|
body: 'You are encouraged to use anything you find on Scratch in your own creations, as long as you provide credit to everyone whose work you used and make a meaningful change to it. ',
|
||||||
image: 'remix-illustration-2.svg'
|
image: 'remix-illustration-2.svg'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
section: 'Embrace remix culture',
|
section: 'Become a Scratcher - Embrace remix culture',
|
||||||
header: 'Remixing means sharing with others.',
|
header: 'Remixing means sharing with others.',
|
||||||
body: 'When you share something on Scratch, you are giving permission to all Scratchers to use your work in their creations, too.',
|
body: 'When you share something on Scratch, you are giving permission to all Scratchers to use your work in their creations, too.',
|
||||||
image: 'remix-illustration-3.svg'
|
image: 'remix-illustration-3.svg'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
section: 'Be honest',
|
section: 'Become a Scratcher - Be honest',
|
||||||
header: 'Scratchers are honest.',
|
header: 'Scratchers are honest.',
|
||||||
body: 'It’s important to be honest and authentic when interacting with others on Scratch, and remember that there is a person behind every Scratch account.',
|
body: 'It’s important to be honest and authentic when interacting with others on Scratch, and remember that there is a person behind every Scratch account.',
|
||||||
image: 'honest-illustration.svg',
|
image: 'honest-illustration.svg',
|
||||||
imageLeft: true
|
imageLeft: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
section: 'Keep the site friendly',
|
section: 'Become a Scratcher - Keep the site friendly',
|
||||||
header: 'Scratchers help keep the site friendly.',
|
header: 'Scratchers help keep the site friendly.',
|
||||||
body: 'It’s important to keep your creations and conversations friendly and appropriate for all ages. If you think something on Scratch is mean, insulting, too violent, or otherwise disruptive to the community, click “Report” to let us know about it.',
|
body: 'It’s important to keep your creations and conversations friendly and appropriate for all ages. If you think something on Scratch is mean, insulting, too violent, or otherwise disruptive to the community, click “Report” to let us know about it.',
|
||||||
image: 'friendly-illustration.svg'
|
image: 'friendly-illustration.svg'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const OnboardingNavigation = ({page, totalPages, onNextPage, onBackPage}) => {
|
|
||||||
|
const OnboardingHeader = ({user, section, whiteButton}) => {
|
||||||
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="header">
|
||||||
|
<Modal
|
||||||
|
isOpen={showModal}
|
||||||
|
showCloseButton
|
||||||
|
useStandardSizes
|
||||||
|
className="mod-join"
|
||||||
|
shouldCloseOnOverlayClick={false}
|
||||||
|
onRequestClose={() => setShowModal(false)}
|
||||||
|
>
|
||||||
|
<div className="finish-later-modal-header">
|
||||||
|
Finish Later
|
||||||
|
</div>
|
||||||
|
<div className="finish-later-modal-content">
|
||||||
|
<h3>
|
||||||
|
No worries, take your time!
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
By leaving this page, you will not finish the process to become a Scratcher and will stay as a New Scratcher. If you change your mind later, you can always come back via your profile page. Just click on “★ Become a Scratcher!” below your username.
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
className="profile-page-image"
|
||||||
|
src="/images/onboarding/profile-page-become-a-scratcher-button.svg"
|
||||||
|
/>
|
||||||
|
<a href={`/users/${user.username}`}>
|
||||||
|
<Button>Back to Profile Page</Button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
<span>
|
||||||
|
<span className="section">{section}</span>
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
onClick={() => setShowModal(true)}
|
||||||
|
className={`finish-later ${whiteButton ? 'secondary-finish-later' : ''}`}
|
||||||
|
>Finish Later</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const OnboardingNavigation = ({page, totalDots, onNextPage, onBackPage, nextText}) => {
|
||||||
const dots = [];
|
const dots = [];
|
||||||
|
|
||||||
for (let i = 0; i < totalPages; i++){
|
if (page && totalDots){
|
||||||
dots.push(<div className="dot">
|
for (let i = 0; i < totalDots - 1; i++){
|
||||||
{page === i-2 && <div className="active" />}
|
dots.push(<div className={`dot ${page === i + 2 && 'active'}`} />);
|
||||||
</div>);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -79,21 +125,21 @@ const OnboardingNavigation = ({page, totalPages, onNextPage, onBackPage}) => {
|
||||||
{ /* eslint-disable react/jsx-no-bind */ }
|
{ /* eslint-disable react/jsx-no-bind */ }
|
||||||
<Button onClick={onBackPage}>
|
<Button onClick={onBackPage}>
|
||||||
<img
|
<img
|
||||||
className="leftArrow"
|
className="left-arrow"
|
||||||
alt=""
|
alt=""
|
||||||
src="/images/onboarding/left-arrow.svg"
|
src="/images/onboarding/left-arrow.svg"
|
||||||
/>
|
/>
|
||||||
<span className="navText">Back</span>
|
<span className="navText">Back</span>
|
||||||
</Button>
|
</Button>
|
||||||
{(page > 1 && page < 9) &&
|
{(page && totalDots) &&
|
||||||
<div className="dotRow">
|
<div className="dotRow">
|
||||||
{dots}
|
{dots}
|
||||||
</div>}
|
</div>}
|
||||||
{ /* eslint-disable react/jsx-no-bind */ }
|
{ /* eslint-disable react/jsx-no-bind */ }
|
||||||
<Button onClick={onNextPage}>
|
<Button onClick={onNextPage}>
|
||||||
<span className="navText">Next</span>
|
<span className="navText">{nextText || 'Next'}</span>
|
||||||
<img
|
<img
|
||||||
className="rightArrow"
|
className="right-arrow"
|
||||||
alt=""
|
alt=""
|
||||||
src="/images/onboarding/right-arrow.svg"
|
src="/images/onboarding/right-arrow.svg"
|
||||||
/>
|
/>
|
||||||
|
|
@ -103,50 +149,106 @@ const OnboardingNavigation = ({page, totalPages, onNextPage, onBackPage}) => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const OnboardingHeader = ({section}) => (
|
|
||||||
<div className="header">
|
|
||||||
<span>
|
|
||||||
Become a Scratcher
|
|
||||||
<span className="section">{section && ` - ${section}`}</span>
|
|
||||||
</span>
|
|
||||||
<Button className="white secondary">Finish Later</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const ScratcherOnboarding = ({user}) => {
|
const conffetiPaths = [
|
||||||
const [page, setPage] = useState(3);
|
new Path2D('M34.549 3.1361L40.613 15.4191L54.1718 17.3947C58.7918 18.0636 60.6345 23.7378 57.2946 26.9979L47.4788 36.5612L49.7954 50.0668C50.5839 54.6646 45.7557 58.1728 41.6274 56.0024L29.4994 49.6239L17.3714 56.0024C13.2386 58.1728 8.4149 54.6646 9.19893 50.0668L11.52 36.5612L1.70862 26.9979C-1.63567 23.7378 0.20701 18.0636 4.82699 17.3947L18.3902 15.4191L24.4497 3.1361C26.5183 -1.04537 32.4805 -1.04537 34.549 3.1361Z'),
|
||||||
|
new Path2D('M58.9044 21.997C57.1803 41.4894 35.1024 56.8198 29.5019 56.8198C23.9015 56.8198 1.81974 41.4894 0.0993974 21.997C0.0496987 21.3611 0 20.7252 0 20.0893C0 10.6382 7.71859 2.9502 17.211 2.9502C22.028 2.9502 26.4053 4.90743 29.5019 8.14029C32.5985 4.90743 36.9758 2.9502 41.7928 2.9502C51.2814 2.9502 59 10.6382 59 20.0893C59 20.7252 58.9503 21.3611 58.9044 21.997Z'),
|
||||||
|
new Path2D('M10.9967 45.1305C5.99892 36.9346 5.59074 25.9968 9.99448 17.3259C14.5575 8.00641 22.2367 3.87569 25.3229 2.53264C27.178 1.67111 29.1327 0.999586 31.2366 0.504948L33.3008 0.0594462C34.8174 -0.25175 36.3273 0.68839 36.6558 2.18868C36.9877 3.69225 36.022 5.17289 34.4988 5.50047L32.491 5.93286C30.8218 6.32595 29.2223 6.87628 27.6625 7.6035C25.6349 8.4814 18.9281 11.8783 15.0586 19.786C12.1217 25.5612 11.2456 34.7431 15.8683 42.3199C20.0564 49.6183 28.6315 54.0929 36.7654 53.3395C44.4578 52.7859 51.5164 47.6659 53.992 40.8851C56.5042 34.5072 54.835 27.9688 52.0772 24.2869C48.7553 19.75 44.6204 18.3545 42.9976 17.9647C42.7554 17.8926 37.074 16.186 32.0563 18.6985C29.8959 19.7336 27.1017 22.0627 25.605 25.5612C23.9889 29.1743 24.407 33.8193 26.5973 36.9051C28.8008 40.2136 32.9556 42.0873 36.5297 41.4518C40.0872 40.8917 42.4932 38.2449 43.064 35.9191C43.7343 33.4197 42.7056 31.3068 41.9025 30.5468C40.5386 29.2005 39.3605 29.1776 39.3107 29.1743C38.7532 29.1579 38.4777 29.2005 38.3118 29.2267C37.6746 29.4593 36.772 29.9703 36.5065 30.5075C36.46 30.596 36.3406 30.8384 36.5696 31.4444C37.1171 32.8825 36.3771 34.4908 34.9202 35.0313C33.47 35.5751 31.8373 34.8446 31.2864 33.4033C30.3804 31.0186 30.8815 29.1514 31.4623 28.0049C32.9789 25.0207 36.4999 23.9397 36.8981 23.825C37.0806 23.7693 37.2731 23.7366 37.4623 23.7202C37.8505 23.6612 38.5342 23.5695 39.46 23.6055C41.5806 23.6317 43.9965 24.7389 45.8483 26.5701C48.0352 28.6338 49.7476 32.7809 48.533 37.2883C47.3483 42.1135 42.7952 46.1034 37.4822 46.9387C31.7676 47.9575 25.3329 45.1403 21.9347 40.0334C18.6593 35.431 18.032 28.696 20.4281 23.3533C23.0564 17.2014 28.0773 14.4171 29.5508 13.7095C36.6359 10.1717 44.2089 12.5073 44.5275 12.6056C46.5651 13.0871 52.2299 14.9838 56.6336 21.0013C60.0186 25.5284 62.763 33.9831 59.2752 42.8342C56.0894 51.5575 47.0197 58.1843 37.2399 58.8886C36.4733 58.9607 35.6968 59 34.9236 59C25.4325 59 15.8186 53.5295 10.9967 45.1305Z')
|
||||||
|
];
|
||||||
|
|
||||||
|
const ScratcherOnboarding = ({user, invitedScratcher, scratcher, state}) => {
|
||||||
|
// Existing scratchers revisiting this page should just get the congratulations message
|
||||||
|
const [page, setPage] = useState(scratcher ? 11 : 0);
|
||||||
|
const [hoorayAppear, setHoorayAppear] = useState(false);
|
||||||
const {width, height} = useWindowSize();
|
const {width, height} = useWindowSize();
|
||||||
const totalPages = 9;
|
const dots = 9;
|
||||||
|
|
||||||
|
// const handlePromoteToScratcher = () => {
|
||||||
|
// api({
|
||||||
|
// uri: `/users/${user.username}/promote-to-scratcher/`,
|
||||||
|
// method: 'GET',
|
||||||
|
// withCredentials: true,
|
||||||
|
// useCsrf: true
|
||||||
|
// }, (err, body, res) => {
|
||||||
|
// const error = normalizeError(err, body, res);
|
||||||
|
// if (error) return reject(error);
|
||||||
|
|
||||||
|
// // Note `body` is undefined, this endpoint returns an html fragment
|
||||||
|
// const index = curators.selector(getState()).items
|
||||||
|
// .findIndex(v => v.username === username);
|
||||||
|
// if (index !== -1) dispatch(curators.actions.remove(index));
|
||||||
|
// return resolve();
|
||||||
|
// });
|
||||||
|
// };
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
steps.forEach(step => {
|
||||||
|
new Image().src = `/images/onboarding/${step.image}`;
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (user){
|
||||||
|
new Image().src = thumbnailUrl(user.id, 100, 100);
|
||||||
|
}
|
||||||
|
}, [user]);
|
||||||
|
|
||||||
const NextPage = () => {
|
const NextPage = () => {
|
||||||
setPage(Math.min(page + 1, totalPages));
|
setPage(Math.min(page + 1, dots + 4));
|
||||||
};
|
};
|
||||||
const BackPage = () => {
|
const BackPage = () => {
|
||||||
setPage(Math.max(page - 1, 0));
|
setPage(Math.max(page - 1, 0));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (page === 11){
|
||||||
|
setTimeout(() => {
|
||||||
|
setHoorayAppear(true);
|
||||||
|
}, 2500);
|
||||||
|
}
|
||||||
|
|
||||||
|
// New scratcher who is not invited
|
||||||
|
if (false && !invitedScratcher && !scratcher){
|
||||||
|
return (<div className="no-invitation">
|
||||||
|
<img
|
||||||
|
className="profile-page-image"
|
||||||
|
src="/images/onboarding/invitation-illustration.svg"
|
||||||
|
/>
|
||||||
|
<h2>
|
||||||
|
Whoops! Looks like you haven’t received an invitation to become a Scratcher yet.
|
||||||
|
</h2>
|
||||||
|
<div>
|
||||||
|
To become a Scratcher, you must be active on Scratch for a while, share several projects, and comment constructively in the community. After a few weeks, you will receive a notification inviting you to become a Scratcher. Scratch on!
|
||||||
|
</div>
|
||||||
|
</div>);
|
||||||
|
}
|
||||||
|
|
||||||
if (user){
|
if (user){
|
||||||
if (page === 0){
|
if (page === 0){
|
||||||
return (
|
return (
|
||||||
<div className="onboarding col">
|
<div className="onboarding col">
|
||||||
<div className="content">
|
<div className="congratulations-page">
|
||||||
<OnboardingHeader />
|
<OnboardingHeader user={user} />
|
||||||
<div className="art-content-1">
|
<div className="congratulations-image">
|
||||||
<div className="blue-background" />
|
|
||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
src={`/images/onboarding/friendly-illustration.svg`}
|
src={`/images/onboarding/congratulations-illustration.svg`}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-content">
|
<div className="congratulations-text">
|
||||||
<h1>Congratulations {user.username}! You have shown that you are ready to become a Scratcher.</h1>
|
<div className="center-text">
|
||||||
<div>
|
<h1>Congratulations {user.username}! You have shown that you are ready to become a Scratcher.</h1>
|
||||||
Scratch is a friendly and welcoming community for everyone, where people create, share, and learn together. We welcome people of all ages, races, ethnicities, religions, abilities, sexual orientations, and gender identities.
|
<div>
|
||||||
The next few pages will take you through the community guidelines and explain what this means.
|
Scratch is a friendly and welcoming community for everyone, where people create, share, and learn together. We welcome people of all ages, races, ethnicities, religions, abilities, sexual orientations, and gender identities.
|
||||||
|
The next few pages will take you through the community guidelines and explain what this means.
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{ /* eslint-disable react/jsx-no-bind */ }
|
|
||||||
<Button onClick={NextPage}>
|
<Button onClick={NextPage}>
|
||||||
Get started
|
Get started
|
||||||
|
<img
|
||||||
|
className="right-arrow"
|
||||||
|
alt=""
|
||||||
|
src="/images/onboarding/right-arrow.svg"
|
||||||
|
/>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -155,28 +257,41 @@ const ScratcherOnboarding = ({user}) => {
|
||||||
} else if (page === 1){
|
} else if (page === 1){
|
||||||
return (
|
return (
|
||||||
<div className="onboarding col">
|
<div className="onboarding col">
|
||||||
<OnboardingHeader />
|
<OnboardingHeader user={user} />
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<div className="art-content-1">
|
<div className="opening-text-content">
|
||||||
test
|
<h1>What does it mean to be a Scratcher?</h1>
|
||||||
</div>
|
|
||||||
<div className="text-content">
|
|
||||||
<h1>Congratulations {name}! You have shown that you are ready to become a Scratcher.</h1>
|
|
||||||
<div>
|
<div>
|
||||||
Scratch is a friendly and welcoming community for everyone, where people create, share, and learn together. We welcome people of all ages, races, ethnicities, religions, abilities, sexual orientations, and gender identities.
|
You might notice on your profile page that you are currently a “New Scratcher”. Now that you have spent some time on Scratch, we invite you to become a “Scratcher”.
|
||||||
The next few pages will take you through the community guidelines and explain what this means.
|
|
||||||
</div>
|
</div>
|
||||||
{ /* eslint-disable react/jsx-no-bind */ }
|
<br />
|
||||||
<Button onClick={NextPage}>
|
<b>
|
||||||
Get started
|
Scratchers have a bit more experience on Scratch and are excited to both contribute to the community and to make it a supportive and welcoming space for others.
|
||||||
</Button>
|
</b>
|
||||||
|
</div>
|
||||||
|
<div className="opening-text-content">
|
||||||
|
Here are some things Scratchers do:
|
||||||
|
<div className="labeled-icon">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="/images/onboarding/create-studios.svg"
|
||||||
|
/>
|
||||||
|
Create studios
|
||||||
|
</div>
|
||||||
|
<div className="labeled-icon">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="/images/onboarding/help-out.svg"
|
||||||
|
/>
|
||||||
|
Help out in the community
|
||||||
|
</div>
|
||||||
|
Next, we will take you through the community guidelines and explain what these are.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<OnboardingNavigation
|
<OnboardingNavigation
|
||||||
page={page}
|
|
||||||
totalPages={totalPages}
|
|
||||||
onNextPage={NextPage}
|
onNextPage={NextPage}
|
||||||
onBackPage={BackPage}
|
onBackPage={BackPage}
|
||||||
|
nextText={'Community Guidelines'}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
@ -184,10 +299,10 @@ const ScratcherOnboarding = ({user}) => {
|
||||||
const step = steps[page - 2];
|
const step = steps[page - 2];
|
||||||
return (
|
return (
|
||||||
<div className="onboarding col">
|
<div className="onboarding col">
|
||||||
<OnboardingHeader section={step.section} />
|
<OnboardingHeader user={user} section={step.section} />
|
||||||
<div className="content">
|
<div className="content">
|
||||||
{step.imageLeft && (
|
{step.imageLeft && (
|
||||||
<div className="art-content">
|
<div className="image-content">
|
||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
src={`/images/onboarding/${step.image}`}
|
src={`/images/onboarding/${step.image}`}
|
||||||
|
|
@ -201,15 +316,15 @@ const ScratcherOnboarding = ({user}) => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{!step.imageLeft && (
|
{!step.imageLeft && (
|
||||||
<div className="art-content">
|
<div className="image-content">
|
||||||
<div className="art-inner-content">
|
<div className="image-inner-content">
|
||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
src={`/images/onboarding/${step.image}`}
|
src={`/images/onboarding/${step.image}`}
|
||||||
/>
|
/>
|
||||||
{page === 3 && <img
|
{page === 3 && <img
|
||||||
className="avatar"
|
className="avatar"
|
||||||
src={`//cdn2.scratch.mit.edu${user.thumbnailUrl}`}
|
src={thumbnailUrl(user.id, 100, 100)}
|
||||||
/>}
|
/>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -217,26 +332,104 @@ const ScratcherOnboarding = ({user}) => {
|
||||||
</div>
|
</div>
|
||||||
<OnboardingNavigation
|
<OnboardingNavigation
|
||||||
page={page}
|
page={page}
|
||||||
totalPages={totalPages}
|
totalDots={dots}
|
||||||
onNextPage={NextPage}
|
onNextPage={NextPage}
|
||||||
onBackPage={BackPage}
|
onBackPage={BackPage}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
} else if (page == 10) {
|
} else if (page === 10) {
|
||||||
|
return (<div className="onboarding blue-background col">
|
||||||
|
<OnboardingHeader whiteButton user={user} />
|
||||||
|
<div className="content center-flex">
|
||||||
|
<div className="invitation-card">
|
||||||
|
<div className="row center-flex">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src={`/images/onboarding/left-lines.svg`}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
className="invitation-icon"
|
||||||
|
src={thumbnailUrl(user.id, 100, 100)}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src={`/images/onboarding/right-lines.svg`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h1>{user.username}, we invite you to become a Scratcher.</h1>
|
||||||
|
<div className="content">
|
||||||
|
{'Scratch is a friendly and welcoming community for everyone. If you agree to be respectful, be safe, give helpful feedback, embrace remix culture, be honest, and help keep the site friendly, click “I agree!”'}
|
||||||
|
</div>
|
||||||
|
<div className="content">
|
||||||
|
{'You get to decide if you want to become a Scratcher. If you do not want to be a Scratcher yet, just click “Finish Later” above.'}
|
||||||
|
</div>
|
||||||
|
<div className="invitation-buttons">
|
||||||
|
<Button
|
||||||
|
className="go-back"
|
||||||
|
onClick={BackPage}
|
||||||
|
>Go Back</Button>
|
||||||
|
<Button onClick={NextPage}>I Agree</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>);
|
||||||
|
} else if (page === 11) {
|
||||||
return (<div className="onboarding col">
|
return (<div className="onboarding col">
|
||||||
<Confetti
|
<div className="hooray-screen">
|
||||||
width={width}
|
<div className={`hooray-confetti ${hoorayAppear && 'hooray-disappear'}`}>
|
||||||
height={height}
|
{conffetiPaths.map(confettiPath =>
|
||||||
/>
|
(<Confetti
|
||||||
<OnboardingHeader />
|
colors={['#0FBD8C', '#4C97FF', '#FFBF00', '#FF6680']}
|
||||||
<div className="content" />
|
gravity={.08}
|
||||||
<OnboardingNavigation
|
width={width}
|
||||||
page={page}
|
height={height}
|
||||||
totalPages={totalPages}
|
friction={.9999}
|
||||||
onNextPage={NextPage}
|
numberOfPieces={45}
|
||||||
onBackPage={BackPage}
|
initialVelocityY={-10}
|
||||||
/>
|
initialVelocityX={1}
|
||||||
|
drawShape={ctx => {
|
||||||
|
ctx.scale(.5, .5);
|
||||||
|
ctx.translate(-30, -30);
|
||||||
|
ctx.fill(confettiPath);
|
||||||
|
}}
|
||||||
|
/>)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<h1>Hooray! You are now officially a Scratcher.</h1>
|
||||||
|
<div className={`hooray-links ${hoorayAppear && 'hooray-appear'}`}>
|
||||||
|
<div>
|
||||||
|
Here are some links that might be helpful for you.
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<a
|
||||||
|
className="hooray-link"
|
||||||
|
href={hoorayAppear && '/community_guidelines'}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
className="profile-page-image"
|
||||||
|
src="/images/onboarding/community-guidelines.svg"
|
||||||
|
/>
|
||||||
|
Community Guidelines
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className="hooray-link"
|
||||||
|
href={hoorayAppear && '/projects/editor'}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
className="profile-page-image"
|
||||||
|
src="/images/onboarding/create-a-project.svg"
|
||||||
|
/>
|
||||||
|
Create a Project
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<a href={hoorayAppear && '/'}>
|
||||||
|
<Button>
|
||||||
|
Take me back to Scratch
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>);
|
</div>);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -246,7 +439,9 @@ const ScratcherOnboarding = ({user}) => {
|
||||||
|
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => ({
|
||||||
user: state.session && state.session.session && state.session.session.user
|
user: state.session && state.session.session && state.session.session.user,
|
||||||
|
invitedScratcher: state.session && state.session.session && state.session.session.permissions && state.session.session.permissions.invited_scratcher,
|
||||||
|
scratcher: state.session && state.session.session && state.session.session.permissions && state.session.session.permissions.scratcher
|
||||||
});
|
});
|
||||||
|
|
||||||
const ConnectedScratcherOnboarding = connect(
|
const ConnectedScratcherOnboarding = connect(
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,27 @@
|
||||||
@import "../../colors";
|
@import "../../colors";
|
||||||
@import "../../frameless";
|
@import "../../frameless";
|
||||||
|
|
||||||
body{
|
html,body{
|
||||||
background-color: $ui-white !important;
|
background-color: $ui-white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.no-invitation{
|
||||||
|
display: flex;
|
||||||
|
max-width: 640px;
|
||||||
|
margin: auto;
|
||||||
|
height: 100vh;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 1.8rem;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
h2{
|
||||||
|
margin: 20px 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.flex1{
|
.flex1{
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -22,24 +39,179 @@ body{
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 10px 40px;
|
margin: 10px 40px;
|
||||||
z-index: 100;
|
|
||||||
.section{
|
.section{
|
||||||
@media #{$medium-and-smaller} {
|
@media #{$medium-and-smaller} {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-overlay{
|
||||||
|
background-color: rgba(0,0,0, 0.5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content{
|
||||||
|
|
||||||
|
line-height: 1.8rem !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
|
||||||
|
.finish-later-modal-header{
|
||||||
|
background-color: $ui-blue;
|
||||||
|
color: $ui-white;
|
||||||
|
height: 46px;
|
||||||
|
display:flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 7px 7px 0px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finish-later-modal-content{
|
||||||
|
padding: 20px 30px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
button{
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-page-image{
|
||||||
|
margin: 35px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.congratulations-page{
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
align-items: normal;
|
||||||
|
|
||||||
|
@media #{$medium-and-smaller} {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header{
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
left: 0px;
|
||||||
|
@media #{$medium-and-smaller} {
|
||||||
|
position: static;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.congratulations-text{
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 40px;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.center-text{
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.congratulations-image{
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #E9F1FC;
|
||||||
|
@media #{$medium-and-smaller} {
|
||||||
|
height: 230px;
|
||||||
|
width: 100vw;
|
||||||
|
order: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-flex{
|
||||||
|
display:flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invitation-card{
|
||||||
|
background-color: white;
|
||||||
|
margin: 10px;
|
||||||
|
border-radius: 7px;
|
||||||
|
padding: 40px;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 600px;
|
||||||
|
|
||||||
|
.invitation-icon{
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 50px;
|
||||||
|
margin: 0px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button{
|
||||||
|
margin: 10px;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invitation-buttons{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.blue-background{
|
.blue-background{
|
||||||
background-color: #E9F1FC;
|
background-color: #3373cc;
|
||||||
z-index: 1;
|
}
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
// .light-blue-background{
|
||||||
bottom: 0px;
|
// z-index: 1;
|
||||||
left: 0px;
|
// position: absolute;
|
||||||
width: 30%;
|
// top: 0px;
|
||||||
@media #{$medium-and-smaller} {
|
// bottom: 0px;
|
||||||
display: none;
|
// left: 0px;
|
||||||
|
// width: 30%;
|
||||||
|
// @media #{$medium-and-smaller} {
|
||||||
|
// display: none;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
.button{
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.left-arrow{
|
||||||
|
padding-right: 4px;
|
||||||
|
@media #{$small} {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right-arrow{
|
||||||
|
padding-left: 4px;
|
||||||
|
@media #{$small} {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.labeled-icon{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img{
|
||||||
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -48,29 +220,13 @@ body{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
|
|
||||||
.button{
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.left-arrow{
|
|
||||||
padding-right: 4px;
|
|
||||||
@media #{$small} {
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.right-arrow{
|
|
||||||
padding-left: 4px;
|
|
||||||
@media #{$small} {
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dotRow{
|
.dotRow{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 220px;
|
width: 244px;
|
||||||
min-width: 0px;
|
min-width: 0px;
|
||||||
padding: 0px 5px;
|
padding: 0px 5px;
|
||||||
}
|
}
|
||||||
|
|
@ -86,12 +242,9 @@ body{
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.active{
|
.active{
|
||||||
width: 16px;
|
border: solid 2px #4280d9;
|
||||||
height: 16px;
|
|
||||||
border-radius: 100%;
|
|
||||||
border: solid 1px #4280d9;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background-color: #4c97fe;
|
background-color: #4c97fe;
|
||||||
|
margin-top: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navText{
|
.navText{
|
||||||
|
|
@ -101,9 +254,53 @@ body{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hooray-screen{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
h1{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hooray-links{
|
||||||
|
opacity: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hooray-confetti{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hooray-appear{
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hooray-disappear{
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hooray-link{
|
||||||
|
display: flex;
|
||||||
|
margin: 15px;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.onboarding {
|
.onboarding {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100vh;
|
min-height: 100vh;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
line-height: 1.8rem;
|
line-height: 1.8rem;
|
||||||
|
|
||||||
|
|
@ -141,12 +338,26 @@ body{
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
button.secondary{
|
|
||||||
background-color: $ui-white;
|
button.finish-later{
|
||||||
|
background-color: rgba(0,0,0,0);
|
||||||
|
color: $ui-blue;
|
||||||
border: solid 1px $ui-blue;
|
border: solid 1px $ui-blue;
|
||||||
}
|
}
|
||||||
|
|
||||||
.art-content{
|
button.secondary-finish-later{
|
||||||
|
background-color: rgba(0,0,0,0);
|
||||||
|
color: $ui-white;
|
||||||
|
border: solid 1px $ui-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.go-back{
|
||||||
|
background-color: $ui-white;
|
||||||
|
color: $ui-blue;
|
||||||
|
border: solid 1px $ui-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-content{
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 4;
|
flex: 4;
|
||||||
|
|
@ -166,11 +377,11 @@ body{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.art-inner-content{
|
.image-inner-content{
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.art-content-1{
|
.image-content-1{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 4;
|
flex: 4;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -209,4 +420,20 @@ body{
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.opening-text-content{
|
||||||
|
flex: 6;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
// align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
@media #{$medium-and-smaller} {
|
||||||
|
flex: 12;
|
||||||
|
order: 2;
|
||||||
|
padding-top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
20
static/images/onboarding/community-guidelines.svg
Normal file
20
static/images/onboarding/community-guidelines.svg
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<svg width="173" height="119" viewBox="0 0 173 119" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="0.5" width="172" height="119" rx="8" fill="#4C97FF" fill-opacity="0.15"/>
|
||||||
|
<mask id="mask0_1163_5537" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="173" height="119">
|
||||||
|
<rect x="0.5" width="172" height="119" rx="8" fill="#C4C4C4"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_1163_5537)">
|
||||||
|
<path d="M11.7021 93.257C0.499264 93.257 -8.49972 83.5932 -8.49972 71.6285C-8.49972 59.6638 0.591091 50 11.7021 50H19.0482C30.251 50 39.25 59.6638 39.25 71.6285C39.25 83.5932 30.1592 93.257 19.0482 93.257L25.5679 91.6923C24.3741 94.5455 24.0986 96.2942 24.7414 102.184C25.476 109.547 19.2318 110.284 8.3045 93.0729C8.12085 92.7968 6.92711 90.9561 6.74346 90.772L11.7021 93.257Z" fill="#4C97FF" fill-opacity="0.5"/>
|
||||||
|
<path d="M15.929 85.1577C8.01756 85.1577 1.60407 78.7295 1.60407 70.8C1.60407 62.8705 8.01756 56.4424 15.929 56.4424C23.8404 56.4424 30.2539 62.8705 30.2539 70.8C30.2539 78.7295 23.8404 85.1577 15.929 85.1577Z" fill="#4C97FF"/>
|
||||||
|
<path d="M22.7236 73.1006C22.7236 73.1006 16.2958 77.3342 9.4088 73.4687" stroke="#3373CC" stroke-width="2" stroke-miterlimit="10"/>
|
||||||
|
<path d="M25.1118 70.3392C24.1482 70.3392 23.3671 69.5563 23.3671 68.5905C23.3671 67.6247 24.1482 66.8418 25.1118 66.8418C26.0753 66.8418 26.8564 67.6247 26.8564 68.5905C26.8564 69.5563 26.0753 70.3392 25.1118 70.3392Z" fill="#3373CC"/>
|
||||||
|
<path d="M6.7465 70.3392C5.78292 70.3392 5.00178 69.5563 5.00178 68.5905C5.00178 67.6247 5.78292 66.8418 6.7465 66.8418C7.71008 66.8418 8.49121 67.6247 8.49121 68.5905C8.49121 69.5563 7.71008 70.3392 6.7465 70.3392Z" fill="#3373CC"/>
|
||||||
|
<path d="M48.6406 16.2007C49.6648 15.927 50.4158 15.1058 50.6889 14.1478L51.3033 11.8212C51.5764 10.7263 53.1468 10.7263 53.4199 11.8212L54.0343 14.1478C54.3074 15.1743 55.1267 15.927 56.0826 16.2007L58.4039 16.8166C59.4963 17.0903 59.4963 18.6642 58.4039 18.9379L56.0826 19.5538C55.0585 19.8275 54.3074 20.6487 54.0343 21.6067L53.4199 23.9334C53.1468 25.0282 51.5764 25.0282 51.3033 23.9334L50.6889 21.6067C50.4158 20.5803 49.5965 19.8275 48.6406 19.5538L46.3193 18.9379C45.2269 18.6642 45.2269 17.0903 46.3193 16.8166L48.6406 16.2007Z" fill="white"/>
|
||||||
|
<path d="M81.7016 90.2023C82.1835 90.0735 82.537 89.687 82.6655 89.2362L82.9546 88.1413C83.0832 87.6261 83.8221 87.6261 83.9507 88.1413L84.2398 89.2362C84.3683 89.7192 84.7539 90.0735 85.2037 90.2023L86.2961 90.4921C86.8102 90.6209 86.8102 91.3616 86.2961 91.4904L85.2037 91.7802C84.7218 91.909 84.3683 92.2955 84.2398 92.7463L83.9507 93.8412C83.8221 94.3564 83.0832 94.3564 82.9546 93.8412L82.6655 92.7463C82.537 92.2633 82.1514 91.909 81.7016 91.7802L80.6092 91.4904C80.0951 91.3616 80.0951 90.6209 80.6092 90.4921L81.7016 90.2023Z" fill="white"/>
|
||||||
|
<path d="M69.6406 79.2007C70.6647 78.927 71.4158 78.1058 71.6889 77.1478L72.3033 74.8212C72.5764 73.7263 74.1467 73.7263 74.4198 74.8212L75.0343 77.1478C75.3074 78.1743 76.1267 78.927 77.0825 79.2007L79.4039 79.8166C80.4963 80.0903 80.4963 81.6642 79.4039 81.9379L77.0825 82.5538C76.0584 82.8275 75.3074 83.6487 75.0343 84.6067L74.4198 86.9334C74.1467 88.0283 72.5764 88.0283 72.3033 86.9334L71.6889 84.6067C71.4158 83.5803 70.5965 82.8275 69.6406 82.5538L67.3193 81.9379C66.2269 81.6642 66.2269 80.0903 67.3193 79.8166L69.6406 79.2007Z" fill="white"/>
|
||||||
|
<path d="M154.886 100.294C155.337 100.174 155.669 99.8114 155.789 99.3887L156.06 98.3623C156.181 97.8792 156.874 97.8792 156.994 98.3623L157.265 99.3887C157.386 99.8416 157.747 100.174 158.169 100.294L159.193 100.566C159.675 100.687 159.675 101.381 159.193 101.502L158.169 101.774C157.717 101.894 157.386 102.257 157.265 102.679L156.994 103.706C156.874 104.189 156.181 104.189 156.06 103.706L155.789 102.679C155.669 102.227 155.307 101.894 154.886 101.774L153.861 101.502C153.38 101.381 153.38 100.687 153.861 100.566L154.886 100.294Z" fill="white"/>
|
||||||
|
<path d="M168.979 63.7261C180.805 63.7261 190.349 53.498 190.349 40.8632C190.349 28.2284 180.745 18.0003 168.979 18.0003H107.93C96.1046 17.9401 86.5 28.1683 86.5 40.803C86.5 53.4378 96.1046 63.666 107.87 63.666H112.973C114.233 66.7344 113.273 72.0891 112.072 78.2862C110.451 86.5891 127.74 82.6181 139.265 64.388C139.445 64.1473 139.565 63.9066 139.745 63.7261H168.979Z" fill="#4C97FF" fill-opacity="0.5"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M136.623 37.193C135.783 46.639 125.158 54.0394 122.456 54.0394C119.755 54.0394 109.13 46.639 108.29 37.193C108.29 36.8922 108.229 36.5914 108.229 36.2905C108.229 31.718 111.951 28.0479 116.513 28.0479C118.855 28.0479 120.956 29.0105 122.456 30.5748C123.957 29.0105 126.058 28.0479 128.399 28.0479C132.961 28.0479 136.683 31.7781 136.683 36.2905C136.683 36.5914 136.623 36.8922 136.623 37.193Z" fill="#4C97FF"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M169.1 38.3358C168.5 44.954 161.056 50.1282 159.135 50.1282C157.214 50.1282 149.771 44.954 149.17 38.3358C149.17 38.0951 149.11 37.9146 149.11 37.6739C149.11 34.4852 151.752 31.8379 154.933 31.8379C156.554 31.8379 158.055 32.4997 159.075 33.5827C160.096 32.4997 161.596 31.8379 163.217 31.8379C166.459 31.8379 169.04 34.425 169.04 37.6739C169.16 37.9146 169.1 38.1553 169.1 38.3358Z" fill="#4C97FF"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.1 KiB |
68
static/images/onboarding/congratulations-illustration.svg
Normal file
68
static/images/onboarding/congratulations-illustration.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 306 KiB |
27
static/images/onboarding/create-a-project.svg
Normal file
27
static/images/onboarding/create-a-project.svg
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<svg width="172" height="119" viewBox="0 0 172 119" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g opacity="0.3">
|
||||||
|
<rect width="172" height="119" rx="8" fill="#FFBF00"/>
|
||||||
|
</g>
|
||||||
|
<path d="M74 37.8864C54 5.97841 16.3333 10.1568 0 16.2345V62.3872C5.5 59.9181 23.9 62.5011 53.5 92.5858C83.1 122.67 144.833 111.199 172 101.702V49.8519C147.667 59.1584 94 69.7944 74 37.8864Z" fill="white" fill-opacity="0.5"/>
|
||||||
|
<rect x="47.5" y="12.5" width="85" height="73" stroke="#4C97FF"/>
|
||||||
|
<path d="M139.278 34.1939C137.342 37.2255 135.688 39.0949 134.157 40.0244C133.835 40.2198 133.416 40.114 133.225 39.7894C132.538 38.6198 131.6 37.6381 130.464 36.9126C129.288 36.1871 127.996 35.744 126.619 35.5785C126.246 35.5337 125.981 35.1924 126.031 34.8197C126.269 33.0262 127.274 30.7408 129.172 27.7699C134.69 19.0766 143.467 10.3101 146.27 12.1006C149.068 13.8879 144.828 25.5051 139.278 34.1939Z" fill="#825331"/>
|
||||||
|
<path d="M127.281 50.2295C127.213 50.275 127.136 50.3089 127.051 50.3275L126.755 50.3923C122.784 51.4192 118.95 50.2508 116.166 47.7781C115.062 46.7981 114.255 45.6959 113.962 44.7815C113.574 43.5701 114.165 42.6164 115.46 42.7681C117.499 43.001 118.851 42.5751 119.698 41.7948C119.94 41.5713 119.961 41.5429 120.175 41.202C122.067 38.3948 125.916 37.546 128.818 39.2998C131.739 41.0957 132.577 44.8908 130.672 47.7187C129.867 48.9318 128.664 49.8048 127.281 50.2295Z" fill="#E4B681"/>
|
||||||
|
<mask id="mask0_1163_4842" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="113" y="38" width="19" height="13">
|
||||||
|
<path d="M127.281 50.2295C127.213 50.275 127.136 50.3089 127.051 50.3275L126.755 50.3923C122.784 51.4192 118.95 50.2508 116.166 47.7781C115.062 46.7981 114.255 45.6959 113.962 44.7815C113.574 43.5701 114.165 42.6164 115.46 42.7681C117.499 43.001 118.851 42.5751 119.698 41.7948C119.94 41.5713 119.961 41.5429 120.175 41.202C122.067 38.3948 125.916 37.546 128.818 39.2998C131.739 41.0957 132.577 44.8908 130.672 47.7187C129.867 48.9318 128.664 49.8048 127.281 50.2295Z" fill="#E4B681"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_1163_4842)">
|
||||||
|
<path d="M124 41.5004C124.4 39.1004 121.167 39.5004 119.5 40.0004C116.667 40.3337 110.8 42.1004 110 46.5004C109 52.0004 125 52.5004 128.5 51.5004C132 50.5004 129.5 47.0004 126.5 47.0004C123.5 47.0004 123.5 44.5004 124 41.5004Z" fill="#5CB1D6"/>
|
||||||
|
</g>
|
||||||
|
<path d="M106.089 50.197C112.134 52.4182 95.736 59.3838 88.4487 58.2954C83.1608 57.5055 81.1057 53.9231 81.1066 51.5473C81.1077 48.5777 91.501 46.1866 92.0992 49.6465C92.6975 53.1065 100.044 47.9758 106.089 50.197Z" fill="#5CB1D6" stroke="#4C97FF"/>
|
||||||
|
<path d="M80.7283 38.7673C81.4717 38.7645 82.123 38.9639 82.5741 39.2623C83.0287 39.5629 83.2326 39.9249 83.2338 40.258C83.235 40.5911 83.0338 40.9546 82.5814 41.2586C82.1326 41.5603 81.4828 41.7645 80.7393 41.7672C79.9959 41.77 79.3446 41.5706 78.8935 41.2722C78.4389 40.9716 78.2351 40.6096 78.2338 40.2765C78.2326 39.9434 78.4338 39.5799 78.8862 39.2759C79.3351 38.9742 79.9848 38.77 80.7283 38.7673Z" fill="#5CB1D6" stroke="#4C97FF"/>
|
||||||
|
<path d="M83.967 65.5329C91.5494 67.2594 67.9002 81.0572 58.3823 81.2368C51.4758 81.3672 49.5684 76.758 50.133 73.378C50.8387 69.153 63.4606 73.0733 65.3305 68.0672C68.3054 60.1025 76.3847 63.8064 83.967 65.5329Z" fill="#5CB1D6" stroke="#4C97FF"/>
|
||||||
|
<rect x="45" y="10" width="5" height="5" rx="2.5" fill="#4C97FF"/>
|
||||||
|
<rect x="44.5" y="9.5" width="6" height="6" rx="3" stroke="black" stroke-opacity="0.1"/>
|
||||||
|
<rect x="130" y="10" width="5" height="5" rx="2.5" fill="#4C97FF"/>
|
||||||
|
<rect x="129.5" y="9.5" width="6" height="6" rx="3" stroke="black" stroke-opacity="0.1"/>
|
||||||
|
<rect x="130" y="83" width="5" height="5" rx="2.5" fill="#4C97FF"/>
|
||||||
|
<rect x="129.5" y="82.5" width="6" height="6" rx="3" stroke="black" stroke-opacity="0.1"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M99.1338 84.2469L92.4994 106.824C92.0427 108.378 90.4551 109.244 88.9009 108.788L59.0437 100.014C58.3075 99.7976 57.4752 99.9085 56.8402 100.255L51.7599 103.028C51.1249 103.374 50.2926 103.485 49.5563 103.269L34.9959 98.9901C34.2597 98.7737 33.6196 98.2302 33.273 97.5952L30.5004 92.5149C30.1539 91.8799 29.5138 91.3364 28.7776 91.12L21.4156 88.9566C19.8613 88.4999 18.9949 86.9123 19.4516 85.3581L26.086 62.7812C26.5428 61.227 28.1303 60.3606 29.6845 60.8173L36.9648 62.9566C37.701 63.173 38.341 63.7165 38.6876 64.3515L41.518 69.5376C41.9463 70.1967 42.5046 70.7162 43.2408 70.9325L57.8013 75.2112C58.5375 75.4276 59.3698 75.3167 60.0049 74.9701L65.1909 72.1398C65.9078 71.8172 66.6583 71.6823 67.3945 71.8987L97.1699 80.6484C98.7241 81.1051 99.5905 82.6927 99.1338 84.2469Z" fill="#CF63CF"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M97.6389 98.7656L94.5979 102.138C93.9891 102.817 92.8574 102.39 92.8574 101.48V86.1899C92.8574 85.3292 93.8913 84.8801 94.53 85.4638L105.819 95.7697C106.488 96.3791 106.053 97.4851 105.142 97.4851H100.556L102.371 101.53C102.733 102.337 102.379 103.289 101.579 103.657C100.779 104.022 99.8364 103.665 99.4749 102.856L97.6389 98.7656Z" fill="#575E75"/>
|
||||||
|
<path d="M97.6389 98.7656L97.9924 98.607L97.7491 98.0648L97.3511 98.5062L97.6389 98.7656ZM94.5979 102.138L94.3101 101.879L94.3094 101.88L94.5979 102.138ZM94.53 85.4638L94.2686 85.7498L94.2688 85.7499L94.53 85.4638ZM105.819 95.7697L105.558 96.0559L105.558 96.0561L105.819 95.7697ZM100.556 97.4851V97.0976H99.9577L100.203 97.6437L100.556 97.4851ZM102.371 101.53L102.725 101.372L102.725 101.372L102.371 101.53ZM101.579 103.657L101.74 104.009L101.741 104.009L101.579 103.657ZM99.4749 102.856L99.8286 102.698L99.8284 102.698L99.4749 102.856ZM97.3511 98.5062L94.3101 101.879L94.8857 102.398L97.9267 99.0251L97.3511 98.5062ZM94.3094 101.88C93.9341 102.298 93.2449 102.028 93.2449 101.48H92.4699C92.4699 102.751 94.0441 103.336 94.8863 102.397L94.3094 101.88ZM93.2449 101.48V86.1899H92.4699V101.48H93.2449ZM93.2449 86.1899C93.2449 85.6732 93.8734 85.3886 94.2686 85.7498L94.7914 85.1777C93.9093 84.3716 92.4699 84.9852 92.4699 86.1899H93.2449ZM94.2688 85.7499L105.558 96.0559L106.08 95.4835L94.7913 85.1776L94.2688 85.7499ZM105.558 96.0561C105.959 96.4215 105.707 97.0976 105.142 97.0976V97.8726C106.398 97.8726 107.017 96.3367 106.08 95.4833L105.558 96.0561ZM105.142 97.0976H100.556V97.8726H105.142V97.0976ZM100.203 97.6437L102.017 101.689L102.725 101.372L100.91 97.3265L100.203 97.6437ZM102.017 101.689C102.293 102.304 102.022 103.027 101.417 103.305L101.741 104.009C102.736 103.552 103.172 102.37 102.725 101.372L102.017 101.689ZM101.418 103.304C100.815 103.58 100.103 103.312 99.8286 102.698L99.1211 103.014C99.5698 104.018 100.743 104.465 101.74 104.009L101.418 103.304ZM99.8284 102.698L97.9924 98.607L97.2854 98.9243L99.1213 103.015L99.8284 102.698Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 6.4 KiB |
7
static/images/onboarding/create-studios.svg
Normal file
7
static/images/onboarding/create-studios.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<svg width="95" height="95" viewBox="0 0 95 95" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0904 75.9757C35.3837 78.2711 74.3213 72.355 74.3213 72.355C78.0411 71.424 83.1675 70.4956 82.1002 69.253C74.6245 55.0978 74.3941 39.3354 70.1249 24.2736C69.9958 23.8182 69.5616 23.5195 69.0897 23.5569L12.5564 28.0459C12.5566 35.5495 14.1068 71.6458 23.0904 75.9757Z" fill="#E5F0FF"/>
|
||||||
|
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M27.3664 72.1932C37.7848 73.3532 70.2871 68.8356 70.2871 68.8356C73.4733 68.1847 77.8569 67.5062 76.974 66.7625C72.4488 58.2139 71.6298 48.1064 70.4206 39.5491C70.3469 39.0275 69.8789 38.6558 69.3539 38.6981L17.4372 42.8782C17.4372 47.8429 19.8078 69.7107 27.3664 72.1932Z" fill="#4C97FF"/>
|
||||||
|
<path d="M66.1682 31.144C64.9998 25.8974 64.5112 22.4897 64.2301 17.4159C64.205 16.9639 63.618 16.7973 63.364 17.172C63.2012 17.4119 62.8623 17.449 62.6515 17.25L62.1487 16.7755C61.9156 16.5555 61.5387 16.6085 61.3753 16.8841L61.0596 17.4168C60.8962 17.6925 60.5193 17.7455 60.2863 17.5255L59.836 17.1005C59.6029 16.8805 59.226 16.9335 59.0626 17.2092L58.7333 17.7649C58.5743 18.0331 58.2115 18.092 57.9758 17.888L57.7313 17.6763C57.4176 17.4047 56.9296 17.6133 56.9113 18.0278C56.6585 23.7459 57.2065 27.262 58.9265 32.6815C59.0564 33.0907 59.6077 33.1524 59.8265 32.7831L60.0251 32.448C60.1885 32.1723 60.5654 32.1194 60.7985 32.3393L61.2488 32.7644C61.4818 32.9843 61.8587 32.9314 62.0221 32.6557L62.3378 32.123C62.5012 31.8473 62.8781 31.7943 63.1112 32.0143L63.5615 32.4393C63.7945 32.6593 64.1714 32.6063 64.3348 32.3307L64.685 31.7398C64.834 31.4883 65.1728 31.4302 65.3973 31.6175C65.7463 31.9089 66.267 31.5878 66.1682 31.144Z" fill="#4C97FF" fill-opacity="0.25"/>
|
||||||
|
<path d="M27.2093 34.6018C26.5027 29.2734 26.3129 25.8361 26.475 20.757C26.4895 20.3046 25.9193 20.0875 25.6335 20.4386C25.4505 20.6634 25.1096 20.6709 24.9169 20.4543L24.4574 19.9377C24.2444 19.6982 23.8643 19.7181 23.6775 19.9785L23.3166 20.4817C23.1298 20.7421 22.7497 20.762 22.5367 20.5226L22.1252 20.0599C21.9122 19.8204 21.5321 19.8404 21.3453 20.1008L20.9687 20.6257C20.787 20.8789 20.4204 20.9061 20.2035 20.6823L19.9784 20.4501C19.6895 20.1522 19.1852 20.3174 19.1308 20.7288C18.3806 26.403 18.6201 29.9535 19.8612 35.5024C19.9549 35.9213 20.4987 36.0308 20.7489 35.682L20.976 35.3655C21.1628 35.1051 21.5428 35.0852 21.7558 35.3246L22.1674 35.7873C22.3804 36.0267 22.7605 36.0068 22.9473 35.7464L23.3082 35.2433C23.495 34.9829 23.8751 34.963 24.0881 35.2024L24.4996 35.6651C24.7126 35.9045 25.0927 35.8846 25.2795 35.6242L25.6798 35.0661C25.8502 34.8286 26.1928 34.8002 26.4 35.0064C26.7224 35.3271 27.2691 35.0526 27.2093 34.6018Z" fill="#4C97FF" fill-opacity="0.25"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.1183 62.2638C52.0037 61.7867 54.9781 59.8626 54.5268 56.1875C54.4153 55.2792 54.1584 54.5306 53.7693 53.9259L53.2354 48.6012C53.1634 48.0143 52.4279 47.7642 51.9832 48.1734L49.2468 50.6797C48.5095 50.4156 47.6191 50.3689 46.6721 50.4852C45.7281 50.6011 44.8901 50.86 44.2387 51.2946L40.9772 49.5248C40.432 49.2371 39.7788 49.6578 39.8657 50.2428L40.6359 55.5384C40.4031 56.2195 40.3364 57.0078 40.4479 57.9162C40.8992 61.5913 44.2344 62.7407 48.1183 62.2638ZM49.3181 59.8198C49.8957 59.7489 50.4117 59.4444 50.7295 58.9798C50.9123 58.746 50.8399 58.4131 50.581 58.2463C50.3371 58.0918 49.9845 58.1635 49.8067 58.4137C49.6649 58.6141 49.4405 58.7409 49.1894 58.7718C48.7167 58.8298 48.2732 58.5155 48.2165 58.0543L48.1222 57.2857C48.9516 56.957 49.5177 56.1938 49.4626 55.7453C49.394 55.1863 48.4633 55.3006 47.3405 55.4384C46.2044 55.5779 45.2885 55.6904 45.3571 56.2493C45.4122 56.6979 46.1166 57.3051 47.0125 57.4078L47.1086 58.1904C47.1652 58.6515 46.8272 59.0618 46.3529 59.12C46.0885 59.1525 45.8386 59.0839 45.654 58.9236C45.4343 58.7222 45.0763 58.7378 44.8623 58.9484C44.6514 59.1729 44.6765 59.5117 44.8956 59.6961C45.3164 60.07 45.8907 60.2406 46.4816 60.1681C47.0282 60.101 47.5032 59.8171 47.8297 59.4224C48.2286 59.728 48.7567 59.8887 49.3181 59.8198Z" fill="#E5F0FF"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4 KiB |
3
static/images/onboarding/heart-confetti.svg
Normal file
3
static/images/onboarding/heart-confetti.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="59" height="59" viewBox="0 0 59 59" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M58.9044 21.997C57.1803 41.4894 35.1024 56.8198 29.5019 56.8198C23.9015 56.8198 1.81974 41.4894 0.0993974 21.997C0.0496987 21.3611 0 20.7252 0 20.0893C0 10.6382 7.71859 2.9502 17.211 2.9502C22.028 2.9502 26.4053 4.90743 29.5019 8.14029C32.5985 4.90743 36.9758 2.9502 41.7928 2.9502C51.2814 2.9502 59 10.6382 59 20.0893C59 20.7252 58.9503 21.3611 58.9044 21.997Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 530 B |
9
static/images/onboarding/help-out.svg
Normal file
9
static/images/onboarding/help-out.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<svg width="95" height="95" viewBox="0 0 95 95" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g opacity="0.5">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M68.4001 47.0796C68.4001 57.1684 58.3863 65.3343 46.0001 65.3343C44.4019 65.3343 42.8286 65.2094 41.3303 64.9347L32.6827 69.6157C31.1144 70.4646 30.0758 69.7396 30.3633 67.9927L31.5163 60.9891C26.6717 57.6678 23.6001 52.6734 23.6001 47.0796C23.6001 36.9909 33.6389 28.8 46.0001 28.8C58.3863 28.8 68.4001 36.9909 68.4001 47.0796Z" fill="#FFAB19"/>
|
||||||
|
</g>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M47.0595 36.9626L49.4114 40.9665L54.044 41.3014C55.6224 41.4141 56.3848 43.2872 55.3356 44.4715L52.2518 47.9458L53.3668 52.4551C53.7462 53.9902 52.2 55.2948 50.751 54.6624L46.4939 52.8037L42.5502 55.2581C41.2062 56.0934 39.4892 55.0258 39.6414 53.452L40.0944 48.8289L36.5424 45.8366C35.3317 44.8165 35.8154 42.8528 37.3609 42.5132L41.898 41.5122L43.645 37.2106C44.2417 35.7461 46.2575 35.5996 47.0595 36.9626Z" fill="white" fill-opacity="0.5"/>
|
||||||
|
<g opacity="0.5">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M75.5894 64.9522L76.1397 67.4461L78.5062 68.4081C79.3128 68.7352 79.3934 69.8445 78.6435 70.2858L76.4402 71.5796L76.2576 74.1278C76.1954 74.9953 75.165 75.4152 74.5144 74.8383L72.6031 73.143L70.1232 73.7571C69.2783 73.9658 68.5614 73.1157 68.9083 72.3183L69.9305 69.9768L68.5805 67.8082C68.1204 67.0689 68.7069 66.1238 69.5731 66.2087L72.1166 66.4556L73.7611 64.502C74.3219 63.8372 75.4013 64.103 75.5894 64.9522Z" fill="#FFAB19"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
9
static/images/onboarding/invitation-illustration.svg
Normal file
9
static/images/onboarding/invitation-illustration.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<svg width="182" height="171" viewBox="0 0 182 171" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0 68.4579H181.14V165.008C181.14 165.671 181.009 166.328 180.756 166.94C180.502 167.553 180.13 168.11 179.661 168.579C179.192 169.048 178.635 169.42 178.023 169.673C177.41 169.927 176.753 170.058 176.09 170.058H5.05C3.71066 170.058 2.42617 169.526 1.47911 168.579C0.532052 167.632 0 166.347 0 165.008L0 68.4579Z" fill="#2E8EB8"/>
|
||||||
|
<path d="M0 68.458L87.52 2.03799C88.3942 1.36495 89.4666 1 90.5699 1C91.6733 1 92.7457 1.36495 93.62 2.03799L181.14 68.458H0Z" fill="#47A8D1"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M89.4076 95.3137C97.5898 95.3137 104.215 101.937 104.215 110.117C104.215 118.087 97.5898 124.71 89.4076 124.71C81.2518 124.71 74.7852 118.087 74.7852 110.117C74.7852 101.937 81.2518 95.3137 89.4076 95.3137Z" fill="#FFBF00"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M83.94 85.2861C80.7463 85.2861 78.1333 82.7793 78.0277 79.5863C78.0277 79.0322 78.0013 78.4252 78.0013 77.8183C78.0013 69.8227 81.2478 61.1675 90.9609 53.8844L99.6182 47.4193C104.211 44.0152 105.715 39.9251 105.715 35.4919C105.715 28.8685 100.806 22.4298 90.5914 22.4298C80.7463 22.4298 74.966 30.4254 74.966 38.3946V38.5265C74.966 41.8778 72.2474 44.5694 68.8953 44.4374L56.7012 44.0152C53.613 43.9097 51.1584 41.3764 51.0264 38.289C51.0264 37.7349 51 37.2071 51 36.6794C51 16.8092 65.7808 0 90.5914 0C118.121 0 131.898 16.4925 131.898 33.46C131.898 47.0763 125.59 56.3912 115.402 64.0438L108.962 68.7936C104.211 72.356 100.648 75.892 99.4071 81.064C98.7736 83.6237 96.319 85.2861 93.6795 85.2861H83.94Z" fill="#FFBF00"/>
|
||||||
|
<path d="M0 115.578H181.14V165.008C181.14 165.671 181.009 166.328 180.756 166.94C180.502 167.553 180.13 168.11 179.661 168.579C179.192 169.048 178.635 169.42 178.023 169.673C177.41 169.927 176.753 170.058 176.09 170.058H5.05C3.71066 170.058 2.42617 169.526 1.47911 168.579C0.532052 167.632 0 166.347 0 165.008L0 115.578Z" fill="#47A8D1"/>
|
||||||
|
<path d="M0 68.4579L64.44 109.778C65.0932 110.198 65.6343 110.772 66.0167 111.448C66.3991 112.124 66.6112 112.883 66.6348 113.66C66.6584 114.436 66.4929 115.207 66.1523 115.905C65.8117 116.603 65.3064 117.208 64.68 117.668L0 164.988V68.4579Z" fill="#5CB1D6"/>
|
||||||
|
<path d="M181.141 68.4579L116.701 109.778C116.048 110.198 115.507 110.772 115.124 111.448C114.742 112.124 114.53 112.883 114.506 113.66C114.483 114.436 114.648 115.207 114.989 115.905C115.329 116.603 115.834 117.208 116.461 117.668L181.141 164.988V68.4579Z" fill="#5CB1D6"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.5 KiB |
3
static/images/onboarding/left-lines.svg
Normal file
3
static/images/onboarding/left-lines.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="69" height="79" viewBox="0 0 69 79" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M67.5 22L17.5 2M67.5 43H2M67.5 61.5L31 77" stroke="#FFBF00" stroke-width="3" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 214 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 59 KiB |
3
static/images/onboarding/right-lines.svg
Normal file
3
static/images/onboarding/right-lines.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="69" height="79" viewBox="0 0 69 79" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M2 22L52 2M2 43H67.5M2 61.5L38.5 77" stroke="#FFBF00" stroke-width="3" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 208 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 11 KiB |
18
static/images/onboarding/spiral-confetti.svg
Normal file
18
static/images/onboarding/spiral-confetti.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<svg width="67" height="67" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g filter="url(#filter0_d_1154_13046)">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9967 45.1305C5.99892 36.9346 5.59074 25.9968 9.99448 17.3259C14.5575 8.00641 22.2367 3.87569 25.3229 2.53264C27.178 1.67111 29.1327 0.999586 31.2366 0.504948L33.3008 0.0594462C34.8174 -0.25175 36.3273 0.68839 36.6558 2.18868C36.9877 3.69225 36.022 5.17289 34.4988 5.50047L32.491 5.93286C30.8218 6.32595 29.2223 6.87628 27.6625 7.6035C25.6349 8.4814 18.9281 11.8783 15.0586 19.786C12.1217 25.5612 11.2456 34.7431 15.8683 42.3199C20.0564 49.6183 28.6315 54.0929 36.7654 53.3395C44.4578 52.7859 51.5164 47.6659 53.992 40.8851C56.5042 34.5072 54.835 27.9688 52.0772 24.2869C48.7553 19.75 44.6204 18.3545 42.9976 17.9647C42.7554 17.8926 37.074 16.186 32.0563 18.6985C29.8959 19.7336 27.1017 22.0627 25.605 25.5612C23.9889 29.1743 24.407 33.8193 26.5973 36.9051C28.8008 40.2136 32.9556 42.0873 36.5297 41.4518C40.0872 40.8917 42.4932 38.2449 43.064 35.9191C43.7343 33.4197 42.7056 31.3068 41.9025 30.5468C40.5386 29.2005 39.3605 29.1776 39.3107 29.1743C38.7532 29.1579 38.4777 29.2005 38.3118 29.2267C37.6746 29.4593 36.772 29.9703 36.5065 30.5075C36.46 30.596 36.3406 30.8384 36.5696 31.4444C37.1171 32.8825 36.3771 34.4908 34.9202 35.0313C33.47 35.5751 31.8373 34.8446 31.2864 33.4033C30.3804 31.0186 30.8815 29.1514 31.4623 28.0049C32.9789 25.0207 36.4999 23.9397 36.8981 23.825C37.0806 23.7693 37.2731 23.7366 37.4623 23.7202C37.8505 23.6612 38.5342 23.5695 39.46 23.6055C41.5806 23.6317 43.9965 24.7389 45.8483 26.5701C48.0352 28.6338 49.7476 32.7809 48.533 37.2883C47.3483 42.1135 42.7952 46.1034 37.4822 46.9387C31.7676 47.9575 25.3329 45.1403 21.9347 40.0334C18.6593 35.431 18.032 28.696 20.4281 23.3533C23.0564 17.2014 28.0773 14.4171 29.5508 13.7095C36.6359 10.1717 44.2089 12.5073 44.5275 12.6056C46.5651 13.0871 52.2299 14.9838 56.6336 21.0013C60.0186 25.5284 62.763 33.9831 59.2752 42.8342C56.0894 51.5575 47.0197 58.1843 37.2399 58.8886C36.4733 58.9607 35.6968 59 34.9236 59C25.4325 59 15.8186 53.5295 10.9967 45.1305Z" fill="black"/>
|
||||||
|
<path d="M4 0V-1H3V0H4ZM63 0H64V-1H63V0ZM63 59V60H64V59H63ZM4 59H3V60H4V59ZM4 1H63V-1H4V1ZM62 0V59H64V0H62ZM63 58H4V60H63V58ZM5 59V0H3V59H5Z" fill="black"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_1154_13046" x="0" y="0" width="67" height="67" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="4"/>
|
||||||
|
<feGaussianBlur stdDeviation="2"/>
|
||||||
|
<feComposite in2="hardAlpha" operator="out"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1154_13046"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1154_13046" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.9 KiB |
3
static/images/onboarding/star-confetti.svg
Normal file
3
static/images/onboarding/star-confetti.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="59" height="59" viewBox="0 0 59 59" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.549 3.1361L40.613 15.4191L54.1718 17.3947C58.7918 18.0636 60.6345 23.7378 57.2946 26.9979L47.4788 36.5612L49.7954 50.0668C50.5839 54.6646 45.7557 58.1728 41.6274 56.0024L29.4994 49.6239L17.3714 56.0024C13.2386 58.1728 8.4149 54.6646 9.19893 50.0668L11.52 36.5612L1.70862 26.9979C-1.63567 23.7378 0.20701 18.0636 4.82699 17.3947L18.3902 15.4191L24.4497 3.1361C26.5183 -1.04537 32.4805 -1.04537 34.549 3.1361Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 580 B |
Loading…
Reference in a new issue