6 - Revamp - add/edit global components

src/components/Footer/index.js

@@ -1,4 +1,5 @@
 import { useTranslation } from "next-i18next";
+import classNames from "classnames";
 import styles from "./Footer.module.scss";
 import LanguageSelector from "../LanguageSelector";
 import Divider from "../shared/Divider";
@@ -23,11 +24,11 @@ const CopyrightRow = () => {
   );
 };
 
-const Footer = () => {
+const Footer = ({ className }) => {
   const { t } = useTranslation();
 
   return (
-    <div className={styles["solFooter"]}>
+    <div className={classNames(styles["solFooter"], className)}>
       <div className="container">
         <div className="d-md-flex justify-content-md-between">
           <div className="d-flex flex-column align-items-center align-items-md-start">

src/components/icons/Caret.module.scss

@@ -0,0 +1,14 @@
+.CaretIcon {
+  transition: transform 0.25s ease-in-out;
+
+  // Direction
+  &[data-direction="down"] {
+    transform: rotate(270deg);
+  }
+  &[data-direction="left"] {
+    transform: rotate(180deg);
+  }
+  &[data-direction="up"] {
+    transform: rotate(90deg);
+  }
+}

src/components/icons/Caret.tsx

@@ -0,0 +1,52 @@
+import { FC, SVGProps } from "react";
+import classNames from "classnames";
+
+import styles from "./Caret.module.scss";
+
+interface CaretIconProps extends SVGProps<SVGSVGElement> {
+  color?: string;
+  direction?: "up" | "down" | "left" | "right";
+  className?: string;
+}
+
+const CaretIcon: FC<CaretIconProps> = ({
+  color = "white",
+  direction = "right",
+  className,
+  ...props
+}) => {
+  return (
+    <svg
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      data-direction={direction}
+      className={classNames(styles.CaretIcon, className)}
+      {...props}
+    >
+      <g clipPath="url(#clip0_3892_9052)">
+        <path
+          d="M10.584 7.1665L15.9173 12.4998L10.584 17.8332"
+          stroke={color ? color : "currentColor"}
+          strokeWidth="1.42222"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3892_9052">
+          <rect
+            width="24"
+            height="24"
+            fill="white"
+            transform="translate(0.5 0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default CaretIcon;

src/components/shared/CardsSlider.module.scss

@@ -0,0 +1,132 @@
+@import "~@/scss/solutions/_variables.scss";
+
+.Title {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 1.04;
+  letter-spacing: -0.01em;
+  text-align: center;
+  color: var(--white);
+  text-transform: capitalize;
+  margin: 0;
+  padding: 64px 24px 0;
+
+  strong {
+    background: var(--gradient-2);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  @include breakpoint(md) {
+    font-size: 56px;
+    padding-top: 80px;
+  }
+
+  @include breakpoint(lg) {
+    font-size: 64px;
+    padding-top: 128px;
+  }
+}
+
+.Carousel {
+  position: relative;
+  width: 100%;
+}
+
+.CarouselContainer {
+  display: flex;
+  width: 100%;
+  padding: {
+    top: 64px;
+    bottom: 64px;
+  }
+
+  overflow-x: scroll;
+  overscroll-behavior-x: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: none; /*FireFox*/
+  -ms-overflow-style: -ms-autohiding-scrollbar; /*IE10+*/
+
+  /*Chrome, Safari, Edge*/
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @include breakpoint(md) {
+    padding: {
+      top: 80px;
+      bottom: 40px;
+    }
+  }
+
+  @include breakpoint(lg) {
+    padding: {
+      top: 96px;
+    }
+  }
+}
+
+.Cards {
+  display: flex;
+  justify-content: start;
+  gap: 16px;
+  padding-left: 16px;
+  max-width: 80rem;
+  margin: 0 auto;
+}
+
+.CardWrapper {
+  border-radius: 1.5rem;
+  box-sizing: content-box;
+
+  &:last-child {
+    padding-right: 3%;
+
+    @include breakpoint(md) {
+      padding-right: 10%;
+    }
+
+    @include breakpoint(lg) {
+      padding-right: 33%;
+    }
+  }
+
+  @include breakpoint(md) {
+    > * {
+      width: 22rem;
+      height: 100%;
+    }
+  }
+}
+
+.Arrows {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  padding-bottom: 64px;
+
+  button {
+    position: relative;
+    z-index: 40;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    background-color: var(--grey-300);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.1s ease;
+    transition:
+      background 0.3s ease-in-out,
+      transform 0.15s $easeInOutQuart;
+
+    &:disabled {
+      background-color: var(--grey-500);
+
+      svg path {
+        stroke: var(--grey-300);
+      }
+    }
+  }
+}

src/components/shared/CardsSlider.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useState, useRef, ReactNode } from "react";
+import { motion } from "framer-motion";
+import { Trans } from "next-i18next";
+import { useInView } from "react-intersection-observer";
+import classNames from "classnames";
+
+import CaretIcon from "@/components/icons/Caret";
+import { AnimatedText } from "@/components/shared/Text";
+
+import styles from "./CardsSlider.module.scss";
+
+interface CarouselProps {
+  items: Element[] | ReactNode[];
+  titleKey?: string;
+  initialScroll?: number;
+  id?: string;
+  className?: string;
+  carouselClassName?: string;
+  cardsClassName?: string;
+  cardWrapperClassName?: string;
+}
+
+const CardsSlider = ({
+  items,
+  titleKey,
+  initialScroll = 0,
+  id = "",
+  className = "",
+  carouselClassName = "",
+  cardsClassName = "",
+  cardWrapperClassName = "",
+}: CarouselProps) => {
+  const carouselRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(true);
+
+  useEffect(() => {
+    if (carouselRef.current) {
+      carouselRef.current.scrollLeft = initialScroll;
+      checkScrollability();
+    }
+  }, [initialScroll]);
+
+  const checkScrollability = () => {
+    if (carouselRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current;
+      setCanScrollLeft(scrollLeft > 0);
+      setCanScrollRight(scrollLeft < scrollWidth - clientWidth);
+    }
+  };
+
+  const scrollLeft = () => {
+    if (carouselRef.current) {
+      carouselRef.current.scrollBy({ left: -304, behavior: "smooth" });
+    }
+  };
+
+  const scrollRight = () => {
+    if (carouselRef.current) {
+      carouselRef.current.scrollBy({ left: 304, behavior: "smooth" });
+    }
+  };
+
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+    threshold: 0.5,
+  });
+
+  return (
+    <div ref={ref} id={id} className={className}>
+      {titleKey && (
+        <AnimatedText element="h2" as="heading" className={styles.Title}>
+          <Trans i18nKey={titleKey} />
+        </AnimatedText>
+      )}
+
+      <div className={styles.Carousel}>
+        <div
+          className={classNames(styles.CarouselContainer, carouselClassName)}
+          ref={carouselRef}
+          onScroll={checkScrollability}
+        >
+          <div className={classNames(styles.Cards, cardsClassName)}>
+            {items.map((item: any, index: number) => (
+              <motion.div
+                initial={{
+                  opacity: 0,
+                  y: 20,
+                }}
+                animate={
+                  inView
+                    ? {
+                        opacity: 1,
+                        y: 0,
+                        transition: {
+                          duration: 0.5,
+                          delay: 0.2 * index,
+                          ease: "easeOut",
+                          once: true,
+                        },
+                      }
+                    : {}
+                }
+                key={"card" + index}
+                className={classNames(styles.CardWrapper, cardWrapperClassName)}
+              >
+                {item}
+              </motion.div>
+            ))}
+          </div>
+        </div>
+
+        <div className={styles.Arrows}>
+          <button onClick={scrollLeft} disabled={!canScrollLeft}>
+            <CaretIcon direction="left" />
+          </button>
+          <button onClick={scrollRight} disabled={!canScrollRight}>
+            <CaretIcon />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CardsSlider;

src/components/shared/CollapsibleContent.module.scss

@@ -0,0 +1,30 @@
+@import "../../scss/solutions/_variables.scss";
+
+.CollapsibleTrigger {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  gap: 16px;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  line-height: 1.16;
+  color: var(--grey-200);
+  text-align: left;
+  margin-bottom: 0;
+
+  p {
+    margin: 0;
+  }
+}
+
+.IconArrowDown {
+  transform: rotate(180deg);
+}
+
+@include breakpoint(md) {
+  .CollapsibleTrigger {
+    justify-content: flex-start;
+  }
+}