Update - Marketing stat components

markmead · Aug 10, 2024 · 4cbd667 · 4cbd667
1 parent 56c6d85
commit 4cbd667
Show file tree

Hide file tree

Showing 9 changed files with 208 additions and 204 deletions.
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "next-mdx-remote": "^5.0.0",
     "postcss": "^8.4.41",
     "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.5",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "prismjs": "^1.29.0",
     "react-intersection-observer": "^9.13.0",
     "react-use": "^17.5.1",

diff --git a/public/components/marketing-stats/1-dark.html b/public/components/marketing-stats/1-dark.html
@@ -1,48 +1,48 @@
-<section class="bg-white dark:bg-gray-900">
-  <div class="mx-auto max-w-screen-xl px-4 py-12 sm:px-6 md:py-16 lg:px-8">
-    <div class="mx-auto max-w-3xl text-center">
-      <h2 class="text-3xl font-bold text-gray-900 sm:text-4xl dark:text-white">
-        Trusted by eCommerce Businesses
-      </h2>
-
-      <p class="mt-4 text-gray-500 sm:text-xl dark:text-gray-400">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolores laborum labore
-        provident impedit esse recusandae facere libero harum sequi.
-      </p>
+<div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
+  <div class="mx-auto max-w-3xl text-center">
+    <h2 class="text-3xl font-bold text-gray-900 sm:text-4xl dark:text-white">
+      Trusted by eCommerce Businesses
+    </h2>
+
+    <p class="mt-4 text-gray-500 sm:text-xl dark:text-gray-400">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolores laborum labore
+      provident impedit esse recusandae facere libero harum sequi.
+    </p>
+  </div>
+
+  <dl class="mt-6 grid grid-cols-1 gap-4 sm:mt-8 sm:grid-cols-2 lg:grid-cols-4">
+    <div
+      class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center dark:border-gray-800"
+    >
+      <dt class="order-last text-lg font-medium text-gray-500 dark:text-gray-400">Total Sales</dt>
+
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">$4.8m</dd>
     </div>
 
-    <div class="mt-8 sm:mt-12">
-      <dl class="grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <div
-          class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center dark:border-gray-800"
-        >
-          <dt class="order-last text-lg font-medium text-gray-500 dark:text-gray-400">
-            Total Sales
-          </dt>
-
-          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">$4.8m</dd>
-        </div>
-
-        <div
-          class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center dark:border-gray-800"
-        >
-          <dt class="order-last text-lg font-medium text-gray-500 dark:text-gray-400">
-            Official Addons
-          </dt>
-
-          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">24</dd>
-        </div>
-
-        <div
-          class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center dark:border-gray-800"
-        >
-          <dt class="order-last text-lg font-medium text-gray-500 dark:text-gray-400">
-            Total Addons
-          </dt>
-
-          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">86</dd>
-        </div>
-      </dl>
+    <div
+      class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center dark:border-gray-800"
+    >
+      <dt class="order-last text-lg font-medium text-gray-500 dark:text-gray-400">
+        Official Addons
+      </dt>
+
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">24</dd>
     </div>
