scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-26 00:58:14 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

[WIP] Draft 3.0 Launch banner

Browse source 
Started transition to ‘featured’ banner that is somewhat reusable. However, middle and smallTop banners are still based on beta. They’re not used for 3.0 launch.
This commit is contained in:
chrisgarrity 2018-12-12 11:35:41 -05:00
parent 9d5788cc77
commit 79449ac547
23 changed files with 670 additions and 499 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/_colors.scss
View file

@ -9,6 +9,8 @@ $ui-orange-high-contrast: hsla(30, 100, 55, 1); // #FFAB19 Control Primary
$ui-orange-10percent: hsla(35, 90, 55, .1); $ui-orange-10percent: hsla(35, 90, 55, .1);
$ui-orange-25percent: hsla(35, 90, 55, .25); $ui-orange-25percent: hsla(35, 90, 55, .25);
$ui-dark-orange: hsla(30, 100, 55, 1); // ##FF8C1A Variables Primary
$ui-red: hsla(20, 100%, 55%, 1); /* #FF661A */ $ui-red: hsla(20, 100%, 55%, 1); /* #FF661A */
$ui-red-25percent: hsla(20, 100%, 55%, .25); $ui-red-25percent: hsla(20, 100%, 55%, .25);
$ui-green-35percent: rgba(126, 225, 195, .35); $ui-green-35percent: rgba(126, 225, 195, .35);

43
src/views/splash/beta/middle-banner.jsx
View file

@ -1,43 +0,0 @@
const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const React = require('react');
const MediaQuery = require('react-responsive').default;
const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
const frameless = require('../../../lib/frameless');
require('./middle-banner.scss');
const MiddleBanner = () => (
<TitleBanner className="beta-middle-banner">
<FlexRow className="beta-middle-container column">
<h2 className="beta-header">
<FormattedMessage id="betabanner.title" />
</h2>
<h3 className="beta-copy">
<FormattedMessage id="betabanner.subtitle" />
</h3>
<a
className="beta-try-it button"
href="https://beta.scratch.mit.edu/"
>
<FormattedMessage id="betabanner.callToAction" />
</a>
</FlexRow>
<div className="beta-banner-images">
<MediaQuery maxWidth={frameless.desktop - 1}>
<div className="beta-banner-image left">
<img src="/images/beta/left-illustration.png" />
</div>
</MediaQuery>
<div className="beta-banner-image right">
<img src="/images/beta/right-illustration.png" />
</div>
</div>
</TitleBanner>
);
module.exports = injectIntl(MiddleBanner);

37
src/views/splash/beta/top-banner.jsx
View file

@ -1,37 +0,0 @@
const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const React = require('react');
const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
require('./top-banner.scss');
const TopBanner = () => (
<TitleBanner className="beta-top-banner">
<FlexRow className="beta-top-container column">
<h1 className="beta-header">
<FormattedMessage id="betabanner.title" />
</h1>
<h3 className="beta-copy">
<FormattedMessage id="betabanner.subtitle" />
</h3>
<a
className="beta-try-it button"
href="https://beta.scratch.mit.edu/"
>
<FormattedMessage id="betabanner.callToAction" />
</a>
</FlexRow>
<div className="beta-banner-images">
<div className="beta-banner-image left">
<img src="/images/beta/left-illustration.png" />
</div>
<div className="beta-banner-image right">
<img src="/images/beta/right-illustration.png" />
</div>
</div>
</TitleBanner>
);
module.exports = injectIntl(TopBanner);

84
src/views/splash/beta/top-banner.scss
View file

@ -1,84 +0,0 @@
@import "../../../colors";
@import "../../../frameless";
.beta-top-banner {
display: flex;
position: relative;
background-color: $ui-orange;
background-image: url("/images/beta/bg-pattern.png");
background-size: cover;
padding: 0;
height: 20rem;
overflow: hidden;
justify-content: center;
.beta-top-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
height: 15rem;
}
.beta-banner-images {
display: flex;
width: 100%;
justify-content: space-between;
}
.beta-banner-image {
display: flex;
width: 27rem;
align-self: flex-end;
img {
max-width: 100%;
height: auto;
align-self: flex-end;
}
&.left {
margin-left: -2.5rem;
}
&.right {
margin-right: -2.5rem;
}
}
.beta-header,
.beta-copy,
.beta-try-it {
color: $ui-white;
}
.beta-header {
font-size: 2.2rem;
}
.beta-copy {
font-size: 1.3rem;
}
.beta-try-it {
border-radius: 10px;
padding: 1em 2em;
font-size: 1em;
}
}
@media only screen and (min-width: $tablet) and (max-width: 1200px) {
.beta-top-banner {
height: 22rem;
.beta-top-container {
bottom: 4rem;
}
.beta-banner-image {
width: 20rem;
}
}
}

43
src/views/splash/feature/middle-banner.jsx Normal file
View file

@ -0,0 +1,43 @@
const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const React = require('react');
const MediaQuery = require('react-responsive').default;
const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
const frameless = require('../../../lib/frameless');
require('./middle-banner.scss');
const MiddleBanner = () => (
<TitleBanner className="feature-middle-banner">
<FlexRow className="feature-middle-container column">
<h2 className="feature-header">
<FormattedMessage id="featureBanner.title" />
</h2>
<h3 className="feature-copy">
<FormattedMessage id="featureBanner.subtitle" />
</h3>
<a
className="feature-call-to-action button"
href="https://scratch.mit.edu/"
>
<FormattedMessage id="featureBanner.callToAction" />
</a>
</FlexRow>
<div className="feature-banner-images">
<MediaQuery maxWidth={frameless.desktop - 1}>
<div className="feature-banner-image left">
<img src="/images/feature/left-illustration.png" />
</div>
</MediaQuery>
<div className="feature-banner-image right">
<img src="/images/feature/right-illustration.png" />
</div>
</div>
</TitleBanner>
);
module.exports = injectIntl(MiddleBanner);

30
src/views/splash/beta/middle-banner.scss → src/views/splash/feature/middle-banner.scss
View file

