websites/components/Roadmap.tsx

import Link from "next/link";

export default function Roadmap() {
  return (
    <section id="roadmap">
      <div className="skew skew-top mr-for-radius">
        <svg
          className="h-8 md:h-12 lg:h-20 w-full text-gray-900"
          viewBox="0 0 10 10"
          preserveAspectRatio="none"
        >
          <polygon fill="currentColor" points="0 0 10 10 0 10" />
        </svg>
      </div>
      <div className="skew skew-top ml-for-radius">
        <svg
          className="h-8 md:h-12 lg:h-20 w-full text-gray-900"
          viewBox="0 0 10 10"
          preserveAspectRatio="none"
        >
          <polygon fill="currentColor" points="0 10 10 0 10 10" />
        </svg>
      </div>
      <div className="py-20 bg-gray-900 overflow-hidden radius-for-skewed">
        <div className="container mx-auto px-4">
          <div className="mb-16 max-w-md text-center mx-auto">
            {/* <span className='text-yellow-500 font-bold'>
                  Dolor sit amet consectutar
                </span> */}
            <h2 className="mb-2 text-4xl lg:text-5xl font-bold font-heading text-white">
              Étapes clés
            </h2>
          </div>
          <div className="relative flex flex-wrap -mx-4 z-0">
            <img
              className="h-128 hidden xl:block absolute top-0 right-0 -mt-4 -mr-16"
              style={{ zIndex: -1 }}
              src="atis-assets/elements/line-light-gray.svg"
              alt=""
            />
            <div className="mb-10 lg:mb-24 w-full md:w-1/2 lg:w-1/3 px-4">
              <div className="max-w-xs mb-4">
                <span className="mb-4 lg:mb-10 flex w-16 h-16 items-center justify-center bg-yellow-400 rounded-full font-bold text-md">
                  2018
                </span>
                <h3 className="mb-4 text-2xl font-bold font-heading text-white">
                  Prototypage d’un logiciel de gestion de stock
                </h3>
                <p className="text-gray-500 leading-loose">
                  Des 4P (Prédictive, Personnalisée, Pratique et Pas chère) à la
                  Pharmacie des Loutres
                </p>
                <a
                  className="inline-block relative w-full lg:w-auto py-2 leading-loose text-white font-semibold bg-gray-900 border-2 border-none rounded-xl transition duration-200 after:bg-white after:absolute after:h-1 after:w-0 after:bottom-0 after:left-0 hover:after:w-full after:transition-all after:duration-300"
                  href="#"
                >
                  En savoir plus
                </a>
              </div>
            </div>
            <div className="mb-10 lg:mb-24 w-full md:w-1/2 lg:w-1/3 px-4">
              <div className="max-w-xs">
                <span className="mb-4 lg:mb-10 flex w-16 h-16 items-center justify-center bg-pink-400 rounded-full font-bold text-md">
                  2019
                </span>
                <h3 className="mb-4 text-2xl font-bold font-heading text-white">
                  Naissance de l’association P4Pillon
                </h3>
                {/* <p className='text-gray-500 leading-loose'>
                      Fusce quam tellus, placerat eu metus ut, viverra aliquet
                      purus. Suspendisse potenti. Nulla non nibh feugiat.
                    </p> */}
              </div>
            </div>
            <div className="mb-10 lg:mb-24 w-full md:w-1/2 lg:w-1/3 px-4">
              <div className="max-w-xs">
                <span className="mb-4 lg:mb-10 flex w-16 h-16 items-center text-center justify-center bg-purple-400 rounded-full font-bold text-md">
                  2019 2021
                </span>
                <h3 className="mb-4 text-2xl font-bold font-heading text-white">
                  Réalisation de 4 preuves de concept au sein de la MSPU
                  MilleSoins
                </h3>
                {/* <p className='text-gray-500 leading-loose'>
                      <ul className='list-disc'>
                        <li>Les cercles de qualité médecins-pharmaciens</li>
                        <li>La dispensation à domicile pendant le premier confinement</li>
                        <li>La stratégie de distribution juste des premiers vaccins covid</li>
                        <li>La stratégie de pilotage de l’activité croisée entre l’infirmier de pratique avancée et le pharmacien correspondant</li>
                      </ul>
                    </p> */}
              </div>
            </div>
            <div className="mb-10 w-full md:w-1/2 lg:w-1/3 px-4 order-last lg:order-1">
              <div className="max-w-xs">
                <span className="mb-4 lg:mb-10 flex w-16 h-16 items-center justify-center bg-green-400 rounded-full font-bold text-md">
                  2030
                </span>
                <h3 className="mb-4 text-2xl font-bold font-heading text-white">
                  Généralisation de cet outil émancipateur dans les collectifs
                  soignants
                  {/* permettant de poursuivre un idéal de santé communautaire et planétaire */}
                </h3>
                {/* <p className='text-gray-500 leading-loose'>
                      Fusce quam tellus, placerat eu metus ut, viverra aliquet
                      purus. Suspendisse potenti. Nulla non nibh feugiat.
                    </p> */}
              </div>
            </div>
            <div className="mb-10 md:mb-0 w-full md:w-1/2 lg:w-1/3 px-4 order-1 lg:order-0">
              <div className="max-w-xs">
                <span className="mb-4 lg:mb-10 flex w-16 h-16 items-center justify-center bg-blue-400 rounded-full font-bold text-md">
                  2025
                </span>
                <h3 className="mb-4 text-2xl font-bold font-heading text-white">
                  Déploiement du premier logiciel libre pour équipe coordonnée
                  en santé dans les universités
                  {/* et structures de soins apparentées / Montée en charge de la recherche en soins primaires */}
                </h3>
                {/* <p className='text-gray-500 leading-loose'>
                      Fusce quam tellus, placerat eu metus ut, viverra aliquet
                      purus. Suspendisse potenti. Nulla non nibh feugiat.
                    </p> */}
              </div>
            </div>
            <div className="w-full md:w-1/2 lg:w-1/3 px-4 lg:order-last">
              <div className="max-w-xs">
                <span className="mb-4 lg:mb-10 flex w-16 h-16 items-center justify-center bg-yellow-400 rounded-full font-bold text-md">
                  2024
                </span>
                <h3 className="mb-4 text-2xl font-bold font-heading text-white">
                  Développement d’un moteur de facturation sesam-vitale /
                  Création de la SCIC
                </h3>
                {/* <p className='text-gray-500 leading-loose'>
                      Fusce quam tellus, placerat eu metus ut, viverra aliquet
                      purus. Suspendisse potenti. Nulla non nibh feugiat.
                    </p> */}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="skew skew-bottom mr-for-radius">
        <svg
          className="h-8 md:h-12 lg:h-20 w-full text-gray-900"
          viewBox="0 0 10 10"
          preserveAspectRatio="none"
        >
          <polygon fill="currentColor" points="0 0 10 0 0 10" />
        </svg>
      </div>
      <div className="skew skew-bottom ml-for-radius">
        <svg
          className="h-8 md:h-12 lg:h-20 w-full text-gray-900"
          viewBox="0 0 10 10"
          preserveAspectRatio="none"
        >
          <polygon fill="currentColor" points="0 0 10 0 10 10" />
        </svg>
      </div>
    </section>
  );
}