-  </div>
-</section>
+
+    <div
+      class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center dark:border-gray-800"
+    >
+      <dt class="order-last text-lg font-medium text-gray-500 dark:text-gray-400">Total Addons</dt>
+
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">86</dd>
+    </div>
+
+    <div
+      class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center dark:border-gray-800"
+    >
+      <dt class="order-last text-lg font-medium text-gray-500 dark:text-gray-400">Downloads</dt>
+
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">86k</dd>
+    </div>
+  </dl>
+</div>
diff --git a/public/components/marketing-stats/1.html b/public/components/marketing-stats/1.html
@@ -1,34 +1,36 @@
-<section class="bg-white">
-  <div class="mx-auto max-w-screen-xl px-4 py-12 sm:px-6 md:py-16 lg:px-8">
-    <div class="mx-auto max-w-3xl text-center">
-      <h2 class="text-3xl font-bold text-gray-900 sm:text-4xl">Trusted by eCommerce Businesses</h2>
-
-      <p class="mt-4 text-gray-500 sm:text-xl">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolores laborum labore
-        provident impedit esse recusandae facere libero harum sequi.
-      </p>
+<div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
+  <div class="mx-auto max-w-3xl text-center">
+    <h2 class="text-3xl font-bold text-gray-900 sm:text-4xl">Trusted by eCommerce Businesses</h2>
+
+    <p class="mt-4 text-gray-500 sm:text-xl">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolores laborum labore
+      provident impedit esse recusandae facere libero harum sequi.
+    </p>
+  </div>
+
+  <dl class="mt-6 grid grid-cols-1 gap-4 sm:mt-8 sm:grid-cols-2 lg:grid-cols-4">
+    <div class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center">
+      <dt class="order-last text-lg font-medium text-gray-500">Total Sales</dt>
+
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">$4.8m</dd>
     </div>
 
-    <div class="mt-8 sm:mt-12">
-      <dl class="grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <div class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center">
-          <dt class="order-last text-lg font-medium text-gray-500">Total Sales</dt>
+    <div class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center">
+      <dt class="order-last text-lg font-medium text-gray-500">Official Addons</dt>
 
-          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">$4.8m</dd>
-        </div>
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">24</dd>
+    </div>
 
-        <div class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center">
-          <dt class="order-last text-lg font-medium text-gray-500">Official Addons</dt>
+    <div class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center">
+      <dt class="order-last text-lg font-medium text-gray-500">Total Addons</dt>
 
-          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">24</dd>
-        </div>
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">86</dd>
+    </div>
 
-        <div class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center">
-          <dt class="order-last text-lg font-medium text-gray-500">Total Addons</dt>
+    <div class="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center">
+      <dt class="order-last text-lg font-medium text-gray-500">Downloads</dt>
 
-          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">86</dd>
-        </div>
-      </dl>
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">86k</dd>
     </div>
-  </div>
-</section>
+  </dl>
+</div>
diff --git a/public/components/marketing-stats/2-dark.html b/public/components/marketing-stats/2-dark.html
@@ -1,44 +1,42 @@
-<section class="bg-white dark:bg-gray-900">
-  <div class="mx-auto max-w-screen-xl px-4 py-12 sm:px-6 md:py-16 lg:px-8">
-    <div class="mx-auto max-w-3xl text-center">
-      <h2 class="text-3xl font-bold text-gray-900 sm:text-4xl dark:text-white">
-        Trusted by eCommerce Businesses
-      </h2>
-
-      <p class="mt-4 text-gray-500 sm:text-xl dark:text-gray-400">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolores laborum labore
-        provident impedit esse recusandae facere libero harum sequi.
-      </p>
+<div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
+  <div class="mx-auto max-w-3xl text-center">
+    <h2 class="text-3xl font-bold text-gray-900 sm:text-4xl dark:text-white">
+      Trusted by eCommerce Businesses
+    </h2>
+
+    <p class="mt-4 text-gray-500 sm:text-xl dark:text-gray-400">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolores laborum labore
+      provident impedit esse recusandae facere libero harum sequi.
+    </p>
+  </div>
+
+  <dl
+    class="mg-6 grid grid-cols-1 gap-4 divide-y divide-gray-100 sm:mt-8 sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-4 dark:divide-gray-900"
+  >
+    <div class="flex flex-col px-4 py-8 text-center">
+      <dt class="order-last text-lg font-medium text-gray-500 dark:text-gray-400">Total Sales</dt>
+
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">$4.8m</dd>
     </div>
 
