Improved homepage (conservative) (#47)

docusaurus.config.ts

@@ -1,5 +1,6 @@
 import { Config } from '@docusaurus/types'
 import { themes } from 'prism-react-renderer'
+import { globbySync } from 'globby'
 import YAML from 'yaml'
 import { readFileSync } from 'node:fs'
 
@@ -12,6 +13,8 @@ const darkCodeTheme = {
   },
 }
 
+const platformsCount = globbySync('docs/installation/*.md').length
+
 export default {
   title: 'Cucumber',
   tagline: 'lets you write automated tests in plain language',
@@ -134,6 +137,7 @@ export default {
     },
   plugins: ['docusaurus-plugin-sass'],
   customFields: {
+    platformsCount,
     versions: YAML.parse(readFileSync('./versions.yaml', { encoding: 'utf-8' })),
   },
 } satisfies Config

package.json

@@ -36,6 +36,7 @@
     "@tsconfig/docusaurus": "2.0.3",
     "@types/lodash.sortby": "^4.7.9",
     "prettier": "^3.4.2",
+    "globby": "^14.0.2",
     "yaml": "^2.6.1"
   },
   "browserslist": {

src/components/Hero/Hero.module.scss

@@ -1,28 +1,18 @@
-.backdrop {
-  padding: 6rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
-.title {
-  font-size: 4.5rem;
-  font-weight: 300;
-  line-height: 1em;
-}
-
 .ctas {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 16px;
 }
 
-@media screen and (max-width: 996px) {
-  .backdrop {
-    padding: 2rem;
-  }
+.platforms {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
 
-  .title {
-    font-size: 3rem;
+  img {
+    max-width: 24px;
+    max-height: 24px;
   }
 }

src/components/Hero/Hero.tsx

@@ -1,22 +1,44 @@
 import React, { FC } from 'react'
 import clsx from 'clsx'
 import Link from '@docusaurus/Link'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import styles from './Hero.module.scss'
 
 export const Hero: FC = () => {
+  const { siteConfig } = useDocusaurusContext()
+  const platformsCount = siteConfig.customFields['platformsCount'] as number
   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
+    <header className="hero">
+      <div className="container text--center">
+        <h1 className="hero__title">
+          <strong>Cucumber</strong>&nbsp;
+          <span className="text--light">
+            lets you write
+            <br />
+            automated tests in plain language
+          </span>
         </h1>
-        <div className={styles.ctas}>
+        <div className={clsx('margin-vert--md', styles.ctas)}>
           <Link className="button button--primary button--lg" to="/docs">
             Get Started
           </Link>
+          <Link className="button button--secondary button--lg" to="/community">
+            Join the Community
+          </Link>
+        </div>
+        <p className="readable-blurb">
+          Cucumber is a tool for running automated acceptance tests, written in{' '}
+          <strong>plain language</strong>. Because they're written in plain language, they can be
+          read by <strong>anyone</strong> on your team, improving <strong>communication</strong>,{' '}
+          <strong>collaboration</strong> and <strong>trust</strong>.
+        </p>
+        <div className={styles.platforms}>
+          <img alt="" src="/img/platforms/java.svg" />
+          <img alt="" src="/img/platforms/javascript.svg" />
+          <img alt="" src="/img/platforms/ruby.svg" />
+          <img alt="" src="/img/platforms/golang.svg" />
+          <img alt="" src="/img/platforms/dotnet.svg" />
+          <small className="margin-left--sm">+{platformsCount - 4} more platforms</small>
         </div>
       </div>
     </header>

src/components/Intro/Intro.module.scss

@@ -1,4 +1,5 @@
-.introRow {
-  align-items: center;
-  justify-content: center;
+.example {
+  max-width: 45rem;
+  margin: 0 auto;
+  font-size: 1.125rem;
 }

src/components/Intro/Intro.tsx

@@ -3,23 +3,22 @@ import clsx from 'clsx'
 import CodeBlock from '@theme/CodeBlock'
 import { feature } from './feature'
 import styles from './Intro.module.scss'
+import Link from '@docusaurus/Link'
 
 export const Intro: FC = () => {
   return (
-    <div className={clsx('row', styles.introRow)}>
-      <div className="col col--3">
-        <p>
-          Cucumber is a tool for running automated acceptance tests, written in{' '}
-          <strong>plain language</strong>. Because they're written in plain language, they can be
-          read by <strong>anyone</strong> on your team, improving <strong>communication</strong>,{' '}
-          <strong>collaboration</strong> and <strong>trust</strong>.
-        </p>
-      </div>
-      <div className="col col--6">
-        <CodeBlock language="gherkin" showLineNumbers>
+    <div className="container padding-vert--lg">
+      <div className={styles.example}>
+        <CodeBlock language="gherkin" title="features/withdrawing-cash.feature">
           {feature}
         </CodeBlock>
       </div>
+      <div className="text--center">
+        <p className="margin-top--lg margin-bottom--sm">Got 10 minutes?</p>
+        <Link className="button button--secondary button--lg" to="docs/guides/10-minute-tutorial">
+          Take the Tutorial
+        </Link>
+      </div>
     </div>
   )
 }

src/components/Intro/feature.ts

@@ -1,10 +1,14 @@
-export const feature = `@tag
-Feature: Eating too many cucumbers may not be good for you
+export const feature = `Feature: Withdrawing cash
 
-  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
+  Rule: Customers cannot withdraw more than their balance
+
+    Scenario: Successful withdrawal within balance
+      Given Alice has $234.56 in their account
+      When Alice tries to withdraw $200.00
+      Then the withdrawal is successful
+
+    Scenario: Declined withdrawal in excess of balance
+      Given Hamza has $198.76 in their account
+      When Hamza tries to withdraw $200.00
+      Then the withdrawal is declined
 `