🎨 améliore l'affichage sur les pages de comparaison AS vs indep et indep vs auto
Johan Girod
parent
820a7ffffe
commit
49d470a58f
|
|
@ -6,6 +6,17 @@
|
|||
[row-legend] auto [assimilé-salarié] minmax(20%, 20rem)
|
||||
[indépendant] minmax(20%, 20rem) [auto-entrepreneur] minmax(20%, 20rem) [end];
|
||||
}
|
||||
.comparaison-grid.hideAutoEntrepreneur {
|
||||
grid-template-columns:
|
||||
[row-legend] auto [assimilé-salarié] minmax(20%, 20rem)
|
||||
[indépendant] minmax(20%, 20rem) [auto-entrepreneur] 0 [end];
|
||||
}
|
||||
|
||||
.comparaison-grid.hideAssimiléSalarié {
|
||||
grid-template-columns:
|
||||
[row-legend] auto [assimilé-salarié] 0
|
||||
[indépendant] minmax(20%, 20rem) [auto-entrepreneur] minmax(20%, 20rem) [end];
|
||||
}
|
||||
.comparaison-grid > * {
|
||||
border-bottom: 1px solid var(--lighterColour);
|
||||
padding: 0.6rem 1.2rem;
|
||||
|
|
@ -31,7 +42,7 @@
|
|||
width: 1.6rem !important;
|
||||
}
|
||||
.comparaison-grid > .legend {
|
||||
max-width: 20rem;
|
||||
max-width: 15rem;
|
||||
align-items: flex-end;
|
||||
grid-column: row-legend;
|
||||
text-align: right;
|
||||
|
|
@ -68,9 +79,6 @@
|
|||
border-right: none;
|
||||
}
|
||||
|
||||
.comparaison-grid.hideAutoEntrepreneur {
|
||||
grid-template-columns: [row-legend] auto [assimilé-salarié] 1fr [indépendant] 1fr [auto-entrepreneur] 0 [end];
|
||||
}
|
||||
.comparaison-grid.hideAutoEntrepreneur > .auto {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -78,9 +86,6 @@
|
|||
border-right: 1px solid var(--lighterColour);
|
||||
}
|
||||
|
||||
.comparaison-grid.hideAssimiléSalarié {
|
||||
grid-template-columns: [row-legend] auto [assimilé-salarié] 0 [indépendant] auto [auto-entrepreneur] auto [end];
|
||||
}
|
||||
.comparaison-grid.hideAssimiléSalarié > .AS {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -103,9 +108,6 @@
|
|||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.comparaison-grid {
|
||||
grid-template-columns: [row-legend] 10rem [assimilé-salarié] auto [indépendant] auto [auto-entrepreneur] auto [end];
|
||||
}
|
||||
.comparaison-grid > * {
|
||||
padding: 0.6rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,23 +72,18 @@ const SchemeComparaison = ({
|
|||
hideAssimiléSalarié
|
||||
})}>
|
||||
<h2 className="AS">
|
||||
{emoji('☂')}{' '}
|
||||
<span style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
|
||||
<T>Assimilé salarié</T>
|
||||
</span>
|
||||
{emoji('☂')} <T>Assimilé salarié</T>
|
||||
<small>
|
||||
<T k="comparaisonRégimes.AS.tagline">Le régime tout compris</T>
|
||||
</small>
|
||||
</h2>
|
||||
<h2 className="indep">
|
||||
{emoji('👩🔧')}{' '}
|
||||
<span style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
|
||||
{hideAssimiléSalarié ? (
|
||||
<T>Entreprise Individuelle</T>
|
||||
) : (
|
||||
<T>Indépendant</T>
|
||||
)}
|
||||
</span>
|
||||
{hideAssimiléSalarié ? (
|
||||
<T>Entreprise Individuelle</T>
|
||||
) : (
|
||||
<T>Indépendant</T>
|
||||
)}
|
||||
<small>
|
||||
<T k="comparaisonRégimes.indep.tagline">
|
||||
La protection sociale à la carte
|
||||
|
|
@ -96,62 +91,67 @@ const SchemeComparaison = ({
|
|||
</small>
|
||||
</h2>
|
||||
<h2 className="auto">
|
||||
{emoji('🚶♂️')}{' '}
|
||||
<span style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
|
||||
<T>Auto-entrepreneur</T>
|
||||
</span>
|
||||
{emoji('🚶♂️')} <T>Auto-entrepreneur</T>
|
||||
<small>
|
||||
<T k="comparaisonRégimes.auto.tagline">Pour créer sans risques</T>
|
||||
</small>
|
||||
</h2>
|
||||
|
||||
<h3 className="legend">
|
||||
<T k="comparaisonRégimes.status.legend">Statuts juridiques possibles</T>
|
||||
</h3>
|
||||
<div className="AS">
|
||||
<T k="comparaisonRégimes.status.AS">SAS, SASU, SARL minoritaire</T>
|
||||
</div>
|
||||
<div className="indep">
|
||||
<T k="comparaisonRégimes.status.indep">EI, EURL, SARL majoritaire</T>
|
||||
</div>
|
||||
<div className="auto">
|
||||
<T k="comparaisonRégimes.status.auto">Auto-entreprise</T>
|
||||
</div>
|
||||
|
||||
{!hideAssimiléSalarié && (
|
||||
<>
|
||||
<T k="comparaisonRégimes.sécuritéSociale">
|
||||
<h3 className="legend">Sécurité sociale</h3>
|
||||
<div className="AS">Régime général</div>
|
||||
<div className="indep-et-auto">
|
||||
Sécurité sociale des indépendants
|
||||
</div>
|
||||
<>
|
||||
<h3 className="legend">
|
||||
<T k="comparaisonRégimes.status.legend">
|
||||
Statuts juridiques possibles
|
||||
</T>
|
||||
<T k="comparaisonRégimes.AT">
|
||||
<h3 className="legend">Couverture accidents du travail</h3>
|
||||
</h3>
|
||||
<div className="AS">
|
||||
<T k="comparaisonRégimes.status.AS">
|
||||
SAS, SASU, SARL <small>(gérant minoritaire)</small>
|
||||
</T>
|
||||
<div className="AS">
|
||||
<T>
|
||||
<T>Oui</T>
|
||||
</div>
|
||||
<div className="indep">
|
||||
{hideAssimiléSalarié ? (
|
||||
<T k="comparaisonRégimes.status.indep.2">EI, EIRL</T>
|
||||
) : (
|
||||
<T k="comparaisonRégimes.status.indep.1">
|
||||
EI, EIRL, EURL, SARL <small>(gérant majoritaire)</small>
|
||||
</T>
|
||||
</div>
|
||||
<div className="indep-et-auto">
|
||||
<T>Non</T>
|
||||
</div>
|
||||
<T k="comparaisonRégimes.assuranceMaladie">
|
||||
<h3 className="legend">
|
||||
Assurance maladie{' '}
|
||||
<small>(médicaments, soins, hospitalisations)</small>
|
||||
</h3>
|
||||
)}
|
||||
</div>
|
||||
<div className="auto">
|
||||
<T k="comparaisonRégimes.status.auto">Auto-entreprise</T>
|
||||
</div>
|
||||
</>
|
||||
|
||||
<>
|
||||
<T k="comparaisonRégimes.sécuritéSociale">
|
||||
<h3 className="legend">Sécurité sociale</h3>
|
||||
<div className="AS">Régime général</div>
|
||||
<div className="indep-et-auto">Sécurité sociale des indépendants</div>
|
||||
</T>
|
||||
<T k="comparaisonRégimes.AT">
|
||||
<h3 className="legend">Couverture accidents du travail</h3>
|
||||
</T>
|
||||
<div className="AS">
|
||||
<T>
|
||||
<T>Oui</T>
|
||||
</T>
|
||||
<div className="AS-indep-et-auto">Identique pour tous</div>
|
||||
<T k="comparaisonRégimes.assuranceMaladie">
|
||||
<h3 className="legend">Mutuelle santé</h3>
|
||||
</T>
|
||||
<div className="AS">Obligatoire</div>
|
||||
<div className="indep-et-auto">Fortement conseillée</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="indep-et-auto">
|
||||
<T>Non</T>
|
||||
</div>
|
||||
<T k="comparaisonRégimes.assuranceMaladie">
|
||||
<h3 className="legend">
|
||||
Assurance maladie{' '}
|
||||
<small>(médicaments, soins, hospitalisations)</small>
|
||||
</h3>
|
||||
</T>
|
||||
<div className="AS-indep-et-auto">Identique pour tous</div>
|
||||
<T k="comparaisonRégimes.assuranceMaladie">
|
||||
<h3 className="legend">Mutuelle santé</h3>
|
||||
</T>
|
||||
<div className="AS">Obligatoire</div>
|
||||
<div className="indep-et-auto">Fortement conseillée</div>
|
||||
</>
|
||||
|
||||
<T k="comparaisonRégimes.indemnités">
|
||||
<h3 className="legend">Indemnités journalières</h3>
|
||||
|
|
|
|||
|
|
@ -39,22 +39,8 @@ const Autoentrepreneur = ({ isAutoentrepreneur, t }: Props) => (
|
|||
<p>
|
||||
Un auto-entrepreneur bénéficie d'un régime simplifié de déclaration et
|
||||
de paiement, pour lequel l'impôt et les cotisations sociales sont
|
||||
calculés sur le chiffre d'affaires encaissé chaque mois. Disponible pour
|
||||
les entreprises dont le chiffre d'affaires annuel ne dépasse pas 70 000
|
||||
€ pour les prestataires de services ou 170 000 € lorsque l'activité
|
||||
principale est la vente de biens, la restauration ou la fourniture de
|
||||
logements.
|
||||
calculés sur le chiffre d'affaires encaissé chaque mois.
|
||||
</p>
|
||||
<p>C'est un choix intéressant si :</p>
|
||||
<ul>
|
||||
<li>Vous n'avez de dépenses importantes pour mener votre activité</li>
|
||||
<li>
|
||||
Vous voulez tester la viabilité de votre modèle (activité ou projet)
|
||||
</li>
|
||||
<li>
|
||||
Vous souhaitez un minimum de formalités (ou démarches) pour commencer
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<strong>Note</strong> : Certaines activités sont exclues de ce statut (
|
||||
<a href="https://www.afecreation.fr/pid10375/pour-quelles-activites.html#principales-exclusions">
|
||||
|
|
@ -68,14 +54,10 @@ const Autoentrepreneur = ({ isAutoentrepreneur, t }: Props) => (
|
|||
</a>
|
||||
).
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Pour tous les autres cas, il est conseillé de choisir le statut de{' '}
|
||||
<strong>l'Entreprise Individuelle</strong> avec le régime fiscal du réel
|
||||
simplifié.
|
||||
</p>
|
||||
</T>
|
||||
<SchemeComparaison hideAssimiléSalarié />
|
||||
<div className="ui__ full-width">
|
||||
<SchemeComparaison hideAssimiléSalarié />
|
||||
</div>
|
||||
|
||||
<CompanyStatusNavigation onSkip={() => isAutoentrepreneur(null)} />
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,9 @@ const DefineDirectorStatus = ({ defineDirectorStatus, t }: Props) => (
|
|||
la couverture sociale du dirigeant. Le montant et les modalités de
|
||||
paiement des cotisations sociales sont également impactés.
|
||||
</p>
|
||||
<SchemeComparaison hideAutoEntrepreneur />
|
||||
<div className="ui__ full-width">
|
||||
<SchemeComparaison hideAutoEntrepreneur />
|
||||
</div>
|
||||
</T>
|
||||
|
||||
<CompanyStatusNavigation onSkip={() => defineDirectorStatus(null)} />
|
||||
|
|
|
|||
Loading…
Reference in New Issue