-    <div class="mt-8 sm:mt-12">
-      <dl
-        class="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:divide-x sm:divide-gray-100 dark:sm:divide-gray-800"
-      >
-        <div class="flex flex-col px-4 py-8 text-center">
-          <dt class="order-last text-lg font-medium text-gray-500 dark:text-gray-400">
-            Total Sales
-          </dt>
-
-          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">$4.8m</dd>
-        </div>
-
-        <div class="flex flex-col px-4 py-8 text-center">
-          <dt class="order-last text-lg font-medium text-gray-500 dark:text-gray-400">
-            Official Addons
-          </dt>
-
-          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">24</dd>
-        </div>
-
-        <div class="flex flex-col px-4 py-8 text-center">
-          <dt class="order-last text-lg font-medium text-gray-500 dark:text-gray-400">
-            Total Addons
-          </dt>
-
-          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">86</dd>
-        </div>
-      </dl>
+    <div class="flex flex-col px-4 py-8 text-center">
+      <dt class="order-last text-lg font-medium text-gray-500 dark:text-gray-400">
+        Official Addons
+      </dt>
+
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">24</dd>
     </div>
-  </div>
-</section>
+
+    <div class="flex flex-col px-4 py-8 text-center">
+      <dt class="order-last text-lg font-medium text-gray-500 dark:text-gray-400">Total Addons</dt>
+
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">86</dd>
+    </div>
+
+    <div class="flex flex-col px-4 py-8 text-center">
+      <dt class="order-last text-lg font-medium text-gray-500 dark:text-gray-400">Downloads</dt>
+
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">86k</dd>
+    </div>
+  </dl>
+</div>
diff --git a/public/components/marketing-stats/2.html b/public/components/marketing-stats/2.html
@@ -1,34 +1,38 @@
-<section class="bg-white">
-  <div class="mx-auto max-w-screen-xl px-4 py-12 sm:px-6 md:py-16 lg:px-8">
-    <div class="mx-auto max-w-3xl text-center">
-      <h2 class="text-3xl font-bold text-gray-900 sm:text-4xl">Trusted by eCommerce Businesses</h2>
-
-      <p class="mt-4 text-gray-500 sm:text-xl">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolores laborum labore
-        provident impedit esse recusandae facere libero harum sequi.
-      </p>
+<div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
+  <div class="mx-auto max-w-3xl text-center">
+    <h2 class="text-3xl font-bold text-gray-900 sm:text-4xl">Trusted by eCommerce Businesses</h2>
+
+    <p class="mt-4 text-gray-500 sm:text-xl">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolores laborum labore
+      provident impedit esse recusandae facere libero harum sequi.
+    </p>
+  </div>
+
+  <dl
+    class="mg-6 grid grid-cols-1 gap-4 divide-y divide-gray-100 sm:mt-8 sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-4"
+  >
+    <div class="flex flex-col px-4 py-8 text-center">
+      <dt class="order-last text-lg font-medium text-gray-500">Total Sales</dt>
+
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">$4.8m</dd>
     </div>
 
-    <div class="mt-8 sm:mt-12">
-      <dl class="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:divide-x sm:divide-gray-100">
-        <div class="flex flex-col px-4 py-8 text-center">
-          <dt class="order-last text-lg font-medium text-gray-500">Total Sales</dt>
+    <div class="flex flex-col px-4 py-8 text-center">
+      <dt class="order-last text-lg font-medium text-gray-500">Official Addons</dt>
 
-          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">$4.8m</dd>
-        </div>
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">24</dd>
+    </div>
 
-        <div class="flex flex-col px-4 py-8 text-center">
-          <dt class="order-last text-lg font-medium text-gray-500">Official Addons</dt>
+    <div class="flex flex-col px-4 py-8 text-center">
+      <dt class="order-last text-lg font-medium text-gray-500">Total Addons</dt>
 
-          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">24</dd>
-        </div>
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">86</dd>
+    </div>
 
-        <div class="flex flex-col px-4 py-8 text-center">
-          <dt class="order-last text-lg font-medium text-gray-500">Total Addons</dt>
+    <div class="flex flex-col px-4 py-8 text-center">
+      <dt class="order-last text-lg font-medium text-gray-500">Downloads</dt>
 
