From 81121f8a55c2f51a81b50e211404202159d7049b Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Thu, 21 Sep 2023 17:38:10 +0200
Subject: [PATCH] =?UTF-8?q?Met=20=C3=A0=20jour=20la=20landing=20pour=20fai?=
 =?UTF-8?q?re=20ressortir=20les=20outils=20mis=20en=20avant=20et=20le=20CT?=
 =?UTF-8?q?A=20pour=20voir=20les=20simulateurs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/source/components/PageHeader.tsx         |  13 +-
 .../source/components/company/SearchField.tsx |  46 +++---
 site/source/design-system/card/Card.tsx       |   3 +-
 site/source/design-system/global-style.ts     |   3 +
 .../design-system/typography/paragraphs.tsx   |   6 +-
 site/source/pages/_landing/Landing.tsx        |  69 ++++-----
 site/source/pages/_landing/SearchOrCreate.tsx | 145 ++++++------------
 .../assistants/choix-du-statut/config.ts      |   4 +-
 .../simulateurs/auto-entrepreneur/config.ts   |   4 +-
 .../pages/simulateurs/salarié/config.ts       |   6 +-
 10 files changed, 120 insertions(+), 179 deletions(-)

diff --git a/site/source/components/PageHeader.tsx b/site/source/components/PageHeader.tsx
index 75c83a558..8092c57c3 100644
--- a/site/source/components/PageHeader.tsx
+++ b/site/source/components/PageHeader.tsx
@@ -21,17 +21,10 @@ export default function PageHeader({
 	picture?: string
 }) {
 	return (
-		<Grid
-			container
-			columnSpacing={6}
-			css={
-				{
-					/* align-items: center; */
-				}
-			}
-		>
+		<Grid container>
 			<Grid
 				item
+				xs={12}
 				sm={12}
 				md={picture ? 8 : 12}
 				lg={picture ? 7 : 12}
@@ -50,7 +43,7 @@ export default function PageHeader({
 			</Grid>
 
 			{picture && (
-				<InnerGrid item className="hide-mobile" md={4} lg={5}>
+				<InnerGrid item className="hide-mobile" md={4} lg={5} xl={4}>
 					<Illustration
 						className="hide-mobile"
 						titre={titre}
diff --git a/site/source/components/company/SearchField.tsx b/site/source/components/company/SearchField.tsx
index 76ff5c070..cb645f269 100644
--- a/site/source/components/company/SearchField.tsx
+++ b/site/source/components/company/SearchField.tsx
@@ -4,10 +4,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import { styled } from 'styled-components'
 
 import { FabriqueSocialEntreprise } from '@/api/fabrique-social'
-import {
-	ForceThemeProvider,
-	ThemeType,
-} from '@/components/utils/DarkModeContext'
+import { ForceThemeProvider } from '@/components/utils/DarkModeContext'
 import { Message } from '@/design-system'
 import { Card } from '@/design-system/card'
 import { SearchField } from '@/design-system/field'
@@ -20,7 +17,7 @@ import { Li, Ul } from '@/design-system/typography/list'
 import { Body } from '@/design-system/typography/paragraphs'
 import useSearchCompany from '@/hooks/useSearchCompany'
 
-import { FromTop } from '../ui/animate'
+import { Appear, FromTop } from '../ui/animate'
 import CompanySearchDetails from './SearchDetails'
 
 const StyledCard = styled(Card)`
@@ -36,7 +33,6 @@ export function CompanySearchField(props: {
 	onValue?: () => void
 	onClear?: () => void
 	onSubmit?: (search: FabriqueSocialEntreprise | null) => void
-	forceTheme?: ThemeType
 }) {
 	const { t } = useTranslation()
 	const refResults = useRef<FabriqueSocialEntreprise[] | null>(null)
@@ -75,28 +71,28 @@ export function CompanySearchField(props: {
 	return (
 		<Grid container>
 			<Grid item xs={12}>
-				<ForceThemeProvider forceTheme={props?.forceTheme}>
-					<SearchField
-						data-test-id="company-search-input"
-						state={state}
-						isSearchStalled={searchPending}
-						onClear={onClear}
-						aria-label={
-							searchFieldProps.label +
-							', ' +
-							t(
-								"recherche lancée automatiquement après l'entrée de caractères, les résultats s'afficheront à la suite de cet élément."
-							)
-						}
-						{...searchFieldProps}
-					/>
-				</ForceThemeProvider>
+				<SearchField
+					data-test-id="company-search-input"
+					state={state}
+					isSearchStalled={searchPending}
+					onClear={onClear}
+					aria-label={
+						searchFieldProps.label +
+						', ' +
+						t(
+							"recherche lancée automatiquement après l'entrée de caractères, les résultats s'afficheront à la suite de cet élément."
+						)
+					}
+					{...searchFieldProps}
+				/>
 			</Grid>
 
 			<Grid item xs={12}>
-				{state.value && !searchPending && (
-					<Results results={results} onSubmit={onSubmit} />
-				)}
+				<Appear unless={searchPending || !state.value}>
+					{state.value && !searchPending && (
+						<Results results={results} onSubmit={onSubmit} />
+					)}
+				</Appear>
 			</Grid>
 		</Grid>
 	)
diff --git a/site/source/design-system/card/Card.tsx b/site/source/design-system/card/Card.tsx
index 4171cbc9a..0747b05ff 100644
--- a/site/source/design-system/card/Card.tsx
+++ b/site/source/design-system/card/Card.tsx
@@ -64,7 +64,7 @@ export function Card(props: CardProps) {
 			tabIndex={tabIndex}
 			className={className}
 		>
-			{icon && <IconContainer>{icon}</IconContainer>}
+			{icon && <IconContainer className="hide-mobile">{icon}</IconContainer>}
 			{title &&
 				(compact ? (
 					<CompactStyledHeader {...titleProps} />
@@ -149,6 +149,7 @@ const CardButton = styled(StyledButton)`
 const IconContainer = styled.div`
 	transform: scale(2.3);
 	margin-top: ${({ theme }) => theme.spacings.md};
+	margin-bottom: 0;
 `
 
 export const CardContainer = styled.div<{
diff --git a/site/source/design-system/global-style.ts b/site/source/design-system/global-style.ts
index 96839b58e..37e9c1361 100644
--- a/site/source/design-system/global-style.ts
+++ b/site/source/design-system/global-style.ts
@@ -134,6 +134,9 @@ figure {
 	html {
 		font-size: 0.9rem;
 	}
+	.hide-mobile {
+		display: none;
+	}
 }
 
 // Cache le slider opacité du ColorPicker
diff --git a/site/source/design-system/typography/paragraphs.tsx b/site/source/design-system/typography/paragraphs.tsx
index 80df35a95..d32b52961 100644
--- a/site/source/design-system/typography/paragraphs.tsx
+++ b/site/source/design-system/typography/paragraphs.tsx
@@ -15,10 +15,10 @@ export const baseParagraphStyle = css`
 	}
 `
 
-export const Intro = styled.p`
+export const Intro = styled.p<{ $xxl?: boolean }>`
 	${baseParagraphStyle}
-	font-size: 1.25rem;
-	line-height: 2rem;
+	font-size: ${({ $xxl }) => ($xxl ? '1.5rem' : '1.25rem')};
+	line-height: ${({ $xxl }) => ($xxl ? '2.5rem' : '2rem')};
 `
 
 export const Body = styled.p`
diff --git a/site/source/pages/_landing/Landing.tsx b/site/source/pages/_landing/Landing.tsx
index df0624b41..e2fe54c02 100644
--- a/site/source/pages/_landing/Landing.tsx
+++ b/site/source/pages/_landing/Landing.tsx
@@ -3,9 +3,11 @@ import { styled } from 'styled-components'
 
 import { TrackPage } from '@/components/ATInternetTracking'
 import PageHeader from '@/components/PageHeader'
+import { ForceThemeProvider } from '@/components/utils/DarkModeContext'
 import Meta from '@/components/utils/Meta'
 import { Button } from '@/design-system/buttons'
 import { Container, Grid, Spacing } from '@/design-system/layout'
+import { Strong } from '@/design-system/typography'
 import { H2 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Body, Intro } from '@/design-system/typography/paragraphs'
@@ -43,31 +45,37 @@ export default function Landing() {
 					}
 					picture={illustrationSvg}
 				>
-					<Intro>
+					<Intro $xxl>
 						<Trans i18nKey="landing.subtitle">
-							Les simulateurs et assistants pour développer votre activité, du
-							statut juridique à l'embauche.
+							Des assistants et simulateurs pour obtenir des{' '}
+							<Strong>réponses personnalisées</Strong> à vos questions sur la{' '}
+							<Strong>création et la gestion</Strong> de votre entreprise.
 						</Trans>
 					</Intro>
+					<Spacing sm />
+					<Grid container>
+						<Grid item xs={12}>
+							<Button
+								size="XL"
+								light
+								to={absoluteSitePaths.simulateursEtAssistants}
+							>
+								<Trans i18nKey="landing.choice.simulators.title">
+									Découvrir la liste de tous les outils
+								</Trans>
+							</Button>
+						</Grid>
+					</Grid>
+					<Spacing xxl />
 				</PageHeader>
 			</Container>
 			<Container
 				forceTheme="dark"
 				backgroundColor={(theme) => theme.colors.bases.primary[600]}
 			>
-				<SearchOrCreate />
-				<Spacing xl />
-			</Container>
-			<Container>
 				<Trans i18nKey="landing.outils">
-					<H2>Les outils à votre disposition</H2>
-					<Body>
-						Nous mettons à votre disposition des assistants et simulateurs pour
-						vous aider à la gestion de votre entreprise, anticiper les
-						prélèvements et planifier votre trésorerie en conséquence.
-					</Body>
+					<H2>Quelques simulateurs de référence</H2>
 				</Trans>
-
 				<Grid
 					container
 					spacing={4}
@@ -76,33 +84,18 @@ export default function Landing() {
 						justifyContent: 'center',
 					}}
 				>
-					<SimulateurCard {...simulators.salarié} />
+					<ForceThemeProvider forceTheme="default">
+						<SimulateurCard {...simulators.salarié} />
 
-					<SimulateurCard {...simulators['auto-entrepreneur']} />
+						<SimulateurCard {...simulators['choix-statut']} />
 
-					<SimulateurCard {...simulators['comparaison-statuts']} />
-
-					<Grid
-						item
-						xs={12}
-						style={{
-							display: 'flex',
-						}}
-					>
-						<Button
-							size="XL"
-							to={absoluteSitePaths.simulateursEtAssistants}
-							style={{
-								whiteSpace: 'nowrap',
-								margin: 'auto',
-							}}
-						>
-							<Trans i18nKey="landing.choice.simulators.title">
-								Découvrir tous les simulateurs et assistants
-							</Trans>
-						</Button>
-					</Grid>
+						<SimulateurCard {...simulators['auto-entrepreneur']} />
+					</ForceThemeProvider>
 				</Grid>
+				<Spacing xxl />
+			</Container>
+			<Container>
+				<SearchOrCreate />
 				<Spacing xl />
 			</Container>
 			<Container
diff --git a/site/source/pages/_landing/SearchOrCreate.tsx b/site/source/pages/_landing/SearchOrCreate.tsx
index c07271b80..f7e0965bd 100644
--- a/site/source/pages/_landing/SearchOrCreate.tsx
+++ b/site/source/pages/_landing/SearchOrCreate.tsx
@@ -9,11 +9,9 @@ import {
 } from '@/api/fabrique-social'
 import { CompanyDetails } from '@/components/company/Details'
 import { CompanySearchField } from '@/components/company/SearchField'
-import { ForceThemeProvider } from '@/components/utils/DarkModeContext'
 import { useEngine } from '@/components/utils/EngineContext'
 import AnswerGroup from '@/design-system/answer-group'
 import { Button } from '@/design-system/buttons'
-import { Emoji } from '@/design-system/emoji'
 import { Grid, Spacing } from '@/design-system/layout'
 import PopoverConfirm from '@/design-system/popover/PopoverConfirm'
 import { H3 } from '@/design-system/typography/heading'
@@ -38,104 +36,61 @@ export default function SearchOrCreate() {
 	const { t } = useTranslation()
 
 	return (
-		<ForceThemeProvider forceTheme="dark">
-			<Grid container spacing={3}>
-				<Grid item xl={8} lg={10} md={12}>
-					{companySIREN ? (
-						<>
-							<H3 as="h2">Votre entreprise</H3>
-							<CompanyDetails headingTag="h3" />
-							<Spacing md />
-							<AnswerGroup role="list">
-								<Button
-									role="link"
-									to={generatePath(
-										absoluteSitePaths.assistants['pour-mon-entreprise']
-											.entreprise,
-										{ entreprise: companySIREN as string }
-									)}
-									data-test-id="cta-see-custom-simulators"
-									aria-label={t(
-										'Voir les simulateurs personnalisés, accéder à la page de gestion de mon entreprise'
-									)}
-								>
-									{t('Voir les simulateurs personnalisés')}
-								</Button>
-								<PopoverConfirm
-									trigger={(buttonProps) => (
-										<Button
-											light
-											aria-label={t('Réinitialiser la situation enregistrée')}
-											{...buttonProps}
-										>
-											{t('Réinitialiser')}
-										</Button>
-									)}
-									onConfirm={() => dispatch(resetCompany())}
-									small
-									title={t(
-										'Êtes-vous sûr de vouloir réinitialiser la situation enregistrée ?'
-									)}
-								/>
-							</AnswerGroup>
-						</>
-					) : (
-						<>
-							<Trans i18nKey="landing.searchcompany">
-								<H3 as="h2">Rechercher votre entreprise </H3>
-								<Body>
-									Pour accéder à nos simulateurs les plus pertinents pour votre
-									activité
-								</Body>
-							</Trans>
-							<CompanySearchField
-								onSubmit={handleCompanySubmit}
-								forceTheme="dark"
-							/>
-							<Spacing md />
-							<Grid container spacing={2}>
-								<Grid item>
+		<Grid container spacing={3}>
+			<Grid item xl={8} lg={10} md={12}>
+				{companySIREN ? (
+					<>
+						<H3 as="h2">Votre entreprise</H3>
+						<CompanyDetails headingTag="h3" />
+						<Spacing md />
+						<AnswerGroup role="list">
+							<Button
+								role="link"
+								to={generatePath(
+									absoluteSitePaths.assistants['pour-mon-entreprise']
+										.entreprise,
+									{ entreprise: companySIREN as string }
+								)}
+								data-test-id="cta-see-custom-simulators"
+								aria-label={t(
+									'Voir les simulateurs personnalisés, accéder à la page de gestion de mon entreprise'
+								)}
+							>
+								{t('Voir les simulateurs personnalisés')}
+							</Button>
+							<PopoverConfirm
+								trigger={(buttonProps) => (
 									<Button
-										size="XL"
-										role="link"
-										to={
-											// statutChoisi
-											// 	? absoluteSitePaths.assistants['choix-du-statut'][
-											// 			statutChoisi
-											// 	  ]
-											// 	:
-											absoluteSitePaths.assistants['choix-du-statut'].index
-										}
-										aria-label={t(
-											'landing.choice.create.aria-label',
-											"J'aimerais créer mon entreprise, accéder au guide de création d'entreprise."
-										)}
-									>
-										<Emoji emoji="💡" />{' '}
-										<Trans i18nKey="landing.choice.create.title">
-											J'aimerais créer mon entreprise
-										</Trans>
-									</Button>
-								</Grid>
-								<Grid item>
-									<Button
-										size="XL"
-										role="link"
 										light
-										to={absoluteSitePaths.simulateurs.index}
-										color="secondary"
+										aria-label={t('Réinitialiser la situation enregistrée')}
+										{...buttonProps}
 									>
-										<Trans i18nKey="landing.choice.simulator.list">
-											Consulter la liste de nos simulateurs
-										</Trans>
+										{t('Réinitialiser')}
 									</Button>
-								</Grid>
-							</Grid>
-						</>
-					)}
-				</Grid>
+								)}
+								onConfirm={() => dispatch(resetCompany())}
+								small
+								title={t(
+									'Êtes-vous sûr de vouloir réinitialiser la situation enregistrée ?'
+								)}
+							/>
+						</AnswerGroup>
+					</>
+				) : (
+					<>
+						<Trans i18nKey="landing.searchcompany">
+							<H3 as="h2">Rechercher votre entreprise </H3>
+							<Body>
+								Pour accéder à nos simulateurs les plus pertinents pour votre
+								activité
+							</Body>
+						</Trans>
+						<CompanySearchField onSubmit={handleCompanySubmit} />
+						<Spacing md />
+					</>
+				)}
 			</Grid>
-		</ForceThemeProvider>
+		</Grid>
 	)
 }
 
diff --git a/site/source/pages/assistants/choix-du-statut/config.ts b/site/source/pages/assistants/choix-du-statut/config.ts
index a7f898139..4532190fc 100644
--- a/site/source/pages/assistants/choix-du-statut/config.ts
+++ b/site/source/pages/assistants/choix-du-statut/config.ts
@@ -24,11 +24,11 @@ export function choixStatutJuridiqueConfig({
 			),
 			description: t(
 				'pages.choix-statut.meta.description',
-				'SASU, EURL, auto-entrepreneur, entreprise individuelle : trouvez le statut qui vous convient le mieux'
+				"SAS, EURL, EI, auto-entrepreneur...  Ce simulateur vous aide à choisir le statut juridique le plus adapté à votre projet d'entreprise."
 			),
 		},
 		title: t('pages.choix-statut.title', 'Choisir votre statut'),
-		shortName: t('pages.choix-statut.shortname', 'Assistant statut juridique'),
+		shortName: t('pages.choix-statut.shortname', 'Choix du statut'),
 		component: ChoixDuStatut,
 		simulation: {
 			situation: {
diff --git a/site/source/pages/simulateurs/auto-entrepreneur/config.ts b/site/source/pages/simulateurs/auto-entrepreneur/config.ts
index 6356d7b4b..4154b1cfa 100644
--- a/site/source/pages/simulateurs/auto-entrepreneur/config.ts
+++ b/site/source/pages/simulateurs/auto-entrepreneur/config.ts
@@ -13,11 +13,11 @@ export function autoEntrepreneurConfig({ t, sitePaths }: SimulatorsDataParams) {
 		meta: {
 			description: t(
 				'pages.simulateurs.auto-entrepreneur.meta.description',
-				"Calcul du revenu à partir du chiffre d'affaires, après déduction des cotisations et des impôts"
+				'Calculez votre revenu net après cotisations et impôts en tenant compte de toutes les options, y compris ACRE et prélèvement libératoire.'
 			),
 			ogDescription: t(
 				'pages.simulateurs.auto-entrepreneur.meta.ogDescription',
-				"Grâce au simulateur de revenu auto-entrepreneur développé par l'Urssaf, vous pourrez estimer le montant de vos revenus en fonction de votre chiffre d'affaires mensuel ou annuel pour mieux gérer votre trésorerie. Ou dans le sens inverse : savoir quel montant facturer pour atteindre un certain revenu."
+				"Prenez le contrôle de vos finances en tant qu'auto-entrepreneur ! Estimez instantanément votre revenu net après charges et découvrez comment gérer au mieux vos revenus. Notre simulateur, conçu avec l'expertise des professionnels, s'adapte à votre activité (secteur, chiffre d'affaires, exonération ACRE, etc.) pour vous aider à atteindre vos objectifs financiers."
 			),
 			ogTitle: t(
 				'pages.simulateurs.auto-entrepreneur.meta.ogTitle',
diff --git a/site/source/pages/simulateurs/salarié/config.ts b/site/source/pages/simulateurs/salarié/config.ts
index 3f2dc548b..f77703073 100644
--- a/site/source/pages/simulateurs/salarié/config.ts
+++ b/site/source/pages/simulateurs/salarié/config.ts
@@ -20,15 +20,15 @@ export function salariéConfig(params: SimulatorsDataParams) {
 		meta: {
 			description: t(
 				'pages.simulateurs.salarié.meta.description',
-				"Calcul du salaire net, net après impôt et coût total employeur. Beaucoup d'options disponibles (cadre, stage, apprentissage, heures supplémentaires, etc.)"
+				"Calculez le coût total d'une embauche et explorez les différentes options de rémunération : cadres, stages, apprentissages, heures supplémentaires, et bien plus !"
 			),
 			ogDescription: t(
 				'pages.simulateurs.salarié.meta.ogDescription',
-				"En tant que salarié, calculez immédiatement votre revenu net après impôt à partir du brut mensuel ou annuel. En tant qu'employé, estimez le coût total d'une embauche à partir du brut. Ce simulateur est développé avec les experts de l'Urssaf, et il adapte les calculs à votre situation (statut cadre, stage, apprentissage, heures supplémentaire, titre-restaurants, mutuelle, temps partiel, convention collective, etc.)"
+				"Optimisez vos finances en un clic ! Calculez instantanément votre revenu net en tant que salarié et évaluez le coût total d'une embauche en tant qu'employeur. Notre simulateur, élaboré avec les experts de l'Urssaf, s'ajuste à votre situation (cadre, stage, apprentissage, heures supplémentaires, avantages, temps partiel, convention collective, etc.) pour des décisions éclairées"
 			),
 			ogTitle: t(
 				'pages.simulateurs.salarié.meta.ogTitle',
-				'Salaire brut, net, net après impôt, coût total : le simulateur ultime pour salariés et employeurs'
+				'Salaire brut, net, net après impôt, coût total : le simulateur tout-en-un pour salariés et employeurs'
 			),
 			title: t(
 				'pages.simulateurs.salarié.meta.titre',