From 0a34c7ed102c483b0fa8e833d42c06435aa35906 Mon Sep 17 00:00:00 2001
From: cupadev-admin <admin@cupadev.com>
Date: Sun, 8 Mar 2026 18:33:46 +0000
Subject: [PATCH] feat: add src/components/Services.tsx

---
 src/components/Services.tsx | 143 ++++++++++++++++++++++++++++++++++++
 1 file changed, 143 insertions(+)
 create mode 100644 src/components/Services.tsx

diff --git a/src/components/Services.tsx b/src/components/Services.tsx
new file mode 100644
index 0000000..b683ccb
--- /dev/null
+++ b/src/components/Services.tsx
@@ -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>
+  );
+}