From 81fa930a6ea4260a91c362b3fb0924e6e4756482 Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Thu, 20 Apr 2023 17:54:07 +0200
Subject: [PATCH] Fix style des liens

---
 site/source/components/App.tsx                |  15 +-
 site/source/components/PageHeader.tsx         |   8 +-
 .../components/layout/Footer/Footer.tsx       |   6 +-
 site/source/components/layout/Header.tsx      |   7 +-
 .../source/design-system/layout/Container.tsx |  19 +-
 site/source/pages/_landing/Landing.tsx        | 277 ++++++++----------
 .../_components/Navigation.tsx                |  42 +--
 .../pages/assistants/choix-du-statut/home.tsx |  56 ++--
 8 files changed, 207 insertions(+), 223 deletions(-)

diff --git a/site/source/components/App.tsx b/site/source/components/App.tsx
index 81da2de0c..3558ce142 100644
--- a/site/source/components/App.tsx
+++ b/site/source/components/App.tsx
@@ -16,7 +16,7 @@ import {
 	useEngine,
 	useSetupSafeSituation,
 } from '@/components/utils/EngineContext'
-import { Container, Spacing } from '@/design-system/layout'
+import { Container } from '@/design-system/layout'
 import { useAxeCoreAnalysis } from '@/hooks/useAxeCoreAnalysis'
 import { useGetFullURL } from '@/hooks/useGetFullURL'
 import { useIsEmbedded } from '@/hooks/useIsEmbedded'
