gaea21-v2-web/assets/components/ProfileCards.jsx

// 1. IMPORTATIONS DES MODULES ET DES ASSETS
import React from 'react';

// Webpack Encore gère l'empreinte de hachage (hashing) et le chemin public des images
import individusImg from '../img/individus.png';
import entrepriseImg from '../img/entreprise.png';
import institutionsImg from '../img/institutions.png';
import coachImg from '../img/coach.png';

/**
 * 2. STRUCTURE DE DONNÉES STATIQUE : LISTE DES PROFILS CIBLES
 * Externaliser les données hors du composant évite de recréer 
 * ce tableau en mémoire à chaque nouveau rendu (re-render) de React.
 */
const PROFILES = [
    {
        id: 1,
        title: 'Individus',
        image: individusImg,
        href: '#individus', // Ancre ou future route vers le parcours Individus
    },
    {
        id: 2,
        title: 'Entreprises',
        image: entrepriseImg,
        href: '#entreprises',
    },
    {
        id: 3,
        title: 'Institutions',
        image: institutionsImg,
        href: '#institutions',
    },
    {
        id: 4,
        // Le caractère d'échappement '\n' force un saut de ligne contrôlé dans le titre
        title: 'Université /\nCentre de recherche',
        // Fallback d'image en attendant l'asset spécifique de l'université
        image: institutionsImg,
        href: '#universite',
    },
    {
        id: 5,
        title: 'Coach ou\nPraticien',
        image: coachImg,
        href: '#coach',
    },
];

/**
 * 3. COMPOSANT PRINCIPAL : ProfileCards
 * Affiche la section de choix de profil utilisateur (« Qui êtes-vous ? »)
 * sous forme d'une grille interactive de cartes verticales avec effet glass/hover.
 */
export default function ProfileCards() {
    return (
        /* 
          Balise sémantique <section> :
          - py-20 : grand espacement vertical (padding-top & padding-bottom)
          - px-6 sm:px-12 : padding horizontal adaptatif selon la taille d'écran
          - bg-white : fond blanc assurant la continuité visuelle
        */
        <section className="py-20 px-6 sm:px-12 bg-white">
            {/* 
        Conteneur centré borné à 1380px max (conforme au Figma)
        mx-auto permet de centrer horizontalement le conteneur dans la page 
      */}
            <div className="max-w-[1380px] mx-auto text-center">

                {/* =========================================================
            A. EN-TÊTE DE SECTION (Surtitre + Titre principal)
            ========================================================= */}
                {/* Surtitre en majuscules avec espacement étendu entre les lettres (tracking) */}
                <span className="text-[0.72rem] tracking-[0.22em] font-bold text-slate-400 uppercase block mb-3">
                    QUI ÊTES-VOUS ?
                </span>

                {/* Titre principal centré avec largeur maximale contrôlée (max-w-xl) */}
                <h2 className="text-xl sm:text-2xl md:text-3xl font-semibold text-slate-800 leading-snug max-w-xl mx-auto mb-14">
                    Chaque profil est une porte d’entrée <br />
                    vers un écosystème de transformation
                </h2>

                {/* =========================================================
            B. GRILLE RESPONSIVE DES 5 CARTES
            - 2 colonnes sur mobile (grid-cols-2)
            - 3 colonnes sur tablette (sm:grid-cols-3)
            - 5 colonnes alignées sur desktop (md:grid-cols-5)
            - Gouttières (gap) dynamiques
            ========================================================= */}
                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3.5 sm:gap-4 lg:gap-5 justify-center">
                    {PROFILES.map((profile) => (
                        /* 
                          Chaque carte est un lien interactif cliquable <a> :
                          - key={profile.id} : clé unique obligatoire pour l'algorithme de réconciliation de React
                          - group : permet aux éléments enfants (image, overlay) de réagir au survol du parent
                          - relative + overflow-hidden : indispensable pour contraindre l'image zoomée à l'arrondi (rounded-xl)
                          - h-[...] : hauteurs fixes échelonnées par breakpoint pour garder un ratio portrait élancé
                          - transform hover:-translate-y-1.5 : translation douce vers le haut au survol pour donner du relief
                        */
                        <a
                            key={profile.id}
                            href={profile.href}
                            className="group relative block w-full h-[360px] sm:h-[420px] md:h-[460px] rounded-xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1.5"
                        >
                            {/* 
                CALQUE 1 (Fond) : Photographie du profil
                - object-cover : l'image remplit tout le conteneur sans se déformer
                - group-hover:scale-105 : léger zoom cinématographique quand la souris survole la carte
                - transition-transform duration-500 : animation fluide du zoom
              */}
                            <img
                                src={profile.image}
                                alt={profile.title.replace('\n', ' ')} // Remplace le saut de ligne par un espace pour l'accessibilité SEO
                                className="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-500 ease-out"
                            />

                            {/* 
                CALQUE 2 (Intermédiaire) : Dégradé sombre pour la lisibilité
                - bg-gradient-to-t : dégradé vertical partant du bas vers le haut
                - from-black/85 via-black/30 to-transparent : foncé en bas pour le texte, transparent en haut
                - pointer-events-none : empêche ce calque décoratif de bloquer les clics
              */}
                            <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/30 to-transparent pointer-events-none" />

                            {/* 
                CALQUE 3 (Premier plan) : Titre textuel de la carte
                - absolute inset-x-0 bottom-0 : positionné en bas de la carte sur toute la largeur
                - flex items-end justify-center : aligne le texte en bas et au centre
              */}
                            <div className="absolute inset-x-0 bottom-0 p-4 pb-6 flex items-end justify-center text-center">
                                {/* 
                  - whitespace-pre-line : interprète les retours à la ligne '\n' définis dans le tableau PROFILES
                  - drop-shadow-md : ombre portée sur le texte pour garantir un contraste optimal
                */}
                                <span className="text-white text-base sm:text-lg font-bold leading-snug whitespace-pre-line tracking-tight drop-shadow-md">
                                    {profile.title}
                                </span>
                            </div>
                        </a>
                    ))}
                </div>

            </div>
        </section>
    );
}