fix: change the brand logo scroll

estuary · Oct 2, 2023 · 5befdae · 5befdae
1 parent 8e3f6a3
commit 5befdae
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 24 deletions.
diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx
@@ -9,9 +9,6 @@ import "./src/style.less"
 import "./src/highlighting-atom-one-dark.css"
 import { isMobile } from "react-device-detect"
 
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
-
 // Highlighting for code blocks
 // import "prismjs/themes/prism.css"
 

diff --git a/package.json b/package.json
@@ -59,19 +59,18 @@
     "react": "^18.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
+    "react-fast-marquee": "^1.6.1",
     "react-helmet": "^6.1.0",
     "react-hubspot-form": "^1.3.7",
     "react-lunr": "^1.1.0",
     "react-player": "^2.12.0",
-    "react-slick": "^0.29.0",
     "react-sticky-box": "^2.0.4",
     "react-use-flexsearch": "^0.1.1",
     "rehype-highlight": "^6.0.0",
     "rehype-parse": "^8.0.4",
     "rehype-react": "^7.1.2",
     "rehype-slug": "^5.1.0",
     "rehype-toc": "^3.0.2",
-    "slick-carousel": "^1.8.1",
     "unified": "^9.2.2",
     "unist-util-visit": "^4.1.2"
   },

diff --git a/src/components/SectionOne.tsx b/src/components/SectionOne.tsx
@@ -6,7 +6,8 @@ import { GatsbyImage, StaticImage } from "gatsby-plugin-image"
 import type { LottieRef } from "lottie-react"
 import { useMediaQuery, useTheme } from "@mui/material"
 import { OutboundLink } from "gatsby-plugin-google-gtag"
-import Slider from "react-slick";
+import Marquee from "react-fast-marquee";
+
 
 
 const animFallback = (
@@ -19,16 +20,6 @@ const animFallback = (
         />
     </div>
 )
-let settings = {
-    dots: false,
-    infinite: true,
-    arrows: false,
-    speed: 400,
-    slidesToShow: 6,
-    slidesToScroll: 1,
-    autoplay: true,
-    useTransform: true
-};
 
 const AnimatedHero = () => {
     const HeroAnimation = React.useMemo(() => import("../images/hero-animation.json"), []);
@@ -113,6 +104,7 @@ const SectionOne = () => {
     const theme = useTheme();
     const isSmall = useMediaQuery(theme.breakpoints.down("sm"))
 
+
     return (
         <div className="section-one">
             <div className="section-one-wrapper">
@@ -148,8 +140,9 @@ const SectionOne = () => {
                 </div>
             </div>
             <div className="custom-slides">
-                <Slider {...settings}>
-                    {logos.allStrapiVanityLogo.nodes.map((logo) =>
+            <Marquee>
+
+                    {logos.allStrapiVanityLogo.nodes?.map((logo) =>
                         logo.logo.localFile.internal.mediaType === "image/svg+xml" ? (
                             <div className="custom-slider" key={logo.id} >
                                 <div
@@ -171,7 +164,8 @@ const SectionOne = () => {
                             </div>
                         )
                     )}
-                </Slider>
+                </Marquee>
+
             </div>
         </div>
     )

diff --git a/src/style.less b/src/style.less
@@ -6231,7 +6231,15 @@ table th {
     justify-content: space-between;
 
     }
+    .rfm-marquee, .rfm-initial-child-container{
+        display: flex;
+        gap: 120px;
+    }
+    .rfm-initial-child-container{
+        padding-right: 60px;
+    }
 }
+
 .custom-slider{
     display: flex !important;
     align-items: center;
@@ -6241,15 +6249,11 @@ table th {
         width:100%;
         max-width: 120px;
         height: 40px;
-        // max-height: 150px;
-        // min-height: 150px;
         opacity: 1;visibility: visible;
         object-fit:contain !important;
-        // display: flex !important;
-        // align-items: center;
-        // justify-content: space-between;
     }
     .slick-slide{
         width: 130px !important;
     }
 }
+