Skip to content

Commit eeb8426

Browse files
sbenfaressbenfares
committed
chore: ui - simplify & dsfr & dark mode
1 parent 048758d commit eeb8426

6 files changed

Lines changed: 84 additions & 123 deletions

File tree

‎src/components/IllustrationTile/IllustrationTile.tsx‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎src/components/InfoTile/InfoTile.tsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎src/components/index.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,3 @@ export { default as Matomo } from "./Matomo/Matomo";
44
export { default as Notice } from "./Notice/Notice";
55
export type { NoticeProps } from "./Notice/Notice";
66
export { default as Feature } from "./Feature/Feature";
7-
export { default as InfoTile } from "./InfoTile/InfoTile";
8-
export { default as IllustrationTile } from "./IllustrationTile/IllustrationTile";

‎src/page-sections/home/CommentCaMarcheSection.tsx‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { IllustrationTile } from "@/components";
21
import { contentHomePage } from "@/content";
2+
import Image from "next/image";
33

44
export default function CommentCaMarcheSection() {
55
return (
@@ -10,14 +10,27 @@ export default function CommentCaMarcheSection() {
1010
{contentHomePage.comment_ca_marche_section.steps.map(
1111
(step, index) => (
1212
<div key={index} className="fr-col-12 fr-col-md-6 fr-col-lg-4">
13-
<IllustrationTile
14-
title={step.title}
15-
description={step.description}
16-
imageAlt={step.imageAlt}
17-
imageSrc={step.imageSrc}
18-
imageHeight={64}
19-
imageWidth={64}
20-
/>
13+
<div
14+
className="fr-tile fr-tile--horizontal fr-enlarge-link"
15+
id="tile-33"
16+
>
17+
<div className="fr-tile__body">
18+
<div className="fr-tile__content">
19+
<h3 className="fr-tile__title">{step.title}</h3>
20+
<p className="fr-tile__desc">{step.description}</p>
21+
</div>
22+
</div>
23+
<div className="fr-tile__header">
24+
<div className="fr-tile__pictogram">
25+
<Image
26+
alt={step.imageAlt}
27+
src={step.imageSrc}
28+
height={64}
29+
width={64}
30+
/>
31+
</div>
32+
</div>
33+
</div>
2134
</div>
2235
)
2336
)}

‎src/page-sections/home/EtatAgitSection.tsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { InfoTile } from "@/components";
21
import { contentHomePage } from "@/content";
32
import Link from "next/link";
43

@@ -22,16 +21,24 @@ export default function EtatAgitSection() {
2221

2322
{/* Zone tuiles */}
2423
<div className="fr-col-12 fr-col-md-6 flex justify-center">
25-
<div className="flex flex-col gap-6">
24+
<div className="flex flex-col gap-6 p-20">
2625
{contentHomePage.etat_agit_section.infos_tiles.map(
2726
(tile, index) => (
28-
<InfoTile
27+
<div
2928
key={index}
30-
icon={tile.icon}
31-
iconColor={tile.iconColor}
32-
title={tile.title}
33-
description={tile.description}
34-
/>
29+
className="fr-tile fr-tile--horizontal fr-enlarge-link"
30+
id="tile-6"
31+
>
32+
<div className="fr-tile__body">
33+
<div className="fr-tile__content">
34+
<div
35+
className={`${tile.icon} fr-icon--sm mb-2 ${tile.iconColor}`}
36+
></div>
37+
<h3 className="fr-tile__title">{tile.title}</h3>
38+
<p className="fr-tile__desc">{tile.description}</p>
39+
</div>
40+
</div>
41+
</div>
3542
)
3643
)}
3744
</div>

‎src/page-sections/home/QuiSommesNousSection.tsx‎

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -8,34 +8,33 @@ export default function QuiSommesNousSection() {
88
<div className="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
99
{/* Zone gauche - Qui sommes nous */}
1010
<div className="fr-col-12 fr-col-lg-6 fr-col--stretch">
11-
<div className="bg-white shadow-md p-10 h-full flex flex-col">
12-
<h4>
13-
{
14-
contentHomePage.qui_sommes_nous_section
15-
.qui_sommes_nous_subsection.title
16-
}
17-
</h4>
18-
<p className="text-sm fr-text--light leading-tight">
19-
{
20-
contentHomePage.qui_sommes_nous_section
21-
.qui_sommes_nous_subsection.description_1
22-
}
23-
</p>
24-
<p className="text-sm fr-text--light leading-tight">
25-
{
26-
contentHomePage.qui_sommes_nous_section
27-
.qui_sommes_nous_subsection.description_2
28-
}
29-
</p>
30-
<div className="h-[100px] relative max-w-[300px]">
11+
<div className="fr-card fr-p-3w fr-h-100">
12+
<div className="fr-card__body">
13+
<h4 className="fr-h4">
14+
{
15+
contentHomePage.qui_sommes_nous_section
16+
.qui_sommes_nous_subsection.title
17+
}
18+
</h4>
19+
<p className="fr-text--sm fr-text--light fr-mb-2w">
20+
{
21+
contentHomePage.qui_sommes_nous_section
22+
.qui_sommes_nous_subsection.description_1
23+
}
24+
</p>
25+
<p className="fr-text--sm fr-text--light fr-mb-3w">
26+
{
27+
contentHomePage.qui_sommes_nous_section
28+
.qui_sommes_nous_subsection.description_2
29+
}
30+
</p>
3131
<Image
3232
alt={
3333
contentHomePage.qui_sommes_nous_section
3434
.qui_sommes_nous_subsection.imageAlt
3535
}
36-
className="object-contain"
37-
fill
38-
priority
36+
width={300}
37+
height={300}
3938
src={
4039
contentHomePage.qui_sommes_nous_section
4140
.qui_sommes_nous_subsection.imageSrc
@@ -47,30 +46,32 @@ export default function QuiSommesNousSection() {
4746

4847
{/* Zone droite - Nos missions */}
4948
<div className="fr-col-12 fr-col-lg-6 fr-col--stretch">
50-
<div className="bg-white shadow-md p-10 h-full flex flex-col">
51-
<h4>
52-
{
53-
contentHomePage.qui_sommes_nous_section
54-
.nos_missions_subsection.title
55-
}
56-
</h4>
57-
<div className="flex-grow">
58-
{contentHomePage.qui_sommes_nous_section.nos_missions_subsection.missions.map(
59-
(mission, index) => (
60-
<div key={index} className="mb-4">
61-
<div className="fr-text--lg font-black fr-mb-1v">
62-
<span
63-
className={`text-blue-900 font-extrabold text-xl mr-2 ${mission.icon}`}
64-
aria-hidden="true"
65-
></span>
66-
{mission.title}
49+
<div className="fr-card fr-p-3w fr-h-100">
50+
<div className="fr-card__body">
51+
<h4>
52+
{
53+
contentHomePage.qui_sommes_nous_section
54+
.nos_missions_subsection.title
55+
}
56+
</h4>
57+
<div className="flex-grow">
58+
{contentHomePage.qui_sommes_nous_section.nos_missions_subsection.missions.map(
59+
(mission, index) => (
60+
<div key={index} className="mb-4">
61+
<div className="fr-text--lg font-black fr-mb-1v">
62+
<span
63+
className={`text-blue-900 font-extrabold text-xl mr-2 ${mission.icon}`}
64+
aria-hidden="true"
65+
></span>
66+
{mission.title}
67+
</div>
68+
<p className="text-sm font-extralight leading-tight fr-mb-0">
69+
{mission.description}
70+
</p>
6771
</div>
68-
<p className="text-sm font-extralight leading-tight fr-mb-0">
69-
{mission.description}
70-
</p>
71-
</div>
72-
)
73-
)}
72+
)
73+
)}
74+
</div>
7475
</div>
7576
</div>
7677
</div>

0 commit comments

Comments
 (0)