From 3c05ec42257ce4f11ecf9a0a1cecedc8acb3be34 Mon Sep 17 00:00:00 2001
From: Nicolas DUBIEN <github@dubien.org>
Date: Mon, 2 Dec 2024 19:34:33 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Add=20quick=20code=20snippet=20d?=
 =?UTF-8?q?irectly=20from=20the=20documentation=20(#5464)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/HomepageFeatures/index.js  | 28 ++++++++++++++-----
 .../HomepageFeatures/styles.module.css        | 14 ++++------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/website/src/components/HomepageFeatures/index.js b/website/src/components/HomepageFeatures/index.js
index 12fb91d3..3be774f3 100644
--- a/website/src/components/HomepageFeatures/index.js
+++ b/website/src/components/HomepageFeatures/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
+import CodeBlock from '@theme/CodeBlock';
 
 const FeatureList = [
   {
@@ -69,12 +70,25 @@ function Feature({ Svg, title, description }) {
 
 export default function HomepageFeatures() {
   return (
-    <section className={styles.features}>
-      <div className={clsx('container', styles.allFeatureCards)}>
-        {FeatureList.map((props, idx) => (
-          <Feature key={idx} {...props} />
-        ))}
-      </div>
-    </section>
+    <div className="container">
+      <section className={styles.features}>
+        <div className={clsx('container', styles.allFeatureCards)}>
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+        <div className={styles.codeBlock}>
+          <CodeBlock language="js">
+            {`test('validates substring presence in concatenated string', () => {
+  fc.assert(
+    fc.property(fc.string(), fc.string(), fc.string(), (a, b, c) => {
+      expect(isSubstring(\`\${a}\${b}\${c}\`, b)).toBe(true);
+    })
+  );
+});`}
+          </CodeBlock>
+        </div>
+      </section>
+    </div>
   );
 }
diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css
index d8bc1db9..ff31a48c 100644
--- a/website/src/components/HomepageFeatures/styles.module.css
+++ b/website/src/components/HomepageFeatures/styles.module.css
@@ -1,29 +1,27 @@
 .features {
-  display: flex;
-  align-items: center;
+  display: grid;
   padding: 2rem 0;
+  gap: 2rem;
   width: 100%;
+  grid-template-columns: 2fr 1fr;
 }
 
 .allFeatureCards {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 100%;
   gap: 3em;
 }
 
 .featureCard {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
 }
 
 @media screen and (max-width: 996px) {
-  .allFeatureCards {
+  .features {
     grid-template-columns: 100%;
   }
-  .featureCard {
-    flex-direction: row;
-  }
 }
 
 .featureSvg {
-- 
2.51.2