feat(marketing): brutalist-editorial homepage POC (/home-poc) - #247
Open
ejay-dev wants to merge 7 commits into
Open
feat(marketing): brutalist-editorial homepage POC (/home-poc)#247ejay-dev wants to merge 7 commits into
ejay-dev wants to merge 7 commits into
Conversation
Replaces the editorial-monochrome POC (#246, rejected as too "AI-vibe": serif-on-paper + canonical landing skeleton) with a brutalist-editorial direction on a dark near-black canvas with one loud signal-red accent. Reference world: Stripe Press / Pitch / Bloomberg terminal. Anti-"AI-template" moves: - Type: Archivo pushed to Black + Expanded for monumental poster caps + Spline Sans Mono for all technical metadata. No Inter/Sora/Fraunces. (Production: swap --bru-sans for licensed GT America/Söhne + Druk Wide display — one var change in poc.css.) - Layout breaks the hero→trust→alt-rows→stats→CTA skeleton: newspaper masthead, full-bleed poster cover over an exposed structural grid, a terminal-style framework ledger (live aggregate count-up, coverage bars), the compliance graph drawn as an engineering schematic (FIG.01, orthogonal bus wiring, crop marks, draw-on-scroll), a numbered manifesto with giant outlined index numerals, and a red statement band. - Isolated outside the (marketing) route group (noindex); does not touch the production FigmaHomepage or shared components. Copy follows brand guardrails: no fake metrics/personas, Adelaide-anchored, AU-hosted (Sydney region) hosting note kept accurate. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds a /home-poc marketing POC: route layout with variable fonts and metadata, a scoped ChangesFormaOS Compliance Operating System POC
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 unit tests (beta)
Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 140e556501
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Comment on lines
+186
to
+187
| <a href="#" className="bru-btn bru-btn-red">Book a walkthrough <span className="bru-arrow">→</span></a> | ||
| <a href="#" className="bru-btn">Run the assessment</a> |
There was a problem hiding this comment.
On the public /home-poc route, these primary conversion actions are rendered as href="#" (the same pattern is repeated in the final and sticky CTAs), so clicking them only changes the URL fragment/scrolls instead of opening booking or assessment. Existing marketing pages route these actions through the contact CTA helpers such as demoHref/assessmentHref in lib/marketing/cta.ts; use real destinations so reviewers and users can exercise the POC end to end.
Useful? React with 👍 / 👎.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (3)
app/home-poc/_components/Reveal.tsx (1)
11-26: 💤 Low valueRemove unused
delayprop.The
delayparameter is declared in the type signature (line 17) but never used in the implementation. While the comment suggests keeping the wrapper for future reveal functionality, the unused prop adds noise.♻️ Simplify by removing unused parameter
export function Reveal({ children, className, style, }: { children: ReactNode; - delay?: number; className?: string; style?: CSSProperties; }) {🤖 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/home-poc/_components/Reveal.tsx` around lines 11 - 26, The Reveal component declares a `delay` prop in its props type but does not use it; remove `delay?: number` from the prop type to eliminate the unused parameter and keep the component signature consistent. Update the Reveal function props destructuring (the parameter object for Reveal) and its type annotation to only include `children`, `className`, and `style`, leaving the implementation unchanged so the wrapper remains for future use. Ensure any external usages pass `delay` are either removed or ignored by callers (no runtime effects) and update any related types/imports if necessary.app/home-poc/page.tsx (2)
267-271: ⚡ Quick winResolve redundant grid styling.
The
Revealwrapper has both a Tailwind class and an inline style controlling grid column span:
className="lg:col-span-5"appliesgrid-column: span 5on large screensstyle={{ gridColumn: flip ? undefined : 'span 5' }}applies the same whenflipis falseWhen
flipis false, both rules apply and the inline style overrides Tailwind. This creates confusion about which is actually controlling the layout.♻️ Simplify by using only Tailwind or only inline styles
Option 1: Use only inline styles (removes Tailwind dependency for this element):
-<Reveal className="lg:col-span-5" style={{ order: flip ? 1 : 2, gridColumn: flip ? undefined : 'span 5' }}> +<Reveal style={{ order: flip ? 1 : 2, gridColumn: flip ? undefined : 'span 5 / span 5' }}>Option 2: Use only Tailwind (more consistent with the rest of the file):
-<Reveal className="lg:col-span-5" style={{ order: flip ? 1 : 2, gridColumn: flip ? undefined : 'span 5' }}> +<Reveal + className={flip ? 'lg:col-span-6' : 'lg:col-span-5 lg:col-start-8'} + style={{ order: flip ? 1 : 2 }} +>🤖 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/home-poc/page.tsx` around lines 267 - 271, The Reveal wrapper is applying grid column via both className ("lg:col-span-5") and an inline style (style={{ order: flip ? 1 : 2, gridColumn: flip ? undefined : 'span 5' }}), causing redundancy and confusion; remove the inline gridColumn and express the column span purely with Tailwind classes by making className conditional (e.g. include "lg:col-span-5" only when flip is false or use a conditional class that toggles span and adjust order with Tailwind's order utilities), and delete the duplicated gridColumn from the style prop while keeping order controlled consistently (either via the inline order value or Tailwind order classes) so Reveal and Panel layout is driven by one source of truth.
32-121: ⚡ Quick winConsider accessibility impact of
aria-hiddenon panels.The panel components (ControlPanel, EvidencePanel, AuditPanel) use
aria-hiddento hide content from screen readers. While these appear to be decorative product vignettes based on the CSS comment "Inverted console panel (product vignette)", they contain text content (control names, owners, status labels) that might provide context.If the panels are purely decorative,
aria-hiddenis appropriate. However, if the content adds informational value, consider making it accessible or providing an equivalent text alternative.🤖 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/home-poc/page.tsx` around lines 32 - 121, These panels (ControlPanel, EvidencePanel, AuditPanel) currently hide their content from assistive tech via aria-hidden on the root <div className="bru-panel">; decide if they are purely decorative—if not, remove aria-hidden from those root divs and make them accessible by adding an explicit label (either aria-label on the bru-panel or aria-labelledby that points to the inner bru-panel-bar heading text) so screen readers get the panel context (use the existing bru-panel-bar text as the label or add a visually-hidden heading and reference it); if they truly are decorative, keep aria-hidden but ensure no meaningful information is only available visually.
🤖 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.
Nitpick comments:
In `@app/home-poc/_components/Reveal.tsx`:
- Around line 11-26: The Reveal component declares a `delay` prop in its props
type but does not use it; remove `delay?: number` from the prop type to
eliminate the unused parameter and keep the component signature consistent.
Update the Reveal function props destructuring (the parameter object for Reveal)
and its type annotation to only include `children`, `className`, and `style`,
leaving the implementation unchanged so the wrapper remains for future use.
Ensure any external usages pass `delay` are either removed or ignored by callers
(no runtime effects) and update any related types/imports if necessary.
In `@app/home-poc/page.tsx`:
- Around line 267-271: The Reveal wrapper is applying grid column via both
className ("lg:col-span-5") and an inline style (style={{ order: flip ? 1 : 2,
gridColumn: flip ? undefined : 'span 5' }}), causing redundancy and confusion;
remove the inline gridColumn and express the column span purely with Tailwind
classes by making className conditional (e.g. include "lg:col-span-5" only when
flip is false or use a conditional class that toggles span and adjust order with
Tailwind's order utilities), and delete the duplicated gridColumn from the style
prop while keeping order controlled consistently (either via the inline order
value or Tailwind order classes) so Reveal and Panel layout is driven by one
source of truth.
- Around line 32-121: These panels (ControlPanel, EvidencePanel, AuditPanel)
currently hide their content from assistive tech via aria-hidden on the root
<div className="bru-panel">; decide if they are purely decorative—if not, remove
aria-hidden from those root divs and make them accessible by adding an explicit
label (either aria-label on the bru-panel or aria-labelledby that points to the
inner bru-panel-bar heading text) so screen readers get the panel context (use
the existing bru-panel-bar text as the label or add a visually-hidden heading
and reference it); if they truly are decorative, keep aria-hidden but ensure no
meaningful information is only available visually.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 4698859b-6b42-44ed-b897-6bcf309f09b9
📒 Files selected for processing (7)
app/home-poc/_components/Ledger.tsxapp/home-poc/_components/Reveal.tsxapp/home-poc/_components/Schematic.tsxapp/home-poc/_components/StickyCTA.tsxapp/home-poc/layout.tsxapp/home-poc/page.tsxapp/home-poc/poc.css
♿ Accessibility Test Results✅ PASSED - No critical accessibility issues found Tests Performed:
Artifacts: Download the accessibility reports from the "Artifacts" section for detailed results. |
…ndustries Builds on the brutalist-editorial direction with more kinetic life and depth: - Kinetic ticker: two opposed Bloomberg-style marquees — live framework posture (acid-green %) over a red operating-creed strip. Pure CSS, pauses on reduced-motion. - Schematic rebuilt as a full-width FIG.01 engineering figure: title block, coordinate ruler, registration marks, a CONTROL hub wired out to framework / owner / evidence (red signal) and an audit drop, junction dots, a dimension line, and a legend. Draws on scroll. - Industries index: a numbered editorial index (NDIS, healthcare, financial, childcare, mental health) with hover slide + red highlight. - Restored snappy scroll-reveal motion (opacity+rise, robust on above-fold mount — the earlier clip-path version raced and hid content). - Ledger rows gain a hover state (red rule + raise). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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/home-poc/page.tsx`:
- Around line 296-305: The industry rows currently render anchor tags with
href="#" causing dead links and jump behavior; update the INDUSTRIES mapping
render so each item uses a real route or non-link semantics: replace the <a ...
href="#"> in the INDUSTRIES.map render with either a proper router Link (or
anchor with a computed href like /industries/{slug} based on the name/metadata)
or change to a <button> or <div role="button"> and handle navigation via the app
router (onClick) to avoid the "#" behavior; target the bru-idx-row
element/anchor in the map callback and ensure accessibility attributes
(aria-label/role) are set when switching to non-link semantics.
In `@app/home-poc/poc.css`:
- Around line 520-556: The hover-only affordances on .bru-idx-row
(.bru-idx-row:hover, .bru-idx-row:hover .bru-idx-name, .bru-idx-row:hover
.bru-idx-arrow) need keyboard parity: add matching :focus or preferably
:focus-visible rules so keyboard-focused rows receive the same padding-left,
color change for .bru-idx-name, and transform/color change for .bru-idx-arrow;
update selectors to include .bru-idx-row:focus-visible and
.bru-idx-row:focus-visible .bru-idx-name / .bru-idx-row:focus-visible
.bru-idx-arrow (or use a combined selector like .bru-idx-row:hover,
.bru-idx-row:focus-visible) so the visual affordances apply to both hover and
keyboard focus.
🪄 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: a9125c1e-9242-4cba-90d4-87c0ef86fb15
📒 Files selected for processing (5)
app/home-poc/_components/Reveal.tsxapp/home-poc/_components/Schematic.tsxapp/home-poc/_components/Ticker.tsxapp/home-poc/page.tsxapp/home-poc/poc.css
🚧 Files skipped from review as they are similar to previous changes (1)
- app/home-poc/_components/Schematic.tsx
Comment on lines
+520
to
+556
| .bru-idx-row:hover { | ||
| padding-left: 18px; | ||
| } | ||
| .bru-idx-num { | ||
| font-family: var(--mono); | ||
| font-size: 12px; | ||
| color: var(--ink-faint); | ||
| letter-spacing: 0.06em; | ||
| } | ||
| .bru-idx-name { | ||
| font-family: var(--sans); | ||
| font-weight: 800; | ||
| font-variation-settings: 'wght' 800, 'wdth' 112; | ||
| text-transform: uppercase; | ||
| font-size: clamp(1.4rem, 3.4vw, 2.6rem); | ||
| line-height: 1; | ||
| letter-spacing: -0.01em; | ||
| } | ||
| .bru-idx-row:hover .bru-idx-name { | ||
| color: var(--red); | ||
| } | ||
| .bru-idx-meta { | ||
| font-family: var(--mono); | ||
| font-size: 11.5px; | ||
| color: var(--ink-dim); | ||
| text-align: right; | ||
| letter-spacing: 0.04em; | ||
| } | ||
| .bru-idx-arrow { | ||
| font-family: var(--mono); | ||
| color: var(--ink-faint); | ||
| transition: transform 0.2s ease, color 0.2s ease; | ||
| } | ||
| .bru-idx-row:hover .bru-idx-arrow { | ||
| color: var(--red); | ||
| transform: translateX(5px); | ||
| } |
There was a problem hiding this comment.
Add keyboard focus-visible parity for industries rows.
Line 520 onward defines hover-only affordances; focused links should get equivalent visual treatment for keyboard navigation.
Suggested CSS patch
.bru-idx-row:hover {
padding-left: 18px;
}
+.bru-idx-row:focus-visible {
+ padding-left: 18px;
+ outline: 2px solid var(--red);
+ outline-offset: 2px;
+}
.bru-idx-name {
font-family: var(--sans);
@@
.bru-idx-row:hover .bru-idx-name {
color: var(--red);
}
+.bru-idx-row:focus-visible .bru-idx-name {
+ color: var(--red);
+}
@@
.bru-idx-row:hover .bru-idx-arrow {
color: var(--red);
transform: translateX(5px);
}
+.bru-idx-row:focus-visible .bru-idx-arrow {
+ color: var(--red);
+ transform: translateX(5px);
+}📝 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
| .bru-idx-row:hover { | |
| padding-left: 18px; | |
| } | |
| .bru-idx-num { | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| color: var(--ink-faint); | |
| letter-spacing: 0.06em; | |
| } | |
| .bru-idx-name { | |
| font-family: var(--sans); | |
| font-weight: 800; | |
| font-variation-settings: 'wght' 800, 'wdth' 112; | |
| text-transform: uppercase; | |
| font-size: clamp(1.4rem, 3.4vw, 2.6rem); | |
| line-height: 1; | |
| letter-spacing: -0.01em; | |
| } | |
| .bru-idx-row:hover .bru-idx-name { | |
| color: var(--red); | |
| } | |
| .bru-idx-meta { | |
| font-family: var(--mono); | |
| font-size: 11.5px; | |
| color: var(--ink-dim); | |
| text-align: right; | |
| letter-spacing: 0.04em; | |
| } | |
| .bru-idx-arrow { | |
| font-family: var(--mono); | |
| color: var(--ink-faint); | |
| transition: transform 0.2s ease, color 0.2s ease; | |
| } | |
| .bru-idx-row:hover .bru-idx-arrow { | |
| color: var(--red); | |
| transform: translateX(5px); | |
| } | |
| .bru-idx-row:hover { | |
| padding-left: 18px; | |
| } | |
| .bru-idx-row:focus-visible { | |
| padding-left: 18px; | |
| outline: 2px solid var(--red); | |
| outline-offset: 2px; | |
| } | |
| .bru-idx-num { | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| color: var(--ink-faint); | |
| letter-spacing: 0.06em; | |
| } | |
| .bru-idx-name { | |
| font-family: var(--sans); | |
| font-weight: 800; | |
| font-variation-settings: 'wght' 800, 'wdth' 112; | |
| text-transform: uppercase; | |
| font-size: clamp(1.4rem, 3.4vw, 2.6rem); | |
| line-height: 1; | |
| letter-spacing: -0.01em; | |
| } | |
| .bru-idx-row:hover .bru-idx-name { | |
| color: var(--red); | |
| } | |
| .bru-idx-row:focus-visible .bru-idx-name { | |
| color: var(--red); | |
| } | |
| .bru-idx-meta { | |
| font-family: var(--mono); | |
| font-size: 11.5px; | |
| color: var(--ink-dim); | |
| text-align: right; | |
| letter-spacing: 0.04em; | |
| } | |
| .bru-idx-arrow { | |
| font-family: var(--mono); | |
| color: var(--ink-faint); | |
| transition: transform 0.2s ease, color 0.2s ease; | |
| } | |
| .bru-idx-row:hover .bru-idx-arrow { | |
| color: var(--red); | |
| transform: translateX(5px); | |
| } | |
| .bru-idx-row:focus-visible .bru-idx-arrow { | |
| color: var(--red); | |
| transform: translateX(5px); | |
| } |
🤖 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/home-poc/poc.css` around lines 520 - 556, The hover-only affordances on
.bru-idx-row (.bru-idx-row:hover, .bru-idx-row:hover .bru-idx-name,
.bru-idx-row:hover .bru-idx-arrow) need keyboard parity: add matching :focus or
preferably :focus-visible rules so keyboard-focused rows receive the same
padding-left, color change for .bru-idx-name, and transform/color change for
.bru-idx-arrow; update selectors to include .bru-idx-row:focus-visible and
.bru-idx-row:focus-visible .bru-idx-name / .bru-idx-row:focus-visible
.bru-idx-arrow (or use a combined selector like .bru-idx-row:hover,
.bru-idx-row:focus-visible) so the visual affordances apply to both hover and
keyboard focus.
♿ Accessibility Test Results✅ PASSED - No critical accessibility issues found Tests Performed:
Artifacts: Download the accessibility reports from the "Artifacts" section for detailed results. |
…rutalist POC
Per feedback ("basic, needs space; remove Claude-themed stuff; bring in the
real homepage content"):
Removed the AI/affectation tells:
- Acid-green second accent → strictly one accent (red only); positive/confirmed
state now reads as neutral off-white.
- Twee magazine labels (№01 THE THESIS / ISSUE 2026 / VOL.1 / THE POINT).
- Invented copy ("Proof, not promises", "Obligations get a name on them").
Ported real production-homepage substance:
- Hero: real "Audit-ready every day — not the week before the Commission
visits" + real subheadline + real CTAs (Get Compliance Plan / Book Demo).
- Ticker: real framework packs (NDIS, Aged Care Quality, NSQHS, AHPRA, APRA
CPS 230, ISO 27001, SOC 2, HIPAA, Essential Eight).
- Three buyer-conviction paths (operators / enterprise / security reviewers).
- Live posture ledger with real control counts (61 SOC2 TSC, 93 ISO, 25 NDIS),
marked illustrative + nightly-refresh note.
- Compliance engine schematic relabelled to the real pipeline
(Obligation→Control→Task→Evidence→Audit) + a 5-step caption strip.
- 8 platform capabilities grid.
- Cryptographic audit chain (HMAC-SHA256 → Sigstore Rekor, append-only RLS) —
3 pillars + a chain-facts bar. The real differentiator.
- Real 6-industry index (healthcare, NDIS, mental health, financial,
education, government) linking to real routes.
- Outcome proof: before/after (audit prep, incident clock, posture) + a stat
ledger (8 packs / 252 controls / 102 auto-eval / 150 manual / 16 crons).
- Red band uses the real CTA line; colophon carries real trust facts.
Spacing: generous section rhythm (clamp 4.5–8.5rem) + new section primitives.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
♿ Accessibility Test Results✅ PASSED - No critical accessibility issues found Tests Performed:
Artifacts: Download the accessibility reports from the "Artifacts" section for detailed results. |
…ist POC Feedback: the №01–06 numbered index is a top AI-vibe tell; add animation; hunt similar tells. Removed decorative numbering / affectations: - The №01–06 industries index — replaced with real per-industry framework chips (HIPAA·RACGP·AHPRA·NSQHS, etc.), substance instead of numbers. - Capabilities 01–08 → corner hover-ticks, no numbers. - Conviction "01 / FOR OPERATORS" → "For operators". - Engine pipeline 01–05 → a red flow-arrow between steps. - Masthead "ADELAIDE · 34.92°S" coordinate affectation → "ADELAIDE · AU". - Ticker: dropped the repetitive "PACK" suffix; now a clean scrolling list of the real framework packs. Added motion: - HeroIntro: staggered mechanical entrance that plays on mount (LCP headline always resolves visible). - CountUp: outcome stats (8 / 252 / 102 / 150 / 16) count up on view. - Scroll reveals on capabilities, audit-chain pillars + facts, industries, before/after, stats. - Hover micro-interactions: capability corner ticks + red top-rule, industry framework-chip highlight, engine flow arrows. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
♿ Accessibility Test Results✅ PASSED - No critical accessibility issues found Tests Performed:
Artifacts: Download the accessibility reports from the "Artifacts" section for detailed results. |
…+ richer motion Per feedback on the "One connected lifecycle" section — make it far more detailed, animate it, and bring in the real product dashboard design. New: DashboardPreview — a faithful preview of the in-app /app/compliance/health + command-center dashboard, rendered in the page's monochrome+red palette: - Browser chrome, categorised sidebar with RAG dots + active state, org top bar, and the overdue/due-soon/completed status strip with a live pulse. - KPI tiles (open obligations / overdue / due this week / readiness) that count up on view. - Overall compliance-health card: animated posture gauge (pathLength), the pass/partial/fail/manual status tiles, and a drawing 12-week sparkline. - Per-framework health with animated score bars, and the top outstanding controls list (AC-6 FAIL, A.8.24 PARTIAL, …). - Stacks cleanly on mobile (sidebar collapses, KPIs/tiles go 2-col). Section restructured: heading → live dashboard (the product) → "the model behind the screen" → enhanced schematic → engine flow strip. Schematic enhanced: a LIVE READOUT panel (posture 82%, 102/252 auto-eval, blinking dot), continuous travelling bus pulses on every wire, and a slow red scan sweep. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
♻️ Duplicate comments (1)
app/home-poc/poc.css (1)
542-578:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winAdd focus-visible parity for industries rows.
Line 542, Line 560, and Line 575 apply affordances only on
:hover; keyboard focus should get equivalent treatment.Proposed patch
-.bru-idx-row:hover { +.bru-idx-row:hover, +.bru-idx-row:focus-visible { padding-left: 18px; } @@ -.bru-idx-row:hover .bru-idx-name { +.bru-idx-row:hover .bru-idx-name, +.bru-idx-row:focus-visible .bru-idx-name { color: var(--red); } @@ -.bru-idx-row:hover .bru-idx-arrow { +.bru-idx-row:hover .bru-idx-arrow, +.bru-idx-row:focus-visible .bru-idx-arrow { color: var(--red); transform: translateX(5px); }🤖 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/home-poc/poc.css` around lines 542 - 578, The :hover affordances on the industry row classes only apply visually to mouse hover; add equivalent :focus-visible rules so keyboard users receive the same feedback. Specifically, mirror .bru-idx-row:hover { padding-left: 18px; } with .bru-idx-row:focus-visible, mirror .bru-idx-row:hover .bru-idx-name { color: var(--red); } with .bru-idx-row:focus-visible .bru-idx-name, and mirror .bru-idx-row:hover .bru-idx-arrow { color: var(--red); transform: translateX(5px); } with .bru-idx-row:focus-visible .bru-idx-arrow (and ensure .bru-idx-row is keyboard-focusable via tabindex if not already).
🤖 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.
Duplicate comments:
In `@app/home-poc/poc.css`:
- Around line 542-578: The :hover affordances on the industry row classes only
apply visually to mouse hover; add equivalent :focus-visible rules so keyboard
users receive the same feedback. Specifically, mirror .bru-idx-row:hover {
padding-left: 18px; } with .bru-idx-row:focus-visible, mirror .bru-idx-row:hover
.bru-idx-name { color: var(--red); } with .bru-idx-row:focus-visible
.bru-idx-name, and mirror .bru-idx-row:hover .bru-idx-arrow { color: var(--red);
transform: translateX(5px); } with .bru-idx-row:focus-visible .bru-idx-arrow
(and ensure .bru-idx-row is keyboard-focusable via tabindex if not already).
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: a065ab5f-98b4-48e9-b5a6-4fb842d9954c
📒 Files selected for processing (4)
app/home-poc/_components/DashboardPreview.tsxapp/home-poc/_components/Schematic.tsxapp/home-poc/page.tsxapp/home-poc/poc.css
🚧 Files skipped from review as they are similar to previous changes (1)
- app/home-poc/page.tsx
♿ Accessibility Test Results✅ PASSED - No critical accessibility issues found Tests Performed:
Artifacts: Download the accessibility reports from the "Artifacts" section for detailed results. |
…s + upgrades) Transforms the POC from a short page into a complete enterprise homepage, all from real production content, in the brutalist-editorial system. New sections: - Hero stat row (8 packs / 252 controls / 100% coverage / 05:30 UTC anchor). - TrustWall: 18-framework coverage grid + "built on" infra (Vercel, Supabase, Stripe, Sentry, Resend). - HowItWorks: the 5-step enforced loop with outlined numerals; step 03 carries the red ENFORCING badge. - SecurityGrid: encryption / identity / control-mapping cards + a "what the audit trail captures" table (verified/alert). - UseCases: interactive 4-scenario selector (NDIS / healthcare / aged care / financial) with animated detail panel. - ObjectionHandling: 4 procurement objections + 3-step evaluation path + buyer-artifact badges. - FAQ: native <details> accordion with real trust/audit/security answers. - SiteFooter: full multi-column editorial footer (product / frameworks / industries / company) + colophon. Plus a comprehensive CSS design-system expansion for all of the above. Verified every new section + full page at 1440px and 390px. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
♿ Accessibility Test Results✅ PASSED - No critical accessibility issues found Tests Performed:
Artifacts: Download the accessibility reports from the "Artifacts" section for detailed results. |
…pointer HUD, texture Feedback: "still feels boring — more than just adding text." The page was visually monotonous (every section a bordered box of text) and largely static. This round adds interaction, motion and texture instead of more copy. - PostureSimulator: the playable centerpiece. Replaces the static ledger in the "live system" section — toggle 12 controls across 5 groups and the posture gauge (spring), Met/Gaps counts, and per-framework bars recompute live. Gauge + values turn red below 60%. Enable-all / reset / clear. - Pointer-reactive hero: a red crosshair HUD with live X/Y coordinates tracks the cursor, the exposed grid parallaxes, and the primary CTAs are magnetic. Engineered, not glowy. - Atmosphere layer: filmic grain + faint scanlines (kills the flat dead-black) and a red scroll-progress line. - Magnetic component + reduced-motion fallbacks throughout. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
♿ Accessibility Test Results✅ PASSED - No critical accessibility issues found Tests Performed:
Artifacts: Download the accessibility reports from the "Artifacts" section for detailed results. |
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 this is
A second-direction homepage POC at
/home-poc, replacing the editorial-monochrome attempt in #246 (rejected as too "AI-vibe" — serif-on-paper + the canonical landing skeleton).This one commits to brutalist-editorial on a dark near-black canvas with one loud signal-red accent. Reference world: Stripe Press / Pitch / Bloomberg terminal.
Isolated outside the
(marketing)route group,noindex, does not touch the productionFigmaHomepageor shared components.How it escapes the "AI-template" feel
Typography (the real lever):
--bru-sansfor a licensed GT America / Söhne + Druk Wide display — one variable change inpoc.css. (A commercial license can't be purchased in-session, so these are the closest self-hostable stand-ins.)Layout breaks the hero→trust→alt-rows→stat-band→CTA skeleton:
Interactive moments
Guardrails respected
No fake metrics/personas; Adelaide-anchored; AU-hosted (Sydney region) note kept accurate.
Verification
eval()warning from the site's security headers (React dev mode) — absent in production.Status
Direction POC for review, not a production swap. If approved: license the real display/grotesque pair, then port into
FigmaHomepageand plan the ~40-page rollout.🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Accessibility