-          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">86</dd>
-        </div>
-      </dl>
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl">86k</dd>
     </div>
-  </div>
-</section>
+  </dl>
+</div>
diff --git a/public/components/marketing-stats/3-dark.html b/public/components/marketing-stats/3-dark.html
@@ -1,42 +1,40 @@
-<section class="bg-white dark:bg-gray-900">
-  <div class="mx-auto max-w-screen-xl px-4 py-12 sm:px-6 md:py-16 lg:px-8">
-    <div class="mx-auto max-w-3xl text-center">
-      <h2 class="text-3xl font-bold text-gray-900 sm:text-4xl dark:text-white">
-        Trusted by eCommerce Businesses
-      </h2>
-
-      <p class="mt-4 text-gray-500 sm:text-xl dark:text-gray-400">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolores laborum labore
-        provident impedit esse recusandae facere libero harum sequi.
-      </p>
+<div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
+  <div class="mx-auto max-w-3xl text-center">
+    <h2 class="text-3xl font-bold text-gray-900 sm:text-4xl dark:text-white">
+      Trusted by eCommerce Businesses
+    </h2>
+
+    <p class="mt-4 text-gray-500 sm:text-xl dark:text-gray-400">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolores laborum labore
+      provident impedit esse recusandae facere libero harum sequi.
+    </p>
+  </div>
+
+  <dl class="mt-6 grid grid-cols-1 gap-4 sm:mt-8 sm:grid-cols-2 lg:grid-cols-4">
+    <div class="flex flex-col rounded-lg bg-blue-50 px-4 py-8 text-center dark:bg-blue-700/25">
+      <dt class="order-last text-lg font-medium text-gray-500 dark:text-white/75">Total Sales</dt>
+
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl dark:text-blue-50">$4.8m</dd>
     </div>
 
-    <div class="mt-8 sm:mt-12">
-      <dl class="grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <div class="flex flex-col rounded-lg bg-blue-50 px-4 py-8 text-center dark:bg-blue-700/25">
-          <dt class="order-last text-lg font-medium text-gray-500 dark:text-white/75">
-            Total Sales
-          </dt>
+    <div class="flex flex-col rounded-lg bg-blue-50 px-4 py-8 text-center dark:bg-blue-700/25">
+      <dt class="order-last text-lg font-medium text-gray-500 dark:text-white/75">
+        Official Addons
+      </dt>
 
-          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl dark:text-blue-50">$4.8m</dd>
-        </div>
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl dark:text-blue-50">24</dd>
+    </div>
 
-        <div class="flex flex-col rounded-lg bg-blue-50 px-4 py-8 text-center dark:bg-blue-700/25">
-          <dt class="order-last text-lg font-medium text-gray-500 dark:text-white/75">
-            Official Addons
-          </dt>
+    <div class="flex flex-col rounded-lg bg-blue-50 px-4 py-8 text-center dark:bg-blue-700/25">
+      <dt class="order-last text-lg font-medium text-gray-500 dark:text-white/75">Total Addons</dt>
 
-          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl dark:text-blue-50">24</dd>
-        </div>
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl dark:text-blue-50">86</dd>
+    </div>
 
-        <div class="flex flex-col rounded-lg bg-blue-50 px-4 py-8 text-center dark:bg-blue-700/25">
-          <dt class="order-last text-lg font-medium text-gray-500 dark:text-white/75">
-            Total Addons
-          </dt>
+    <div class="flex flex-col rounded-lg bg-blue-50 px-4 py-8 text-center dark:bg-blue-700/25">
+      <dt class="order-last text-lg font-medium text-gray-500 dark:text-white/75">Downloads</dt>
 
-          <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl dark:text-blue-50">86</dd>
-        </div>
-      </dl>
+      <dd class="text-4xl font-extrabold text-blue-600 md:text-5xl dark:text-blue-50">86k</dd>
     </div>
-  </div>
-</section>
+  </dl>
+</div>