diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx index 0da7323d..98451a03 100644 --- 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 index 6eecb666..f06c93c0 100644 --- a/package.json +++ b/package.json @@ -59,11 +59,11 @@ "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", @@ -71,7 +71,6 @@ "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 index a3d628cb..7b091fad 100644 --- 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 = ( /> ) -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 (
@@ -148,8 +140,9 @@ const SectionOne = () => {
- - {logos.allStrapiVanityLogo.nodes.map((logo) => + + + {logos.allStrapiVanityLogo.nodes?.map((logo) => logo.logo.localFile.internal.mediaType === "image/svg+xml" ? (
{
) )} - +
+
) diff --git a/src/style.less b/src/style.less index 221c5e66..ec189f4e 100644 --- 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; } } +