feat: resolve UX gap issues #28-31 (2026-02-20)#32
Merged
ryota-murakami merged 4 commits intomainfrom Feb 20, 2026
Merged
Conversation
Closes #31 - Add tracking-tight to H2 sub-headings on landing page (4 headings) - Add tracking-tighter to 404 H1 and tracking-tight to 404 H2 - Hero H1 already had tracking-tight (-1.2px at 48px)
Root cause: `--spacing-md: 16px` in @theme collided with Tailwind CSS v4's `max-w-md` utility, resolving to 16px instead of 28rem. Replaced `max-w-md` with `max-w-[28rem]` in not-found.tsx and ExamplePage.tsx. Added `w-full` to inner container for proper flex expansion.
Adds subtle visual depth to the landing page hero section: - Radial gradient glow from var(--muted) for soft background - Fine dot-grid overlay (24px grid) for technical aesthetic - Rounded container with increased padding - Adapts to both light and dark themes via CSS variables - CSS-only, no animation (no prefers-reduced-motion concern)
Adds a minimal footer to the landing page with: - Project name and description - Links to GitHub repo and React documentation - Responsive layout (stacks vertically on mobile via sm:flex-row) - border-t separator and mt-auto for sticky bottom placement - Hover states with color transition on links
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThe PR enhances the landing page layout with decorative visual elements (radial glow, dotted grid overlays), updates typography with tracking-tight for tighter spacing, reorganizes container structures to be flex-based, adds a Footer component with navigation links, and refines the 404 error page layout and styling for better content wrapping. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
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)
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.
🧹 Nitpick comments (2)
src/views/LandingPage.tsx (1)
22-35: Consider addingaria-hidden="true"to purely decorative overlay divs.Both the radial glow and dot-grid divs are positioned absolutely with no text or semantic content;
aria-hidden="true"tells assistive technologies to skip them entirely and avoids any potential AT traversal noise.♻️ Proposed fix
<div + aria-hidden="true" className="pointer-events-none absolute inset-0" style={{ background: 'radial-gradient(ellipse 80% 60% at 50% 30%, var(--muted), transparent)', }} /> {/* Fine dot grid overlay */} <div + aria-hidden="true" className="pointer-events-none absolute inset-0 opacity-[0.4]" style={{ backgroundImage: 'radial-gradient(circle, var(--border) 1px, transparent 1px)', backgroundSize: '24px 24px', }} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/views/LandingPage.tsx` around lines 22 - 35, The two purely decorative overlay divs in LandingPage.tsx (the radial glow div with className "pointer-events-none absolute inset-0" and the dot-grid overlay div with className "pointer-events-none absolute inset-0 opacity-[0.4]") should be marked aria-hidden="true" so screen readers ignore them; update those two div elements (the radial-gradient background div and the radial-gradient circle backgroundImage div) to include aria-hidden="true" attributes.src/app/not-found.tsx (1)
22-35: Inconsistent Tailwind token syntax across the same PR.
not-found.tsxuses shorthand Tailwind tokens (bg-primary,border-border,hover:bg-secondary,text-primary-foreground), whileLandingPage.tsxuses explicit CSS variable syntax throughout (bg-[var(--primary)],border-[var(--border)], etc.). Theglobals.cssfile properly bridges these via its@themeblock, mapping--color-primary: var(--primary)and so on, so both approaches resolve correctly. However, for consistency within this PR, consider standardizing on one approach across both files.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/not-found.tsx` around lines 22 - 35, The two Link elements in not-found.tsx use shorthand Tailwind tokens (e.g., bg-primary, border-border, text-primary-foreground, hover:bg-secondary) which is inconsistent with LandingPage.tsx's explicit CSS variable syntax (bg-[var(--primary)], border-[var(--border)], etc.); pick one convention and make not-found.tsx match it — update the className values on the Link components (and any related tokens like startPath usage if it carries classes) to use the same CSS-variable style used in LandingPage.tsx (or conversely convert LandingPage.tsx to shorthand) so the token syntax is consistent across the PR.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/app/not-found.tsx`:
- Around line 22-35: The two Link elements in not-found.tsx use shorthand
Tailwind tokens (e.g., bg-primary, border-border, text-primary-foreground,
hover:bg-secondary) which is inconsistent with LandingPage.tsx's explicit CSS
variable syntax (bg-[var(--primary)], border-[var(--border)], etc.); pick one
convention and make not-found.tsx match it — update the className values on the
Link components (and any related tokens like startPath usage if it carries
classes) to use the same CSS-variable style used in LandingPage.tsx (or
conversely convert LandingPage.tsx to shorthand) so the token syntax is
consistent across the PR.
In `@src/views/LandingPage.tsx`:
- Around line 22-35: The two purely decorative overlay divs in LandingPage.tsx
(the radial glow div with className "pointer-events-none absolute inset-0" and
the dot-grid overlay div with className "pointer-events-none absolute inset-0
opacity-[0.4]") should be marked aria-hidden="true" so screen readers ignore
them; update those two div elements (the radial-gradient background div and the
radial-gradient circle backgroundImage div) to include aria-hidden="true"
attributes.
ryota-murakami
added a commit
that referenced
this pull request
Feb 20, 2026
The footer added in PR #32 introduced a second "React Docs" link, causing Playwright strict mode to fail on getByRole. Scope selectors to the hero <header> element.
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.
Summary
Bulk resolution of UX gap issues detected by the SaaS landing page audit (66/100 score). All 4 moderate-priority gaps addressed.
Changes per Issue
Issue #31: Typography tracking-tight
tracking-tightto 4 H2 sub-headings in LandingPagetracking-tighterto 404 H1,tracking-tightto 404 H2Issue #30: Fix 404 page layout
--spacing-md: 16pxin@themecollided with Tailwind v4'smax-w-md, resolving to 16px instead of 448pxmax-w-md→max-w-[28rem]in not-found.tsx and ExamplePage.tsxw-fullto inner container for proper flex expansionIssue #29: Hero visual impact
var(--muted)for soft background depthIssue #28: Footer section
sm:flex-row)mt-autowith flex column parent for sticky bottom placementVerification
Summary by CodeRabbit
Release Notes
New Features
Style