Skip to content

Instantly share code, notes, and snippets.

@thinkjrs
Created March 6, 2024 21:42
Show Gist options
  • Save thinkjrs/6cd15a2defd1ca719be921a30bfe8aa2 to your computer and use it in GitHub Desktop.
Save thinkjrs/6cd15a2defd1ca719be921a30bfe8aa2 to your computer and use it in GitHub Desktop.
Next.js Custom 404
import React from 'react'
import { HomeLink404, DashboardLink404 } from '@/components/404Links'
export default function NotFound() {
return (
<>
<section className="bg-primary relative z-10 py-[120px]">
<div className="container mx-auto">
<div className="-mx-4 flex">
<div className="w-full px-4">
<div className="mx-auto max-w-[400px] text-center">
<h2 className="mb-2 text-[50px] font-bold leading-none text-white sm:text-[80px] md:text-[100px]">
404
</h2>
<h4 className="mb-3 text-[22px] font-semibold leading-tight text-white">
Oops!
</h4>
<p className="mb-8 text-lg text-white">
{`The page you were looking for isn't here. Maybe we messed up or you're crazy.`}
</p>
<HomeLink404 />
<DashboardLink404 />
</div>
</div>
</div>
</div>
<div className="absolute left-0 top-0 -z-10 flex h-full w-full items-center justify-between space-x-5 md:space-x-8 lg:space-x-14">
<div className="h-full w-1/3 bg-gradient-to-t from-[#FFFFFF14] to-[#C4C4C400]"></div>
<div className="flex h-full w-1/3">
<div className="h-full w-1/2 bg-gradient-to-b from-[#FFFFFF14] to-[#C4C4C400]"></div>
<div className="h-full w-1/2 bg-gradient-to-t from-[#FFFFFF14] to-[#C4C4C400]"></div>
</div>
<div className="h-full w-1/3 bg-gradient-to-b from-[#FFFFFF14] to-[#C4C4C400]"></div>
</div>
</section>
</>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment