Illusion/sharper.ly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: less spacing in home hero

Browse Source
This commit is contained in:
Illusion
2026-09-23 22:57:46 +02:00
parent 93b2fcb2ae
commit e930318f14
2 changed files with 83 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/routes/_page-kit/sections.tsx
+83 -81
View File
@@ -442,60 +442,93 @@ export function PageHero({
) : null} ) : null}
<Container className="flex flex-col gap-2xl"> <Container className="flex flex-col gap-2xl">
{funderBadge || wordmark ? ( <div className="flex flex-col gap-lg">
/* Figma groups the two (478:16183): the badge, then 24px, then the {funderBadge || wordmark ? (
lockup. The group as a whole keeps the 48px the Container's gap /* Figma groups the two (478:16183): the badge, then 24px, then the
already provides above the headline row. */ lockup. The group as a whole keeps the 48px the Container's gap
<div className={cx("flex flex-col gap-lg", rise())}> already provides above the headline row. */
{funderBadge} <div className={cx("flex flex-col gap-lg", rise())}>
{funderBadge}
{wordmark ? <HeroWordmark wordmark={wordmark} /> : null} {wordmark ? <HeroWordmark wordmark={wordmark} /> : null}
</div> </div>
) : null} ) : null}
{statusPill ? <div className={rise(2)}>{statusPill}</div> : null} {statusPill ? <div className={rise(2)}>{statusPill}</div> : null}
{leadWithActions ? ( {leadWithActions ? (
<> <>
{/* Headline across the top ... */} {/* Headline across the top ... */}
<div className="flex max-w-[43.75rem] flex-col gap-sm"> <div className="flex max-w-[43.75rem] flex-col gap-sm">
{eyebrow ? ( {eyebrow ? (
<p <p
className={cx(
"label-md uppercase text-[var(--text-accent)]",
rise(3),
)}
>
{eyebrow}
</p>
) : null}
{/* The wipe is on the heading itself, not on the column, so the
eyebrow above it still arrives with the rest of the cascade
rather than being uncovered along with the words. */}
<h1
className={cx( className={cx(
"label-md uppercase text-[var(--text-accent)]", "heading-h1 text-[var(--text-primary)] md:display-sm",
rise(3), wipe(3),
)} )}
> >
{eyebrow} {title}
</p> </h1>
</div>
{/* ... then the lead and the buttons sharing a row, sitting on the
same baseline, as the home draft draws them. */}
{lead || actions ? (
<div
className={cx(
"flex flex-col gap-xl lg:flex-row lg:items-end lg:justify-between",
rise(4),
)}
>
{lead ? (
<p
className={cx(
"body-lg max-w-[40rem]",
leadTone === "primary"
? "text-[var(--text-primary)]"
: "text-[var(--text-secondary)]",
)}
>
{lead}
</p>
) : null}
{actions ? (
<div className="flex flex-wrap items-center gap-lg lg:justify-end">
{actions}
</div>
) : null}
</div>
) : null} ) : null}
</>
) : (
<div className="flex flex-col gap-lg lg:flex-row lg:items-end lg:justify-between">
<div className={cx("flex max-w-[46rem] flex-col gap-sm", rise(3))}>
{eyebrow ? (
<p className="label-md uppercase text-[var(--text-accent)]">{eyebrow}</p>
) : null}
{/* The wipe is on the heading itself, not on the column, so the <h1 className="heading-h1 text-[var(--text-primary)] md:display-sm">
eyebrow above it still arrives with the rest of the cascade {title}
rather than being uncovered along with the words. */} </h1>
<h1
className={cx(
"heading-h1 text-[var(--text-primary)] md:display-sm",
wipe(3),
)}
>
{title}
</h1>
</div>
{/* ... then the lead and the buttons sharing a row, sitting on the
same baseline, as the home draft draws them. */}
{lead || actions ? (
<div
className={cx(
"flex flex-col gap-xl lg:flex-row lg:items-end lg:justify-between",
rise(4),
)}
>
{lead ? ( {lead ? (
<p <p
className={cx( className={cx(
"body-lg max-w-[40rem]", "body-lg max-w-[var(--layout-prose-max)]",
leadTone === "primary" leadTone === "primary"
? "text-[var(--text-primary)]" ? "text-[var(--text-primary)]"
: "text-[var(--text-secondary)]", : "text-[var(--text-secondary)]",
@@ -504,52 +537,21 @@ export function PageHero({
{lead} {lead}
</p> </p>
) : null} ) : null}
{actions ? (
<div className="flex flex-wrap items-center gap-lg lg:justify-end">
{actions}
</div>
) : null}
</div> </div>
) : null}
</>
) : (
<div className="flex flex-col gap-lg lg:flex-row lg:items-end lg:justify-between">
<div className={cx("flex max-w-[46rem] flex-col gap-sm", rise(3))}>
{eyebrow ? (
<p className="label-md uppercase text-[var(--text-accent)]">{eyebrow}</p>
) : null}
<h1 className="heading-h1 text-[var(--text-primary)] md:display-sm"> {actions ? (
{title} <div
</h1>
{lead ? (
<p
className={cx( className={cx(
"body-lg max-w-[var(--layout-prose-max)]", "flex flex-wrap items-center gap-lg lg:justify-end",
leadTone === "primary" rise(4),
? "text-[var(--text-primary)]"
: "text-[var(--text-secondary)]",
)} )}
> >
{lead} {actions}
</p> </div>
) : null} ) : null}
</div> </div>
)}
{actions ? ( </div>
<div
className={cx(
"flex flex-wrap items-center gap-lg lg:justify-end",
rise(4),
)}
>
{actions}
</div>
) : null}
</div>
)}
{media ? ( {media ? (
mediaTreatment === "banner" ? ( mediaTreatment === "banner" ? (
apps/web/app/routes/home.tsx
-1
View File
@@ -84,7 +84,6 @@ import {
import { pageCopy } from "./_page-kit/copy"; import { pageCopy } from "./_page-kit/copy";
import { routeLocale } from "./_page-kit/locale"; import { routeLocale } from "./_page-kit/locale";
import { import {
Container,
cx, cx,
EmptyState, EmptyState,
PageHero, PageHero,