SOEOPSFY24-342 | adjust timeline image perspective

components/Timeline/Timeline.styles.ts

@@ -45,7 +45,12 @@ export const size = {
   full: "w-full",
 };
 
-export const trapezoid = {
-  left: "rotate-y-[15deg] hocus:rotate-y-[-15deg]",
-  right: "rotate-y-[-15deg] hocus:rotate-y-[15deg]",
-};
+export const trapezoid = (
+  trapezoidAngle: "left" | "right",
+  isExpanded: boolean,
+) =>
+  cnb({
+    "rotate-y-[15deg]": trapezoidAngle === "left",
+    "rotate-y-[-15deg]": trapezoidAngle === "right",
+    "rotate-y-0 perspective-0": isExpanded,
+  });

components/Timeline/TimelineImage.tsx

@@ -22,7 +22,7 @@ export const TimelineImage = ({
   isExpanded = false,
 }: TimelineImageProps) => {
   const imageSize = styles.size[size];
-  const trapezoidType = styles.trapezoid[trapezoidAngle];
+  const trapezoidType = styles.trapezoid(trapezoidAngle, isExpanded);
 
   return (
     <div
@@ -33,25 +33,26 @@ export const TimelineImage = ({
     >
       <div
         className={cnb(
-          "aspect-[1/1] relative h-full perspective-1000 transform ease-in-out duration-2000 flex items-center justify-center",
-          { "rotate-y-0": isExpanded },
+          "aspect-[1/1] relative h-full transform ease-in-out perspective-1000 flex items-center justify-center",
           trapezoidType,
           imageSize,
         )}
       >
         {isExpanded && (
           <XMarkIcon
-            width={34}
-            className="absolute bg-stone-dark text-white rounded-full w-34 h-34 z-50"
+            width={60}
+            className="absolute bg-stone-dark text-white rounded-full z-50 border-2 border-fog-dark"
           />
         )}
         <Image
           alt={alt}
           src={src}
           fill
           className={cnb(
-            "z-0 object-cover overflow-hidden rounded-[20px] shadow-lg transform ease-in-out duration-1000",
-            { "contrast-50 brightness-100": isExpanded },
+            "z-0 object-cover overflow-hidden rounded-[20px] shadow-lg transform ease-in-out perspective-1000 duration-[2s] hocus:perspective-0 hocus:rotate-y-0",
+            {
+              "contrast-50 brightness-100 perspective-0 rotate-y-0": isExpanded,
+            },
           )}
         />
       </div>

components/Timeline/TimelineOverview.tsx

@@ -82,11 +82,15 @@ const TimelineOverview = ({ timelineData }: TimelineProps) => {
         {rows.map((row, rowIndex) => (
           <div
             key={`row-${rowIndex}`}
+            id={`${rowIndex}`}
             className="odd:children:children:even:rs-pt-6 even:children:children:odd:rs-pt-6"
           >
             <div className="flex flex-col items-center md:items-start md:flex-row md:justify-between">
               {row.map((item, itemIndex) => {
-                const sizePattern: SizeType[] = ["large", "medium", "small"];
+                const sizePattern: SizeType[] =
+                  rowIndex % 2 === 0
+                    ? ["large", "medium", "small"]
+                    : ["small", "large", "medium"];
                 const size = sizePattern[itemIndex % sizePattern.length];
                 const trapezoid = itemIndex % 2 === 0 ? "left" : "right";