Component cleanup

2026-04-29 07:20:16 -06:00
parent 252848eba9
commit e6127f1a3f
267 changed files with 2087 additions and 2196 deletions
@@ -0,0 +1,105 @@
+"use client";
+
+import { memo } from "react";
+import type { StepSizeValue } from "../../../../lib/propNormalization";
+import SectionNumber from "../../sections/SectionNumber";
+
+interface StepProps {
+  number: number;
+  text: string;
+  size?: StepSizeValue;
+  iconShape?: string;
+  iconColor?: string;
+}
+
+const Step = memo<StepProps>(({ number, text, size: sizeProp }) => {
+  const baseClasses =
+    "bg-[var(--color-surface-inverse-primary)] rounded-[12px] shadow-lg";
+
+  if (sizeProp) {
+    const size = sizeProp;
+    const sizeClasses = {
+      small: "flex flex-col items-end justify-center gap-4 p-5 relative",
+      medium: "flex flex-row items-center gap-8 p-8 relative",
+      large:
+        "flex flex-col items-start justify-end gap-[22px] h-[238px] p-8 relative",
+      xlarge:
+        "flex flex-col items-start justify-end gap-[22px] h-[238px] p-8 relative",
+    };
+
+    const textClasses = {
+      small:
+        "font-bricolage-grotesque font-medium text-[24px] leading-[32px] text-[#141414]",
+      medium:
+        "font-bricolage-grotesque font-medium text-[24px] leading-[24px] text-[#141414]",
+      large:
+        "font-bricolage-grotesque font-medium text-[24px] leading-[24px] text-[#141414]",
+      xlarge:
+        "font-bricolage-grotesque font-medium text-[32px] leading-[32px] text-[#141414]",
+    };
+
+    const sectionNumberWrapperClasses = {
+      small: "relative shrink-0",
+      medium: "flex justify-start flex-shrink-0",
+      large: "absolute top-8 right-8",
+      xlarge: "absolute top-8 right-8",
+    };
+
+    const contentClasses = {
+      small: "min-w-full relative shrink-0",
+      medium: "flex-1",
+      large: "absolute bottom-8 left-8 right-16",
+      xlarge: "absolute bottom-8 left-8 right-16",
+    };
+
+    if (size === "small") {
+      return (
+        <div className={`${baseClasses} ${sizeClasses[size]}`}>
+          {/* Section Number - Direct child for Small */}
+          <SectionNumber number={number} />
+
+          {/* Card Content */}
+          <p className={textClasses[size]}>{text}</p>
+        </div>
+      );
+    }
+
+    return (
+      <div className={`${baseClasses} ${sizeClasses[size]}`}>
+        {/* Section Number */}
+        <div className={sectionNumberWrapperClasses[size]}>
+          <SectionNumber number={number} />
+        </div>
+
+        {/* Card Content */}
+        <div className={contentClasses[size]}>
+          <p className={textClasses[size]}>{text}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Responsive breakpoints for backward compatibility (matches original behavior)
+  // Maps to: Small (mobile) -> Medium (sm) -> Large (lg) -> XLarge (xl)
+  return (
+    <div
+      className={`${baseClasses} flex flex-col gap-4 p-5 sm:flex-row sm:gap-8 sm:p-8 sm:items-center lg:flex-col lg:gap-[22px] lg:items-start lg:justify-end lg:p-8 lg:relative lg:h-[238px]`}
+    >
+      {/* Section Number - Responsive positioning */}
+      <div className="flex justify-end items-end sm:justify-start sm:flex-shrink-0 lg:absolute lg:top-8 lg:right-8">
+        <SectionNumber number={number} />
+      </div>
+
+      {/* Card Content - Responsive positioning */}
+      <div className="sm:flex-1 lg:absolute lg:bottom-8 lg:left-8 lg:right-16">
+        <p className="font-bricolage-grotesque font-medium text-[24px] leading-[32px] sm:leading-[24px] sm:text-[24px] lg:text-[24px] lg:leading-[24px] xl:text-[32px] xl:leading-[32px] text-[#141414]">
+          {text}
+        </p>
+      </div>
+    </div>
+  );
+});
+
+Step.displayName = "Step";
+
+export default Step;
@@ -0,0 +1,2 @@
+export { default } from "./Step";
+export type { StepSizeValue } from "../../../../lib/propNormalization";