diff --git a/components/home/HomeActionButton/index.tsx b/components/home/HomeActionButton/index.tsx index feca93dd..07e10848 100644 --- a/components/home/HomeActionButton/index.tsx +++ b/components/home/HomeActionButton/index.tsx @@ -1,16 +1,23 @@ import { fr } from '@codegouvfr/react-dsfr'; import Button from '@codegouvfr/react-dsfr/Button'; -import { text } from 'stream/consumers'; import { tss } from 'tss-react/dsfr'; -const HomeActionButton = () => { +interface HomeActionButtonProps { + title: string; + buttonText: string; + buttonStyle: 'primary' | 'secondary' | 'tertiary'; +} + +const HomeActionButton = (props: HomeActionButtonProps) => { const { cx, classes } = useStyles(); return (
-

Prêt à recueillir les avis des usagers

- +

{props.title}

+
); diff --git a/components/home/HomeQuestions/index.tsx b/components/home/HomeQuestions/index.tsx new file mode 100644 index 00000000..703d5221 --- /dev/null +++ b/components/home/HomeQuestions/index.tsx @@ -0,0 +1,52 @@ +import { Question } from '@/pages'; +import { fr } from '@codegouvfr/react-dsfr'; +import { tss } from 'tss-react/dsfr'; +import { Accordion } from '@codegouvfr/react-dsfr/Accordion'; + +interface HomeQuestionProps { + questions: Question[]; +} + +const HomeQuestions = (props: HomeQuestionProps) => { + const { classes, cx } = useStyles(); + + return ( +
+

Foire aux questions

+
+ {props.questions.map((question, index) => { + return ( + + {question.answer} + + ); + })} +
+
+ ); +}; + +const useStyles = tss + .withName(HomeQuestions.name) + .withParams() + .create(() => ({ + root: { + h2: { + color: fr.colors.decisions.text.title.blueFrance.default, + ...fr.spacing('margin', { bottom: '6w' }), + [fr.breakpoints.down('md')]: { + ...fr.spacing('margin', { bottom: '3w' }) + } + }, + ...fr.spacing('margin', { bottom: '6w' }) + }, + accordion: { + color: fr.colors.decisions.text.actionHigh.grey.default + } + })); + +export default HomeQuestions; diff --git a/pages/index.tsx b/pages/index.tsx index 44e47d8d..ec577a46 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -7,6 +7,7 @@ import { ReactElement } from 'react'; import HomePills from '@/components/home/HomePills'; import HomeReferences from '@/components/home/HomeReferences'; import HomeActionButton from '@/components/home/HomeActionButton'; +import HomeQuestions from '@/components/home/HomeQuestions'; interface Feature { icon: ReactElement; @@ -28,6 +29,11 @@ export interface Reference { description: string; } +export interface Question { + question: string; + answer: string; +} + export default function Home() { const { classes, cx } = useStyles(); @@ -99,6 +105,27 @@ export default function Home() { } ]; + const questions: Question[] = [ + { + question: 'Comment installer le bouton Je donne mon avis ?', + answer: + 'Il vous suffit de copier-coller une portion de code HTML dans votre site web. Vous pouvez ensuite le personnaliser à votre guise.' + }, + { + question: 'Est-ce que l’outil Je donne mon avis est gratuit ?', + answer: + 'Oui, l’outil Je donne mon avis est gratuit pour toutes les administrations publiques.' + }, + { + question: 'Est-ce que l’outil Je donne mon avis est conforme au RGAA ?', + answer: 'Oui, l’outil Je donne mon avis est conforme au RGAA.' + }, + { + question: 'Est-ce que l’outil Je donne mon avis est conforme au RGPD ?', + answer: 'Oui, l’outil Je donne mon avis est conforme au RGPD.' + } + ]; + const displayHomeFeature = () => { return features.map((feature, index) => ( - + + + ); }