feat: Add Custom 404 Page (not-found.tsx)#102
Open
Atharva0506 wants to merge 1 commit intoStabilityNexus:mainfrom
Open
feat: Add Custom 404 Page (not-found.tsx)#102Atharva0506 wants to merge 1 commit intoStabilityNexus:mainfrom
Atharva0506 wants to merge 1 commit intoStabilityNexus:mainfrom
Conversation
Contributor
WalkthroughAdded a new custom 404 page component ( Changes
Estimated Code Review Effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested Labels
Poem
🚥 Pre-merge checks | ✅ 4✅ 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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/not-found.tsx`:
- Around line 38-43: Replace the semantic hierarchy so the main error message
"Page Not Found" is an h1 and the large "404" remains decorative; specifically,
swap the tags so the element currently rendering "Page Not Found" (currently an
h3) becomes h1 and the element rendering "404" (currently an h2 with the big
gradient classes) becomes non-semantic/decorative (keep the styling but change
to a non-heading element or keep h2 and add aria-hidden="true") so screen
readers treat "Page Not Found" as the primary page heading; ensure only the h1
provides the main heading role and decorative "404" is excluded from AT with
aria-hidden or role="presentation".
- Line 11: Replace the invalid Tailwind utility "border-gradient-to-r" on the
header's className with a valid border style: either use a
solid/semi-transparent Tailwind border color (e.g., replace
"border-gradient-to-r from-[`#228B22`]/20 to-[`#FFBF00`]/20" with "border
border-green-700/20" or a specific hex arbitrary value like "border-[1px]
border-[`#228B22`]/20"), or implement a gradient border via CSS using border-image
with an arbitrary value (add a custom class and define "border-image:
linear-gradient(...)" in your stylesheet) on the same header element so the
border styling is actually applied.
- Line 15: The h1's class uses multiple via-* classes which override each other;
replace the multi via-* approach with a single arbitrary background gradient
value on the same h1 (the element whose className currently starts with
"text-3xl ... bg-gradient-to-r from-[`#228B22`] via-[`#5A981A`] ...") — remove the
extra via-* classes and supply a single bg-[linear-gradient(...)] (or equivalent
arbitrary value) that includes all six color stops (from, intermediate stops,
to) while keeping bg-clip-text, text-transparent and the other typography
classes intact so the intended 6-stop gradient is rendered.
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 30e2b90c-2cc3-40ff-b848-6b3dae5cfdd9
📒 Files selected for processing (1)
app/not-found.tsx
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.
Addressed Issues
Fixes #101
What Changed
Added
app/not-found.tsx— Next.js automatically renders this file whenever a route is not found.Key implementation details:
Homeicon, consistent with repo icon conventions<Footer />componenth2/h3), proper contrast ratios via Tailwind color choicesScreenshots/Recordings
Additional Notes
No new dependencies introduced. Uses only existing project primitives:
Link(Next.js),Footer(local component),Home(Lucide), and Tailwind utility classes already present in the project.AI Usage Disclosure
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters.
Checklist
Summary by CodeRabbit