Skip to content

Commit

Permalink
Fill up the call to action at the bottom of the page
Browse files Browse the repository at this point in the history
  • Loading branch information
@garronej
garronej committed Apr 24, 2023
1 parent 570facd commit 90fea2d
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 138 deletions.
1 change: 0 additions & 1 deletion src/core/core.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,6 @@ export async function createCore(params: {
core.dispatch(usecases.sillApiVersion.privateThunks.initialize()),
core.dispatch(usecases.softwareCatalog.privateThunks.initialize()),
core.dispatch(usecases.generalStats.privateThunks.initialize()),
core.dispatch(usecases.searchSoftwareByName.privateThunks.initialize()),
core.dispatch(usecases.redirect.privateThunks.initialize())
]);

Expand Down
92 changes: 47 additions & 45 deletions src/ui/i18n.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,6 @@ const {
recommended by the State for the whole administration.
</>
),
"or": "or",
"sign in": "Sign in",
"software selection": "Some software selection",
"last added": "Last added",
"most used": "The most used",
Expand All @@ -96,63 +94,63 @@ const {
"agentReferentCount": "software referent",
"organizationCount": "organization",
"help us": "Help us to enrich the catalog",
"declare referent title":
"Declare oneself user or referent of a software",
"declare referent description": "Description text body à changer",
"search software": "Search a software",
"edit software title": "Edit a software",
"edit software description": "Description text body à changer",
"add software or service description": "Description text body à changer",
"complete form": "Complete the add form",
"the sill in a few words": "The SILL in a few words",
"the sill in a few words paragraph": ({ accentColor }) => (
<>
Le{" "}
<span style={{ "color": accentColor }}>
Socle interministériel de Logiciels Libres (SILL)
</span>{" "}
est un{" "}
The{" "}
<span style={{ "color": accentColor }}>
catalogue de référence
Interministerial Foundation of Free Software (SILL)
</span>{" "}
des logiciels libres recommandés par l'État pour l'
is a{" "}
<span style={{ "color": accentColor }}>reference catalog</span> of
free software recommended by the State for the{" "}
<span style={{ "color": accentColor }}>
administration française
French administration
</span>
.<br />
<br />
Il est utilisé pour aider les administrations à naviguer et
sélectionner les{" "}
<span style={{ "color": accentColor }}>logiciels libres</span> à
utiliser, conformément à l'
It is used to help administrations navigate and select the{" "}
<span style={{ "color": accentColor }}>free software</span> to
use, in accordance with{" "}
<span style={{ "color": accentColor }}>
article 16 de la loi pour une République numérique
Article 16 of the Digital Republic Act
</span>
.<br />
<br />
Les{" "}
<span style={{ "color": accentColor }}>
critères d'entrée
The <span style={{ "color": accentColor }}>
entry criteria
</span>{" "}
d'un logiciel dans le SILL comprennent la publication de son code
source sous une{" "}
for software in the SILL include the publication of its source
code under an{" "}
<span style={{ "color": accentColor }}>
licence libre acceptée
accepted free license
</span>{" "}
et son déploiement par un établissement public ou son installation
par un agent public.
and its deployment by a public institution or installation by a
public agent.
<br />
<br />
Les <span style={{ "color": accentColor }}>
référents SILL
The <span style={{ "color": accentColor }}>
SILL referents
</span>{" "}
sont des agents publics qui sont volontaires pour gérer et mettre
à jour les informations sur les logiciels inclus dans le
catalogue.
are public agents who volunteer to manage and update information
on the software included in the catalog.
<br />
<br />
</>
)
),
"illustration image": "Illustration image",
"declare referent title": "Declare yourself as a referent",
"edit software title": "Edit a software entry",
"add software or service title": "Add a software or service",
"declare referent desc":
"Become a volunteer public agent to manage and update information on SILL software",
"edit software desc":
"Modify the information of an existing software in the SILL catalog",
"add software or service desc":
"Propose a new software or service for inclusion in the SILL catalog",
"declare referent button label": "Access the form",
"edit software button label": "Search for a software",
"add software or service button label": "Fill out the addition form"
},
"AddSoftwareLanding": {
"title": (
Expand Down Expand Up @@ -489,8 +487,6 @@ const {
recommandé par l'État pour toute l'administration.
</>
),
"or": "ou",
"sign in": "Se connecter",
"software selection": "Quelques sélections de logiciels",
"last added": "Derniers ajouts",
"most used": "Les plus utilisés",
Expand All @@ -506,12 +502,7 @@ const {
"help us": "Aidez-nous à enrichir le catalogue",
"declare referent title":
"Se déclarer utilisateur ou référent d'un logiciel",
"declare referent description": "Description text body à changer",
"search software": "Rechercher un logiciel",
"edit software title": "Éditer une fiche logiciel",
"edit software description": "Description text body à changer",
"add software or service description": "Description text body à changer",
"complete form": "Remplir le formulaire d'ajout",
"the sill in a few words": "Le SILL en quelques mots",
"the sill in a few words paragraph": ({ accentColor }) => (
<>
Expand Down Expand Up @@ -560,7 +551,18 @@ const {
<br />
<br />
</>
)
),
"illustration image": "Image d'illustration",
"add software or service title": "Ajouter un logiciel ou un service",
"declare referent desc":
"Devenir un agent public volontaire pour gérer et mettre à jour les informations sur les logiciels du SILL",
"edit software desc":
"Modifier les informations d'un logiciel existant dans le catalogue SILL",
"add software or service desc":
"Proposer un nouveau logiciel ou service pour l'inclusion dans le catalogue SILL",
"declare referent button label": "Accéder au formulaire",
"edit software button label": "Rechercher un logiciel",
"add software or service button label": "Remplir le formulaire d'ajout"
},
"AddSoftwareLanding": {
"title": (
Expand Down
163 changes: 71 additions & 92 deletions src/ui/pages/homepage/Homepage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ import type { PageRoute } from "./route";
import { useMetricCountUpAnimation } from "ui/tools/useMetricCountUpAnimation";
import { Waypoint } from "react-waypoint";
import { ReactComponent as HomepageWaveSvg } from "ui/assets/homepage_wave.svg";
import type { Link } from "type-route";
import codingSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/pictograms/digital/coding.svg";
import humanCooperationSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/pictograms/environment/human-cooperation.svg";
import documentSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/pictograms/document/document.svg";

type Props = {
className?: string;
Expand All @@ -29,7 +31,6 @@ export default function Homepage(props: Props) {

const { cx, classes, css, theme } = useStyles();
const { t } = useTranslation({ Homepage });
const { t: tCommon } = useTranslation({ "App": "App" });

const { stats } = useCoreState(selectors.generalStats.stats);

Expand Down Expand Up @@ -72,30 +73,6 @@ export default function Homepage(props: Props) {
}
];

const helpUsCards = [
{
"imgUrl": "https://www.systeme-de-design.gouv.fr/img/placeholder.16x9.png",
"title": t("declare referent title"),
"description": t("declare referent description"),
"buttonLabel": t("search software"),
"href": ""
},
{
"imgUrl": "https://www.systeme-de-design.gouv.fr/img/placeholder.16x9.png",
"title": t("edit software title"),
"description": t("edit software description"),
"buttonLabel": t("search software"),
"href": ""
},
{
"imgUrl": "https://www.systeme-de-design.gouv.fr/img/placeholder.16x9.png",
"title": tCommon("add software or service"),
"description": t("add software or service description"),
"buttonLabel": t("complete form"),
"href": ""
}
];

return (
<div className={className}>
<HeroSection className={fr.cx("fr-container")} />
Expand Down Expand Up @@ -162,56 +139,57 @@ export default function Homepage(props: Props) {
<div className={cx(fr.cx("fr-container"))}>
<h2 className={classes.titleSection}>{t("help us")}</h2>
<div className={classes.helpUsCards}>

{
(["declare referent", "edit software", "add software or service"] as const).map(
cardName => {

const link= (()=>{
switch(cardName){
case "add software or service": return routes.addSoftwareLanding().link;
case "declare referent": return routes.declarationForm.
}
})();

return (
<Card
key={cardName}
title={t(`${cardName} title`)}
desc={t(`${cardName} desc`)}
imageAlt={t("illustration image")}
linkProps={{ href: card.href }}
imageUrl={card.imgUrl}
footer={
<Button priority="primary" type="button">
{t(`${cardName} button label`)}
</Button>
}
enlargeLink={false}
/>
);
}
)
}

{/*
{helpUsCards.map(card => (
<Card
key={card.title}
title={card.title}
linkProps={{ href: card.href }}
desc={card.description}
imageAlt="Image d'illustration"
imageUrl={card.imgUrl}
footer={
<Button priority="primary" type="button">
{card.buttonLabel}
</Button>
{(
[
"declare referent",
"edit software",
"add software or service"
] as const
).map(cardName => {
const link = (() => {
switch (cardName) {
case "add software or service":
return routes.addSoftwareLanding().link;
case "declare referent":
case "edit software":
return routes.softwareCatalog().link;
}
enlargeLink={false}
/>
))}
*/}
})();

return (
<Card
classes={{
"img": css({
"& > img": {
"objectFit": "unset",
"background": "white"
}
})
}}
key={cardName}
title={t(`${cardName} title`)}
desc={t(`${cardName} desc`)}
imageAlt={t("illustration image")}
linkProps={link}
imageUrl={(() => {
switch (cardName) {
case "declare referent":
return humanCooperationSvgUrl;
case "edit software":
return documentSvgUrl;
case "add software or service":
return codingSvgUrl;
}
})()}
footer={
<Button priority="primary" linkProps={link}>
{t(`${cardName} button label`)}
</Button>
}
enlargeLink={false}
/>
);
})}
</div>
</div>
</div>
Expand Down Expand Up @@ -302,12 +280,10 @@ const useStyles = makeStyles({ "name": { Homepage } })(theme => ({

export const { i18n } = declareComponentKeys<
| {
K: "title";
P: { accentColor: string };
R: JSX.Element;
}
| "or"
| "sign in"
K: "title";
P: { accentColor: string };
R: JSX.Element;
}
| "software selection"
| "last added"
| "most used"
Expand All @@ -321,19 +297,22 @@ export const { i18n } = declareComponentKeys<
| "agentReferentCount"
| "organizationCount"
| "help us"
| "declare referent title"
| "declare referent description"
| "search software"
| "edit software title"
| "edit software description"
| "add software or service description"
| "complete form"
| "the sill in a few words"
| {
K: "the sill in a few words paragraph";
P: { accentColor: string };
R: JSX.Element;
}
K: "the sill in a few words paragraph";
P: { accentColor: string };
R: JSX.Element;
}
| "illustration image"
| "declare referent title"
| "edit software title"
| "add software or service title"
| "declare referent desc"
| "edit software desc"
| "add software or service desc"
| "declare referent button label"
| "edit software button label"
| "add software or service button label"
>()({ Homepage });

const { HeroSection } = (() => {
Expand Down

0 comments on commit 90fea2d

Please sign in to comment.