redesign(marketing): product-as-hero, section cull, audit-chain + value-prop - #208
Open
ejay-dev wants to merge 7 commits into
Open
redesign(marketing): product-as-hero, section cull, audit-chain + value-prop#208ejay-dev wants to merge 7 commits into
ejay-dev wants to merge 7 commits into
Conversation
The bento layout is solid; strip the AI-vibe chrome carried over from earlier. - Remove the per-card mouse-follow spotlight; keep a clean hover (subtle lift + border/accent brighten via group-hover). - Remove the grid-texture overlay and neutralise the blue-tinted background gradient (replaced with a near-neutral dark + a subtle white top glow). - Crisp up the 94% posture arc: drop the drop-shadow filter and the blurred glow-layer circle. - Fix the masked teal: the "Approved" enforcement chips used teal, which renders grey under the brand override — switched to emerald so Blocked (red) / Approved (green) read as intentional semantic states. 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:
📝 WalkthroughWalkthroughValueProposition: remove interactive spotlight and glow, rework Compliance Posture into per-framework progress rows, change Approved pills to emerald, and update section background. AuditChainSection: add AuditBoard with pointer-following audit-bot, facts
ChangesValueProposition Component Visual Cleanup
AuditChainSection additions
Homepage composition, hero, and defaults
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRsPoem
🚥 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)
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: eb4f10de7d
ℹ️ 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".
| className="group relative h-full overflow-hidden rounded-2xl border border-white/[0.06] bg-white/[0.02] transition-colors duration-300 hover:border-white/[0.1]" | ||
| > | ||
| {/* Mouse spotlight */} | ||
| <div className="group relative h-full overflow-hidden rounded-2xl border border-white/[0.06] bg-white/[0.02] transition-all duration-300 hover:-translate-y-0.5 hover:border-white/[0.12]"> |
There was a problem hiding this comment.
When a visitor has prefers-reduced-motion: reduce, noMotion still disables the Framer entrance animations, but this new CSS hover transform is unconditional; the global reduced-motion rule only shortens transitions, so hovering any of the five GlassCards still moves the card. Gate the transform with motion-safe:hover:-translate-y-0.5 or omit it when noMotion is true so this section keeps honoring the reduced-motion setting.
Useful? React with 👍 / 👎.
♿ Accessibility Test Results✅ PASSED - No critical accessibility issues found Tests Performed:
Artifacts: Download the accessibility reports from the "Artifacts" section for detailed results. |
The three prose cards under-sold what is actually a cryptographic showcase. Add a hash-chain visual as the centrepiece: three audit_log rows linked by HMAC (each row's `prev` equals the previous row's `hmac`), flowing into the Sigstore Rekor external anchor (Merkle inclusion, 05:30 UTC). Labelled illustrative — it demonstrates the mechanism, not customer data. The three pillar cards remain below as the explanation. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The posture card was a number + three stats. Make it read like the actual /app/compliance/health screen: keep the 94% arc, then render illustrative per-framework rows (SOC 2 / ISO 27001 / HIPAA) with animated bars, and demote the 47/50 · 312 · 8 figures to a compact summary footer. Still labelled "example values, not a customer claim". Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
ejay-dev
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
app/(marketing)/components/homepage/AuditChainSection.tsx (1)
44-51: 💤 Low valueConsider clarifying the comment about row linkage.
The comment states "Each row's
prevequals the previous row'shmac", but row 1024'sprevvalue (5e8b…41d) doesn't match any row in the array. Consider clarifying that this represents a mid-chain segment where row 1024 links to an earlier (not shown) row.📝 Suggested comment clarification
-// Illustrative hash-chain rows. Each row's `prev` equals the previous row's -// `hmac`, so the linkage is internally consistent — it demonstrates the -// mechanism, not real customer data. +// Illustrative hash-chain rows from the middle of a chain. Each row's `prev` +// equals the previous row's `hmac` (row 1024's prev links to an earlier row +// not shown), so the linkage is internally consistent — it demonstrates the +// mechanism, not real customer data.🤖 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/`(marketing)/components/homepage/AuditChainSection.tsx around lines 44 - 51, Update the comment and/or data so the linkage claim is accurate: either change CHAIN_ROWS[0].prev to match the hmac of the previous shown row (so each row's prev equals the previous row's hmac) or revise the comment to state this is a mid-chain segment where seq '1024' links to an earlier, not-shown row (leaving the existing values). Make the intent explicit in the comment next to the CHAIN_ROWS declaration so readers aren’t confused by seq '1024' having a prev that doesn't appear in the array.
🤖 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/`(marketing)/components/homepage/AuditChainSection.tsx:
- Around line 44-51: Update the comment and/or data so the linkage claim is
accurate: either change CHAIN_ROWS[0].prev to match the hmac of the previous
shown row (so each row's prev equals the previous row's hmac) or revise the
comment to state this is a mid-chain segment where seq '1024' links to an
earlier, not-shown row (leaving the existing values). Make the intent explicit
in the comment next to the CHAIN_ROWS declaration so readers aren’t confused by
seq '1024' having a prev that doesn't appear in the array.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 486d408d-f007-40cc-94c9-ec645130da2f
📒 Files selected for processing (2)
app/(marketing)/components/homepage/AuditChainSection.tsxapp/(marketing)/components/homepage/ValueProposition.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" language + better robot Match the AuditChain section to the OutcomeProof section's clean language and give it a properly designed agent. - Centred sans header (eyebrow / display h2 / subhead) replacing the mono-flanked treatment. - Three clean cards (icon tile + mono eyebrow + title + prose) in the same card style as the outcome cards, plus a hairline-divided "facts" bar (HMAC-SHA256 · RFC 6962 · 05:30 UTC · Append-only · Sigstore Rekor). - New custom-SVG agent — the "chain re-walker" (the nightly cron that re-walks the chain): a rounded robot head with antenna + pulse, eye-screens whose pupils track the cursor, a glow and scan beam. It patrols the cards and eases toward the pointer while hovering. lg-only; parked + still under prefers-reduced-motion. Replaces the generic lucide bot glyph. Supersedes the standalone hash-chain panel; the cards + facts bar carry the mechanism in the cleaner layout. 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. |
… robot
- Replace the mono "R3 · audit_log" / "R4 · sigstore rekor" / "postgres · rls"
eyebrows (read as AI/code-vibe) with clean human sublines under each title
("Tamper-evident by construction", etc.), matching the outcome cards'
title+subline pattern. De-mono the facts bar values too.
- Rebuild the agent as a properly detailed robot: gradient head casing with a
top highlight, side ears, a visor face screen, glowing radial-gradient eyes
with a halo (still cursor-tracking), a mouth grille, antenna pulse, and an
occasional blink. Off/parked under prefers-reduced-motion.
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. |
Replace the centred-over-stock-photo hero with a two-column layout: the claim on the left, a static replica of the /app/compliance/health posture panel (94% score ring, NDIS / Aged Care / ISO rows, cryptographic audit-chain footer) on the right. Drop the dimmed stock photo of strangers and collapse the 4 stacked radial gradients to two restrained depth layers. Panel is server-rendered HTML/SVG — fast LCP, no framer-motion. Cull the homepage from ~15 always-on sections to 9, removing redundant "how it works" duplicates and trust strips: - compliance_network / compliance_engine_demo / interactive_demo off by default (control plane can re-enable) - FrameworkTrustStrip, HomeProofStaticShell, TestimonialsSection removed from the homepage render (components retained for other surfaces) Final order: Hero -> TrustBar -> HowItWorks -> AuditChain -> ValueProp -> Industries -> Security -> OutcomeProof -> CTA. Verified: tsc + eslint clean; all 9 sections mount on scroll. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
ejay-dev
changed the title
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
app/(marketing)/components/FigmaHomepage.tsx (1)
99-260:⚠️ Potential issue | 🔴 Critical | 🏗️ Heavy liftFix homepage decision/telemetry contract for
framework_trust_strip(critical mismatch).
lib/marketing/homepage-experience.tstreatsframework_trust_stripas always-visible/non-deferred (and includes it in critical sections), andtests/marketing/homepage-experience.test.tsasserts that expectation.app/(marketing)/components/FigmaHomepage.tsxnever renders any section keyedframework_trust_strip, yet itstelemetry.trackSectionRendered(...)loop reports a “rendered” section for every decision (includingframework_trust_stripwhendeferred === false).app/(marketing)/page.tsxrenders<TrustBar />, butcomponents/TrustBar.tsxis notFrameworkTrustStripand nothing maps it to theframework_trust_striphomepage key.Action: Restore the missing renderer for the
framework_trust_stripkey (e.g., render<FrameworkTrustStrip />throughrenderSection('framework_trust_strip', ...)), or remove/rename theframework_trust_stripkey from the homepage decision engine + update tests/telemetry to match what’s actually mounted on the homepage (and gate section telemetry to mounted/visible sections only).🤖 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/`(marketing)/components/FigmaHomepage.tsx around lines 99 - 260, The homepage decision/telemetry mismatch is because FormaOSHomepage never renders the "framework_trust_strip" key that the decision engine and tests expect; fix by restoring a renderer for that key (or else remove/rename the key in the decision engine and update tests). Concretely, in the FormaOSHomepage component add a renderSection('framework_trust_strip', <FrameworkTrustStrip /> , <optional minHeight>) call in the page sections where the trust strip should appear (and import the FrameworkTrustStrip component), or if you choose the alternative, update deriveHomepageSectionDecisions / decisionMapFromList and tests (tests/marketing/homepage-experience.test.ts) and telemetry usage so the key no longer exists; also ensure telemetry.trackSectionRendered only reports sections present in decisionMap/rendered output (filter sectionDecisions by keys that have a rendered component).
🧹 Nitpick comments (2)
app/(marketing)/components/HeroStaticShell.tsx (2)
82-124: ⚡ Quick winReduce CTA rendering duplication.
The primary and secondary CTA blocks duplicate nearly identical markup for external vs internal links. Consider extracting a helper component or conditionally wrapping the button content to maintain a single source of truth.
♻️ Suggested refactor pattern
// Helper to conditionally wrap button content const CTAButton = ({ href, isExternal, className, children }: { href: string; isExternal: boolean; className: string; children: React.ReactNode; }) => { const content = children; return isExternal ? ( <a href={href} className={className} rel="noopener noreferrer"> {content} </a> ) : ( <Link href={href} className={className}> {content} </Link> ); }; // Usage: <CTAButton href={primaryHref} isExternal={primaryExternal} className="mk-btn mk-btn-primary group min-h-[50px] justify-center px-7 py-4 text-base sm:text-lg" > <span>{heroCopy.primaryCtaLabel}</span> <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-1" aria-hidden="true" /> </CTAButton>🤖 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/`(marketing)/components/HeroStaticShell.tsx around lines 82 - 124, Reduce duplicated CTA markup by extracting a small helper component (e.g., CTAButton) that takes href, isExternal, className and children and conditionally renders an <a> (with rel="noopener noreferrer") or a Next.js Link; replace the duplicated primary and secondary blocks to call CTAButton with primaryHref/primaryExternal and secondaryHref/secondaryExternal respectively, passing the same className strings and children (span with heroCopy.primaryCtaLabel + ArrowRight for primary; heroCopy.secondaryCtaLabel for secondary) and preserve ArrowRight's aria-hidden and transition classes.
218-237: Extract a shared “per-framework score + progress bar row” component (HeroStaticShell ↔ ValueProposition)
app/(marketing)/components/HeroStaticShell.tsxmapsPOSTURE_FRAMEWORKSto rows renderingf.name,f.score%, and a progress bar withh-1.5 overflow-hidden rounded-full bg-white/[0.06]outer +h-full rounded-full bg-slate-300/80inner andstyle={{ width: \${f.score}%` }}`.app/(marketing)/components/homepage/ValueProposition.tsxsimilarly mapsframeworksto rows with the same structure/classes/width${f.score}%, differing mainly by usingmotion.divfor the width animation.Consider extracting the row into a shared component with an option to render
motion.divvs a staticdivto reduce duplication.🤖 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/`(marketing)/components/HeroStaticShell.tsx around lines 218 - 237, Extract the repeated "per-framework score + progress bar row" into a shared React component (e.g., FrameworkScoreRow) that accepts props: name, score, and an optional animate boolean (or optional innerComponent prop) to decide whether to render the inner bar as a motion.div or a normal div; move the outer container classes ("h-1.5 overflow-hidden rounded-full bg-white/[0.06]") and inner classes ("h-full rounded-full bg-slate-300/80") into that component, compute width from score (style={{ width: `${score}%` }}), and export it for reuse; then replace the mapping in HeroStaticShell (using static div) and ValueProposition (pass animate=true so it uses motion.div) to render FrameworkScoreRow(key={f.name} name={f.name} score={f.score} ...), and add/update prop types/TS interface for FrameworkScoreRow so consumers type-check correctly.
🤖 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.
Outside diff comments:
In `@app/`(marketing)/components/FigmaHomepage.tsx:
- Around line 99-260: The homepage decision/telemetry mismatch is because
FormaOSHomepage never renders the "framework_trust_strip" key that the decision
engine and tests expect; fix by restoring a renderer for that key (or else
remove/rename the key in the decision engine and update tests). Concretely, in
the FormaOSHomepage component add a renderSection('framework_trust_strip',
<FrameworkTrustStrip /> , <optional minHeight>) call in the page sections where
the trust strip should appear (and import the FrameworkTrustStrip component), or
if you choose the alternative, update deriveHomepageSectionDecisions /
decisionMapFromList and tests (tests/marketing/homepage-experience.test.ts) and
telemetry usage so the key no longer exists; also ensure
telemetry.trackSectionRendered only reports sections present in
decisionMap/rendered output (filter sectionDecisions by keys that have a
rendered component).
---
Nitpick comments:
In `@app/`(marketing)/components/HeroStaticShell.tsx:
- Around line 82-124: Reduce duplicated CTA markup by extracting a small helper
component (e.g., CTAButton) that takes href, isExternal, className and children
and conditionally renders an <a> (with rel="noopener noreferrer") or a Next.js
Link; replace the duplicated primary and secondary blocks to call CTAButton with
primaryHref/primaryExternal and secondaryHref/secondaryExternal respectively,
passing the same className strings and children (span with
heroCopy.primaryCtaLabel + ArrowRight for primary; heroCopy.secondaryCtaLabel
for secondary) and preserve ArrowRight's aria-hidden and transition classes.
- Around line 218-237: Extract the repeated "per-framework score + progress bar
row" into a shared React component (e.g., FrameworkScoreRow) that accepts props:
name, score, and an optional animate boolean (or optional innerComponent prop)
to decide whether to render the inner bar as a motion.div or a normal div; move
the outer container classes ("h-1.5 overflow-hidden rounded-full
bg-white/[0.06]") and inner classes ("h-full rounded-full bg-slate-300/80") into
that component, compute width from score (style={{ width: `${score}%` }}), and
export it for reuse; then replace the mapping in HeroStaticShell (using static
div) and ValueProposition (pass animate=true so it uses motion.div) to render
FrameworkScoreRow(key={f.name} name={f.name} score={f.score} ...), and
add/update prop types/TS interface for FrameworkScoreRow so consumers type-check
correctly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 85bf5bde-b22d-43fb-b0c5-ec21cf812d3c
📒 Files selected for processing (4)
app/(marketing)/components/FigmaHomepage.tsxapp/(marketing)/components/HeroStaticShell.tsxapp/(marketing)/page.tsxlib/control-plane/defaults.ts
💤 Files with no reviewable changes (1)
- app/(marketing)/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. |
…-card hero The previous product-as-hero (split layout + glassmorphic posture card) was itself a generic AI-SaaS pattern and shrank the headline's presence. Replace it with a type-led editorial hero that commits to one idea: - One oversized Sora headline, left-anchored, white with a brand-grey continuation line as a counterpoint - Neutral charcoal canvas (#1C1E1F family) instead of the blue SaaS gradient - No glass cards, no glows, no eyebrow-pill — a single monospace label - The only product artifact is a real append-only evidence-chain ledger rendered in JetBrains Mono as a columnar audit log (status glyph · time · event · NDIS/Rekor ref · hash) - Secondary CTA demoted to a quiet text link; trust line set in mono Section cull (9 sections) from the prior commit is unchanged. Verified: eslint clean; no hydration/console errors from the hero (the one dev console warning is a pre-existing CSP/eval dev-mode message); desktop + mobile screenshotted. 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
A homepage redesign aimed at killing the "AI vibe-coded" feel. Two pieces:
1. Editorial type-led hero (latest)
Replaces the old centred-text-over-stock-photo hero. (An intermediate "product-as-hero" dashboard-card version was tried and rejected — a glassmorphic card next to a shrunken headline is itself a generic AI-SaaS pattern.) The shipped hero commits to one idea:
status glyph · time · event · NDIS/Rekor ref · hash. Realism + specificity carry it, not decoration.2. Section cull: ~15 → 9
Removed redundant "how it works" duplicates and trust strips:
compliance_network,compliance_engine_demo,interactive_demooff by default (control-plane can re-enable)FrameworkTrustStrip,HomeProofStaticShell,TestimonialsSectionremoved from the homepage render (components retained for other surfaces)3. Audit-chain + value-prop polish (earlier commits)
Verification
eslintclean; no hydration/console errors from the hero (one dev-only CSP/eval warning is pre-existing).Deliberately left for a follow-up
marketing.css:1273) contradicts the "no cyan glow" rule.🤖 Generated with Claude Code