Merge branch 'master' into update-kanvas-logos

Author: Rajesh-Nagarajan-11

src/components/SistentNavigation/content.js

@@ -17,121 +17,125 @@ export const content = [
   { id: 12, link: "/projects/sistent/identity/typography/code", text: "Typography" },
 
   // Components
-  { id: 13, link: "/projects/sistent/components/backdrop", text: "Backdrop" },
-  { id: 14, link: "/projects/sistent/components/backdrop/guidance", text: "Backdrop" },
-  { id: 15, link: "/projects/sistent/components/backdrop/code", text: "Backdrop" },
+  { id: 13, link: "/projects/sistent/components/accordion", text: "Accordion" },
+  { id: 14, link: "/projects/sistent/components/accordion/guidance", text: "Accordion" },
+  { id: 15, link: "/projects/sistent/components/accordion/code", text: "Accordion" },
 
-  { id: 16, link: "/projects/sistent/components/badge", text: "Badge" },
-  { id: 17, link: "/projects/sistent/components/badge/guidance", text: "Badge" },
-  { id: 18, link: "/projects/sistent/components/badge/code", text: "Badge" },
+  { id: 16, link: "/projects/sistent/components/backdrop", text: "Backdrop" },
+  { id: 17, link: "/projects/sistent/components/backdrop/guidance", text: "Backdrop" },
+  { id: 18, link: "/projects/sistent/components/backdrop/code", text: "Backdrop" },
 
-  { id: 19, link: "/projects/sistent/components/box", text: "Box" },
-  { id: 20, link: "/projects/sistent/components/box/guidance", text: "Box" },
-  { id: 21, link: "/projects/sistent/components/box/code", text: "Box" },
+  { id: 19, link: "/projects/sistent/components/badge", text: "Badge" },
+  { id: 20, link: "/projects/sistent/components/badge/guidance", text: "Badge" },
+  { id: 21, link: "/projects/sistent/components/badge/code", text: "Badge" },
 
-  { id: 22, link: "/projects/sistent/components/button", text: "Button" },
-  { id: 23, link: "/projects/sistent/components/button/guidance", text: "Button" },
-  { id: 24, link: "/projects/sistent/components/button/code", text: "Button" },
+  { id: 22, link: "/projects/sistent/components/box", text: "Box" },
+  { id: 23, link: "/projects/sistent/components/box/guidance", text: "Box" },
+  { id: 24, link: "/projects/sistent/components/box/code", text: "Box" },
 
-  { id: 25, link: "/projects/sistent/components/button-group", text: "Button Group" },
-  { id: 26, link: "/projects/sistent/components/button-group/guidance", text: "Button Group" },
-  { id: 27, link: "/projects/sistent/components/button-group/code", text: "Button Group" },
+  { id: 25, link: "/projects/sistent/components/button", text: "Button" },
+  { id: 26, link: "/projects/sistent/components/button/guidance", text: "Button" },
+  { id: 27, link: "/projects/sistent/components/button/code", text: "Button" },
 
-  { id: 28, link: "/projects/sistent/components/chip", text: "Chip" },
-  { id: 29, link: "/projects/sistent/components/chip/guidance", text: "Chip" },
-  { id: 30, link: "/projects/sistent/components/chip/code", text: "Chip" },
+  { id: 28, link: "/projects/sistent/components/button-group", text: "Button Group" },
+  { id: 29, link: "/projects/sistent/components/button-group/guidance", text: "Button Group" },
+  { id: 30, link: "/projects/sistent/components/button-group/code", text: "Button Group" },
 
-  { id: 31, link: "/projects/sistent/components/circularprogress", text: "Circular Progress" },
-  { id: 32, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
-  { id: 33, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
+  { id: 31, link: "/projects/sistent/components/chip", text: "Chip" },
+  { id: 32, link: "/projects/sistent/components/chip/guidance", text: "Chip" },
+  { id: 33, link: "/projects/sistent/components/chip/code", text: "Chip" },
 
-  { id: 34, link: "/projects/sistent/components/collapse", text: "Collapse" },
-  { id: 35, link: "/projects/sistent/components/collapse/guidance", text: "Collapse" },
-  { id: 36, link: "/projects/sistent/components/collapse/code", text: "Collapse" },
+  { id: 34, link: "/projects/sistent/components/circularprogress", text: "Circular Progress" },
+  { id: 35, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
+  { id: 36, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
 
-  { id: 37, link: "/projects/sistent/components/container", text: "Container" },
-  { id: 38, link: "/projects/sistent/components/container/guidance", text: "Container" },
-  { id: 39, link: "/projects/sistent/components/container/code", text: "Container" },
+  { id: 37, link: "/projects/sistent/components/collapse", text: "Collapse" },
+  { id: 38, link: "/projects/sistent/components/collapse/guidance", text: "Collapse" },
+  { id: 39, link: "/projects/sistent/components/collapse/code", text: "Collapse" },
 
-  { id: 40, link: "/projects/sistent/components/dialog", text: "Dialog" },
-  { id: 41, link: "/projects/sistent/components/dialog/guidance", text: "Dialog" },
-  { id: 42, link: "/projects/sistent/components/dialog/code", text: "Dialog" },
+  { id: 40, link: "/projects/sistent/components/container", text: "Container" },
+  { id: 41, link: "/projects/sistent/components/container/guidance", text: "Container" },
+  { id: 42, link: "/projects/sistent/components/container/code", text: "Container" },
 
-  { id: 43, link: "/projects/sistent/components/formcontrollabel", text: "FormControlLabel" },
-  { id: 44, link: "/projects/sistent/components/formcontrollabel/guidance", text: "FormControlLabel" },
-  { id: 45, link: "/projects/sistent/components/formcontrollabel/code", text: "FormControlLabel" },
+  { id: 43, link: "/projects/sistent/components/dialog", text: "Dialog" },
+  { id: 44, link: "/projects/sistent/components/dialog/guidance", text: "Dialog" },
+  { id: 45, link: "/projects/sistent/components/dialog/code", text: "Dialog" },
 
-  { id: 46, link: "/projects/sistent/components/grid", text: "Grid" },
-  { id: 47, link: "/projects/sistent/components/grid/guidance", text: "Grid" },
-  { id: 48, link: "/projects/sistent/components/grid/code", text: "Grid" },
+  { id: 46, link: "/projects/sistent/components/formcontrollabel", text: "FormControlLabel" },
+  { id: 47, link: "/projects/sistent/components/formcontrollabel/guidance", text: "FormControlLabel" },
+  { id: 48, link: "/projects/sistent/components/formcontrollabel/code", text: "FormControlLabel" },
 
-  { id: 49, link: "/projects/sistent/components/iconbutton", text: "IconButton" },
-  { id: 50, link: "/projects/sistent/components/iconbutton/guidance", text: "IconButton" },
-  { id: 51, link: "/projects/sistent/components/iconbutton/code", text: "IconButton" },
+  { id: 49, link: "/projects/sistent/components/grid", text: "Grid" },
+  { id: 50, link: "/projects/sistent/components/grid/guidance", text: "Grid" },
+  { id: 51, link: "/projects/sistent/components/grid/code", text: "Grid" },
 
-  { id: 52, link: "/projects/sistent/components/icons", text: "Icons" },
+  { id: 52, link: "/projects/sistent/components/iconbutton", text: "IconButton" },
+  { id: 53, link: "/projects/sistent/components/iconbutton/guidance", text: "IconButton" },
+  { id: 54, link: "/projects/sistent/components/iconbutton/code", text: "IconButton" },
 
-  { id: 53, link: "/projects/sistent/components/link", text: "Link" },
-  { id: 54, link: "/projects/sistent/components/link/guidance", text: "Link" },
-  { id: 55, link: "/projects/sistent/components/link/code", text: "Link" },
+  { id: 55, link: "/projects/sistent/components/icons", text: "Icons" },
 
-  { id: 56, link: "/projects/sistent/components/list", text: "List" },
-  { id: 57, link: "/projects/sistent/components/list/guidance", text: "List" },
-  { id: 58, link: "/projects/sistent/components/list/code", text: "List" },
+  { id: 56, link: "/projects/sistent/components/link", text: "Link" },
+  { id: 57, link: "/projects/sistent/components/link/guidance", text: "Link" },
+  { id: 58, link: "/projects/sistent/components/link/code", text: "Link" },
 
-  { id: 59, link: "/projects/sistent/components/modal", text: "Modal" },
-  { id: 60, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
-  { id: 61, link: "/projects/sistent/components/modal/code", text: "Modal" },
+  { id: 59, link: "/projects/sistent/components/list", text: "List" },
+  { id: 60, link: "/projects/sistent/components/list/guidance", text: "List" },
+  { id: 61, link: "/projects/sistent/components/list/code", text: "List" },
 
-  { id: 62, link: "/projects/sistent/components/pagination", text: "Pagination" },
-  { id: 63, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
-  { id: 64, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
+  { id: 62, link: "/projects/sistent/components/modal", text: "Modal" },
+  { id: 63, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
+  { id: 64, link: "/projects/sistent/components/modal/code", text: "Modal" },
 
-  { id: 65, link: "/projects/sistent/components/paper", text: "Paper" },
-  { id: 66, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
-  { id: 67, link: "/projects/sistent/components/paper/code", text: "Paper" },
+  { id: 65, link: "/projects/sistent/components/pagination", text: "Pagination" },
+  { id: 66, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
+  { id: 67, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
 
-  { id: 68, link: "/projects/sistent/components/popper", text: "Popper" },
-  { id: 69, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
-  { id: 70, link: "/projects/sistent/components/popper/code", text: "Popper" },
+  { id: 68, link: "/projects/sistent/components/paper", text: "Paper" },
+  { id: 69, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
+  { id: 70, link: "/projects/sistent/components/paper/code", text: "Paper" },
 
-  { id: 71, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
-  { id: 72, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
-  { id: 73, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
+  { id: 71, link: "/projects/sistent/components/popper", text: "Popper" },
+  { id: 72, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
+  { id: 73, link: "/projects/sistent/components/popper/code", text: "Popper" },
 
-  { id: 74, link: "/projects/sistent/components/select", text: "Select" },
-  { id: 75, link: "/projects/sistent/components/select/guidance", text: "Select" },
-  { id: 76, link: "/projects/sistent/components/select/code", text: "Select" },
+  { id: 74, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
+  { id: 75, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
+  { id: 76, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
 
-  { id: 77, link: "/projects/sistent/components/stack", text: "Stack" },
-  { id: 78, link: "/projects/sistent/components/stack/guidance", text: "Stack" },
-  { id: 79, link: "/projects/sistent/components/stack/code", text: "Stack" },
+  { id: 77, link: "/projects/sistent/components/select", text: "Select" },
+  { id: 78, link: "/projects/sistent/components/select/guidance", text: "Select" },
+  { id: 79, link: "/projects/sistent/components/select/code", text: "Select" },
 
-  { id: 80, link: "/projects/sistent/components/stepper", text: "Stepper" },
-  { id: 81, link: "/projects/sistent/components/stepper/guidance", text: "Stepper" },
-  { id: 82, link: "/projects/sistent/components/stepper/code", text: "Stepper" },
+  { id: 80, link: "/projects/sistent/components/stack", text: "Stack" },
+  { id: 81, link: "/projects/sistent/components/stack/guidance", text: "Stack" },
+  { id: 82, link: "/projects/sistent/components/stack/code", text: "Stack" },
 
-  { id: 83, link: "/projects/sistent/components/switch", text: "Switch" },
-  { id: 84, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
-  { id: 85, link: "/projects/sistent/components/switch/code", text: "Switch" },
+  { id: 83, link: "/projects/sistent/components/stepper", text: "Stepper" },
+  { id: 84, link: "/projects/sistent/components/stepper/guidance", text: "Stepper" },
+  { id: 85, link: "/projects/sistent/components/stepper/code", text: "Stepper" },
 
-  { id: 86, link: "/projects/sistent/components/tabs", text: "Tabs" },
-  { id: 87, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
-  { id: 88, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
+  { id: 86, link: "/projects/sistent/components/switch", text: "Switch" },
+  { id: 87, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
+  { id: 88, link: "/projects/sistent/components/switch/code", text: "Switch" },
 
-  { id: 89, link: "/projects/sistent/components/text-field", text: "Text Field" },
-  { id: 90, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
-  { id: 91, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
+  { id: 89, link: "/projects/sistent/components/tabs", text: "Tabs" },
+  { id: 90, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
+  { id: 91, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
 
-  { id: 92, link: "/projects/sistent/components/text-input", text: "Text Input" },
-  { id: 93, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
-  { id: 94, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
+  { id: 92, link: "/projects/sistent/components/text-field", text: "Text Field" },
+  { id: 93, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
+  { id: 94, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
 
-  { id: 95, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
-  { id: 96, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
-  { id: 97, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
+  { id: 95, link: "/projects/sistent/components/text-input", text: "Text Input" },
+  { id: 96, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
+  { id: 97, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
 
-  { id: 98, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
-  { id: 99, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
-  { id: 100, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
-];
+  { id: 98, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
+  { id: 99, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
+  { id: 100, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
+
+  { id: 101, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
+  { id: 102, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
+  { id: 103, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
+];

src/sections/Home/So-Special-Section/index.js

@@ -1,5 +1,5 @@
 
-import React from "react";
+import React, {useLayoutEffect, useState, useRef} from "react";
 import Slider from "react-slick";
 import SoSpecialWrapper from "./so-special-style";
 
@@ -9,6 +9,9 @@ import Image from "../../../components/image";
 // import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 
 const SoSpecial = () => {
+  const [isClient, setIsClient] = useState(false);
+  const [slidesToShowState, setSlidesToShowState] = useState(null);
+  const sliderRef = useRef(null);
   const data = useStaticQuery(
     graphql`query newsList {
   allMdx(
@@ -53,56 +56,55 @@ const SoSpecial = () => {
 }`
   );
   const settings = {
-    dots: false,
+    dots: slidesToShowState <= 1,
     infinite: false,
     speed: 500,
-    slidesToShow: 2.5,
     swipeToSlide: true,
-
-    responsive: [
-      {
-        breakpoint: 1200,
-        settings: {
-          slidesToShow: 2.2,
-
-        }
-      },
-      {
-        breakpoint: 1024,
-        settings: {
-          slidesToShow: 2,
-
-        }
-      },
-      {
-        breakpoint: 800,
-        settings: {
-          slidesToShow: 1.5,
-          slidesToScroll: 1,
-          initialSlide: 1
-        }
-      },
-      {
-        breakpoint: 600,
-        settings: {
-          dots: true,
-          arrows: false,
-          slidesToShow: 1,
-          slidesToScroll: 1,
-          initialSlide: 1
-        }
-      },
-      {
-        breakpoint: 400,
-        settings: {
-          dots: true,
-          arrows: false,
-          slidesToShow: 1,
-          slidesToScroll: 1
-        }
-      }
-    ]
+    slidesToScroll: 1,
+    arrows: slidesToShowState !== 1,
+    slidesToShow: slidesToShowState ?? 2.5,
   };
+  
+    const computeSlides = () => {
+      const w = typeof window !== "undefined" ? (window.innerWidth || document.documentElement.clientWidth) : 1200;
+      if (w <= 600) return 1;
+      if (w <= 800) return 1.5;
+      if (w <= 1024) return 2;
+      if (w <= 1200) return 2.2;
+      return 3;
+    };
+  
+    useLayoutEffect(() => {
+  
+      setIsClient(true);
+      setSlidesToShowState(computeSlides());
+  
+      let resizeTimeout = null;
+      const onResizeDebounced = () => {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(() => {
+          const slides = computeSlides();
+          setSlidesToShowState((prev) => {
+            if (prev !== slides) return slides;
+            return prev;
+          });
+          if (sliderRef.current && sliderRef.current.innerSlider && typeof sliderRef.current.innerSlider.onWindowResized === "function") {
+            sliderRef.current.innerSlider.onWindowResized();
+          }
+        }, 100);
+      };
+    
+      window.addEventListener("resize", onResizeDebounced);
+      window.addEventListener("load", onResizeDebounced);
+  
+      return () => {
+        window.removeEventListener("resize", onResizeDebounced);
+        window.removeEventListener("load", onResizeDebounced);
+        clearTimeout(resizeTimeout);
+      };
+    }, []);
+  
+    if (!isClient || slidesToShowState === null) return null;
 
   // const { isDark } = useStyledDarkMode();
 
@@ -113,7 +115,7 @@ const SoSpecial = () => {
         <h1>We're making a splash</h1>
       </div>
       <div className="special_carousel">
-        <Slider {...settings}>
+        <Slider {...settings} key={`review-slider-${slidesToShowState}`} ref={sliderRef}>
           {
             data.allMdx.nodes.map(({ id, frontmatter, fields }) => (
               <Button className="special-cont_btn" $url={fields.slug} key={id}>