Create not-found.tsx #40
There are no files selected for viewing
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| "use client"; | ||
|
|
||
| import React from "react"; | ||
| import Link from "next/link"; | ||
| import { Home, MoveLeft } from "lucide-react"; | ||
| import { Button } from "@/components/ui/Button"; | ||
|
|
||
| export default function NotFound() { | ||
| return ( | ||
| /* Layout synced with Hero: pt-32, pb-20, background black */ | ||
| <section className="relative min-h-screen pt-8 pb-20 overflow-hidden bg-black flex flex-col items-center justify-center"> | ||
| {/* Exact Background Glow logic from Hero */} | ||
| <div className="absolute top-0 left-1/2 -translate-x-1/2 w-250 h-150 bg-blue-500/10 blur-[120px] rounded-full pointer-events-none" /> | ||
|
|
||
| {/* Constraints matched to Hero: max-w-5xl, px-4 */} | ||
| <div className="max-w-5xl mx-auto px-4 text-center relative z-10 w-full flex flex-col items-center"> | ||
| {/* Status Badge - Hero style animation */} | ||
| <div className="mb-8 inline-flex items-center gap-2 px-3 py-1 rounded-full border border-blue-500/20 bg-blue-500/5 text-blue-400 text-xs font-semibold uppercase tracking-wider animate-in fade-in slide-in-from-bottom-3 duration-700"> | ||
|
There was a problem hiding this comment. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
# Check for tailwindcss-animate or tw-animate-css in package.json
echo "=== package.json dep check ==="
grep -E "tailwindcss-animate|tw-animate-css" package.json 2>/dev/null || echo "NOT FOUND in package.json"
# List all dependencies to see what animation-related packages exist
echo "=== All dependencies in package.json ==="
cat package.json | grep -A 50 '"dependencies"' | head -30
# Check for the plugin import in CSS globals
echo "=== CSS globals import check ==="
find . -type f \( -name "*.css" -o -name "*.scss" \) | head -10 | xargs grep -l "tailwindcss-animate\|tw-animate-css\|@tailwind" 2>/dev/null | head -5
# Check tailwind config for plugin registration
echo "=== tailwind config files ==="
find . -type f -name "tailwind.config.*" -o -name "tailwind.config.js" | xargs cat 2>/dev/null
# Search for animation class usage in the file mentioned
echo "=== Animation classes in src/app/not-found.tsx ==="
grep -n "animate-in\|fade-in\|slide-in\|zoom-in" src/app/not-found.tsx 2>/dev/nullRepository: BeyteFlow/ReadmeGenAI Length of output: 1936 🏁 Script executed: npm install -D tailwindcss-animateRepository: BeyteFlow/ReadmeGenAI Length of output: 409 🏁 Script executed: #!/bin/bash
# Find tailwind config file
echo "=== Tailwind config files ==="
find . -type f \( -name "tailwind.config.*" -o -name "tailwind.config.ts" -o -name "tailwind.config.js" \) 2>/dev/null
# Find globals/global CSS
echo "=== Global CSS files ==="
find . -type f \( -name "globals.css" -o -name "global.css" -o -name "globals.scss" \) 2>/dev/null
# Check app directory structure
echo "=== App directory structure ==="
find ./src/app -type f -name "*.css" 2>/dev/null | head -10
# Check if tailwind config exists in postcss or next config
echo "=== PostCSS config ==="
find . -type f \( -name "postcss.config.*" -o -name "next.config.*" \) 2>/dev/null | head -5 | xargs cat 2>/dev/nullRepository: BeyteFlow/ReadmeGenAI Length of output: 445 🏁 Script executed: cat -n ./src/app/globals.cssRepository: BeyteFlow/ReadmeGenAI Length of output: 734 Add The `@import` "tailwindcss-animate";Without this, the animation utility classes ( 🤖 Prompt for AI Agents |
||
| <span className="relative flex h-2 w-2"> | ||
| <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span> | ||
| <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span> | ||
| </span> | ||
| Status 404: Resource Not Found | ||
| </div> | ||
|
|
||
| {/* Headline - Hero scaling: 5xl to 8xl */} | ||
| <h1 className="text-5xl md:text-8xl font-black tracking-tighter mb-8 leading-[1.1] animate-in fade-in slide-in-from-bottom-4 duration-1000"> | ||
| Lost in the <br /> | ||
| <span className="bg-linear-to-b from-white to-white/40 bg-clip-text text-transparent"> | ||
| codebase. | ||
| </span> | ||
| </h1> | ||
|
|
||
| <p className="max-w-2xl mx-auto text-gray-400 text-lg md:text-xl mb-10 leading-relaxed animate-in fade-in slide-in-from-bottom-5 duration-1000"> | ||
| The page you're looking for doesn't exist. It might have | ||
| been moved, deleted, or the repository was never initialized. | ||
| </p> | ||
|
|
||
| {/* CTA Buttons */} | ||
| <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-20 animate-in fade-in slide-in-from-bottom-6 duration-1000"> | ||
| <Button | ||
| asChild | ||
| variant="primary" | ||
| className="w-full sm:w-auto px-10 py-4 text-lg shadow-xl shadow-white/5" | ||
| > | ||
| <Link href="/"> | ||
| <Home size={20} /> | ||
| Back to Safety | ||
| </Link> | ||
| </Button> | ||
|
|
||
| <Button | ||
| variant="outline" | ||
| onClick={() => window.history.back()} | ||
| className="w-full sm:w-auto px-10 py-4 text-lg" | ||
| > | ||
| <MoveLeft size={20} /> | ||
| Go Back | ||
| </Button> | ||
|
Comment on lines
+52
to
+59
There was a problem hiding this comment.
If the user navigates directly to a 404 URL (e.g., via a bookmarked broken link), the history stack is empty and the "Go Back" button silently does nothing. Consider disabling it or hiding it when there's no previous entry, or replacing it with a fallback redirect. 💡 Suggested guard <Button
variant="outline"
- onClick={() => window.history.back()}
+ onClick={() => {
+ if (window.history.length > 1) {
+ window.history.back();
+ } else {
+ window.location.href = "/";
+ }
+ }}
className="w-full sm:w-auto px-10 py-4 text-lg"
>🤖 Prompt for AI Agents |
||
| </div> | ||
|
|
||
| <div className="w-full max-w-3xl bg-[#0a0a0a] border border-white/10 rounded-xl overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-1000"> | ||
| <div className="flex items-center justify-between px-4 py-3 bg-white/5 border-b border-white/5 text-[10px] font-mono text-gray-500 tracking-widest uppercase"> | ||
| <div className="flex gap-1.5"> | ||
| <div className="w-3 h-3 rounded-full bg-[#ff5f56]/50 shadow-inner"></div> | ||
| <div className="w-3 h-3 rounded-full bg-[#ffbd2e]/50 shadow-inner"></div> | ||
| <div className="w-3 h-3 rounded-full bg-[#27c93f]/50 shadow-inner"></div> | ||
| </div> | ||
| <span>BASH — ERROR_LOG</span> | ||
| </div> | ||
|
|
||
| <div className="p-6 md:p-8 font-mono text-sm md:text-base text-left space-y-2 leading-relaxed"> | ||
| <p className="flex items-center gap-2"> | ||
| <span className="text-blue-400 font-bold">➜</span> | ||
| <span> | ||
| readmegenai verify-route{" "} | ||
| <span className="text-gray-600">--current</span> | ||
| </span> | ||
| </p> | ||
| <p className="text-gray-400">● Analyzing repository tree...</p> | ||
| <p className="text-red-400/90 bg-red-400/5 px-2 py-0.5 rounded inline-block"> | ||
| ✗ Error: Component not found in ./pages or ./app | ||
| </p> | ||
| <p className="text-emerald-500/80"> | ||
| ✓ Suggested action: Return to root index | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| } | ||
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Stale comment:
pt-32doesn't match the appliedpt-8.The comment claims the padding-top is synced to
pt-32(matching the Hero section), but the actual class ispt-8. Update the comment or the class to be consistent.✏️ Proposed fix
📝 Committable suggestion
🤖 Prompt for AI Agents