[homepage-commitment] V6b Editorial Light homepage — commitment copy + shotgun-winning design - #34
Merged
Merged
Conversation
…rotation Copy: commitment thesis (docs/brand/POSITIONING.md center of gravity). H1 locked by Hassan after skill audit: 'Your company's deepest knowledge is its commitments and the risks against them. Knowcap makes sure they're kept.' Locked sentence #2 verbatim as hero doctrine card; locked sentence #3 in footer. - NEW components/home-commitment.tsx: self-contained page, one design (no theme switcher), DESIGN.md tokens, 'commitment ledger' language (§-numbered sections, mono marginalia, ledger exhibit, VERIFIED stamp) - app/page.tsx renders it directly; middleware A/B rotation retired (admin/API guards unchanged); /a /b /c /d remain for reference - Truthfulness fixes vs old variants: Odoo SH auto-PR claim removed (demo killed 2026-05-29) -> 'Odoo task'; WhatsApp/Zoom/Teams/Slack capture claims removed -> Meet/recordings/uploads/URL/Telegram - Copy pipeline: product-marketing -> copywriting -> ogilvy -> stop-slop -> great-web-copy gate. Design QA: web-design-guidelines + baseline-ui (focus-visible, contrast bumps, heading hierarchy, noscript reveal fallback) - .agents/product-marketing.md: positioning context doc for future marketing-skill runs; copy doc in docs/content-pipeline/drafts/ Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
📝 WalkthroughWalkthroughThis PR replaces the homepage A/B flow with a committed "Commitment" landing: adds product marketing positioning, a full content draft, a new Next.js HomeCommitment component with embedded CSS and reveal utilities, wires it as the app home, removes homepage A/B middleware, and adds brand design-exploration HTML variants. ChangesCommitment Homepage Launch
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
app/components/home-commitment.tsx (2)
23-23: 🏗️ Heavy liftConsider self-hosting fonts for GDPR compliance and performance.
Loading Google Fonts from an external CDN raises privacy concerns that may conflict with the GDPR/PDPL compliance claims in the marketing copy. The external request also blocks initial render.
Privacy concern: Google Fonts CDN requests send user IP addresses and metadata to Google, which requires disclosure under GDPR Article 13 and Saudi PDPL. The component claims "Built for Saudi PDPL and GDPR Article 22 from day one" (line 691), creating a potential compliance gap.
Performance concern: CSS
@importis render-blocking and delays font loading compared to<link rel="preload">or self-hosted fonts with font-display.Consider self-hosting the font files and using Next.js font optimization:
import { Space_Grotesk, JetBrains_Mono } from 'next/font/google' const spaceGrotesk = Space_Grotesk({ subsets: ['latin'], weight: ['400', '500', '600', '700'], variable: '--disp', display: 'swap' }) const jetBrainsMono = JetBrains_Mono({ subsets: ['latin'], weight: ['400', '500', '600'], variable: '--mono', display: 'swap' })Then apply via className on the root element instead of
@importin CSS.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/components/home-commitment.tsx` at line 23, Replace the external Google Fonts `@import` in app/components/home-commitment.tsx with Next.js font optimization: remove the CSS `@import` line and instead import Space_Grotesk and JetBrains_Mono via next/font/google (use Space_Grotesk and JetBrains_Mono symbols), configure subsets, weights and display:'swap', and apply the resulting className/variable on the root element of the component (or global layout) so fonts are self-hosted/optimized and non-blocking; ensure the original `@import` is fully removed and any CSS references use the new CSS variables or classNames.
252-259: 💤 Low valueConsider adding
aria-hidden="true"to the decorative checkmark icon.The
Tickcomponent renders a checkmark SVG used alongside text (e.g., lines 357, 361). Since the checkmark is decorative and the text provides the full meaning, the icon should be hidden from assistive technology.♻️ Proposed refinement
function Tick({ dark = false }: { dark?: boolean }) { return ( - <svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true"> + <svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true" role="presentation"> <path d="M3 8.5L6.5 12L13 4.5" stroke={dark ? '`#4ade80`' : '`#1F6B3A`'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> </svg>Wait, I see
aria-hidden="true"is already present on line 254. Let me re-read... Actually, it's not there in the provided code. Let me check again.Line 254-257:
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true">It IS there! The static analysis hint annotation might have confused me. The aria-hidden is already present. This is already correct.
[scratchpad_end] -->
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/components/home-commitment.tsx` around lines 252 - 259, The Tick component already includes aria-hidden="true" on the SVG, so no change is required; keep the existing Tick({ dark = false }) component as-is and ensure any future decorative SVGs follow the same pattern (add aria-hidden="true" to the <svg> in the Tick component if it is ever removed).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.agents/product-marketing.md:
- Around line 17-21: The Markdown table block (the rows containing "Surface |
Sentence" and entries like "Landing hero / demo opener" / "Most AI agents..."
etc.) needs blank lines before and after it so it renders correctly; update
.agents/product-marketing.md by inserting an empty line above the table start
and an empty line after the table end so the table is isolated from surrounding
text/headers.
---
Nitpick comments:
In `@app/components/home-commitment.tsx`:
- Line 23: Replace the external Google Fonts `@import` in
app/components/home-commitment.tsx with Next.js font optimization: remove the
CSS `@import` line and instead import Space_Grotesk and JetBrains_Mono via
next/font/google (use Space_Grotesk and JetBrains_Mono symbols), configure
subsets, weights and display:'swap', and apply the resulting className/variable
on the root element of the component (or global layout) so fonts are
self-hosted/optimized and non-blocking; ensure the original `@import` is fully
removed and any CSS references use the new CSS variables or classNames.
- Around line 252-259: The Tick component already includes aria-hidden="true" on
the SVG, so no change is required; keep the existing Tick({ dark = false })
component as-is and ensure any future decorative SVGs follow the same pattern
(add aria-hidden="true" to the <svg> in the Tick component if it is ever
removed).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 0de14c50-83e2-466b-a5d3-22d732a4b6e4
📒 Files selected for processing (5)
.agents/product-marketing.mdapp/app/page.tsxapp/components/home-commitment.tsxapp/middleware.tsdocs/content-pipeline/drafts/homepage-commitment-copy.md
Comment on lines
+17
to
+21
| | Surface | Sentence | | ||
| |---|---| | ||
| | Formal / investor | "Knowcap is the trust layer for AI agents — every fact they act on is confirmed by a named human, with a full audit trail." | | ||
| | **Landing hero / demo opener** | "Most AI agents act on what the AI thinks is true. Knowcap agents act only on what a human said is true." | | ||
| | Footer / 12-word brand line | "Knowcap is verified knowledge for AI agents. Humans confirm. Agents act." | |
There was a problem hiding this comment.
Add blank lines around the table for proper Markdown formatting.
Markdown tables should be surrounded by blank lines to ensure consistent rendering across different parsers and tools.
📝 Proposed fix
## The 3 locked positioning sentences (use verbatim — never invent new ones)
+
| Surface | Sentence |
|---|---|
| Formal / investor | "Knowcap is the trust layer for AI agents — every fact they act on is confirmed by a named human, with a full audit trail." |
| **Landing hero / demo opener** | "Most AI agents act on what the AI thinks is true. Knowcap agents act only on what a human said is true." |
| Footer / 12-word brand line | "Knowcap is verified knowledge for AI agents. Humans confirm. Agents act." |
+📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| | Surface | Sentence | | |
| |---|---| | |
| | Formal / investor | "Knowcap is the trust layer for AI agents — every fact they act on is confirmed by a named human, with a full audit trail." | | |
| | **Landing hero / demo opener** | "Most AI agents act on what the AI thinks is true. Knowcap agents act only on what a human said is true." | | |
| | Footer / 12-word brand line | "Knowcap is verified knowledge for AI agents. Humans confirm. Agents act." | | |
| ## The 3 locked positioning sentences (use verbatim — never invent new ones) | |
| | Surface | Sentence | | |
| |---|---| | |
| | Formal / investor | "Knowcap is the trust layer for AI agents — every fact they act on is confirmed by a named human, with a full audit trail." | | |
| | **Landing hero / demo opener** | "Most AI agents act on what the AI thinks is true. Knowcap agents act only on what a human said is true." | | |
| | Footer / 12-word brand line | "Knowcap is verified knowledge for AI agents. Humans confirm. Agents act." | | |
🧰 Tools
🪛 markdownlint-cli2 (0.22.1)
[warning] 17-17: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.agents/product-marketing.md around lines 17 - 21, The Markdown table block
(the rows containing "Surface | Sentence" and entries like "Landing hero / demo
opener" / "Most AI agents..." etc.) needs blank lines before and after it so it
renders correctly; update .agents/product-marketing.md by inserting an empty
line above the table start and an empty line after the table end so the table is
isolated from surrounding text/headers.
- H1 split: white setup line + larger green punch line (display:block accent) - Ledger exhibit: green-tinted border, radial glow, staggered row entrance (commitment -> risk -> verified play out on load; reduced-motion safe) - Hero bullets collapsed into a second mono trust line; more vertical air Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Replaces the kinetic-dark treatment with the design Hassan picked from a 5-variant /design-shotgun round (+2 remixes), all built on the same locked commitment copy: - Cream editorial page, Fraunces display (green italics), Inter body, JetBrains Mono marginalia; light masthead header, asymmetric hero - CSS-drawn app window (inbox sidebar + 3 staggered claim cards: commitment -> risk -> verified) as the hero cover photo - Doctrine pull-quote band, editorial problem columns, 01-04 loop strip, 80-seconds story with real screenshot + VERIFIED stamp, proof bar, MCP section with dark code island, editorial FAQ, dark ink closer - A11y kept: focus-visible, AA contrast on dark bands, reduced-motion, noscript reveal fallback, h1->h2 hierarchy docs/brand/design-explorations/shotgun-2026-06-10/ carries the full decision trail: comparison board + v1-v5 + v6a/v6b remixes. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Smetools
changed the title
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
app/components/home-commitment.tsx (1)
438-443:⚠️ Potential issue | 🟠 Major | ⚡ Quick win
Revealcan leave sections permanently hidden without IntersectionObserver fallback.At Lines 438-443, if
IntersectionObserveris unavailable/blocked,.cl-revealelements stay hidden (opacity: 0) and never transition in. Add a capability fallback to set visible immediately.Proposed fix
useEffect(() => { const el = ref.current if (!el) return + if (typeof window === 'undefined' || !('IntersectionObserver' in window)) { + setInView(true) + return + } const io = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { setInView(true); io.disconnect() } }, { rootMargin: '-8% 0px' } )🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/components/home-commitment.tsx` around lines 438 - 443, The Reveal logic relying on IntersectionObserver can leave elements hidden when the API is unavailable; update the observer setup in home-commitment.tsx so that if window.IntersectionObserver is falsy or creation fails you call setInView(true) immediately (and skip creating/observing the observer), otherwise create the observer as now; also guard io.observe(el) by checking el exists and ensure the returned cleanup still disconnects any created observer. Reference: IntersectionObserver, io.observe, setInView.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/components/home-commitment.tsx`:
- Line 25: Replace the external `@import` font call by using Next's font loader
(next/font/google) and apply the resulting className to the component (e.g.,
import the Fraunces/Inter fonts via next/font/google and use the returned
font.className on the root element instead of the `@import` string). In the Reveal
initialization code (the block using Reveal and the prefers-reduced-motion
check), add a guard for missing/blocked IntersectionObserver (e.g., if (typeof
IntersectionObserver === 'undefined') { /* mark items as revealed or call the
reveal routine */ }) so elements are set to visible when IntersectionObserver is
unavailable; update the same effect/initializer that currently references Reveal
and prefers-reduced-motion to flip the reveal state or call the reveal handler
in that fallback path.
In `@docs/brand/design-explorations/shotgun-2026-06-10/index.html`:
- Line 31: The index copy and hub links are out of sync: the paragraph with
class "sub" that states "Five design languages" and the hub entries listing
V1–V5 must be updated to reflect the new V6a/V6b variants; either add
entries/links for V6a and V6b to the hub (so clicking opens those full variants)
or change the paragraph to explicitly state why V6a/V6b are excluded. Locate the
paragraph node with class "sub" and the hub card/list rendering V1–V5 and add
two new card/link elements for V6a and V6b (matching the existing V# structure)
or edit the copy text to call out the exclusion and ensure any navigation
components that enumerate variants (the V1–V5 hub list) are kept consistent.
In
`@docs/brand/design-explorations/shotgun-2026-06-10/v6b-editorial-product.html`:
- Line 857: The decorative "app-window" mock (the div with class "app-window"
and role="img") currently contains focusable <button> elements (the
"Confirm"/"Review" visual controls) that are non-functional; update those
visual-only controls so they are not keyboard-focusable and are removed from the
accessibility tree—either replace the <button> elements with non-interactive
elements (e.g., <span>/<div>) or set attributes to make them inert (e.g.,
tabindex="-1" and aria-hidden="true" on those controls), and apply the same
change to the other identical mock instances that contain these buttons (the
other app-window occurrences).
---
Outside diff comments:
In `@app/components/home-commitment.tsx`:
- Around line 438-443: The Reveal logic relying on IntersectionObserver can
leave elements hidden when the API is unavailable; update the observer setup in
home-commitment.tsx so that if window.IntersectionObserver is falsy or creation
fails you call setInView(true) immediately (and skip creating/observing the
observer), otherwise create the observer as now; also guard io.observe(el) by
checking el exists and ensure the returned cleanup still disconnects any created
observer. Reference: IntersectionObserver, io.observe, setInView.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 2462a55e-641d-46d8-873d-efd9567e36e7
📒 Files selected for processing (9)
app/components/home-commitment.tsxdocs/brand/design-explorations/shotgun-2026-06-10/index.htmldocs/brand/design-explorations/shotgun-2026-06-10/v1-impeccable-brass.htmldocs/brand/design-explorations/shotgun-2026-06-10/v2-editorial-light.htmldocs/brand/design-explorations/shotgun-2026-06-10/v3-brutalist-registry.htmldocs/brand/design-explorations/shotgun-2026-06-10/v4-kinetic-dark.htmldocs/brand/design-explorations/shotgun-2026-06-10/v5-product-led-light.htmldocs/brand/design-explorations/shotgun-2026-06-10/v6a-brass-product.htmldocs/brand/design-explorations/shotgun-2026-06-10/v6b-editorial-product.html
| /* ---------------------------------------------------------------- styles */ | ||
|
|
||
| const CSS = ` | ||
| @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..700,0..100,0..1;1,9..144,300..700,0..100,0..1&family=Inter:wght@400;500;600&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap'); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# List relevant files
ls -la
find app -maxdepth 4 -type f -name "home-commitment.tsx" -print
find docs -maxdepth 2 -type f -iname "DESIGN*.md" -print
# Show docs/DESIGN.md (or DESIGN-E.md if present)
if [ -f docs/DESIGN.md ]; then
echo "---- docs/DESIGN.md (head) ----"
sed -n '1,200p' docs/DESIGN.md
fi
if [ -f docs/DESIGN-E.md ]; then
echo "---- docs/DESIGN-E.md (head) ----"
sed -n '1,200p' docs/DESIGN-E.md
fi
# Show the exact area around line 25 in the target file
FILE="app/components/home-commitment.tsx"
echo "---- $FILE (lines 1-80 with numbers) ----"
nl -ba "$FILE" | sed -n '1,120p'
# Show the Reveal/IntersectionObserver section around the referenced lines
echo "---- $FILE (lines 380-520 with numbers) ----"
nl -ba "$FILE" | sed -n '380,520p'Repository: Knowcap-V2/knowcap-marketing
Length of output: 13660
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="app/components/home-commitment.tsx"
echo "---- docs DESIGN guidelines already loaded ----"
echo "---- $FILE: lines 1-80 (numbered) ----"
awk '{printf "%5d %s\n", NR, $0}' "$FILE" | sed -n '1,80p'
echo "---- $FILE: lines 410-480 (numbered) ----"
awk '{printf "%5d %s\n", NR, $0}' "$FILE" | sed -n '410,480p'
echo "---- $FILE: search for IntersectionObserver / Reveal ----"
rg -n "IntersectionObserver|Reveal" "$FILE" || true
echo "---- $FILE: search for fonts.googleapis.com / `@import` ----"
rg -n "fonts\.googleapis\.com|`@import`|next/font" "$FILE" || trueRepository: Knowcap-V2/knowcap-marketing
Length of output: 9360
Self-host fonts and add a fallback for Reveal’s IntersectionObserver.
- Line 25:
@importloads fonts fromfonts.googleapis.comin the browser; switch tonext/font/googleso the landing page doesn’t make third-party font requests. - Lines 438-443:
RevealassumesIntersectionObserverworks; if it’s missing/blocked, elements can stayopacity: 0(onlyprefers-reduced-motionis handled). Add a resilience fallback that sets the reveal state to visible whenIntersectionObserverisn’t available.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/components/home-commitment.tsx` at line 25, Replace the external `@import`
font call by using Next's font loader (next/font/google) and apply the resulting
className to the component (e.g., import the Fraunces/Inter fonts via
next/font/google and use the returned font.className on the root element instead
of the `@import` string). In the Reveal initialization code (the block using
Reveal and the prefers-reduced-motion check), add a guard for missing/blocked
IntersectionObserver (e.g., if (typeof IntersectionObserver === 'undefined') {
/* mark items as revealed or call the reveal routine */ }) so elements are set
to visible when IntersectionObserver is unavailable; update the same
effect/initializer that currently references Reveal and prefers-reduced-motion
to flip the reveal state or call the reveal handler in that fallback path.
| </head> | ||
| <body> | ||
| <h1>Design Shotgun — Knowcap Commitment Homepage <span class="tag">2026-06-10</span></h1> | ||
| <p class="sub">Same locked copy on every variant ("Your company's deepest knowledge is its commitments and the risks against them. Knowcap makes sure they're kept."). Five design languages — different fonts, palettes, and layouts per the anti-convergence rule. Click any card to open the full variant.</p> |
There was a problem hiding this comment.
Index is out of sync with the exploration set.
This page says there are five variants and only links V1–V5, but this layer also introduces V6a/V6b. The hub should include those entries (or update the copy to explicitly explain why they’re excluded), otherwise reviewers can’t reach all variants from the index.
Suggested patch
- <p class="sub">... Five design languages — different fonts, palettes, and layouts ...</p>
+ <p class="sub">... Seven design explorations — different fonts, palettes, and layouts ...</p>
<div class="grid">
+ <div class="card">
+ <h2>V6a — Brass Dossier × Product Window</h2>
+ <p class="meta">Brass editorial dossier + product window hybrid</p>
+ <div class="frame"><iframe src="v6a-brass-product.html" loading="lazy" tabindex="-1"></iframe><a class="cover" href="v6a-brass-product.html" aria-label="Open V6a"></a></div>
+ <div class="actions"><a class="btn btn-go" href="v6a-brass-product.html">Open V6a full page →</a></div>
+ </div>
+
+ <div class="card">
+ <h2>V6b — Editorial Light × Product Window</h2>
+ <p class="meta">Editorial light winner with product-window cover composition</p>
+ <div class="frame"><iframe src="v6b-editorial-product.html" loading="lazy" tabindex="-1"></iframe><a class="cover" href="v6b-editorial-product.html" aria-label="Open V6b"></a></div>
+ <div class="actions"><a class="btn btn-go" href="v6b-editorial-product.html">Open V6b full page →</a></div>
+ </div>Also applies to: 33-68
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/brand/design-explorations/shotgun-2026-06-10/index.html` at line 31, The
index copy and hub links are out of sync: the paragraph with class "sub" that
states "Five design languages" and the hub entries listing V1–V5 must be updated
to reflect the new V6a/V6b variants; either add entries/links for V6a and V6b to
the hub (so clicking opens those full variants) or change the paragraph to
explicitly state why V6a/V6b are excluded. Locate the paragraph node with class
"sub" and the hub card/list rendering V1–V5 and add two new card/link elements
for V6a and V6b (matching the existing V# structure) or edit the copy text to
call out the exclusion and ensure any navigation components that enumerate
variants (the V1–V5 hub list) are kept consistent.
| <!-- ============ cover photo — the app window ============ --> | ||
| <figure class="cover reveal" style="--d: 200ms;"> | ||
| <div class="cover-stage"> | ||
| <div class="app-window" role="img" aria-label="Knowcap inbox showing an extracted client commitment, the risk against it, and a verified claim an agent is acting on"> |
There was a problem hiding this comment.
Decorative app-window mock exposes non-functional controls to keyboard users.
The role="img" container includes focusable <button> elements (Confirm/Review) that do nothing. This creates misleading tab stops and broken keyboard UX. Use non-focusable elements for visual-only controls (or remove them from tab order and accessibility tree).
Suggested patch
-<button class="btn-confirm" type="button">Confirm</button>
+<span class="btn-confirm" aria-hidden="true">Confirm</span>
-<button class="btn-review" type="button">Review</button>
+<span class="btn-review" aria-hidden="true">Review</span>Also applies to: 906-907, 920-921
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/brand/design-explorations/shotgun-2026-06-10/v6b-editorial-product.html`
at line 857, The decorative "app-window" mock (the div with class "app-window"
and role="img") currently contains focusable <button> elements (the
"Confirm"/"Review" visual controls) that are non-functional; update those
visual-only controls so they are not keyboard-focusable and are removed from the
accessibility tree—either replace the <button> elements with non-interactive
elements (e.g., <span>/<div>) or set attributes to make them inert (e.g.,
tabindex="-1" and aria-hidden="true" on those controls), and apply the same
change to the other identical mock instances that contain these buttons (the
other app-window occurrences).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Full homepage replacement. One page, one design, commitment-thesis copy. The B-vs-D middleware rotation is retired; /a /b /c /d stay reachable for reference and future ad landing pages.
Copy (Hassan-locked 2026-06-10)
H1: Your company's deepest knowledge is its commitments and the risks against them. Knowcap makes sure they're kept.
product-marketing→copywriting→ogilvy→stop-slop→great-web-copy8-criteria gate (passed)docs/content-pipeline/drafts/homepage-commitment-copy.mdTruthfulness fixes vs the old variants
Design
Self-contained
components/home-commitment.tsx(no ThemedShell, no theme switcher — one confident design per Hassan's call). DESIGN.md locked tokens: cream #FBFAF8 / ink #18181B / green #1F6B3A, Space Grotesk + JetBrains Mono. "Commitment ledger" language: §-numbered register sections, mono marginalia, live-ledger hero exhibit, VERIFIED stamp on the 80-seconds story.QA:
web-design-guidelines+baseline-ui— focus-visible rings, AA contrast bumps on dark dim text, heading hierarchy fix, reduced-motion + noscript reveal fallbacks. Verified in a real browser at 1440px + 390px: all 23 reveals fire, zero console errors,next buildgreen.Files
app/components/home-commitment.tsx(new, self-contained)app/app/page.tsx(renders it)app/middleware.ts(rotation removed; admin/API guards unchanged).agents/product-marketing.md(positioning context for marketing skills)docs/content-pipeline/drafts/homepage-commitment-copy.md(copy source of truth)🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Documentation
Chores