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

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-11-03 16:59:36 -07:00
1 parent 3dee3a587b
commit 2101676429
@@ -0,0 +1,98 @@
+"use client";
+
+import { memo } from "react";
+import type {
+  FourQuestionTone,
+  FourQuestionsViewProps,
+} from "./FourQuestions.types";
+
+const TONE_CLASS: Record<FourQuestionTone, string> = {
+  yellow: "bg-[var(--color-surface-invert-brand-secondary)]",
+  teal: "bg-[var(--color-surface-invert-brand-teal)]",
+  lavender: "bg-[var(--color-surface-invert-brand-lavender)]",
+  red: "bg-[var(--color-surface-invert-brand-red)]",
+};
+
+function FourQuestionsView({
+  heading,
+  cards,
+  wishHeading,
+  wishParagraphs,
+  statsHeading,
+  statsSource,
+  stats,
+}: FourQuestionsViewProps) {
+  return (
+    <section
+      data-figma-node="24230:852"
+      className="flex flex-col gap-11 border-b border-[var(--color-border-default-secondary)] bg-black px-[var(--space-400)] py-16 lg:gap-14 lg:px-[var(--space-2400)] lg:py-20"
+      aria-labelledby="about-four-questions-heading"
+    >
+      <h2
+        id="about-four-questions-heading"
+        className="max-w-[768px] font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)] lg:text-heading-xxl"
+      >
+        {heading}
+      </h2>
+      <ul className="m-0 grid list-none grid-cols-1 gap-4 p-0 md:grid-cols-2 md:gap-6">
+        {cards.map((card) => (
+          <li
+            key={card.question}
+            className={`flex flex-col gap-3 rounded-[var(--radius-300)] p-6 lg:gap-4 lg:rounded-[var(--radius-500)] lg:p-8 ${TONE_CLASS[card.tone]}`}
+          >
+            <h3 className="font-bricolage-grotesque text-display-xs text-[var(--color-content-invert-primary)]">
+              {card.question}
+            </h3>
+            <p className="font-inter text-paragraph-s text-[var(--color-content-invert-tertiary)] lg:text-paragraph-m">
+              {card.line}
+            </p>
+          </li>
+        ))}
+      </ul>
+      <div className="flex max-w-[736px] flex-col gap-6">
+        <h2 className="font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)] lg:text-heading-xxl">
+          {wishHeading}
+        </h2>
+        <div className="flex flex-col gap-[1lh]">
+          {wishParagraphs.map((paragraph) => (
+            <p
+              key={paragraph}
+              className="font-inter text-paragraph-m text-[var(--color-content-default-secondary)] lg:text-paragraph-l"
+            >
+              {paragraph}
+            </p>
+          ))}
+        </div>
+      </div>
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-2 lg:gap-3">
+          <h3 className="font-bricolage-grotesque text-display-s text-[var(--color-content-default-primary)]">
+            {statsHeading}
+          </h3>
+          <p className="font-inter text-paragraph-s text-[var(--color-content-default-tertiary)] lg:text-paragraph-m">
+            {statsSource}
+          </p>
+        </div>
+        <dl className="m-0 flex flex-col pt-0 lg:flex-row lg:gap-16 lg:pt-10">
+          {stats.map((stat) => (
+            <div
+              key={stat.value}
+              className="flex flex-col gap-2.5 border-t border-[var(--color-border-default-secondary)] py-6 lg:flex-1 lg:gap-4 lg:border-t-0 lg:py-0"
+            >
+              <dt className="font-bricolage-grotesque text-display-s text-[var(--color-content-default-primary)] lg:text-display-xl">
+                {stat.value}
+              </dt>
+              <dd className="m-0 font-inter text-paragraph-s text-[var(--color-content-default-secondary)] lg:text-paragraph-m">
+                {stat.line}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </section>
+  );
+}
+
+FourQuestionsView.displayName = "FourQuestionsView";
+
+export default memo(FourQuestionsView);