190 lines
7.4 KiB
TypeScript
190 lines
7.4 KiB
TypeScript
"use client";
|
|
|
|
import React from 'react';
|
|
import { usePageTitle } from '@/hooks/usePageTitle';
|
|
import Link from 'next/link';
|
|
import { Scale, ExternalLink } from 'lucide-react';
|
|
|
|
export default function MinimaCCNPage() {
|
|
usePageTitle("Minima CCN");
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* En-tête */}
|
|
<section className="rounded-2xl border bg-white p-6">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
|
|
<Scale className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h1 className="text-2xl font-semibold text-slate-900">Minima des CCN du spectacle</h1>
|
|
<p className="text-sm text-slate-600 mt-2">
|
|
Accédez aux minima actualisés par convention collective. Tableaux interactifs par métier.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Grille des cartes CCN */}
|
|
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{/* CCNEAC */}
|
|
<Link
|
|
href="/minima-ccn/ccneac"
|
|
className="group relative rounded-2xl border border-slate-200 bg-white p-6 transition-all duration-200 hover:shadow-lg hover:border-indigo-300 hover:-translate-y-1"
|
|
>
|
|
{/* Badge */}
|
|
<div className="absolute top-4 right-4">
|
|
<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-emerald-500 to-emerald-600 text-white shadow-sm">
|
|
À jour 2025
|
|
</span>
|
|
</div>
|
|
|
|
{/* Icône */}
|
|
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-indigo-100 to-purple-100 border border-indigo-200 flex items-center justify-center mb-4">
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
width="28"
|
|
height="28"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.6"
|
|
className="text-indigo-600"
|
|
>
|
|
<path d="M3 5c0 7 3 10 9 10s9-3 9-10V3H3v2Z"/>
|
|
<path d="M9 10h.01M15 10h.01M8 13c1.2.8 2.8 1.2 4 1.2s2.8-.4 4-1.2"/>
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Contenu */}
|
|
<h2 className="text-xl font-semibold text-slate-900 mb-2">
|
|
CCNEAC (IDCC 1285)
|
|
</h2>
|
|
<p className="text-sm text-slate-600 mb-4">
|
|
Spectacle vivant subventionné. Minima techniciens, artistes et personnels administratifs et commerciaux.
|
|
</p>
|
|
|
|
{/* CTA */}
|
|
<div className="inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 group-hover:gap-3 transition-all">
|
|
Voir les minima
|
|
<ExternalLink className="w-4 h-4" />
|
|
</div>
|
|
</Link>
|
|
|
|
{/* CCNSVP */}
|
|
<Link
|
|
href="/minima-ccn/ccnsvp"
|
|
className="group relative rounded-2xl border border-slate-200 bg-white p-6 transition-all duration-200 hover:shadow-lg hover:border-indigo-300 hover:-translate-y-1"
|
|
>
|
|
{/* Badge */}
|
|
<div className="absolute top-4 right-4">
|
|
<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-emerald-500 to-emerald-600 text-white shadow-sm">
|
|
À jour 2025
|
|
</span>
|
|
</div>
|
|
|
|
{/* Icône */}
|
|
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-100 to-cyan-100 border border-blue-200 flex items-center justify-center mb-4">
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
width="28"
|
|
height="28"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.6"
|
|
className="text-blue-600"
|
|
>
|
|
<rect x="3" y="7" width="18" height="10" rx="2"/>
|
|
<path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 12h18"/>
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Contenu */}
|
|
<h2 className="text-xl font-semibold text-slate-900 mb-2">
|
|
CCNSVP (IDCC 3090)
|
|
</h2>
|
|
<p className="text-sm text-slate-600 mb-4">
|
|
Spectacle vivant privé. Minima techniciens, artistes et personnels administratifs et commerciaux.
|
|
</p>
|
|
|
|
{/* CTA */}
|
|
<div className="inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 group-hover:gap-3 transition-all">
|
|
Voir les minima
|
|
<ExternalLink className="w-4 h-4" />
|
|
</div>
|
|
</Link>
|
|
|
|
{/* CCNPA - Bientôt disponible */}
|
|
<div className="relative rounded-2xl border border-slate-200 bg-slate-50 p-6 opacity-60 cursor-not-allowed">
|
|
{/* Badge */}
|
|
<div className="absolute top-4 right-4">
|
|
<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-slate-400 to-slate-500 text-white shadow-sm">
|
|
Bientôt disponible
|
|
</span>
|
|
</div>
|
|
|
|
{/* Icône */}
|
|
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-slate-200 to-slate-300 border border-slate-300 flex items-center justify-center mb-4">
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
width="28"
|
|
height="28"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.6"
|
|
className="text-slate-500"
|
|
>
|
|
<path d="M3 7h18v4H3z"/>
|
|
<path d="M3 11v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6"/>
|
|
<path d="m3 7 4-4 5 4 4-4 5 4"/>
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Contenu */}
|
|
<h2 className="text-xl font-semibold text-slate-700 mb-2">
|
|
CCNPA (IDCC 2642)
|
|
</h2>
|
|
<p className="text-sm text-slate-500 mb-4">
|
|
Production audiovisuelle (mise en ligne prochainement).
|
|
</p>
|
|
|
|
{/* CTA */}
|
|
<div className="inline-flex items-center gap-2 text-sm font-medium text-slate-400">
|
|
En préparation…
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Note informative */}
|
|
<section className="rounded-xl border border-blue-200 bg-blue-50 p-4">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-shrink-0">
|
|
<div className="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
|
|
<svg
|
|
className="w-5 h-5 text-blue-600"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="text-sm font-semibold text-blue-900 mb-1">
|
|
Minima conventionnels
|
|
</h3>
|
|
<p className="text-sm text-blue-800">
|
|
Les minima affichés sont issus des conventions collectives nationales et sont mis à jour régulièrement.
|
|
Ils constituent une base de référence pour l'établissement des contrats de travail.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|