SOEOPSFY-337 | add background trapezoid svg

nojira | adjust slider arrows

components/Slideshow/Slideshow.tsx

@@ -10,16 +10,21 @@ const NextArrow = ({ className, onClick }: CustomArrowProps) => {
   return (
     <button
       className={cnb(
-        "hocus:outline-3 absolute right-0 bottom-0 z-50 flex h-36 w-36 items-center justify-center rounded-full border-2 border-white bg-stone-dark hocus:bg-stone-dark hocus:outline hocus:outline-stone-dark",
+        "hocus:outline-3 absolute right-0 bottom-0 z-50 flex h-36 w-36 items-center justify-center rounded-full border-2 border-white",
         {
+          "bg-stone-dark hocus:bg-stone-dark hocus:outline hocus:outline-stone-dark":
+            !slickDisabled,
           "bg-black-10 hocus:bg-black-10 hocus:outline-0": slickDisabled,
         },
       )}
       onClick={onClick}
       aria-label="Next"
       disabled={slickDisabled}
     >
-      <ChevronRightIcon width={40} className="text-white" />
+      <ChevronRightIcon
+        width={40}
+        className={slickDisabled ? "text-black-30" : "text-white"}
+      />
     </button>
   );
 };
@@ -29,8 +34,10 @@ const PrevArrow = ({ className, onClick }: CustomArrowProps) => {
   return (
     <button
       className={cnb(
-        "hocus:outline-3 absolute right-40 bottom-0 z-50 flex h-36 w-36 items-center justify-center rounded-full border-2 border-white bg-stone-dark hocus:bg-stone-dark hocus:outline hocus:outline-stone-dark",
+        "hocus:outline-3 absolute right-40 bottom-0 z-50 flex h-36 w-36 items-center justify-center rounded-full border-2 border-white",
         {
+          "bg-stone-dark hocus:bg-stone-dark hocus:outline hocus:outline-stone-dark":
+            !slickDisabled,
           "bg-black-10 hocus:bg-black-10 hocus:outline-0": slickDisabled,
         },
       )}
@@ -40,9 +47,7 @@ const PrevArrow = ({ className, onClick }: CustomArrowProps) => {
     >
       <ChevronLeftIcon
         width={40}
-        className={cnb("text-white", {
-          "text-black-30": slickDisabled,
-        })}
+        className={slickDisabled ? "text-black-30" : "text-white"}
       />
     </button>
   );

components/Timeline/TimelineCard.styles.ts

@@ -1,8 +1,8 @@
 import { cnb } from "cnbuilder";
 export const wrapper = (align: string, isHorizontal: boolean) =>
-  cnb("flex-col w-fit", {
+  cnb("relative z-50 flex-col w-fit", {
     "lg:flex-row": isHorizontal,
-    "lg:ml-auto": align === "right",
+    "ml-auto": isHorizontal && align === "right",
   });
 export const contentWrapper = (isHorizontal: boolean) =>
   cnb("rs-px-2 flex flex-col", {

components/Timeline/TimelineCard.tsx

@@ -8,7 +8,17 @@ import { TimelineImage } from "./TimelineImage";
 import { ArrowRightIcon } from "@heroicons/react/20/solid";
 import Link from "next/link";
 import { AnimateInView, AnimationType } from "@/components/Animate";
-import { PaddingType, paddingVerticals } from "@/utilities/datasource";
+import {
+  paddingTops,
+  paddingBottoms,
+  paddingVerticals,
+  marginTops,
+  marginBottoms,
+  marginVerticals,
+  type MarginType,
+  type PaddingType,
+} from "@/utilities/datasource";
+import { Trapezoid } from "../images/trapezoid";
 
 type TimelineCardProps = HTMLAttributes<HTMLDivElement> & {
   as?: types.TimelineCardElementType;
@@ -23,12 +33,22 @@ type TimelineCardProps = HTMLAttributes<HTMLDivElement> & {
   align?: "right" | "left";
   width?: types.WidthType;
   isHorizontal?: boolean;
+  pt?: PaddingType;
+  pb?: PaddingType;
   py?: PaddingType;
+  mt?: MarginType;
+  mb?: MarginType;
+  my?: MarginType;
 };
 
 export const TimelineCard = ({
   as: AsComponent = "div",
-  py = 5,
+  py,
+  pt = 9,
+  pb = 3,
+  mt = 3,
+  mb,
+  my,
   heading,
   year,
   body,
@@ -50,11 +70,28 @@ export const TimelineCard = ({
       <AsComponent
         {...props}
         className={cnb(
+          "h-fit relative",
           bgColor ? styles.bgColors[bgColor] : "",
           py ? paddingVerticals[py] : "",
+          pt ? paddingTops[pt] : "",
+          pb ? paddingBottoms[pb] : "",
+          my ? marginVerticals[my] : "",
+          mt ? marginTops[mt] : "",
+          mb ? marginBottoms[mb] : "",
           width ? styles.widths[width] : "",
         )}
       >
+        {isHorizontal && (
+          <Trapezoid
+            className={cnb(
+              "absolute top-0 z-0 flex items-center overflow-hidden",
+              {
+                "right-0": align === "right",
+                "left-0 rotate-180": align === "left",
+              },
+            )}
+          />
+        )}
         <FlexBox
           alignItems="center"
           className={styles.wrapper(align, isHorizontal)}

components/images/trapezoid.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface TrapezoidProps {
+  fill?: string;
+  height?: number | string;
+  width?: number | string;
+  className?: string;
+}
+
+export const Trapezoid = ({
+  fill,
+  height = "909",
+  width = "495",
+  className,
+}: TrapezoidProps) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 495 909"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M559.14 907.342L23.1398 781.435C9.58301 778.251 0 766.156 0 752.23V140.481C0 126.232 10.0237 113.948 23.9838 111.091L559.984 1.37244C578.585 -2.43514 596 11.7764 596 30.763V878.136C596 897.477 577.968 911.764 559.14 907.342Z"
+        fill={fill || "#F4F8FA"}
+      />
+    </svg>
+  );
+};