Add Power Puff Girls banner

src/components/cn-banner/cn-banner.jsx

@@ -0,0 +1,43 @@
+var classNames = require('classnames');
+var React = require('react');
+
+var TitleBanner = require('../title-banner/title-banner.jsx');
+var Button = require('../forms/button.jsx');
+var FlexRow = require('../flex-row/flex-row.jsx');
+
+require('./cn-banner.scss');
+
+/**
+ * Homepage banner for Cartoon Network collaboration
+ */
+var CNBanner = React.createClass({
+    type: 'CNBanner',
+    render: function () {
+        var classes = classNames(
+            'cn-banner',
+            this.props.className
+        );
+        return (
+            <TitleBanner className={classes}>
+                <FlexRow className="inner">
+                    <div className="cta">
+                        <h1>Make It Fly</h1>
+                        <p>
+                            With Scratch, you can program anything to fly. Animate the Scratch Cat, a cartoon character,
+                            or even a taco!
+                        </p>
+                        <div className="button-row">
+                            <a><Button>See examples</Button></a>
+                            <a><Button>Make your own</Button></a>
+                        </div>
+                    </div>
+                    <div className="flying">
+                        <img src="/svgs/flying.svg" alt="" />
+                    </div>
+                </FlexRow>
+            </TitleBanner>
+        );
+    }
+});
+
+module.exports = CNBanner;

src/components/cn-banner/cn-banner.scss

@@ -0,0 +1,69 @@
+@import "../../colors";
+@import "../../frameless";
+
+.cn-banner {
+    background-color: $ui-blue;
+    background-image: url("/images/ppg-bg.jpg");
+
+    &.title-banner {
+        transition: none;
+        margin-bottom: 20px;
+        padding: 0;
+        text-align: left;
+
+        h1,
+        p {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            text-align: left;
+        }
+    }
+
+    h1 {
+        font-weight: 500;
+    }
+
+    p {
+        font-weight: 300;
+    }
+
+    .cta,
+    .flying {
+        display: flex;
+        height: 235px;
+        justify-content: center;
+    }
+
+    .cta {
+        margin-right: $cols1;
+        width: $cols5;
+        flex-direction: column;
+    }
+
+    .flying {
+        margin: 0 $cols1;
+        width: $cols4;
+        flex-direction: row;
+    }
+
+    .button-row {
+        display: flex;
+        margin-top: $gutter;
+        width: $cols5;
+        align-content: stretch;
+
+        a {
+            margin-right: $gutter;
+            flex-grow: 1;
+        }
+
+        .button {
+            background-color: $ui-white;
+            padding: 13px 20px;
+            width: 100%;
+            color: $ui-blue;
+            font-size: .9rem;
+        }
+    }
+}

src/views/components/components.jsx

@@ -6,6 +6,7 @@ var Page = require('../../components/page/www/page.jsx');
 var Box = require('../../components/box/box.jsx');
 var Button = require('../../components/forms/button.jsx');
 var Carousel = require('../../components/carousel/carousel.jsx');
+var CNBanner = require('../../components/cn-banner/cn-banner.jsx');
 var Input = require('../../components/forms/input.jsx');
 var Spinner = require('../../components/spinner/spinner.jsx');
 
@@ -14,8 +15,8 @@ require('./components.scss');
 var Components = React.createClass({
     type: 'Components',
     render: function () {
-        return (
-            <div className="inner components">
+        return (<div className="components">
+            <div className="inner">
                 <h1>Button</h1>
                 <Button>I love button</Button>
                 <h1>Form</h1>
@@ -40,8 +41,33 @@ var Components = React.createClass({
                 <Activity items={[]} />
                 <h1>This is a Spinner</h1>
                 <Spinner />
+                <h1>Colors</h1>
+                <div className="colors">
+                    <span className="ui-blue">$ui-blue</span>
+                    <span className="ui-orange">$ui-orange</span>
+                    <span className="ui-light-gray">$ui-light-gray</span>
+                    <span className="ui-gray">$ui-gray</span>
+                    <span className="ui-dark-gray">$ui-dark-gray</span>
+                    <span className="background-color">$background-color</span>
+                    <span className="ui-aqua">$ui-aqua</span>
+                    <span className="ui-purple">$ui-purple</span>
+                    <span className="ui-white">$ui-white</span>
+                    <span className="ui-border">$ui-border</span>
+                    <span className="active-gray">$active-gray</span>
+                    <span className="active-dark-gray">$active-dark-gray</span>
+                    <span className="box-shadow-gray">$box-shadow-gray</span>
+                    <span className="overlay-gray">$overlay-gray</span>
+                    <span className="header-gray">$header-gray</span>
+                    <span className="type-gray">$type-gray</span>
+                    <span className="type-white">$type-white</span>
+                    <span className="link-blue">$link-blue</span>
+                    <span className="splash-green">$splash-green</span>
+                    <span className="splash-pink">$splash-pink</span>
+                    <span className="splash-blue">$splash-blue</span>
+                </div>
             </div>
-        );
+            <CNBanner />
+        </div>);
     }
 });
 

src/views/components/components.scss

@@ -1,5 +1,115 @@
+@import "../../colors";
+
 .components {   
     h1 {
         margin: 0 0 10px 0;
     }
+
+    .colors {
+        span {
+            display: inline-block;
+            width: 200px;
+            text-align: center;
+            line-height: 200px;
+            font-weight: bold;
+        }
+
+        .ui-blue,
+        .ui-orange,
+        .ui-dark-gray,
+        .ui-purple,
+        .overlay-gray,
+        .header-gray,
+        .type-gray,
+        .link-blue,
+        .splash-green,
+        .splash-pink,
+        .splash-blue {
+            color: $ui-white;
+        }
+
+        .ui-blue {
+            background-color: $ui-blue;
+        }
+
+        .ui-orange {
+            background-color: $ui-orange;
+        }
+
+        .ui-light-gray {
+            background-color: $ui-light-gray;
+        }
+
+        .ui-gray {
+            background-color: $ui-gray;
+        }
+
+        .ui-dark-gray {
+            background-color: $ui-dark-gray;
+        }
+
+        .background-color {
+            background-color: $background-color;
+        }
+
+        .ui-aqua {
+            background-color: $ui-aqua;
+        }
+
+        .ui-purple {
+            background-color: $ui-purple;
+        }
+
+        .ui-white {
+            background-color: $ui-white;
+        }
+
+        .ui-border {
+            background-color: $ui-border;
+        }
+
+        .active-gray {
+            background-color: $active-gray;
+        }
+
+        .active-dark-gray {
+            background-color: $active-dark-gray;
+        }
+
+        .box-shadow-gray {
+            background-color: $box-shadow-gray;
+        }
+
+        .overlay-gray {
+            background-color: $overlay-gray;
+        }
+
+        .header-gray {
+            background-color: $header-gray;
+        }
+
+        .type-gray {
+            background-color: $type-gray;
+        }
+
+        .type-white {
+            background-color: $type-white;
+        }
+
+        .link-blue {
+            background-color: $link-blue;
+        }
+
+        .splash-green {
+            background-color: $splash-green;
+        }
+
+        .splash-pink {
+            background-color: $splash-pink;
+        }
+
+        .splash-blue {
+            background-color: $splash-blue;
+        }
+    }
 }

src/views/splash/splash.jsx

@@ -10,6 +10,7 @@ var Api = require('../../mixins/api.jsx');
 
 var Activity = require('../../components/activity/activity.jsx');
 var AdminPanel = require('../../components/adminpanel/adminpanel.jsx');
+var CNBanner = require('../../components/cn-banner/cn-banner.jsx');
 var DropdownBanner = require('../../components/dropdown-banner/banner.jsx');
 var Box = require('../../components/box/box.jsx');
 var Button = require('../../components/forms/button.jsx');
@@ -370,6 +371,7 @@ var Splash = injectIntl(React.createClass({
                                 {...omit(emailConfirmationStyle, 'padding')} />
                     </Modal>
                 ] : []}
+                <CNBanner />
                 <div key="inner" className="inner">
                     {this.props.session.user ? [
                         <div key="header" className="splash-header">

src/views/splash/splash.scss

@@ -27,6 +27,10 @@
         }
     }
 
+    .cn-banner {
+        margin-top: -20px;
+    }
+
     .box {
         margin-bottom: 20px;
     }