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 | import DottedLine from '../../components/DottedLine'
import Link from 'next/link'
import { useRouter } from 'next/router'
import en from '../../locales/services/en'
import fr from '../../locales/services/fr'
export default function Challenges({ locale }) {
const router = useRouter()
const t = locale === 'en' ? en : fr
return (
<div className="max-w-4xl mx-auto p-2">
<h1 className="text-center">{t.challenges}</h1>
<DottedLine />
<section className="w-full mx-auto md:w-5/6 border-b-2 pb-5 pt-5 mb-6">
<div className="flex flex-col md:flex-row gap-5 mb-4 items-center mx-10">
<img src="/challenges.png" alt="" className="w-96" />
<div className="flex flex-col gap-2">
<button
onClick={() => router.push('/services/workshops')}
className="bg-periwinkle text-white rounded-full py-1 px-4 hover:bg-darkPeriwinkle"
>
{t.previousService}
</button>
</div>
</div>
<p className="text-center text-periwinkle text-lg font-bold">{t.cP1}</p>
</section>
<section className="space-y-6">
<div className="space-y-2">
<h2 className="text-lg text-periwinkle font-bold">{t.cH2}</h2>
<ol className="list-decimal list-inside ml-5">
<li>{t.cLi1}</li>
<li>{t.cLi2}</li>
</ol>
<p>{t.cP2}</p>
<ul className="list-disc list-inside ml-5">
<li>{t.cLi3}</li>
<li>{t.cLi4}</li>
<li>{t.cLi5}</li>
<li>{t.cLi6}</li>
</ul>
</div>
<div className="space-y-2">
<h2 className="text-lg text-periwinkle font-bold">{t.c30}</h2>
<p>{t.c30P}</p>
<p>{t.c30P2}</p>
</div>
<div className="space-y-2">
<h2 className="text-lg text-periwinkle font-bold">{t.c10}</h2>
<p>{t.c10P}</p>
<p>{t.c10P2}</p>
</div>
</section>
<div className="mt-10 space-x-5">
<button
onClick={() => router.push('/services/workshops')}
className="bg-periwinkle text-white rounded-full py-1 px-4 hover:bg-darkPeriwinkle w-32"
>
{t.back}
</button>
<Link href="/services">
<a className="text-periwinkle underline">{t.backToService}</a>
</Link>
</div>
</div>
)
}
export async function getStaticProps({ locale }) {
/* istanbul ignore next */
const langToggleLink =
locale === 'en' ? '/fr/services/challenges' : '/services/challenges'
/* Place-holder Meta Data Props */
const meta = {
data_en: {
title: 'Digital Dojo - Dojo Challenges',
desc: 'English',
author: '',
keywords: '',
},
data_fr: {
title: 'Dojo Numérique - Le Défi du Dojo',
desc: 'Français',
author: '',
keywords: '',
},
}
return {
props: { locale, langToggleLink, meta },
}
}
|