Met à jour la landing pour faire ressortir les outils mis en avant et le CTA pour voir les simulateurs
Johan Girod
parent
52ade93997
commit
81121f8a55
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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<{
|
||||
|
|
|
|||
|
|
@ -134,6 +134,9 @@ figure {
|
|||
html {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.hide-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Cache le slider opacité du ColorPicker
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue