Skip to content

Commit 47ce5a8

Browse files
Patel230Patel230
committed
design: YC-startup polish — feature pills, stats strip, section spacing
- Add hero feature pills (Autonomous · Open source · MIT · Every 12h · Go) - Add stats strip after hero with days/sessions/phases/license numbers - Fix section-head margin (3rem → 1.25rem — eyebrow sits tight above h2) - Refine how-step num opacity and step title sizing - Mobile: stats strip wraps 2×2, dividers hidden on small screens
1 parent b823406 commit 47ce5a8

3 files changed

Lines changed: 146 additions & 18 deletions

File tree

‎docs/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,13 @@ <h1>A coding agent that<br><span class="hl">improves itself</span></h1>
5555
<a href="https://github.com/GrayCodeAI/iterate" class="btn btn-lime" target="_blank" rel="noopener">View on GitHub</a>
5656
<a href="#quickstart" class="btn btn-outline">Quickstart →</a>
5757
</div>
58+
<div class="hero-pills">
59+
<span class="hero-pill">Autonomous</span>
60+
<span class="hero-pill">Open source</span>
61+
<span class="hero-pill">MIT License</span>
62+
<span class="hero-pill">Every 12 hours</span>
63+
<span class="hero-pill">Go</span>
64+
</div>
5865
</div>
5966
<div class="hero-card">
6067
<div class="card-label">current day</div>
@@ -79,6 +86,28 @@ <h1>A coding agent that<br><span class="hl">improves itself</span></h1>
7986
</div>
8087
</header>
8188

89+
<div class="stats-strip">
90+
<div class="stat-item">
91+
<div class="stat-num">0</div>
92+
<div class="stat-label">days running</div>
93+
</div>
94+
<div class="stat-divider"></div>
95+
<div class="stat-item">
96+
<div class="stat-num">0</div>
97+
<div class="stat-label">sessions shipped</div>
98+
</div>
99+
<div class="stat-divider"></div>
100+
<div class="stat-item">
101+
<div class="stat-num">6</div>
102+
<div class="stat-label">phase loop</div>
103+
</div>
104+
<div class="stat-divider"></div>
105+
<div class="stat-item">
106+
<div class="stat-num">MIT</div>
107+
<div class="stat-label">open source</div>
108+
</div>
109+
</div>
110+
82111
<section id="journal">
83112
<div class="section-head">
84113
<span class="section-label">journal</span>

‎docs/style.css‎

