Skip to content

Commit bd6c3cb

Browse files
LucasCharrierclaudegary-van-woerkens
authored
feat: add aide et ressources landing page (#2875)
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> Co-authored-by: Gary van Woerkens <gary.van-woerkens@sg.social.gouv.fr>
1 parent a9a88af commit bd6c3cb

19 files changed

Lines changed: 381 additions & 23 deletions

‎packages/app/public/assets/images/aide/help-illustration.svg‎

Lines changed: 38 additions & 0 deletions
Loading

‎packages/app/public/assets/images/aide/indicateurs-remuneration.png‎

48.1 KB
Loading

‎packages/app/public/assets/images/aide/indicateurs-representation.png‎

116 KB
Loading

‎packages/app/public/assets/images/aide/nouveau-site.png‎

31.2 KB
Loading

‎packages/app/src/app/aide/page.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { Metadata } from "next";
2+
3+
import { AidePage } from "~/modules/aide";
4+
5+
export const metadata: Metadata = {
6+
title: "Aide et ressources",
7+
description:
8+
"Retrouvez toutes les ressources pour comprendre et réaliser votre déclaration des indicateurs d'égalité professionnelle.",
9+
};
10+
11+
export default function Page() {
12+
return <AidePage />;
13+
}

‎packages/app/src/modules/aide/AideCallout.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { DECLARATION_DEADLINE, DECLARATION_YEAR } from "./constants";
2+
3+
/** Callout displaying the declaration deadline. */
4+
export function AideCallout() {
5+
return (
6+
<div className="fr-callout fr-icon-information-line fr-callout--orange-terre-battue">
7+
<h2 className="fr-callout__title">Date limite de déclaration</h2>
8+
<p className="fr-callout__text">
9+
La date limite de déclaration pour l'année {DECLARATION_YEAR} est fixée
10+
au <strong>{DECLARATION_DEADLINE}</strong>.
11+
</p>
12+
</div>
13+
);
14+
}

‎packages/app/src/modules/aide/AidePage.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { AideCallout } from "./AideCallout";
2+
import { AideResourceCards } from "./AideResourceCards";
3+
import { AideTextesReference } from "./AideTextesReference";
4+
5+
/** Aide et ressources landing page. */
6+
export function AidePage() {
7+
return (
8+
<main id="content" tabIndex={-1}>
9+
<div className="fr-container fr-py-6w">
10+
<nav aria-label="vous êtes ici :" className="fr-breadcrumb">
11+
{/* DSFR JS will manage aria-expanded after hydration */}
12+
<button
13+
aria-controls="breadcrumb-aide"
14+
aria-expanded="false"
15+
className="fr-breadcrumb__button"
16+
type="button"
17+
>
18+
Voir le fil d'Ariane
19+
</button>
20+
<div className="fr-collapse" id="breadcrumb-aide">
21+
<ol className="fr-breadcrumb__list">
22+
<li>
23+
<a className="fr-breadcrumb__link" href="/">
24+
Accueil
25+
</a>
26+
</li>
27+
<li>
28+
<a
29+
aria-current="page"
30+
className="fr-breadcrumb__link"
31+
href="/aide"
32+
>
33+
Aide et ressources
34+
</a>
35+
</li>
36+
</ol>
37+
</div>
38+
</nav>
39+
40+
<h1 className="fr-h1 fr-mt-4w">Aide et ressources</h1>
41+
42+
<div className="fr-mb-6w">
43+
<AideCallout />
44+
</div>
45+
46+
<div className="fr-mb-6w">
47+
<AideResourceCards />
48+
</div>
49+
50+
<div className="fr-mb-6w">
51+
<AideTextesReference />
52+
</div>
53+
54+
<div aria-hidden="true" className="fr-grid-row fr-grid-row--center">
55+
<img
56+
alt=""
57+
height="147"
58+
src="/assets/images/aide/help-illustration.svg"
59+
width="210"
60+
/>
61+
</div>
62+
</div>
63+
</main>
64+
);
65+
}

‎packages/app/src/modules/aide/AideResourceCards.module.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// Override DSFR's object-fit: cover (specificity 0,2,1) with (0,3,1)
2+
:global(.fr-card--horizontal .fr-card__img) img.containImg {
3+
object-fit: contain;
4+
}

‎packages/app/src/modules/aide/AideResourceCards.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import styles from "./AideResourceCards.module.scss";
2+
3+
type ResourceCardProps = {
4+
badge?: string;
5+
title: string;
6+
description: string;
7+
href: string;
8+
imageSrc: string;
9+
/** Alt text for the card image. Defaults to "" (decorative) since the card title provides context. */
10+
imageAlt?: string;
11+
};
12+
13+
function ResourceCard({
14+
badge,
15+
title,
16+
description,
17+
href,
18+
imageSrc,
19+
imageAlt = "",
20+
}: ResourceCardProps) {
21+
return (
22+
<div className="fr-card fr-card--horizontal fr-enlarge-link fr-card--lg">
23+
<div className="fr-card__body">
24+
<div className="fr-card__content">
25+
{badge && (
26+
<div className="fr-card__start">
27+
<ul className="fr-badges-group">
28+
<li>
29+
<p className="fr-badge fr-badge--new">{badge}</p>
30+
</li>
31+
</ul>
32+
</div>
33+
)}
34+
<h2 className="fr-card__title">
35+
<a href={href}>{title}</a>
36+
</h2>
37+
<p className="fr-card__desc">{description}</p>
38+
</div>
39+
</div>
40+
<div className="fr-card__header">
41+
<div className="fr-card__img">
42+
<img
43+
alt={imageAlt}
44+
className={`fr-responsive-img ${styles.containImg}`}
45+
src={imageSrc}
46+
/>
47+
</div>
48+
</div>
49+
</div>
50+
);
51+
}
52+
53+
/** Three resource cards: new site announcement + two indicator guides. */
54+
export function AideResourceCards() {
55+
return (
56+
<div className="fr-grid-row fr-grid-row--gutters">
57+
<div className="fr-col-12">
58+
<ResourceCard
59+
badge="Nouveau"
60+
description="Retrouvez toutes les informations sur les changements apportés par la refonte du site et leurs impacts sur votre déclaration."
61+
href="/aide/nouveau-site"
62+
imageSrc="/assets/images/aide/nouveau-site.png"
63+
title="Nouveau site : ce qui change pour votre déclaration"
64+
/>
65+
</div>
66+
<div className="fr-col-12 fr-col-md-6">
67+
<ResourceCard
68+
description="Tout savoir sur les indicateurs préremplis via votre DSN, les écarts de rémunération par catégorie et les modalités de calcul."
69+
href="/aide/indicateurs-remuneration"
70+
imageSrc="/assets/images/aide/indicateurs-remuneration.png"
71+
title="Indicateurs de rémunération"
72+
/>
73+
</div>
74+
<div className="fr-col-12 fr-col-md-6">
75+
<ResourceCard
76+
description="Comprendre vos obligations pour les entreprises dont l'effectif dépasse 1 000 salariés et les modalités de déclaration des indicateurs de représentation."
77+
href="/aide/indicateurs-representation"
78+
imageSrc="/assets/images/aide/indicateurs-representation.png"
79+
title="Indicateurs de représentation"
80+
/>
81+
</div>
82+
</div>
83+
);
84+
}

‎packages/app/src/modules/aide/AideTextesReference.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { NewTabNotice } from "~/modules/layout";
2+
3+
/** Textes de référence section with external legislation links. */
4+
export function AideTextesReference() {
5+
return (
6+
<div className="fr-callout fr-callout--no-border">
7+
<div className="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
8+
<div className="fr-col-auto">
9+
<span
10+
aria-hidden="true"
11+
className="fr-icon-file-text-line fr-icon--lg"
12+
/>
13+
</div>
14+
<div className="fr-col">
15+
<h2 className="fr-callout__title">Textes de référence</h2>
16+
<p className="fr-callout__text">
17+
Consultez les textes législatifs et réglementaires
18+
</p>
19+
<ul className="fr-links-group">
20+
{[
21+
{
22+
href: "https://www.legifrance.gouv.fr/codes/article_lc/LEGIARTI000037396684",
23+
label: "Article L. 1142-8 du Code du travail",
24+
},
25+
{
26+
href: "https://www.legifrance.gouv.fr/loda/id/JORFTEXT000038234561",
27+
label: "Décret n° 2019-15 du 8 janvier 2019",
28+
},
29+
].map(({ href, label }) => (
30+
<li key={href}>
31+
<a
32+
className="fr-link fr-icon-external-link-line fr-link--icon-right"
33+
href={href}
34+
rel="noopener noreferrer"
35+
target="_blank"
36+
>
37+
{label}
38+
<NewTabNotice />
39+
</a>
40+
</li>
41+
))}
42+
</ul>
43+
</div>
44+
</div>
45+
</div>
46+
);
47+
}

0 commit comments

Comments
 (0)