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 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 | 1x 1x 1x 1x 5x 5x 1x 1x | import {
IoIosArrowDropright,
IoIosArrowDroprightCircle,
IoIosArrowDropleftCircle,
} from 'react-icons/io'
import { AiFillStar } from 'react-icons/ai'
import DottedLine from '../components/DottedLine'
import { useRouter } from 'next/router'
import { useState } from 'react'
export default function HomePage({ locale }) {
const router = useRouter()
const stars = [5, 4, 3, 2, 1]
const [star, setStar] = useState(0)
function handleClick(k) {
const i = stars.indexOf(star)
setStar(Math.min(stars.length - 1, Math.max(0, star + k)))
}
return (
<div className="max-w-4xl mx-auto">
<div className="flex gap-10 justify-center items-center">
<div className="flex flex-col gap-3">
<h1>Welcome to the Digital Dojo</h1>
<p>
Our Digital Dojo aims to provide an immersive virtual space where
ESDC product teams can learn new skills and new ways to solve common
problems with the help and guidance of GC Experts.
</p>
<div className="flex gap-3 mb-5">
<button
onClick={() => router.push('/engagement')}
className="rounded-full bg-periwinkle text-white px-2 py-1 flex items-center justify-center gap-1 hover:bg-darkPeriwinkle"
>
Start an engagement
<i role="presentation" className="text-xl">
<IoIosArrowDropright />
</i>
</button>
<button
onClick={() => router.push('/contact')}
className="rounded-full text-periwinkle border-2 border-periwinkle px-2 py-1 flex items-center justify-center gap-1 hover:bg-darkPeriwinkle hover:text-white"
>
Get in touch!
<i role="presentation" className="text-xl">
<IoIosArrowDropright />
</i>
</button>
</div>
<DottedLine />
</div>
<div>
<img src="/collab.png" alt="" />
</div>
</div>
<div>
<h2 className="text-2xl text-periwinkle mb-5">Our Mandate</h2>
<h3 className="text-lg text-periwinkle">This isn't training</h3>
<p className="mb-2">
Our goal is to help your team practice and directly implement new
discipline.
</p>
<h3 className="text-lg text-periwinkle">
Our coaches are here to help you achieve your goals
</h3>
<p className="mb-2">
We can help your team manage complex work, streamline processes,
increase communication and resiliency, and deliver with confidence.
</p>
<h3 className="text-lg text-periwinkle">We meet you where you are</h3>
<p className="mb-2">
We are not here to tell you what to do. We work with you, hands-on, to
learn new practices based on your objectives.
</p>
</div>
<div className="mt-10">
<h2 className="text-2xl text-periwinkle mb-10">Our Services</h2>
<div className="block space-y-10 sm:space-y-0 sm:flex gap-10">
<div className="border-2 sm:h-72">
<div className="w-3/4 mx-auto my-5 min-h-36 sm:h-36">
<img src="/consultations.png" alt=""></img>
</div>
<div className="bg-blue-900 text-white text-xl text-center mb-5">
Consultations
</div>
<div className="text-center">
<button
onClick={() => router.push('/services/consultations')}
className="bg-periwinkle text-white px-2 py-1 hover:bg-darkPeriwinkle rounded-full"
>
Learn more
</button>
</div>
</div>
<div className="border-2 sm:h-72">
<div className="w-3/4 mx-auto my-5 min-h-36 sm:h-36">
<img src="/workshops.png" alt=""></img>
</div>
<div className="bg-green-900 text-white text-xl text-center mb-5">
Workshops
</div>
<div className="text-center">
<button
onClick={() => router.push('/services/workshops')}
className="bg-periwinkle text-white px-2 py-1 hover:bg-darkPeriwinkle rounded-full"
>
Learn more
</button>
</div>
</div>
<div className="border-2 sm:h-72">
<div className="w-3/4 mx-auto my-5 min-h-36 sm:h-36">
<img src="/challenges.png" alt=""></img>
</div>
<div className="bg-pink-900 text-white text-xl text-center mb-5">
Dojo Challenges
</div>
<div className="text-center">
<button
onClick={() => router.push('/services/challenges')}
className="bg-periwinkle text-white px-2 py-1 hover:bg-darkPeriwinkle rounded-full"
>
Learn more
</button>
</div>
</div>
</div>
</div>
<div className="mt-10">
<h2 className="text-2xl text-periwinkle mb-5">What sets us apart</h2>
<h3 className="text-lg text-periwinkle">
We work with your whole team
</h3>
<p className="mb-2">
We focus on delivery as a team – business and IT. This builds trust,
mutual understanding, cohesion, and collaboration.
</p>
<h3 className="text-lg text-periwinkle">We take a GoC focus</h3>
<p className="mb-2">
Our experience is based in realistic GoC IT practices, standards,
languages, and challenges. We'll work with you wherever you are
located, virtual or hybrid, with seamless collaboration.
</p>
<h3 className="text-lg text-periwinkle">We have the same goals</h3>
<p className="mb-2">
We want to see you succeed because it will make our organization
better. We will connect you with internal experts, groups, and
resources.
</p>
<h3 className="text-lg text-periwinkle">
We won't impact your budget
</h3>
<p className="mb-2">
Our services are provided free of charge. They are covered by DTS and
IITB's Innovation fund.
</p>
</div>
<hr className="border mt-10 mb-5"></hr>
<div className="mt-10 flex flex-col items-center justify-center gap-2">
<h2 className="text-2xl text-periwinkle">What people are saying</h2>
<p>Testimonial blurb</p>
<div className="flex items-center mt-5">
<div>
<button
aria-label="previous testimonial"
onClick={() => handleClick(-1)}
className="text-4xl text-periwinkle mr-3 hover:text-darkPeriwinkle"
>
<IoIosArrowDropleftCircle />
</button>
</div>
<div className="border p-5 rounded">
<div className="flex items-center justify-between">
<p className="text-periwinkle text-xl">
Name of client, department or role
</p>
<div className="flex ">
{Array(5)
.fill()
.map((_, i) => (
<AiFillStar
key={i}
className={`${
i < stars[star]
? 'text-yellow-500'
: 'text-darkPeriwinkle'
}`}
/>
))}
</div>
</div>
<p className="text-sm font-bold mb-3">
{stars[star]} WEEK 2 DAYS AGO
</p>
<p className="text-periwinkle">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
rutrum ex nec magna consequat, nec porta diam molestie. Ut eget
felis nec metus ullamcorper iaculis.
</p>
</div>
<div>
<button
aria-label="next testimonial"
onClick={() => handleClick(1)}
className="text-4xl text-periwinkle ml-3 hover:text-darkPeriwinkle"
>
<IoIosArrowDroprightCircle />
</button>
</div>
</div>
<div className="flex gap-3 mt-5">
{stars.map((_, i) => (
<div
key={i}
className={`w-3 h-3 rounded-full border-2 border-periwinkle ${
i === star ? 'bg-periwinkle' : ''
}`}
role="presentation"
></div>
))}
</div>
</div>
</div>
)
}
export async function getStaticProps({ locale }) {
/* istanbul ignore next */
const langToggleLink = locale === 'en' ? '/fr/home' : '/home'
/* Place-holder Meta Data Props */
const meta = {
data_en: {
title: 'Digital Dojo - Home',
desc: 'English',
author: '',
keywords: '',
},
data_fr: {
title: 'Dojo Numérique - Accueil',
desc: 'Français',
author: '',
keywords: '',
},
}
return {
props: { locale, langToggleLink, meta },
}
}
|