Lines changed: 88 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ nav {
165165
/* ── hero ── */
166166

167167
.hero {
168-
padding: 7rem 0 6rem;
168+
padding: 9rem 0 7rem;
169169
position: relative;
170170
overflow: hidden;
171171
}
@@ -248,11 +248,11 @@ nav {
248248
}
249249

250250
.hero h1 {
251-
font-size: clamp(2.6rem, 5.5vw, 4.2rem);
251+
font-size: clamp(3rem, 6vw, 5rem);
252252
font-weight: 800;
253253
color: var(--bright);
254-
line-height: 1.08;
255-
letter-spacing: -0.04em;
254+
line-height: 1.06;
255+
letter-spacing: -0.045em;
256256
margin-bottom: 1.5rem;
257257
}
258258

@@ -262,11 +262,11 @@ nav {
262262
}
263263

264264
.hero-sub {
265-
font-size: 1.05rem;
265+
font-size: 1.1rem;
266266
color: var(--slate-400);
267267
line-height: 1.75;
268-
max-width: 500px;
269-
margin-bottom: 2.5rem;
268+
max-width: 520px;
269+
margin-bottom: 2rem;
270270
font-weight: 400;
271271
}
272272

@@ -276,13 +276,36 @@ nav {
276276
flex-wrap: wrap;
277277
}
278278

279+
.hero-pills {
280+
display: flex;
281+
flex-wrap: wrap;
282+
gap: 0.5rem;
283+
margin-top: 1.75rem;
284+
}
285+
286+
.hero-pill {
287+
font-size: 0.72rem;
288+
font-weight: 500;
289+
color: var(--slate-500);
290+
background: rgba(255,255,255,0.03);
291+
border: 1px solid var(--border);
292+
border-radius: 999px;
293+
padding: 0.28rem 0.9rem;
294+
letter-spacing: 0.01em;
295+
transition: border-color 0.15s, color 0.15s;
296+
}
297+
.hero-pill:hover {
298+
border-color: var(--border2);
299+
color: var(--slate-400);
300+
}
301+
279302
.btn {
280303
display: inline-flex;
281304
align-items: center;
282305
gap: 0.45rem;
283-
font-size: 0.85rem;
306+
font-size: 0.9rem;
284307
font-weight: 600;
285-
padding: 0.65rem 1.3rem;
308+
padding: 0.75rem 1.6rem;
286309
border-radius: var(--radius);
287310
transition: all 0.18s;
288311
cursor: pointer;
@@ -404,6 +427,47 @@ nav {
404427
margin-top: 0.3rem;
405428
}
406429

430+
/* ── stats strip ── */
431+
432+
.stats-strip {
433+
display: flex;
434+
align-items: center;
435+
border-top: 1px solid var(--border);
436+
border-bottom: 1px solid var(--border);
437+
padding: 2.5rem 0;
438+
}
439+
440+
.stat-item {
441+
flex: 1;
442+
text-align: center;
443+
padding: 0 1.5rem;
444+
}
445+
446+
.stat-num {
447+
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
448+
font-weight: 800;
449+
color: var(--bright);
450+
font-family: var(--mono);
451+
letter-spacing: -0.04em;
452+
line-height: 1;
453+
}
454+
455+
.stat-label {
456+
font-size: 0.68rem;
457+
color: var(--dim);
458+
text-transform: uppercase;
459+
letter-spacing: 0.12em;
460+
margin-top: 0.45rem;
461+
font-family: var(--mono);
462+
}
463+
464+
.stat-divider {
465+
width: 1px;
466+
height: 36px;
467+
background: var(--border);
468+
flex-shrink: 0;
469+
}
470+
407471
/* ── how it works ── */
408472

409473
.how-grid {
@@ -434,11 +498,12 @@ nav {
434498

435499
.step-num {
436500
font-family: var(--mono);
437-
font-size: 0.65rem;
501+
font-size: 0.6rem;
438502
font-weight: 700;
439503
color: var(--step-color, var(--lime));
440-
letter-spacing: 0.1em;
441-
margin-bottom: 1.25rem;
504+
letter-spacing: 0.14em;
505+
margin-bottom: 1rem;
506+
opacity: 0.7;
442507
}
443508

444509
.step-icon {
@@ -449,10 +514,10 @@ nav {
449514
}
450515

451516
.step-title {
452-
font-size: 0.95rem;
517+
font-size: 1rem;
453518
font-weight: 700;
454519
color: var(--bright);
455-
letter-spacing: -0.02em;
520+
letter-spacing: -0.025em;
456521
margin-bottom: 0.5rem;
457522
}
458523

@@ -535,12 +600,12 @@ nav {
535600
/* ── section headings ── */
536601

537602
.sec-h2 {
538-
font-size: clamp(1.8rem, 3vw, 2.4rem);
603+
font-size: clamp(2rem, 3.5vw, 3rem);
539604
font-weight: 800;
540605
color: var(--bright);
541606
letter-spacing: -0.04em;
542607
margin-bottom: 0.75rem;
543-
line-height: 1.15;
608+
line-height: 1.1;
544609
}
545610

546611
.sec-sub {
@@ -553,13 +618,13 @@ nav {
553618

554619
/* ── section ── */
555620

556-
section { padding: 6rem 0; }
621+
section { padding: 8rem 0; }
557622

558623
.section-head {
559624
display: flex;
560625
align-items: center;
561626
gap: 1rem;
562-
margin-bottom: 3rem;
627+
margin-bottom: 1.25rem;
563628
}
564629

565630
.section-label {
@@ -1065,12 +1130,17 @@ footer {
10651130
.bento-cell.wide { grid-column: span 2; }
10661131
.identity-grid { grid-template-columns: 1fr; }
10671132
.id-card.span2 { grid-column: 1; }
1133+
.stats-strip { gap: 0; }
1134+
.stat-item { padding: 0 1rem; }
10681135
}
10691136

10701137
@media (max-width: 600px) {
10711138
.page-wrap, .nav-inner, .footer-inner { padding: 0 1.25rem; }
10721139
.hero { padding: 4.5rem 0 4rem; }
10731140
.hero h1 { font-size: 2.4rem; }
1141+
.stats-strip { flex-wrap: wrap; gap: 0; padding: 1.75rem 0; }
1142+
.stat-item { flex: 0 0 50%; padding: 1rem 1.25rem; }
1143+
.stat-divider { display: none; }
10741144
.how-grid { grid-template-columns: 1fr; }
10751145
.bento { grid-template-columns: 1fr; }
10761146
.bento-cell.wide { grid-column: 1; }

‎scripts/build/build_site.py‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -372,6 +372,13 @@ def main():
372372
<a href="https://github.com/{gh}" class="btn btn-lime" target="_blank" rel="noopener">View on GitHub</a>
373373
<a href="#quickstart" class="btn btn-outline">Quickstart →</a>
374374
</div>
375+
<div class="hero-pills">
376+
<span class="hero-pill">Autonomous</span>
377+
<span class="hero-pill">Open source</span>
378+
<span class="hero-pill">MIT License</span>
379+
<span class="hero-pill">Every 12 hours</span>
380+
<span class="hero-pill">Go</span>
381+
</div>
375382
</div>
376383
<div class="hero-card">
377384
<div class="card-label">current day</div>
@@ -396,6 +403,28 @@ def main():
396403
</div>
397404
</header>
398405
406+
<div class="stats-strip">
407+
<div class="stat-item">
408+
<div class="stat-num">{days}</div>
409+
<div class="stat-label">days running</div>
410+
</div>
411+
<div class="stat-divider"></div>
412+
<div class="stat-item">
413+
<div class="stat-num">{sessions}</div>
414+
<div class="stat-label">sessions shipped</div>
415+
</div>
416+
<div class="stat-divider"></div>
417+
<div class="stat-item">
418+
<div class="stat-num">6</div>
419+
<div class="stat-label">phase loop</div>
420+
</div>
421+
<div class="stat-divider"></div>
422+
<div class="stat-item">
423+
<div class="stat-num">MIT</div>
424+
<div class="stat-label">open source</div>
425+
</div>
426+
</div>
427+
399428
{journal_section}
400429
401430
<section id="how">

0 commit comments

Comments
 (0)