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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import PropTypes from 'prop-types'
import en from '../locales/en'
import fr from '../locales/fr'
import enHome from '../locales/home/en'
import frHome from '../locales/home/fr'
import logger from '../lib/logger'
import { useEffect, useState } from 'react'
import DottedLine from '../components/DottedLine'
import { fetchContent } from '../lib/cms'
export default function Home(props) {
/* istanbul ignore next */
const t = props.locale === 'en' ? en : fr
const th = props.locale === 'en' ? enHome : frHome
logger.info('Home page')
logger.error('test')
logger.warn('test')
useEffect(() => {
logger.debug('Home mounted')
}, [])
const [quote, setQuote] = useState(0)
const handleClick = (e) => {
setQuote(quote ^ 1)
}
return (
<div className="max-w-xl mx-auto">
<section className="flex items-center gap-5 mb-10">
<div className="flex flex-col items-center">
<div className="border border-black shadow-lg p-4 text-periwinkle">
<div className={quote && 'hidden'}>
<blockquote className="italic">{th.quote1}</blockquote>
<cite className="block font-semibold text-end">
- Stefan M. (ESDC)
</cite>
</div>
<div className={!quote && 'hidden'}>
<blockquote className="italic">{th.quote2}</blockquote>
<cite className="block font-semibold text-end">
- Uma P. (ESDC)
</cite>
</div>
</div>
<div className="mt-8">
<div className="flex gap-3">
<button
aria-label="previous quote"
className={`bg-teal-600 rounded-full w-4 h-4 hover:bg-teal-900 duration-200 ${
quote && 'bg-teal-900'
}`}
onClick={handleClick}
></button>
<button
aria-label="next quote"
className={`bg-teal-600 rounded-full w-4 h-4 hover:bg-teal-900 duration-200 ${
!quote && 'bg-teal-900'
}`}
onClick={handleClick}
></button>
</div>
</div>
</div>
<button
className="order-first h-16 bg-gray-900 text-white p-4 rounded-l-md hover:bg-gray-800"
onClick={handleClick}
alt="Previous Testimonial"
>
❮
</button>
<button
className="bg-gray-900 h-16 text-white p-4 rounded-r-md hover:bg-gray-800"
onClick={handleClick}
alt="Next Testimonial"
>
❯
</button>
</section>
<section>
<h1 className="text-3xl text-periwinkle mb-4">{th.h1}</h1>
<div className="flex gap-10">
<div className="flex flex-col gap-6">
<p>{th.p1}</p>
<p>{th.p2}</p>
<p>{th.p3}</p>
</div>
<div className="group">
<a
href={`/Team_charter_${props.locale === 'en' ? 'EN' : 'FR'}.png`}
target="_blank"
rel="noopener noreferrer"
>
<img
src={`/Team_charter_${props.locale === 'en' ? 'EN' : 'FR'}.png`}
alt="Digital Dojo one-pager"
></img>
</a>
<p className="text-center text-sm group-hover:text-periwinkle">
{th.charter}
</p>
</div>
</div>
</section>
<DottedLine numDots={5} />
<section className="flex flex-col gap-2">
<h2 className="text-3xl text-periwinkle mb-2">{th.h2}</h2>
<h3 className="text-xl text-periwinkle">{th.h31}</h3>
<p className="mb-2">{th.p4}</p>
<h3 className="text-xl text-periwinkle">{th.h32}</h3>
<p className="mb-2">{th.p5}</p>
<h3 className="text-xl text-periwinkle">{th.h33}</h3>
<p>{th.p6}</p>
</section>
</div>
)
}
export async function getStaticProps({ locale }) {
const content = await fetchContent()
/* 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, content, meta },
}
}
Home.propTypes = {
/**
* current locale in the address
*/
locale: PropTypes.string,
/*
* Meta Tags
*/
meta: PropTypes.object,
}
|