Skip to content

Commit cd845f9

Browse files
gmoonclaude
gmoon
and
claude
committed
Redesign homepage as Lattice product landing page
Transform from org showcase into product-focused page: solution-oriented hero with dual CTAs, value prop cards, how-it-works section with shared flow diagram, featured blog article, and reorganized projects grid. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 073bebf commit cd845f9

4 files changed

Lines changed: 428 additions & 111 deletions

File tree

‎src/components/Hero.tsx‎

Lines changed: 54 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { colors, fonts, gradient } from '../tokens'
22

3-
const styles = {
3+
const styles: Record<string, React.CSSProperties> = {
44
hero: {
55
background: gradient,
66
padding: '5rem 2rem 4rem',
@@ -15,15 +15,23 @@ const styles = {
1515
lineHeight: 1.2,
1616
},
1717
subtitle: {
18-
fontSize: '1.25rem',
18+
fontSize: '1.15rem',
1919
fontWeight: 400,
2020
fontFamily: fonts.system,
2121
opacity: 0.9,
22-
maxWidth: '600px',
22+
maxWidth: '680px',
2323
margin: '0 auto 2rem',
24-
lineHeight: 1.6,
24+
lineHeight: 1.7,
2525
},
26-
cta: {
26+
ctaRow: {
27+
display: 'flex',
28+
justifyContent: 'center',
29+
alignItems: 'center',
30+
gap: '1rem',
31+
flexWrap: 'wrap' as const,
32+
marginBottom: '1.5rem',
33+
},
34+
ctaPrimary: {
2735
display: 'inline-block',
2836
padding: '0.75rem 2rem',
2937
background: '#ffffff',
@@ -36,19 +44,54 @@ const styles = {
3644
transition: 'transform 0.2s, box-shadow 0.2s',
3745
boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
3846
},
47+
ctaSecondary: {
48+
display: 'inline-block',
49+
padding: '0.75rem 2rem',
50+
background: 'transparent',
51+
color: '#ffffff',
52+
border: '2px solid rgba(255,255,255,0.6)',
53+
borderRadius: '8px',
54+
textDecoration: 'none',
55+
fontWeight: 600,
56+
fontSize: '1rem',
57+
fontFamily: fonts.system,
58+
transition: 'transform 0.2s, border-color 0.2s',
59+
},
60+
installHint: {
61+
display: 'inline-block',
62+
background: 'rgba(0,0,0,0.2)',
63+
borderRadius: '100px',
64+
padding: '0.4rem 1.25rem',
65+
fontFamily: fonts.mono,
66+
fontSize: '0.85rem',
67+
opacity: 0.85,
68+
letterSpacing: '0.01em',
69+
},
3970
}
4071

4172
export function Hero() {
4273
return (
4374
<section style={styles.hero}>
44-
<h1 style={styles.title}>Tools for the human-agent era</h1>
75+
<h1 style={styles.title}>Structure the knowledge behind what you build</h1>
4576
<p style={styles.subtitle}>
46-
Forkzero builds developer tools where AI agents are first-class users. Knowledge coordination, multi-agent
47-
debate, and infrastructure — designed for how software gets built now.
77+
When you build with LLMs, the research and reasoning behind every decision disappears into chat. Lattice
78+
captures it — connecting sources, strategy, requirements, and code into a knowledge graph that any collaborator,
79+
human or agent, can pick up and build on.
4880
</p>
49-
<a href="https://github.com/forkzero" target="_blank" rel="noopener noreferrer" style={styles.cta}>
50-
View on GitHub
51-
</a>
81+
<div style={styles.ctaRow}>
82+
<a
83+
href="https://github.com/forkzero/lattice"
84+
target="_blank"
85+
rel="noopener noreferrer"
86+
style={styles.ctaPrimary}
87+
>
88+
Get Started
89+
</a>
90+
<a href="/reader?url=https://forkzero.github.io/lattice/lattice-data.json" style={styles.ctaSecondary}>
91+
See it live
92+
</a>
93+
</div>
94+
<span style={styles.installHint}>curl -fsSL https://lattice.forkzero.ai/install.sh | sh</span>
5295
</section>
5396
)
5497
}

‎src/components/LatticeFlowDiagram.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { colors, radius, fonts } from '../tokens'
2+
3+
const styles: Record<string, React.CSSProperties> = {
4+
diagramContainer: {
5+
margin: '2rem 0',
6+
padding: '1.5rem',
7+
background: colors.bgSecondary,
8+
borderRadius: radius,
9+
border: `1px solid ${colors.borderColor}`,
10+
overflowX: 'auto' as const,
11+
},
12+
diagramFlow: {
13+
display: 'flex',
14+
alignItems: 'center',
15+
justifyContent: 'center',
16+
gap: '0',
17+
minWidth: 'fit-content',
18+
},
19+
diagramSegment: {
20+
display: 'flex',
21+
alignItems: 'center',
22+
},
23+
diagramNode: {
24+
display: 'flex',
25+
flexDirection: 'column' as const,
26+
alignItems: 'center',
27+
gap: '0.4rem',
28+
},
29+
diagramDot: {
30+
width: '12px',
31+
height: '12px',
32+
borderRadius: '50%',
33+
display: 'inline-block',
34+
},
35+
diagramLabel: {
36+
fontSize: '0.85rem',
37+
fontWeight: 600,
38+
color: colors.textPrimary,
39+
fontFamily: fonts.system,
40+
whiteSpace: 'nowrap' as const,
41+
},
42+
diagramEdge: {
43+
display: 'flex',
44+
flexDirection: 'column' as const,
45+
alignItems: 'center',
46+
padding: '0 0.75rem',
47+
gap: '0.2rem',
48+
},
49+
diagramArrow: {
50+
fontSize: '1.1rem',
51+
color: colors.textMuted,
52+
},
53+
diagramEdgeLabel: {
54+
fontSize: '0.7rem',
55+
color: colors.textMuted,
56+
fontStyle: 'italic',
57+
whiteSpace: 'nowrap' as const,
58+
},
59+
}
60+
61+
const nodes = [
62+
{ label: 'Sources', color: colors.accentBlue },
63+
{ label: 'Theses', color: colors.accentPurple },
64+
{ label: 'Requirements', color: colors.accentYellow },
65+
{ label: 'Implementations', color: colors.accentGreen },
66+
]
67+
const edges = ['supports', 'derives', 'satisfies']
68+
69+
export function LatticeFlowDiagram() {
70+
return (
71+
<div style={styles.diagramContainer}>
72+
<div style={styles.diagramFlow}>
73+
{nodes.map((node, i) => (
74+
<div key={node.label} style={styles.diagramSegment}>
75+
<div style={styles.diagramNode}>
76+
<span style={{ ...styles.diagramDot, background: node.color }} />
77+
<span style={styles.diagramLabel}>{node.label}</span>
78+
</div>
79+
{i < edges.length && (
80+
<div style={styles.diagramEdge}>
81+
<span style={styles.diagramArrow}>&rarr;</span>
82+
<span style={styles.diagramEdgeLabel}>{edges[i]}</span>
83+
</div>
84+
)}
85+
</div>
86+
))}
87+
</div>
88+
</div>
89+
)
90+
}

‎src/pages/BlogPage.tsx‎

Lines changed: 1 addition & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { colors, fonts, shadows, radius } from '../tokens'
33
import { Header } from '../components/Header'
44
import { Footer } from '../components/Footer'
55
import { BlogComments } from '../components/BlogComments'
6+
import { LatticeFlowDiagram } from '../components/LatticeFlowDiagram'
67
import { blogPosts, type BlogPost } from '../data/blog-posts'
78

89
// --- SEO helpers ---
@@ -37,39 +38,6 @@ function setCanonical(url: string) {
3738
el.href = url
3839
}
3940

40-
// --- Lattice flow diagram ---
41-
42-
function LatticeFlowDiagram() {
43-
const nodes = [
44-
{ label: 'Sources', color: colors.accentBlue },
45-
{ label: 'Theses', color: colors.accentPurple },
46-
{ label: 'Requirements', color: colors.accentYellow },
47-
{ label: 'Implementations', color: colors.accentGreen },
48-
]
49-
const edges = ['supports', 'derives', 'satisfies']
50-
51-
return (
52-
<div style={s.diagramContainer}>
53-
<div style={s.diagramFlow}>
54-
{nodes.map((node, i) => (
55-
<div key={node.label} style={s.diagramSegment}>
56-
<div style={s.diagramNode}>
57-
<span style={{ ...s.diagramDot, background: node.color }} />
58-
<span style={s.diagramLabel}>{node.label}</span>
59-
</div>
60-
{i < edges.length && (
61-
<div style={s.diagramEdge}>
62-
<span style={s.diagramArrow}>&rarr;</span>
63-
<span style={s.diagramEdgeLabel}>{edges[i]}</span>
64-
</div>
65-
)}
66-
</div>
67-
))}
68-
</div>
69-
</div>
70-
)
71-
}
72-
7341
// --- Simple markdown-ish renderer ---
7442

7543
export function renderContent(content: string) {
@@ -574,62 +542,6 @@ const s: Record<string, React.CSSProperties> = {
574542
margin: 0,
575543
},
576544

577-
// Diagram
578-
diagramContainer: {
579-
margin: '2rem 0',
580-
padding: '1.5rem',
581-
background: colors.bgSecondary,
582-
borderRadius: radius,
583-
border: `1px solid ${colors.borderColor}`,
584-
overflowX: 'auto' as const,
585-
},
586-
diagramFlow: {
587-
display: 'flex',
588-
alignItems: 'center',
589-
justifyContent: 'center',
590-
gap: '0',
591-
minWidth: 'fit-content',
592-
},
593-
diagramSegment: {
594-
display: 'flex',
595-
alignItems: 'center',
596-
},
597-
diagramNode: {
598-
display: 'flex',
599-
flexDirection: 'column' as const,
600-
alignItems: 'center',
601-
gap: '0.4rem',
602-
},
603-
diagramDot: {
604-
width: '12px',
605-
height: '12px',
606-
borderRadius: '50%',
607-
display: 'inline-block',
608-
},
609-
diagramLabel: {
610-
fontSize: '0.85rem',
611-
fontWeight: 600,
612-
color: colors.textPrimary,
613-
whiteSpace: 'nowrap' as const,
614-
},
615-
diagramEdge: {
616-
display: 'flex',
617-
flexDirection: 'column' as const,
618-
alignItems: 'center',
619-
padding: '0 0.75rem',
620-
gap: '0.2rem',
621-
},
622-
diagramArrow: {
623-
fontSize: '1.1rem',
624-
color: colors.textMuted,
625-
},
626-
diagramEdgeLabel: {
627-
fontSize: '0.7rem',
628-
color: colors.textMuted,
629-
fontStyle: 'italic',
630-
whiteSpace: 'nowrap' as const,
631-
},
632-
633545
// Source cards
634546
sourceCardsSection: {
635547
marginTop: '2.5rem',

0 commit comments

Comments
 (0)