Skip to content

Commit e84fcb3

Browse files
cadamsdotcomclaude
cadamsdotcom
and
claude
committed
Redesign home page feature cards and stack section
- Expand feature cards from 3-column grid to full-width alternating panels with richer descriptions, numbered labels, and color accents (red/blue/green) - Make each feature card a clickable link to its docs page with hover effects and "Learn more" call-to-action - Fix card contrast issue: use opaque background-color + background-image layering instead of transparent backgrounds that showed the dark grid parent - Rename "TDD Guard" to "Enforcement of Test-Driven Development" and "10ms Timeout" to "Strict Timeouts" - Split stack section into categorized rows (Database, Auth, Backend, Frontend, Testing, Observability) with color-coded tags for Language/Framework/Platform and a legend Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 9bc8321 commit e84fcb3

2 files changed

Lines changed: 799 additions & 271 deletions

File tree

‎docs-site/src/pages/index.module.css‎

Lines changed: 289 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -194,15 +194,180 @@
194194

195195
.featuresGrid {
196196
display: grid;
197-
grid-template-columns: repeat(3, 1fr);
197+
grid-template-columns: 1fr;
198198
gap: 1px;
199199
background: var(--brand-black);
200200
border: 1px solid var(--brand-black);
201201
}
202202

203+
.featureCardLink {
204+
text-decoration: none;
205+
color: inherit;
206+
display: block;
207+
}
208+
209+
.featureCardLink:hover {
210+
text-decoration: none;
211+
color: inherit;
212+
}
213+
203214
.featureCard {
204215
background: var(--grey-bg);
205-
padding: 2.5rem 2rem;
216+
padding: 3rem 3rem;
217+
display: grid;
218+
grid-template-columns: 1fr 1.5fr;
219+
gap: 0 4rem;
220+
align-items: center;
221+
border-left: 4px solid transparent;
222+
transition: background 0.2s ease;
223+
}
224+
225+
.featureCardRed {
226+
border-left-color: var(--brand-red);
227+
background-color: var(--grey-bg);
228+
background-image: linear-gradient(
229+
rgb(239 68 68 / 0.06),
230+
rgb(239 68 68 / 0.06)
231+
);
232+
}
233+
234+
.featureCardLink:hover .featureCardRed {
235+
background-image: linear-gradient(
236+
rgb(239 68 68 / 0.12),
237+
rgb(239 68 68 / 0.12)
238+
);
239+
}
240+
241+
.featureCardBlue {
242+
border-left-color: var(--brand-blue);
243+
background-color: var(--grey-bg);
244+
background-image: linear-gradient(
245+
rgb(59 130 246 / 0.06),
246+
rgb(59 130 246 / 0.06)
247+
);
248+
}
249+
250+
.featureCardLink:hover .featureCardBlue {
251+
background-image: linear-gradient(
252+
rgb(59 130 246 / 0.12),
253+
rgb(59 130 246 / 0.12)
254+
);
255+
}
256+
257+
.featureCardGreen {
258+
border-left-color: var(--brand-green);
259+
background-color: var(--grey-bg);
260+
background-image: linear-gradient(
261+
rgb(34 197 94 / 0.06),
262+
rgb(34 197 94 / 0.06)
263+
);
264+
}
265+
266+
.featureCardLink:hover .featureCardGreen {
267+
background-image: linear-gradient(
268+
rgb(34 197 94 / 0.12),
269+
rgb(34 197 94 / 0.12)
270+
);
271+
}
272+
273+
.featureLearnMore {
274+
display: inline-flex;
275+
align-items: center;
276+
gap: 0.5rem;
277+
margin-top: 1.25rem;
278+
font-size: 0.75rem;
279+
text-transform: uppercase;
280+
letter-spacing: 0.08em;
281+
color: var(--grey-mid);
282+
transition: color 0.2s ease;
283+
align-self: flex-start;
284+
}
285+
286+
.featureLearnMoreArrow {
287+
transition: transform 0.2s ease;
288+
display: inline-block;
289+
}
290+
291+
.featureCardLink:hover .featureLearnMore {
292+
color: var(--grey-dark);
293+
}
294+
295+
.featureCardLink:hover .featureLearnMoreArrow {
296+
transform: translateX(4px);
297+
}
298+
299+
.featureCardLink:hover .featureLearnMoreRed {
300+
color: var(--brand-red);
301+
}
302+
303+
.featureCardLink:hover .featureLearnMoreBlue {
304+
color: var(--brand-blue);
305+
}
306+
307+
.featureCardLink:hover .featureLearnMoreGreen {
308+
color: var(--brand-green);
309+
}
310+
311+
.featureCardReversed {
312+
direction: rtl;
313+
border-left: none;
314+
border-right: 4px solid transparent;
315+
}
316+
317+
.featureCardReversed.featureCardRed {
318+
border-right-color: var(--brand-red);
319+
background-color: var(--grey-bg);
320+
background-image: linear-gradient(
321+
rgb(239 68 68 / 0.06),
322+
rgb(239 68 68 / 0.06)
323+
);
324+
}
325+
326+
.featureCardReversed.featureCardBlue {
327+
border-right-color: var(--brand-blue);
328+
background-color: var(--grey-bg);
329+
background-image: linear-gradient(
330+
rgb(59 130 246 / 0.06),
331+
rgb(59 130 246 / 0.06)
332+
);
333+
}
334+
335+
.featureCardReversed.featureCardGreen {
336+
border-right-color: var(--brand-green);
337+
background-color: var(--grey-bg);
338+
background-image: linear-gradient(
339+
rgb(34 197 94 / 0.06),
340+
rgb(34 197 94 / 0.06)
341+
);
342+
}
343+
344+
.featureCardReversed > * {
345+
direction: ltr;
346+
}
347+
348+
.featureLeft {
349+
display: flex;
350+
flex-direction: column;
351+
}
352+
353+
.featureNumber {
354+
font-family: 'Instrument Serif', Georgia, serif;
355+
font-size: 4rem;
356+
line-height: 1;
357+
letter-spacing: -0.02em;
358+
margin-bottom: 1rem;
359+
}
360+
361+
.featureNumberRed {
362+
color: rgb(239 68 68 / 0.3);
363+
}
364+
365+
.featureNumberBlue {
366+
color: rgb(59 130 246 / 0.3);
367+
}
368+
369+
.featureNumberGreen {
370+
color: rgb(34 197 94 / 0.3);
206371
}
207372

208373
.featureIcon {
@@ -216,27 +381,28 @@
216381

217382
.featureCardTitle {
218383
font-family: 'Instrument Serif', Georgia, serif;
219-
font-size: 1.5rem;
384+
font-size: 1.75rem;
220385
font-weight: 400;
221386
margin-bottom: 0.75rem;
222387
letter-spacing: -0.01em;
388+
line-height: 1.2;
389+
}
390+
391+
.featureRight {
392+
display: flex;
393+
flex-direction: column;
394+
justify-content: center;
223395
}
224396

225397
.featureCardDesc {
226-
font-size: 0.82rem;
398+
font-size: 0.85rem;
227399
color: var(--grey-dark);
228-
line-height: 1.65;
400+
line-height: 1.75;
401+
margin-bottom: 0.75rem;
229402
}
230403

231-
.featureTag {
232-
display: inline-block;
233-
font-size: 0.65rem;
234-
text-transform: uppercase;
235-
letter-spacing: 0.1em;
236-
color: var(--grey-mid);
237-
margin-top: 1rem;
238-
padding: 0.25rem 0.5rem;
239-
border: 1px solid var(--grey-light);
404+
.featureCardDesc:last-of-type {
405+
margin-bottom: 0;
240406
}
241407

242408
/* ---- QUICKSTART ---- */
@@ -298,27 +464,98 @@
298464
border-top: 1px solid var(--brand-black);
299465
}
300466

301-
.stackFlex {
467+
.stackRows {
468+
display: grid;
469+
grid-template-columns: 1fr;
470+
gap: 1px;
471+
background: var(--brand-black);
472+
border: 1px solid var(--brand-black);
473+
}
474+
475+
.stackRow {
476+
display: grid;
477+
grid-template-columns: 200px 1fr;
478+
background: var(--grey-bg);
479+
align-items: center;
480+
}
481+
482+
.stackRowLabel {
483+
font-size: 0.7rem;
484+
text-transform: uppercase;
485+
letter-spacing: 0.1em;
486+
color: var(--grey-mid);
487+
padding: 1rem 1.25rem;
488+
border-right: 1px solid var(--brand-black);
489+
}
490+
491+
.stackRowTags {
302492
display: flex;
303493
flex-wrap: wrap;
304494
gap: 0.5rem;
495+
padding: 1rem 1.25rem;
305496
}
306497

307498
.stackTag {
308499
font-size: 0.75rem;
309500
text-transform: uppercase;
310501
letter-spacing: 0.08em;
311-
padding: 0.5rem 1.25rem;
502+
padding: 0.4rem 1rem;
312503
border: 1px solid var(--grey-light);
313504
color: var(--grey-dark);
314505
background: white;
315506
}
316507

317-
.stackTagHighlight {
508+
.stackTagLanguage {
318509
border-color: var(--brand-blue);
319510
color: var(--brand-blue);
320511
}
321512

513+
.stackTagFramework {
514+
border-color: var(--brand-green);
515+
color: var(--brand-green);
516+
}
517+
518+
.stackTagPlatform {
519+
border-color: var(--brand-red);
520+
color: var(--brand-red);
521+
}
522+
523+
/* ---- STACK LEGEND ---- */
524+
.stackLegend {
525+
display: flex;
526+
gap: 2rem;
527+
margin-top: 1.25rem;
528+
justify-content: flex-end;
529+
}
530+
531+
.stackLegendItem {
532+
display: flex;
533+
align-items: center;
534+
gap: 0.5rem;
535+
font-size: 0.7rem;
536+
text-transform: uppercase;
537+
letter-spacing: 0.08em;
538+
color: var(--grey-mid);
539+
}
540+
541+
.stackLegendSwatch {
542+
width: 12px;
543+
height: 12px;
544+
border: 2px solid currentColor;
545+
}
546+
547+
.stackLegendLanguage {
548+
color: var(--brand-blue);
549+
}
550+
551+
.stackLegendFramework {
552+
color: var(--brand-green);
553+
}
554+
555+
.stackLegendPlatform {
556+
color: var(--brand-red);
557+
}
558+
322559
/* ---- PHILOSOPHY ---- */
323560
.philosophy {
324561
padding: 5rem 0;
@@ -382,8 +619,42 @@
382619
font-size: 2.5rem;
383620
}
384621

385-
.featuresGrid {
622+
.featureCard {
386623
grid-template-columns: 1fr;
624+
gap: 1.5rem;
625+
padding: 2.5rem 2rem;
626+
}
627+
628+
.stackRow {
629+
grid-template-columns: 1fr;
630+
}
631+
632+
.stackRowLabel {
633+
border-right: none;
634+
border-bottom: 1px solid var(--brand-black);
635+
padding: 0.75rem 1.25rem;
636+
}
637+
638+
.featureCardReversed {
639+
direction: ltr;
640+
border-right: none;
641+
border-left: 4px solid transparent;
642+
}
643+
644+
.featureCardReversed.featureCardRed {
645+
border-left-color: var(--brand-red);
646+
}
647+
648+
.featureCardReversed.featureCardBlue {
649+
border-left-color: var(--brand-blue);
650+
}
651+
652+
.featureCardReversed.featureCardGreen {
653+
border-left-color: var(--brand-green);
654+
}
655+
656+
.featureNumber {
657+
font-size: 3rem;
387658
}
388659

389660
.hero {
@@ -411,9 +682,3 @@
411682
justify-content: flex-start;
412683
}
413684
}
414-
415-
@media (min-width: 901px) and (max-width: 1100px) {
416-
.featuresGrid {
417-
grid-template-columns: repeat(2, 1fr);
418-
}
419-
}

0 commit comments

Comments
 (0)