diff --git a/src/_colors.scss b/src/_colors.scss index dfff97a9a..58f29ab16 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -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-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-25percent: hsla(20, 100%, 55%, .25); $ui-green-35percent: rgba(126, 225, 195, .35); diff --git a/src/views/splash/beta/middle-banner.jsx b/src/views/splash/beta/middle-banner.jsx deleted file mode 100644 index ae36ae6e2..000000000 --- a/src/views/splash/beta/middle-banner.jsx +++ /dev/null @@ -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 = () => ( - - -

- -

-

- -

- - - - -
- -
- -
- -
- -
-
- -); - -module.exports = injectIntl(MiddleBanner); diff --git a/src/views/splash/beta/top-banner.jsx b/src/views/splash/beta/top-banner.jsx deleted file mode 100644 index f374edb26..000000000 --- a/src/views/splash/beta/top-banner.jsx +++ /dev/null @@ -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 = () => ( - - -

- -

-

- -

- - - - -
-
- -
-
- -
-
- -); - -module.exports = injectIntl(TopBanner); diff --git a/src/views/splash/beta/top-banner.scss b/src/views/splash/beta/top-banner.scss deleted file mode 100644 index b30226fac..000000000 --- a/src/views/splash/beta/top-banner.scss +++ /dev/null @@ -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; - } - } -} diff --git a/src/views/splash/feature/middle-banner.jsx b/src/views/splash/feature/middle-banner.jsx new file mode 100644 index 000000000..735c82e12 --- /dev/null +++ b/src/views/splash/feature/middle-banner.jsx @@ -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 = () => ( + + +

+ +

+

+ +

+ + + + +
+ +
+ +
+ +
+ +
+
+ +); + +module.exports = injectIntl(MiddleBanner); diff --git a/src/views/splash/beta/middle-banner.scss b/src/views/splash/feature/middle-banner.scss similarity index 78% rename from src/views/splash/beta/middle-banner.scss rename to src/views/splash/feature/middle-banner.scss index ca0e759f4..a51926f14 100644 --- a/src/views/splash/beta/middle-banner.scss +++ b/src/views/splash/feature/middle-banner.scss @@ -1,12 +1,12 @@ @import "../../../colors"; @import "../../../frameless"; -.beta-middle-banner { +.feature-middle-banner { display: flex; margin-top: 20px; border-radius: 16px; background-color: $ui-orange; - background-image: url("/images/beta/bg-pattern.png"); + background-image: url("/images/feature/bg-pattern.png"); background-size: cover; padding: 0; height: 17rem; @@ -14,18 +14,18 @@ box-sizing: border-box; justify-content: space-between; - .beta-middle-container { + .feature-middle-container { padding-left: 3rem; align-items: flex-start; flex-shrink: 0; } - .beta-banner-images { + .feature-banner-images { display: flex; height: 100%; align-self: flex-end; - .beta-banner-image { + .feature-banner-image { display: flex; margin-right: 2rem; min-width: 0; @@ -41,24 +41,24 @@ } } - .beta-header, - .beta-copy, - .beta-try-it { + .feature-header, + .feature-copy, + .feature-call-to-action { color: $ui-white; } - .beta-header { + .feature-header { font-size: 1.7rem; } - .beta-copy { + .feature-copy { margin-bottom: 1rem; max-width: 350px; line-height: 1.7rem; font-size: 1.3rem; } - .beta-try-it { + .feature-call-to-action { border-radius: 10px; padding: 1em 2em; font-size: 1em; @@ -66,21 +66,21 @@ } @media #{$intermediate} { - .beta-middle-banner { + .feature-middle-banner { margin: 20px auto 40px auto; width: $cols8; height: initial; flex-direction: column; justify-content: center; - .beta-middle-container { + .feature-middle-container { padding-top: 4rem; padding-left: 0; align-items: center; } - .beta-banner-images { - .beta-banner-image { + .feature-banner-images { + .feature-banner-image { margin: 0; padding: 0; diff --git a/src/views/splash/beta/small-top-banner.jsx b/src/views/splash/feature/small-top-banner.jsx similarity index 58% rename from src/views/splash/beta/small-top-banner.jsx rename to src/views/splash/feature/small-top-banner.jsx index 633748b2e..d3eb366bc 100644 --- a/src/views/splash/beta/small-top-banner.jsx +++ b/src/views/splash/feature/small-top-banner.jsx @@ -8,16 +8,16 @@ const TitleBanner = require('../../../components/title-banner/title-banner.jsx') require('./small-top-banner.scss'); const SmallTopBanner = () => ( - - -

- + + +

+

- + diff --git a/src/views/splash/beta/small-top-banner.scss b/src/views/splash/feature/small-top-banner.scss similarity index 72% rename from src/views/splash/beta/small-top-banner.scss rename to src/views/splash/feature/small-top-banner.scss index 8fb1fd6ea..6d8866933 100644 --- a/src/views/splash/beta/small-top-banner.scss +++ b/src/views/splash/feature/small-top-banner.scss @@ -1,24 +1,24 @@ @import "../../../colors"; -.beta-small-top-banner { +.small-top-banner { background: $ui-orange; padding: 5px 0; - .beta-small-top-container { + .small-top-container { justify-content: center; } - .beta-copy, - .beta-try-it { + .copy, + .call-to-action { color: $ui-white; font-weight: 500; } - .beta-copy { + .copy { font-size: 1.1rem; } - .beta-try-it { + .call-to-action { margin-left: 32px; border-radius: 8px; padding: .625rem 1.2rem; diff --git a/src/views/splash/feature/top-banner.jsx b/src/views/splash/feature/top-banner.jsx new file mode 100644 index 000000000..fb81c1168 --- /dev/null +++ b/src/views/splash/feature/top-banner.jsx @@ -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 => ( + + +

+ +

+ {/*

+ +

*/} + + + + +
+
+ +
+
+ +
+
+ +); + +TopBanner.propTypes = { + actionLink: PropTypes.string +}; + +TopBanner.defaultProps = { + actionLink: 'https://scratch.mit.edu' +}; + +module.exports = injectIntl(TopBanner); diff --git a/src/views/splash/feature/top-banner.scss b/src/views/splash/feature/top-banner.scss new file mode 100644 index 000000000..e7d74a444 --- /dev/null +++ b/src/views/splash/feature/top-banner.scss @@ -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; + // } + // } +} diff --git a/src/views/splash/hoc/hoc-banner.scss b/src/views/splash/hoc/hoc-banner.scss deleted file mode 100644 index 87ab40309..000000000 --- a/src/views/splash/hoc/hoc-banner.scss +++ /dev/null @@ -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; - } -} diff --git a/src/views/splash/hoc/middle-banner.jsx b/src/views/splash/hoc/middle-banner.jsx deleted file mode 100644 index 8880da860..000000000 --- a/src/views/splash/hoc/middle-banner.jsx +++ /dev/null @@ -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 = () => ( - - - -

- -

- - - - - - - - - -
- -
- - - - - -
- -
- - - - - - -
- -
- - - - - - - -); - -module.exports = injectIntl(MiddleBanner); diff --git a/src/views/splash/hoc/top-banner.jsx b/src/views/splash/hoc/top-banner.jsx deleted file mode 100644 index 5b1a828da..000000000 --- a/src/views/splash/hoc/top-banner.jsx +++ /dev/null @@ -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 = () => ( - - - -

- -

- - - - - - - - - - -
- -
- - - - - - -
- -
- - - - - -
- -
- - - - - -); - -module.exports = injectIntl(TopBanner); diff --git a/src/views/splash/l10n.json b/src/views/splash/l10n.json index 10651aeb7..dc1f2b368 100644 --- a/src/views/splash/l10n.json +++ b/src/views/splash/l10n.json @@ -41,16 +41,7 @@ "welcome.tryOut": "Try out starter projects", "welcome.connect": "Connect with other Scratchers", - "betabanner.title": "The Next Generation of Scratch", - "betabanner.subtitle": "Scratch 3.0 is coming in January! Try the Beta version now.", - "betabanner.callToAction": "Try it!", - - "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" + "featureBanner.title": "The new Scratch is here!", + "featureBanner.subtitle": "not used", + "featureBanner.callToAction": "Start Creating" } diff --git a/src/views/splash/presentation.jsx b/src/views/splash/presentation.jsx index 8be069b6e..7a5a2e538 100644 --- a/src/views/splash/presentation.jsx +++ b/src/views/splash/presentation.jsx @@ -31,20 +31,13 @@ const LoveProjectMessage = require('./activity-rows/love-project.jsx'); const RemixProjectMessage = require('./activity-rows/remix-project.jsx'); const ShareProjectMessage = require('./activity-rows/share-project.jsx'); -// Beta Banner Components -// const TopBanner = require('./beta/top-banner.jsx'); -const SmallTopBanner = require('./beta/small-top-banner.jsx'); -// const MiddleBanner = require('./beta/middle-banner.jsx'); +// Featured Banner Components +const TopBanner = require('./feature/top-banner.jsx'); +const SmallTopBanner = require('./feature/small-top-banner.jsx'); +const MiddleBanner = require('./feature/middle-banner.jsx'); -const BETA_LAUNCH_TIME = 1533128400000; // August 1 at 9am ET -const SMALL_BANNER_TIME = 1534942800000; // August 22 at 9am ET - -// 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 +// Scratch 3.0 Launch Banner +const LAUNCH_END_TIME = 1547873999000; require('./splash.scss'); @@ -238,7 +231,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/ } } } - renderHomepageRows () { + renderHomepageRows (showBanner) { const rows = [ ); } + + if ( + this.props.sessionStatus === sessionActions.Status.FETCHED && + Object.keys(this.props.user).length === 0 && + showBanner // Show middle banner + ) { + rows.push( + + + + ); + } if (this.props.featuredGlobal.scratch_design_studio && this.props.featuredGlobal.scratch_design_studio.length > 4) { @@ -361,7 +369,10 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/ return rows; } 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 formatNumber = this.props.intl.formatNumber; @@ -433,27 +444,26 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/ ] : []} { this.props.sessionStatus === sessionActions.Status.FETCHED && - Object.keys(this.props.user).length === 0 && // Only show top banner if user is not logged in - Date.now() >= HOC_START_TIME && - Date.now() < HOC_END_TIME && + Object.keys(this.props.user).length === 0 && // if user is not logged in + ShowTopBanner && - + } { this.props.sessionStatus === sessionActions.Status.FETCHED && - Object.keys(this.props.user).length !== 0 && // Only show top banner if user is logged in - Date.now() >= BETA_LAUNCH_TIME && + Object.keys(this.props.user).length !== 0 && // if user is logged in + ShowTopBanner && - {Date.now() >= SMALL_BANNER_TIME ? - : // Show small banner starting September 1 at 9am ET - + {ShowSmallTopBanner ? + : + } } @@ -492,41 +502,17 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/ minWidth={frameless.desktop} > { - (Date.now() < HOC_START_TIME || // Hide intro if HoC banner is showing - Date.now() > HOC_END_TIME) ? - [ - - ] : - [] + !ShowTopBanner && // show intro if not showing top banner + } ]) : [] } - {featured.shift()} - {featured.shift()} - - { - 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 - - - - } - -
{featured} {this.props.isAdmin && ( diff --git a/static/images/beta/left-illustration.png b/static/images/beta/left-illustration.png deleted file mode 100644 index 4c199d56e..000000000 Binary files a/static/images/beta/left-illustration.png and /dev/null differ diff --git a/static/images/beta/right-illustration.png b/static/images/beta/right-illustration.png deleted file mode 100644 index a472edf1a..000000000 Binary files a/static/images/beta/right-illustration.png and /dev/null differ diff --git a/static/images/beta/bg-pattern.png b/static/images/feature/bg-pattern.png similarity index 100% rename from static/images/beta/bg-pattern.png rename to static/images/feature/bg-pattern.png diff --git a/static/svgs/feature/banner-notch.svg b/static/svgs/feature/banner-notch.svg new file mode 100644 index 000000000..138cb96f0 --- /dev/null +++ b/static/svgs/feature/banner-notch.svg @@ -0,0 +1,9 @@ + + + + Path 2 + Created with Sketch. + + + + \ No newline at end of file diff --git a/static/svgs/feature/create-icon.svg b/static/svgs/feature/create-icon.svg new file mode 100644 index 000000000..b0f6eb23d --- /dev/null +++ b/static/svgs/feature/create-icon.svg @@ -0,0 +1,17 @@ + + + + surprise-icon + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/static/svgs/feature/illustration-left.svg b/static/svgs/feature/illustration-left.svg new file mode 100644 index 000000000..1e8650893 --- /dev/null +++ b/static/svgs/feature/illustration-left.svg @@ -0,0 +1,35 @@ + + + + left hand stuff + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/static/svgs/feature/illustration-right.svg b/static/svgs/feature/illustration-right.svg new file mode 100644 index 000000000..b5b8ea256 --- /dev/null +++ b/static/svgs/feature/illustration-right.svg @@ -0,0 +1,203 @@ + + + + right hand stuff + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/static/svgs/feature/tapping-block.svg b/static/svgs/feature/tapping-block.svg new file mode 100644 index 000000000..6a9436803 --- /dev/null +++ b/static/svgs/feature/tapping-block.svg @@ -0,0 +1,32 @@ + + + + Hat Block Tap + Created with Sketch. + + + + + + + + + \ No newline at end of file