feat: add src/components/Services.tsx
This commit is contained in:
parent
a81ee8e4d0
commit
0a34c7ed10
|
|
@ -0,0 +1,143 @@
|
|||
"use client";
|
||||
|
||||
import {
|
||||
Briefcase,
|
||||
GraduationCap,
|
||||
Users,
|
||||
HeartHandshake,
|
||||
FileText,
|
||||
TrendingUp,
|
||||
} from "lucide-react";
|
||||
|
||||
const services = [
|
||||
{
|
||||
icon: Briefcase,
|
||||
title: "Placement Professionnel",
|
||||
description:
|
||||
"Accédez à notre réseau exclusif de 450+ entreprises partenaires qui valorisent les compétences militaires : leadership, rigueur, gestion du stress.",
|
||||
tags: ["CDI / CDD", "Mission", "Cadre / Non-cadre"],
|
||||
color: "text-french-blue",
|
||||
bg: "bg-blue-50",
|
||||
border: "border-blue-100",
|
||||
},
|
||||
{
|
||||
icon: GraduationCap,
|
||||
title: "Formations Certifiantes",
|
||||
description:
|
||||
"Obtenez des certifications reconnues dans les secteurs de la sécurité, de la logistique, du management, de l'informatique et bien plus.",
|
||||
tags: ["Financement OPCO", "À distance / Présentiel", "Diplômes reconnus"],
|
||||
color: "text-military-green",
|
||||
bg: "bg-green-50",
|
||||
border: "border-green-100",
|
||||
},
|
||||
{
|
||||
icon: FileText,
|
||||
title: "CV & Bilan de compétences",
|
||||
description:
|
||||
"Nos experts 'traduisent' votre parcours militaire en langage civil. CV percutant, lettre de motivation et bilan de compétences personnalisé.",
|
||||
tags: ["Bilan personnalisé", "CV optimisé", "Lettre de motivation"],
|
||||
color: "text-gold",
|
||||
bg: "bg-yellow-50",
|
||||
border: "border-yellow-100",
|
||||
},
|
||||
{
|
||||
icon: HeartHandshake,
|
||||
title: "Accompagnement Psychologique",
|
||||
description:
|
||||
"Transition difficile ? Nos psychologues spécialisés vous accompagnent pour préserver votre santé mentale et traverser cette période de changement.",
|
||||
tags: ["Confidentiel", "Psychologues militaires", "Suivi régulier"],
|
||||
color: "text-french-red",
|
||||
bg: "bg-red-50",
|
||||
border: "border-red-100",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Réseau Anciens Militaires",
|
||||
description:
|
||||
"Rejoignez une communauté de 12 000 anciens militaires. Entraide, mentoring, événements networking et offres d'emploi en avant-première.",
|
||||
tags: ["Mentorat", "Événements", "Forum privé"],
|
||||
color: "text-purple-600",
|
||||
bg: "bg-purple-50",
|
||||
border: "border-purple-100",
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: "Création d'Entreprise",
|
||||
description:
|
||||
"Vous souhaitez entreprendre ? Nous vous guidons : business plan, financement (ACRE, prêt militaire), accompagnement juridique et comptable.",
|
||||
tags: ["Business plan", "Financement ACRE", "Coaching entrepreneur"],
|
||||
color: "text-orange-600",
|
||||
bg: "bg-orange-50",
|
||||
border: "border-orange-100",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Services() {
|
||||
return (
|
||||
<section id="services" className="py-24 bg-cream">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-16">
|
||||
<p className="text-french-red text-sm font-semibold tracking-widest uppercase mb-3">
|
||||
Ce que nous faisons
|
||||
</p>
|
||||
<h2 className="section-title">
|
||||
Des services conçus{" "}
|
||||
<span className="text-military-green">pour vous</span>
|
||||
</h2>
|
||||
<p className="section-subtitle">
|
||||
Chaque militaire a un parcours unique. Nos services s'adaptent à
|
||||
votre grade, votre spécialité et vos ambitions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{services.map((service) => (
|
||||
<div
|
||||
key={service.title}
|
||||
className={`card p-8 group cursor-default ${service.border} hover:border-military-green/30`}
|
||||
>
|
||||
{/* Icon */}
|
||||
<div
|
||||
className={`inline-flex items-center justify-center w-14 h-14 rounded-lg ${service.bg} mb-6`}
|
||||
>
|
||||
<service.icon className={`w-7 h-7 ${service.color}`} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<h3 className="font-serif text-xl font-bold text-military-dark mb-3 group-hover:text-military-green transition-colors">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed mb-5">
|
||||
{service.description}
|
||||
</p>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{service.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="text-xs font-medium px-3 py-1 bg-gray-100 text-gray-600 rounded-full"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<div className="text-center mt-14">
|
||||
<p className="text-gray-600 mb-4">
|
||||
Vous ne savez pas par où commencer ?
|
||||
</p>
|
||||
<a href="#contact" className="btn-primary inline-block">
|
||||
Obtenir un entretien gratuit
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue