Skip to content

Commit 9501e64

Browse files
ofriwofriw
committed
Redesigned homepage
1 parent b6c3d91 commit 9501e64

10 files changed

Lines changed: 714 additions & 276 deletions

‎website/src/components/HomepageVisualPreview/index.module.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
.showcaseSection {
2+
padding: 4rem 0;
3+
background: var(--ifm-background-surface-color);
4+
}
5+
6+
.sectionTitle {
7+
text-align: center;
8+
font-size: 2rem;
9+
margin-bottom: 0.5rem;
10+
font-weight: 700;
11+
}
12+
13+
.sectionSubtitle {
14+
text-align: center;
15+
font-size: 1.1rem;
16+
color: var(--ifm-color-emphasis-600);
17+
margin-bottom: 3rem;
18+
}
19+
20+
.previewGrid {
21+
display: grid;
22+
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
23+
gap: 2rem;
24+
max-width: 1200px;
25+
margin: 0 auto;
26+
}
27+
28+
.previewTile {
29+
display: flex;
30+
flex-direction: column;
31+
background: var(--ifm-background-color);
32+
border: 2px solid var(--ifm-color-emphasis-200);
33+
border-radius: 12px;
34+
overflow: hidden;
35+
text-decoration: none;
36+
color: inherit;
37+
transition: all 0.3s ease;
38+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
39+
}
40+
41+
.previewTile:hover {
42+
border-color: var(--visual-workflow);
43+
transform: translateY(-4px);
44+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
45+
text-decoration: none;
46+
}
47+
48+
.previewTile:focus {
49+
outline: 3px solid var(--ifm-color-primary);
50+
outline-offset: 2px;
51+
}
52+
53+
.visualWrapper {
54+
flex: 1;
55+
padding: 1rem;
56+
background: var(--visual-bg-workflow);
57+
border-bottom: 1px solid var(--ifm-color-emphasis-200);
58+
min-height: 200px;
59+
display: flex;
60+
align-items: center;
61+
justify-content: center;
62+
overflow: hidden;
63+
}
64+
65+
/* Override component margins when embedded in tiles */
66+
.visualWrapper > * {
67+
max-width: 100%;
68+
margin: 0 !important;
69+
background: transparent !important;
70+
border: none !important;
71+
}
72+
73+
.tileContent {
74+
padding: 1.25rem;
75+
margin-top: auto;
76+
}
77+
78+
.lessonBadge {
79+
display: inline-block;
80+
font-size: 0.75rem;
81+
font-weight: 700;
82+
color: var(--visual-workflow);
83+
background: var(--visual-bg-workflow);
84+
padding: 0.2rem 0.6rem;
85+
border-radius: 4px;
86+
text-transform: uppercase;
87+
letter-spacing: 0.5px;
88+
margin-bottom: 0.5rem;
89+
}
90+
91+
.tileTitle {
92+
font-size: 1.2rem;
93+
margin: 0 0 0.5rem 0;
94+
font-weight: 700;
95+
}
96+
97+
.tileCaption {
98+
font-size: 0.9rem;
99+
color: var(--ifm-color-emphasis-700);
100+
line-height: 1.5;
101+
margin: 0;
102+
}
103+
104+
@media (max-width: 768px) {
105+
.showcaseSection {
106+
padding: 3rem 0;
107+
}
108+
109+
.previewGrid {
110+
grid-template-columns: 1fr;
111+
}
112+
113+
.sectionTitle {
114+
font-size: 1.75rem;
115+
}
116+
117+
.visualWrapper {
118+
min-height: 180px;
119+
}
120+
}

‎website/src/components/HomepageVisualPreview/index.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React from 'react';
2+
import Link from '@docusaurus/Link';
3+
import Heading from '@theme/Heading';
4+
import WorkflowCircle from '../VisualElements/WorkflowCircle';
5+
import CompoundQualityVisualization from '../VisualElements/CompoundQualityVisualization';
6+
import ThreeContextWorkflow from '../VisualElements/ThreeContextWorkflow';
7+
import styles from './index.module.css';
8+
9+
interface PreviewTileProps {
10+
title: string;
11+
caption: string;
12+
lessonLink: string;
13+
lessonNumber: number;
14+
children: React.ReactNode;
15+
}
16+
17+
function PreviewTile({
18+
title,
19+
caption,
20+
lessonLink,
21+
lessonNumber,
22+
children,
23+
}: PreviewTileProps) {
24+
return (
25+
<Link to={lessonLink} className={styles.previewTile}>
26+
<div className={styles.visualWrapper}>{children}</div>
27+
<div className={styles.tileContent}>
28+
<span className={styles.lessonBadge}>Lesson {lessonNumber}</span>
29+
<Heading as="h3" className={styles.tileTitle}>
30+
{title}
31+
</Heading>
32+
<p className={styles.tileCaption}>{caption}</p>
33+
</div>
34+
</Link>
35+
);
36+
}
37+
38+
export default function CourseVisualsShowcase() {
39+
return (
40+
<section className={styles.showcaseSection}>
41+
<div className="container">
42+
<Heading as="h2" className={styles.sectionTitle}>
43+
Interactive Course Content
44+
</Heading>
45+
<p className={styles.sectionSubtitle}>
46+
Diagrams and visualizations from the lessons
47+
</p>
48+
49+
<div className={styles.previewGrid}>
50+
<PreviewTile
51+
title="Iterative AI Workflows"
52+
caption="Research, Plan, Execute, Validate - systematic AI-assisted development"
53+
lessonLink="/docs/methodology/lesson-3-high-level-methodology"
54+
lessonNumber={3}
55+
>
56+
<WorkflowCircle compact />
57+
</PreviewTile>
58+
59+
<PreviewTile
60+
title="Context Isolation"
61+
caption="Separate contexts prevent bias between code, tests, and triage"
62+
lessonLink="/docs/practical-techniques/lesson-8-tests-as-guardrails"
63+
lessonNumber={8}
64+
>
65+
<ThreeContextWorkflow compact vertical />
66+
</PreviewTile>
67+
68+
<PreviewTile
69+
title="Code Pattern Compounding"
70+
caption="Good patterns amplify quality, bad patterns compound technical debt"
71+
lessonLink="/docs/practical-techniques/lesson-11-agent-friendly-code"
72+
lessonNumber={11}
73+
>
74+
<CompoundQualityVisualization compact homepageMode />
75+
</PreviewTile>
76+
</div>
77+
</div>
78+
</section>
79+
);
80+
}

‎website/src/components/VisualElements/CapabilityMatrix.module.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,62 @@
1313
max-width: 95%;
1414
}
1515

16+
/* Compact view for homepage preview */
17+
.compactView {
18+
display: flex;
19+
gap: 1rem;
20+
justify-content: center;
21+
align-items: stretch;
22+
padding: 1rem;
23+
}
24+
25+
.compactBadge {
26+
display: flex;
27+
flex-direction: column;
28+
align-items: center;
29+
justify-content: center;
30+
gap: 0.5rem;
31+
padding: 1rem 1.25rem;
32+
border-radius: 12px;
33+
border: 2px solid;
34+
background: var(--ifm-background-surface-color);
35+
min-width: 100px;
36+
}
37+
38+
.compactBadge.high {
39+
border-color: var(--visual-capability);
40+
}
41+
42+
.compactBadge.medium {
43+
border-color: var(--visual-limitation);
44+
}
45+
46+
.compactBadge.low {
47+
border-color: var(--visual-error);
48+
}
49+
50+
.compactIcon {
51+
font-size: 1.75rem;
52+
}
53+
54+
.compactLabel {
55+
font-size: 0.85rem;
56+
font-weight: 600;
57+
text-align: center;
58+
}
59+
60+
.compactBadge.high .compactLabel {
61+
color: var(--visual-capability);
62+
}
63+
64+
.compactBadge.medium .compactLabel {
65+
color: var(--visual-limitation);
66+
}
67+
68+
.compactBadge.low .compactLabel {
69+
color: var(--visual-error);
70+
}
71+
1672
.tableWrapper {
1773
overflow-x: auto;
1874
margin-bottom: 1.5rem;

‎website/src/components/VisualElements/CapabilityMatrix.tsx‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,32 @@ function getTrustIndicator(level: 'high' | 'medium' | 'low'): {
6464
export default function CapabilityMatrix({
6565
compact = false,
6666
}: PresentationAwareProps = {}) {
67-
const containerClassName = compact
68-
? `${styles.container} ${styles.compact}`
69-
: styles.container;
67+
// Compact mode: show simple three-badge preview
68+
if (compact) {
69+
const trustLevels = [
70+
{ level: 'high' as const, icon: '✅', label: 'Reliable' },
71+
{ level: 'medium' as const, icon: '⚠️', label: 'Verify' },
72+
{ level: 'low' as const, icon: '❌', label: 'Check docs' },
73+
];
7074

75+
return (
76+
<div className={styles.compactView}>
77+
{trustLevels.map(({ level, icon, label }) => (
78+
<div
79+
key={level}
80+
className={`${styles.compactBadge} ${styles[level]}`}
81+
>
82+
<span className={styles.compactIcon}>{icon}</span>
83+
<span className={styles.compactLabel}>{label}</span>
84+
</div>
85+
))}
86+
</div>
87+
);
88+
}
89+
90+
// Full table view for lesson pages
7191
return (
72-
<div className={containerClassName}>
92+
<div className={styles.container}>
7393
<div className={styles.tableWrapper}>
7494
<table className={styles.table}>
7595
<thead>

‎website/src/components/VisualElements/CompoundQualityVisualization.module.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,38 @@
273273
color: var(--brand-primary-dark);
274274
}
275275

276+
/* ========================================================================
277+
HOMEPAGE MODE - High contrast on purple background
278+
======================================================================== */
279+
280+
.sideLabelHomepage {
281+
font-size: 1.7rem;
282+
}
283+
284+
.homepageAxis {
285+
stroke: var(--ifm-color-emphasis-900);
286+
}
287+
288+
.homepageAxisLabel {
289+
fill: var(--ifm-color-emphasis-900);
290+
}
291+
292+
.homepageStartPoint {
293+
fill: var(--ifm-color-emphasis-900);
294+
}
295+
296+
[data-theme='dark'] .homepageAxis {
297+
stroke: rgba(255, 255, 255, 0.7);
298+
}
299+
300+
[data-theme='dark'] .homepageAxisLabel {
301+
fill: rgba(255, 255, 255, 0.85);
302+
}
303+
304+
[data-theme='dark'] .homepageStartPoint {
305+
fill: rgba(255, 255, 255, 0.9);
306+
}
307+
276308
/* ========================================================================
277309
DARK MODE OPTIMIZATIONS
278310
======================================================================== */

0 commit comments

Comments
 (0)