diff --git a/website/src/components/CaseStudyJumbotron.tsx b/website/src/components/CaseStudyJumbotron.tsx
new file mode 100644
index 00000000000..0ae0b17ad7a
--- /dev/null
+++ b/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 = '',
+}) => (
+
+)
diff --git a/website/src/css/components/_Vimeo.scss b/website/src/css/components/_Vimeo.scss
index a3794df3a87..a20cedbbb15 100644
--- a/website/src/css/components/_Vimeo.scss
+++ b/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;
diff --git a/website/src/css/pages/__case_studies.scss b/website/src/css/pages/__case_studies.scss
index 01a80aa6a0c..fd256d5fbf6 100644
--- a/website/src/css/pages/__case_studies.scss
+++ b/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;
+ }
+ }
+}
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index e3cae74c11c..c11da303c15 100644
--- a/website/src/pages/index.tsx
+++ b/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) => (
-
+
+
+
+
+
diff --git a/website/static/case-studies/jacob-gillespie-thorn-square.jpg b/website/static/case-studies/jacob-gillespie-thorn-square.jpg
index b9fd2d51f64..6dec3f68c4a 100644
Binary files a/website/static/case-studies/jacob-gillespie-thorn-square.jpg and b/website/static/case-studies/jacob-gillespie-thorn-square.jpg differ
diff --git a/website/static/case-studies/thorn-logo-square.png b/website/static/case-studies/thorn-logo-square.png
new file mode 100644
index 00000000000..248da955bd6
Binary files /dev/null and b/website/static/case-studies/thorn-logo-square.png differ
diff --git a/website/static/case-studies/thorn-logo.png b/website/static/case-studies/thorn-logo.png
index 743b7ed9135..5676a025727 100644
Binary files a/website/static/case-studies/thorn-logo.png and b/website/static/case-studies/thorn-logo.png differ