Skip to content

Commit 269a143

Browse files
New1DirectionNew1Direction
committed
feat(website): asymmetric editorial hero + de-carded steps
Two structural fixes from the taste audit. - Hero → asymmetric split: left-aligned eyebrow / headline / sub / CTAs, the mascot port as a larger focal asset on the right (the audit's "text left, asset right" paradigm; centered heroes are flagged above its variance dial). Stacks to a single column (mascot first) under 880px. Dropped the now-dead .hero-lens CSS. - How-it-works → an editorial numbered list with big gradient numerals and hairline dividers, replacing the 3-equal-card row the audit bans. ESLint + static export green (17 pages); no horizontal overflow at 360px.
1 parent b30771b commit 269a143

3 files changed

Lines changed: 114 additions & 80 deletions

File tree

‎website/app/(home)/styles/home.css‎

Lines changed: 80 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,53 +2,43 @@
22
Homepage sections. All selectors live under the marketing surface.
33
════════════════════════════════════════════════════════════════════════ */
44

5-
/* ── Hero ────────────────────────────────────────────────────────────── */
5+
/* ── Hero (asymmetric editorial split: copy left, mascot right) ───────── */
66
.site-root .hero {
7-
padding: clamp(56px, 5vw + 30px, 104px) 0 8px;
7+
padding: clamp(40px, 4vw + 24px, 84px) 0 16px;
88
}
9-
.hero-inner {
10-
text-align: center;
11-
display: flex;
12-
flex-direction: column;
9+
.hero-grid {
10+
display: grid;
11+
grid-template-columns: 1.08fr 0.92fr;
12+
gap: clamp(28px, 4vw, 60px);
1313
align-items: center;
14+
min-height: min(74vh, 660px);
1415
}
15-
.hero-lens {
16-
margin: 26px 0 6px;
16+
.hero-copy {
1717
display: flex;
1818
flex-direction: column;
19-
align-items: center;
20-
gap: 14px;
19+
align-items: flex-start;
2120
}
22-
.hero-lens-stage {
23-
width: 116px;
24-
height: 116px;
25-
display: grid;
26-
place-items: center;
27-
border-radius: 28px;
28-
color: var(--text-strong);
29-
background: radial-gradient(120% 120% at 50% 0%, var(--surface-2), var(--surface));
30-
border: 1px solid var(--border-2);
31-
box-shadow: 0 24px 70px -26px var(--accent-glow);
21+
.hero-aside {
22+
display: flex;
23+
justify-content: center;
3224
}
3325

34-
/* Video mascot — framed "viewport" so the clip's neutral backdrop reads as an
35-
intentional lens-port in both themes. */
26+
/* Video mascot — framed "viewport", now a real focal asset on the right. */
3627
.hero-mascot {
37-
margin: 24px 0 6px;
3828
display: flex;
3929
flex-direction: column;
4030
align-items: center;
4131
gap: 16px;
4232
}
4333
.hero-mascot-stage {
4434
position: relative;
45-
width: clamp(168px, 38vw, 236px);
35+
width: clamp(224px, 30vw, 324px);
4636
aspect-ratio: 460 / 539;
47-
border-radius: 28px;
37+
border-radius: 30px;
4838
overflow: hidden;
4939
background: #c2c3c8;
5040
border: 1px solid var(--border-2);
51-
box-shadow: 0 34px 80px -32px var(--accent-glow), var(--shadow-md);
41+
box-shadow: 0 40px 90px -34px var(--accent-glow), var(--shadow-md);
5242
}
5343
.hero-mascot-stage img,
5444
.hero-mascot-stage video {
@@ -72,26 +62,28 @@
7262
color: var(--muted);
7363
font-style: italic;
7464
min-height: 1.3em;
75-
max-width: 42ch;
65+
max-width: 34ch;
66+
text-align: center;
7667
}
7768
.hero-title {
78-
font-size: clamp(2.6rem, 1.1rem + 6vw, 5.4rem);
69+
font-size: clamp(2.5rem, 1rem + 5vw, 4.6rem);
7970
font-weight: 800;
8071
letter-spacing: -0.042em;
8172
line-height: 0.98;
8273
color: var(--text-strong);
83-
margin: 8px 0 0;
74+
margin: 18px 0 0;
75+
text-align: left;
8476
}
8577
.hero-sub {
86-
max-width: 60ch;
87-
margin: 22px auto 0;
88-
font-size: clamp(1.02rem, 0.92rem + 0.5vw, 1.28rem);
78+
max-width: 52ch;
79+
margin: 22px 0 0;
80+
font-size: clamp(1.02rem, 0.92rem + 0.4vw, 1.22rem);
8981
color: var(--sub);
9082
}
9183
.hero-cta {
9284
display: flex;
9385
gap: 13px;
94-
justify-content: center;
86+
justify-content: flex-start;
9587
flex-wrap: wrap;
9688
margin-top: 30px;
9789
}
@@ -100,7 +92,36 @@
10092
font: 600 12px/1.6 var(--mono);
10193
letter-spacing: 0.04em;
10294
color: var(--faint);
103-
max-width: 56ch;
95+
max-width: 52ch;
96+
}
97+
@media (max-width: 880px) {
98+
.hero-grid {
99+
grid-template-columns: 1fr;
100+
gap: 6px;
101+
min-height: 0;
102+
}
103+
.hero-copy {
104+
align-items: center;
105+
}
106+
.hero-aside {
107+
order: -1;
108+
}
109+
.hero-title,
110+
.hero-sub,
111+
.hero-cta {
112+
text-align: center;
113+
}
114+
.hero-cta {
115+
justify-content: center;
116+
}
117+
.hero-sub,
118+
.hero-foot {
119+
margin-left: auto;
120+
margin-right: auto;
121+
}
122+
.hero-mascot-stage {
123+
width: clamp(190px, 52vw, 240px);
124+
}
104125
}
105126

106127
/* ── Verdict demo ────────────────────────────────────────────────────── */
@@ -368,34 +389,43 @@
368389
padding: 5px 8px;
369390
}
370391

371-
/* ── How it works ────────────────────────────────────────────────────── */
392+
/* ── How it works (editorial numbered list, hairline dividers) ───────── */
372393
.steps {
373-
margin: 32px 0 0;
394+
margin: 34px 0 0;
374395
padding: 0;
375396
list-style: none;
376-
display: grid;
377-
grid-template-columns: repeat(3, 1fr);
378-
gap: 16px;
397+
display: flex;
398+
flex-direction: column;
379399
}
380400
.step {
381-
padding: 26px 22px;
382-
border-radius: 16px;
383-
background: var(--bg-2);
384-
border: 1px solid var(--border);
401+
display: grid;
402+
grid-template-columns: auto 1fr;
403+
gap: clamp(20px, 3vw, 44px);
404+
align-items: start;
405+
padding: clamp(22px, 3vw, 32px) 0;
406+
border-top: 1px solid var(--border);
407+
}
408+
.step:first-child {
409+
border-top: none;
385410
}
386411
.step-n {
387-
font: 800 1.7rem/1 var(--sans);
388-
letter-spacing: -0.02em;
412+
font-weight: 800;
413+
font-size: clamp(2rem, 1rem + 3vw, 3.4rem);
414+
line-height: 1;
415+
letter-spacing: -0.03em;
416+
min-width: 2.2ch;
389417
}
390-
.step h3 {
391-
margin: 14px 0 8px;
392-
font-size: 1.16rem;
418+
.step-body h3 {
419+
margin: 6px 0 8px;
420+
font-size: clamp(1.18rem, 1rem + 0.6vw, 1.5rem);
393421
font-weight: 700;
422+
letter-spacing: -0.01em;
394423
color: var(--text-strong);
395424
}
396-
.step p {
397-
font-size: 0.92rem;
425+
.step-body p {
426+
font-size: 1rem;
398427
color: var(--sub);
428+
max-width: 62ch;
399429
}
400430

401431
/* ── Models & privacy ────────────────────────────────────────────────── */
@@ -545,9 +575,6 @@
545575
grid-template-columns: 1fr;
546576
gap: 30px;
547577
}
548-
.steps {
549-
grid-template-columns: 1fr;
550-
}
551578
}
552579
@media (max-width: 560px) {
553580
.bento {

‎website/components/home/Hero.tsx‎

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,42 @@ import { GITHUB_URL } from '@/components/site/SiteHeader';
55
export function Hero() {
66
return (
77
<section className="hero" aria-labelledby="hero-heading">
8-
<div className="container hero-inner">
9-
<span className="kicker">
10-
<span className="pulse" /> Chrome Extension · Manifest V3 · v3.0
11-
</span>
8+
<div className="container hero-grid">
9+
<div className="hero-copy">
10+
<span className="kicker">
11+
<span className="pulse" /> Chrome Extension · Manifest V3 · v3.0
12+
</span>
1213

13-
<HeroMascot />
14+
<h1 id="hero-heading" className="hero-title">
15+
Read code before
16+
<br />
17+
you <span className="grad-text">trust it.</span>
18+
</h1>
1419

15-
<h1 id="hero-heading" className="hero-title">
16-
Read code before
17-
<br />
18-
you <span className="grad-text">trust it.</span>
19-
</h1>
20+
<p className="hero-sub">
21+
One click turns any GitHub, GitLab, npm, or PyPI page into a plain-English,
22+
verdict-first briefing — what it is, whether it fits, and how it’s actually built.
23+
Not the README’s pitch. The real shape of the thing.
24+
</p>
2025

21-
<p className="hero-sub">
22-
One click turns any GitHub, GitLab, npm, or PyPI page into a plain-English,
23-
verdict-first briefing — what it is, whether it fits, and how it’s actually built.
24-
Not the README’s pitch. The real shape of the thing.
25-
</p>
26+
<div className="hero-cta">
27+
<Link href="/docs/getting-started" className="btn btn-primary">
28+
Install RepoLens
29+
</Link>
30+
<a href={GITHUB_URL} target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
31+
View on GitHub →
32+
</a>
33+
</div>
2634

27-
<div className="hero-cta">
28-
<Link href="/docs/getting-started" className="btn btn-primary">
29-
Install RepoLens
30-
</Link>
31-
<a href={GITHUB_URL} target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
32-
View on GitHub →
33-
</a>
35+
<p className="hero-foot">
36+
Bring your own model · 20+ providers · no server, no account, nothing leaves your
37+
browser
38+
</p>
3439
</div>
3540

36-
<p className="hero-foot">
37-
Bring your own model · 20+ providers · no server, no account, nothing leaves your browser
38-
</p>
41+
<div className="hero-aside">
42+
<HeroMascot />
43+
</div>
3944
</div>
4045
</section>
4146
);

‎website/components/home/HowItWorks.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,10 @@ export function HowItWorks() {
2929
{STEPS.map((s) => (
3030
<li key={s.n} className="step">
3131
<span className="step-n grad-text">{s.n}</span>
32-
<h3>{s.title}</h3>
33-
<p>{s.body}</p>
32+
<div className="step-body">
33+
<h3>{s.title}</h3>
34+
<p>{s.body}</p>
35+
</div>
3436
</li>
3537
))}
3638
</ol>

0 commit comments

Comments
 (0)