@@ -80,7 +80,6 @@ const Router = () => {
 
 	return (
 		<Routes>
-			<Route index element={<Landing />} />
 			<Route path="/iframes/*" element={<Iframes />} />
 			<Route path="*" element={<App />} />
 		</Routes>
@@ -115,7 +114,15 @@ const App = () => {
 		<StyledLayout isEmbedded={isEmbedded}>
 			{!isEmbedded && <Header />}
 
-			<main role="main" id="main">
+			<main
+				role="main"
+				id="main"
+				css={`
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+				`}
+			>
 				<a
 					href={`${fullURL}#footer`}
 					aria-label={t(
@@ -128,6 +135,8 @@ const App = () => {
 				<Container>
 					<ErrorBoundary fallback={CatchOffline}>
 						<Routes>
+							<Route index element={<Landing />} />
+
 							<Route
 								path={relativeSitePaths.assistants.index + '/*'}
 								element={<Assistants />}
diff --git a/site/source/components/PageHeader.tsx b/site/source/components/PageHeader.tsx
index 0da185034..1c219301a 100644
--- a/site/source/components/PageHeader.tsx
+++ b/site/source/components/PageHeader.tsx
@@ -23,7 +23,7 @@ export default function PageHeader({
 	return (
 		<Grid
 			container
-			spacing={3}
+			spacing={6}
 			css={`
 				align-items: center;
 			`}
@@ -31,8 +31,8 @@ export default function PageHeader({
 			<Grid
 				item
 				sm={12}
-				md={picture ? 9 : 12}
-				lg={picture ? 8 : 12}
+				md={picture ? 8 : 12}
+				lg={picture ? 7 : 12}
 				css={`
 					display: flex;
 					flex-direction: column !important;
@@ -48,7 +48,7 @@ export default function PageHeader({
 			</Grid>
 
 			{picture && (
-				<InnerGrid item className="hide-mobile" md={3} lg={4}>
+				<InnerGrid item className="hide-mobile" md={4} lg={5}>
 					<Illustration
 						className="hide-mobile"
 						titre={titre}
diff --git a/site/source/components/layout/Footer/Footer.tsx b/site/source/components/layout/Footer/Footer.tsx
index 7b78eda29..c77e31d57 100644
--- a/site/source/components/layout/Footer/Footer.tsx
+++ b/site/source/components/layout/Footer/Footer.tsx
@@ -68,11 +68,7 @@ export default function Footer() {
 					/>
 				)}
 			</Helmet>
-			<div
-				css={`
-					flex: 1;
-				`}
-			/>
+
 			<footer role="contentinfo" id="footer">
 				<Container
 					backgroundColor={(theme) =>
diff --git a/site/source/components/layout/Header.tsx b/site/source/components/layout/Header.tsx
index a710a4ac7..c5ddbcc61 100644
--- a/site/source/components/layout/Header.tsx
+++ b/site/source/components/layout/Header.tsx
@@ -25,7 +25,12 @@ export default function Header() {
 	const [darkMode, setDarkMode] = useDarkMode()
 
 	return (
-		<header role="banner">
+		<header
+			role="banner"
+			css={`
+				z-index: 1;
+			`}
+		>
 			<a href={`${fullURL}#main`} className="skip-link print-hidden">
 				{t('Aller au contenu principal')}
 			</a>
diff --git a/site/source/design-system/layout/Container.tsx b/site/source/design-system/layout/Container.tsx
index 22cfd2f53..106fec792 100644
--- a/site/source/design-system/layout/Container.tsx
+++ b/site/source/design-system/layout/Container.tsx
@@ -9,39 +9,42 @@ import {
 const InnerContainer = styled.div`
 	margin-right: auto;
 	margin-left: auto;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
 
 	@media (max-width: ${({ theme }) => theme.breakpointsWidth.sm}) {
 		padding-left: 16px;
 		padding-right: 16px;
-		max-width: 100vw;
+		width: 100vw;
 	}
 
 	@media (min-width: ${({ theme }) => theme.breakpointsWidth.sm}) {
 		padding-left: 16px;
 		padding-right: 16px;
-		max-width: 576px;
+		width: 576px;
 	}
 
 	@media (min-width: ${({ theme }) => theme.breakpointsWidth.md}) {
 		padding-left: 24px;
 		padding-right: 24px;
-		max-width: 768px;
+		width: 768px;
 	}
 
 	@media (min-width: ${({ theme }) => theme.breakpointsWidth.lg}) {
 		padding-left: 24px;
 		padding-right: 24px;
-		max-width: 992px;
+		width: 992px;
 	}
 
 	@media (min-width: ${({ theme }) => theme.breakpointsWidth.xl}) {
 		padding-left: 24px;
 		padding-right: 24px;
-		max-width: 1200px;
+		width: 1200px;
 	}
 
 	@media print {
-		max-width: 100%;
+		width: 100%;
 		padding: 0;
 	}
 `
@@ -79,6 +82,8 @@ export default function Container({
 
 const OuterContainer = styled.div<OuterContainerProps>`
 	flex: 1;
+	display: flex;
+	flex-direction: column;
 	min-width: 100vw;
 	background-color: ${({ theme, $backgroundColor }) =>
 		$backgroundColor ? $backgroundColor(theme) : theme.colors};
@@ -96,7 +101,7 @@ const OuterContainer = styled.div<OuterContainerProps>`
 
 const OuterOuterContainer = styled.div`
 	display: flex;
-	flex-direction: row;
+	flex: 1;
 	justify-content: center;
 	@media print {
 		break-inside: avoid;
diff --git a/site/source/pages/_landing/Landing.tsx b/site/source/pages/_landing/Landing.tsx
index bcc755708..d91134eca 100644
--- a/site/source/pages/_landing/Landing.tsx
+++ b/site/source/pages/_landing/Landing.tsx
@@ -2,8 +2,6 @@ import { Trans, useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import { TrackPage } from '@/components/ATInternetTracking'
-import Footer from '@/components/layout/Footer/Footer'
-import Header from '@/components/layout/Header'
 import PageHeader from '@/components/PageHeader'
 import Meta from '@/components/utils/Meta'
 import { Button } from '@/design-system/buttons'
@@ -11,7 +9,6 @@ import { Container, Grid, Spacing } from '@/design-system/layout'
 import { H2 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Body, Intro } from '@/design-system/typography/paragraphs'
-import { useGetFullURL } from '@/hooks/useGetFullURL'
 import useSimulatorsData from '@/hooks/useSimulatorsData'
 import { useSitePaths } from '@/sitePaths'
 
@@ -25,8 +22,6 @@ export default function Landing() {
 	const { absoluteSitePaths } = useSitePaths()
 	const { t } = useTranslation()
 
-	const fullURL = useGetFullURL()
-
 	return (
 		<>
 			<TrackPage chapter1="informations" name="accueil" />
@@ -38,163 +33,149 @@ export default function Landing() {
 				)}
 				ogImage="/logo-share.png"
 			/>
-			<Header />
 
-			<main role="main" id="main">
-				<a
-					href={`${fullURL}#footer`}
-					aria-label={t(
-						'Passer le contenu principal et aller directement au pied de page'
-					)}
-					className="skip-link print-hidden"
+			<Container>
+				<PageHeader
+					titre={
+						<Trans i18nKey="landing.title">
+							L'assistant officiel des entrepreneurs
+						</Trans>
+					}
+					picture={illustrationSvg}
 				>
-					{t('Aller directement au pied de page')}
-				</a>
-				<Container>
-					<PageHeader
-						titre={
-							<Trans i18nKey="landing.title">
-								L'assistant officiel des entrepreneurs
-							</Trans>
-						}
-						picture={illustrationSvg}
-					>
-						<Intro>
-							<Trans i18nKey="landing.subtitle">
-								Les simulateurs et assistants pour développer votre activité, du
-								statut juridique à l'embauche.
-							</Trans>
-						</Intro>
-					</PageHeader>
-				</Container>
-				<Container
-					forceTheme="dark"
-					backgroundColor={(theme) => theme.colors.bases.primary[600]}
+					<Intro>
+						<Trans i18nKey="landing.subtitle">
+							Les simulateurs et assistants pour développer votre activité, du
+							statut juridique à l'embauche.
+						</Trans>
+					</Intro>
+				</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>
+				</Trans>
+
+				<Grid
+					container
+					spacing={4}
+					css={`
+						align-items: stretch;
+						justify-content: center;
+					`}
 				>
-					<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>
-					</Trans>
+					<SimulateurCard {...simulators.salarié} />
+
+					<SimulateurCard {...simulators['auto-entrepreneur']} />
+
+					<SimulateurCard {...simulators['comparaison-statuts']} />
 
 					<Grid
-						container
-						spacing={4}
+						item
+						xs={12}
 						css={`
-							align-items: stretch;
-							justify-content: center;
+							display: flex;
 						`}
 					>
-						<SimulateurCard {...simulators.salarié} />
-
-						<SimulateurCard {...simulators['auto-entrepreneur']} />
-
-						<SimulateurCard {...simulators['comparaison-statuts']} />
-
-						<Grid
-							item
-							xs={12}
+						<Button
+							size="XL"
+							to={absoluteSitePaths.simulateurs.index}
 							css={`
-								display: flex;
+								white-space: no-wrap;
+								margin: auto;
 							`}
 						>
-							<Button
-								size="XL"
-								to={absoluteSitePaths.simulateurs.index}
-								css={`
-									white-space: no-wrap;
-									margin: auto;
-								`}
-							>
-								<Trans i18nKey="landing.choice.simulators.title">
-									Découvrir tous les simulateurs et assistants
-								</Trans>
-							</Button>
-						</Grid>
-					</Grid>
-					<Spacing xl />
-				</Container>
-				<Container
-					backgroundColor={(theme) =>
-						theme.darkMode
-							? theme.colors.extended.dark[700]
-							: theme.colors.bases.primary[100]
-					}
-				>
-					{' '}
-					<Spacing lg />
-					<Grid
-						container
-						css={`
-							align-items: flex-end;
-						`}
-					>
-						<HideOnMobile item xs={2} md={2}>
-							<img
-								src={illustration2Svg}
-								css={`
-									width: 100%;
-									padding-right: 2rem;
-									padding-bottom: 1rem;
-								`}
-								alt=""
-							/>
-						</HideOnMobile>
-						<Grid item md={10}>
-							<Trans i18nKey="landing.aboutUs">
-								<H2>Qui sommes-nous ?</H2>
-
-								<Body>
-									Nous sommes une petite{' '}
-									<Link
-										aria-label="équipe, accéder à notre page de présentation d'équipe, nouvelle fenêtre"
-										href="https://beta.gouv.fr/startups/mon-entreprise.html#equipe"
-									>
-										équipe
-									</Link>{' '}
-									autonome et pluridisciplinaire au sein de{' '}
-									<Link
-										href="https://www.urssaf.fr"
-										aria-label="l'URSSAF, accéder au site urssaf.fr, nouvelle fenêtre"
-									>
-										l’Urssaf
-									</Link>
-									. Nous avons à cœur d’être au près de vos besoins afin
-									d’améliorer en permanence ce site conformément à l'approche{' '}
-									<Link
-										href="https://beta.gouv.fr/manifeste"
-										aria-label="beta.gouv.fr, accéder au site beta.gouv.fr, nouvelle fenêtre"
-									>
-										beta.gouv.fr
-									</Link>
-									.
-								</Body>
-
-								<Body>
-									Nous avons développé ce site pour accompagner les créateurs
-									d’entreprise dans le développement de leur activité.
-								</Body>
-
-								<Body>
-									Notre objectif est de lever toutes les incertitudes vis à vis
-									de l’administration afin que vous puissiez vous concentrer sur
-									ce qui compte : votre activité.
-								</Body>
+							<Trans i18nKey="landing.choice.simulators.title">
+								Découvrir tous les simulateurs et assistants
 							</Trans>
-						</Grid>
+						</Button>
 					</Grid>
-					<Spacing lg />
-				</Container>
-			</main>
+				</Grid>
+				<Spacing xl />
+			</Container>
+			<Container
+				backgroundColor={(theme) =>
+					theme.darkMode
+						? theme.colors.extended.dark[700]
+						: theme.colors.bases.primary[100]
+				}
+			>
+				{' '}
+				<Spacing lg />
+				<Grid
+					container
+					css={`
+						align-items: flex-end;
+					`}
+				>
+					<HideOnMobile item xs={2} md={2}>
+						<img
+							src={illustration2Svg}
+							css={`
+								width: 100%;
+								padding-right: 2rem;
+								padding-bottom: 1rem;
+							`}
+							alt=""
+						/>
+					</HideOnMobile>
+					<Grid item md={10}>
+						<Trans i18nKey="landing.aboutUs">
+							<H2>Qui sommes-nous ?</H2>
 
-			<Footer />
+							<Body>
+								Nous sommes une petite{' '}
+								<Link
+									aria-label="équipe, accéder à notre page de présentation d'équipe, nouvelle fenêtre"
+									href="https://beta.gouv.fr/startups/mon-entreprise.html#equipe"
+								>
+									équipe
+								</Link>{' '}
+								autonome et pluridisciplinaire au sein de{' '}
+								<Link
+									href="https://www.urssaf.fr"
+									aria-label="l'URSSAF, accéder au site urssaf.fr, nouvelle fenêtre"
+								>
+									l’Urssaf
+								</Link>
+								. Nous avons à cœur d’être au près de vos besoins afin
+								d’améliorer en permanence ce site conformément à l'approche{' '}
+								<Link
+									href="https://beta.gouv.fr/manifeste"
+									aria-label="beta.gouv.fr, accéder au site beta.gouv.fr, nouvelle fenêtre"
+								>
+									beta.gouv.fr
+								</Link>
+								.
+							</Body>
+
+							<Body>
+								Nous avons développé ce site pour accompagner les créateurs
+								d’entreprise dans le développement de leur activité.
+							</Body>
+
+							<Body>
+								Notre objectif est de lever toutes les incertitudes vis à vis de
+								l’administration afin que vous puissiez vous concentrer sur ce
+								qui compte : votre activité.
+							</Body>
+						</Trans>
+					</Grid>
+				</Grid>
+				<Spacing lg />
+			</Container>
 		</>
 	)
 }
diff --git a/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx b/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx
index 75a4290a7..109dd822c 100644
--- a/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx
+++ b/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx
@@ -2,6 +2,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import { useMatch } from 'react-router-dom'
 
 import { Button } from '@/design-system/buttons'
+import { Grid } from '@/design-system/layout'
 import { useSitePaths } from '@/sitePaths'
 
 export const stepOrder = [
@@ -54,32 +55,33 @@ export default function Navigation({
 	const previousStep = stepOrder[stepOrder.indexOf(currentStep) - 1]
 
 	return (
-		<>
-			<Button
-				size="XS"
-				to={
-					absoluteSitePaths.assistants['choix-du-statut'][
-						previousStep || 'index'
-					]
-				}
-			>
-				<span aria-hidden>←</span> <Trans>Précédent</Trans>
-			</Button>
-
-			{nextStep && (
+		<Grid container spacing={2}>
+			<Grid item>
 				<Button
 					size="XS"
-					to={absoluteSitePaths.assistants['choix-du-statut'][nextStep]}
-					isDisabled={!currentStepIsComplete}
 					light
 					color={'secondary'}
-					aria-label={t("Suivant, passer à l'étape suivante")}
+					to={
+						absoluteSitePaths.assistants['choix-du-statut'][
+							previousStep || 'index'
+						]
+					}
 				>
-					<Trans>Suivant</Trans>
-
-					<span aria-hidden>→</span>
+					<span aria-hidden>←</span> <Trans>Précédent</Trans>
 				</Button>
+			</Grid>
+			{nextStep && (
+				<Grid item>
+					<Button
+						size="XS"
+						to={absoluteSitePaths.assistants['choix-du-statut'][nextStep]}
+						isDisabled={!currentStepIsComplete}
+						aria-label={t("Suivant, passer à l'étape suivante")}
+					>
+						<Trans>Suivant</Trans> <span aria-hidden>→</span>
+					</Button>
+				</Grid>
 			)}
-		</>
+		</Grid>
 	)
 }
diff --git a/site/source/pages/assistants/choix-du-statut/home.tsx b/site/source/pages/assistants/choix-du-statut/home.tsx
index 784771872..ba0002227 100644
--- a/site/source/pages/assistants/choix-du-statut/home.tsx
+++ b/site/source/pages/assistants/choix-du-statut/home.tsx
@@ -1,14 +1,13 @@
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import { TrackPage } from '@/components/ATInternetTracking'
 import PageHeader from '@/components/PageHeader'
-import { FromBottom } from '@/components/ui/animate'
 import Meta from '@/components/utils/Meta'
 import { Message } from '@/design-system'
 import { Button } from '@/design-system/buttons'
 import { ClockIcon } from '@/design-system/icons'
 import { Container, Grid, Spacing } from '@/design-system/layout'
+import { Strong } from '@/design-system/typography'
 import { H3 } from '@/design-system/typography/heading'
 import { Body, Intro, SmallBody } from '@/design-system/typography/paragraphs'
 import useSimulatorsData from '@/hooks/useSimulatorsData'
@@ -20,11 +19,11 @@ import créerSvg from './_illustrations/créer.svg'
 
 export default function AccueilChoixStatut() {
 	const { t } = useTranslation()
-	const { absoluteSitePaths, relativeSitePaths } = useSitePaths()
+	const { relativeSitePaths } = useSitePaths()
 	const simulateurData = useSimulatorsData()
 
 	return (
-		<FromBottom>
+		<>
 			<TrackPage name="accueil" />
 			<Meta
 				title={t('choix-statut.meta.title', 'Choisir votre statut')}
@@ -41,16 +40,16 @@ export default function AccueilChoixStatut() {
 				<Intro>
 					<Trans i18nKey="choix-statut.home.intro">
 						La première étape consiste à choisir un{' '}
-						<Bold>statut juridique adapté à votre activité</Bold>. Les démarches
-						administratives changent en fonction de ce dernier.
+						<Strong>statut juridique adapté à votre activité</Strong>. Les
+						démarches administratives changent en fonction de ce dernier.
 					</Trans>
 				</Intro>
 
-				<Message type="info" icon>
+				<Message type="info" icon mini border={false}>
 					<Body>
 						<Trans i18nKey="choix-statut.home.info">
-							Pour obtenir un résultat optimal, vous devez répondre à toutes les
-							questions.
+							Pour obtenir un résultat optimal, vous devez{' '}
+							<Strong>répondre à toutes les questions.</Strong>
 						</Trans>
 					</Body>
 				</Message>
@@ -86,44 +85,31 @@ export default function AccueilChoixStatut() {
 				</Grid>
 			</PageHeader>
 
-			<Spacing xl />
-
-			<StyledContainer>
-				{/* <Grid item xs={12}> */}
+			<Spacing xxl />
+			<div
+				css={`
+					flex: 1;
+				`}
+			></div>
+			<Container backgroundColor={(theme) => theme.colors.bases.primary[100]}>
 				<H3>
-					<Trans i18nKey="common.useful-resources">Ressources utiles</Trans>
+					<Trans i18nKey="common.useful-resources">Raccourcis utiles</Trans>
 				</H3>
-				{/* </Grid> */}
 
 				<Grid container spacing={3} role="list">
 					<SimulateurCard
+						small
 						role="listitem"
 						{...simulateurData['coût-création-entreprise']}
 					/>
 					<SimulateurCard
+						small
 						role="listitem"
 						{...simulateurData['comparaison-statuts']}
 					/>
 				</Grid>
-			</StyledContainer>
-		</FromBottom>
+				<Spacing xl />
+			</Container>
+		</>
 	)
 }
-
-const Bold = styled.span`
-	font-weight: bold;
-`
-
-const StyledContainer = styled(Container)`
-	background-color: ${({ theme }) =>
-		theme.darkMode
-			? theme.colors.bases.primary[800]
-			: theme.colors.bases.primary[200]};
-	padding-bottom: 2rem;
-
-	${H3} {
-		font-size: 26px;
-		line-height: 32px;
-		margin-bottom: 1.5rem;
-	}
-`