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 | 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 Workshops({ 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.workshops}</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="/workshops.png" alt="" className="w-96" />
<div className="flex flex-col gap-2">
<button
onClick={() => router.push('/services/challenges')}
className="bg-periwinkle text-white rounded-full py-1 px-4 hover:bg-darkPeriwinkle"
>
{t.nextService}
</button>
<button
onClick={() => router.push('/services/consultations')}
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.workshopsBlurb}
</p>
</section>
<section className="space-y-6">
<div className="space-y-2">
<h2 className="text-lg text-periwinkle font-bold">
{t.workshopsInclude}
</h2>
<ul className="list-disc list-inside ml-5">
<li>{t.wsAgile}</li>
<li>{t.wsCollab}</li>
<li>{t.wsVis}</li>
<li>{t.wsFac}</li>
</ul>
</div>
<div className="space-y-2">
<h2 className="text-lg text-periwinkle font-bold">{t.customTeam}</h2>
{t.wsP}
<Link href="/contact">
<a className="text-periwinkle underline">{t.wsA}</a>
</Link>
</div>
<div className="space-y-2">
<h2 className="text-lg text-periwinkle font-bold">{t.wsOh}</h2>
<p>{t.wsOhP1}</p>
<p>{t.wsOhP2}</p>
<Link href="/events">
<a className="text-periwinkle underline">{t.wsEventsA}</a>
</Link>
</div>
</section>
<div className="mt-10 space-x-5">
<button
onClick={() => router.push('/services/consultations')}
className="bg-periwinkle text-white rounded-full py-1 px-4 hover:bg-darkPeriwinkle w-32"
>
{t.back}
</button>
<button
onClick={() => router.push('/services/challenges')}
className="bg-periwinkle text-white rounded-full py-1 px-4 hover:bg-darkPeriwinkle w-32"
>
{t.nextService}
</button>
</div>
</div>
)
}
export async function getStaticProps({ locale }) {
/* istanbul ignore next */
const langToggleLink =
locale === 'en' ? '/fr/services/workshops' : '/services/workshops'
/* Place-holder Meta Data Props */
const meta = {
data_en: {
title: 'Digital Dojo - Workshops',
desc: 'English',
author: '',
keywords: '',
},
data_fr: {
title: 'Dojo Numérique - Les Ateliers',
desc: 'Français',
author: '',
keywords: '',
},
}
return {
props: { locale, langToggleLink, meta },
}
}
|