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 = '', +}) => ( +
+
+

{title}

+
+
+
+ + + +
+
+
+

{quote}

+
+ {author} +
+
+ + {buttonText} + +
+
+
+) 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