150 lines
7.2 KiB
TypeScript
150 lines
7.2 KiB
TypeScript
"use client";
|
|
|
|
import React from 'react';
|
|
import { usePageTitle } from '@/hooks/usePageTitle';
|
|
import { Calculator, Info, AlertTriangle, Scale } from 'lucide-react';
|
|
|
|
export default function SimulateurPage() {
|
|
usePageTitle("Simulateur de paie");
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
<style jsx global>{`
|
|
.simulateur-iframe {
|
|
width: 100%;
|
|
min-height: 1100px;
|
|
border: none;
|
|
border-radius: 12px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,.06);
|
|
background: white;
|
|
}
|
|
`}</style>
|
|
|
|
{/* En-tête compact */}
|
|
<div className="mb-6">
|
|
<div className="flex items-center gap-3 mb-1">
|
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-md">
|
|
<Calculator className="w-5 h-5 text-white" />
|
|
</div>
|
|
<h1 className="text-2xl font-bold text-slate-900">Simulateur de paie intermittent</h1>
|
|
</div>
|
|
<p className="text-sm text-slate-600 ml-13">
|
|
Calculez le coût de recrutement d'un intermittent du spectacle (CDDU)
|
|
</p>
|
|
</div>
|
|
|
|
{/* Layout 2 colonnes : simulateur à gauche, cards info à droite */}
|
|
<div className="grid grid-cols-1 xl:grid-cols-[1fr_340px] gap-5">
|
|
|
|
{/* Colonne principale : Simulateur en iframe */}
|
|
<div className="order-2 xl:order-1">
|
|
<iframe
|
|
src="/simulateur-embed.html"
|
|
className="simulateur-iframe"
|
|
title="Simulateur de paie intermittent"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
|
|
{/* Colonne droite : Cards d'information compactes */}
|
|
<aside className="order-1 xl:order-2 space-y-4 xl:sticky xl:top-20 xl:self-start" aria-label="Aide et explications">
|
|
|
|
{/* Card : Mode d'emploi */}
|
|
<div className="bg-white rounded-xl shadow-sm border border-slate-200/80 p-5 hover:shadow-md transition-shadow">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<div className="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<Info className="w-4 h-4 text-indigo-600" />
|
|
</div>
|
|
<h3 className="text-base font-semibold text-slate-900">Mode d'emploi</h3>
|
|
</div>
|
|
|
|
<ul className="space-y-2.5 text-sm text-slate-700">
|
|
<li className="flex items-start gap-2.5">
|
|
<span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">1</span>
|
|
<span className="leading-snug">Choisissez la Convention Collective et le statut</span>
|
|
</li>
|
|
<li className="flex items-start gap-2.5">
|
|
<span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">2</span>
|
|
<span className="leading-snug">Indiquez les cachets/heures et dates travaillées</span>
|
|
</li>
|
|
<li className="flex items-start gap-2.5">
|
|
<span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">3</span>
|
|
<span className="leading-snug">Saisissez le montant (Brut, Net ou Coût employeur)</span>
|
|
</li>
|
|
<li className="flex items-start gap-2.5">
|
|
<span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">4</span>
|
|
<span className="leading-snug">Consultez les résultats avec le détail des cotisations</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<div className="mt-4 pt-4 border-t border-slate-100">
|
|
<p className="text-xs text-slate-500">
|
|
<span className="font-medium text-slate-700">Taux à jour 2025</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card : Disclaimer compact */}
|
|
<div className="bg-gradient-to-br from-amber-50 to-orange-50 border border-amber-200/80 rounded-xl shadow-sm p-5">
|
|
<div className="flex items-start gap-2.5 mb-5">
|
|
<div className="flex-shrink-0 mt-0.5">
|
|
<AlertTriangle className="w-4 h-4 text-amber-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-sm font-semibold text-amber-900 mb-3">Limitations</h3>
|
|
<p className="text-xs text-amber-800 leading-relaxed mb-2">
|
|
Le simulateur ne prévoit pas certains cas particuliers
|
|
</p>
|
|
<ul className="text-xs text-amber-800 leading-relaxed space-y-1 ml-3">
|
|
<li className="flex items-start gap-1.5">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Mineurs de moins de 16 ans</span>
|
|
</li>
|
|
<li className="flex items-start gap-1.5">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Cumul annuel</span>
|
|
</li>
|
|
<li className="flex items-start gap-1.5">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Taxe sur les salaires</span>
|
|
</li>
|
|
<li className="flex items-start gap-1.5">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Taxe d'apprentissage</span>
|
|
</li>
|
|
<li className="flex items-start gap-1.5">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Non-résidents fiscaux</span>
|
|
</li>
|
|
<li className="flex items-start gap-1.5">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Contrats multi-mois</span>
|
|
</li>
|
|
<li className="flex items-start gap-1.5">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Plus de 2 cachets par jour</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-2.5">
|
|
<div className="flex-shrink-0 mt-0.5">
|
|
<Scale className="w-4 h-4 text-amber-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-sm font-semibold text-amber-900 mb-2">Mentions légales</h3>
|
|
<p className="text-xs text-amber-800 leading-relaxed">
|
|
<em>Sauf erreurs ou omissions.</em> Les résultats fournis par le simulateur peuvent être imprécis ou erronés.
|
|
Les informations communiquées par le simulateur n'engagent pas la responsabilité de Odentas Media SAS quant
|
|
à leur utilisation et/ou leur interprétation. Elles ne sont considérées par l'utilisateur que sous sa seule responsabilité.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|