Skip to content

Commit

Permalink
Merge pull request #939 from betagouv/main
Browse files Browse the repository at this point in the history 
MEP add illustration to blackfriday LPs
  • Loading branch information
@eletallbetagouv
eletallbetagouv authored Oct 23, 2024
2 parents e374754 + 7ab6927 commit 62546a1
Show file tree
Hide file tree
Showing 10 changed files with 886 additions and 134 deletions.
660 changes: 660 additions & 0 deletions website/src/img/landings/superhero_elf.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions website/src/landings/manualLandingsUtils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ import {bigReportButtonProps} from '@/components_simple/buttons/buttonsUtils'
import {buildLinkStartReport} from '@/core/pagesDefinitions'
import {getI18n} from '@/i18n/I18nDictionnary'
import {AppLang, AppLangs} from '@/i18n/localization/AppLangs'
import imgSuperhero from '@/img/landings/superhero_elf.svg'
import {ChildrenProps} from '@/utils/utils'
import Image from 'next/image'
import {ReactNode} from 'react'

export function getManualLpButtonProps(lang: AppLang, category: String) {
Expand Down Expand Up @@ -57,6 +59,25 @@ export function NarrowAndCentered({children, narrower = false}: ChildrenProps &
)
}

// This component :
// - adds the illustration on the left on desktop
// - provides the illustration for mobile through a render prop, to be inserted somewhere in the children
export function WithSuperheroIllustration({children}: {children: (mobileIllustration: ReactNode) => ReactNode}) {
const alt = 'Superhéroïne brandissant un smartphone'
return (
<div className="flex gap items-center gap-4 flex-row">
<Image src={imgSuperhero} alt={alt} width={150} className={'hidden md:block'} />
<div>
{children(
<div className="flex justify-center mb-2">
<Image src={imgSuperhero} alt={alt} width={100} className={'md:hidden'} />
</div>,
)}
</div>
</div>
)
}

