Skip to content

Commit

Permalink
fix: home container size
Browse files Browse the repository at this point in the history
  • Loading branch information
@ClementNumericite
ClementNumericite committed Sep 7, 2023
1 parent a99ef60 commit eb73a3f
Show file tree
Hide file tree
Showing 6 changed files with 108 additions and 77 deletions.
10 changes: 5 additions & 5 deletions components/home/HomeFeatureDisplay/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const HomeFeatureDisplay = (props: Feature) => {
classes.grid
)}
>
<div className={fr.cx('fr-col-12', 'fr-col-md-6')}>
<div className={fr.cx('fr-col-12', 'fr-col-md-5')}>
<div className={cx(classes.textContainer)}>
<div className={cx(classes.iconContainer)}>{props.icon}</div>
<h2>{props.title}</h2>
Expand Down Expand Up @@ -58,12 +58,12 @@ const useStyles = tss
.withParams<{ imagePosition: string }>()
.create(({ imagePosition }) => ({
outerContainer: {
position: 'relative'
position: 'relative',
...fr.spacing('margin', {
topBottom: '32v'
})
},
container: {
...fr.spacing('margin', {
topBottom: '16v'
}),
...fr.spacing('padding', {
topBottom: '16v'
}),
Expand Down
11 changes: 8 additions & 3 deletions components/home/HomeHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,14 @@ const HomeHeader = () => {
<div className={cx(classes.blueContainer)} />
<div className={fr.cx('fr-container')}>
<div
className={fr.cx('fr-py-16v', 'fr-grid-row', 'fr-grid-row--gutters')}
className={fr.cx(
'fr-py-16v',
'fr-grid-row',
'fr-grid-row--center',
'fr-grid-row--gutters'
)}
>
<div className={fr.cx('fr-col', 'fr-col-12', 'fr-col-md-6')}>
<div className={fr.cx('fr-col', 'fr-col-12', 'fr-col-md-5')}>
<div className={cx(classes.titleContainer)}>
<h1 className={cx(classes.headerTitle)}>
Comment suivre la satisfaction de vos usagers ?
Expand All @@ -25,7 +30,7 @@ const HomeHeader = () => {
</div>
<div
className={cx(
fr.cx('fr-col', 'fr-col-12', 'fr-col-md-6'),
fr.cx('fr-col', 'fr-col-12', 'fr-col-md-5'),
classes.image
)}
>
Expand Down
3 changes: 2 additions & 1 deletion components/home/HomePills/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ const HomePills = (props: HomePillsProps) => {
'fr-grid-row',
'fr-grid-row--gutters',
'fr-grid-row--center',
'fr-py-12w'
'fr-py-12w',
'fr-px-10v'
)}
>
{props.pills.map((pill, index) => (
Expand Down
30 changes: 17 additions & 13 deletions components/home/HomeQuestions/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,23 @@ const HomeQuestions = (props: HomeQuestionProps) => {

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 className={cx(fr.cx('fr-grid-row', 'fr-grid-row--center'))}>
<div className={cx(fr.cx('fr-col-12', 'fr-col-md-10'))}>
<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>
</div>
</div>
</section>
);
Expand Down
76 changes: 43 additions & 33 deletions components/home/HomeReferences/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,42 +18,52 @@ const HomeReferences = (props: HomeReferencesProps) => {

return (
<section className={cx(fr.cx('fr-container'), classes.root)}>
<h2>Elles recommandent</h2>
{props.references.map((reference, index) => (
<div
key={index}
className={fr.cx('fr-grid-row', 'fr-grid-row--gutters', 'fr-pb-6w')}
>
<div
className={cx(
fr.cx('fr-col', 'fr-col-12', 'fr-col-md-3'),
classes.imageContainer
)}
>
<Image
src={reference.image_path}
alt={reference.author}
width={180}
height={180}
className={cx(classes.image)}
/>
</div>
<div className={fr.cx('fr-col', 'fr-col-12', 'fr-col-md-9')}>
<div className={cx(classes.textContainer)}>
<i className={cx(fr.cx('fr-icon-quote-line'), classes.icon)} />
<h6>{reference.description}</h6>
<div>
<p className={cx(classes.underInfos, classes.bold)}>
{reference.author}
</p>
<p className={cx(classes.underInfos, classes.italic)}>
{reference.job_title}
</p>
<div className={cx(fr.cx('fr-grid-row', 'fr-grid-row--center'))}>
<div className={cx(fr.cx('fr-col-12', 'fr-col-md-10'))}>
<h2>Elles recommandent</h2>
{props.references.map((reference, index) => (
<div
key={index}
className={fr.cx(
'fr-grid-row',
'fr-grid-row--gutters',
'fr-pb-6w'
)}
>
<div
className={cx(
fr.cx('fr-col', 'fr-col-12', 'fr-col-md-3'),
classes.imageContainer
)}
>
<Image
src={reference.image_path}
alt={reference.author}
width={180}
height={180}
className={cx(classes.image)}
/>
</div>
<div className={fr.cx('fr-col', 'fr-col-12', 'fr-col-md-9')}>
<div className={cx(classes.textContainer)}>
<i
className={cx(fr.cx('fr-icon-quote-line'), classes.icon)}
/>
<h6>{reference.description}</h6>
<div>
<p className={cx(classes.underInfos, classes.bold)}>
{reference.author}
</p>
<p className={cx(classes.underInfos, classes.italic)}>
{reference.job_title}
</p>
</div>
</div>
</div>
</div>
</div>
))}
</div>
))}
</div>
</section>
);
};
Expand Down
55 changes: 33 additions & 22 deletions components/home/HomeStepper/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,30 +32,41 @@ const HomeStepper = () => {

return (
<section className={cx(fr.cx('fr-container'), classes.container)}>
<h2>Commencez à receuillir des avis en 4 étapes simples :</h2>
<div
className={cx(
fr.cx('fr-grid-row', 'fr-grid-row--gutters', 'fr-grid-row--center')
)}
>
{steps.map(step => (
<div key={step.number} className={fr.cx('fr-col-12', 'fr-col-md-3')}>
<div
className={cx(
classes.card,
fr.cx('fr-card', 'fr-card--grey', 'fr-card--no-border')
)}
>
<div className={cx(classes.numberContainer)}>
<p className={cx(classes.number)}>{step.number}</p>
<div className={cx(fr.cx('fr-grid-row', 'fr-grid-row--center'))}>
<div className={cx(fr.cx('fr-col-12', 'fr-col-md-10'))}>
<h2>Commencez à receuillir des avis en 4 étapes simples :</h2>
<div
className={cx(
fr.cx(
'fr-grid-row',
'fr-grid-row--gutters',
'fr-grid-row--center'
)
)}
>
{steps.map(step => (
<div
key={step.number}
className={fr.cx('fr-col-12', 'fr-col-md-3')}
>
<div
className={cx(
classes.card,
fr.cx('fr-card', 'fr-card--grey', 'fr-card--no-border')
)}
>
<div className={cx(classes.numberContainer)}>
<p className={cx(classes.number)}>{step.number}</p>
</div>
<div className={cx(classes.title)}>{step.title}</div>
</div>
</div>
<div className={cx(classes.title)}>{step.title}</div>
</div>
))}
</div>
))}
</div>
<div className={fr.cx('fr-grid-row', 'fr-grid-row--center')}>
<Button className={fr.cx('fr-my-5w')}>Commencer</Button>
<div className={fr.cx('fr-grid-row', 'fr-grid-row--center')}>
<Button className={fr.cx('fr-my-5w')}>Commencer</Button>
</div>
</div>
</div>
</section>
);
Expand Down

0 comments on commit eb73a3f

Please sign in to comment.