Rebuild the About page from the current marketing frames, and leave the unapproved sentences off the page.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/components/sections/QuoteBlock/QuoteBlock.container.tsx

@@ -13,6 +13,7 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
     className = "",
     quote = "The rules of decision-making must be open and available to everyone, and this can happen only if they are formalized.",
     quoteSecondary,
+    statementStacked = false,
     author = "Jo Freeman",
     source = "The Tyranny of Structurelessness",
     avatarSrc = getAssetPath(ASSETS.QUOTE_AVATAR),
@@ -151,6 +152,7 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
         className={className}
         quote={quote}
         quoteSecondary={quoteSecondary}
+        statementStacked={statementStacked}
         author={author}
         source={source}
         quoteId={quoteId}

app/components/sections/QuoteBlock/QuoteBlock.types.ts

@@ -11,6 +11,11 @@ export interface QuoteBlockProps {
   quote?: string;
   /** Second paragraph for **`statement`** (Section/Quote); merged into one `<p>` from **`lg`**. */
   quoteSecondary?: string;
+  /**
+   * Keep the two statement paragraphs stacked at every breakpoint.
+   * Default joins them into one paragraph from `lg`.
+   */
+  statementStacked?: boolean;
   author?: string;
   source?: string;
   avatarSrc?: string;
@@ -46,6 +51,7 @@ export interface QuoteBlockViewProps {
   className: string;
   quote: string;
   quoteSecondary?: string;
+  statementStacked: boolean;
   author: string;
   source?: string;
   quoteId: string;

app/components/sections/QuoteBlock/QuoteBlock.view.tsx

@@ -11,6 +11,7 @@ function QuoteBlockView({
   className,
   quote,
   quoteSecondary,
+  statementStacked,
   author,
   source,
   quoteId,
@@ -41,13 +42,25 @@ function QuoteBlockView({
           <div className="relative z-10 flex w-full min-w-0 shrink-0 flex-col items-center text-center">
             <p
               id={quoteId}
-              className={`${statementTextClass} mb-0 flex w-full min-w-0 flex-col gap-9 text-center md:gap-[length:var(--text-xx-large-heading--line-height)] lg:block lg:gap-0`}
+              className={
+                statementStacked
+                  ? `${statementTextClass} mb-0 flex w-full min-w-0 flex-col gap-[1lh] text-center`
+                  : `${statementTextClass} mb-0 flex w-full min-w-0 flex-col gap-9 text-center md:gap-[length:var(--text-xx-large-heading--line-height)] lg:block lg:gap-0`
+              }
             >
-              <span className="block lg:inline">{quote}</span>
+              <span className={statementStacked ? "block" : "block lg:inline"}>
+                {quote}
+              </span>
               {quoteSecondary ? (
                 <>
-                  <span className="hidden lg:inline">{" "}</span>
-                  <span className="block lg:inline">{quoteSecondary}</span>
+                  {statementStacked ? (
+                    " "
+                  ) : (
+                    <span className="hidden lg:inline">{" "}</span>
+                  )}
+                  <span className={statementStacked ? "block" : "block lg:inline"}>
+                    {quoteSecondary}
+                  </span>
                 </>
               ) : null}
             </p>