export function AlternatingPurpleBands({children}: {children: ReactNode[]}) {
// Define the colors to alternate between
const bgColors = ['bg-sclightpurple', 'bg-sclightpurpledarker']
Expand Down
43 changes: 26 additions & 17 deletions website/src/reusablePages/manual_landings/blackFridayAboFraisCaches.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
HighlightPurple,
LpColoredBand,
NarrowAndCentered,
WithSuperheroIllustration,
} from '@/landings/manualLandingsUtils'
import Button from '@codegouvfr/react-dsfr/Button'
import {notFound} from 'next/navigation'
Expand All @@ -24,23 +25,31 @@ export function blackFridayAboFraisCaches(props: PageComponentProps) {
return (
<FullWidthPageContainer>
<AlternatingPurpleBands>
<NarrowAndCentered>
<h1 className="mb-6">
<HighlightBlue>Abonnements ou frais cachés</HighlightBlue> pendant le <HighlightPurple>Black Friday</HighlightPurple>?
</h1>
<p className="fr-h3 !mb-4 !text-scbluefrance">Protégez vos droits avec SignalConso !</p>
<p className="text-lg">
Le Black Friday est souvent synonyme de promotions attractives, mais certains consommateurs peuvent se retrouver
piégés par des abonnements ou des frais cachés non annoncés au moment de l'achat. Ces pratiques trompeuses sont
pourtant illégales.
</p>
<p className="text-lg">
Il vous est peut-être déjà arrivé d'acheter un produit et de vous retrouver avec des prélèvements inexpliqués sur
votre compte en banque. Découvrez vos droits en tant que consommateur face à ces frais ou abonnement cachés et en cas
de litige, faites un signalement sur SignalConso.
</p>
{button}
</NarrowAndCentered>
<WithSuperheroIllustration>
{illustrationMobile => {
return (
<>
<h1 className="mb-6">
<HighlightBlue>Abonnements ou frais cachés</HighlightBlue> pendant le{' '}
<HighlightPurple>Black Friday</HighlightPurple>?
</h1>
<p className="fr-h3 !mb-4 !text-scbluefrance">Protégez vos droits avec SignalConso !</p>
<p className="text-lg">
Le Black Friday est souvent synonyme de promotions attractives, mais certains consommateurs peuvent se retrouver
piégés par des abonnements ou des frais cachés non annoncés au moment de l'achat. Ces pratiques trompeuses sont
pourtant illégales.
</p>
{illustrationMobile}
<p className="text-lg">
Il vous est peut-être déjà arrivé d'acheter un produit et de vous retrouver avec des prélèvements inexpliqués
sur votre compte en banque. Découvrez vos droits en tant que consommateur face à ces frais ou abonnement cachés
et en cas de litige, faites un signalement sur SignalConso.
</p>
{button}
</>
)
}}
</WithSuperheroIllustration>
<div>
<h2 className="fr-h4 ">Les frais cachés et abonnements forcés : Quels sont vos droits en tant que consommateur ?</h2>
<p>
Expand Down
35 changes: 22 additions & 13 deletions website/src/reusablePages/manual_landings/blackFridayColis.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
HighlightPurple,
LpColoredBand,
NarrowAndCentered,
WithSuperheroIllustration,
} from '@/landings/manualLandingsUtils'
import Button from '@codegouvfr/react-dsfr/Button'
import {notFound} from 'next/navigation'
Expand All @@ -24,19 +25,27 @@ export function blackFridayColis(props: PageComponentProps) {
return (
<FullWidthPageContainer>
<AlternatingPurpleBands>
<NarrowAndCentered>
<h1 className="mb-6">
<HighlightBlue>Retard, perte ou colis endommagé</HighlightBlue> pendant le{' '}
<HighlightPurple>Black Friday</HighlightPurple> ?
</h1>
<p className="fr-h3 !mb-4 !text-scbluefrance">Protégez vos droits avec SignalConso !</p>
<p className="text-lg">
Le Black Friday est une période de forte activité pour les services de livraison. Il vous est peut-être déjà arrivé
que vos commandes soient retardées, que des colis se perdent ou arrivent endommagés. Découvrez vos droits en tant que
consommateur face à ces situations et en cas de litige, faites un signalement sur SignalConso.
</p>
{button}
</NarrowAndCentered>
<WithSuperheroIllustration>
{illustrationMobile => {
return (
<>
<h1 className="mb-6">
<HighlightBlue>Retard, perte ou colis endommagé</HighlightBlue> pendant le{' '}
<HighlightPurple>Black Friday</HighlightPurple> ?
</h1>
<p className="fr-h3 !mb-4 !text-scbluefrance">Protégez vos droits avec SignalConso !</p>
<p className="text-lg">
Le Black Friday est une période de forte activité pour les services de livraison. Il vous est peut-être déjà
arrivé que vos commandes soient retardées, que des colis se perdent ou arrivent endommagés. Découvrez vos droits
en tant que consommateur face à ces situations et en cas de litige, faites un signalement sur SignalConso.
</p>
{illustrationMobile}
{button}
</>
)
}}
</WithSuperheroIllustration>

<div>
<h2 className="fr-h4 ">
Votre livraison est retardée ou votre colis s'est perdu pendant le Black Friday : Quels sont vos droits en tant que
Expand Down
48 changes: 28 additions & 20 deletions website/src/reusablePages/manual_landings/blackFridayDarkPatterns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
HighlightPurple,
LpColoredBand,
NarrowAndCentered,
WithSuperheroIllustration,
} from '@/landings/manualLandingsUtils'
import Button from '@codegouvfr/react-dsfr/Button'
import {notFound} from 'next/navigation'
Expand All @@ -24,26 +25,33 @@ export function blackFridayDarkPatterns(props: PageComponentProps) {
return (
<FullWidthPageContainer>
<AlternatingPurpleBands>
<NarrowAndCentered>
<h1 className="mb-6">
<HighlightBlue>Interfaces trompeuses</HighlightBlue> et «<HighlightBlue>Dark Patterns</HighlightBlue>» pendant le{' '}
<HighlightPurple>Black Friday</HighlightPurple>?
</h1>
<p className="fr-h3 !mb-4 !text-scbluefrance">Protégez vos droits avec SignalConso !</p>
<p className="text-lg">
Le Black Friday est l'occasion de faire de bonnes affaires, mais certaines interfaces en ligne utilisent des
interfaces trompeuses pour influencer vos décisions sans que vous vous en rendiez compte. Ces pratiques, appelées{' '}
<strong>dark patterns</strong>, sont des techniques de manipulation intégrées aux sites web ou aux applications pour
vous pousser à faire des choix contraires à vos intérêts. Il vous est peut-être déjà arrivé de vouloir refuser un
abonnement, mais de découvrir que le bouton "Non merci" était caché ou rendu volontairement moins visible que le
bouton "Accepter".
</p>
<p className="text-lg">
Découvrez vos droits en tant que consommateur face à ces frais ou abonnement cachés et en cas de litige, faites un
signalement sur SignalConso.
</p>
{button}
</NarrowAndCentered>
<WithSuperheroIllustration>
{illustrationMobile => {
return (
<>
<h1 className="mb-6">
<HighlightBlue>Interfaces trompeuses</HighlightBlue> et «<HighlightBlue>Dark Patterns</HighlightBlue>» pendant
le <HighlightPurple>Black Friday</HighlightPurple>?
</h1>
<p className="fr-h3 !mb-4 !text-scbluefrance">Protégez vos droits avec SignalConso !</p>
<p className="text-lg">
Le Black Friday est l'occasion de faire de bonnes affaires, mais certaines interfaces en ligne utilisent des
interfaces trompeuses pour influencer vos décisions sans que vous vous en rendiez compte. Ces pratiques,
appelées <strong>dark patterns</strong>, sont des techniques de manipulation intégrées aux sites web ou aux
applications pour vous pousser à faire des choix contraires à vos intérêts. Il vous est peut-être déjà arrivé de
vouloir refuser un abonnement, mais de découvrir que le bouton "Non merci" était caché ou rendu volontairement
moins visible que le bouton "Accepter".
</p>
{illustrationMobile}
<p className="text-lg">
Découvrez vos droits en tant que consommateur face à ces frais ou abonnement cachés et en cas de litige, faites
un signalement sur SignalConso.
</p>
{button}
</>
)
}}
</WithSuperheroIllustration>
<div>
<h2 className="fr-h4 ">Qu'est-ce qu'un dark pattern ?</h2>
<p>
Expand Down
43 changes: 26 additions & 17 deletions website/src/reusablePages/manual_landings/blackFridayFausseReduction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
HighlightPurple,
LpColoredBand,
NarrowAndCentered,
WithSuperheroIllustration,
} from '@/landings/manualLandingsUtils'
import Button from '@codegouvfr/react-dsfr/Button'
import {notFound} from 'next/navigation'
Expand All @@ -24,23 +25,31 @@ export function blackFridayFausseReduction(props: PageComponentProps) {
return (
<FullWidthPageContainer>
<AlternatingPurpleBands>
<NarrowAndCentered>
<h1 className="mb-6">
<HighlightBlue>Fausses réductions de prix</HighlightBlue> pendant le <HighlightPurple>Black Friday</HighlightPurple>?
</h1>
<p className="fr-h3 !mb-4 !text-scbluefrance">Protégez vos droits avec SignalConso !</p>
<p className="text-lg">
Le Black Friday est synonyme de bonnes affaires, mais attention aux fausses réductions de prix ou au promotion
mensongère. Certains commerçants peu scrupuleux gonflent artificiellement leurs prix juste avant cette période, pour
ensuite afficher de fausses réductions. Vous avez peut-être déjà vu des produits en promotion, alors qu'ils sont
vendus au même prix, voire plus cher que d'habitude.
</p>
<p className="text-lg">
Découvrez vos droits en tant que consommateur face à ces fausses réductions de prix et en cas de litige, faites un
signalement sur SignalConso.
</p>
{button}
</NarrowAndCentered>
<WithSuperheroIllustration>
{illustrationMobile => {
return (
<>
<h1 className="mb-6">
<HighlightBlue>Fausses réductions de prix</HighlightBlue> pendant le{' '}
<HighlightPurple>Black Friday</HighlightPurple>?
</h1>
<p className="fr-h3 !mb-4 !text-scbluefrance">Protégez vos droits avec SignalConso !</p>
<p className="text-lg">
Le Black Friday est synonyme de bonnes affaires, mais attention aux fausses réductions de prix ou au promotion
mensongère. Certains commerçants peu scrupuleux gonflent artificiellement leurs prix juste avant cette période,
pour ensuite afficher de fausses réductions. Vous avez peut-être déjà vu des produits en promotion, alors qu'ils
sont vendus au même prix, voire plus cher que d'habitude.
</p>
{illustrationMobile}
<p className="text-lg">
Découvrez vos droits en tant que consommateur face à ces fausses réductions de prix et en cas de litige, faites
un signalement sur SignalConso.
</p>
{button}
</>
)
}}
</WithSuperheroIllustration>
<div>
<h2 className="fr-h4 ">Fausses réductions de prix : Quels sont vos droits en tant que consommateur ?</h2>
<p>Selon le Code de la consommation, les commerçants doivent respecter certaines règles concernant les promotions :</p>
Expand Down
41 changes: 25 additions & 16 deletions website/src/reusablePages/manual_landings/blackFridayFauxSiteGouvernemental.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
HighlightBlue,
LpColoredBand,
NarrowAndCentered,
WithSuperheroIllustration,
} from '@/landings/manualLandingsUtils'
import Button from '@codegouvfr/react-dsfr/Button'
import {notFound} from 'next/navigation'
Expand All @@ -23,22 +24,30 @@ export function blackFridayFauxSiteGouvernemental(props: PageComponentProps) {
return (
<FullWidthPageContainer>
<AlternatingPurpleBands>
<NarrowAndCentered>
<h1 className="mb-6">
<HighlightBlue>Faux sites gouvernementaux</HighlightBlue> : ne tombez pas dans le piège
</h1>
<p className="fr-h3 !mb-4 !text-scbluefrance">Et protégez vos droits avec SignalConso !</p>
<p className="text-lg">
Pendant des périodes de forte activité, comme le Black Friday, des sites frauduleux imitant des services publics ou
des sites gouvernementaux se multiplient. Ces faux sites cherchent à vous tromper en utilisant des logos et des noms
officiels pour voler vos informations personnelles ou vous faire payer des services qui sont normalement gratuits.
</p>
<p className="text-lg">
Découvrez vos droits en tant que consommateur face à ces sites frauduleux et en cas de litige, faites un signalement
sur SignalConso.
</p>
{button}
</NarrowAndCentered>
<WithSuperheroIllustration>
{illustrationMobile => {
return (
<>
<h1 className="mb-6">
<HighlightBlue>Faux sites gouvernementaux</HighlightBlue> : ne tombez pas dans le piège
</h1>
<p className="fr-h3 !mb-4 !text-scbluefrance">Et protégez vos droits avec SignalConso !</p>
<p className="text-lg">
Pendant des périodes de forte activité, comme le Black Friday, des sites frauduleux imitant des services publics
ou des sites gouvernementaux se multiplient. Ces faux sites cherchent à vous tromper en utilisant des logos et
des noms officiels pour voler vos informations personnelles ou vous faire payer des services qui sont
normalement gratuits.
</p>
{illustrationMobile}
<p className="text-lg">
Découvrez vos droits en tant que consommateur face à ces sites frauduleux et en cas de litige, faites un
signalement sur SignalConso.
</p>
{button}
</>
)
}}
</WithSuperheroIllustration>
<div>
<h2 className="fr-h4 ">Qu'est-ce qu'un faux site gouvernemental ?</h2>
<p>
Expand Down
44 changes: 26 additions & 18 deletions website/src/reusablePages/manual_landings/blackFridayFauxStocks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
HighlightPurple,
LpColoredBand,
NarrowAndCentered,
WithSuperheroIllustration,
} from '@/landings/manualLandingsUtils'
import Button from '@codegouvfr/react-dsfr/Button'
import {notFound} from 'next/navigation'
Expand All @@ -24,24 +25,31 @@ export function blackFridayFauxStocks(props: PageComponentProps) {
return (
<FullWidthPageContainer>
<AlternatingPurpleBands>
<NarrowAndCentered>
<h1 className="mb-6">
Fausse information sur <HighlightBlue>l’état des stocks</HighlightBlue> pendant le{' '}
<HighlightPurple>Black Friday</HighlightPurple> ?
</h1>
<p className="fr-h3 !mb-4 !text-scbluefrance">Protégez vos droits avec SignalConso !</p>
<p className="text-lg">
Le Black Friday est une période idéale pour profiter de réductions importantes, mais elle peut également être synonyme
de pratiques commerciales trompeuses. L'une des plus courantes concerne la fausse information sur l'état des stocks.
Vous avez peut-être déjà vu des offres alléchantes annoncées comme "stock limité" ou "dernière chance", pour ensuite
découvrir que les produits sont en réalité toujours disponibles.
</p>
<p className="text-lg">
Découvrez vos droits en tant que consommateur face à ces fausses informations sur l’état des stocks et en cas de
litige, faites un signalement sur SignalConso.
</p>
{button}
</NarrowAndCentered>
<WithSuperheroIllustration>
{illustrationMobile => {
return (
<>
<h1 className="mb-6">
Fausse information sur <HighlightBlue>l’état des stocks</HighlightBlue> pendant le{' '}
<HighlightPurple>Black Friday</HighlightPurple> ?
</h1>
<p className="fr-h3 !mb-4 !text-scbluefrance">Protégez vos droits avec SignalConso !</p>
<p className="text-lg">
Le Black Friday est une période idéale pour profiter de réductions importantes, mais elle peut également être
synonyme de pratiques commerciales trompeuses. L'une des plus courantes concerne la fausse information sur
l'état des stocks. Vous avez peut-être déjà vu des offres alléchantes annoncées comme "stock limité" ou
"dernière chance", pour ensuite découvrir que les produits sont en réalité toujours disponibles.
</p>
{illustrationMobile}
<p className="text-lg">
Découvrez vos droits en tant que consommateur face à ces fausses informations sur l’état des stocks et en cas de
litige, faites un signalement sur SignalConso.
</p>
{button}
</>
)
}}
</WithSuperheroIllustration>
<div>
<h2 className="fr-h4 ">Fausse information sur l’état des stocks : Quels sont vos droits en tant que consommateur ?</h2>
<p>
Expand Down
Loading

0 comments on commit 62546a1

Please sign in to comment.