From 30a7dd1c2f926462f17cf66867fd0fc344c7a7a0 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Sun, 24 May 2026 16:39:48 -0600
Subject: [PATCH] Fix about page triple step block

---
 .../TripleTextBlock/TripleTextBlock.view.tsx  | 63 ++++++++++++++-----
 .../components/type/TripleTextBlock.test.tsx  | 29 ++++++++-
 2 files changed, 74 insertions(+), 18 deletions(-)

diff --git a/app/components/type/TripleTextBlock/TripleTextBlock.view.tsx b/app/components/type/TripleTextBlock/TripleTextBlock.view.tsx
index 6dbeb29..c3950e1 100644
--- a/app/components/type/TripleTextBlock/TripleTextBlock.view.tsx
+++ b/app/components/type/TripleTextBlock/TripleTextBlock.view.tsx
@@ -12,6 +12,21 @@ function columnUsesLargeBreakpointCopy(column: TripleTextBlockColumn): boolean {
   return column.lgTitle !== undefined || column.lgDescription !== undefined;
 }
 
+function splitDescriptionParagraphs(description: string): {
+  primary: string;
+  secondary?: string;
+} {
+  const parts = description.split(/\n\n+/).map((part) => part.trim()).filter(Boolean);
+  if (parts.length <= 1) {
+    return { primary: description };
+  }
+
+  return {
+    primary: parts[0] ?? description,
+    secondary: parts.slice(1).join("\n\n"),
+  };
+}
+
 function TripleTextUseCasesColumn({ column }: { column: TripleTextBlockColumn }) {
   return (
     <article className="flex w-full flex-col gap-[var(--spacing-scale-006)] md:gap-[var(--spacing-scale-008)] lg:gap-[var(--spacing-scale-004)] xl:gap-[var(--spacing-scale-008)]">
@@ -30,6 +45,22 @@ function TripleTextUseCasesColumn({ column }: { column: TripleTextBlockColumn })
   );
 }
 
+function TripleTextStackedColumn({ column }: { column: TripleTextBlockColumn }) {
+  const { primary, secondary } = column.descriptionSecondary
+    ? { primary: column.description, secondary: column.descriptionSecondary }
+    : splitDescriptionParagraphs(column.description);
+
+  return (
+    <TripleTextUseCasesColumn
+      column={{
+        ...column,
+        description: primary,
+        descriptionSecondary: secondary,
+      }}
+    />
+  );
+}
+
 function TripleTextBlockColumnLockup({
   column,
   layoutPreset,
@@ -38,7 +69,7 @@ function TripleTextBlockColumnLockup({
   layoutPreset: "default" | "useCases";
 }) {
   if (layoutPreset === "useCases") {
-    return <TripleTextUseCasesColumn column={column} />;
+    return <TripleTextStackedColumn column={column} />;
   }
 
   const dual = columnUsesLargeBreakpointCopy(column);
@@ -47,24 +78,26 @@ function TripleTextBlockColumnLockup({
 
   if (!dual) {
     return (
-      <ContentLockup
-        variant="about"
-        alignment="left"
-        subtitle={column.title}
-        description={column.description}
-      />
+      <>
+        <div className="lg:hidden">
+          <TripleTextStackedColumn column={column} />
+        </div>
+        <div className="hidden lg:block">
+          <ContentLockup
+            variant="about"
+            alignment="left"
+            subtitle={column.title}
+            description={column.description}
+          />
+        </div>
+      </>
     );
   }
 
   return (
     <>
       <div className="lg:hidden">
-        <ContentLockup
-          variant="about"
-          alignment="left"
-          subtitle={column.title}
-          description={column.description}
-        />
+        <TripleTextStackedColumn column={column} />
       </div>
       <div className="hidden lg:block">
         <ContentLockup
@@ -105,7 +138,7 @@ function TripleTextBlockView({
       className={`bg-black py-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-064)] ${
         isUseCases
           ? "px-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-096)] lg:px-[calc(var(--spacing-scale-096)+var(--spacing-scale-096))] xl:px-[var(--spacing-scale-160)]"
-          : "px-[calc(var(--spacing-scale-032)+var(--spacing-scale-096))] md:px-[calc(var(--spacing-scale-096)+var(--spacing-scale-096))] lg:px-[calc(var(--spacing-scale-096)+var(--spacing-scale-096))] xl:px-[calc(var(--spacing-scale-160)+var(--spacing-scale-096))]"
+          : "px-[var(--spacing-scale-032)] md:px-[calc(var(--spacing-scale-096)+var(--spacing-scale-096))] lg:px-[calc(var(--spacing-scale-096)+var(--spacing-scale-096))] xl:px-[calc(var(--spacing-scale-160)+var(--spacing-scale-096))]"
       } ${className}`.trim()}
     >
       <div
@@ -131,7 +164,7 @@ function TripleTextBlockView({
           className={
             isUseCases
               ? "flex w-full flex-col gap-[var(--spacing-scale-048)] lg:flex-row lg:items-start lg:gap-[var(--spacing-scale-032)]"
-              : "flex w-full flex-col gap-[var(--spacing-scale-032)] lg:flex-row lg:items-start lg:gap-[var(--spacing-scale-032)]"
+              : "flex w-full flex-col gap-[var(--spacing-scale-048)] lg:flex-row lg:items-start lg:gap-[var(--spacing-scale-032)]"
           }
         >
           {columns.map((column, index) => (
diff --git a/tests/components/type/TripleTextBlock.test.tsx b/tests/components/type/TripleTextBlock.test.tsx
index 2f57d4a..c6cfa93 100644
--- a/tests/components/type/TripleTextBlock.test.tsx
+++ b/tests/components/type/TripleTextBlock.test.tsx
@@ -22,7 +22,7 @@ describe("TripleTextBlock", () => {
     );
 
     expect(
-      screen.getByRole("heading", { name: "Stacked headline" }),
+      screen.getByRole("heading", { level: 3, name: "Stacked headline" }),
     ).toBeInTheDocument();
     expect(
       screen.getByRole("heading", { name: "Wide headline" }),
@@ -44,9 +44,32 @@ describe("TripleTextBlock", () => {
     );
 
     expect(screen.getAllByRole("heading", { name: "Only headline" })).toHaveLength(
-      1,
+      2,
     );
-    expect(screen.getByText("Only body.")).toBeInTheDocument();
+    const stackedHeading = screen.getByRole("heading", {
+      level: 3,
+      name: "Only headline",
+    });
+    expect(stackedHeading).toHaveClass("text-[24px]");
+    expect(screen.getAllByText("Only body.")).toHaveLength(2);
+  });
+
+  it("default preset uses use-cases-matched baseline horizontal padding", () => {
+    const { container } = render(
+      <TripleTextBlock
+        columns={[
+          {
+            title: "Only headline",
+            description: "Only body.",
+          },
+        ]}
+      />,
+    );
+
+    const section = container.querySelector("section");
+    expect(section).toBeTruthy();
+    expect(section).toHaveClass("px-[var(--spacing-scale-032)]");
+    expect(section).not.toHaveClass("px-[calc(var(--spacing-scale-032)+var(--spacing-scale-096))]");
   });
 
   it("useCases preset renders persistent section heading, column h3 titles, dual paragraphs, outline CTA", () => {