🎨 Retouche la présentation de la liste des simulateurs
Maxime Quandalle
parent
16f692d2a7
commit
40639b676d
|
|
@ -16,101 +16,114 @@ export default function Simulateurs() {
|
|||
<title>{titre}</title>
|
||||
</Helmet>
|
||||
|
||||
<section className="ui__ full-width light-bg center-flex">
|
||||
<section className="ui__ full-width light-bg">
|
||||
<h1 css="min-width: 100%; text-align: center">{titre}</h1>
|
||||
<Link
|
||||
className="ui__ interactive card box"
|
||||
to={{
|
||||
state: { fromSimulateurs: true },
|
||||
pathname: sitePaths.simulateurs['assimilé-salarié']
|
||||
}}
|
||||
<div
|
||||
className="ui__ center-flex"
|
||||
// Il y a actuellement 6 simulateurs affichés, c'est plus beau
|
||||
// d'afficher une grille de 3x2 sur les écrans larges.
|
||||
//
|
||||
// TODO: on pourrait généraliser cette logique sur toutes les grilles
|
||||
// avec des blocs centrés pour éviter d'avoir 1 seul élements sur la
|
||||
// dernière ligne.
|
||||
style={{ maxWidth: 1100, margin: 'auto' }}
|
||||
>
|
||||
<div className="ui__ big box-icon">{emoji('☂️')}</div>
|
||||
<T k="simulateurs.accueil.assimilé">
|
||||
<h3>Assimilé salarié</h3>
|
||||
<p className="ui__ notice" css="flex: 1">
|
||||
Calculer le revenu d'un dirigeant de SAS, SASU ou SARL minoritaire
|
||||
</p>
|
||||
</T>
|
||||
</Link>
|
||||
<Link
|
||||
className="ui__ interactive card box"
|
||||
to={{
|
||||
state: { fromSimulateurs: true },
|
||||
pathname: sitePaths.simulateurs.indépendant
|
||||
}}
|
||||
>
|
||||
<div className="ui__ big box-icon">{emoji('🃏')}</div>
|
||||
<T k="simulateurs.accueil.indépendant">
|
||||
<h3>Indépendant</h3>
|
||||
<p className="ui__ notice" css="flex: 1">
|
||||
Calculer le revenu d'un dirigeant de EURL, EI, ou SARL majoritaire
|
||||
</p>
|
||||
</T>
|
||||
</Link>
|
||||
<Link
|
||||
className="ui__ interactive card box"
|
||||
to={{
|
||||
state: { fromSimulateurs: true },
|
||||
pathname: sitePaths.simulateurs['auto-entrepreneur']
|
||||
}}
|
||||
>
|
||||
<div className="ui__ big box-icon">{emoji('🧢')}</div>
|
||||
<T k="simulateurs.accueil.auto">
|
||||
<h3>Auto-entrepreneur</h3>
|
||||
<p className="ui__ notice" css="flex: 1">
|
||||
Calculer le revenu (ou le chiffre d'affaires) d'un
|
||||
auto-entrepreneur
|
||||
</p>
|
||||
</T>
|
||||
</Link>
|
||||
<Link
|
||||
className="ui__ interactive card box"
|
||||
to={{
|
||||
state: { fromSimulateurs: true },
|
||||
pathname: sitePaths.simulateurs.salarié
|
||||
}}
|
||||
>
|
||||
<div className="ui__ big box-icon">{emoji('🤝')}</div>
|
||||
<T k="simulateurs.accueil.salarié">
|
||||
<h3>Salarié</h3>
|
||||
<p className="ui__ notice" css="flex: 1">
|
||||
Calculer le salaire net, brut, ou total d'un salarié, stagiaire,
|
||||
ou assimilé
|
||||
</p>
|
||||
</T>
|
||||
</Link>
|
||||
<Link
|
||||
className="ui__ interactive card box"
|
||||
to={{
|
||||
state: { fromSimulateurs: true },
|
||||
pathname: sitePaths.simulateurs['artiste-auteur']
|
||||
}}
|
||||
>
|
||||
<div className="ui__ big box-icon">{emoji('👩🎨')}</div>
|
||||
<T k="simulateurs.accueil.salarié">
|
||||
<h3>Artiste-auteur</h3>
|
||||
<p className="ui__ notice" css="flex: 1">
|
||||
Estimer les cotisations sociales d'un artiste ou auteur
|
||||
</p>
|
||||
</T>
|
||||
</Link>
|
||||
<Link
|
||||
className="ui__ interactive card box"
|
||||
to={{
|
||||
state: { fromSimulateurs: true },
|
||||
pathname: sitePaths.simulateurs.comparaison
|
||||
}}
|
||||
>
|
||||
<div className="ui__ big box-icon">{emoji('📊')}</div>
|
||||
<T k="simulateurs.accueil.comparaison">
|
||||
<h3>Comparaison statuts</h3>
|
||||
<p className="ui__ notice" css="flex: 1">
|
||||
Simulez les différences entre les régimes (cotisations, retraite,
|
||||
maternité, maladie, etc.)
|
||||
</p>
|
||||
</T>
|
||||
</Link>
|
||||
<Link
|
||||
className="ui__ interactive card box"
|
||||
to={{
|
||||
state: { fromSimulateurs: true },
|
||||
pathname: sitePaths.simulateurs['assimilé-salarié']
|
||||
}}
|
||||
>
|
||||
<div className="ui__ big box-icon">{emoji('☂️')}</div>
|
||||
<T k="simulateurs.accueil.assimilé">
|
||||
<h3>Assimilé salarié</h3>
|
||||
<p className="ui__ notice" css="flex: 1">
|
||||
Calculer le revenu d'un dirigeant de SAS, SASU ou SARL
|
||||
minoritaire
|
||||
</p>
|
||||
</T>
|
||||
</Link>
|
||||
<Link
|
||||
className="ui__ interactive card box"
|
||||
to={{
|
||||
state: { fromSimulateurs: true },
|
||||
pathname: sitePaths.simulateurs.indépendant
|
||||
}}
|
||||
>
|
||||
<div className="ui__ big box-icon">{emoji('🃏')}</div>
|
||||
<T k="simulateurs.accueil.indépendant">
|
||||
<h3>Indépendant</h3>
|
||||
<p className="ui__ notice" css="flex: 1">
|
||||
Calculer le revenu d'un dirigeant de EURL, EI, ou SARL
|
||||
majoritaire
|
||||
</p>
|
||||
</T>
|
||||
</Link>
|
||||
<Link
|
||||
className="ui__ interactive card box"
|
||||
to={{
|
||||
state: { fromSimulateurs: true },
|
||||
pathname: sitePaths.simulateurs['auto-entrepreneur']
|
||||
}}
|
||||
>
|
||||
<div className="ui__ big box-icon">{emoji('🧢')}</div>
|
||||
<T k="simulateurs.accueil.auto">
|
||||
<h3>Auto-entrepreneur</h3>
|
||||
<p className="ui__ notice" css="flex: 1">
|
||||
Calculer le revenu (ou le chiffre d'affaires) d'un
|
||||
auto-entrepreneur
|
||||
</p>
|
||||
</T>
|
||||
</Link>
|
||||
<Link
|
||||
className="ui__ interactive card box"
|
||||
to={{
|
||||
state: { fromSimulateurs: true },
|
||||
pathname: sitePaths.simulateurs.salarié
|
||||
}}
|
||||
>
|
||||
<div className="ui__ big box-icon">{emoji('🤝')}</div>
|
||||
<T k="simulateurs.accueil.salarié">
|
||||
<h3>Salarié</h3>
|
||||
<p className="ui__ notice" css="flex: 1">
|
||||
Calculer le salaire net, brut, ou total d'un salarié, stagiaire,
|
||||
ou assimilé
|
||||
</p>
|
||||
</T>
|
||||
</Link>
|
||||
<Link
|
||||
className="ui__ interactive card box"
|
||||
to={{
|
||||
state: { fromSimulateurs: true },
|
||||
pathname: sitePaths.simulateurs['artiste-auteur']
|
||||
}}
|
||||
>
|
||||
<div className="ui__ big box-icon">{emoji('👩🎨')}</div>
|
||||
<T k="simulateurs.accueil.salarié">
|
||||
<h3>Artiste-auteur</h3>
|
||||
<p className="ui__ notice" css="flex: 1">
|
||||
Estimer les cotisations sociales d'un artiste ou auteur
|
||||
</p>
|
||||
</T>
|
||||
</Link>
|
||||
<Link
|
||||
className="ui__ interactive card box"
|
||||
to={{
|
||||
state: { fromSimulateurs: true },
|
||||
pathname: sitePaths.simulateurs.comparaison
|
||||
}}
|
||||
>
|
||||
<div className="ui__ big box-icon">{emoji('📊')}</div>
|
||||
<T k="simulateurs.accueil.comparaison">
|
||||
<h3>Comparaison statuts</h3>
|
||||
<p className="ui__ notice" css="flex: 1">
|
||||
Simulez les différences entre les régimes (cotisations,
|
||||
retraite, maternité, maladie, etc.)
|
||||
</p>
|
||||
</T>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<T k="simulateurs.accueil.description">
|
||||
|
|
|
|||
Loading…
Reference in New Issue