more styling, carousel

src/views/teachers/landing/carousel.scss

+@import "../../../colors";
+
+.carousel {
+    $icon-size: 40px;
+    $button-offset: $icon-size + 5px;
+    $box-content-offset: 20px;
+
+    margin-bottom: 0;
+    padding: 12px $button-offset;
+
+    .box-content & {
+        padding: 12px $button-offset - 20px;
+    }
+
+    .slick-next,
+    .slick-prev {
+        margin-top: -$icon-size / 2;
+        width: $icon-size;
+        height: $icon-size;
+
+        &:before {
+            display: block;
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 70%;
+            width: $icon-size;
+            height: $icon-size;
+            font-size: $icon-size;
+            content: "";
+        }
+
+        &.slick-disabled {
+            &:before {
+                opacity: 1;
+            }
+        }
+    }
+
+    .slick-prev {
+        left: 0;
+
+        &:before {
+            background-image: url("/svgs/carousel/prev_ui-dark-gray.svg");
+
+            &:hover {
+                background-image: url("/svgs/carousel/prev_ui-blue.svg");
+                background-size: 90%;
+            }
+        }
+
+
+        .box-content & {
+            left: -$box-content-offset;
+        }
+    }
+
+    .slick-next {
+        right: 0;
+
+        &:before {
+            background-image: url("/svgs/carousel/next_ui-dark-gray.svg");
+
+            &:hover {
+                background-image: url("/svgs/carousel/next_ui-blue.svg");
+                background-size: 90%;
+            }
+        }
+
+        .box-content & {
+            right: -$box-content-offset;
+        }
+    }
+
+    /*.slick-slide {
+        padding-right: 30px;
+    }*/
+
+}

src/views/teachers/landing/landing.jsx

@@ -7,8 +7,21 @@ var SubNavigation = require('../../../components/subnavigation/subnavigation.jsx
 var TitleBanner = require('../../../components/title-banner/title-banner.jsx');
 var Button = require('../../../components/forms/button.jsx');
 
+var Slider = require('react-slick');
+require('slick-carousel/slick/slick.scss');
+require('slick-carousel/slick/slick-theme.scss');
+require('./carousel.scss');
+
 require('./landing.scss');
 
+var settings = {
+    dots: true,
+    arrows: true,
+    infinite: false,
+    slidesToShow: 2,
+    slidesToScroll: 2
+};
+
 var Landing = React.createClass({
     type: 'Landing',
     render: function () {
@@ -57,6 +70,38 @@ var Landing = React.createClass({
                             <p><b>Subject Areas:</b> language arts, science, social studies,{' '}
                                 math, computer science, foreign languages, and the arts</p>
                         </FlexRow>
+                        <Slider className="carousel" {...settings}>
+                            <div>
+                                <div className="story">
+                                    <img src="/images/teachers/stories/dylan.jpg" alt="dylan's story" />
+                                    <a href="#">Dylan Person</a>
+                                    <p>A place</p>
+                                </div>
+                            </div>
+                            <div>
+                                <div className="story">
+                                    <img src="/images/teachers/stories/ghana-code-club.jpg"
+                                         alt="ghana code club's story" />
+                                    <a href="#">Dylan Person</a>
+                                    <p>A place</p>
+                                </div>
+                            </div>
+                            <div>
+                                <div className="story">
+                                    <img src="/images/teachers/stories/ingrid.jpg" alt="ingrid's story" />
+                                    <a href="#">Dylan Person</a>
+                                    <p>A place</p>
+                                </div>
+                            </div>
+                            <div>
+                                <div className="story">
+                                    <img src="/images/teachers/stories/plug-in-studio.jpg"
+                                         alt="plug in studio's story" />
+                                    <a href="#">Dylan Person</a>
+                                    <p>A place</p>
+                                </div>
+                            </div>
+                        </Slider>
                     </section>
                     <section id="resources">
                         <span className="nav-spacer"></span>

src/views/teachers/landing/landing.scss

@@ -193,6 +193,40 @@ $teacher-spot: $ui-purple;
     #in-practice {
         border-bottom: 1px solid $ui-border;
         padding-bottom: 2rem;
+
+        .story {
+            width: $cols4;
+            border: 1px solid $ui-border;
+            border-radius: 10px;
+            background-color: $ui-white;
+
+            img {
+                border-top-left-radius: 10px;
+                border-top-right-radius: 10px;
+            }
+
+            p {
+                width: $cols2;
+            }
+        }
+
+        .carousel {
+            max-width: $cols10;
+            margin: 0 auto;
+
+            .slick-dots {
+                right: 0;
+            }
+
+            .slick-slide {
+                border-radius: 10px;
+                width: $cols4;
+
+                img {
+                    width: $cols4;
+                }
+            }
+        }
     }
 
     #resources {