Skip to content

fix(website): code review fixes — responsive grid, unique IDs, iframe sandbox, design tokens #103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
blove merged 1 commit into from
Apr 10, 2026
Merged

fix(website): code review fixes — responsive grid, unique IDs, iframe sandbox, design tokens #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/website/src/components/landing/LibrariesSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const LIBRARIES = [
id: 'render',
tag: 'Gen UI',
pkg: '@cacheplane/render',
color: '#1a7a40',
color: tokens.colors.renderGreen,
rgb: '26,122,64',
oneLiner: 'Agents that render UI — without coupling to your frontend',
chips: ['<render-spec>', 'defineAngularRegistry()', 'signalStateStore()', 'JSON patch'],
Expand All @@ -30,7 +30,7 @@ const LIBRARIES = [
id: 'chat',
tag: 'Chat',
pkg: '@cacheplane/chat',
color: '#5a00c8',
color: tokens.colors.chatPurple,
rgb: '90,0,200',
oneLiner: 'Batteries-included agent chat — fully featured from day one',
chips: ['<chat-messages>', '<chat>', '<chat-debug>', '<chat-generative-ui>'],
Expand Down
3 changes: 2 additions & 1 deletion apps/website/src/components/landing/angular/AngularFeaturesGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function AngularFeaturesGrid() {

<div style={{
maxWidth: 1000, margin: '0 auto',
display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(440px, 1fr))', gap: 24,
display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(440px, 100%), 1fr))', gap: 24,
}}>
{FEATURES.map((feat, i) => (
<motion.div
Expand Down Expand Up @@ -75,6 +75,7 @@ export function AngularFeaturesGrid() {
title={feat.title}
style={{ width: '100%', height: 320, border: 'none', display: 'block' }}
loading="lazy"
sandbox="allow-scripts allow-same-origin"
/>
</div>
</motion.div>
Expand Down
2 changes: 1 addition & 1 deletion apps/website/src/components/landing/angular/AngularWhitePaperGate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function AngularWhitePaperGate() {
};

return (
<section id="whitepaper-gate" style={{ padding: '80px 32px' }}>
<section id="angular-whitepaper-gate" style={{ padding: '80px 32px' }}>
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
Expand Down
4 changes: 2 additions & 2 deletions apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export function ChatLandingCodeShowcase() {
<p style={{
fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.12em',
fontWeight: 700, color: '#5a00c8', marginBottom: 14,
fontWeight: 700, color: tokens.colors.chatPurple, marginBottom: 14,
}}>
Developer Experience
</p>
Expand Down Expand Up @@ -73,7 +73,7 @@ export function ChatLandingCodeShowcase() {
}}>
<span style={{
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.68rem',
fontWeight: 700, color: '#5a00c8',
fontWeight: 700, color: tokens.colors.chatPurple,
}}>
{s.title}
</span>
Expand Down
6 changes: 3 additions & 3 deletions apps/website/src/components/landing/chat-landing/ChatLandingComparison.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function ChatLandingComparison() {
<p style={{
fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.12em',
fontWeight: 700, color: '#5a00c8', marginBottom: 14,
fontWeight: 700, color: tokens.colors.chatPurple, marginBottom: 14,
}}>
Head to Head
</p>
Expand Down Expand Up @@ -61,7 +61,7 @@ export function ChatLandingComparison() {
<div key={h} style={{
fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
fontSize: '0.62rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
color: i === 2 ? '#5a00c8' : tokens.colors.textMuted,
color: i === 2 ? tokens.colors.chatPurple : tokens.colors.textMuted,
}}>
{h}
</div>
Expand All @@ -88,7 +88,7 @@ export function ChatLandingComparison() {
<div style={{ fontSize: '0.8rem', color: tokens.colors.textMuted, paddingRight: 16, lineHeight: 1.5 }}>
{row.theirs}
</div>
<div style={{ fontSize: '0.8rem', color: '#5a00c8', fontWeight: 500, lineHeight: 1.5, display: 'flex', alignItems: 'flex-start', gap: 6 }}>
<div style={{ fontSize: '0.8rem', color: tokens.colors.chatPurple, fontWeight: 500, lineHeight: 1.5, display: 'flex', alignItems: 'flex-start', gap: 6 }}>
<span style={{ color: '#1a7a40', marginTop: 2, flexShrink: 0 }}>✓</span>
<span>{row.ours}</span>
</div>
Expand Down
5 changes: 3 additions & 2 deletions apps/website/src/components/landing/chat-landing/ChatLandingFeaturesGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export function ChatLandingFeaturesGrid() {
<p style={{
fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.12em',
fontWeight: 700, color: '#5a00c8', marginBottom: 14,
fontWeight: 700, color: tokens.colors.chatPurple, marginBottom: 14,
}}>
Features
</p>
Expand All @@ -39,7 +39,7 @@ export function ChatLandingFeaturesGrid() {

<div style={{
maxWidth: 1000, margin: '0 auto',
display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(440px, 1fr))', gap: 24,
display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(440px, 100%), 1fr))', gap: 24,
}}>
{FEATURES.map((feat, i) => (
<motion.div
Expand Down Expand Up @@ -74,6 +74,7 @@ export function ChatLandingFeaturesGrid() {
title={feat.title}
style={{ width: '100%', height: 320, border: 'none', display: 'block' }}
loading="lazy"
sandbox="allow-scripts allow-same-origin"
/>
</div>
</motion.div>
Expand Down
4 changes: 2 additions & 2 deletions apps/website/src/components/landing/chat-landing/ChatLandingFooterCTA.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function ChatLandingFooterCTA() {
<a href="/whitepapers/chat.pdf" download
style={{
display: 'inline-block', padding: '0.875rem 2rem',
background: '#5a00c8', color: '#fff',
background: tokens.colors.chatPurple, color: '#fff',
fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 600,
textDecoration: 'none', borderRadius: 6,
}}>
Expand All @@ -36,7 +36,7 @@ export function ChatLandingFooterCTA() {
<a href="/pilot-to-prod"
style={{
display: 'inline-block', padding: '0.875rem 2rem',
background: tokens.glass.bg, color: '#5a00c8',
background: tokens.glass.bg, color: tokens.colors.chatPurple,
fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 600,
textDecoration: 'none', borderRadius: 6,
border: '1px solid rgba(90,0,200,0.2)',
Expand Down
6 changes: 3 additions & 3 deletions apps/website/src/components/landing/chat-landing/ChatLandingHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function ChatLandingHero() {
<motion.div initial={{ y: 16 }} animate={{ y: 0 }} transition={{ duration: 0.5 }}>
<span style={{
fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.08em',
color: '#5a00c8', textTransform: 'uppercase', display: 'inline-block', marginBottom: '1.5rem',
color: tokens.colors.chatPurple, textTransform: 'uppercase', display: 'inline-block', marginBottom: '1.5rem',
}}>
@cacheplane/chat
</span>
Expand All @@ -39,7 +39,7 @@ export function ChatLandingHero() {
<a href="/whitepapers/chat.pdf" download
style={{
display: 'inline-flex', alignItems: 'center', gap: 6,
background: '#5a00c8', color: '#fff', fontFamily: 'Inter, sans-serif',
background: tokens.colors.chatPurple, color: '#fff', fontFamily: 'Inter, sans-serif',
fontSize: 15, fontWeight: 600, padding: '0.875rem 1.75rem', borderRadius: 8,
textDecoration: 'none', boxShadow: tokens.glow.button, minHeight: 44,
}}>
Expand All @@ -50,7 +50,7 @@ export function ChatLandingHero() {
display: 'inline-flex', alignItems: 'center', gap: 6,
background: tokens.glass.bg, backdropFilter: `blur(${tokens.glass.blur})`,
WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
color: '#5a00c8', fontFamily: 'Inter, sans-serif',
color: tokens.colors.chatPurple, fontFamily: 'Inter, sans-serif',
fontSize: 15, fontWeight: 600, padding: '0.875rem 1.75rem', borderRadius: 8,
textDecoration: 'none', border: '1px solid rgba(90,0,200,0.2)', minHeight: 44,
}}>
Expand Down
8 changes: 4 additions & 4 deletions apps/website/src/components/landing/chat-landing/ChatLandingWhitePaperGate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function ChatLandingWhitePaperGate() {
};

return (
<section id="whitepaper-gate" style={{ padding: '80px 32px' }}>
<section id="chat-whitepaper-gate" style={{ padding: '80px 32px' }}>
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
Expand All @@ -55,7 +55,7 @@ export function ChatLandingWhitePaperGate() {
<p style={{
fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
fontSize: '0.68rem', textTransform: 'uppercase', letterSpacing: '0.12em',
fontWeight: 700, color: '#5a00c8', marginBottom: 14,
fontWeight: 700, color: tokens.colors.chatPurple, marginBottom: 14,
}}>
Free Download
</p>
Expand All @@ -76,7 +76,7 @@ export function ChatLandingWhitePaperGate() {
<a href="/whitepapers/chat.pdf" download="cacheplane-chat-enterprise-guide.pdf"
style={{
display: 'inline-flex', alignItems: 'center', gap: 8,
background: '#5a00c8', color: '#fff',
background: tokens.colors.chatPurple, color: '#fff',
padding: '12px 28px', borderRadius: 10,
fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
fontSize: '0.75rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
Expand Down Expand Up @@ -121,7 +121,7 @@ export function ChatLandingWhitePaperGate() {
padding: '10px 24px', borderRadius: 9,
background: email ? 'rgba(90,0,200,.08)' : 'rgba(0,0,0,.04)',
border: `1px solid ${email ? 'rgba(90,0,200,.22)' : 'rgba(0,0,0,.08)'}`,
color: email ? '#5a00c8' : tokens.colors.textMuted,
color: email ? tokens.colors.chatPurple : tokens.colors.textMuted,
fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
fontSize: '0.72rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
cursor: email ? 'pointer' : 'not-allowed',
Expand Down
2 changes: 1 addition & 1 deletion apps/website/src/components/landing/render/RenderCodeShowcase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export function RenderCodeShowcase() {
}}>
<span style={{
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.68rem',
fontWeight: 700, color: '#1a7a40',
fontWeight: 700, color: tokens.colors.renderGreen,
}}>
{s.title}
</span>
Expand Down
6 changes: 3 additions & 3 deletions apps/website/src/components/landing/render/RenderComparison.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export function RenderComparison() {
<div key={h} style={{
fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
fontSize: '0.62rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
color: i === 2 ? '#1a7a40' : tokens.colors.textMuted,
color: i === 2 ? tokens.colors.renderGreen : tokens.colors.textMuted,
}}>
{h}
</div>
Expand All @@ -87,8 +87,8 @@ export function RenderComparison() {
<div style={{ fontSize: '0.8rem', color: tokens.colors.textMuted, paddingRight: 16, lineHeight: 1.5 }}>
{row.theirs}
</div>
<div style={{ fontSize: '0.8rem', color: '#1a7a40', fontWeight: 500, lineHeight: 1.5, display: 'flex', alignItems: 'flex-start', gap: 6 }}>
<span style={{ color: '#1a7a40', marginTop: 2, flexShrink: 0 }}>✓</span>
<div style={{ fontSize: '0.8rem', color: tokens.colors.renderGreen, fontWeight: 500, lineHeight: 1.5, display: 'flex', alignItems: 'flex-start', gap: 6 }}>
<span style={{ color: tokens.colors.renderGreen, marginTop: 2, flexShrink: 0 }}>✓</span>
<span>{row.ours}</span>
</div>
</motion.div>
Expand Down
3 changes: 2 additions & 1 deletion apps/website/src/components/landing/render/RenderFeaturesGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function RenderFeaturesGrid() {

<div style={{
maxWidth: 1000, margin: '0 auto',
display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(440px, 1fr))', gap: 24,
display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(440px, 100%), 1fr))', gap: 24,
}}>
{FEATURES.map((feat, i) => (
<motion.div
Expand Down Expand Up @@ -75,6 +75,7 @@ export function RenderFeaturesGrid() {
title={feat.title}
style={{ width: '100%', height: 320, border: 'none', display: 'block' }}
loading="lazy"
sandbox="allow-scripts allow-same-origin"
/>
</div>
</motion.div>
Expand Down
2 changes: 1 addition & 1 deletion apps/website/src/components/landing/render/RenderFooterCTA.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function RenderFooterCTA() {
<a href="/whitepapers/render.pdf" download
style={{
display: 'inline-block', padding: '0.875rem 2rem',
background: '#1a7a40', color: '#fff',
background: tokens.colors.renderGreen, color: '#fff',
fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 600,
textDecoration: 'none', borderRadius: 6,
}}>
Expand Down
2 changes: 1 addition & 1 deletion apps/website/src/components/landing/render/RenderHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export function RenderHero() {
<a href="/whitepapers/render.pdf" download
style={{
display: 'inline-flex', alignItems: 'center', gap: 6,
background: '#1a7a40', color: '#fff', fontFamily: 'Inter, sans-serif',
background: tokens.colors.renderGreen, color: '#fff', fontFamily: 'Inter, sans-serif',
fontSize: 15, fontWeight: 600, padding: '0.875rem 1.75rem', borderRadius: 8,
textDecoration: 'none', boxShadow: tokens.glow.button, minHeight: 44,
}}>
Expand Down
4 changes: 2 additions & 2 deletions apps/website/src/components/landing/render/RenderProblemSolution.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export function RenderProblemSolution() {
<span style={{
display: 'inline-block', fontFamily: "'JetBrains Mono', monospace",
fontSize: '0.58rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.07em',
padding: '2px 9px', borderRadius: 5, color: '#fff', background: '#1a7a40', marginBottom: 16,
padding: '2px 9px', borderRadius: 5, color: '#fff', background: tokens.colors.renderGreen, marginBottom: 16,
}}>
With @cacheplane/render
</span>
Expand All @@ -79,7 +79,7 @@ export function RenderProblemSolution() {
<ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
{SOLUTIONS.map(s => (
<li key={s} style={{ display: 'flex', gap: 8, fontSize: '0.85rem', color: '#333', lineHeight: 1.5 }}>
<span style={{ color: '#1a7a40', flexShrink: 0 }}>✓</span> {s}
<span style={{ color: tokens.colors.renderGreen, flexShrink: 0 }}>✓</span> {s}
</li>
))}
</ul>
Expand Down
8 changes: 4 additions & 4 deletions apps/website/src/components/landing/render/RenderWhitePaperGate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function RenderWhitePaperGate() {
};

return (
<section id="whitepaper-gate" style={{ padding: '80px 32px' }}>
<section id="render-whitepaper-gate" style={{ padding: '80px 32px' }}>
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
Expand Down Expand Up @@ -76,7 +76,7 @@ export function RenderWhitePaperGate() {
<a href="/whitepapers/render.pdf" download="cacheplane-render-enterprise-guide.pdf"
style={{
display: 'inline-flex', alignItems: 'center', gap: 8,
background: '#1a7a40', color: '#fff',
background: tokens.colors.renderGreen, color: '#fff',
padding: '12px 28px', borderRadius: 10,
fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
fontSize: '0.75rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
Expand All @@ -98,7 +98,7 @@ export function RenderWhitePaperGate() {
<div style={{
padding: '20px 24px', borderRadius: 12,
background: 'rgba(26,122,64,.07)', border: '1px solid rgba(26,122,64,.2)',
fontSize: '0.88rem', color: '#1a7a40', lineHeight: 1.55,
fontSize: '0.88rem', color: tokens.colors.renderGreen, lineHeight: 1.55,
}}>
✓ Thanks! We'll reach out when the guide is updated.
</div>
Expand All @@ -121,7 +121,7 @@ export function RenderWhitePaperGate() {
padding: '10px 24px', borderRadius: 9,
background: email ? 'rgba(26,122,64,.08)' : 'rgba(0,0,0,.04)',
border: `1px solid ${email ? 'rgba(26,122,64,.22)' : 'rgba(0,0,0,.08)'}`,
color: email ? '#1a7a40' : tokens.colors.textMuted,
color: email ? tokens.colors.renderGreen : tokens.colors.textMuted,
fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
fontSize: '0.72rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
cursor: email ? 'pointer' : 'not-allowed',
Expand Down
4 changes: 4 additions & 0 deletions libs/design-tokens/src/lib/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ export const colors = Object.freeze({
sidebarBg: 'rgba(255, 255, 255, 0.45)',
/** Angular brand red */
angularRed: '#DD0031',
/** Render library — green */
renderGreen: '#1a7a40',
/** Chat library — purple */
chatPurple: '#5a00c8',
} as const);

export type Colors = typeof colors;
Loading