import React from « react »;
import { ShieldCheck, HeartPulse, GraduationCap, CalendarDays, Users, FileText, Mail, MapPin, ChevronRight } from « lucide-react »;
import { motion } from « framer-motion »;
export default function FFSFPSite() {
const stats = [
{ value: « +20 ans », label: « d’engagement au service du secourisme » },
{ value: « National », label: « réseau de formateurs et partenaires » },
{ value: « Terrain », label: « expérience opérationnelle réelle » },
];
const formations = [
{
title: « PSC »,
subtitle: « Premiers Secours Citoyen »,
text: « Une formation accessible à tous pour apprendre les gestes essentiels qui permettent de protéger, alerter et secourir. »,
action: « S’inscrire »,
icon: HeartPulse,
},
{
title: « PSE1 / PSE2 »,
subtitle: « Secourisme opérationnel »,
text: « Des formations destinées aux personnes souhaitant intervenir en équipe et participer à des dispositifs de secours. »,
action: « Découvrir »,
icon: ShieldCheck,
},
{
title: « Formateurs »,
subtitle: « Transmettre et encadrer »,
text: « Des parcours pour former les futurs encadrants, dans le respect des référentiels et des exigences pédagogiques nationales. »,
action: « En savoir plus »,
icon: GraduationCap,
},
];
const engagements = [
« Une fédération fondée sur l’expérience du terrain »,
« Des formateurs engagés, rigoureux et expérimentés »,
« Une pédagogie claire, progressive et adaptée aux publics »,
« Un réseau national au service de la formation aux secours »,
];
return (
FFSFP
Secouristes & Formateurs Policiers
<nav className="hidden lg:flex items-center gap-7 text-sm font-medium text-slate-700">
<a href="#federation" className="hover:text-blue-950">La Fédération</a>
<a href="#formations" className="hover:text-blue-950">Formations</a>
<a href="#inscriptions" className="hover:text-blue-950">Calendrier</a>
<a href="#partenaires" className="hover:text-blue-950">Partenaires</a>
<a href="#contact" className="hover:text-blue-950">Contact</a>
</nav>
<a href="#contact" className="hidden sm:inline-flex rounded-full bg-blue-950 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-900">
Demander un devis
</a>
</div>
</header>
<main>
<section className="relative overflow-hidden bg-gradient-to-br from-blue-950 via-slate-900 to-blue-900 text-white">
<div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_top_right,_white,_transparent_35%)]" />
<div className="absolute inset-0 bg-[linear-gradient(to_bottom,transparent,rgba(2,6,23,0.45))]" />
<div className="max-w-7xl mx-auto px-6 py-24 lg:py-32 grid lg:grid-cols-2 gap-12 items-center relative">
<motion.div initial={{ opacity: 0, y: 18 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
<p className="inline-flex rounded-full bg-white/10 px-4 py-2 text-sm font-medium ring-1 ring-white/20">
Fédération Française des Secouristes et Formateurs Policiers
</p>
<h1 className="mt-7 text-4xl md:text-6xl font-bold tracking-tight leading-tight">
Former pour agir. Intervenir pour sauver.
</h1>
<p className="mt-6 text-lg text-blue-100 max-w-xl leading-8">
La FFSFP forme citoyens, agents publics, professionnels et acteurs de terrain aux gestes de secours, avec exigence, engagement et sens du service.
</p>
<div className="mt-9 flex flex-col sm:flex-row gap-4">
<a href="#inscriptions" className="rounded-full bg-white px-6 py-3 font-semibold text-blue-950 hover:bg-blue-50 inline-flex items-center justify-center gap-2">
S’inscrire à une formation <ChevronRight className="h-4 w-4" />
</a>
<a href="#contact" className="rounded-full border border-white/40 px-6 py-3 font-semibold text-white hover:bg-white/10 inline-flex items-center justify-center">
Contacter la Fédération
</a>
</div>
</motion.div>
<motion.div initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.6, delay: 0.1 }} className="bg-white/10 rounded-[2rem] p-6 ring-1 ring-white/20 shadow-2xl backdrop-blur-md">
<div className="rounded-[1.5rem] bg-white text-slate-900 p-7">
<h2 className="text-2xl font-bold">Votre projet de formation</h2>
<p className="mt-3 text-slate-600 leading-7">
Particuliers, collectivités, administrations, entreprises ou associations : la FFSFP vous accompagne dans l’organisation de vos formations aux premiers secours.
</p>
<div className="mt-7 grid gap-4">
<div className="flex items-start gap-4 rounded-2xl bg-slate-50 p-4">
<CalendarDays className="h-6 w-6 text-blue-950 mt-1" />
<div>
<p className="font-semibold">Sessions programmées</p>
<p className="text-sm text-slate-600">Consultez le calendrier des prochaines formations.</p>
</div>
</div>
<div className="flex items-start gap-4 rounded-2xl bg-slate-50 p-4">
<Users className="h-6 w-6 text-blue-950 mt-1" />
<div>
<p className="font-semibold">Groupes & collectivités</p>
<p className="text-sm text-slate-600">Demandez une proposition adaptée à vos besoins.</p>
</div>
</div>
</div>
</div>
</motion.div>
</div>
<div className="max-w-7xl mx-auto px-6 pb-16 relative z-10">
<div className="grid md:grid-cols-3 gap-5">
{stats.map((stat) => (
<div key={stat.value} className="rounded-[2rem] border border-white/10 bg-white/5 backdrop-blur-sm p-6">
<p className="text-3xl font-bold">{stat.value}</p>
<p className="mt-2 text-blue-100 leading-7">{stat.label}</p>
</div>
))}
</div>
</div>
</section>
<section id="federation" className="py-20 bg-white">
<div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-3 gap-10 items-start">
<div className="lg:col-span-1">
<p className="text-sm font-bold uppercase tracking-widest text-blue-950">La Fédération</p>
<h2 className="mt-3 text-3xl md:text-4xl font-bold">Une identité forte, un engagement durable.</h2>
</div>
<div className="lg:col-span-2 text-lg text-slate-700 leading-8">
<p>
La Fédération Française des Secouristes et Formateurs Policiers s’inscrit dans une tradition d’engagement, de discipline et de transmission. Elle rassemble des femmes et des hommes attachés à la formation, à la prévention et au secours.
</p>
<p className="mt-5">
Son action repose sur une conviction simple : chacun doit pouvoir acquérir les bons réflexes pour protéger, alerter et porter secours efficacement.
</p>
</div>
</div>
</section>
<section id="formations" className="py-24 bg-slate-50">
<div className="max-w-7xl mx-auto px-6">
<div className="max-w-3xl">
<p className="text-sm font-bold uppercase tracking-widest text-blue-950">Nos formations</p>
<h2 className="mt-3 text-3xl md:text-4xl font-bold">Des formations pour tous les niveaux d’engagement.</h2>
<p className="mt-5 text-lg text-slate-600 leading-8">
De l’initiation citoyenne au secourisme opérationnel, la FFSFP propose des parcours adaptés aux besoins des particuliers, institutions et professionnels.
</p>
</div>
<div className="mt-14 grid md:grid-cols-3 gap-8">
{formations.map((formation) => {
const Icon = formation.icon;
return (
<div key={formation.title} className="rounded-[2rem] bg-white p-8 shadow-sm border border-slate-100 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div className="h-12 w-12 rounded-2xl bg-blue-950 text-white flex items-center justify-center">
<Icon className="h-6 w-6" />
</div>
<h3 className="mt-6 text-2xl font-bold">{formation.title}</h3>
<p className="mt-1 font-semibold text-slate-500">{formation.subtitle}</p>
<p className="mt-4 text-slate-600 leading-7">{formation.text}</p>
<a href="#contact" className="mt-6 inline-flex items-center gap-2 font-semibold text-blue-950">
{formation.action} <ChevronRight className="h-4 w-4" />
</a>
</div>
);
})}
</div>
</div>
</section>
<section className="py-20 bg-white">
<div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center">
<div>
<p className="text-sm font-bold uppercase tracking-widest text-blue-950">Nos engagements</p>
<h2 className="mt-3 text-3xl md:text-4xl font-bold">Une pédagogie sérieuse, humaine et opérationnelle.</h2>
<p className="mt-5 text-lg text-slate-600 leading-8">
La FFSFP défend une approche exigeante de la formation : clarté des gestes, respect des référentiels, adaptation aux publics et transmission de l’expérience.
</p>
</div>
<div className="grid gap-4">
{engagements.map((item) => (
<div key={item} className="rounded-2xl bg-slate-50 p-5 flex gap-4 items-start border border-slate-100">
<ShieldCheck className="h-6 w-6 text-blue-950 shrink-0 mt-0.5" />
<p className="font-semibold text-slate-800">{item}</p>
</div>
))}
</div>
</div>
</section>
<section id="inscriptions" className="py-20 bg-blue-950 text-white">
<div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center">
<div>
<p className="text-sm font-bold uppercase tracking-widest text-blue-100">Calendrier & inscriptions</p>
<h2 className="mt-3 text-3xl md:text-4xl font-bold">Inscrivez-vous à une prochaine session.</h2>
<p className="mt-5 text-lg text-blue-100 leading-8">
Le futur site pourra afficher les dates disponibles, le lieu, le nombre de places restantes et permettre une demande d’inscription simple.
</p>
</div>
<div className="rounded-[2rem] bg-white text-slate-900 p-7 shadow-xl">
<div className="space-y-4">
<div className="flex items-center justify-between rounded-2xl bg-slate-50 p-4">
<div>
<p className="font-bold">PSC — Paris</p>
<p className="text-sm text-slate-500">Prochaine session à définir</p>
</div>
<a href="#contact" className="rounded-full bg-blue-950 px-4 py-2 text-sm font-semibold text-white">Demander</a>
</div>
<div className="flex items-center justify-between rounded-2xl bg-slate-50 p-4">
<div>
<p className="font-bold">Formation de groupe</p>
<p className="text-sm text-slate-500">Collectivités, entreprises, administrations</p>
</div>
<a href="#contact" className="rounded-full bg-blue-950 px-4 py-2 text-sm font-semibold text-white">Devis</a>
</div>
</div>
</div>
</div>
</section>
<section id="partenaires" className="py-20 bg-slate-50">
<div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-3 gap-8">
<div className="rounded-[2rem] bg-white p-8 shadow-sm border border-slate-100">
<FileText className="h-8 w-8 text-blue-950" />
<h3 className="mt-5 text-xl font-bold">Collectivités</h3>
<p className="mt-3 text-slate-600 leading-7">Organisation de formations adaptées aux agents, établissements et besoins territoriaux.</p>
</div>
<div className="rounded-[2rem] bg-white p-8 shadow-sm border border-slate-100">
<Users className="h-8 w-8 text-blue-950" />
<h3 className="mt-5 text-xl font-bold">Entreprises</h3>
<p className="mt-3 text-slate-600 leading-7">Sensibilisation, prévention et montée en compétence des équipes.</p>
</div>
<div className="rounded-[2rem] bg-white p-8 shadow-sm border border-slate-100">
<ShieldCheck className="h-8 w-8 text-blue-950" />
<h3 className="mt-5 text-xl font-bold">Institutions</h3>
<p className="mt-3 text-slate-600 leading-7">Une réponse sérieuse pour les structures publiques et partenaires institutionnels.</p>
</div>
</div>
</section>
<section id="contact" className="py-20 bg-white">
<div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12">
<div>
<p className="text-sm font-bold uppercase tracking-widest text-blue-950">Contact</p>
<h2 className="mt-3 text-3xl md:text-4xl font-bold">Un projet de formation ?</h2>
<p className="mt-5 text-lg text-slate-600 leading-8">
Contactez la Fédération pour une inscription, une demande de devis ou un projet de formation sur mesure.
</p>
<div className="mt-8 space-y-4 text-slate-700">
<p className="flex gap-3 items-center"><Mail className="h-5 w-5 text-blue-950" /> contact@ffsfp.org</p>
<p className="flex gap-3 items-center"><MapPin className="h-5 w-5 text-blue-950" /> 8 avenue de la Porte de Montrouge, 75014 Paris</p>
</div>
</div>
<form className="rounded-[2rem] bg-slate-50 p-7 border border-slate-100 shadow-sm">
<div className="grid gap-4">
<input className="rounded-2xl border border-slate-200 px-4 py-3 bg-white" placeholder="Nom / structure" />
<input className="rounded-2xl border border-slate-200 px-4 py-3 bg-white" placeholder="Adresse e-mail" />
<input className="rounded-2xl border border-slate-200 px-4 py-3 bg-white" placeholder="Objet de la demande" />
<textarea className="rounded-2xl border border-slate-200 px-4 py-3 bg-white min-h-32" placeholder="Votre message" />
<button type="button" className="rounded-full bg-blue-950 px-6 py-3 font-semibold text-white hover:bg-blue-900">
Envoyer la demande
</button>
</div>
</form>
</div>
</section>
</main>
<section className="py-24 bg-white">
<div className="max-w-7xl mx-auto px-6">
<div className="rounded-[2.5rem] overflow-hidden bg-gradient-to-r from-blue-950 to-slate-900 text-white p-10 md:p-14 shadow-2xl">
<div className="max-w-3xl">
<p className="uppercase tracking-[0.3em] text-blue-200 text-sm font-semibold">FFSFP</p>
<h2 className="mt-4 text-4xl md:text-5xl font-bold leading-tight">
Former aujourd’hui pour protéger demain.
</h2>
<p className="mt-6 text-lg text-blue-100 leading-8">
La Fédération Française des Secouristes et Formateurs Policiers accompagne les citoyens, collectivités et institutions dans la transmission des gestes qui sauvent et la culture de l’engagement.
</p>
<div className="mt-8 flex flex-col sm:flex-row gap-4">
<a href="#inscriptions" className="rounded-full bg-white px-6 py-3 font-semibold text-blue-950 inline-flex items-center justify-center gap-2 hover:bg-blue-50">
Voir les formations <ChevronRight className="h-4 w-4" />
</a>
<a href="#contact" className="rounded-full border border-white/30 px-6 py-3 font-semibold text-white hover:bg-white/10 inline-flex items-center justify-center">
Prendre contact
</a>
</div>
</div>
</div>
</div>
</section>
<footer className="bg-slate-950 text-white py-10">
<div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
<div>
<p className="font-bold">FFSFP</p>
<p className="text-sm text-slate-400 mt-1">Fédération Française des Secouristes et Formateurs Policiers</p>
</div>
<p className="text-sm text-slate-400">© FFSFP — Tous droits réservés.</p>
</div>
</footer>
</div>);
}