Match the marketing homepage and About page to the latest Figma: black hero CTA, spaces in word-split headings, redesigned feature grid, and cited About statistics.

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

app/components/type/AboutHeader/AboutHeader.view.tsx

@@ -25,16 +25,27 @@ function AboutHeaderView({
         variant="about"
         alignment="left"
         titleId={titleId}
-        titleContent={segments.map((segment, index) => {
-          if (segment.type === "word") {
-            return (
-              <span key={`${segment.text}-${index}`} className="whitespace-nowrap">
-                {segment.text}
+        titleContent={segments.flatMap((segment, index) => {
+          const spaceBefore =
+            segment.type === "word" && index > 0 ? (
+              <span key={`space-${index}`} className="sr-only">
+                {" "}
               </span>
-            );
+            ) : null;
+
+          if (segment.type === "word") {
+            return [
+              spaceBefore,
+              <span
+                key={`${segment.text}-${index}`}
+                className="whitespace-nowrap"
+              >
+                {segment.text}
+              </span>,
+            ];
           }
 
-          return (
+          return [
             <span
               key={`${segment.icon}-${index}`}
               className={
@@ -50,8 +61,8 @@ function AboutHeaderView({
                 className="size-full object-contain"
                 role="presentation"
               />
-            </span>
-          );
+            </span>,
+          ];
         })}
       />
     </section>

app/components/type/ContentLockup/ContentLockup.view.tsx

@@ -84,8 +84,13 @@ function ContentLockupView({
               )}
             </div>
 
-            {/* Subtitle */}
-            {subtitle ? <h2 className={styles.subtitle}>{subtitle}</h2> : null}
+            {subtitle ? (
+              variant === "feature" ? (
+                <p className={styles.subtitle}>{subtitle}</p>
+              ) : (
+                <h2 className={styles.subtitle}>{subtitle}</h2>
+              )
+            ) : null}
           </div>
 
           {/* Description */}
@@ -110,7 +115,7 @@ function ContentLockupView({
           <div className="block md:hidden">
             <Button
               buttonType="filled"
-              palette={variant === "hero" ? "default" : "inverse"}
+              palette="inverse"
               size="small"
               href={ctaHref}
             >
@@ -121,7 +126,7 @@ function ContentLockupView({
           <div className="hidden md:block xl:hidden">
             <Button
               buttonType="filled"
-              palette={variant === "hero" ? "default" : "inverse"}
+              palette="inverse"
               size="large"
               className={buttonClassName}
               href={ctaHref}
@@ -133,7 +138,7 @@ function ContentLockupView({
           <div className="hidden xl:block">
             <Button
               buttonType="filled"
-              palette={variant === "hero" ? "default" : "inverse"}
+              palette="inverse"
               size="xlarge"
               href={ctaHref}
             >

app/components/type/SectionHeader/SectionHeader.tsx

@@ -79,8 +79,8 @@ const SectionHeader = memo<SectionHeaderProps>(
             </span>
             {useStackedDesktop ? (
               <span className={splitFromMd ? "hidden md:block" : "hidden lg:block"}>
-                <span className="block">{stackedDesktopLines[0]}</span>
-                <span className="block">{stackedDesktopLines[1]}</span>
+                <span className="block">{stackedDesktopLines[0]} </span>
+                <span className="block">{stackedDesktopLines[1]} </span>
                 <span className="block">{stackedDesktopLines[2]}</span>
               </span>
             ) : (