From 1d9fbbb8c22bf3b35fac2a7f174bb8e038f877c3 Mon Sep 17 00:00:00 2001
From: Nicolas DUBIEN <github@dubien.org>
Date: Tue, 16 May 2023 09:29:31 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Rework=20display=20of=20the=20ho?=
 =?UTF-8?q?mepage=20for=20small=20screens=20(#3863)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Move code of website into components

* Better small screens

* switch to grid
---
 website/.gitignore                            |   2 +-
 website/package.json                          |   4 +-
 website/src/components/BannerSection/index.js |  11 +
 .../BannerSection/styles.module.css           |  20 ++
 .../components/HomepageContributors/index.js  |  32 +++
 .../HomepageContributors/styles.module.css    |  12 +
 .../src/components/HomepageFeatures/index.js  |  14 +-
 .../HomepageFeatures/styles.module.css        |  21 ++
 .../src/components/HomepageHeader/index.js    |  43 +++
 .../HomepageHeader/styles.module.css          |  40 +++
 .../components/HomepageKeyProjects/index.js   |  34 +++
 .../HomepageKeyProjects/styles.module.css     |  24 ++
 .../src/components/HomepageQuotes/index.js    | 119 +++++++++
 .../HomepageQuotes/styles.module.css          |  85 ++++++
 .../src/components/HomepageSponsors/index.js  |  30 +++
 .../HomepageSponsors/styles.module.css        |   3 +
 website/src/css/custom.css                    |   2 +-
 website/src/pages/index.js                    | 251 +-----------------
 website/src/pages/index.module.css            | 185 -------------
 19 files changed, 493 insertions(+), 439 deletions(-)
 create mode 100644 website/src/components/BannerSection/index.js
 create mode 100644 website/src/components/BannerSection/styles.module.css
 create mode 100644 website/src/components/HomepageContributors/index.js
 create mode 100644 website/src/components/HomepageContributors/styles.module.css
 create mode 100644 website/src/components/HomepageHeader/index.js
 create mode 100644 website/src/components/HomepageHeader/styles.module.css
 create mode 100644 website/src/components/HomepageKeyProjects/index.js
 create mode 100644 website/src/components/HomepageKeyProjects/styles.module.css
 create mode 100644 website/src/components/HomepageQuotes/index.js
 create mode 100644 website/src/components/HomepageQuotes/styles.module.css
 create mode 100644 website/src/components/HomepageSponsors/index.js
 create mode 100644 website/src/components/HomepageSponsors/styles.module.css
 delete mode 100644 website/src/pages/index.module.css

diff --git a/website/.gitignore b/website/.gitignore
index ea9ee089..9c5dc268 100644
--- a/website/.gitignore
+++ b/website/.gitignore
@@ -8,7 +8,7 @@
 .docusaurus
 .cache-loader
 generated-tests
-src/pages/all-contributors.json
+src/components/HomepageContributors/all-contributors.json
 
 # Misc
 .DS_Store
diff --git a/website/package.json b/website/package.json
index eff2d805..5aa5ce75 100644
--- a/website/package.json
+++ b/website/package.json
@@ -3,8 +3,8 @@
   "name": "website",
   "scripts": {
     "docusaurus": "docusaurus",
-    "start": "cp ../.all-contributorsrc src/pages/all-contributors.json && docusaurus start",
-    "build": "cp ../.all-contributorsrc src/pages/all-contributors.json && docusaurus build",
+    "start": "cp ../.all-contributorsrc src/components/HomepageContributors/all-contributors.json && docusaurus start",
+    "build": "cp ../.all-contributorsrc src/components/HomepageContributors/all-contributors.json && docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
diff --git a/website/src/components/BannerSection/index.js b/website/src/components/BannerSection/index.js
new file mode 100644
index 00000000..61c92b16
--- /dev/null
+++ b/website/src/components/BannerSection/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export default function BannerSection(props) {
+  return (
+    <section className={props.color === 'blue' ? styles.blueBanner : styles.whiteBanner}>
+      <div className={clsx('container', styles.subsectionContainer)}>{props.children}</div>
+    </section>
+  );
+}
diff --git a/website/src/components/BannerSection/styles.module.css b/website/src/components/BannerSection/styles.module.css
new file mode 100644
index 00000000..36bc9392
--- /dev/null
+++ b/website/src/components/BannerSection/styles.module.css
@@ -0,0 +1,20 @@
+.blueBanner {
+  padding: 2rem 0;
+  width: 100%;
+  color: var(--ifm-font-color-base-inverse);
+  background-color: var(--fc-banner-background-color);
+}
+
+.whiteBanner {
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.subsectionContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.subsectionContainer h2 {
+  margin-bottom: 0;
+}
diff --git a/website/src/components/HomepageContributors/index.js b/website/src/components/HomepageContributors/index.js
new file mode 100644
index 00000000..76ff32b2
--- /dev/null
+++ b/website/src/components/HomepageContributors/index.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import BannerSection from '@site/src/components/BannerSection';
+import allContributors from './all-contributors.json';
+import styles from './styles.module.css';
+
+export default function HomepageContributors(props) {
+  return (
+    <BannerSection color={props.color}>
+      <h2>They contribute to the project…</h2>
+      <p>People involved at some point in the development of fast-check</p>
+      <div className={styles.avatarSection}>
+        {allContributors.contributors.map((contributor) => (
+          <a
+            className={styles.avatar}
+            href={contributor.profile}
+            title={`${contributor.name} (${contributor.login})`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              src={contributor.avatar_url}
+              alt={`Avatar for ${contributor.name} (${contributor.login})`}
+              width={64}
+              height={64}
+              loading="lazy"
+            />
+          </a>
+        ))}
+      </div>
+    </BannerSection>
+  );
+}
diff --git a/website/src/components/HomepageContributors/styles.module.css b/website/src/components/HomepageContributors/styles.module.css
new file mode 100644
index 00000000..376e0288
--- /dev/null
+++ b/website/src/components/HomepageContributors/styles.module.css
@@ -0,0 +1,12 @@
+.avatarSection {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 0 0.5em;
+}
+
+.avatar img {
+  border: 2px solid var(--ifm-font-color-base-inverse);
+  border-radius: 64px;
+}
diff --git a/website/src/components/HomepageFeatures/index.js b/website/src/components/HomepageFeatures/index.js
index 81366ff2..71c2aae9 100644
--- a/website/src/components/HomepageFeatures/index.js
+++ b/website/src/components/HomepageFeatures/index.js
@@ -32,8 +32,8 @@ const FeatureList = [
 
 function Feature({ Svg, title, description }) {
   return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
+    <div className={styles.featureCard}>
+      <div className={styles.featureIllustration}>
         <Svg className={styles.featureSvg} role="img" width={144} height={144} loading="lazy" />
       </div>
       <div className="text--center padding-horiz--md">
@@ -47,12 +47,10 @@ function Feature({ Svg, title, description }) {
 export default function HomepageFeatures() {
   return (
     <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
+      <div className={clsx('container', styles.allFeatureCards)}>
+        {FeatureList.map((props, idx) => (
+          <Feature key={idx} {...props} />
+        ))}
       </div>
     </section>
   );
diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css
index 23ed8ed8..d8bc1db9 100644
--- a/website/src/components/HomepageFeatures/styles.module.css
+++ b/website/src/components/HomepageFeatures/styles.module.css
@@ -5,6 +5,27 @@
   width: 100%;
 }
 
+.allFeatureCards {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 3em;
+}
+
+.featureCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+@media screen and (max-width: 996px) {
+  .allFeatureCards {
+    grid-template-columns: 100%;
+  }
+  .featureCard {
+    flex-direction: row;
+  }
+}
+
 .featureSvg {
   fill: var(--fc-banner-background-color);
 }
diff --git a/website/src/components/HomepageHeader/index.js b/website/src/components/HomepageHeader/index.js
new file mode 100644
index 00000000..b92f5b7d
--- /dev/null
+++ b/website/src/components/HomepageHeader/index.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import logoDataUri from '@site/static/img/logo.png';
+
+import styles from './styles.module.css';
+
+export default function HomepageHeader() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <div className="container">
+        <h1 className={clsx('hero__title', styles.mainTitle)}>
+          <img src={logoDataUri} alt={siteConfig.title} className={styles.mainTitleLogo} width="570px" />
+        </h1>
+        <p className={clsx('hero__subtitle', styles.subTitle)}>
+          {siteConfig.tagline}
+          <div className={styles.taglineBadges}>
+            <a href="https://www.npmjs.com/package/fast-check" target="_blank" rel="noopener">
+              <img src="https://badge.fury.io/js/fast-check.svg" alt="npm version" height={20} loading="lazy" />
+            </a>
+            <a href="https://www.npmjs.com/package/fast-check" target="_blank" rel="noopener">
+              <img src="https://img.shields.io/npm/dm/fast-check" alt="monthly downloads" height={20} loading="lazy" />
+            </a>
+            <a href="https://github.com/dubzzz/fast-check/stargazers" target="_blank" rel="noopener">
+              <img
+                src="https://img.shields.io/github/stars/dubzzz/fast-check?style=social"
+                height={20}
+                loading="lazy"
+              />
+            </a>
+          </div>
+        </p>
+        <div className={styles.quickNavigationButtons}>
+          <Link className="button button--secondary button--lg" to="/docs/tutorials/quick-start/">
+            Quick Start - 5min ⏱️
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/website/src/components/HomepageHeader/styles.module.css b/website/src/components/HomepageHeader/styles.module.css
new file mode 100644
index 00000000..6cb14155
--- /dev/null
+++ b/website/src/components/HomepageHeader/styles.module.css
@@ -0,0 +1,40 @@
+.heroBanner {
+  padding: 3rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--fc-banner-background-color);
+}
+
+.mainTitle {
+  margin-bottom: 0px;
+}
+
+.mainTitleLogo {
+  max-width: '100%';
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.subTitle .taglineBadges {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 0.2em;
+}
+
+.subTitle .taglineBadges a {
+  line-height: 20px;
+}
+
+.quickNavigationButtons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 0.25rem;
+}
diff --git a/website/src/components/HomepageKeyProjects/index.js b/website/src/components/HomepageKeyProjects/index.js
new file mode 100644
index 00000000..292a42cb
--- /dev/null
+++ b/website/src/components/HomepageKeyProjects/index.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import BannerSection from '@site/src/components/BannerSection';
+import jestLogo from '@site/static/img/logos/jest-128.png';
+import jasmineLogo from '@site/static/img/logos/jasmine-128.png';
+import fpTsLogo from '@site/static/img/logos/fp-ts-128.png';
+import ramdaLogo from '@site/static/img/logos/ramda-128.png';
+import styles from './styles.module.css';
+
+export default function HomepageKeyProjects(props) {
+  return (
+    <BannerSection color={props.color}>
+      <h2>They trust us…</h2>
+      <p>These projects have been using fast-check for some time now and have found some issues thanks to it!</p>
+      <div className={styles.trustUsLogos}>
+        <a className={styles.trustUsSingleLogo} href="https://jestjs.io/" target="_blank" rel="noopener">
+          <img src={jestLogo} alt="Jest Logo" width={128} height={128} loading="lazy" />
+          <span>Jest</span>
+        </a>
+        <a className={styles.trustUsSingleLogo} href="https://jasmine.github.io/" target="_blank" rel="noopener">
+          <img src={jasmineLogo} alt="Jasmine Logo" width={128} height={128} loading="lazy" />
+          <span>Jasmine</span>
+        </a>
+        <a className={styles.trustUsSingleLogo} href="https://gcanti.github.io/fp-ts/" target="_blank" rel="noopener">
+          <img src={fpTsLogo} alt="fp-ts Logo" width={128} height={128} loading="lazy" />
+          <span>fp-ts</span>
+        </a>
+        <a className={styles.trustUsSingleLogo} href="https://ramdajs.com/" target="_blank" rel="noopener">
+          <img src={ramdaLogo} alt="Ramda Logo" width={128} height={128} loading="lazy" />
+          <span>Ramda</span>
+        </a>
+      </div>
+    </BannerSection>
+  );
+}
diff --git a/website/src/components/HomepageKeyProjects/styles.module.css b/website/src/components/HomepageKeyProjects/styles.module.css
new file mode 100644
index 00000000..2dd2b483
--- /dev/null
+++ b/website/src/components/HomepageKeyProjects/styles.module.css
@@ -0,0 +1,24 @@
+.trustUsLogos {
+  align-self: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  gap: 4em;
+  max-width: 1024px;
+}
+
+.trustUsLogos a {
+  color: var(--ifm-font-color-base-inverse);
+  font-weight: bold;
+}
+
+.trustUsSingleLogo {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.trustUsSingleLogo img {
+  width: 128px;
+}
diff --git a/website/src/components/HomepageQuotes/index.js b/website/src/components/HomepageQuotes/index.js
new file mode 100644
index 00000000..599e80dc
--- /dev/null
+++ b/website/src/components/HomepageQuotes/index.js
@@ -0,0 +1,119 @@
+import React from 'react';
+import BannerSection from '@site/src/components/BannerSection';
+import styles from './styles.module.css';
+
+function QuoteBlock(props) {
+  return (
+    <div className={styles.quoteBlock}>
+      <div className={styles.quoteBlockMessage}>
+        <a href={props.messageUrl} target="_blank" rel="noopener">
+          {props.message}
+        </a>
+      </div>
+      <div className={styles.quoteBlockAuthor}>
+        <a className={styles.avatar} href={props.profileUrl} target="_blank" rel="noopener noreferrer">
+          <img src={props.avatarUrl} alt={props.name} width={64} height={64} loading="lazy" />
+          <div className={styles.quoteBlockAuthorDetails}>
+            <div>{props.name}</div>
+            <div>{props.jobDescription}</div>
+          </div>
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageQuotes(props) {
+  return (
+    <BannerSection color={props.color}>
+      <h2>They spread their love…</h2>
+      <p>Kind messages spreading love around fast-check</p>
+      <div className={styles.allQuotes}>
+        <QuoteBlock
+          avatarUrl="https://github.com/TomerAberbach.png"
+          profileUrl="https://twitter.com/TomerAberbach"
+          name="Tomer Aberbach"
+          jobDescription={
+            <>
+              Working on <b>@Google Docs</b>
+            </>
+          }
+          messageUrl="https://twitter.com/TomerAberbach/status/1350560547058675713"
+          message={'fast-check is too good!'}
+        />
+        <QuoteBlock
+          avatarUrl="https://github.com/ssalbdivad.png"
+          profileUrl="https://twitter.com/ssalbdivad"
+          name="David Blass"
+          jobDescription={
+            <>
+              Full-time open source dev and author of <b>@arktypeio</b>, TypeScript's 1:1 validator optimized from
+              editor to runtime⛵
+            </>
+          }
+          messageUrl="https://twitter.com/ssalbdivad/status/1652672718381146114?s=20"
+          message={'Can attest, it is awesome!🔥'}
+        />
+        <QuoteBlock
+          avatarUrl="https://github.com/abrgr.png"
+          profileUrl="https://twitter.com/abrgrBuilds"
+          name="Adam Berger"
+          jobDescription={
+            '♥️ Helping product teams build amazing products with Team Pando: your collaborative space for product requierments'
+          }
+          messageUrl="https://twitter.com/abrgrBuilds/status/1587817599001411592"
+          message={
+            <>
+              Wrote one property based test with <b>@ndubien</b>'s fast check and immediately found & fixed 3 bugs. How
+              is generative testing not mainstream yet?
+            </>
+          }
+        />
+        <QuoteBlock
+          avatarUrl="https://github.com/emilianbold.png"
+          profileUrl="https://twitter.com/emilianbold"
+          name="Emilian Bold"
+          jobDescription={'Software engineer'}
+          messageUrl="https://twitter.com/emilianbold/status/1623036880555020300"
+          message={
+            <>
+              <b>@ndubien</b>'s fast-check is unit testing on steroids.
+            </>
+          }
+        />
+        <QuoteBlock
+          avatarUrl="https://github.com/jakebailey.png"
+          profileUrl="https://twitter.com/andhaveaniceday"
+          name="Jake Bailey"
+          jobDescription={
+            <>
+              Senior Software Engineer at Microsoft working on <b>@typescript</b>
+            </>
+          }
+          messageUrl="https://twitter.com/andhaveaniceday/status/1643468822752677888?s=20"
+          message={
+            <>
+              So, TypeScript has had a small epidemic of crashes (both my fault 😅), both were very annoying to find and
+              minimize.
+              <br />
+              <br />I added a fast-check unittest to fuzz the parser and in seconds it found the same bug.
+            </>
+          }
+        />
+        <QuoteBlock
+          avatarUrl="https://github.com/Andarist.png"
+          profileUrl="https://twitter.com/AndaristRake"
+          name="Mateusz Burzyński"
+          jobDescription={
+            <>
+              programmer but also a little bit of code-poet wannabe, maintaining XState, Emotion, redux-saga & more, OSS
+              enthusiast, working at <b>@statelyai</b>
+            </>
+          }
+          messageUrl="https://twitter.com/AndaristRake/status/1652267691472822273?s=20"
+          message={'Looks awesome, i need to finally try this out in practice'}
+        />
+      </div>
+    </BannerSection>
+  );
+}
diff --git a/website/src/components/HomepageQuotes/styles.module.css b/website/src/components/HomepageQuotes/styles.module.css
new file mode 100644
index 00000000..3285d821
--- /dev/null
+++ b/website/src/components/HomepageQuotes/styles.module.css
@@ -0,0 +1,85 @@
+.allQuotes {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  gap: 3em;
+}
+
+.quoteBlock {
+  display: flex;
+  flex-direction: column;
+  min-width: 512px;
+  border-radius: 0.5em;
+}
+
+@media screen and (max-width: 996px) {
+  .allQuotes {
+    grid-template-columns: 100%;
+  }
+  .quoteBlock {
+    min-width: unset;
+    flex-wrap: wrap;
+  }
+}
+
+.quoteBlock:hover {
+  background-color: rgba(40, 46, 169, 0.1);
+}
+
+.quoteBlockMessage {
+  position: relative;
+  margin-bottom: 1em;
+  border-left: 4px solid var(--fc-banner-background-color);
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.quoteBlockMessage a {
+  color: var(--ifm-font-color-base);
+}
+
+.quoteBlockMessage::before {
+  position: absolute;
+  left: 0;
+  top: -0.5em;
+  content: '“';
+  color: var(--fc-banner-background-color);
+  font-size: 5em;
+  opacity: 20%;
+}
+
+.quoteBlockMessage::after {
+  position: absolute;
+  right: 0;
+  bottom: -0.8em;
+  content: '”';
+  color: var(--fc-banner-background-color);
+  font-size: 5em;
+  opacity: 20%;
+}
+
+.quoteBlockAuthor a {
+  display: flex;
+  flex-direction: row;
+  color: var(--fc-banner-background-color);
+}
+
+.quoteBlockAuthorDetails {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+  padding-left: 1em;
+}
+
+.quoteBlockAuthorDetails > :first-child {
+  font-weight: bold;
+}
+
+.quoteBlockAuthorDetails b {
+  font-weight: 600; /* bold is 700 */
+}
+
+.avatar img {
+  border: 2px solid var(--ifm-font-color-base-inverse);
+  border-radius: 64px;
+}
diff --git a/website/src/components/HomepageSponsors/index.js b/website/src/components/HomepageSponsors/index.js
new file mode 100644
index 00000000..471f1757
--- /dev/null
+++ b/website/src/components/HomepageSponsors/index.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import BannerSection from '@site/src/components/BannerSection';
+import styles from './styles.module.css';
+
+export default function HomepageSponsors(props) {
+  return (
+    <BannerSection color={props.color}>
+      <h2>They sponsor us…</h2>
+      <p>They financially contribute to the fast-check</p>
+      <a href="https://github.com/sponsors/dubzzz" target="_blank" rel="noopener" className={styles.allSponsorsWrapper}>
+        <img
+          align="center"
+          src="https://raw.githubusercontent.com/dubzzz/sponsors-svg/main/sponsorkit/sponsors.svg"
+          alt="all sponsors"
+        />
+      </a>
+      <p>
+        You can also become one of them by contributing via{' '}
+        <a href="https://github.com/sponsors/dubzzz" target="_blank" rel="noopener">
+          GitHub Sponsors
+        </a>{' '}
+        or{' '}
+        <a href="https://opencollective.com/fast-check/contribute" target="_blank" rel="noopener">
+          OpenCollective
+        </a>
+        .
+      </p>
+    </BannerSection>
+  );
+}
diff --git a/website/src/components/HomepageSponsors/styles.module.css b/website/src/components/HomepageSponsors/styles.module.css
new file mode 100644
index 00000000..32d8c62d
--- /dev/null
+++ b/website/src/components/HomepageSponsors/styles.module.css
@@ -0,0 +1,3 @@
+.allSponsorsWrapper {
+  align-self: center;
+}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 62fb0b1d..89ea3a14 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -49,7 +49,7 @@
     no-repeat;
 }
 
-@media (max-width: 996px) {
+@media screen and (max-width: 996px) {
   .header-github-link::after {
     content: 'GitHub';
     padding-left: 0.2em;
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 38b66e28..bc71791b 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -1,74 +1,12 @@
 import React from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
+import HomepageContributors from '@site/src/components/HomepageContributors';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
-import logoDataUri from '@site/static/img/logo.png';
-import jestLogo from '@site/static/img/logos/jest-128.png';
-import jasmineLogo from '@site/static/img/logos/jasmine-128.png';
-import fpTsLogo from '@site/static/img/logos/fp-ts-128.png';
-import ramdaLogo from '@site/static/img/logos/ramda-128.png';
-import allContributors from './all-contributors.json';
-
-import styles from './index.module.css';
-
-function QuoteBlock(props) {
-  return (
-    <div className={styles.quoteBlock}>
-      <div className={styles.quoteBlockMessage}>
-        <a href={props.messageUrl} target="_blank" rel="noopener">
-          {props.message}
-        </a>
-      </div>
-      <div className={styles.quoteBlockAuthor}>
-        <a className={styles.avatar} href={props.profileUrl} target="_blank" rel="noopener noreferrer">
-          <img src={props.avatarUrl} alt={props.name} width={64} height={64} loading="lazy" />
-          <div className={styles.quoteBlockAuthorDetails}>
-            <div>{props.name}</div>
-            <div>{props.jobDescription}</div>
-          </div>
-        </a>
-      </div>
-    </div>
-  );
-}
-
-function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <h1 className={clsx('hero__title', styles.mainTitle)}>
-          <img src={logoDataUri} alt={siteConfig.title} className={styles.mainTitleLogo} width="570px" />
-        </h1>
-        <p className="hero__subtitle">
-          {siteConfig.tagline}
-          <div className={styles.taglineBadges}>
-            <a href="https://www.npmjs.com/package/fast-check" target="_blank" rel="noopener">
-              <img src="https://badge.fury.io/js/fast-check.svg" alt="npm version" height={20} loading="lazy" />
-            </a>
-            <a href="https://www.npmjs.com/package/fast-check" target="_blank" rel="noopener">
-              <img src="https://img.shields.io/npm/dm/fast-check" alt="monthly downloads" height={20} loading="lazy" />
-            </a>
-            <a href="https://github.com/dubzzz/fast-check/stargazers" target="_blank" rel="noopener">
-              <img
-                src="https://img.shields.io/github/stars/dubzzz/fast-check?style=social"
-                height={20}
-                loading="lazy"
-              />
-            </a>
-          </div>
-        </p>
-        <div className={styles.buttons}>
-          <Link className="button button--secondary button--lg" to="/docs/tutorials/quick-start/">
-            Quick Start - 5min ⏱️
-          </Link>
-        </div>
-      </div>
-    </header>
-  );
-}
+import HomepageHeader from '@site/src/components/HomepageHeader';
+import HomepageKeyProjects from '@site/src/components/HomepageKeyProjects';
+import HomepageQuotes from '@site/src/components/HomepageQuotes';
+import HomepageSponsors from '@site/src/components/HomepageSponsors';
 
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
@@ -80,181 +18,10 @@ export default function Home() {
       <HomepageHeader />
       <main>
         <HomepageFeatures />
-        <section className={styles.blueBanner}>
-          <div className={clsx('container', styles.subsectionContainer)}>
-            <h2>They trust us…</h2>
-            <p>These projects have been using fast-check for some time now and have found some issues thanks to it!</p>
-            <div className={styles.trustUsLogos}>
-              <a className={styles.trustUsSingleLogo} href="https://jestjs.io/" target="_blank" rel="noopener">
-                <img src={jestLogo} alt="Jest Logo" width={128} height={128} loading="lazy" />
-                <span>Jest</span>
-              </a>
-              <a className={styles.trustUsSingleLogo} href="https://jasmine.github.io/" target="_blank" rel="noopener">
-                <img src={jasmineLogo} alt="Jasmine Logo" width={128} height={128} loading="lazy" />
-                <span>Jasmine</span>
-              </a>
-              <a
-                className={styles.trustUsSingleLogo}
-                href="https://gcanti.github.io/fp-ts/"
-                target="_blank"
-                rel="noopener"
-              >
-                <img src={fpTsLogo} alt="fp-ts Logo" width={128} height={128} loading="lazy" />
-                <span>fp-ts</span>
-              </a>
-              <a className={styles.trustUsSingleLogo} href="https://ramdajs.com/" target="_blank" rel="noopener">
-                <img src={ramdaLogo} alt="Ramda Logo" width={128} height={128} loading="lazy" />
-                <span>Ramda</span>
-              </a>
-            </div>
-          </div>
-        </section>
-        <section className={styles.whiteBanner}>
-          <div className={clsx('container', styles.subsectionContainer)}>
-            <h2>They spread their love…</h2>
-            <p>Kind messages spreading love around fast-check</p>
-            <div className={styles.allQuotes}>
-              <QuoteBlock
-                avatarUrl="https://github.com/TomerAberbach.png"
-                profileUrl="https://twitter.com/TomerAberbach"
-                name="Tomer Aberbach"
-                jobDescription={
-                  <>
-                    Working on <b>@Google Docs</b>
-                  </>
-                }
-                messageUrl="https://twitter.com/TomerAberbach/status/1350560547058675713"
-                message={'fast-check is too good!'}
-              />
-              <QuoteBlock
-                avatarUrl="https://github.com/ssalbdivad.png"
-                profileUrl="https://twitter.com/ssalbdivad"
-                name="David Blass"
-                jobDescription={
-                  <>
-                    Full-time open source dev and author of <b>@arktypeio</b>, TypeScript's 1:1 validator optimized from
-                    editor to runtime⛵
-                  </>
-                }
-                messageUrl="https://twitter.com/ssalbdivad/status/1652672718381146114?s=20"
-                message={'Can attest, it is awesome!🔥'}
-              />
-              <QuoteBlock
-                avatarUrl="https://github.com/abrgr.png"
-                profileUrl="https://twitter.com/abrgrBuilds"
-                name="Adam Berger"
-                jobDescription={
-                  '♥️ Helping product teams build amazing products with Team Pando: your collaborative space for product requierments'
-                }
-                messageUrl="https://twitter.com/abrgrBuilds/status/1587817599001411592"
-                message={
-                  <>
-                    Wrote one property based test with <b>@ndubien</b>'s fast check and immediately found & fixed 3
-                    bugs. How is generative testing not mainstream yet?
-                  </>
-                }
-              />
-              <QuoteBlock
-                avatarUrl="https://github.com/emilianbold.png"
-                profileUrl="https://twitter.com/emilianbold"
-                name="Emilian Bold"
-                jobDescription={'Software engineer'}
-                messageUrl="https://twitter.com/emilianbold/status/1623036880555020300"
-                message={
-                  <>
-                    <b>@ndubien</b>'s fast-check is unit testing on steroids.
-                  </>
-                }
-              />
-              <QuoteBlock
-                avatarUrl="https://github.com/jakebailey.png"
-                profileUrl="https://twitter.com/andhaveaniceday"
-                name="Jake Bailey"
-                jobDescription={
-                  <>
-                    Senior Software Engineer at Microsoft working on <b>@typescript</b>
-                  </>
-                }
-                messageUrl="https://twitter.com/andhaveaniceday/status/1643468822752677888?s=20"
-                message={
-                  <>
-                    So, TypeScript has had a small epidemic of crashes (both my fault 😅), both were very annoying to
-                    find and minimize.
-                    <br />
-                    <br />I added a fast-check unittest to fuzz the parser and in seconds it found the same bug.
-                  </>
-                }
-              />
-              <QuoteBlock
-                avatarUrl="https://github.com/Andarist.png"
-                profileUrl="https://twitter.com/AndaristRake"
-                name="Mateusz Burzyński"
-                jobDescription={
-                  <>
-                    programmer but also a little bit of code-poet wannabe, maintaining XState, Emotion, redux-saga &
-                    more, OSS enthusiast, working at <b>@statelyai</b>
-                  </>
-                }
-                messageUrl="https://twitter.com/AndaristRake/status/1652267691472822273?s=20"
-                message={'Looks awesome, i need to finally try this out in practice'}
-              />
-            </div>
-          </div>
-        </section>
-        <section className={styles.blueBanner}>
-          <div className={clsx('container', styles.subsectionContainer)}>
-            <h2>They contribute to the project…</h2>
-            <p>People involved at some point in the development of fast-check</p>
-            <div className={styles.avatarSection}>
-              {allContributors.contributors.map((contributor) => (
-                <a
-                  className={styles.avatar}
-                  href={contributor.profile}
-                  title={`${contributor.name} (${contributor.login})`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <img
-                    src={contributor.avatar_url}
-                    alt={`Avatar for ${contributor.name} (${contributor.login})`}
-                    width={64}
-                    height={64}
-                    loading="lazy"
-                  />
-                </a>
-              ))}
-            </div>
-          </div>
-        </section>
-        <section className={styles.whiteBanner}>
-          <div className={clsx('container', styles.subsectionContainer)}>
-            <h2>They sponsor us…</h2>
-            <p>They financially contribute to the fast-check</p>
-            <a
-              href="https://github.com/sponsors/dubzzz"
-              target="_blank"
-              rel="noopener"
-              className={styles.allSponsorsWrapper}
-            >
-              <img
-                align="center"
-                src="https://raw.githubusercontent.com/dubzzz/sponsors-svg/main/sponsorkit/sponsors.svg"
-                alt="all sponsors"
-              />
-            </a>
-            <p>
-              You can also become one of them by contributing via{' '}
-              <a href="https://github.com/sponsors/dubzzz" target="_blank" rel="noopener">
-                GitHub Sponsors
-              </a>{' '}
-              or{' '}
-              <a href="https://opencollective.com/fast-check/contribute" target="_blank" rel="noopener">
-                OpenCollective
-              </a>
-              .
-            </p>
-          </div>
-        </section>
+        <HomepageKeyProjects color="blue" />
+        <HomepageQuotes color="white" />
+        <HomepageContributors color="blue" />
+        <HomepageSponsors color="white" />
       </main>
     </Layout>
   );
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
deleted file mode 100644
index a4ccf18d..00000000
--- a/website/src/pages/index.module.css
+++ /dev/null
@@ -1,185 +0,0 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-.heroBanner {
-  padding: 3rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-  background-color: var(--fc-banner-background-color);
-}
-
-.mainTitle {
-  margin-bottom: 0px;
-}
-
-.mainTitleLogo {
-  max-width: '100%';
-}
-
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-}
-
-.taglineBadges {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  gap: 0.2em;
-}
-
-.taglineBadges a {
-  line-height: 20px;
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.blueBanner {
-  padding: 2rem 0;
-  width: 100%;
-  color: var(--ifm-font-color-base-inverse);
-  background-color: var(--fc-banner-background-color);
-}
-
-.whiteBanner {
-  padding: 2rem 0;
-  width: 100%;
-}
-
-.subsectionContainer {
-  display: flex;
-  flex-direction: column;
-}
-
-.subsectionContainer h2 {
-  margin-bottom: 0;
-}
-
-.trustUsLogos {
-  align-self: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  flex-wrap: wrap;
-  gap: 4em;
-  max-width: 1024px;
-}
-
-.trustUsLogos a {
-  color: var(--ifm-font-color-base-inverse);
-  font-weight: bold;
-}
-
-.trustUsSingleLogo {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.trustUsSingleLogo img {
-  width: 128px;
-}
-
-.avatarSection {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  gap: 0 0.5em;
-}
-
-.avatar img {
-  border: 2px solid var(--ifm-font-color-base-inverse);
-  border-radius: 64px;
-}
-
-.allSponsorsWrapper {
-  align-self: center;
-}
-
-.allQuotes {
-  display: grid;
-  grid-template-columns: 50% 50%;
-  gap: 3em;
-}
-
-@media screen and (max-width: 996px) {
-  .allQuotes {
-    grid-template-columns: 100%;
-  }
-}
-
-.quoteBlock {
-  display: flex;
-  flex-direction: column;
-  min-width: 512px;
-  border-radius: 0.5em;
-}
-
-.quoteBlock:hover {
-  background-color: rgba(40, 46, 169, 0.1);
-}
-
-.quoteBlockMessage {
-  position: relative;
-  margin-bottom: 1em;
-  border-left: 4px solid var(--fc-banner-background-color);
-  padding-left: 1em;
-  padding-right: 1em;
-}
-
-.quoteBlockMessage a {
-  color: var(--ifm-font-color-base);
-}
-
-.quoteBlockMessage::before {
-  position: absolute;
-  left: 0;
-  top: -0.5em;
-  content: '“';
-  color: var(--fc-banner-background-color);
-  font-size: 5em;
-  opacity: 20%;
-}
-
-.quoteBlockMessage::after {
-  position: absolute;
-  right: 0;
-  bottom: -0.8em;
-  content: '”';
-  color: var(--fc-banner-background-color);
-  font-size: 5em;
-  opacity: 20%;
-}
-
-.quoteBlockAuthor a {
-  display: flex;
-  flex-direction: row;
-  color: var(--fc-banner-background-color);
-}
-
-.quoteBlockAuthorDetails {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex-grow: 1;
-  padding-left: 1em;
-}
-
-.quoteBlockAuthorDetails > :first-child {
-  font-weight: bold;
-}
-
-.quoteBlockAuthorDetails b {
-  font-weight: 600; /* bold is 700 */
-}
-- 
2.51.2