Fix style des liens
Johan Girod
parent
02b1db3a06
commit
81fa930a6e
|
|
@ -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 />}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -68,11 +68,7 @@ export default function Footer() {
|
|||
/>
|
||||
)}
|
||||
</Helmet>
|
||||
<div
|
||||
css={`
|
||||
flex: 1;
|
||||
`}
|
||||
/>
|
||||
|
||||
<footer role="contentinfo" id="footer">
|
||||
<Container
|
||||
backgroundColor={(theme) =>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
Loading…
Reference in New Issue