feat: add css only logo carousel

packages/website/pages/pricing.js

@@ -11,6 +11,26 @@ import Cluster1 from 'public/images/index/cluster-1.png';
 import Button from 'ZeroComponents/button/button';
 import GeneralPageData from '../content/pages/general.json';
 
+const logos = [
+  { src: 'nft-storage.png', alt: 'NFT Storage' },
+  { src: 'protocol-labs-logo-black.svg', alt: 'Protocol Labs' },
+  { src: 'filecoin.png', alt: 'Filecoin' },
+  { src: 'fileverse.png', alt: 'Fileverse' },
+  { src: '3sStudio.png', alt: '3sStudio' },
+  { src: 'glitter.png', alt: 'Glitter' },
+  { src: 'fleek.png', alt: 'Fleek' },
+  { src: 'pollinationsai.png', alt: 'Pollinations AI' },
+  { src: 'opensea.png', alt: 'OpenSea' },
+  { src: 'magic-eden.png', alt: 'magic eden' },
+  { src: 'rarible.svg', alt: 'Rarible' },
+  { src: 'NFTPort.png', alt: 'NFTPort' },
+  { src: 'metaplex.png', alt: 'Metaplex' },
+  { src: 'project-galaxy.png', alt: 'Project Galaxy' },
+  { src: 'tatum.png', alt: 'Tatum' },
+  { src: 'teia.png', alt: 'Teia' },
+  { src: 'holaplex.svg', alt: 'Holaplex' },
+];
+
 const PricingHeader = () => (
   <>
     <section id="section_pricing_header" className="sectional">
@@ -53,18 +73,21 @@ const PricingHeader = () => (
     </section>
     <section id="section_trusted_by_logos" className="sectional">
       <div className="grid-middle">
-        <div className="wrapping-logos">
-          <div className="block image-block">
-            <Img src="/images/logos/nft-storage.svg" alt="NFT Storage" />
-            <div className="image-label"></div>
-          </div>
-          <div className="block image-block">
-            <Img src="/images/logos/protocol-labs.svg" alt="Protocol Labs" />
-            <div className="image-label"></div>
-          </div>
-          <div className="block image-block">
-            <Img src="/images/logos/filecoin.svg" alt="Filecoin" />
-            <div className="image-label"></div>
+        <div className="wrapping-logos carousel">
+          <div className="wrapping-logos-inner">
+            <div className="wrapping-logos-images">
+              {logos.map(logo => (
+                <div key={logo.alt} className="block image-block">
+                  <Img src={`/images/logos/${logo.src}`} alt={logo.alt} layout="fill" />
+                </div>
+              ))}
+              {/* repeat the set for continous css-only scroll */}
+              {logos.map(logo => (
+                <div key={logo.alt} className="block image-block">
+                  <Img src={`/images/logos/${logo.src}`} alt={logo.alt} layout="fill" />
+                </div>
+              ))}
+            </div>
           </div>
           <div id="intro_1-triangle_left">
             <Img alt="" src={ImageTriangle1} />

packages/website/pages/pricing.scss

@@ -563,16 +563,65 @@ li.pricing-bullet-3 {
   gap: 0 5rem;
 }
 
-@media only screen and (max-width: 1000px) {
-  #section_trusted_by_logos .wrapping-logos {
-    gap: 1rem 50rem;
+#section_trusted_by_logos .wrapping-logos.carousel {
+  display: flex;
+  flex-flow: row wrap;
+  max-width: 100%;
+}
+
+#section_trusted_by_logos .wrapping-logos-inner {
+  overflow: hidden;
+  position: relative;
+  --no-of-slides: 17;
+  --slides-in-view: 6;
+  --slide-width: 250px;
+  --iteration-time: 30s;
+  width: calc(2 * var(--no-of-slides));
+}
+
+#section_trusted_by_logos .wrapping-logos-images {
+  display: flex;
+  align-items: center;
+  width: calc(var(--slides-in-view) * var(--slide-width));
+}
+
+#section_trusted_by_logos .wrapping-logos-inner .image-block {
+  will-change: transform;
+  animation: translatestf var(--iteration-time) linear infinite forwards;
+  min-width: var(--slide-width);
+  max-width: var(--slide-width);
+  width: var(--slide-width);
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 50px;
+  box-sizing: border-box;
+}
+
+#section_trusted_by_logos .wrapping-logos-inner .image-block img {
+  border-radius: 5px;
+}
+
+@keyframes translatestf {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(calc(var(--slide-width) * var(--no-of-slides) * -1));
   }
 }
 
 #section_trusted_by_logos .image-block img {
   width: auto !important;
   height: auto !important;
 }
+#section_trusted_by_logos .image-block img[src$='.svg'] {
+  min-width: var(--slide-width);
+  max-width: var(--slide-width);
+  padding: 0 50px;
+  box-sizing: border-box;
+}
 
 // --------------------------------------------------------------- Section [FAQ]
 #tiered_pricing_section_FAQ_info {

packages/website/tsconfig.json

@@ -4,7 +4,11 @@
     "allowJs": true,
     "checkJs": true,
     "target": "esnext",
-    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ESNext",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "strict": true,
     "moduleResolution": "node",
     "sourceMap": true,
@@ -20,16 +24,37 @@
     "noImplicitAny": false,
     "baseUrl": "./",
     "paths": {
-      "ZeroComponents/*": ["modules/zero/components/*"],
-      "ZeroHooks/*": ["modules/zero/hooks/*"],
-      "web3.storage": ["../client"]
+      "ZeroComponents/*": [
+        "modules/zero/components/*"
+      ],
+      "ZeroHooks/*": [
+        "modules/zero/hooks/*"
+      ],
+      "web3.storage": [
+        "../client"
+      ]
     },
     "incremental": true
   },
-  "include": ["lib", "pages", "components", "content", "hooks", "modules", "store", "declaration.d.ts", "tests/**/*", "scripts", "playwright.config.ts"],
+  "include": [
+    "lib",
+    "pages",
+    "components",
+    "content",
+    "hooks",
+    "modules",
+    "store",
+    "declaration.d.ts",
+    "tests/**/*",
+    "scripts",
+    "playwright.config.ts"
+  ],
   "references": [
     {
       "path": "../client"
     }
+  ],
+  "exclude": [
+    "node_modules"
   ]
 }