Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | 1x 1x 1x 1x 1x 1x 1x | import Image from 'next/legacy/image'
import Link from 'next/link'
import MetaData from '../components/MetaData'
import { GetServerSideProps } from 'next'
interface Data {
title: string
desc: string
author: string
keywords: string
service: string
creator: string
accessRights: string
}
interface IndexProps {
locale: string
meta: {
data_en: Data
data_fr: Data
}
}
const Index = (props: IndexProps) => {
return (
<div
role="main"
className="mx-auto h-screen bg-splash-page bg-cover bg-center p-12 px-6"
>
<MetaData language="en" data={props.meta}></MetaData>
<div className="m-auto flex flex-col items-center justify-center">
<div className="z-10 h-auto w-[18.75rem] bg-white xl:w-[31.25rem]">
<h1 className="sr-only">service.canada.ca-digital-center</h1>
<div className="mx-auto h-auto w-64 pt-6 xl:mx-0 xl:w-2/3 xl:px-6">
<Image
src="/sig-blk-en.svg"
alt="Government of Canada / Gouvernement du Canada logo"
width={10}
height={1}
layout="responsive"
objectFit="scale-down"
></Image>
</div>
<div className="container mx-auto flex w-max py-11 font-display">
<div className="grid grid-cols-2 gap-2 xl:gap-6">
<Link
href="/en/my-dashboard"
className="grid place-items-center whitespace-pre rounded border border-deep-blue-medium bg-deep-blue-medium px-10 py-2 text-center font-display text-white hover:bg-bright-blue-dark focus:ring-1 focus:ring-black focus:ring-offset-2 active:bg-deep-blue-active"
role="button"
draggable="false"
lang="en"
id="english-button"
>
English
</Link>
<Link
href="/fr/mon-tableau-de-bord"
className="grid place-items-center whitespace-pre rounded border border-deep-blue-medium bg-deep-blue-medium px-10 py-2 text-center font-display text-white hover:bg-bright-blue-dark focus:ring-1 focus:ring-black focus:ring-offset-2 active:bg-deep-blue-active"
role="button"
draggable="false"
lang="fr"
id="french-button"
>
Français
</Link>
</div>
</div>
</div>
<div className="text-p relative flex h-auto w-[18.75rem] min-w-[18.75rem] justify-between bg-gray-light p-6 py-8 xl:w-[31.25rem] xl:items-center">
<div className="xl:text-p w-28 text-base text-bright-blue-dark xl:w-max">
<Link
href="https://www.canada.ca/en/transparency/terms.html"
className="splash-a mr-0 inline-block w-28 text-lg hover:underline xl:w-max"
lang="en"
data-cy="terms"
>
Terms & conditions
</Link>
<span> • </span>
<Link
href="https://www.canada.ca/fr/transparence/avis.html"
className="inline-block text-lg hover:underline"
lang="fr"
data-cy="avis"
>
Avis
</Link>
</div>
<img className="h-auto w-24 xl:w-28" src="/wmms-blk.svg" alt="" />
</div>
</div>
</div>
)
}
Index.getLayout = function PageLayout(page: JSX.Element) {
return <>{page}</>
}
export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
/* Place-holder Meta Data Props */
const meta = {
data_en: {
title: 'My Service Canada Account - Canada.ca',
desc: 'English',
author: 'Service Canada',
keywords: '',
service: 'ESDC-EDSC_MSCA-MSDC-SCH',
creator: 'Employment and Social Development Canada',
accessRights: '1',
},
data_fr: {
title: 'Mon dossier Service Canada - Canada.ca',
desc: 'Français',
author: 'Service Canada',
keywords: '',
service: 'ESDC-EDSC_MSCA-MSDC-SCH',
creator: 'Emploi et Développement social Canada',
accessRights: '1',
},
}
return {
props: {
locale,
meta,
},
}
}
export default Index
|