add user logos

src/components/Hero/Hero.module.scss

@@ -0,0 +1,27 @@
+.backdrop {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  background-image: linear-gradient(-45deg, #173647, lighten(#173647, 5%));
+  color: white;
+}
+
+.title {
+  font-size: 4rem;
+  font-weight: 300;
+}
+
+@media screen and (max-width: 996px) {
+  .backdrop {
+    padding: 2rem;
+  }
+
+  .title {
+    font-size: 3rem;
+  }
+}
+
+
+
+

src/components/Hero/Hero.tsx

@@ -0,0 +1,17 @@
+import React, {FC} from 'react';
+import clsx from "clsx";
+import styles from './Hero.module.scss'
+
+export const Hero: FC = () => {
+    return (
+        <header className={clsx(styles.backdrop)}>
+            <div className="container">
+                <h1 className={clsx(styles.title)}>
+                    <strong>Cucumber </strong>
+                    lets you write<br/>
+                    automated tests in plain language
+                </h1>
+            </div>
+        </header>
+    );
+}

src/components/Hero/index.ts

@@ -0,0 +1 @@
+export * from './Hero'

src/components/Intro/Intro.module.scss

@@ -0,0 +1,7 @@
+.introRow {
+  align-items: center;
+}
+
+.featureFile {
+  margin-bottom: 0;
+}

src/components/Intro/Intro.tsx

@@ -0,0 +1,30 @@
+import React, {FC} from 'react';
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import CodeBlock from "@theme/CodeBlock";
+import {feature} from "./feature";
+import styles from './Intro.module.scss'
+
+export const Intro: FC = () => {
+    return <div className={clsx('row', styles.introRow)}>
+        <div className="col col--6">
+            <p>Cucumber is a tool for running automated acceptance tests, written in plain language.
+                Because they're written in plain language, they can be read by anyone on your team.
+                Because they can be read by anyone, they help improve communication, collaboration and
+                trust on your team.</p>
+            <Link
+                className="button button--primary button--lg"
+                to="https://cucumber.io/docs/installation">
+                Get Started
+            </Link>
+        </div>
+        <div className="col col--6">
+            <CodeBlock
+                className={styles.featureFile}
+                language="gherkin"
+                showLineNumbers>
+                {feature}
+            </CodeBlock>
+        </div>
+    </div>
+}

src/components/Intro/feature.ts

@@ -0,0 +1,10 @@
+export const feature = `@tag
+Feature: Eating too many cucumbers may not be good for you
+
+  Eating too much of anything may not be good for you
+
+  Scenario: Eating a few is no problem
+    Given Alice is hungry
+    When she eats 3 cucumbers
+    Then she will be full
+`

src/components/Intro/index.ts

@@ -0,0 +1 @@
+export * from './Intro'

src/components/UsedBy/UsedBy.module.scss

@@ -0,0 +1,31 @@
+.strapLine {
+  text-align: center;
+}
+
+.logosList {
+  list-style: none;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  max-width: 100%;
+  overflow-x: hidden;
+  color: var(--ifm-font-color-base);
+
+  img {
+    max-width: 120px;
+    max-height: 50px;
+    filter: #{"grayscale()"};
+    opacity: 0.5;
+
+    [data-theme='dark'] & {
+      filter: #{"grayscale() invert()"}
+    }
+
+    @media all and (max-width: 600px) {
+      max-width: 80px;
+      max-height: 30px;
+    }
+  }
+}

src/components/UsedBy/UsedBy.tsx

@@ -0,0 +1,24 @@
+import React, {FC} from 'react';
+import styles from './UsedBy.module.scss';
+
+const LOGOS = [
+    ['Brightcove', 'brightcove.svg'],
+    ['EXL', 'exl.png'],
+    ['FinanceIt', 'financeit.svg'],
+    ['Pendo', 'pendo.svg'],
+    ['SproutSocial', 'sproutsocial.svg'],
+    ['Trivago', 'trivago.svg'],
+]
+
+export const UsedBy: FC = () => {
+    return <>
+        <p className={styles.strapLine}>Loved by teams everywhere</p>
+        <ul className={styles.logosList}>
+            {LOGOS.map(([alt, filename]) => (
+                <li>
+                    <img alt={alt} src={'/img/users/' + filename}/>
+                </li>
+            ))}
+        </ul>
+    </>
+}

src/components/UsedBy/index.ts

@@ -0,0 +1 @@
+export * from './UsedBy'

src/css/custom.scss

@@ -31,17 +31,17 @@
 }
 
 .flavour--ruby {
-  background-image: url('/img/flavour-ruby.svg')
+  background-image: url('/img/flavours/ruby.svg')
 }
 
 .flavour--jvm {
-  background-image: url('/img/flavour-jvm.svg')
+  background-image: url('/img/flavours/jvm.svg')
 }
 
 .flavour--js {
-  background-image: url('/img/flavour-js.svg')
+  background-image: url('/img/flavours/js.svg')
 }
 
 .flavour--go {
-  background-image: url('/img/flavour-go.svg')
+  background-image: url('/img/flavours/go.svg')
 }

src/pages/index.module.scss

@@ -1,36 +0,0 @@
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-  background-image: linear-gradient(-45deg, #173647, lighten(#173647, 5%));
-  color: white;
-}
-
-.heroTitle {
-  font-size: 4rem;
-  font-weight: 300;
-}
-
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-
-  .heroTitle {
-    font-size: 3rem;
-  }
-}
-
-.introRow {
-  align-items: center;
-}
-
-.introCtas {
-  display: flex;
-  align-items: center;
-}
-
-.introFeature {
-  margin-bottom: 0;
-}

src/pages/index.tsx

@@ -1,67 +1,19 @@
 import React from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
-import CodeBlock from '@theme/CodeBlock';
-
-import styles from './index.module.scss';
-
-const feature = `@tag
-Feature: Eating too many cucumbers may not be good for you
-
-  Eating too much of anything may not be good for you
-
-  Scenario: Eating a few is no problem
-    Given Alice is hungry
-    When she eats 3 cucumbers
-    Then she will be full
-`
-
-function HomepageHeader() {
-    return (
-        <header className={clsx(styles.heroBanner)}>
-            <div className="container">
-                <h1 className={clsx(styles.heroTitle)}>
-                    <strong>Cucumber </strong>
-                    lets you write<br/>
-                    automated tests in plain language
-                </h1>
-            </div>
-        </header>
-    );
-}
+import {Hero} from "@site/src/components/Hero";
+import {Intro} from "@site/src/components/Intro";
+import {UsedBy} from "@site/src/components/UsedBy";
 
 export default function Home() {
-    const {siteConfig} = useDocusaurusContext();
     return (
         <Layout>
-            <HomepageHeader/>
+            <Hero/>
             <main>
                 <div className="container padding-vert--lg">
-                    <div className={clsx('row', styles.introRow)}>
-                        <div className="col col--6">
-                            <p>Cucumber is a tool for running automated acceptance tests, written in plain language.
-                                Because they're written in plain language, they can be read by anyone on your team.
-                                Because they can be read by anyone, they help improve communication, collaboration and
-                                trust on your team.</p>
-                            <div className={styles.introCtas}>
-                                <Link
-                                    className="button button--primary button--lg"
-                                    to="https://cucumber.io/docs/installation">
-                                    Get Started
-                                </Link>
-                            </div>
-                        </div>
-                        <div className="col col--6">
-                            <CodeBlock
-                                className={styles.introFeature}
-                                language="gherkin"
-                                showLineNumbers>
-                                {feature}
-                            </CodeBlock>
-                        </div>
-                    </div>
+                    <Intro/>
+                </div>
+                <div className="container padding-vert--lg">
+                    <UsedBy/>
                 </div>
             </main>
         </Layout>