Skip to content

Commit

Permalink
add main landmark to error pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@will0684
will0684 committed Oct 22, 2024
1 parent ca7788d commit fba2c80
Show file tree
Hide file tree
Showing 5 changed files with 791 additions and 779 deletions.
210 changes: 106 additions & 104 deletions pages/404.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,121 +109,123 @@ export default function error404(props) {
<meta property="twitter:image" content={`${t("metaImage")}`} />
<meta property="twitter:image:alt" content={`${t("siteTitle")}`} />
</Head>
<div className="min-h-screen relative">
<section className="layout-container pb-44">
<div className="pt-6">
<img
src={`https://www.canada.ca${
props.locale === "en"
? pageData.scGcImages[0].scImageEn._path
: pageData.scGcImages[0].scImageFr._path
}`}
alt={
props.locale === "en"
? pageData.scGcImages[0].scImageAltTextEn
: pageData.scGcImages[0].scImageAltTextFr
}
width={575}
height={59}
/>
</div>
<div className="flex flex-col lg:flex-row justify-between items-center lg:items-start mt-8">
<div>
<div className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 xl:h-400px lg:h-500px mb-8 lg:mb-0">
<h1 className="font-bold font-display mb-4">
{pageData.scContentEn.json[0].content[0].value}
</h1>
<p className="font-bold font-body mb-8">
{pageData.scContentEn.json[1].content[0].value}
</p>
<p className="font-body text-sm mb-4 leading-30px">
{pageData.scContentEn.json[2].content[0].value}
</p>
<div className="flex">
<span className="error404-link" />
<p className="font-body text-sm leading-30px">
{pageData.scContentEn.json[3].content[0].value}
<Link
href="/en/home"
locale={false}
className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
>
{pageData.scContentEn.json[3].content[1].value}
</Link>
<main>
<div className="min-h-screen relative">
<section className="layout-container pb-44">
<div className="pt-6">
<img
src={`https://www.canada.ca${
props.locale === "en"
? pageData.scGcImages[0].scImageEn._path
: pageData.scGcImages[0].scImageFr._path
}`}
alt={
props.locale === "en"
? pageData.scGcImages[0].scImageAltTextEn
: pageData.scGcImages[0].scImageAltTextFr
}
width={575}
height={59}
/>
</div>
<div className="flex flex-col lg:flex-row justify-between items-center lg:items-start mt-8">
<div>
<div className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 xl:h-400px lg:h-500px mb-8 lg:mb-0">
<h1 className="font-bold font-display mb-4">
{pageData.scContentEn.json[0].content[0].value}
</h1>
<p className="font-bold font-body mb-8">
{pageData.scContentEn.json[1].content[0].value}
</p>
<p className="font-body text-sm mb-4 leading-30px">
{pageData.scContentEn.json[2].content[0].value}
</p>
<div className="flex">
<span className="error404-link" />
<p className="font-body text-sm leading-30px">
{pageData.scContentEn.json[3].content[0].value}
<Link
href="/en/home"
locale={false}
className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
>
{pageData.scContentEn.json[3].content[1].value}
</Link>
</p>
</div>
</div>
</div>
<div className="flex items-center justify-center circle-background my-8 mx-4 lg:mt-0 lightbulb-bg shrink-0">
<span className="relative lightbulb">
<img
src={`https://www.canada.ca${
props.locale === "en"
? pageData.scImageList[0].scImageEn._path
: pageData.scImageList[0].scImageFr._path
}`}
alt=""
/>
</span>
</div>
<div>
<div
className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 xl:h-400px lg:h-500px mb-8 lg:mb-0"
lang="fr"
>
<h1 className="font-bold font-display mb-4">
{pageData.scContentFr.json[0].content[0].value}
</h1>
<p className="font-bold font-body mb-8">
{pageData.scContentFr.json[1].content[0].value}
</p>
<p className="font-body text-sm mb-4 leading-30px">
{pageData.scContentFr.json[2].content[0].value}
</p>
<div className="flex">
<span className="error404-link" />
<p className="font-body text-sm leading-30px">
{pageData.scContentFr.json[3].content[0].value}
<Link
href="/fr/accueil"
locale={false}
className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
>
{pageData.scContentFr.json[3].content[1].value}
</Link>
</p>
</div>
</div>
</div>
</div>
<div className="flex items-center justify-center circle-background my-8 mx-4 lg:mt-0 lightbulb-bg shrink-0">
<span className="relative lightbulb">
</section>
<footer className="h-100px w-screen bg-footer-background-color absolute bottom-0">
<div className="layout-container flex justify-between lg:flex-row-reverse pt-4 lg:pt-0 lg:mt-8">
<ActionButton
id="404TopOfPageButton"
href="#"
custom="text-left w-32 flex flex-col lg:hidden"
text="Top of page / Haut de la page"
icon="icon-up-caret"
iconEnd
/>
<span className="relative footer-logo">
<img
src={`https://www.canada.ca${
props.locale === "en"
? pageData.scImageList[0].scImageEn._path
: pageData.scImageList[0].scImageFr._path
? pageData.scGcImages[1].scImageEn._path
: pageData.scGcImages[1].scImageFr._path
}`}
alt=""
alt={
props.locale === "en"
? pageData.scGcImages[1].scImageAltTextEn
: pageData.scGcImages[1].scImageAltTextFr
}
/>
</span>
</div>
<div>
<div
className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 xl:h-400px lg:h-500px mb-8 lg:mb-0"
lang="fr"
>
<h1 className="font-bold font-display mb-4">
{pageData.scContentFr.json[0].content[0].value}
</h1>
<p className="font-bold font-body mb-8">
{pageData.scContentFr.json[1].content[0].value}
</p>
<p className="font-body text-sm mb-4 leading-30px">
{pageData.scContentFr.json[2].content[0].value}
</p>
<div className="flex">
<span className="error404-link" />
<p className="font-body text-sm leading-30px">
{pageData.scContentFr.json[3].content[0].value}
<Link
href="/fr/accueil"
locale={false}
className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
>
{pageData.scContentFr.json[3].content[1].value}
</Link>
</p>
</div>
</div>
</div>
</div>
</section>
<footer className="h-100px w-screen bg-footer-background-color absolute bottom-0">
<div className="layout-container flex justify-between lg:flex-row-reverse pt-4 lg:pt-0 lg:mt-8">
<ActionButton
id="404TopOfPageButton"
href="#"
custom="text-left w-32 flex flex-col lg:hidden"
text="Top of page / Haut de la page"
icon="icon-up-caret"
iconEnd
/>
<span className="relative footer-logo">
<img
src={`https://www.canada.ca${
props.locale === "en"
? pageData.scGcImages[1].scImageEn._path
: pageData.scGcImages[1].scImageFr._path
}`}
alt={
props.locale === "en"
? pageData.scGcImages[1].scImageAltTextEn
: pageData.scGcImages[1].scImageAltTextFr
}
/>
</span>
</div>
</footer>
</div>
</footer>
</div>
</main>
</>
);
}
Expand Down
Loading

0 comments on commit fba2c80

Please sign in to comment.