@ -1,12 +1,12 @@
@import "../../../colors"; @import "../../../colors";
@import "../../../frameless"; @import "../../../frameless";
.beta-middle-banner { .feature-middle-banner {
display: flex; display: flex;
margin-top: 20px; margin-top: 20px;
border-radius: 16px; border-radius: 16px;
background-color: $ui-orange; background-color: $ui-orange;
background-image: url("/images/beta/bg-pattern.png"); background-image: url("/images/feature/bg-pattern.png");
background-size: cover; background-size: cover;
padding: 0; padding: 0;
height: 17rem; height: 17rem;
@ -14,18 +14,18 @@
box-sizing: border-box; box-sizing: border-box;
justify-content: space-between; justify-content: space-between;
.beta-middle-container { .feature-middle-container {
padding-left: 3rem; padding-left: 3rem;
align-items: flex-start; align-items: flex-start;
flex-shrink: 0; flex-shrink: 0;
} }
.beta-banner-images { .feature-banner-images {
display: flex; display: flex;
height: 100%; height: 100%;
align-self: flex-end; align-self: flex-end;
.beta-banner-image { .feature-banner-image {
display: flex; display: flex;
margin-right: 2rem; margin-right: 2rem;
min-width: 0; min-width: 0;
@ -41,24 +41,24 @@
} }
} }
.beta-header, .feature-header,
.beta-copy, .feature-copy,
.beta-try-it { .feature-call-to-action {
color: $ui-white; color: $ui-white;
} }
.beta-header { .feature-header {
font-size: 1.7rem; font-size: 1.7rem;
} }
.beta-copy { .feature-copy {
margin-bottom: 1rem; margin-bottom: 1rem;
max-width: 350px; max-width: 350px;
line-height: 1.7rem; line-height: 1.7rem;
font-size: 1.3rem; font-size: 1.3rem;
} }
.beta-try-it { .feature-call-to-action {
border-radius: 10px; border-radius: 10px;
padding: 1em 2em; padding: 1em 2em;
font-size: 1em; font-size: 1em;
@ -66,21 +66,21 @@
} }
@media #{$intermediate} { @media #{$intermediate} {
.beta-middle-banner { .feature-middle-banner {
margin: 20px auto 40px auto; margin: 20px auto 40px auto;
width: $cols8; width: $cols8;
height: initial; height: initial;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
.beta-middle-container { .feature-middle-container {
padding-top: 4rem; padding-top: 4rem;
padding-left: 0; padding-left: 0;
align-items: center; align-items: center;
} }
.beta-banner-images { .feature-banner-images {
.beta-banner-image { .feature-banner-image {
margin: 0; margin: 0;
padding: 0; padding: 0;

14
src/views/splash/beta/small-top-banner.jsx → src/views/splash/feature/small-top-banner.jsx
View file

@ -8,16 +8,16 @@ const TitleBanner = require('../../../components/title-banner/title-banner.jsx')
require('./small-top-banner.scss'); require('./small-top-banner.scss');
const SmallTopBanner = () => ( const SmallTopBanner = () => (
<TitleBanner className="beta-small-top-banner"> <TitleBanner className="small-top-banner">
<FlexRow className="beta-small-top-container"> <FlexRow className="small-top-container">
<h2 className="beta-copy"> <h2 className="copy">
<FormattedMessage id="betabanner.subtitle" /> <FormattedMessage id="topBanner.subtitle" />
</h2> </h2>
<a <a
className="beta-try-it button" className="call-to-action button"
href="https://beta.scratch.mit.edu/" href="https://scratch.mit.edu/"
> >
<FormattedMessage id="betabanner.callToAction" /> <FormattedMessage id="topBanner.callToAction" />
</a> </a>
</FlexRow> </FlexRow>
</TitleBanner> </TitleBanner>

12
src/views/splash/beta/small-top-banner.scss → src/views/splash/feature/small-top-banner.scss
View file

@ -1,24 +1,24 @@
@import "../../../colors"; @import "../../../colors";
.beta-small-top-banner { .small-top-banner {
background: $ui-orange; background: $ui-orange;
padding: 5px 0; padding: 5px 0;
.beta-small-top-container { .small-top-container {
justify-content: center; justify-content: center;
} }
.beta-copy, .copy,
.beta-try-it { .call-to-action {
color: $ui-white; color: $ui-white;
font-weight: 500; font-weight: 500;
} }
.beta-copy { .copy {
font-size: 1.1rem; font-size: 1.1rem;
} }
.beta-try-it { .call-to-action {
margin-left: 32px; margin-left: 32px;
border-radius: 8px; border-radius: 8px;
padding: .625rem 1.2rem; padding: .625rem 1.2rem;

46
src/views/splash/feature/top-banner.jsx Normal file
View file

@ -0,0 +1,46 @@
const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const React = require('react');
const PropTypes = require('prop-types');
const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
require('./top-banner.scss');
const TopBanner = props => (
<TitleBanner className="feature-top-banner">
<FlexRow className="feature-top-container column">
<h1 className="feature-header">
<FormattedMessage id="featureBanner.title" />
</h1>
{/* <h3 className="feature-copy">
<FormattedMessage id="featureBanner.subtitle" />
</h3> */}
<a
className="feature-call-to-action button"
href={props.actionLink}
>
<FormattedMessage id="featureBanner.callToAction" />
</a>
</FlexRow>
<div className="feature-banner-images">
<div className="feature-banner-image left">
<img src="/svgs/feature/illustration-left.svg" />
</div>
<div className="feature-banner-image right">
<img src="/svgs/feature/illustration-right.svg" />
</div>
</div>
</TitleBanner>
);
TopBanner.propTypes = {
actionLink: PropTypes.string
};
TopBanner.defaultProps = {
actionLink: 'https://scratch.mit.edu'
};
module.exports = injectIntl(TopBanner);

210
src/views/splash/feature/top-banner.scss Normal file
View file

@ -0,0 +1,210 @@
@import "../../../colors";
@import "../../../frameless";
.feature-top-banner {
display: flex;
position: relative;
background-color: $ui-blue;
// background-image: url("/images/feature/bg-pattern.png");
background-size: cover;
padding: 0;
height: 22rem;
// overflow: hidden; // if banner shouldn't have things that break the edges
justify-content: center;
.feature-top-container {
position: absolute;
top: 0;
right: 20%;
bottom: 0;
left: 20%;
margin: auto;
justify-content: center;
align-items: flex-start;
height: 20rem;
}
.feature-banner-images {
display: flex;
width: 100%;
justify-content: space-between;
}
.feature-banner-image {
display: flex;
align-self: flex-end;
img {
max-width: 100%;
height: auto;
align-self: flex-end;
}
&.left {
margin: auto 0;
width: 14rem;
}
&.right {
width: 30rem;
}
}
.feature-header,
.feature-copy,
.feature-call-to-action {
color: $ui-white;
}
.feature-header {
margin-bottom: .75rem;
font-size: 4rem;
line-height: 4.2rem;
width: 80%;
}
.feature-copy {
font-size: 1.3rem;
}
.feature-call-to-action {
border-radius: 4px;
background-color: $ui-dark-orange;
padding: 1rem 1.5rem;
font-size: 1rem;
&:before {
display: inline-block;
margin-right: .5rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url("/svgs/feature/create-icon.svg");
width: 1.5rem;
height: 1.5rem;
vertical-align: -.35rem;
content: "";
}
}
}
@media only screen and (min-width: $desktop) {
.feature-banner-image {
&.right:after {
display: block;
position: absolute;
bottom: -42px;
right: 33%;
background-image: url("/svgs/feature/tapping-block.svg");
background-repeat: no-repeat;
width: 122px;
height: 81px;
content: "";
}
}
}
@media only screen and (min-width: $tablet) {
.feature-top-banner {
margin-bottom: 80px; // double the normal banner 40px for the notch
&:after{
display: block;
position: absolute;
bottom: -46px;
left: 48px;
background-image: url("/svgs/feature/banner-notch.svg");
background-repeat: no-repeat;
width: 433px;
height: 56px;
content: "";
}
}
}
@media only screen and (max-width: $desktop - 1) {
.feature-top-banner {
.feature-header {
text-align: left; // override #view text centering
}
.feature-banner-images {
justify-content: flex-end;
}
.feature-banner-image {
&.left {
display: none;
}
}
}
}
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
.feature-top-banner {
.feature-top-container {
left: 4rem;
}
.feature-banner-image {
&.right {
margin-right: -8rem;
}
}
}
}
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
.feature-top-banner {
.feature-top-container {
left: 2rem;
}
.feature-banner-image {
&.right {
margin-right: -12rem;
}
}
}
}
@media only screen and (max-width: $mobile - 1) {
.feature-top-banner {
overflow: hidden;
height: 32rem;
.feature-top-container {
right: 0;
left: 0;
height: 30rem;
justify-content: flex-start;
align-items: center;
}
.feature-header {
margin: 2rem 0;
text-align: center;
}
.feature-banner-image {
&.right {
margin-right: 0;
margin-bottom: -8rem;
width: 100%;
}
}
}
}
@media only screen and (min-width: $tablet) and (max-width: 1200px) {
// .feature-top-banner {
// height: 22rem;
//
// .feature-top-container {
// bottom: 4rem;
// }
//
// .feature-banner-image {
// width: 20rem;
// }
// }
}

113
src/views/splash/hoc/hoc-banner.scss
View file

@ -1,113 +0,0 @@
@import "../../../colors";
@import "../../../frameless";
$tile-height: 244px;
.hoc-banner {
display: flex;
position: relative;
background-color: $ui-aqua;
background-image: url("/images/hoc/bg-pattern.png");
background-size: cover;
padding: 0;
height: 25rem;
overflow: hidden;
justify-content: center;
&.mod-middle-banner {
background-color: $ui-purple;
}
.hoc-container {
margin: auto;
width: $desktop;
height: 25rem;
justify-content: flex-start;
.hoc-title-container {
margin: 1.5rem 0;
width: 100%;
justify-content: space-between;
}
}
.hoc-banner-images {
display: flex;
width: $desktop;
justify-content: space-between;
}
.hoc-banner-image {
border: 2px solid $ui-aqua;
border-radius: 16px;
background-color: $ui-white;
width: $cols4;
height: $tile-height;
overflow: hidden;
box-sizing: border-box;
justify-content: flex-start;
&.mod-middle-image {
border: 2px solid $ui-purple;
}
img {
width: $cols4;
height: auto;
}
.hoc-image-text {
margin: auto auto;
color: $ui-blue;
font-size: 1rem;
font-weight: bold;
}
}
.hoc-header{
color: $ui-white;
}
.hoc-header {
font-size: 2rem;
}
.hoc-more-activities {
border-radius: 10px;
background-color: $ui-white;
padding: .5rem 1rem .75rem 1rem;
color: $ui-blue;
font-size: .75rem;
font-weight: bold;
img {
margin-right: .25rem;
width: 20px;
height: 20px;
vertical-align: text-bottom;
}
}
}
@media only screen and (min-width: $tablet) and (max-width: $desktop) {
.hoc-banner {
height: 23.5rem;
.hoc-container {
bottom: 4rem;
width: $tablet;
}
.hoc-banner-images {
width: $tablet;
}
.hoc-banner-image {
width: $cols4;
}
}
.hoc-hideable {
display: none;
}
}

63
src/views/splash/hoc/middle-banner.jsx
View file

@ -1,63 +0,0 @@
const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const React = require('react');
const MediaQuery = require('react-responsive').default;
const frameless = require('../../../lib/frameless');
const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
require('./hoc-banner.scss');
const MiddleBanner = () => (
<TitleBanner className="hoc-banner mod-middle-banner">
<FlexRow className="hoc-container column">
<FlexRow className="hoc-title-container">
<h1 className="hoc-header">
<FormattedMessage id="hocbanner.title" />
</h1>
<a
className="hoc-more-activities button"
href="/tips"
>
<img src="/svgs/tutorials.svg" />
<FormattedMessage id="hocbanner.moreActivities" />
</a>
</FlexRow>
<FlexRow className="hoc-banner-images">
<a href="/projects/editor/?tip_bar=name">
<FlexRow className="hoc-banner-image mod-middle-image column">
<img src="/images/ttt/animate-your-name.jpg" />
<div className="hoc-image-text">
<FormattedMessage id="hocbanner.name" />
</div>
</FlexRow>
</a>
<a href="/projects/editor/?tip_bar=fly">
<FlexRow className="hoc-banner-image mod-middle-image column">
<img src="/images/ttt/make-it-fly.jpg" />
<div className="hoc-image-text">
<FormattedMessage id="hocbanner.fly" />
</div>
</FlexRow>
</a>
<MediaQuery
key="frameless-desktop"
minWidth={frameless.desktop}
>
<a href="/projects/editor/?tip_bar=pong">
<FlexRow className="hoc-banner-image mod-middle-image column">
<img src="/images/ttt/pong-game.jpg" />
<div className="hoc-image-text">
<FormattedMessage id="hocbanner.pong" />
</div>
</FlexRow>
</a>
</MediaQuery>
</FlexRow>
</FlexRow>
</TitleBanner>
);
module.exports = injectIntl(MiddleBanner);

63
src/views/splash/hoc/top-banner.jsx
View file

@ -1,63 +0,0 @@
const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const React = require('react');
const MediaQuery = require('react-responsive').default;
const frameless = require('../../../lib/frameless');
const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
require('./hoc-banner.scss');
const TopBanner = () => (
<TitleBanner className="hoc-banner">
<FlexRow className="hoc-container column">
<FlexRow className="hoc-title-container">
<h1 className="hoc-header">
<FormattedMessage id="hocbanner.title" />
</h1>
<a
className="hoc-more-activities button"
href="https://beta.scratch.mit.edu/?tutorial=all"
>
<img src="/svgs/tutorials.svg" />
<FormattedMessage id="hocbanner.moreActivities" />
</a>
</FlexRow>
<FlexRow className="hoc-banner-images">
<MediaQuery
key="frameless-desktop"
minWidth={frameless.desktop}
>
<a href="https://beta.scratch.mit.edu/?tutorial=getStarted">
<FlexRow className="hoc-banner-image column">
<img src="/images/hoc/getting-started.jpg" />
<div className="hoc-image-text">
<FormattedMessage id="hocbanner.gettingStarted" />
</div>
</FlexRow>
</a>
</MediaQuery>
<a href="https://beta.scratch.mit.edu/?tutorial=animations-that-talk">
<FlexRow className="hoc-banner-image column">
<img src="/images/hoc/create-animations-that-talk.png" />
<div className="hoc-image-text">
<FormattedMessage id="hocbanner.animationTalk" />
</div>
</FlexRow>
</a>
<a href="https://beta.scratch.mit.edu/?tutorial=animate-an-adventure-game#249143200">
<FlexRow className="hoc-banner-image column">
<img src="/images/hoc/create-an-adventure-game.jpg" />
<div className="hoc-image-text">
<FormattedMessage id="hocbanner.adventureGame" />
</div>
</FlexRow>
</a>
</FlexRow>
</FlexRow>
</TitleBanner>
);
module.exports = injectIntl(TopBanner);

15
src/views/splash/l10n.json
View file

@ -41,16 +41,7 @@
"welcome.tryOut": "Try out starter projects", "welcome.tryOut": "Try out starter projects",
"welcome.connect": "Connect with other Scratchers", "welcome.connect": "Connect with other Scratchers",
"betabanner.title": "The Next Generation of Scratch", "featureBanner.title": "The new Scratch is here!",
"betabanner.subtitle": "Scratch 3.0 is coming in January! Try the Beta version now.", "featureBanner.subtitle": "not used",
"betabanner.callToAction": "Try it!", "featureBanner.callToAction": "Start Creating"
"hocbanner.title": "Get Creative with Coding!",
"hocbanner.moreActivities": "See more activities",
"hocbanner.gettingStarted": "Getting Started",
"hocbanner.animationTalk": "Create Animations that Talk",
"hocbanner.adventureGame": "Animate an Adventure Game",
"hocbanner.name": "Animate a Name",
"hocbanner.fly": "Make it Fly",
"hocbanner.pong": "Pong Game"
} }

98
src/views/splash/presentation.jsx
View file

@ -31,20 +31,13 @@ const LoveProjectMessage = require('./activity-rows/love-project.jsx');
const RemixProjectMessage = require('./activity-rows/remix-project.jsx'); const RemixProjectMessage = require('./activity-rows/remix-project.jsx');
const ShareProjectMessage = require('./activity-rows/share-project.jsx'); const ShareProjectMessage = require('./activity-rows/share-project.jsx');
// Beta Banner Components // Featured Banner Components
// const TopBanner = require('./beta/top-banner.jsx'); const TopBanner = require('./feature/top-banner.jsx');
const SmallTopBanner = require('./beta/small-top-banner.jsx'); const SmallTopBanner = require('./feature/small-top-banner.jsx');
// const MiddleBanner = require('./beta/middle-banner.jsx'); const MiddleBanner = require('./feature/middle-banner.jsx');
const BETA_LAUNCH_TIME = 1533128400000; // August 1 at 9am ET // Scratch 3.0 Launch Banner
const SMALL_BANNER_TIME = 1534942800000; // August 22 at 9am ET const LAUNCH_END_TIME = 1547873999000;
// Hour of Code Banner Components
const TopBanner = require('./hoc/top-banner.jsx');
const MiddleBanner = require('./hoc/middle-banner.jsx');
const HOC_START_TIME = 1543813201000; // 12:01 am Dec 3rd
const HOC_END_TIME = 1544806799000; // 11:59 Dec 14th
require('./splash.scss'); require('./splash.scss');
@ -238,7 +231,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
} }
} }
} }
renderHomepageRows () { renderHomepageRows (showBanner) {
const rows = [ const rows = [
<Box <Box
key="community_featured_projects" key="community_featured_projects"
@ -285,6 +278,21 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
</Box> </Box>
); );
} }
if (
this.props.sessionStatus === sessionActions.Status.FETCHED &&
Object.keys(this.props.user).length === 0 &&
showBanner // Show middle banner
) {
rows.push(
<MediaQuery
key="frameless-tablet"
minWidth={frameless.tablet}
>
<MiddleBanner />
</MediaQuery>
);
}
if (this.props.featuredGlobal.scratch_design_studio && if (this.props.featuredGlobal.scratch_design_studio &&
this.props.featuredGlobal.scratch_design_studio.length > 4) { this.props.featuredGlobal.scratch_design_studio.length > 4) {
@ -361,7 +369,10 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
return rows; return rows;
} }
render () { render () {
const featured = this.renderHomepageRows(); const ShowTopBanner = Date.now() < LAUNCH_END_TIME;
const ShowMiddleBanner = false;
const ShowSmallTopBanner = false;
const featured = this.renderHomepageRows(ShowMiddleBanner);
const formatHTMLMessage = this.props.intl.formatHTMLMessage; const formatHTMLMessage = this.props.intl.formatHTMLMessage;
const formatNumber = this.props.intl.formatNumber; const formatNumber = this.props.intl.formatNumber;
@ -433,27 +444,26 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
] : []} ] : []}
{ {
this.props.sessionStatus === sessionActions.Status.FETCHED && this.props.sessionStatus === sessionActions.Status.FETCHED &&
Object.keys(this.props.user).length === 0 && // Only show top banner if user is not logged in Object.keys(this.props.user).length === 0 && // if user is not logged in
Date.now() >= HOC_START_TIME && ShowTopBanner &&
Date.now() < HOC_END_TIME &&
<MediaQuery <MediaQuery
key="frameless-tablet" key="frameless-tablet"
minWidth={frameless.tablet} minWidth={0}
> >
<TopBanner /> <TopBanner actionLink="/create" />
</MediaQuery> </MediaQuery>
} }
{ {
this.props.sessionStatus === sessionActions.Status.FETCHED && this.props.sessionStatus === sessionActions.Status.FETCHED &&
Object.keys(this.props.user).length !== 0 && // Only show top banner if user is logged in Object.keys(this.props.user).length !== 0 && // if user is logged in
Date.now() >= BETA_LAUNCH_TIME && ShowTopBanner &&
<MediaQuery <MediaQuery
key="frameless-tablet" key="frameless-tablet"
minWidth={frameless.tablet} minWidth={0}
> >
{Date.now() >= SMALL_BANNER_TIME ? {ShowSmallTopBanner ?
<SmallTopBanner /> : // Show small banner starting September 1 at 9am ET <SmallTopBanner /> :
<TopBanner /> <TopBanner actionLink="/projects/editor/?tutorial=whatsnew" />
} }
</MediaQuery> </MediaQuery>
} }
@ -492,41 +502,17 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
minWidth={frameless.desktop} minWidth={frameless.desktop}
> >
{ {
(Date.now() < HOC_START_TIME || // Hide intro if HoC banner is showing !ShowTopBanner && // show intro if not showing top banner
Date.now() > HOC_END_TIME) ? <Intro
[ key="intro"
<Intro messages={messages}
key="intro" projectCount={this.props.projectCount}
messages={messages} />
projectCount={this.props.projectCount}
/>
] :
[]
} }
</MediaQuery> </MediaQuery>
]) : [] ]) : []
} }
{featured.shift()}
{featured.shift()}
</div>
{
this.props.sessionStatus === sessionActions.Status.FETCHED &&
Object.keys(this.props.user).length !== 0 && // Only show if user is logged in
Date.now() >= HOC_START_TIME && // Show middle banner on and after Dec 3
Date.now() < HOC_END_TIME && // Hide middle banner after Dec 14
<MediaQuery
key="frameless-desktop"
minWidth={frameless.tablet}
>
<MiddleBanner />
</MediaQuery>
}
<div
className="inner mod-splash"
key="inner2"
>
{featured} {featured}
{this.props.isAdmin && ( {this.props.isAdmin && (

BIN
static/images/beta/left-illustration.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 65 KiB

BIN
static/images/beta/right-illustration.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 68 KiB

0
static/images/beta/bg-pattern.png → static/images/feature/bg-pattern.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 167 KiB

After

Width:  |  Height:  |  Size: 167 KiB

9
static/svgs/feature/banner-notch.svg Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="433px" height="56px" viewBox="0 0 433 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Path 2</title>
<desc>Created with Sketch.</desc>
<g id="Sketches" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M2.84217094e-14,9.78690955 L42.1439577,9.78690955 C55.3965552,9.78690955 68.1070542,15.0482355 77.4825045,24.4147862 L93.8502604,40.7670053 C103.225711,50.1335561 115.93621,55.394882 129.188807,55.394882 L296.203618,55.394882 C309.456216,55.394882 322.166715,50.1335561 331.542165,40.7670053 L347.719506,24.6050209 C357.094956,15.2384701 369.805455,9.9771442 383.058053,9.9771442 L432.108295,9.9771442 L432.108295,-2.27373675e-13 L2.84217094e-14,-2.27373675e-13 L2.84217094e-14,9.78690955 Z" id="Path-2" fill="#4D97FF"></path>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 977 B

17
static/svgs/feature/create-icon.svg Normal file
View file

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>surprise-icon</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M6.99375039,8.65327167 C7.80357478,8.43603525 8.43603525,7.80357478 8.65327167,6.99375039 L9.14824073,5.15274045 C9.38335104,4.28241985 10.6180239,4.28241985 10.8517593,5.15274045 L11.3481032,6.99375039 C11.5653397,7.80357478 12.1978001,8.43603525 13.0062496,8.65327167 L14.8472595,9.14824073 C15.7175802,9.38335104 15.7175802,10.6180239 14.8472595,10.8531342 L13.0062496,11.3481032 C12.1978001,11.5653397 11.5653397,12.1978001 11.3481032,13.0062496 L10.8517593,14.8472595 C10.6180239,15.7175802 9.38335104,15.7175802 9.14824073,14.8472595 L8.65327167,13.0062496 C8.43603525,12.1978001 7.80357478,11.5653397 6.99375039,11.3481032 L5.15274045,10.8531342 C4.28241985,10.6180239 4.28241985,9.38335104 5.15274045,9.14824073 L6.99375039,8.65327167 Z M3.9061823,14.5100817 C4.20079987,14.430095 4.4314281,14.2007999 4.51008165,13.9061823 L4.69005166,13.2369605 C4.77403766,12.9210132 5.22329612,12.9210132 5.30994834,13.2369605 L5.48858524,13.9061823 C5.5685719,14.2007999 5.79786702,14.430095 6.09248459,14.5100817 L6.76303949,14.6900517 C7.07898684,14.7740377 7.07898684,15.2232961 6.76303949,15.3099483 L6.09248459,15.4885852 C5.79786702,15.5685719 5.5685719,15.797867 5.48858524,16.0924846 L5.30994834,16.7617064 C5.22329612,17.0789868 4.77403766,17.0789868 4.69005166,16.7617064 L4.51008165,16.0924846 C4.4314281,15.797867 4.20079987,15.5685719 3.9061823,15.4885852 L3.23696051,15.3099483 C2.92101316,15.2232961 2.92101316,14.7740377 3.23696051,14.6900517 L3.9061823,14.5100817 Z M13.9064844,4.50925154 C14.2012002,4.42923821 14.4305718,4.2012002 14.5092515,3.90648441 L14.6906151,3.23703951 C14.7746291,2.92098683 15.2240373,2.92098683 15.3093849,3.23703951 L15.4894149,3.90648441 C15.5680947,4.2012002 15.7987998,4.42923821 16.0935156,4.50925154 L16.7629605,4.6906151 C17.0790132,4.7746291 17.0790132,5.22403734 16.7629605,5.3093849 L16.0935156,5.4894149 C15.7987998,5.56809468 15.5680947,5.7987998 15.4894149,6.09218203 L15.3093849,6.76162694 C15.2240373,7.07901317 14.7746291,7.07901317 14.6906151,6.76162694 L14.5092515,6.09218203 C14.4305718,5.7987998 14.2012002,5.56809468 13.9064844,5.4894149 L13.2370395,5.3093849 C12.9209868,5.22403734 12.9209868,4.7746291 13.2370395,4.6906151 L13.9064844,4.50925154 Z M5.75,5.75 C5.75,6.164 5.414,6.5 5,6.5 C4.586,6.5 4.25,6.164 4.25,5.75 C4.25,5.336 4.586,5 5,5 C5.414,5 5.75,5.336 5.75,5.75 Z M16,14.25 C16,14.9416667 15.44,15.5 14.75,15.5 C14.0583333,15.5 13.5,14.9416667 13.5,14.25 C13.5,13.56 14.0583333,13 14.75,13 C15.44,13 16,13.56 16,14.25 Z" id="path-1"></path>
</defs>
<g id="Action-Menu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Action-Menu/Actions/Surprise" transform="translate(-3.000000, -3.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="surprise-icon" fill="#FFFFFF" xlink:href="#path-1"></use>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

35
static/svgs/feature/illustration-left.svg Normal file
View file

@ -0,0 +1,35 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="164px" height="291px" viewBox="0 0 164 291" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>left hand stuff</title>
<desc>Created with Sketch.</desc>
<g id="Sketches" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="V3_Announcement-(Logged-out)" transform="translate(0.000000, -87.000000)">
<g id="Banner">
<g id="Illustrations-">
<g id="left-hand-stuff" transform="translate(-42.000000, 88.000000)">
<path d="M106.69431,100.494193 C121.482072,128.616711 78.0460228,142.006849 138.11178,143.52393 C198.177537,145.041011 212.963212,161.344722 203.261157,185.712612 C193.559102,210.080501 74.8106127,180.694768 80.8172928,211.330913 C86.823973,241.967057 178.772384,215.925162 170.917495,265.315642 C163.062605,314.706122 51.8595901,271.810522 24.0353714,287.739751 C-3.78884736,303.668981 0.65234375,73.7175407 0.65234375,45.2016381 C0.65234375,10.3723754 116.395321,-2.9681166 60.4869909,54.9085474 C27.6643915,88.8867139 91.9065484,72.3716761 106.69431,100.494193 Z" id="Combined-Shape" fill-opacity="0.15" fill="#FFFFFF" transform="translate(103.196143, 152.618326) scale(1, -1) translate(-103.196143, -152.618326) "></path>
<g id="Blocks" transform="translate(25.000000, 127.000000)">
<g id="Motion-Block" transform="translate(114.107708, 95.968213) rotate(-10.000000) translate(-114.107708, -95.968213) translate(87.107708, 81.468213)">
<path d="M53.96,5.24691358 L53.96,22.0790123 C53.96,23.2375309 53.0299415,24.1777778 51.8839766,24.1777778 L29.8822807,24.1777778 C29.3300585,24.1777778 28.8027485,24.3960494 28.4166082,24.7906173 L25.5184795,27.7204938 C25.1323392,28.1108642 24.6050292,28.3333333 24.052807,28.3333333 L13.315614,28.3333333 C12.7675439,28.3333333 12.2402339,28.1108642 11.8457895,27.7204938 L8.95596491,24.7906173 C8.56567251,24.3960494 8.03421053,24.1777778 7.48614035,24.1777778 L2.07602339,24.1777778 C0.93005848,24.1777778 0,23.2375309 0,22.0790123 L0,5.24691358 C0,4.08839506 0.93005848,3.14814815 2.07602339,3.14814815 L7.44461988,3.14814815 C7.99684211,3.14814815 8.52415205,3.37061728 8.9102924,3.76098765 L11.8457895,6.73283951 C12.2402339,7.12320988 12.7675439,7.34567901 13.315614,7.34567901 L24.052807,7.34567901 C24.6050292,7.34567901 25.1323392,7.12320988 25.5184795,6.73283951 L28.4539766,3.76098765 C28.8484211,3.37061728 29.375731,3.14814815 29.9238012,3.14814815 L51.8839766,3.14814815 C53.0299415,3.14814815 53.96,4.08839506 53.96,5.24691358" id="Fill-6-Copy" fill="#855CD6"></path>
<path d="M53.96,2.09876543 L53.96,18.9308642 C53.96,20.0893827 53.0299415,21.0296296 51.8839766,21.0296296 L29.8822807,21.0296296 C29.3300585,21.0296296 28.8027485,21.2479012 28.4166082,21.6424691 L25.5184795,24.5723457 C25.1323392,24.962716 24.6050292,25.1851852 24.052807,25.1851852 L13.315614,25.1851852 C12.7675439,25.1851852 12.2402339,24.962716 11.8457895,24.5723457 L8.95596491,21.6424691 C8.56567251,21.2479012 8.03421053,21.0296296 7.48614035,21.0296296 L2.07602339,21.0296296 C0.93005848,21.0296296 0,20.0893827 0,18.9308642 L0,2.09876543 C0,0.940246914 0.93005848,0 2.07602339,0 L7.44461988,0 C7.99684211,0 8.52415205,0.222469136 8.9102924,0.612839506 L11.8457895,3.58469136 C12.2402339,3.97506173 12.7675439,4.19753086 13.315614,4.19753086 L24.052807,4.19753086 C24.6050292,4.19753086 25.1323392,3.97506173 25.5184795,3.58469136 L28.4539766,0.612839506 C28.8484211,0.222469136 29.375731,0 29.9238012,0 L51.8839766,0 C53.0299415,0 53.96,0.940246914 53.96,2.09876543" id="Fill-6" fill="#9966FF"></path>
</g>
<g id="Command-Block" transform="translate(38.500000, 25.000000) rotate(10.000000) translate(-38.500000, -25.000000) translate(3.000000, 6.000000)">
<path d="M71,28.2831749 C71,29.4060467 70.1125,30.3173629 69.0277778,30.3173629 L28.3881667,30.3173629 C27.8635556,30.3173629 27.3626111,30.5289185 26.9918333,30.9113458 L24.2425556,33.7510723 C23.8717778,34.1294313 23.3708333,34.3450552 22.8462222,34.3450552 L12.6498333,34.3450552 C12.1252222,34.3450552 11.6242778,34.1294313 11.2535,33.7510723 L8.50422222,30.9113458 C8.13344444,30.5289185 7.6325,30.3173629 7.11183333,30.3173629 L1.97222222,30.3173629 C0.883555556,30.3173629 0,29.4060467 0,28.2831749 L0,9.9347988 C4.82713782,3.34578764 12.0223742,0.0512820513 21.5857093,0.0512820513 C31.1490443,0.0512820513 38.3442807,3.34578764 43.1714186,9.9347988 L69.0277778,9.9347988 C70.1125,9.9347988 71,10.846115 71,11.9689868 L71,28.2831749 Z" id="Fill-3-Copy" fill="#E6AC00"></path>
<path d="M71,31.2318928 C71,32.3547646 70.1125,33.2660809 69.0277778,33.2660809 L28.3881667,33.2660809 C27.8635556,33.2660809 27.3626111,33.4776364 26.9918333,33.8600638 L24.2425556,36.6997903 C23.8717778,37.0781492 23.3708333,37.2937732 22.8462222,37.2937732 L12.6498333,37.2937732 C12.1252222,37.2937732 11.6242778,37.0781492 11.2535,36.6997903 L8.50422222,33.8600638 C8.13344444,33.4776364 7.6325,33.2660809 7.11183333,33.2660809 L1.97222222,33.2660809 C0.883555556,33.2660809 0,32.3547646 0,31.2318928 L0,12.8835168 C4.82713782,6.29450558 12.0223742,3 21.5857093,3 C31.1490443,3 38.3442807,6.29450558 43.1714186,12.8835168 L69.0277778,12.8835168 C70.1125,12.8835168 71,13.794833 71,14.9177048 L71,31.2318928 Z" id="Fill-3" fill="#FFBF00"></path>
</g>
</g>
<g id="Wave" transform="translate(78.000000, 0.000000)">
<path d="M51.2719192,6.78787121 C53.6773667,8.15334882 55.1700752,10.7664211 55.1748291,13.6005239" id="Stroke-4" stroke="#FFFFFF" stroke-width="3.24" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M55.0322136,0.758157836 C59.3914929,3.22878819 62.0964329,7.95393015 62.1011867,13.0867507" id="Stroke-6" stroke="#FFFFFF" stroke-width="3.24" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M12.9810935,56.3566733 C10.2666458,55.6248166 8.14642925,53.4145111 7.45712117,50.6000554" id="Stroke-8" stroke="#FFFFFF" stroke-width="3.24" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10.701623,63.3161885 C5.78138948,61.9850934 1.94978736,57.99672 0.699525134,52.9031938" id="Stroke-10" stroke="#FFFFFF" stroke-width="3.24" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M66.3915086,26.4986116 C69.5385565,21.1594959 59.3082739,19.8824305 54.2596865,30.2905134 C51.3741003,36.2436029 47.2049749,31.4251369 45.3937585,27.191174 C43.0168341,21.6113805 39.280309,14.4745497 37.1173078,10.1374392 C34.6738295,5.24529635 28.7315185,8.7965205 30.7899351,13.2171315 C33.589952,19.2340742 39.342109,28.8710061 37.801862,29.9172174 C36.1522765,31.0567527 30.2052117,17.6623014 25.3895628,10.2897047 C21.8812224,4.92111821 16.7137888,8.27095897 19.3426672,14.1945777 C22.4944689,21.2921142 29.6775344,30.7276627 28.5841492,31.7198443 C27.4812563,32.7169377 21.3060067,23.5564494 17.6122662,17.9471852 C14.6078338,13.3841323 9.51646176,17.4167119 12.2546787,21.5868216 C16.3762656,27.869001 24.9094241,37.5697862 23.9301313,38.5177616 C22.6418382,39.7751799 17.902251,33.2621464 15.1164956,30.0301886 C11.741263,26.1105802 7.98096861,29.995806 10.5813239,33.3702057 C15.168788,39.3085598 26.8252252,53.2482198 30.1434116,57.0695924 C37.9730006,66.0778152 59.5602279,57.8898613 58.8804275,42.2998399 C58.519135,33.9547088 64.6040614,29.5340978 66.3915086,26.4986116 Z" id="Fill-1" fill="#FFBF00"></path>
<path d="M10.3532401,29.2226789 C10.4230342,29.3302802 10.4989908,29.4376334 10.5813239,29.5444745 C15.168788,35.4828286 26.8252252,49.4224886 30.1434116,53.2438612 C37.9730006,62.252084 59.5602279,54.0641301 58.8804275,38.4741087 C58.5331542,30.4527929 64.1415416,26.0573407 66.1646501,23.0326424 C67.08479,23.7055973 67.3185336,24.9258697 66.3915086,26.4986116 C64.6040614,29.5340978 58.519135,33.9547088 58.8804275,42.2998399 C59.5602279,57.8898613 37.9730006,66.0778152 30.1434116,57.0695924 C26.8252252,53.2482198 15.168788,39.3085598 10.5813239,33.3702057 C9.39508068,31.830855 9.53251921,30.185199 10.3532401,29.2226789 Z M23.984955,38.4331035 C24.4964131,37.0993143 16.2758898,27.7160068 12.2546787,21.5868216 C11.2052946,19.9886843 11.3058426,18.410746 11.9981617,17.329079 C12.074568,17.4726846 12.1599367,17.6168051 12.2546787,17.7610904 C16.3482678,24.0005952 25.6077611,36.3639657 23.984955,38.4331035 Z M28.6452981,31.6405935 C29.3577982,30.3061794 22.423878,21.1331506 19.3426672,14.1945777 C18.4673946,12.2223369 18.456363,10.535406 18.960594,9.36057054 C19.0627173,9.68710896 19.189451,10.0236064 19.3426672,10.3688465 C22.4944689,17.466383 30.7899351,29.5444745 28.6637835,31.6243379 C28.6577888,31.6302021 28.6516266,31.6356193 28.6452981,31.6405935 Z M37.9051051,29.8212912 C39.0523744,28.3847443 33.5189722,19.0815461 30.7899351,13.2171315 C30.1435785,11.8290301 30.2860953,10.5266505 30.861446,9.54449141 C33.6793693,15.5552021 40.5119187,27.6381069 37.9051051,29.8212912 Z" id="Combined-Shape" fill-opacity="0.15" fill="#000000"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 9.4 KiB

203
static/svgs/feature/illustration-right.svg Normal file
View file

@ -0,0 +1,203 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="537px" height="354px" viewBox="0 0 537 354" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>right hand stuff</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M37.3563508,4.70367221 L35.2225973,8.48646017 C32.4491667,13.3490175 31.7996925,14.276951 35.7140913,15.4704916 C40.8657978,17.0408731 47.5417889,19.6956763 51.5815106,21.2081148 C56.1433426,22.9159522 53.7413901,28.8925372 49.6363536,27.4883718 C44.0486707,25.5766766 34.9560312,21.3337284 34.2171573,22.8914216 C33.4203164,24.5709219 45.8170695,28.5575676 52.8249415,32.1944408 C57.9325605,34.8450146 55.609394,40.0729934 50.122949,38.3101736 C43.5539109,36.2001189 34.4690275,30.5851488 33.7305618,31.7283594 C32.988014,32.8783371 41.7165234,37.5772161 47.0470292,40.3703212 C51.3892401,42.645323 48.464769,47.8783771 44.4989347,45.8093477 C38.5279354,42.6943842 29.0483056,35.8499234 28.330659,36.8802087 C27.3868599,38.23489 33.6346307,41.902215 36.7868872,44.1285785 C40.6029057,46.8235612 37.651084,50.7970957 34.4016716,48.7610558 C28.6743783,45.1723979 15.0787058,35.9478507 11.3957506,33.2530632 C-5.06603153,21.2081148 7.5748336,1.24231972 20.9284487,4.63600159 C27.61587,6.33580311 33.835882,4.54845271 37.3563508,4.70367221 Z" id="path-1"></path>
</defs>
<g id="Sketches" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="V3_Announcement-(Logged-out)" transform="translate(-743.000000, -72.000000)">
<g id="Banner">
<g id="Illustrations-">
<g id="right-hand-stuff" transform="translate(741.000000, 72.000000)">
<path d="M461.108459,101.88105 C477.025842,132.13828 430.271761,146.544832 494.925874,148.17707 C559.579988,149.809309 575.495123,167.350596 565.05194,193.568193 C554.608756,219.785791 426.789201,188.169457 433.254725,221.131118 C439.720249,254.092778 538.692497,226.074106 530.237581,279.213698 C521.782665,332.353291 408.386202,272.815529 329.75202,312.699429 C251.117838,352.583329 103,332.471986 103,285.324716 C103,238.177446 180.601951,258.117511 180.601951,233.979807 C180.601951,209.842103 103,231.746233 103,188.773422 C103,145.800611 233.320837,186.780844 233.320837,155.327557 C233.320837,123.87427 135.840633,151.774524 135.840633,113.180346 C135.840633,74.5861683 215.913658,98.2960972 220.38979,79.6709242 C224.865921,61.0457511 194.030347,70.0890535 200.993218,43.4762893 C212.71669,-1.33194631 471.550519,-9.43483437 411.371414,52.8351077 C376.041533,89.3924751 445.191076,71.6238204 461.108459,101.88105 Z M63.1292601,250.250509 C96.2721037,258.63376 63.1292601,319.63497 35.5102238,298.621867 C7.89118752,277.608763 29.9864166,241.867258 63.1292601,250.250509 Z M78.1760509,204.726385 C101.006168,210.466923 98.9871595,244.729593 73.0615521,236.821226 C47.1359448,228.912859 55.345934,198.985846 78.1760509,204.726385 Z M570.176051,259.726385 C593.006168,265.466923 590.98716,299.729593 565.061552,291.821226 C539.135945,283.912859 547.345934,253.985846 570.176051,259.726385 Z M456.154629,28.4916908 C490.495856,-5.53178525 612.432095,11.312409 607.875621,47.3005469 C603.319147,83.2886848 557.187513,49.7721975 554.699018,72.0193524 C552.210524,94.2665072 584.063255,74.7597357 584.063255,98.8875852 C584.063255,123.015435 493.482049,132.35471 493.482049,101.19193 C493.482049,83.960568 510.901512,85.5392457 516.3762,81.7646029 C521.850889,77.9899602 528.767464,62.3939191 502.363447,62.7513316 C462.624716,63.2892468 435.373848,49.0801934 456.154629,28.4916908 Z" id="Combined-Shape" fill-opacity="0.15" fill="#FFFFFF"></path>
<g id="Command-Block-Copy" transform="translate(523.886639, 154.219246) rotate(10.000000) translate(-523.886639, -154.219246) translate(492.386639, 137.219246)">
<path d="M62.3054187,3.06828287 L62.3054187,22.5353343 C62.3054187,23.8752112 61.231518,24.9626475 59.9083189,24.9626475 L34.5038549,24.9626475 C33.8662264,24.9626475 33.257363,25.2150881 32.8115024,25.6714229 L29.4651511,29.0599521 C29.0192905,29.5114323 28.4104272,29.7687275 27.7727986,29.7687275 L15.3749983,29.7687275 C14.7421639,29.7687275 14.1333006,29.5114323 13.6778516,29.0599521 L10.3410887,25.6714229 C9.89043389,25.2150881 9.27677633,24.9626475 8.64394198,24.9626475 L2.39709983,24.9626475 C1.07390072,24.9626475 0,23.8752112 0,22.5353343 L0,3.06828287 C0,1.72840602 1.07390072,0.640969725 2.39709983,0.640969725 L8.59599998,0.640969725 C9.23362854,0.640969725 9.84249189,0.898264919 10.2883525,1.34974516 L13.6778516,4.78682058 C14.1333006,5.23830083 14.7421639,5.49559602 15.3749983,5.49559602 L27.7727986,5.49559602 C28.4104272,5.49559602 29.0192905,5.23830083 29.4651511,4.78682058 L32.8546502,1.34974516 C33.3100992,0.898264919 33.9189626,0.640969725 34.5517969,0.640969725 L59.9083189,0.640969725 C61.231518,0.640969725 62.3054187,1.72840602 62.3054187,3.06828287" id="Fill-6-Copy" fill="#855CD6"></path>
<path d="M62.3054187,25.8943646 C62.3054187,27.2342415 61.231518,28.3216778 59.9083189,28.3216778 L34.5038549,28.3216778 C33.8662264,28.3216778 33.257363,28.5741183 32.8115024,29.0304532 L29.4651511,32.4189824 C29.0192905,32.8704626 28.4104272,33.1277578 27.7727986,33.1277578 L15.3749983,33.1277578 C14.7421639,33.1277578 14.1333006,32.8704626 13.6778516,32.4189824 L10.3410887,29.0304532 C9.89043389,28.5741183 9.27677633,28.3216778 8.64394198,28.3216778 L2.39709983,28.3216778 C1.07390072,28.3216778 0,27.2342415 0,25.8943646 L0,6.42731315 C0,5.08743629 1.07390072,4 2.39709983,4 L8.59599998,4 C9.23362854,4 9.84249189,4.25729519 10.2883525,4.70877544 L13.6778516,8.14585086 C14.1333006,8.59733111 14.7421639,8.8546263 15.3749983,8.8546263 L27.7727986,8.8546263 C28.4104272,8.8546263 29.0192905,8.59733111 29.4651511,8.14585086 L32.8546502,4.70877544 C33.3100992,4.25729519 33.9189626,4 34.5517969,4 L59.9083189,4 C61.231518,4 62.3054187,5.08743629 62.3054187,6.42731315 L62.3054187,25.8943646 Z" id="Fill-6" fill="#9966FF"></path>
</g>
<g id="Hat-Block" transform="translate(312.901108, 32.259163) rotate(-4.000000) translate(-312.901108, -32.259163) translate(272.401108, 10.759163)">
<path d="M80.3940887,35.4800823 C80.3940887,36.753597 79.3891626,37.7871742 78.1609195,37.7871742 L32.1442365,37.7871742 C31.5502135,37.7871742 30.9829885,38.0271117 30.5631527,38.460845 L27.4501149,41.6815453 C27.0302791,42.1106644 26.4630542,42.3552161 25.8690312,42.3552161 L14.3235468,42.3552161 C13.7295238,42.3552161 13.1622989,42.1106644 12.7424631,41.6815453 L9.62942529,38.460845 C9.20958949,38.0271117 8.64236453,37.7871742 8.05280788,37.7871742 L2.23316913,37.7871742 C1.00045977,37.7871742 0,36.753597 0,35.4800823 L0,14.6701135 C5.46582178,7.19712971 13.6130679,3.46063782 24.4417384,3.46063782 C35.2704089,3.46063782 43.417655,7.19712971 48.8834768,14.6701135 L78.1609195,14.6701135 C79.3891626,14.6701135 80.3940887,15.7036907 80.3940887,16.9772054 L80.3940887,35.4800823 Z" id="Fill-3-Copy" fill="#E6AC00"></path>
<path d="M80.3940887,32.0194445 C80.3940887,33.2929592 79.3891626,34.3265363 78.1609195,34.3265363 L32.1442365,34.3265363 C31.5502135,34.3265363 30.9829885,34.5664739 30.5631527,35.0002072 L27.4501149,38.2209074 C27.0302791,38.6500265 26.4630542,38.8945783 25.8690312,38.8945783 L14.3235468,38.8945783 C13.7295238,38.8945783 13.1622989,38.6500265 12.7424631,38.2209074 L9.62942529,35.0002072 C9.20958949,34.5664739 8.64236453,34.3265363 8.05280788,34.3265363 L2.23316913,34.3265363 C1.00045977,34.3265363 0,33.2929592 0,32.0194445 L0,11.2094757 C5.46582178,3.73649189 13.6130679,6.41580182e-16 24.4417384,0 C35.2704089,0 43.417655,3.73649189 48.8834768,11.2094757 L78.1609195,11.2094757 C79.3891626,11.2094757 80.3940887,12.2430528 80.3940887,13.5165676 L80.3940887,32.0194445 Z" id="Fill-3" fill="#FFBF00"></path>
</g>
<g id="Command-Block-" transform="translate(304.010583, 61.471579) rotate(-4.000000) translate(-304.010583, -61.471579) translate(275.010583, 45.971579)">
<path d="M57.5207705,6.21074528 L57.5207705,23.9409224 C57.5207705,25.1612538 56.5293384,26.1516677 55.3077523,26.1516677 L31.8541848,26.1516677 C31.2655219,26.1516677 30.7034153,26.3815852 30.2917939,26.7972053 L27.2024204,29.8834057 C26.790799,30.2946043 26.2286924,30.5289433 25.6400295,30.5289433 L14.1942991,30.5289433 C13.6100623,30.5289433 13.0479556,30.2946043 12.6274822,29.8834057 L9.54696076,26.7972053 C9.13091333,26.3815852 8.56438065,26.1516677 7.98014383,26.1516677 L2.21301826,26.1516677 C0.991432179,26.1516677 0,25.1612538 0,23.9409224 L0,6.21074528 C0,4.99041388 0.991432179,4 2.21301826,4 L7.93588347,4 C8.52454633,4 9.08665296,4.234339 9.49827436,4.64553762 L12.6274822,7.77595294 C13.0479556,8.18715156 13.6100623,8.42149056 14.1942991,8.42149056 L25.6400295,8.42149056 C26.2286924,8.42149056 26.790799,8.18715156 27.2024204,7.77595294 L30.3316282,4.64553762 C30.7521017,4.234339 31.3142083,4 31.8984452,4 L55.3077523,4 C56.5293384,4 57.5207705,4.99041388 57.5207705,6.21074528" id="Fill-6" fill="#3D79CC"></path>
<path d="M57.5279174,20.4584043 C57.5279174,21.6787357 56.5364852,22.6691496 55.3148991,22.6691496 L31.8613316,22.6691496 C31.2726688,22.6691496 30.7105621,22.8990671 30.2989407,23.3146872 L27.2095672,26.4008877 C26.7979459,26.8120863 26.2358392,27.0464253 25.6471764,27.0464253 L14.2014459,27.0464253 C13.6172091,27.0464253 13.0551025,26.8120863 12.634629,26.4008877 L9.55410759,23.3146872 C9.13806016,22.8990671 8.57152749,22.6691496 7.98729067,22.6691496 L2.22016509,22.6691496 C0.998579014,22.6691496 0.00714683456,21.6787357 0.00714683456,20.4584043 L0.00714683456,2.72822721 C0.00714683456,1.50789581 0.998579014,0.517481926 2.22016509,0.517481926 L7.9430303,0.517481926 C8.53169316,0.517481926 9.0937998,0.751820926 9.50542119,1.16301955 L12.634629,4.29343486 C13.0551025,4.70463348 13.6172091,4.93897248 14.2014459,4.93897248 L25.6471764,4.93897248 C26.2358392,4.93897248 26.7979459,4.70463348 27.2095672,4.29343486 L30.3387751,1.16301955 C30.7592485,0.751820926 31.3213552,0.517481926 31.905592,0.517481926 L55.3148991,0.517481926 C56.5364852,0.517481926 57.5279174,1.50789581 57.5279174,2.72822721 L57.5279174,20.4584043 Z" id="Fill-6" fill="#4C97FF"></path>
</g>
<g id="Extension-Block" transform="translate(172.380482, 59.249167) rotate(9.000000) translate(-172.380482, -59.249167) translate(140.880482, 44.749167)">
<path d="M62.7877833,5.26896604 L62.7877833,22.1718091 C62.7877833,23.3351968 61.8860417,24.2793955 60.7749672,24.2793955 L28.9724739,24.2793955 C28.4370649,24.2793955 27.9258096,24.4985845 27.5514258,24.8948108 L24.7415346,27.8370014 C24.3671509,28.2290125 23.8558956,28.4524166 23.3204865,28.4524166 L12.910202,28.4524166 C12.3788186,28.4524166 11.8675633,28.2290125 11.4851283,27.8370014 L8.68328835,24.8948108 C8.30487894,24.4985845 7.78959804,24.2793955 7.25821461,24.2793955 L2.01281603,24.2793955 C0.901741582,24.2793955 0,23.3351968 0,22.1718091 L0,5.26896604 C0,4.10557834 0.901741582,3.16137963 2.01281603,3.16137963 L7.21795828,3.16137963 C7.75336735,3.16137963 8.26462262,3.38478379 8.6390064,3.77679486 L11.4851283,6.76113723 C11.8675633,7.1531483 12.3788186,7.37655246 12.910202,7.37655246 L23.3204865,7.37655246 C23.8558956,7.37655246 24.3671509,7.1531483 24.7415346,6.76113723 L27.5876565,3.77679486 C27.9700916,3.38478379 28.4813468,3.16137963 29.0127303,3.16137963 L60.7749672,3.16137963 C61.8860417,3.16137963 62.7877833,4.10557834 62.7877833,5.26896604" id="Fill-1-Copy" fill="#0A8E69"></path>
<path d="M62.7877833,19.0104295 C62.7877833,20.1738172 61.8860417,21.1180159 60.7749672,21.1180159 L28.9724739,21.1180159 C28.4370649,21.1180159 27.9258096,21.3372049 27.5514258,21.7334311 L24.7415346,24.6756218 C24.3671509,25.0676329 23.8558956,25.291037 23.3204865,25.291037 L12.910202,25.291037 C12.3788186,25.291037 11.8675633,25.0676329 11.4851283,24.6756218 L8.68328835,21.7334311 C8.30487894,21.3372049 7.78959804,21.1180159 7.25821461,21.1180159 L2.01281603,21.1180159 C0.901741582,21.1180159 6.88671407e-16,20.1738172 6.88671407e-16,19.0104295 L6.88671407e-16,2.10758642 C6.88671407e-16,0.944198715 0.901741582,8.98518131e-14 2.01281603,8.98518131e-14 L7.21795828,8.98518131e-14 C7.75336735,8.98518131e-14 8.26462262,0.22340416 8.6390064,0.615415234 L11.4851283,3.5997576 C11.8675633,3.99176868 12.3788186,4.21517284 12.910202,4.21517284 L23.3204865,4.21517284 C23.8558956,4.21517284 24.3671509,3.99176868 24.7415346,3.5997576 L27.5876565,0.615415234 C27.9700916,0.22340416 28.4813468,8.98518131e-14 29.0127303,8.98518131e-14 L60.7749672,8.98518131e-14 C61.8860417,8.98518131e-14 62.7877833,0.944198715 62.7877833,2.10758642 L62.7877833,19.0104295 Z" id="Fill-1" fill="#0EBD8C"></path>
</g>
<g id="Piano" transform="translate(530.946690, 259.221859) rotate(5.000000) translate(-530.946690, -259.221859) translate(452.446690, 227.721859)" stroke-linecap="round" stroke-linejoin="round">
<rect id="Rectangle" stroke="#4D4D4D" stroke-width="0.687022901" fill="#4D4D4D" x="5.7267269" y="51.8209115" width="143.704433" height="9.03782646"></rect>
<rect id="Rectangle" stroke="#000000" stroke-width="0.687022901" fill="#000000" opacity="0.1" x="5.7267269" y="51.8209115" width="143.704433" height="9.03782646"></rect>
<rect id="Rectangle" stroke="#4D4D4D" stroke-width="0.687022901" fill="#4D4D4D" x="5.55222331" y="50.8319646" width="143.704433" height="9.03782646"></rect>
<g id="Group" transform="translate(5.554639, 18.433690)">
<g opacity="0.15" transform="translate(0.000000, 2.954367)" fill="#000000" id="Path" stroke="#000000" stroke-width="3.4351145">
<path d="M59.5042802,36.1036995 L64.8266667,36.1036995 C65.9975917,36.1036995 66.9556212,35.1510638 66.9556212,33.9867312 L66.9556212,0.00938897022 L57.3753257,0.00938897022 L57.3753257,33.9867312 C57.3753257,35.1510638 58.3333552,36.1036995 59.5042802,36.1036995 Z"></path>
<path d="M50.0304324,36.1036995 L55.3528188,36.1036995 C56.5237438,36.1036995 57.4817734,35.1510638 57.4817734,33.9867312 L57.4817734,0.00938897022 L47.9014778,0.00938897022 L47.9014778,33.9867312 C47.9014778,35.1510638 48.8595074,36.1036995 50.0304324,36.1036995 Z"></path>
<path d="M40.4501368,36.1036995 L45.7725233,36.1036995 C46.9434483,36.1036995 47.9014778,35.1510638 47.9014778,33.9867312 L47.9014778,0.00938897022 L38.3211823,0.00938897022 L38.3211823,33.9867312 C38.3211823,35.1510638 39.2792118,36.1036995 40.4501368,36.1036995 Z"></path>
<path d="M30.8698413,36.1036995 L36.1922277,36.1036995 C37.3631527,36.1036995 38.3211823,35.1510638 38.3211823,33.9867312 L38.3211823,0.00938897022 L28.7408867,0.00938897022 L28.7408867,33.9867312 C28.7408867,35.1510638 29.6989163,36.1036995 30.8698413,36.1036995 Z"></path>
<path d="M11.8156979,36.1036995 L17.1380843,36.1036995 C18.3090093,36.1036995 19.2670389,35.1510638 19.2670389,33.9867312 L19.2670389,0.00938897022 L9.6867433,0.00938897022 L9.6867433,33.9867312 C9.6867433,35.1510638 10.6447729,36.1036995 11.8156979,36.1036995 Z"></path>
<path d="M2.2354023,36.1036995 L7.55778872,36.1036995 C8.72871374,36.1036995 9.6867433,35.1510638 9.6867433,33.9867312 L9.6867433,0.00938897022 L0.106447729,0.00938897022 L0.106447729,33.9867312 C0.106447729,35.1510638 1.06447729,36.1036995 2.2354023,36.1036995 Z"></path>
<path d="M21.3959934,36.1036995 L26.7183799,36.1036995 C27.8893049,36.1036995 28.8473344,35.1510638 28.8473344,33.9867312 L28.8473344,0.00938897022 L19.2670389,0.00938897022 L19.2670389,33.9867312 C19.2670389,35.1510638 20.2250684,36.1036995 21.3959934,36.1036995 Z"></path>
<path d="M78.6648714,36.1036995 L83.9872578,36.1036995 C85.1581828,36.1036995 86.1162124,35.1510638 86.1162124,33.9867312 L86.1162124,0.00938897022 L76.5359168,0.00938897022 L76.5359168,33.9867312 C76.5359168,35.1510638 77.4939464,36.1036995 78.6648714,36.1036995 Z"></path>
<path d="M69.0845758,36.1036995 L74.4069622,36.1036995 C75.5778872,36.1036995 76.5359168,35.1510638 76.5359168,33.9867312 L76.5359168,0.00938897022 L66.9556212,0.00938897022 L66.9556212,33.9867312 C66.9556212,35.1510638 67.9136508,36.1036995 69.0845758,36.1036995 Z"></path>
</g>
<path d="M59.5042802,39.0580663 L64.8266667,39.0580663 C65.9975917,39.0580663 66.9556212,38.1054305 66.9556212,36.9410979 L66.9556212,2.9637557 L57.3753257,2.9637557 L57.3753257,36.9410979 C57.3753257,38.1054305 58.3333552,39.0580663 59.5042802,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M50.0304324,39.0580663 L55.3528188,39.0580663 C56.5237438,39.0580663 57.4817734,38.1054305 57.4817734,36.9410979 L57.4817734,2.9637557 L47.9014778,2.9637557 L47.9014778,36.9410979 C47.9014778,38.1054305 48.8595074,39.0580663 50.0304324,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M40.4501368,39.0580663 L45.7725233,39.0580663 C46.9434483,39.0580663 47.9014778,38.1054305 47.9014778,36.9410979 L47.9014778,2.9637557 L38.3211823,2.9637557 L38.3211823,36.9410979 C38.3211823,38.1054305 39.2792118,39.0580663 40.4501368,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M30.8698413,39.0580663 L36.1922277,39.0580663 C37.3631527,39.0580663 38.3211823,38.1054305 38.3211823,36.9410979 L38.3211823,2.9637557 L28.7408867,2.9637557 L28.7408867,36.9410979 C28.7408867,38.1054305 29.6989163,39.0580663 30.8698413,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M59.5042802,36.0943105 L64.8266667,36.0943105 C65.9975917,36.0943105 66.9556212,35.1416748 66.9556212,33.9773422 L66.9556212,0 L57.3753257,0 L57.3753257,33.9773422 C57.3753257,35.1416748 58.3333552,36.0943105 59.5042802,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M50.0304324,36.0943105 L55.3528188,36.0943105 C56.5237438,36.0943105 57.4817734,35.1416748 57.4817734,33.9773422 L57.4817734,0 L47.9014778,0 L47.9014778,33.9773422 C47.9014778,35.1416748 48.8595074,36.0943105 50.0304324,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M11.8156979,39.0580663 L17.1380843,39.0580663 C18.3090093,39.0580663 19.2670389,38.1054305 19.2670389,36.9410979 L19.2670389,2.9637557 L9.6867433,2.9637557 L9.6867433,36.9410979 C9.6867433,38.1054305 10.6447729,39.0580663 11.8156979,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M2.2354023,39.0580663 L7.55778872,39.0580663 C8.72871374,39.0580663 9.6867433,38.1054305 9.6867433,36.9410979 L9.6867433,2.9637557 L0.106447729,2.9637557 L0.106447729,36.9410979 C0.106447729,38.1054305 1.06447729,39.0580663 2.2354023,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M11.8156979,36.0943105 L17.1380843,36.0943105 C18.3090093,36.0943105 19.2670389,35.1416748 19.2670389,33.9773422 L19.2670389,0 L9.6867433,0 L9.6867433,33.9773422 C9.6867433,35.1416748 10.6447729,36.0943105 11.8156979,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M2.2354023,38.9522178 L7.55778872,38.9522178 C8.72871374,38.9522178 9.6867433,37.9995821 9.6867433,36.8352495 L9.6867433,0 L0.106447729,0 L0.106447729,36.8352495 C0.106447729,37.9995821 1.06447729,38.9522178 2.2354023,38.9522178 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#CCE6FF"></path>
<path d="M40.4501368,38.9522178 L45.7725233,38.9522178 C46.9434483,38.9522178 47.9014778,37.9995821 47.9014778,36.8352495 L47.9014778,0 L38.3211823,0 L38.3211823,36.8352495 C38.3211823,37.9995821 39.2792118,38.9522178 40.4501368,38.9522178 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#CCE6FF"></path>
<path d="M30.8698413,36.0943105 L36.1922277,36.0943105 C37.3631527,36.0943105 38.3211823,35.1416748 38.3211823,33.9773422 L38.3211823,0 L28.7408867,0 L28.7408867,33.9773422 C28.7408867,35.1416748 29.6989163,36.0943105 30.8698413,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M21.3959934,39.0580663 L26.7183799,39.0580663 C27.8893049,39.0580663 28.8473344,38.1054305 28.8473344,36.9410979 L28.8473344,2.9637557 L19.2670389,2.9637557 L19.2670389,36.9410979 C19.2670389,38.1054305 20.2250684,39.0580663 21.3959934,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M21.3959934,38.9522178 L26.7183799,38.9522178 C27.8893049,38.9522178 28.8473344,37.9995821 28.8473344,36.8352495 L28.8473344,0 L19.2670389,0 L19.2670389,36.8352495 C19.2670389,37.9995821 20.2250684,38.9522178 21.3959934,38.9522178 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#CCE6FF"></path>
<path d="M78.6648714,39.0580663 L83.9872578,39.0580663 C85.1581828,39.0580663 86.1162124,38.1054305 86.1162124,36.9410979 L86.1162124,2.9637557 L76.5359168,2.9637557 L76.5359168,36.9410979 C76.5359168,38.1054305 77.4939464,39.0580663 78.6648714,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M69.0845758,39.0580663 L74.4069622,39.0580663 C75.5778872,39.0580663 76.5359168,38.1054305 76.5359168,36.9410979 L76.5359168,2.9637557 L66.9556212,2.9637557 L66.9556212,36.9410979 C66.9556212,38.1054305 67.9136508,39.0580663 69.0845758,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M78.6648714,36.0943105 L83.9872578,36.0943105 C85.1581828,36.0943105 86.1162124,35.1416748 86.1162124,33.9773422 L86.1162124,0 L76.5359168,0 L76.5359168,33.9773422 C76.5359168,35.1416748 77.4939464,36.0943105 78.6648714,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M69.0845758,36.0943105 L74.4069622,36.0943105 C75.5778872,36.0943105 76.5359168,35.1416748 76.5359168,33.9773422 L76.5359168,0 L66.9556212,0 L66.9556212,33.9773422 C66.9556212,35.1416748 67.9136508,36.0943105 69.0845758,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
</g>
<g id="Group" transform="translate(0.370127, 0.108446)" stroke-width="0.687022901">
<rect id="Rectangle" stroke="#4D4D4D" fill="#4D4D4D" x="6.08117957" y="0" width="144.027937" height="18.8892275"></rect>
<rect id="Rectangle" stroke="#000000" fill="#000000" opacity="0.1" x="6.08117957" y="16.1455408" width="144.027937" height="8.33658644"></rect>
<path d="M6.08117957,61.416371 L6.08117957,10.8692203 L5.33436804,10.8692203 C2.66718402,10.8692203 0.533436804,12.9797485 0.533436804,15.6179088 L0.533436804,56.5621561 C0.533436804,59.2003164 2.66718402,61.3108446 5.33436804,61.3108446 L6.08117957,61.3108446 L6.08117957,61.416371 Z" id="Path" stroke="#4D4D4D" fill="#4D4D4D"></path>
<path d="M6.08117957,61.416371 L6.08117957,10.8692203 L5.33436804,10.8692203 C2.66718402,10.8692203 0.533436804,12.9797485 0.533436804,15.6179088 L0.533436804,56.5621561 C0.533436804,59.2003164 2.66718402,61.3108446 5.33436804,61.3108446 L6.08117957,61.3108446 L6.08117957,61.416371 Z" id="Path" stroke="#000000" fill="#000000" opacity="0.1"></path>
<path d="M6.08117957,54.8737335 L6.08117957,0 L5.33436804,0 C2.66718402,0 0.533436804,2.11052821 0.533436804,4.74868848 L0.533436804,50.1250451 C0.533436804,52.7632053 2.66718402,54.8737335 5.33436804,54.8737335 L6.08117957,54.8737335 Z" id="Path" stroke="#4D4D4D" fill="#4D4D4D"></path>
</g>
<g id="Group" transform="translate(12.191798, 18.052815)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.11034483,22.151804 L4.01970443,22.151804 C5.12512315,22.151804 6.02955665,21.2069403 6.02955665,20.0521069 L6.02955665,0.944863676 L0.100492611,0.944863676 L0.100492611,20.0521069 C0.100492611,21.2069403 1.00492611,22.151804 2.11034483,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.11034483,21.3119251 L4.01970443,21.3119251 C5.12512315,21.3119251 6.02955665,20.3670615 6.02955665,19.2122281 L6.02955665,0 L0.100492611,0 L0.100492611,19.1072432 C0.100492611,20.3670615 1.00492611,21.3119251 2.11034483,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(22.429762, 18.199740)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.46206897,22.151804 L4.68965517,22.151804 C5.97931034,22.151804 7.03448276,21.2069403 7.03448276,20.0521069 L7.03448276,0.944863676 L0.117241379,0.944863676 L0.117241379,20.0521069 C0.117241379,21.2069403 1.17241379,22.151804 2.46206897,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.46206897,21.3119251 L4.68965517,21.3119251 C5.97931034,21.3119251 7.03448276,20.3670615 7.03448276,19.2122281 L7.03448276,0 L0.117241379,0 L0.117241379,19.1072432 C0.117241379,20.3670615 1.17241379,21.3119251 2.46206897,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(40.767135, 18.027776)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.34482759,22.151804 L4.68965517,22.151804 C5.97931034,22.151804 7.03448276,21.2069403 7.03448276,20.0521069 L7.03448276,0.944863676 L0,0.944863676 L0,20.0521069 C0,21.2069403 1.05517241,22.151804 2.34482759,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.34482759,21.3119251 L4.68965517,21.3119251 C5.97931034,21.3119251 7.03448276,20.3670615 7.03448276,19.2122281 L7.03448276,0 L0,0 L0,19.1072432 C0,20.3670615 1.05517241,21.3119251 2.34482759,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(51.020366, 18.349079)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.00985222,22.151804 L3.91921182,22.151804 C5.02463054,22.151804 5.92906404,21.2069403 5.92906404,20.0521069 L5.92906404,0.944863676 L0,0.944863676 L0,20.0521069 C0,21.2069403 0.904433498,22.151804 2.00985222,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.00985222,21.3119251 L3.91921182,21.3119251 C5.02463054,21.3119251 5.92906404,20.3670615 5.92906404,19.2122281 L5.92906404,0 L0,0 L0,19.1072432 C0,20.3670615 0.904433498,21.3119251 2.00985222,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(61.083826, 17.507057)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.34482759,22.151804 L4.57241379,22.151804 C5.86206897,22.151804 6.91724138,21.2069403 6.91724138,20.0521069 L6.91724138,0.944863676 L0,0.944863676 L0,20.0521069 C0,21.2069403 1.05517241,22.151804 2.34482759,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.34482759,21.3119251 L4.57241379,21.3119251 C5.86206897,21.3119251 6.91724138,20.3670615 6.91724138,19.2122281 L6.91724138,0 L0,0 L0,19.1072432 C0,20.3670615 1.05517241,21.3119251 2.34482759,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(79.603336, 18.411229)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.32568614,22.151804 L4.5078114,22.151804 C5.77114708,22.151804 6.80478536,21.2069403 6.80478536,20.0521069 L6.80478536,0.944863676 L0.0287121745,0.944863676 L0.0287121745,20.0521069 C0.0287121745,21.2069403 1.06235046,22.151804 2.32568614,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.32568614,21.3119251 L4.5078114,21.3119251 C5.77114708,21.3119251 6.80478536,20.3670615 6.80478536,19.2122281 L6.80478536,0 L0.0287121745,0 L0.0287121745,19.1072432 C0.0287121745,20.3670615 1.06235046,21.3119251 2.32568614,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<path d="M33.6502555,12.7717235 L7.59661566,12.7717235 C6.97132831,12.7717235 6.55447007,12.3561912 6.55447007,11.7328929 L6.55447007,4.77272765 C6.55447007,4.14942927 6.97132831,3.73389702 7.59661566,3.73389702 L33.6502555,3.73389702 C34.2755429,3.73389702 34.6924011,4.14942927 34.6924011,4.77272765 L34.6924011,11.7328929 C34.6924011,12.2523082 34.2755429,12.7717235 33.6502555,12.7717235 Z" id="Path" stroke="#3D79CC" stroke-width="0.687022901" fill="#4C97FF"></path>
<g id="Group" transform="translate(39.969018, 3.432625)" stroke-width="0.687022901">
<path d="M4.29605911,8.86989672 C2.14802956,8.86989672 0.339162562,7.08464704 0.339162562,4.96466306 L0.339162562,3.96046012 C0.339162562,1.84047613 2.14802956,0.0552264618 4.29605911,0.0552264618 C6.44408867,0.0552264618 8.25295567,1.84047613 8.25295567,3.96046012 L8.25295567,4.96466306 C8.13990148,7.19622515 6.44408867,8.86989672 4.29605911,8.86989672 Z" id="Path" stroke="#000000" fill="#000000" opacity="0.1"></path>
<g transform="translate(0.000000, 0.166805)">
<ellipse id="Oval" stroke="#000000" fill="#000000" opacity="0.2" cx="4.29605911" cy="3.90523366" rx="3.95689655" ry="3.90523366"></ellipse>
<path d="M4.29605911,3.90523366 L8.13990148,3.90523366" id="Path" stroke="#FFFFFF" fill="#FFFFFF" opacity="0.1"></path>
</g>
</g>
<g id="Group" transform="translate(52.019430, 2.329035)" stroke-width="0.687022901">
<path d="M4.63522167,8.86989672 C2.48719212,8.86989672 0.678325123,7.08464704 0.678325123,4.96466306 L0.678325123,3.96046012 C0.678325123,1.84047613 2.48719212,0.0552264618 4.63522167,0.0552264618 C6.78325123,0.0552264618 8.59211823,1.84047613 8.59211823,3.96046012 L8.59211823,4.96466306 C8.59211823,7.19622515 6.78325123,8.86989672 4.63522167,8.86989672 Z" id="Path" stroke="#000000" fill="#000000" opacity="0.1"></path>
<g transform="translate(0.000000, 0.166805)">
<ellipse id="Oval" stroke="#000000" fill="#000000" opacity="0.2" cx="4.63522167" cy="3.90523366" rx="3.95689655" ry="3.90523366"></ellipse>
<path d="M4.63522167,3.90523366 L1.92192118,6.69468627" id="Path" stroke="#FFFFFF" fill="#FFFFFF" opacity="0.1"></path>
</g>
</g>
<g id="Group" transform="translate(64.259612, 2.388771)" stroke-width="0.687022901">
<path d="M3.96945813,8.86989672 C1.82142857,8.86989672 0.0125615764,7.08464704 0.0125615764,4.96466306 L0.0125615764,3.96046012 C0.0125615764,1.84047613 1.82142857,0.0552264618 3.96945813,0.0552264618 C6.11748768,0.0552264618 7.92635468,1.84047613 7.92635468,3.96046012 L7.92635468,4.96466306 C7.92635468,7.19622515 6.23054187,8.86989672 3.96945813,8.86989672 Z" id="Path" stroke="#000000" fill="#000000" opacity="0.1"></path>
<g transform="translate(0.000000, 0.166805)">
<ellipse id="Oval" stroke="#000000" fill="#000000" opacity="0.2" cx="3.96945813" cy="3.90523366" rx="3.95689655" ry="3.90523366"></ellipse>
<path d="M3.96945813,3.90523366 L1.25615764,1.22735915" id="Path" stroke="#FFFFFF" fill="#FFFFFF" opacity="0.1"></path>
</g>
</g>
</g>
<g id="Arrow-Keys" transform="translate(371.769230, 328.224156) scale(-1, 1) rotate(10.000000) translate(-371.769230, -328.224156) translate(324.269230, 293.724156)">
<g id="Up-Key" transform="translate(31.874689, 0.158037)">
<rect id="Rectangle-3-Copy" fill="#333333" x="0" y="2.61621292" width="30.2626319" height="29.6504131" rx="7.2"></rect>
<rect id="Rectangle-3" fill="#4D4D4D" x="0" y="0" width="30.2626319" height="29.6504131" rx="7.2"></rect>
<path d="M15.1255794,21.3172905 C14.8514804,21.3172905 14.5956546,21.215971 14.4056126,21.0333604 L10.5804084,17.3340224 C10.2843814,17.030064 10.2051972,16.6035798 10.3696567,16.2371804 C10.5328979,15.870781 10.8934904,15.6445795 11.3113391,15.6445795 L12.7622366,15.6445795 L13.5016949,10.4961377 C13.6076799,9.70796661 14.3166827,9.10829684 15.151162,9.10829684 C15.2230368,9.10829684 15.2961299,9.11300938 15.3680047,9.12125631 C16.1208634,9.23553522 16.7019534,9.80339539 16.7933197,10.5020283 L17.5522695,15.6445795 L18.9398197,15.6445795 C19.3625413,15.6445795 19.7389706,15.8849186 19.8985572,16.2560306 C20.0581437,16.6294988 19.9716502,17.0430235 19.6707504,17.3340224 L15.8455462,21.0333604 C15.6555042,21.215971 15.3996784,21.3172905 15.1255794,21.3172905" id="Fill-1-Copy" fill="#FFFFFF" transform="translate(15.131316, 15.212794) scale(-1, 1) rotate(180.000000) translate(-15.131316, -15.212794) "></path>
</g>
<g id="Down-Key" transform="translate(32.854689, 34.509742)">
<rect id="Rectangle-3-Copy" fill="#333333" x="0" y="2.61621292" width="30.2626319" height="29.6504131" rx="7.2"></rect>
<rect id="Rectangle-3" fill="#4D4D4D" x="0" y="0" width="30.2626319" height="29.6504131" rx="7.2"></rect>
<path d="M15.1255794,21.3172905 C14.8514804,21.3172905 14.5956546,21.215971 14.4056126,21.0333604 L10.5804084,17.3340224 C10.2843814,17.030064 10.2051972,16.6035798 10.3696567,16.2371804 C10.5328979,15.870781 10.8934904,15.6445795 11.3113391,15.6445795 L12.7622366,15.6445795 L13.5016949,10.4961377 C13.6076799,9.70796661 14.3166827,9.10829684 15.151162,9.10829684 C15.2230368,9.10829684 15.2961299,9.11300938 15.3680047,9.12125631 C16.1208634,9.23553522 16.7019534,9.80339539 16.7933197,10.5020283 L17.5522695,15.6445795 L18.9398197,15.6445795 C19.3625413,15.6445795 19.7389706,15.8849186 19.8985572,16.2560306 C20.0581437,16.6294988 19.9716502,17.0430235 19.6707504,17.3340224 L15.8455462,21.0333604 C15.6555042,21.215971 15.3996784,21.3172905 15.1255794,21.3172905" id="Fill-1-Copy" fill="#FFFFFF" transform="translate(15.131316, 15.212794) scale(-1, 1) translate(-15.131316, -15.212794) "></path>
</g>
<g id="Right-Key" transform="translate(65.425618, 35.035495)">
<rect id="Rectangle-3-Copy" fill="#333333" x="0" y="2.61621292" width="28.3102041" height="29.6504131" rx="7.2"></rect>
<rect id="Rectangle-3" fill="#4D4D4D" x="0" y="0" width="28.3102041" height="29.6504131" rx="7.2"></rect>
<path d="M14.149622,21.1908156 C13.8877819,21.1908156 13.6433978,21.0915954 13.4618553,20.9127681 L9.8077312,17.2900741 C9.52494388,16.9924133 9.44930119,16.5747651 9.60640525,16.2159569 C9.76234558,15.8571486 10.1068108,15.6356336 10.5059715,15.6356336 L11.8919784,15.6356336 L12.5983649,10.5938588 C12.6996097,9.82201731 13.3769028,9.23477169 14.1740604,9.23477169 C14.2427207,9.23477169 14.3125447,9.23938658 14.381205,9.24746265 C15.1003925,9.3593739 15.6554936,9.91546897 15.7427736,10.5996274 L16.4677797,15.6356336 L17.7932725,15.6356336 C18.1970882,15.6356336 18.5566819,15.8709933 18.709131,16.2344165 C18.8615802,16.600147 18.7789551,17.0051042 18.4915128,17.2900741 L14.8373887,20.9127681 C14.6558462,21.0915954 14.4114621,21.1908156 14.149622,21.1908156" id="Fill-1-Copy" fill="#FFFFFF" transform="translate(14.155102, 15.212794) scale(-1, 1) rotate(90.000000) translate(-14.155102, -15.212794) "></path>
</g>
<g id="Left-Key" transform="translate(0.472600, 35.142445)">
<rect id="Rectangle-3-Copy" fill="#333333" x="0" y="2.61621292" width="30.2626319" height="29.6504131" rx="7.2"></rect>
<rect id="Rectangle-3" fill="#4D4D4D" x="0" y="0" width="30.2626319" height="29.6504131" rx="7.2"></rect>
<path d="M15.1258359,21.603093 C14.8639958,21.603093 14.6196117,21.49703 14.4380693,21.3058698 L10.7839451,17.4333348 C10.5011578,17.1151456 10.4255151,16.6686942 10.5826192,16.2851405 C10.7385595,15.9015869 11.0830247,15.664795 11.4821854,15.664795 L12.8681924,15.664795 L13.5745788,10.2753116 C13.6758236,9.45023963 14.3531167,8.82249431 15.1502744,8.82249431 C15.2189347,8.82249431 15.2887587,8.82742747 15.357419,8.83606051 C16.0766065,8.95568978 16.6317075,9.55013623 16.7189875,10.281478 L17.4439937,15.664795 L18.7694865,15.664795 C19.1733021,15.664795 19.5328959,15.9163864 19.685345,16.3048732 C19.8377941,16.6958266 19.755169,17.1287118 19.4677268,17.4333348 L15.8136026,21.3058698 C15.6320602,21.49703 15.3876761,21.603093 15.1258359,21.603093" id="Fill-1-Copy" fill="#FFFFFF" transform="translate(15.131316, 15.212794) scale(-1, 1) rotate(-90.000000) translate(-15.131316, -15.212794) "></path>
</g>
</g>
<g id="Reporter" transform="translate(27.051268, 259.128513) scale(-1, 1) rotate(-10.000000) translate(-27.051268, -259.128513) translate(2.051268, 245.128513)">
<path d="M0,12.0504353 L49.2413793,12.0504353 L49.2413793,15.1134794 C49.2413793,21.7408964 43.8687963,27.1134794 37.2413793,27.1134794 L12,27.1134794 C5.372583,27.1134794 8.11624501e-16,21.7408964 0,15.1134794 L0,12.0504353 Z" id="Rectangle-Copy" fill="#47B946"></path>
<rect id="Rectangle" fill="#68CC68" x="0" y="0" width="49.2413793" height="24.1008706" rx="12"></rect>
</g>
<g id="Rainbow-Pour" transform="translate(88.000000, 144.000000)">
<g id="Rainbow-Bucket">
<g id="paint-bucket" transform="translate(80.801683, 71.219246) rotate(-9.000000) translate(-80.801683, -71.219246) translate(25.801683, 8.219246)">
<ellipse id="Oval" stroke="#D9E3F2" stroke-width="5.25" stroke-linecap="round" stroke-linejoin="round" transform="translate(45.299554, 23.763015) rotate(-52.570000) translate(-45.299554, -23.763015) " cx="45.2995539" cy="23.7630151" rx="5.88946629" ry="25.9573658"></ellipse>
<path d="M65.5479452,39.2713985 L31.8574826,73.7297026 C30.3557935,75.7025412 22.04433,71.8987619 13.3018682,65.133436 C4.5594064,58.3681101 -1.26587693,51.2869469 0.235812151,49.3141083 L24.3717213,7.5 C22.3891287,10.1045131 30.0109948,19.3187222 41.3802783,28.0980829 C52.7495618,36.8774436 63.5744263,41.8759117 65.5479452,39.2713985 Z" id="Path" stroke="#D9E3F2" stroke-width="5.25" fill="#D9E3F2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M29.3835616,30.75 C29.3835616,30.75 42.0574694,1.54271735 52.5880291,0.0998150953 C66.0339054,-1.73827695 53.3463747,22.4188478 53.3463747,22.4188478" id="Path" stroke="#585F76" stroke-width="5.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M48.9726027,19.5 C60.3400275,28.14 67.9591029,37.212 65.9920127,39.75" id="Path" stroke="#D9E3F2" stroke-width="5.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M61.7808219,36 C61.7808219,36 109.195966,57.3582429 105.047309,120.578642 L109.519588,126 C115.609978,54.2862913 61.7808219,36 61.7808219,36 Z" id="Path" fill="#FF661A"></path>
<path d="M61.7808219,36 C61.7808219,36 95.225287,55.9045445 91.0778678,119.582607 L97.3371906,125.25 C103.425764,52.9930242 61.7808219,36 61.7808219,36 Z" id="Path" fill="#4D97FF"></path>
<path d="M62,36 C62,36 87.7740447,54.9344013 83.608497,118.398864 L91.4296175,126 C97.5448041,53.9990875 62,36 62,36 Z" id="Path" fill="#9966FF"></path>
<path d="M62,36 C62,36 105.607314,57.0120286 101.438105,120.550576 L105.93254,126 C112.05762,53.9104705 62,36 62,36 Z" id="Path" fill="#FFBF00"></path>
<path d="M61.7808219,36 C61.7808219,36 101.585953,56.533143 97.4274768,119.811812 L101.910341,125.25 C108.015146,53.4204059 61.7808219,36 61.7808219,36 Z" id="Path" fill="#0EBD8C"></path>
<path d="M61.7808219,36 C61.7808219,36 84.4134582,49.7430332 79.4558331,117.820472 L85.8324886,125.25 C91.9172549,53.3644159 61.7808219,36 61.7808219,36 Z" id="Path" fill="#FF6680"></path>
</g>
<g id="hand" transform="translate(0.623453, 27.390984)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Fill-1" fill="#774DCB" transform="translate(29.622573, 26.787027) rotate(-8.000000) translate(-29.622573, -26.787027) " xlink:href="#path-1"></use>
<path d="M41.3723912,2.70255056 L39.2386377,6.48533851 C36.4652071,11.3478959 35.8157329,12.2758293 39.7301317,13.46937 C44.8818382,15.0397514 51.5578293,17.6945547 55.597551,19.2069931 C60.159383,20.9148305 57.7574305,26.8914156 53.652394,25.4872501 C48.0647111,23.5755549 35.3745686,19.8000801 34.0273286,22.1353068 C33.0901971,23.7596754 49.8331099,26.556446 56.8409819,30.1933192 C61.9486009,32.843893 59.6254344,38.0718717 54.1389894,36.3090519 C47.5699513,34.1989972 35.5480322,28.4824277 33.8866707,30.7549554 C33.0728098,31.8682119 45.7325638,35.5760945 51.0630696,38.3691995 C55.4052805,40.6442014 52.4808094,45.8772554 48.5149751,43.808226 C42.5439758,40.6932626 29.4241952,33.6316721 28.1231249,35.8382324 C27.9153143,36.1906704 36.9650598,41.6401932 40.1173164,43.8665568 C43.9333348,46.5615395 41.6671244,48.7959741 38.417712,46.7599341 C32.6904187,43.1712763 19.0947462,33.946729 15.411791,31.2519415 C-1.04999113,19.2069931 11.590874,-0.75880193 24.9444891,2.63487993 C31.6319104,4.33468145 37.8519224,2.54733106 41.3723912,2.70255056 Z" id="Fill-1" fill="#9966FF" mask="url(#mask-2)" transform="translate(33.638613, 24.901160) rotate(-8.000000) translate(-33.638613, -24.901160) "></path>
</g>
</g>
<g id="C-Block" transform="translate(147.746906, 148.060490) rotate(-5.000000) translate(-147.746906, -148.060490) translate(104.246906, 116.060490)">
<path d="M15.9899553,38.142214 C16.5485472,38.142214 17.0855331,38.3648631 17.4807632,38.7605664 L20.461325,41.7462798 C20.8565551,42.1419831 21.3930141,42.3646322 21.9521329,42.3646322 L28.637318,42.3646322 C29.1964369,42.3646322 29.7328958,42.1419831 30.1281259,41.7462798 L33.1086877,38.7605664 C33.5039178,38.3643355 34.0409038,38.142214 34.5994956,38.142214 L84.3157515,38.1437968 C85.4798359,38.1437968 86.4236453,39.0887364 86.4236453,40.2542145 L86.4236453,52.9167205 C86.4236453,54.0821986 85.4798359,55.0271381 84.3157515,55.0271381 L26.1679205,55.0271381 C25.6088016,55.0271381 25.0723427,55.2497872 24.6771126,55.6454905 L21.6965508,58.6296211 C21.3013207,59.0253244 20.7648617,59.2479735 20.2057429,59.2479735 L13.5205577,59.2479735 C12.9614389,59.2479735 12.4249799,59.0253244 12.0297498,58.6296211 L9.04918803,55.6454905 C8.65343097,55.2497872 8.11749898,55.0271381 7.55838015,55.0271381 L2.10789379,55.0271381 C0.943809444,55.0271381 0,54.0821986 0,52.9167205 L0,2.11041766 C0,0.944939509 0.943809444,0 2.10789379,0 L7.55838015,0 C8.11697201,0 8.65395795,0.222121459 9.04918803,0.618352375 L12.0297498,3.60406576 C12.4249799,3.99976908 12.9614389,4.22241814 13.5205577,4.22241814 L20.2057429,4.22241814 C20.7648617,4.22241814 21.3013207,3.99976908 21.6965508,3.60406576 L24.6771126,0.618352375 C25.0723427,0.222121459 25.6088016,0 26.1679205,0 L84.3157515,0 C85.4798359,0 86.4236453,0.944939509 86.4236453,2.11041766 L86.4236453,23.2145943 C86.4236453,24.3800724 85.4798359,25.325012 84.3157515,25.325012 L34.5994956,25.325012 C34.0403768,25.325012 33.5039178,25.5471334 33.1086877,25.9433643 L30.1281259,28.9290777 C29.7328958,29.324781 29.1964369,29.5474301 28.637318,29.5474301 L21.9521329,29.5474301 C21.3930141,29.5474301 20.8565551,29.324781 20.461325,28.9290777 L17.4807632,25.9433643 C17.0855331,25.5471334 16.5490741,25.325012 15.9899553,25.325012 L10.5394689,25.325012 C9.3753846,25.325012 8.43157515,26.2699515 8.43157515,27.4354296 L8.43157515,36.032324 C8.43157515,37.1978021 9.3753846,38.1427416 10.5394689,38.1427416 L15.9899553,38.142214 Z" id="Fill-1-Copy-2" fill="#EC9C13"></path>
<path d="M15.9899553,42.142214 C16.5485472,42.142214 17.0855331,42.3648631 17.4807632,42.7605664 L20.461325,45.7462798 C20.8565551,46.1419831 21.3930141,46.3646322 21.9521329,46.3646322 L28.637318,46.3646322 C29.1964369,46.3646322 29.7328958,46.1419831 30.1281259,45.7462798 L33.1086877,42.7605664 C33.5039178,42.3643355 34.0409038,42.142214 34.5994956,42.142214 L84.3157515,42.1437968 C85.4798359,42.1437968 86.4236453,43.0887364 86.4236453,44.2542145 L86.4236453,56.9167205 C86.4236453,58.0821986 85.4798359,59.0271381 84.3157515,59.0271381 L26.1679205,59.0271381 C25.6088016,59.0271381 25.0723427,59.2497872 24.6771126,59.6454905 L21.6965508,62.6296211 C21.3013207,63.0253244 20.7648617,63.2479735 20.2057429,63.2479735 L13.5205577,63.2479735 C12.9614389,63.2479735 12.4249799,63.0253244 12.0297498,62.6296211 L9.04918803,59.6454905 C8.65343097,59.2497872 8.11749898,59.0271381 7.55838015,59.0271381 L2.10789379,59.0271381 C0.943809444,59.0271381 0,58.0821986 0,56.9167205 L0,6.11041766 C0,4.94493951 0.943809444,4 2.10789379,4 L7.55838015,4 C8.11697201,4 8.65395795,4.22212146 9.04918803,4.61835238 L12.0297498,7.60406576 C12.4249799,7.99976908 12.9614389,8.22241814 13.5205577,8.22241814 L20.2057429,8.22241814 C20.7648617,8.22241814 21.3013207,7.99976908 21.6965508,7.60406576 L24.6771126,4.61835238 C25.0723427,4.22212146 25.6088016,4 26.1679205,4 L84.3157515,4 C85.4798359,4 86.4236453,4.94493951 86.4236453,6.11041766 L86.4236453,27.2145943 C86.4236453,28.3800724 85.4798359,29.325012 84.3157515,29.325012 L34.5994956,29.325012 C34.0403768,29.325012 33.5039178,29.5471334 33.1086877,29.9433643 L30.1281259,32.9290777 C29.7328958,33.324781 29.1964369,33.5474301 28.637318,33.5474301 L21.9521329,33.5474301 C21.3930141,33.5474301 20.8565551,33.324781 20.461325,32.9290777 L17.4807632,29.9433643 C17.0855331,29.5471334 16.5490741,29.325012 15.9899553,29.325012 L10.5394689,29.325012 C9.3753846,29.325012 8.43157515,30.2699515 8.43157515,31.4354296 L8.43157515,40.032324 C8.43157515,41.1978021 9.3753846,42.1427416 10.5394689,42.1427416 L15.9899553,42.142214 Z" id="Fill-1" fill="#FFAB19"></path>
</g>
</g>
<g id="Painting" transform="translate(267.000000, 90.000000)">
<path d="M50.397076,82.2418081 C30.736341,100.271753 8.51457002,95.831481 8.51457002,102.085193 C8.51457002,108.338905 18.3460513,102.745184 18.3460513,108.024431 C18.3460513,113.303677 -1.80983655,110.315707 0.324723711,116.797383 C2.45928397,123.279058 23.9105381,112.727866 26.2579425,116.797383 C28.6053468,120.8669 15.6310323,119.616478 18.3460513,124.545788 C21.0610703,129.475099 38.8214816,118.14547 42.327781,124.774773 C45.8340804,131.404077 68.9518197,114.898365 75.6382209,112.568582 C82.324622,110.238799 70.0578111,64.2118635 50.397076,82.2418081 Z" id="Path-6" fill="#9966FF"></path>
<g id="brush" transform="translate(79.145038, 61.843478) rotate(-22.000000) translate(-79.145038, -61.843478) translate(27.480916, 16.565217)">
<path d="M96.3508446,11.4446261 C95.0907886,12.7240272 93.0479984,12.7240272 91.7883996,11.4446261 C90.5288009,10.1647606 90.5288009,8.08985526 91.7883996,6.81045414 C93.0479984,5.53105303 95.0907886,5.53105303 96.3503874,6.81045414 C97.6104433,8.08985526 97.6104433,10.1647606 96.3508446,11.4446261 M102.123967,4.56140166 C99.4090863,-1.01827326 91.0454421,-1.33638206 86.9438595,2.82921794 L65.5837168,27.5251424 C64.9001959,28.3150739 63.8774292,28.7112006 62.8496332,28.5839571 C58.6360354,28.0633732 49.791412,24.304581 44.6551753,24.2065942 C43.1838908,24.1787306 41.7660993,24.7592211 40.7259588,25.8157139 L39.917621,26.6367597 C43.8966728,31.6215479 47.9991699,36.5264607 52.2955217,41.2326134 C58.7485077,48.3011304 65.7336799,54.8801778 73.0617556,61.0027275 C74.2395147,61.986775 75.422303,62.9657143 76.6238368,63.9195763 L64.7136564,76.0174632 L77.4216589,63.1096759 C78.467743,62.0471461 79.0401632,60.5977773 79.0054157,59.0945391 C78.9171752,55.2447259 77.5304736,51.4209187 76.4592431,47.7684723 C75.2965718,43.8039543 74.0191421,40.9521204 75.9586041,38.0287701 C76.349514,37.4399205 76.8711845,36.8478202 77.5505906,36.2431813 C80.3308519,33.7688985 83.1047123,31.2871854 85.8822304,28.8091874 C90.6088117,24.5911111 95.3358503,20.3730347 100.062889,16.1554228 C103.009115,13.5260329 103.807395,8.02066079 102.123967,4.56140166" id="Fill-1" fill="#FFBF00"></path>
<path d="M35.4113666,79.5719692 C33.7690876,76.1071374 29.7854637,78.2326615 28.7855572,75.1658139 C27.7856507,72.0980376 33.7997203,67.5572085 30.1731732,59.9054147 C27.9072671,55.1254235 18.5322864,51.6308705 15.4955333,52.2721965 C12.4990142,52.9042345 9.48054929,54.1701683 6.58141479,55.1802218 C4.30499299,55.9738684 1.56405129,57.3048171 0.427897804,59.612383 C-0.528574262,61.5554009 0.116084253,63.3604943 2.3865624,63.4863446 C5.30855713,63.6488819 4.60674804,65.9248692 4.14497137,68.0058116 C3.95294543,68.8709747 3.64616113,69.9646188 4.24372757,70.7415474 C5.24683451,72.0478832 7.40163988,71.2031534 8.41846296,72.6478782 C8.86332306,73.2785231 8.88435447,74.1390423 8.65895259,74.880677 C8.16700042,76.5032641 6.47534332,78.703091 9.06632191,79.6156221 C9.69132062,79.8352797 10.3693551,79.8668584 10.9966398,80.0809433 C13.7741579,81.0283038 11.3317708,83.9172891 11.0597341,85.5932813 C10.7730668,87.3616877 12.2073177,88.7650815 13.8303941,89.0061012 C19.5888863,89.8610477 25.3839548,90.1550081 31.1977688,90.2056268 C32.4719981,90.2172366 33.8189229,86.8076675 34.3524807,85.7743944 C35.2824349,83.9734806 36.3650954,81.584646 35.4113666,79.5719692" id="Fill-4" fill="#855CD6"></path>
<path d="M60.7067608,77.0377798 C60.7067608,77.0377798 46.4790103,63.7668376 43.1606191,60.3962774 C39.8426852,57.0261817 26.7771487,42.5742896 26.7771487,42.5742896 C26.0104166,41.7955035 26.0104166,40.5337493 26.7771487,39.7549632 L39.92041,26.4046099 C43.8994618,31.3893982 48.0019588,36.2943109 52.2973963,40.9999993 C58.7512967,48.0689807 65.7364689,54.6480281 73.0640873,60.7705777 C74.2418464,61.7541609 75.4246348,62.7335645 76.6261685,63.6878909 L63.4829073,77.0377798 C62.7166324,77.8165659 61.473493,77.8165659 60.7067608,77.0377798" id="Fill-6" fill="#CF8B17"></path>
<path d="M60.8532035,76.9937554 C60.8532035,76.9937554 46.6254529,63.7228132 43.3070618,60.352253 C40.4573054,57.4576951 30.4216639,46.3935457 27.6464319,43.3290201 C25.8153274,46.1794608 22.9504832,49.4627152 18.6788205,51.5873105 C18.3295161,51.7609933 17.8567665,51.9685767 17.2939477,52.2007729 C21.2131057,52.6131534 28.3775021,55.7635915 30.3197073,59.8613903 C33.9457971,67.5131841 27.9321848,72.0540132 28.9325485,75.1217895 C29.9319978,78.1886371 33.9156216,76.0635774 35.5579006,79.5284092 C36.5116295,81.5410859 35.4294261,83.9294562 34.4985575,85.73037 C34.0047765,86.686554 32.8155873,89.6707396 31.6309702,90.1040178 C37.0145546,90.3715078 38.9325279,90.189466 41.7292486,89.2606811 C50.7192631,86.2751023 58.9105411,78.8982287 60.8925231,77.0257985 C60.8801786,77.0141886 60.865548,77.0058296 60.8532035,76.9937554" id="Fill-10" fill="#FFFFFF"></path>
<path d="M100.923622,10.4826372 C99.9936681,11.9250401 98.6732611,13.0641947 97.3715996,14.1819872 C92.4936835,18.3703424 87.6157674,22.5586977 82.7383085,26.7475173 C80.5396115,28.6348081 78.3624031,30.5476405 76.1056411,32.3652724 C74.2539624,33.8564364 71.7896295,35.563543 70.9982083,37.929158 C70.1295195,40.5302199 71.9350205,44.6517026 72.4457181,47.235582 C73.0281968,50.1784368 73.701202,53.6618443 72.5028687,56.5420061 C71.8984442,57.9955544 60.6100621,68.9603238 56.5189951,72.8946564 L60.5762289,77.0161391 C61.371765,77.8237175 62.6606248,77.8237175 63.4557036,77.0161391 L77.4242192,62.8772475 C78.4703034,61.8147176 79.0422664,60.3653489 79.0084332,58.862575 C78.9197355,55.0127619 77.5330339,51.1884903 76.4618035,47.5360439 C75.2991321,43.5715259 74.0221596,40.719692 75.9616216,37.7968061 C76.3520744,37.2074921 76.8737448,36.6158562 77.5531509,36.0112173 C80.3334122,33.5369345 83.1077298,31.054757 85.8847907,28.576759 C90.6118293,24.3586827 95.3384106,20.1406063 100.065449,15.9229944 C102.983786,13.3186817 103.79121,7.89364946 102.169505,4.42928202 C102.469888,6.50743809 102.09178,8.67243555 100.923622,10.4826372 Z" id="Fill-12" fill-opacity="0.2" fill="#CF8B17"></path>
<path d="M62.0556059,77.6214282 C62.563103,77.6116759 63.0683142,77.4133804 63.4560237,77.0195756 L76.6248884,63.69012 C75.4233546,62.736258 74.2414807,61.7577831 73.0641788,60.7742 C72.2690999,60.1101188 71.4799648,59.438143 70.69403,58.7633808 C67.2092164,62.5518942 59.6955157,69.8433195 56.5193152,72.8985573 L59.3503262,75.7740751 C60.1975263,76.5663286 60.7068523,77.041402 60.7068523,77.041402 C61.0799313,77.4203463 61.566397,77.6116759 62.0556059,77.6214282" id="Fill-15" fill-opacity="0.2" fill="#575E75"></path>
<path d="M55.2917665,71.8269718 C55.2917665,71.8269718 46.7525558,82.3626426 38.954931,85.1828977 C31.8307686,87.7588825 23.479469,87.4073374 16.1518505,86.634124 C11.751256,86.1697316 11.9583697,83.1874035 11.9583697,83.1874035 C11.7046212,83.796222 11.0151566,85.9640058 10.9932108,86.5876848 C11.2817069,87.8396868 12.4443782,88.7610413 13.7295804,88.9514422 C19.4871582,89.8063887 25.2831412,90.1008135 31.096498,90.1514322 C31.1920537,90.1518966 31.2876095,90.1282126 31.3836225,90.0933832 C36.7667497,90.3608732 38.7857653,90.2336297 41.5829431,89.3048449 C50.4668861,86.3540954 58.9238,79.06267 61.0269412,77.0862159 L55.2917665,71.8269718 Z" id="Fill-17" fill-opacity="0.2" fill="#575E75"></path>
</g>
</g>
<g id="Videos" transform="translate(502.663366, 20.041047) rotate(10.000000) translate(-502.663366, -20.041047) translate(483.663366, 3.041047)">
<rect id="Rectangle" fill-opacity="0.15" fill="#000000" x="0" y="0" width="38" height="34" rx="3.15"></rect>
<path d="M2.1,0 L35.9,0 C37.059798,-2.13051432e-16 38,0.940202025 38,2.1 L38,29.775 C38,30.934798 37.059798,31.875 35.9,31.875 L2.1,31.875 C0.940202025,31.875 1.47430192e-15,30.934798 1.33226763e-15,29.775 L0,2.1 C-1.42034288e-16,0.940202025 0.940202025,1.54531906e-15 2.1,1.33226763e-15 Z" id="Rectangle" fill="#575E75"></path>
<path d="M30.2703913,0 C29.3692749,0 29.6871333,2.30657959 27.5506469,3.26603964 C25.6313916,4.12794484 26.3537527,8.05180984 24.615996,8.24604797 C21.515509,8.59260559 23.0174062,14.4760437 20.1281748,14.4760437 C17.2389434,14.4760437 18.2115832,19.1475677 16.1034364,19.1475677 C13.9952896,19.1475677 13.2347072,24.6631775 11.8360907,24.6631775 C10.9036797,24.6631775 12.8694996,24.6631775 17.7335506,24.6631775 C18.3405544,23.09139 19.1968486,22.3054962 20.3024331,22.3054962 C21.9608098,22.3054962 21.2446653,18.3823395 23.2411713,18.3823395 C25.2376773,18.3823395 24.8849165,12.3315887 27.0582037,12.3315887 C29.231491,12.3315887 29.2086418,6.84347534 31.4246211,6.09121704 C33.6406005,5.33895874 34.0154089,1.53201297e-14 35.6032334,1.50990331e-14 C37.191058,1.50990331e-14 32.3206131,0 30.2703913,0 Z" id="Path-8-Copy" fill-opacity="0.15" fill="#FFFFFF"></path>
<path d="M19.7148357,0 C18.8137194,0 19.1315778,2.30657959 16.9950913,3.26603964 C15.075836,4.12794484 15.7981972,8.05180984 14.0604405,8.24604797 C10.9599534,8.59260559 12.4618507,14.4760437 9.57261926,14.4760437 C6.68338784,14.4760437 7.6560276,19.1475677 5.54788081,19.1475677 C3.43973401,19.1475677 2.67915161,24.6631775 1.28053511,24.6631775 C0.348124107,24.6631775 2.31394408,24.6631775 7.17799502,24.6631775 C7.78499886,23.09139 8.64129303,22.3054962 9.74687752,22.3054962 C11.4052543,22.3054962 10.6891097,18.3823395 12.6856157,18.3823395 C14.6821217,18.3823395 14.3293609,12.3315887 16.5026482,12.3315887 C18.6759355,12.3315887 18.6530862,6.84347534 20.8690656,6.09121704 C23.0850449,5.33895874 23.4598533,1.53201297e-14 25.0476779,1.50990331e-14 C26.6355025,1.50990331e-14 21.7650576,0 19.7148357,0 Z" id="Path-8-Copy-2" fill-opacity="0.15" fill="#FFFFFF"></path>
<path d="M0,25.5 L38,25.5 L38,29.775 C38,30.934798 37.059798,31.875 35.9,31.875 L2.1,31.875 C0.940202025,31.875 1.47430192e-15,30.934798 1.33226763e-15,29.775 L0,25.5 Z" id="Rectangle" fill="#D9E3F2"></path>
<rect id="Rectangle-Copy" fill="#CF8B17" x="0" y="24.703125" width="38" height="1.59375"></rect>
<rect id="Rectangle-Copy" fill="#FFAB19" x="0" y="24.703125" width="29.2916667" height="1.59375"></rect>
<ellipse id="Oval-2" fill="#FFFFFF" cx="28.5" cy="25.5" rx="2.11111111" ry="2.125"></ellipse>
<ellipse id="Oval-2" stroke-opacity="0.15" stroke="#000000" stroke-width="1.05" fill="#FFFFFF" cx="28.5" cy="25.5" rx="2.63611111" ry="2.65"></ellipse>
<path d="M21.2248709,10.1319285 C22.0784693,11.2195985 22.6985527,12.1525452 23.0851213,12.9307688 C23.497029,13.7600041 23.8452901,14.8191884 24.1299045,16.1083217 L24.1299064,16.1083213 C24.3666435,17.1805988 23.737307,18.2542196 22.6860408,18.5714937 C21.6935025,18.8710436 20.7009642,19.0208185 19.7084259,19.0208185 C18.6212114,19.0208185 17.5339969,18.8411073 16.4467824,18.481685 L16.4467847,18.481678 C15.4841634,18.1634449 14.8863557,17.2028988 15.0259413,16.1986937 C15.1746748,15.1286771 15.5243801,14.0393687 16.0750573,12.9307688 C16.5763159,11.921656 17.2087792,10.9676528 17.9724472,10.0687592 L17.9724458,10.068758 C18.7233642,9.18487158 20.0486354,9.07707972 20.9325218,9.82799816 C21.0399227,9.91924215 21.1378662,10.0210656 21.2248709,10.1319285 Z" id="Triangle" fill-opacity="0.15" fill="#000000" transform="translate(19.591643, 14.175283) rotate(90.000000) translate(-19.591643, -14.175283) "></path>
<path d="M21.1444673,9.12034495 C21.9980656,10.2080149 22.6181491,11.1409616 23.0047176,11.9191852 C23.4166254,12.7484205 23.7648864,13.8076049 24.0495008,15.0967382 L24.0495028,15.0967377 C24.2862398,16.1690152 23.6569034,17.242636 22.6056372,17.5599101 C21.6130989,17.85946 20.6205605,18.0092349 19.6280222,18.0092349 C18.5408077,18.0092349 17.4535932,17.8295238 16.3663788,17.4701014 L16.3663811,17.4700944 C15.4037598,17.1518614 14.8059521,16.1913153 14.9455377,15.1871101 C15.0942712,14.1170935 15.4439765,13.0277852 15.9946536,11.9191852 C16.4959122,10.9100724 17.1283756,9.95606925 17.8920435,9.05717566 L17.8920421,9.05717445 C18.6429605,8.17328801 19.9682318,8.06549615 20.8521182,8.81641459 C20.9595191,8.90765859 21.0574625,9.00948199 21.1444673,9.12034495 Z" id="Triangle" fill="#FFFFFF" transform="translate(19.511240, 13.163699) rotate(90.000000) translate(-19.511240, -13.163699) "></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 60 KiB

32
static/svgs/feature/tapping-block.svg Normal file
View file

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="122px" height="81px" viewBox="0 0 122 81" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Hat Block Tap</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M39.8884411,39.9863208 C40.5832165,32.1028273 47.0547731,28.7414197 49.1765471,26.1194211 C52.9045908,21.5111724 43.1208996,18.9838202 36.9035097,28.1093829 C33.349691,33.3252778 29.9021071,28.2604991 28.6753611,24.0462129 C27.0611238,18.4999833 23.5960111,9.02022543 22.0380782,4.6701998 C20.2785648,-0.241606927 14.0545352,2.32047545 15.5001249,6.74022662 C17.0110489,11.3606707 19.6387659,20.3162939 20.6615412,23.1654971 C20.8272674,23.6267992 20.9871508,24.2718267 20.6105485,24.3919243 C20.0384743,24.5740591 19.852829,23.8463153 19.4682591,22.8113019 C17.3252382,17.0370724 10.1939637,20.0893545 12.7428014,25.6196772 C12.9528807,26.075677 13.636767,27.2999833 13.3467461,27.543625 C12.9993584,27.8355179 12.6501116,27.6992482 12.4118801,27.2398019 C9.81417437,22.2344092 4.23977038,25.2501053 6.74637979,29.9614842 C7.13785492,30.6971815 7.30225322,31.127465 6.96389548,31.3480416 C6.67573367,31.5362741 6.46193619,31.5193067 5.98998822,30.7928884 C4.0342061,27.7803737 -0.565493875,30.9294232 1.5395481,34.4313423 C5.25085981,40.6043065 7.34713741,46.1221688 10.0943686,50.1384132 C16.5752207,59.6128687 38.5902522,54.7169689 39.8884411,39.9863208" id="path-1"></path>
</defs>
<g id="Sketches" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="V3_Announcement-(Logged-out)" transform="translate(-676.000000, -386.000000)">
<g id="Banner">
<g id="Hat-Block-Tap" transform="translate(673.000000, 372.000000)">
<g id="Hat-Block" transform="translate(62.501943, 40.600635) rotate(-10.000000) translate(-62.501943, -40.600635) translate(4.501943, 9.600635)">
<path d="M115.32408,51.3751501 C115.32408,53.1760003 113.88658,54.6375599 112.129635,54.6375599 L46.3049131,54.6375599 C45.4551909,54.6375599 44.643802,54.9768505 44.0432464,55.5901836 L39.5901909,60.1445076 C38.9896353,60.7513159 38.1782464,61.0971313 37.3285242,61.0971313 L20.8132464,61.0971313 C19.9635242,61.0971313 19.1521353,60.7513159 18.5515798,60.1445076 L14.0985242,55.5901836 C13.4979687,54.9768505 12.6865798,54.6375599 11.8432464,54.6375599 L3.51852421,54.6375599 C1.75519088,54.6375599 0.324079764,53.1760003 0.324079764,51.3751501 L0.324079764,21.9482136 C8.14268328,11.3808254 19.7969395,6.09713131 35.2868483,6.09713131 C50.7767572,6.09713131 62.4310134,11.3808254 70.2496169,21.9482136 L112.129635,21.9482136 C113.88658,21.9482136 115.32408,23.4097732 115.32408,25.2106234 L115.32408,51.3751501 Z" id="Fill-3-Copy" fill="#E6AC00"></path>
<path d="M115.207513,46.2774631 C115.207513,48.0783134 113.770013,49.5398729 112.013068,49.5398729 L46.1883462,49.5398729 C45.338624,49.5398729 44.5272351,49.8791636 43.9266796,50.4924966 L39.473624,55.0468207 C38.8730685,55.6536289 38.0616796,55.9994444 37.2119573,55.9994444 L20.6966796,55.9994444 C19.8469573,55.9994444 19.0355685,55.6536289 18.4350129,55.0468207 L13.9819573,50.4924966 C13.3814018,49.8791636 12.5700129,49.5398729 11.7266796,49.5398729 L3.40195734,49.5398729 C1.63862401,49.5398729 0.2075129,48.0783134 0.2075129,46.2774631 L0.2075129,16.8505267 C8.02611642,6.28313847 19.6803726,0.999444365 35.1702815,0.999444365 C50.6601903,0.999444365 62.3144465,6.28313847 70.13305,16.8505267 L112.013068,16.8505267 C113.770013,16.8505267 115.207513,18.3120863 115.207513,20.1129365 L115.207513,46.2774631 Z" id="Fill-3" fill="#FFBF00"></path>
</g>
<g id="Tap" transform="translate(75.000000, 29.000000)">
<path d="M25.895567,13.4202475 C25.1815426,10.0217326 22.1667001,7.47005432 18.5558813,7.47005432 C14.4137457,7.47005432 11.0558813,10.8279187 11.0558813,14.9700543 C11.0558813,18.5731364 13.5966366,21.5827933 16.9842407,22.3051186" id="Path" stroke="#FFFFFF" stroke-width="2.5" opacity="0.75" stroke-linecap="round" stroke-linejoin="round" transform="translate(18.475724, 14.887586) rotate(32.000000) translate(-18.475724, -14.887586) "></path>
<path d="M29.0723292,23.2937242 C30.8556116,21.0055414 31.9179225,18.1279033 31.9179225,15.0021493 C31.9179225,7.54630515 25.8737666,1.50214928 18.4179225,1.50214928 C10.9620784,1.50214928 4.91792248,7.54630515 4.91792248,15.0021493 C4.91792248,18.8140893 6.497839,22.2570201 9.03857301,24.7118426" id="Path" stroke="#FFFFFF" stroke-width="2.5" opacity="0.5" stroke-linecap="round" stroke-linejoin="round" transform="translate(18.417922, 13.106996) rotate(-3.000000) translate(-18.417922, -13.106996) "></path>
<g id="Group-2" transform="translate(0.000000, 11.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Fill-1" fill="#3D79CC" xlink:href="#path-1"></use>
<path d="M38.8884411,37.9863208 C39.5832165,30.1028273 46.0547731,26.7414197 48.1765471,24.1194211 C51.9045908,19.5111724 42.1208996,16.9838202 35.9035097,26.1093829 C32.349691,31.3252778 28.9021071,26.2604991 27.6753611,22.0462129 C26.0611238,16.4999833 22.5960111,7.02022543 21.0380782,2.6701998 C19.2785648,-2.24160693 13.0545352,0.320475452 14.5001249,4.74022662 C16.0110489,9.36067071 18.6387659,18.3162939 19.6615412,21.1654971 C19.8272674,21.6267992 19.9871508,22.2718267 19.6105485,22.3919243 C19.0384743,22.5740591 18.852829,21.8463153 18.4682591,20.8113019 C16.3252382,15.0370724 9.19396368,18.0893545 11.7428014,23.6196772 C11.9528807,24.075677 12.636767,25.2999833 12.3467461,25.543625 C11.9993584,25.8355179 11.6501116,25.6992482 11.4118801,25.2398019 C8.81417437,20.2344092 3.23977038,23.2501053 5.74637979,27.9614842 C6.13785492,28.6971815 6.30225322,29.127465 5.96389548,29.3480416 C5.67573367,29.5362741 5.46193619,29.5193067 4.98998822,28.7928884 C3.0342061,25.7803737 -1.56549387,28.9294232 0.539548101,32.4313423 C4.25085981,38.6043065 6.34713741,44.1221688 9.09436858,48.1384132 C15.5752207,57.6128687 37.5902522,52.7169689 38.8884411,37.9863208" id="Fill-1" fill="#4C97FF" mask="url(#mask-2)"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.4 KiB