espace-paie-odentas/app/(app)/minima-ccn/page.tsx

128 lines
5.2 KiB
TypeScript

"use client";
import React from 'react';
import { usePageTitle } from '@/hooks/usePageTitle';
import Link from 'next/link';
import { Scale, ExternalLink, Drama, Video } 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.
</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">
<Drama className="w-7 h-7 text-indigo-600" strokeWidth={1.6} />
</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">
Convention Collective Nationale des Entreprises Artistiques et Culturelles
</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">
<Drama className="w-7 h-7 text-blue-600" strokeWidth={1.6} />
</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">
Convention Collective Nationale du Spectacle Vivant Privé
</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 */}
<Link
href="/minima-ccn/ccnpa"
className="group relative rounded-2xl border border-slate-200 bg-white p-6 transition-all duration-200 hover:shadow-lg hover:border-cyan-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-cyan-100 to-blue-100 border border-cyan-200 flex items-center justify-center mb-4">
<Video className="w-7 h-7 text-cyan-600" strokeWidth={1.6} />
</div>
{/* Contenu */}
<h2 className="text-xl font-semibold text-slate-900 mb-2">
CCNPA (IDCC 2642)
</h2>
<p className="text-sm text-slate-600 mb-4">
Convention Collective Nationale de la Production Audiovisuelle
</p>
{/* CTA */}
<div className="inline-flex items-center gap-2 text-sm font-semibold text-cyan-600 group-hover:gap-3 transition-all">
Voir les minima
<ExternalLink className="w-4 h-4" />
</div>
</Link>
</section>
</div>
);
}