feat: adding all sections to home page + accordions

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 (
 		<section className={fr.cx('fr-container', 'fr-py-16v')}>
 			<div className={cx(classes.container)}>
-				<h2>Prêt à recueillir les avis des usagers</h2>
-				<Button className={fr.cx('fr-my-2v')}>Commencer</Button>
+				<h2>{props.title}</h2>
+				<Button className={cx(fr.cx('fr-my-2v'))} priority={props.buttonStyle}>
+					{props.buttonText}
+				</Button>
 			</div>
 		</section>
 	);

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 (
+		<section className={cx(fr.cx('fr-container'), classes.root)}>
+			<h2>Foire aux questions</h2>
+			<div className={fr.cx('fr-accordions-group')}>
+				{props.questions.map((question, index) => {
+					return (
+						<Accordion
+							key={question.question + index}
+							label={question.question}
+							className={cx(classes.accordion)}
+						>
+							{question.answer}
+						</Accordion>
+					);
+				})}
+			</div>
+		</section>
+	);
+};
+
+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;

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<any, any>;
@@ -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) => (
 			<HomeFeatureDisplay
@@ -156,7 +183,17 @@ export default function Home() {
 			{displayHomeFeature()}
 			<HomePills pills={pills} />
 			<HomeReferences references={references} />
-			<HomeActionButton />
+			<HomeActionButton
+				title={'Prêt à recueillir les avis des usagers ?'}
+				buttonStyle="primary"
+				buttonText="Commencer"
+			/>
+			<HomeQuestions questions={questions} />
+			<HomeActionButton
+				title={"Vous avez d'autres questions ?  Des doutes ? Contactez-bous !"}
+				buttonStyle="secondary"
+				buttonText="Contacter notre équipe"
+			/>
 		</div>
 	);
 }