diff --git a/src/views/splash/hoc/hoc-banner.scss b/src/views/splash/hoc/hoc-banner.scss new file mode 100644 index 000000000..87ab40309 --- /dev/null +++ b/src/views/splash/hoc/hoc-banner.scss @@ -0,0 +1,113 @@ +@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 new file mode 100644 index 000000000..69a751c35 --- /dev/null +++ b/src/views/splash/hoc/middle-banner.jsx @@ -0,0 +1,63 @@ +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 new file mode 100644 index 000000000..267290cc5 --- /dev/null +++ b/src/views/splash/hoc/top-banner.jsx @@ -0,0 +1,63 @@ +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 d1a2aaf11..10651aeb7 100644 --- a/src/views/splash/l10n.json +++ b/src/views/splash/l10n.json @@ -53,5 +53,4 @@ "hocbanner.name": "Animate a Name", "hocbanner.fly": "Make it Fly", "hocbanner.pong": "Pong Game" - } diff --git a/src/views/splash/presentation.jsx b/src/views/splash/presentation.jsx index 1771a3f33..5c20540cb 100644 --- a/src/views/splash/presentation.jsx +++ b/src/views/splash/presentation.jsx @@ -32,13 +32,20 @@ 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 TopBanner = require('./beta/top-banner.jsx'); const SmallTopBanner = require('./beta/small-top-banner.jsx'); -const MiddleBanner = require('./beta/middle-banner.jsx'); +// const MiddleBanner = require('./beta/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 + require('./splash.scss'); class ActivityList extends React.Component { @@ -279,21 +286,6 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/ ); } - if ( - this.props.sessionStatus === sessionActions.Status.FETCHED && - Object.keys(this.props.user).length === 0 && - Date.now() >= BETA_LAUNCH_TIME // Show middle banner on and after August 1 - ) { - rows.push( - - - - ); - } - if (this.props.featuredGlobal.scratch_design_studio && this.props.featuredGlobal.scratch_design_studio.length > 4) { @@ -439,6 +431,18 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/ messages={messages} /> ] : []} + { + 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 && + + + + } { this.props.sessionStatus === sessionActions.Status.FETCHED && Object.keys(this.props.user).length !== 0 && // Only show top banner if user is logged in @@ -487,14 +491,42 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/ key="frameless-desktop" minWidth={frameless.desktop} > - + { + (Date.now() < HOC_START_TIME && // Hide intro if HoC banner is showing + Date.now() > HOC_END_TIME) ? + [ + + ] : + [] + } + ]) : [] } + {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/hoc/bg-pattern.png b/static/images/hoc/bg-pattern.png new file mode 100644 index 000000000..83e6766e1 Binary files /dev/null and b/static/images/hoc/bg-pattern.png differ diff --git a/static/images/hoc/create-an-adventure-game.jpg b/static/images/hoc/create-an-adventure-game.jpg new file mode 100644 index 000000000..9d822e98c Binary files /dev/null and b/static/images/hoc/create-an-adventure-game.jpg differ diff --git a/static/images/hoc/create-animations-that-talk.png b/static/images/hoc/create-animations-that-talk.png new file mode 100644 index 000000000..2098fa3ad Binary files /dev/null and b/static/images/hoc/create-animations-that-talk.png differ diff --git a/static/images/hoc/getting-started.jpg b/static/images/hoc/getting-started.jpg new file mode 100644 index 000000000..553e881d9 Binary files /dev/null and b/static/images/hoc/getting-started.jpg differ diff --git a/static/svgs/tutorials.svg b/static/svgs/tutorials.svg new file mode 100644 index 000000000..6028966a4 --- /dev/null +++ b/static/svgs/tutorials.svg @@ -0,0 +1,22 @@ + + + + Tutorials/Light Bulb + Created with Sketch. + + + + + + + + + + + + + + + + + \ No newline at end of file