Point color, radius, stroke, focus, and type tokens at the Figma scale so later sections use the same values.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilalloandCursor committed
1 parent
63d5d21ae0
commit
e808fe70bf
162 files changed
+1385
-1377
No files matched your search
@@ -19,7 +19,7 @@ function AboutHeaderView({
|
||||
}: AboutHeaderViewProps) {
|
||||
return (
|
||||
<section
|
||||
className={`bg-black px-[var(--spacing-scale-020)] py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-064)] md:py-[var(--spacing-scale-032)] ${className}`.trim()}
|
||||
className={`bg-black px-[var(--space-500)] py-[var(--space-800)] md:px-[var(--space-1800)] md:py-[var(--space-800)] ${className}`.trim()}
|
||||
>
|
||||
<ContentLockup
|
||||
variant="about"
|
||||
|
||||
@@ -10,7 +10,7 @@ import type { CommunityRuleProps } from "./CommunityRule.types";
|
||||
* **`Section`** (22002:30757) + **`TextBlock`** (22001:29793); canonical code under **`type/CommunityRule`**.
|
||||
*/
|
||||
|
||||
const SECTION_GAP = "var(--measures-spacing-1200, 64px)";
|
||||
const SECTION_GAP = "var(--space-1800)";
|
||||
const TEAL_BG = "var(--color-teal-teal50, #c9fef9)";
|
||||
|
||||
function CommunityRuleView({
|
||||
|
||||
@@ -29,28 +29,28 @@ const ContentLockupContainer = memo<ContentLockupProps>(
|
||||
const variantStyles: Record<string, VariantStyle> = {
|
||||
hero: {
|
||||
container:
|
||||
"flex flex-col gap-[var(--spacing-scale-006)] sm:gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-020)] relative z-10",
|
||||
"flex flex-col gap-[var(--space-150)] sm:gap-[var(--space-300)] md:gap-[var(--space-500)] lg:gap-[var(--space-500)] relative z-10",
|
||||
textContainer:
|
||||
"flex flex-col md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-020)]",
|
||||
"flex flex-col md:gap-[var(--space-100)] lg:gap-[var(--space-200)] xl:gap-[var(--space-500)]",
|
||||
titleGroup: "flex flex-col xl:gap-0",
|
||||
titleContainer:
|
||||
"flex gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-010)] items-center",
|
||||
"flex gap-[var(--space-200)] xl:gap-[var(--space-250)] items-center",
|
||||
title:
|
||||
"font-bricolage-grotesque font-medium max-sm:text-[32px] max-sm:leading-[110%] sm:text-large-display md:text-medium-display lg:text-x-large-display xl:text-xx-large-display text-[var(--color-content-inverse-primary)] [font-variation-settings:'opsz'_14,'wdth'_100]",
|
||||
"font-bricolage-grotesque font-medium max-sm:text-[32px] max-sm:leading-[110%] sm:text-large-display md:text-medium-display lg:text-x-large-display xl:text-xx-large-display text-[var(--color-content-invert-primary)] [font-variation-settings:'opsz'_14,'wdth'_100]",
|
||||
subtitle:
|
||||
"font-bricolage-grotesque font-medium max-sm:text-[32px] max-sm:leading-[110%] sm:text-large-display md:text-medium-display lg:text-x-large-display xl:text-xx-large-display text-[var(--color-content-inverse-primary)] [font-variation-settings:'opsz'_14,'wdth'_100]",
|
||||
"font-bricolage-grotesque font-medium max-sm:text-[32px] max-sm:leading-[110%] sm:text-large-display md:text-medium-display lg:text-x-large-display xl:text-xx-large-display text-[var(--color-content-invert-primary)] [font-variation-settings:'opsz'_14,'wdth'_100]",
|
||||
description:
|
||||
"text-small-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph text-[var(--color-content-inverse-primary)]",
|
||||
"text-small-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph text-[var(--color-content-invert-primary)]",
|
||||
shape:
|
||||
"w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]",
|
||||
},
|
||||
feature: {
|
||||
container: "flex flex-col gap-[var(--space-400,16px)] md:gap-[var(--space-500,20px)] relative z-10",
|
||||
textContainer: "flex flex-col gap-[var(--space-100,4px)] md:gap-[var(--space-150,6px)]",
|
||||
titleGroup: "flex flex-col gap-[var(--space-100,4px)] md:gap-[var(--space-150,6px)]",
|
||||
container: "flex flex-col gap-[var(--space-400)] md:gap-[var(--space-500)] relative z-10",
|
||||
textContainer: "flex flex-col gap-[var(--space-100)] md:gap-[var(--space-150)]",
|
||||
titleGroup: "flex flex-col gap-[var(--space-100)] md:gap-[var(--space-150)]",
|
||||
titleContainer: "flex items-center",
|
||||
title:
|
||||
"font-bricolage-grotesque font-medium text-[18px] leading-[22px] md:text-[length:var(--sizing-600,24px)] md:leading-[32px] text-[var(--color-content-default-primary)]",
|
||||
"font-bricolage-grotesque font-medium text-[18px] leading-[22px] md:text-[length:var(--sizing-600)] md:leading-[32px] text-[var(--color-content-default-primary)]",
|
||||
subtitle:
|
||||
"text-small-paragraph md:text-medium-paragraph text-[var(--color-content-default-secondary)]",
|
||||
description:
|
||||
@@ -60,13 +60,13 @@ const ContentLockupContainer = memo<ContentLockupProps>(
|
||||
},
|
||||
about: {
|
||||
container:
|
||||
"flex flex-col gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-016)] relative z-10",
|
||||
"flex flex-col gap-[var(--space-500)] lg:gap-[var(--space-400)] relative z-10",
|
||||
textContainer:
|
||||
"flex flex-col gap-[var(--spacing-scale-008)] lg:gap-[var(--spacing-scale-004)]",
|
||||
"flex flex-col gap-[var(--space-200)] lg:gap-[var(--space-100)]",
|
||||
titleGroup:
|
||||
"flex flex-col gap-[var(--spacing-scale-008)] lg:gap-[var(--spacing-scale-004)]",
|
||||
"flex flex-col gap-[var(--space-200)] lg:gap-[var(--space-100)]",
|
||||
titleContainer:
|
||||
"flex flex-wrap items-center gap-[var(--spacing-scale-010)] xl:gap-[var(--spacing-scale-012)]",
|
||||
"flex flex-wrap items-center gap-[var(--space-250)] xl:gap-[var(--space-300)]",
|
||||
title:
|
||||
"font-bricolage-grotesque font-medium text-[32px] leading-[1.1] md:text-large-display xl:text-x-large-display text-[var(--color-content-default-primary,white)]",
|
||||
subtitle:
|
||||
@@ -78,15 +78,15 @@ const ContentLockupContainer = memo<ContentLockupProps>(
|
||||
},
|
||||
book: {
|
||||
container:
|
||||
"flex flex-col gap-[var(--spacing-scale-016)] lg:gap-[var(--spacing-scale-020)] relative z-10",
|
||||
"flex flex-col gap-[var(--space-400)] lg:gap-[var(--space-500)] relative z-10",
|
||||
textContainer:
|
||||
"flex flex-col gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-008)]",
|
||||
"flex flex-col gap-[var(--space-100)] lg:gap-[var(--space-200)]",
|
||||
titleGroup: "flex flex-col gap-0",
|
||||
titleContainer: "flex flex-wrap items-center gap-[var(--spacing-scale-008)]",
|
||||
titleContainer: "flex flex-wrap items-center gap-[var(--space-200)]",
|
||||
title:
|
||||
"font-bricolage-grotesque font-medium text-[18px] leading-[22px] lg:text-[length:var(--spacing-scale-020)] lg:leading-[24px] xl:text-[length:var(--spacing-scale-032)] xl:leading-[1.1] text-[var(--color-content-default-primary)]",
|
||||
"font-bricolage-grotesque font-medium text-[18px] leading-[22px] lg:text-[length:var(--space-500)] lg:leading-[24px] xl:text-[length:var(--space-800)] xl:leading-[1.1] text-[var(--color-content-default-primary)]",
|
||||
subtitle:
|
||||
"font-bricolage-grotesque font-medium text-[18px] leading-[22px] lg:text-[length:var(--spacing-scale-020)] lg:leading-[24px] xl:text-[length:var(--spacing-scale-032)] xl:leading-[1.1] text-[var(--color-content-default-primary)]",
|
||||
"font-bricolage-grotesque font-medium text-[18px] leading-[22px] lg:text-[length:var(--space-500)] lg:leading-[24px] xl:text-[length:var(--space-800)] xl:leading-[1.1] text-[var(--color-content-default-primary)]",
|
||||
description:
|
||||
"text-small-paragraph text-[var(--color-content-default-secondary)] whitespace-pre-line lg:text-medium-paragraph xl:text-x-large-paragraph",
|
||||
shape:
|
||||
@@ -94,26 +94,26 @@ const ContentLockupContainer = memo<ContentLockupProps>(
|
||||
},
|
||||
learn: {
|
||||
container:
|
||||
"flex flex-col gap-[var(--spacing-scale-012)] relative z-10 pt-[var(--spacing-scale-016)] pb-[var(--spacing-scale-016)] px-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-040)] sm:pb-0 md:pt-[var(--spacing-scale-056)] md:px-[var(--spacing-scale-032)] lg:pt-[var(--spacing-scale-056)] lg:px-[var(--spacing-scale-064)]",
|
||||
"flex flex-col gap-[var(--space-300)] relative z-10 pt-[var(--space-400)] pb-[var(--space-400)] px-[var(--space-500)] sm:pt-[var(--space-1000)] sm:pb-0 md:pt-[var(--space-1400)] md:px-[var(--space-800)] lg:pt-[var(--space-1400)] lg:px-[var(--space-1800)]",
|
||||
textContainer:
|
||||
"flex flex-col gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-016)]",
|
||||
"flex flex-col gap-[var(--space-300)] md:gap-[var(--space-400)]",
|
||||
titleGroup:
|
||||
"flex flex-col gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-016)] lg:gap-[var(--spacing-scale-008)]",
|
||||
titleContainer: "flex gap-[var(--spacing-scale-008)] items-center",
|
||||
"flex flex-col gap-[var(--space-300)] md:gap-[var(--space-400)] lg:gap-[var(--space-200)]",
|
||||
titleContainer: "flex gap-[var(--space-200)] items-center",
|
||||
title:
|
||||
"font-bricolage-grotesque font-medium max-md:text-[28px] max-md:leading-[36px] tracking-[0] md:text-medium-display lg:text-large-display text-[var(--color-content-default-primary)]",
|
||||
subtitle:
|
||||
"font-space-grotesk text-medium-paragraph tracking-[0] lg:text-x-large-label text-[var(--color-content-default-primary)]",
|
||||
"font-sans text-medium-paragraph tracking-[0] lg:text-x-large-label text-[var(--color-content-default-primary)]",
|
||||
description:
|
||||
"font-normal text-[16px] leading-[140%] lg:text-[18px] lg:leading-[150%] xl:text-[20px] xl:leading-[160%] text-[var(--color-content-default-secondary)]",
|
||||
shape:
|
||||
"w-[20px] h-[20px] md:w-[24px] md:h-[24px] lg:w-[28px] lg:h-[28px]",
|
||||
},
|
||||
ask: {
|
||||
container: "flex flex-col gap-[var(--spacing-scale-008)] relative z-10",
|
||||
textContainer: "flex flex-col gap-[var(--spacing-scale-008)]",
|
||||
titleGroup: "flex flex-col gap-[var(--spacing-scale-008)]",
|
||||
titleContainer: "flex gap-[var(--spacing-scale-008)] items-center",
|
||||
container: "flex flex-col gap-[var(--space-200)] relative z-10",
|
||||
textContainer: "flex flex-col gap-[var(--space-200)]",
|
||||
titleGroup: "flex flex-col gap-[var(--space-200)]",
|
||||
titleContainer: "flex gap-[var(--space-200)] items-center",
|
||||
title:
|
||||
"font-bricolage-grotesque font-medium text-[32px] leading-[1.1] tracking-[0] md:text-medium-display text-[var(--color-content-default-brand-primary)]",
|
||||
subtitle:
|
||||
@@ -122,12 +122,12 @@ const ContentLockupContainer = memo<ContentLockupProps>(
|
||||
"w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]",
|
||||
},
|
||||
"ask-inverse": {
|
||||
container: "flex flex-col gap-[var(--spacing-scale-008)] relative z-10 w-full",
|
||||
textContainer: "flex flex-col gap-[var(--spacing-scale-008)]",
|
||||
titleGroup: "flex flex-col gap-[var(--spacing-scale-008)] w-full",
|
||||
titleContainer: "flex gap-[var(--spacing-scale-008)] items-center",
|
||||
container: "flex flex-col gap-[var(--space-200)] relative z-10 w-full",
|
||||
textContainer: "flex flex-col gap-[var(--space-200)]",
|
||||
titleGroup: "flex flex-col gap-[var(--space-200)] w-full",
|
||||
titleContainer: "flex gap-[var(--space-200)] items-center",
|
||||
title:
|
||||
"font-bricolage-grotesque font-medium text-[32px] leading-[1.1] tracking-[0] md:text-medium-display text-[var(--color-content-inverse-primary)]",
|
||||
"font-bricolage-grotesque font-medium text-[32px] leading-[1.1] tracking-[0] md:text-medium-display text-[var(--color-content-invert-primary)]",
|
||||
subtitle:
|
||||
"text-large-paragraph tracking-[0] md:text-x-large-paragraph text-[var(--color-content-invert-secondary)]",
|
||||
shape:
|
||||
@@ -135,9 +135,9 @@ const ContentLockupContainer = memo<ContentLockupProps>(
|
||||
},
|
||||
modal: {
|
||||
container:
|
||||
"flex flex-col gap-[var(--spacing-scale-008)] items-start justify-center py-[12px] relative w-full",
|
||||
textContainer: "flex flex-col gap-[var(--spacing-scale-008)] w-full",
|
||||
titleGroup: "flex flex-col gap-[var(--spacing-scale-008)] w-full",
|
||||
"flex flex-col gap-[var(--space-200)] items-start justify-center py-[12px] relative w-full",
|
||||
textContainer: "flex flex-col gap-[var(--space-200)] w-full",
|
||||
titleGroup: "flex flex-col gap-[var(--space-200)] w-full",
|
||||
titleContainer: "flex items-center justify-start w-full",
|
||||
title:
|
||||
"font-bricolage-grotesque text-medium-heading tracking-[0] text-[var(--color-content-default-primary)] text-left",
|
||||
@@ -149,9 +149,9 @@ const ContentLockupContainer = memo<ContentLockupProps>(
|
||||
},
|
||||
login: {
|
||||
container:
|
||||
"flex flex-col gap-[var(--spacing-scale-012)] items-start justify-center relative w-full",
|
||||
textContainer: "flex flex-col gap-[var(--spacing-scale-012)] w-full",
|
||||
titleGroup: "flex flex-col gap-[var(--spacing-scale-012)] w-full",
|
||||
"flex flex-col gap-[var(--space-300)] items-start justify-center relative w-full",
|
||||
textContainer: "flex flex-col gap-[var(--space-300)] w-full",
|
||||
titleGroup: "flex flex-col gap-[var(--space-300)] w-full",
|
||||
titleContainer: "flex items-center justify-start w-full",
|
||||
title:
|
||||
"font-bricolage-grotesque text-x-large-heading tracking-[0] text-[var(--color-content-default-primary)] text-left",
|
||||
|
||||
@@ -63,7 +63,7 @@ function ContentLockupView({
|
||||
{titleContent ? (
|
||||
<h1
|
||||
id={titleId}
|
||||
className={`${styles.title} flex flex-wrap items-center gap-[var(--spacing-scale-010)] xl:gap-[var(--spacing-scale-012)]`}
|
||||
className={`${styles.title} flex flex-wrap items-center gap-[var(--space-250)] xl:gap-[var(--space-300)]`}
|
||||
>
|
||||
{titleContent}
|
||||
</h1>
|
||||
|
||||
@@ -24,7 +24,7 @@ function HeaderLockupView({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col gap-[var(--measures-spacing-200,8px)] py-[12px] relative ${
|
||||
className={`flex flex-col gap-[var(--space-200)] py-[12px] relative ${
|
||||
isLeft ? "items-start" : "items-center"
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -29,11 +29,11 @@ function InputLabelView({
|
||||
|
||||
const asteriskSize = isSmall
|
||||
? "text-xx-small-label"
|
||||
: "font-medium text-[length:var(--measures-spacing-300,12px)] leading-[var(--measures-spacing-300,12px)]";
|
||||
: "font-medium text-[length:var(--space-300)] leading-[var(--space-300)]";
|
||||
|
||||
// Palette-based colors
|
||||
const labelColor = isInverse
|
||||
? "text-[color:var(--color-content-inverse-secondary,#1f1f1f)]"
|
||||
? "text-[color:var(--color-content-invert-secondary,#1f1f1f)]"
|
||||
: "text-[color:var(--color-content-default-secondary,#d2d2d2)]";
|
||||
|
||||
const helperTextColor =
|
||||
@@ -41,12 +41,12 @@ function InputLabelView({
|
||||
|
||||
// Layout: S uses flex-wrap with baseline, M uses flex with center
|
||||
const containerClass = isSmall
|
||||
? "flex flex-wrap gap-[var(--measures-spacing-200,4px_8px)] items-baseline pr-[var(--measures-spacing-100,4px)] relative w-full"
|
||||
? "flex flex-wrap gap-[var(--space-100)_var(--space-200)] items-baseline pr-[var(--space-100)] relative w-full"
|
||||
: "flex gap-[4px] items-center relative w-full";
|
||||
|
||||
const labelContainerClass = isSmall
|
||||
? "flex gap-[var(--measures-spacing-050,2px)] items-center relative shrink-0"
|
||||
: "flex gap-[var(--measures-spacing-100,4px)] items-center relative shrink-0";
|
||||
? "flex gap-[var(--space-050)] items-center relative shrink-0"
|
||||
: "flex gap-[var(--space-100)] items-center relative shrink-0";
|
||||
|
||||
const helpIconSize = isSmall ? "size-[12px]" : "size-[16px]";
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ function NumberedListView({ items, size }: NumberedListViewProps) {
|
||||
const isM = size === "M";
|
||||
|
||||
return (
|
||||
<ol className="flex flex-col gap-[var(--measures-spacing-600,24px)] items-start relative w-full list-none">
|
||||
<ol className="flex flex-col gap-[var(--space-600)] items-start relative w-full list-none">
|
||||
{items.map((item, index) => (
|
||||
<li
|
||||
key={index}
|
||||
@@ -15,12 +15,12 @@ function NumberedListView({ items, size }: NumberedListViewProps) {
|
||||
>
|
||||
{/* Number Indicator */}
|
||||
<div
|
||||
className={`bg-[var(--color-surface-inverse-primary,white)] flex flex-col items-center justify-center px-[11.2px] py-[4px] relative rounded-full shrink-0 ${
|
||||
className={`bg-[var(--color-surface-invert-primary,white)] flex flex-col items-center justify-center px-[11.2px] py-[4px] relative rounded-full shrink-0 ${
|
||||
isM ? "size-[32px]" : "size-[24px]"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`flex flex-col justify-center leading-[0] overflow-hidden relative shrink-0 text-[var(--color-content-inverse-primary,black)] text-ellipsis whitespace-nowrap ${
|
||||
className={`flex flex-col justify-center leading-[0] overflow-hidden relative shrink-0 text-[var(--color-content-invert-primary,black)] text-ellipsis whitespace-nowrap ${
|
||||
isM
|
||||
? "text-x-small-heading"
|
||||
: "font-bricolage-grotesque text-xx-small-heading"
|
||||
@@ -31,7 +31,7 @@ function NumberedListView({ items, size }: NumberedListViewProps) {
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex flex-[1_0_0] flex-col gap-[var(--measures-spacing-100,4px)] items-start justify-center min-h-px min-w-px">
|
||||
<div className="flex flex-[1_0_0] flex-col gap-[var(--space-100)] items-start justify-center min-h-px min-w-px">
|
||||
{/* Title */}
|
||||
<div className="flex items-center relative shrink-0 w-full">
|
||||
<h3
|
||||
|
||||
@@ -28,8 +28,8 @@ function PageHeaderView({
|
||||
const h1Align = isCenter ? "text-center" : "";
|
||||
|
||||
const sectionPadding = sectionMinimal
|
||||
? "py-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-056)]"
|
||||
: "py-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-032)]";
|
||||
? "py-[var(--space-800)] md:py-[var(--space-1400)]"
|
||||
: "py-[var(--space-800)] md:py-[var(--space-800)]";
|
||||
|
||||
const titleTypeClasses = sectionMinimal
|
||||
? "font-bricolage-grotesque text-[32px] font-medium leading-[1.1] text-[var(--color-content-default-primary)] md:text-large-display xl:text-x-large-display"
|
||||
@@ -45,13 +45,13 @@ function PageHeaderView({
|
||||
return (
|
||||
<section
|
||||
data-figma-node={sectionFigmaNode}
|
||||
className={`bg-[var(--color-surface-default-primary)] px-[var(--spacing-scale-020)] md:px-[var(--spacing-scale-064)] ${sectionPadding} ${className}`.trim()}
|
||||
className={`bg-[var(--color-surface-default-primary)] px-[var(--space-500)] md:px-[var(--space-1800)] ${sectionPadding} ${className}`.trim()}
|
||||
>
|
||||
<div
|
||||
className={`mx-auto flex w-full max-w-[1440px] flex-col gap-[var(--spacing-scale-024)] ${isCenter ? "items-center" : ""}`}
|
||||
className={`mx-auto flex w-full max-w-[1440px] flex-col gap-[var(--space-600)] ${isCenter ? "items-center" : ""}`}
|
||||
>
|
||||
<div
|
||||
className={`flex w-full flex-col gap-[var(--spacing-scale-020)] ${lockupAlign}`}
|
||||
className={`flex w-full flex-col gap-[var(--space-500)] ${lockupAlign}`}
|
||||
>
|
||||
<h1
|
||||
id={titleId}
|
||||
|
||||
@@ -44,23 +44,23 @@ const SectionHeader = memo<SectionHeaderProps>(
|
||||
ruleStackDesktopTypeScale &&
|
||||
variant === "multi-line";
|
||||
const rowAlignClasses = splitFromMd
|
||||
? "md:flex-row md:justify-between md:items-center xl:gap-[var(--spacing-scale-024)]"
|
||||
? "md:flex-row md:justify-between md:items-center xl:gap-[var(--space-600)]"
|
||||
: variant === "multi-line"
|
||||
? "lg:flex-row lg:justify-between lg:items-center xl:gap-[var(--spacing-scale-024)]"
|
||||
: "lg:flex-row lg:justify-between lg:items-start xl:gap-[var(--spacing-scale-024)]";
|
||||
? "lg:flex-row lg:justify-between lg:items-center xl:gap-[var(--space-600)]"
|
||||
: "lg:flex-row lg:justify-between lg:items-start xl:gap-[var(--space-600)]";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col gap-[var(--spacing-scale-004)] w-full ${rowAlignClasses}`}
|
||||
className={`flex flex-col gap-[var(--space-100)] w-full ${rowAlignClasses}`}
|
||||
>
|
||||
{/* Title — left column at md+ (use cases) or lg+ */}
|
||||
<div
|
||||
className={
|
||||
variant === "multi-line"
|
||||
? splitFromMd
|
||||
? "md:w-[50%] md:h-[var(--spacing-scale-120)] md:flex md:items-center xl:w-[50%] xl:h-[156px] xl:flex xl:items-center"
|
||||
: "lg:w-[50%] lg:h-[var(--spacing-scale-120)] lg:flex lg:items-center xl:w-[50%] xl:h-[156px] xl:flex xl:items-center"
|
||||
: "lg:w-[369px] lg:h-[var(--spacing-scale-120)] lg:flex lg:items-center xl:w-[452px] xl:h-[156px] xl:flex xl:items-center"
|
||||
? "md:w-[50%] md:h-[var(--space-3000)] md:flex md:items-center xl:w-[50%] xl:h-[156px] xl:flex xl:items-center"
|
||||
: "lg:w-[50%] lg:h-[var(--space-3000)] lg:flex lg:items-center xl:w-[50%] xl:h-[156px] xl:flex xl:items-center"
|
||||
: "lg:w-[369px] lg:h-[var(--space-3000)] lg:flex lg:items-center xl:w-[452px] xl:h-[156px] xl:flex xl:items-center"
|
||||
}
|
||||
>
|
||||
<h2
|
||||
@@ -71,7 +71,7 @@ const SectionHeader = memo<SectionHeaderProps>(
|
||||
? "font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:w-full md:max-w-[571px] md:text-left md:text-large-heading xl:text-xx-large-heading"
|
||||
: "font-bricolage-grotesque text-medium-heading md:text-large-heading lg:w-full lg:max-w-[571px] lg:text-left lg:text-large-heading xl:text-xx-large-heading text-[var(--color-content-default-primary)]"
|
||||
: "font-bricolage-grotesque text-medium-heading md:text-large-heading lg:w-[410px] lg:text-left xl:text-xx-large-heading text-[var(--color-content-default-primary)]"
|
||||
: "font-bricolage-grotesque text-medium-heading sm:text-large-heading lg:text-large-heading lg:w-[369px] lg:pr-[var(--spacing-scale-096)] xl:text-xx-large-heading xl:w-[452px] xl:pr-[var(--spacing-scale-096)] text-[var(--color-content-default-primary)]"
|
||||
: "font-bricolage-grotesque text-medium-heading sm:text-large-heading lg:text-large-heading lg:w-[369px] lg:pr-[var(--space-2400)] xl:text-xx-large-heading xl:w-[452px] xl:pr-[var(--space-2400)] text-[var(--color-content-default-primary)]"
|
||||
}
|
||||
>
|
||||
<span className={splitFromMd ? "block md:hidden" : "block lg:hidden"}>
|
||||
@@ -97,10 +97,10 @@ const SectionHeader = memo<SectionHeaderProps>(
|
||||
variant === "multi-line"
|
||||
? ruleStackDesktopTypeScale
|
||||
? splitFromMd
|
||||
? "md:w-[50%] md:h-[var(--spacing-scale-120)] md:flex md:items-center md:justify-start md:ml-[var(--spacing-scale-016)] xl:ml-0 xl:w-[50%] xl:h-[156px] xl:flex xl:items-center xl:justify-start"
|
||||
: "lg:w-[50%] lg:h-[var(--spacing-scale-120)] lg:flex lg:items-center lg:justify-start lg:ml-[var(--spacing-scale-016)] xl:ml-0 xl:w-[50%] xl:h-[156px] xl:flex xl:items-center xl:justify-start"
|
||||
: "lg:w-[50%] lg:h-[var(--spacing-scale-120)] lg:flex lg:items-center lg:justify-end lg:ml-[var(--spacing-scale-016)] xl:ml-0 xl:w-[50%] xl:h-[156px] xl:flex xl:items-center xl:justify-end"
|
||||
: "lg:w-[928px] lg:h-[var(--spacing-scale-120)] lg:flex lg:items-center lg:justify-end xl:h-[156px] xl:flex xl:items-center xl:justify-end"
|
||||
? "md:w-[50%] md:h-[var(--space-3000)] md:flex md:items-center md:justify-start md:ml-[var(--space-400)] xl:ml-0 xl:w-[50%] xl:h-[156px] xl:flex xl:items-center xl:justify-start"
|
||||
: "lg:w-[50%] lg:h-[var(--space-3000)] lg:flex lg:items-center lg:justify-start lg:ml-[var(--space-400)] xl:ml-0 xl:w-[50%] xl:h-[156px] xl:flex xl:items-center xl:justify-start"
|
||||
: "lg:w-[50%] lg:h-[var(--space-3000)] lg:flex lg:items-center lg:justify-end lg:ml-[var(--space-400)] xl:ml-0 xl:w-[50%] xl:h-[156px] xl:flex xl:items-center xl:justify-end"
|
||||
: "lg:w-[928px] lg:h-[var(--space-3000)] lg:flex lg:items-center lg:justify-end xl:h-[156px] xl:flex xl:items-center xl:justify-end"
|
||||
}
|
||||
>
|
||||
<p
|
||||
|
||||
@@ -57,7 +57,7 @@ function LabeledRowView({ row }: { row: TextRow }) {
|
||||
<img
|
||||
src={imageSrc}
|
||||
alt={alt}
|
||||
className="max-h-[240px] max-w-full rounded-[var(--measures-radius-200,8px)] object-contain"
|
||||
className="max-h-[240px] max-w-full rounded-[var(--radius-200)] object-contain"
|
||||
/>
|
||||
{hasCaption ? <ParagraphGroup text={row.body} /> : null}
|
||||
</>
|
||||
|
||||
@@ -28,10 +28,10 @@ function TripleStepView({
|
||||
<section
|
||||
data-figma-node="22084-859405"
|
||||
aria-labelledby={headingId}
|
||||
className={`bg-transparent px-[var(--spacing-scale-032)] py-[var(--spacing-scale-032)] md:px-0 md:py-[var(--spacing-scale-048)] ${className}`.trim()}
|
||||
className={`bg-transparent px-[var(--space-800)] py-[var(--space-800)] md:px-0 md:py-[var(--space-1200)] ${className}`.trim()}
|
||||
>
|
||||
<div className="mx-auto grid w-full min-w-0 max-w-[560px] grid-cols-1 items-center gap-[var(--spacing-scale-032)] md:max-w-none md:grid-cols-2 md:gap-0">
|
||||
<div className="flex w-full min-w-0 flex-col gap-[var(--spacing-scale-040)] break-words md:pl-[var(--spacing-scale-032)] lg:min-w-[358px] lg:pl-[var(--spacing-scale-064)]">
|
||||
<div className="mx-auto grid w-full min-w-0 max-w-[560px] grid-cols-1 items-center gap-[var(--space-800)] md:max-w-none md:grid-cols-2 md:gap-0">
|
||||
<div className="flex w-full min-w-0 flex-col gap-[var(--space-1000)] break-words md:pl-[var(--space-800)] lg:min-w-[358px] lg:pl-[var(--space-1800)]">
|
||||
<h2
|
||||
id={headingId}
|
||||
className="font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:text-large-heading"
|
||||
@@ -41,7 +41,7 @@ function TripleStepView({
|
||||
{steps.map((step, index) => (
|
||||
<div
|
||||
key={step.title}
|
||||
className="flex flex-col items-start gap-[var(--spacing-scale-016)]"
|
||||
className="flex flex-col items-start gap-[var(--space-400)]"
|
||||
>
|
||||
<AssetIcon
|
||||
name={
|
||||
@@ -66,7 +66,7 @@ function TripleStepView({
|
||||
buttonType="outline"
|
||||
palette="default"
|
||||
size="medium"
|
||||
className="max-md:!px-[var(--spacing-scale-012)] max-md:!py-[var(--spacing-scale-010)] max-md:!text-[14px] max-md:!leading-[18px] md:!p-[var(--spacing-scale-012)] md:!text-medium-label md:!gap-[var(--spacing-scale-006)]"
|
||||
className="max-md:!px-[var(--space-300)] max-md:!py-[var(--space-250)] max-md:!text-[14px] max-md:!leading-[18px] md:!p-[var(--space-300)] md:!text-medium-label md:!gap-[var(--space-150)]"
|
||||
>
|
||||
{ctaText}
|
||||
</Button>
|
||||
|
||||
@@ -29,14 +29,14 @@ function splitDescriptionParagraphs(description: string): {
|
||||
|
||||
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)]">
|
||||
<h3 className="text-left font-bricolage-grotesque text-[24px] font-medium leading-8 text-[var(--color-content-default-primary,white)] md:text-[32px] md:leading-[1.1] lg:text-[18px] lg:leading-[var(--spacing-scale-022)] xl:text-[32px] xl:leading-[1.1]">
|
||||
<article className="flex w-full flex-col gap-[var(--space-150)] md:gap-[var(--space-200)] lg:gap-[var(--space-100)] xl:gap-[var(--space-200)]">
|
||||
<h3 className="text-left font-bricolage-grotesque text-[24px] font-medium leading-8 text-[var(--color-content-default-primary,white)] md:text-[32px] md:leading-[1.1] lg:text-[18px] lg:leading-[var(--scale-022)] xl:text-[32px] xl:leading-[1.1]">
|
||||
{column.title}
|
||||
</h3>
|
||||
<div className="flex flex-col text-medium-paragraph text-[var(--color-content-default-secondary)] md:text-x-large-paragraph lg:text-small-paragraph xl:text-x-large-paragraph">
|
||||
<p>{column.description}</p>
|
||||
{column.descriptionSecondary ? (
|
||||
<p className="mt-[var(--spacing-scale-024)] md:mt-[var(--spacing-scale-032)] lg:mt-0 lg:pt-[var(--spacing-scale-020)] xl:mt-[var(--spacing-scale-032)]">
|
||||
<p className="mt-[var(--space-600)] md:mt-[var(--space-800)] lg:mt-0 lg:pt-[var(--space-500)] xl:mt-[var(--space-800)]">
|
||||
{column.descriptionSecondary}
|
||||
</p>
|
||||
) : null}
|
||||
@@ -136,13 +136,13 @@ function TripleTextBlockView({
|
||||
<section
|
||||
{...(isUseCases ? { "data-figma-node": "22085-860414" } : {})}
|
||||
aria-labelledby={hasSectionTitle ? headingId : undefined}
|
||||
className={`bg-black py-[var(--spacing-scale-064)] px-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-096)] xl:px-[var(--spacing-scale-160)] ${className}`.trim()}
|
||||
className={`bg-black py-[var(--space-1800)] px-[var(--space-800)] md:px-[var(--space-2400)] lg:px-[var(--space-2400)] xl:px-[var(--space-4000)] ${className}`.trim()}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
isUseCases
|
||||
? "mx-auto flex w-full flex-col items-start gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-048)] lg:items-center lg:gap-[var(--spacing-scale-064)]"
|
||||
: "mx-auto flex w-full flex-col items-start gap-[var(--spacing-scale-032)]"
|
||||
? "mx-auto flex w-full flex-col items-start gap-[var(--space-800)] md:gap-[var(--space-1200)] lg:items-center lg:gap-[var(--space-1800)]"
|
||||
: "mx-auto flex w-full flex-col items-start gap-[var(--space-800)]"
|
||||
}
|
||||
>
|
||||
{hasSectionTitle ? (
|
||||
@@ -160,8 +160,8 @@ function TripleTextBlockView({
|
||||
<div
|
||||
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-048)] lg:flex-row lg:items-start lg:gap-[var(--spacing-scale-032)]"
|
||||
? "flex w-full flex-col gap-[var(--space-1200)] lg:flex-row lg:items-start lg:gap-[var(--space-800)]"
|
||||
: "flex w-full flex-col gap-[var(--space-1200)] lg:flex-row lg:items-start lg:gap-[var(--space-800)]"
|
||||
}
|
||||
>
|
||||
{columns.map((column, index) => (
|
||||
|
||||
Reference in new issue
Block a user