Add usage trend to home page

src/components/homepage-users.module.scss

@@ -22,6 +22,7 @@
   align-items: center;
   flex-wrap: wrap;
   gap: 48px 32px;
+  margin-top: 64px;
 }
 
 .userRow img {
@@ -79,3 +80,22 @@ html[data-theme='dark'] .testimonialWrapper {
     margin-right: 0.5rem;
   }
 }
+
+.usageGraphs {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+
+  figure {
+    flex-basis: 320px;
+    flex-grow: 1;
+    margin: 0;
+  }
+
+  img {
+    background: white;
+    border-radius: 0.4rem;
+  }
+}

src/components/homepage-users.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
+import Link from '@docusaurus/Link';
 import { Carousel } from 'react-responsive-carousel';
 import styles from './homepage-users.module.scss';
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
@@ -84,7 +85,35 @@ export function HomepageUsers(): JSX.Element {
   return (
     <section className={styles.users}>
       <div className="container">
-        <h2>Trusted and used by</h2>
+        <h2>Trusted and used by thousands</h2>
+        <div className={styles.usageGraphs}>
+          <figure>
+            <a href="https://npm-compare.com/sequelize#timeRange=THREE_YEARS" target="_blank">
+              <img
+                src="https://npm-compare.com/img/npm-trend/THREE_YEARS/sequelize.png"
+                alt="NPM Usage Trend of sequelize"
+                loading="lazy"
+              />
+            </a>
+            <figcaption>
+              NPM Usage Trend of <Link to="/docs/v6/">Sequelize 6</Link>
+            </figcaption>
+          </figure>
+
+          <figure>
+            <a href="https://npm-compare.com/@sequelize/core#timeRange=THREE_YEARS" target="_blank">
+              <img
+                src="https://npm-compare.com/img/npm-trend/THREE_YEARS/@sequelize/core.png"
+                alt="NPM Usage Trend of @sequelize/core"
+                loading="lazy"
+              />
+            </a>
+            <figcaption>
+              NPM Usage Trend of <Link to="/docs/v7/">Sequelize 7</Link>
+            </figcaption>
+          </figure>
+        </div>
+
         <div className={clsx(styles.userRow)}>
           <Carousel
             showArrows={false}

src/css/variables.scss

@@ -18,10 +18,10 @@ $brand-primary-dark: #2e3b69;
 // using fluid will scale a pixel value based on the screen size, with a lower and upper bound.
 // it's brilliant for responsive design.
 @function fluid($min-vw, $max-vw, $min-size, $max-size) {
-  $u1: unit($min-vw);
-  $u2: unit($max-vw);
-  $u3: unit($min-size);
-  $u4: unit($max-size);
+  $u1: math.unit($min-vw);
+  $u2: math.unit($max-vw);
+  $u3: math.unit($min-size);
+  $u4: math.unit($max-size);
 
   @if $u1 == $u2 and $u3 == $u4 {
     @return max(