Added case study to the home page

website/src/components/CaseStudyJumbotron.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+const COLORS = {
+    dark: 'bg-black text-light',
+    purple: 'bg-purple text-light',
+}
+
+export const CaseStudyJumbotron: React.FunctionComponent<{
+    title: string
+    titleClassName?: string
+    quote: string
+    author: string
+    url: string
+    image: string
+    buttonText?: string
+    color?: keyof typeof COLORS
+    className?: string
+}> = ({
+    title,
+    titleClassName = 'display-6',
+    quote,
+    author,
+    url,
+    image,
+    buttonText = 'Learn their strategy',
+    color = 'dark',
+    className = '',
+}) => (
+    <div className={`jumbotron case-studies-feature pt-5 pb-3 ${COLORS[color]} ${className}`}>
+        <div className="row container justify-content-center mb-4">
+            <h2 className={`text-center ${titleClassName}`}>{title}</h2>
+        </div>
+        <div className="row container justify-content-center">
+            <div class="col-sm-12 col-md-2 case-studies-feature__image">
+                <a href={url}>
+                    <img class="p-3 img-thumbnail align-middle" src={image} />
+                </a>
+            </div>
+            <div class="col-md-6 case-studies-feature__content">
+                <blockquote class="blockquote">
+                    <p class="mb-1">{quote}</p>
+                    <footer class="blockquote-footer">
+                        <cite>{author}</cite>
+                    </footer>
+                </blockquote>
+                <a href={url} class="btn btn-primary mt-4" rel="nofollow">
+                    {buttonText}
+                </a>
+            </div>
+        </div>
+    </div>
+)

website/src/css/components/_Vimeo.scss

@@ -2,7 +2,7 @@
     margin: 2rem 0;
     padding:56.25% 0 0 0;
     position:relative;
-    border: 1px solid #0FADEF;
+    border: 1px solid darkgrey;
 
     iframe {
         position:absolute;

website/src/css/pages/__case_studies.scss

@@ -42,14 +42,14 @@
                 margin-left: -2px;
             }
 
-            @include media-breakpoint-up(lg) {
-                font-size: 2.2rem;
-            }
-
             &:after {
                 content: "”";
                 margin-left: 2px;
             }
+
+            @include media-breakpoint-up(lg) {
+                font-size: 2.2rem;
+            }
         }
 
         footer {
@@ -69,3 +69,47 @@
         }
     }
 }
+
+.case-studies-feature {
+    &__image {
+
+        img {
+            display: inline-block;
+            width: 100%;
+            background-color: white;
+            border: 2px solid lightgrey;
+        }
+
+        @include media-breakpoint-down(sm) {
+            max-width: 180px;
+            text-align: center
+        }
+    }
+
+    &__content {
+        p {
+            margin-top: -0.6rem;
+
+            &:before {
+                text-indent: -0.4em;
+                content: "“";
+                position: absolute;
+                margin-left: -2px;
+            }
+
+            &:after {
+                content: "”";
+                margin-left: 2px;
+            }
+        }
+
+        @include media-breakpoint-down(sm) {
+            margin-top: 2rem;
+            text-align: center;
+        }
+
+        @include media-breakpoint-up(md) {
+            margin-left: 1rem;
+        }
+    }
+}

website/src/pages/index.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'gatsby'
 import * as React from 'react'
+import { CaseStudyJumbotron } from '../components/CaseStudyJumbotron'
 import { ContentSection } from '../components/content/ContentSection'
 import { Jumbotron } from '../components/Jumbotron'
 import Layout from '../components/Layout'
@@ -62,7 +63,17 @@ export default ((props: any) => (
             </div>
             <div className="bg-white text-dark">
                 <CustomerLogosSection className="py-5" />
-                <hr />
+            </div>
+            <ContentSection color="black">
+                <CaseStudyJumbotron
+                    title="See how Thorn uses Sourcegraph to sunset legacy applications"
+                    quote="In pull requests, team members would include links to Sourcegraph code search, in order to prove all references to a deprecated system had been removed."
+                    author="Thorn Software Engineer, Jacob Gilesspie"
+                    url="/case-studies/we-are-thorn"
+                    image="/case-studies/thorn-logo-square.png"
+                />
+            </ContentSection>
+            <div className="bg-white text-dark">
                 <IntegratesWithSection className="mt-4 pt-5 pb-6" />
             </div>
             <div className="bg-primary py-6 d-none">