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 px-6 p-12 h-screen bg-cover bg-center bg-splash-page"
>
<MetaData language="en" data={props.meta}></MetaData>
<div className="flex flex-col justify-center items-center m-auto">
<div className="z-10 bg-white h-auto w-[18.75rem] xl:w-[31.25rem]">
<h1 className="sr-only">service.canada.ca-digital-center</h1>
<div className="h-auto w-64 mx-auto pt-6 xl:w-2/3 xl:mx-0 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="flex w-max container py-11 mx-auto font-display">
<div className="grid grid-cols-2 gap-2 xl:gap-6">
<Link
href="/en/my-dashboard"
className="font-display rounded focus:ring-1 focus:ring-black focus:ring-offset-2 py-2 px-10 whitespace-pre bg-deep-blue-medium text-white text-center border border-deep-blue-medium active:bg-deep-blue-active hover:bg-bright-blue-dark grid place-items-center"
role="button"
draggable="false"
lang="en"
id="english-button"
>
English
</Link>
<Link
href="/fr/mon-tableau-de-bord"
className="font-display rounded focus:ring-1 focus:ring-black focus:ring-offset-2 py-2 px-10 whitespace-pre bg-deep-blue-medium text-white text-center border border-deep-blue-medium active:bg-deep-blue-active hover:bg-bright-blue-dark grid place-items-center"
role="button"
draggable="false"
lang="fr"
id="french-button"
>
Français
</Link>
</div>
</div>
</div>
<div className="relative py-8 bg-gray-light text-p h-auto min-w-[18.75rem] w-[18.75rem] flex justify-between p-6 xl:w-[31.25rem] xl:items-center">
<div className="w-28 text-base xl:text-p xl:w-max text-bright-blue-dark">
<Link
href="https://www.canada.ca/en/transparency/terms.html"
className="inline-block w-28 xl:w-max mr-0 hover:underline splash-a text-lg"
lang="en"
data-cy="terms"
>
Terms & conditions
</Link>
<span> • </span>
<Link
href="https://www.canada.ca/fr/transparence/avis.html"
className="inline-block hover:underline text-lg"
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
|