Skip to content

feat: add responsive 404 error page with modern design and decorations #255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed

erison7596 wants to merge 1 commit into quicksnip-dev:main from erison7596:main

Closed

feat: add responsive 404 error page with modern design and decorations #255

Changes from all commits

Commits

Show all changes

Select commit

feat: add responsive 404 error page with modern design and decorations

erison7596 Feb 6, 2025

File filter

Filter by extension

Conversations

Jump to

Jump to file

Failed to load files.

Loading

Diff view

Diff view

1 change: 1 addition & 0 deletions public/404.svg

Show comments View file Open in desktop

Loading

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

25 changes: 25 additions & 0 deletions src/components/NotFound.tsx

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,25 @@
	import React from "react";
	import svg404 from "public/404.svg"; // Altere para o caminho correto da imagem 404
Copy link Collaborator @Mathys-Gasnier Mathys-Gasnier Feb 7, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. Please make the comment in english

	const NotFound: React.FC = () => {
	return (
	<div className="notfound-container">
	<div className="notfound-content">
	<img src={svg404} alt="404" className="notfound-image-404" />
	<h1 className="notfound-title">Oops! Page Not Found</h1>
	<p className="notfound-description">
	We’re sorry, the page you’re looking for cannot be found.
	</p>
	<a href="/" className="notfound-back-button">
	Go Back to Home
	</a>
	</div>
	<div className="notfound-decorations">
	<div className="notfound-ellipse notfound-ellipse-1"></div>
	<div className="notfound-ellipse notfound-ellipse-2"></div>
	</div>
	</div>
	);
	};

	export default NotFound;

Loading