maxmustermann/hydrogen
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge pull request #102 from Shopify/404-style-updates

Browse source 
[Template] Update 404 Styles
This commit is contained in:
Ben Wolfram 2021-11-05 13:30:14 -05:00 committed by GitHub
parent e9237990de 582e297b33
commit ab6c666b5d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
packages/dev/src/components/NotFound.server.jsx
View file

@ -11,29 +11,19 @@ import ProductCard from './ProductCard.server';
function NotFoundHero() {
return (
<div
className="background-repeat py-16 border-b-2 border-black"
style={{
backgroundImage: `url("data:image/svg+xml,%3Csvg width='216' height='202' viewBox='0 0 216 202' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)' stroke='%23000' stroke-opacity='.5'%3E%3Cpath d='M43.5 1v200M86.5 1v200M129.5 1v200M172.5 1v201M215.5 2e-8V207M2e-8 165H215M2e-8 122H215M2e-8 79H215M2e-8 36H215M2e-8 .5 215 .500009'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h216v202H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")`,
}}
>
<div className="max-w-3xl mx-4 md:mx-auto">
<div className="p-8 md:p-16 my-8 bg-white border-2 border-black">
<p className="text-black text-sm font-bold font-mono mb-3 uppercase">
404
</p>
<h1 className="text-black text-2xl md:text-5xl font-black mb-4">
Page not found
</h1>
<p className="text-2xl text-black">
We couldn’t find the page you’re looking for. Try checking the URL
or heading back to the home page.
</p>
</div>
<div className="py-10 border-b border-gray-200">
<div className="max-w-3xl text-center mx-4 md:mx-auto">
<h1 className="text-gray-700 text-5xl font-bold mb-4">
We&#39;ve lost this page
</h1>
<p className="text-xl m-8 text-gray-500">
We couldn’t find the page you’re looking for. Try checking the URL or
heading back to the home page.
</p>
<Button
className="w-full md:mx-auto md:w-96"
url="/"
label="Take me to the home page"
className="w-full md:w-auto"
/>
</div>
</div>
@ -57,9 +47,10 @@ export default function NotFound({country = {isoCode: 'US'}}) {
const products = data ? flattenConnection(data.products) : [];
return (
<Layout hero={<NotFoundHero />}>
<Layout>
<NotFoundHero />
<div className="my-8">
<p className="mb-8 text-sm text-black font-bold font-mono tracking-wider uppercase">
<p className="mb-8 text-lg text-black font-medium uppercase">
Products you might like
</p>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">