websites/components/Concepts.tsx

import Link from "next/link";

export default function Concepts() {
  return (
    <>
      <section>
        <div id="concepts" 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 radius-for-skewed">
          <div className="container mx-auto px-4">
            <div className="mb-4 max-w-5xl mx-auto text-center">
              <span className="text-purple-600 font-bold">Notre approche</span>
              <h2 className="text-4xl md:text-5xl font-bold text-white">
                l&apos;Effet Papillon
              </h2>
            </div>
            <div className="mb-16 max-w-5xl mx-auto">
              <p className="mb-6 text-gray-200 leading-loose">
                « <strong>Effet papillon</strong> » est une expression qui
                résume une métaphore concernant le phénomène fondamental de
                sensibilité aux <strong>conditions initiales</strong> de la
                théorie du chaos et son impact à long terme sur les systèmes
                dynamiques et complexes. La formulation exacte qui en est à
                l&apos;origine fut exprimée par Edward Lorenz lors d&apos;une conférence
                scientifique en 1972 :
              </p>
              <cite className="text-4xl md:text-xl font-bold text-white">
                « Le battement d&apos;ailes d&apos;un papillon au Brésil peut-il provoquer
                une tornade au Texas ? »
              </cite>
              <p className="mb-6 text-gray-200 leading-loose">
                Notre principale hypothèse de travail questionne les conditions
                initiales qui structurent l’efficience et la performance des
                parcours de soins et de santé notamment l’usage de la{" "}
                <strong>métrique hebdomadaire</strong>, le conditionnement des{" "}
                <strong>produits de santé</strong>, la production participative
                de données de santé et l’accès à des{" "}
                <strong>bases communes</strong>.
              </p>
              <p className="mb-6 text-gray-200 leading-loose">
                Nos preuves de concept émanent essentiellement de projets de
                recherche-action portés au sein d’un collectif soignant
                structuré en Société Interprofessionnelle de Soins Ambulatoires (SISA),
                le pôle de santé MilleSoins.
              </p>
              <p className="mb-6 text-gray-200 leading-loose">
                Par expérience de pensée, les éléments de prospective soulevés
                et les co-bénéfices potentiels nous permettent d’envisager une
                soutenabilité et une meilleure résilience du système de santé
                face aux défis épidémiologiques, démocratiques, écologiques et
                sociaux sous des angles divers :
              </p>
              <ul className="text-gray-200 ml-8 text-center">
                <li>Modes de gouvernance agiles</li>
                <li>Financement du système de santé</li>
                <li>Modèles organisationnels communautaires</li>
                <li>Approvisionnements en produits de santé</li>
                <li>Formation initiale et continue des professionnels</li>
              </ul>
            </div>
            <div className="flex flex-wrap -mx-4">
              <div className="mb-12 lg:mb-0 w-full md:w-1/2 lg:w-1/4 px-4">
                <span className="mb-4 md:mb-6 inline-block bg-blue-800 p-3 text-blue-500 rounded">
                  <svg
                    className="w-8 h-8"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
                  </svg>
                </span>
                <h4 className="mb-4 text-2xl font-bold font-heading text-white">
                  Innovation organisationnelle
                </h4>
                <p className="text-gray-200 leading-loose">
                  P4Pillon s’appuie sur les équipes coordonnées en santé
                  (maisons et centres de santé) dont le fonctionnement s’inscrit
                  dans l’identification, la création et l’usage de différents
                  communs (territoire d’action, projet de santé, personne
                  morale, lieu d’exercice, financements et outils)
                </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 className="w-full md:w-1/2 lg:w-1/4 px-4">
                <span className="mb-4 md:mb-6 inline-block bg-purple-800 p-3 text-purple-500 rounded">
                  <svg
                    className="w-8 h-8"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fillRule="evenodd"
                      d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z"
                      clipRule="evenodd"
                    />
                    <path d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z" />
                  </svg>
                </span>
                <h4 className="mb-4 text-2xl font-bold font-heading text-white">
                  Réappropriation numérique
                </h4>
                <p className="text-gray-200 leading-loose">
                  L&apos;usage de technologies conviviales et libres ainsi que
                  l&apos;autogestion de base de données de santé produites de manière
                  participative permettent une émancipation face aux éditeurs de
                  logiciels actuels et (rempare face à l&apos;usage mercantile des
                  données de santé).
                </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">
                  En savoir plus
                </a> */}
              </div>
              <div className="mb-12 lg:mb-0 w-full md:w-1/2 lg:w-1/4 px-4">
                <span className="mb-4 md:mb-6 inline-block bg-pink-800 p-3 text-pink-500 rounded">
                  <svg
                    className="w-8 h-8"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fillRule="evenodd"
                      d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z"
                      clipRule="evenodd"
                    />
                  </svg>
                </span>
                <h4 className="mb-4 text-2xl font-bold font-heading text-white">
                  Pratiques professionnelles renouvelées
                </h4>
                <p className="text-gray-200 leading-loose">
                  L&apos;usage de systèmes d&apos;information partagés au sein de
                  collectifs de soignants permet d&apos;envisager de nouvelles formes
                  de prise en charge individuelle et populationnelle avec une
                  approche territoriale.
                </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 className="mb-12 lg:mb-0 w-full md:w-1/2 lg:w-1/4 px-4">
                <span className="mb-4 mx-auto md:mb-6 inline-block bg-yellow-800 p-3 text-yellow-500 rounded">
                  <svg
                    className="w-8 h-8"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                    />
                  </svg>
                </span>
                <h4 className="mb-4 text-2xl font-bold font-heading text-white">
                  Économie et santé planétaire
                </h4>
                <p className="text-gray-200 leading-loose">
                  Une approche transdisciplinaire, impulsée par la science
                  fondée sur les preuves, la santé publique, centrée sur les
                  liens entre les modifications des écosystèmes dues aux
                  activités humaines et leurs conséquences sur la santé du
                  vivant et des écosystèmes.
                </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>
        </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>
      <section>
        <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 radius-for-skewed">
          <div className="container mx-auto px-4">
            <div className="max-w-6xl p-4 flex flex-wrap justify-center items-center">
              <div className="mb-6 w-full lg:w-1/3 text-center">
                <img
                  className="mb-6 mx-auto w-48 h-48 rounded-full object-cover"
                  src="/Thomas-Kuhn.jpg"
                  alt=""
                />
                <h4 className="text-xl text-gray-50">Thomas Kuhn</h4>
                <p className="text-purple-600">
                  Philosophe et historien des sciences
                </p>
              </div>
              <div className="w-full lg:w-2/3">
                <svg
                  className="mb-4 text-purple-600 h-10"
                  viewBox="0 0 32 28"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M10.2418 12.749C9.45369 12.522 8.66554 12.4069 7.89887 12.4069C6.71496 12.4069 5.72709 12.6775 4.96109 13.0088C5.69957 10.3053 7.47358 5.6405 11.0075 5.11517C11.3348 5.0665 11.603 4.82986 11.6923 4.51131L12.4646 1.74875C12.5298 1.51512 12.4912 1.26505 12.3579 1.06231C12.2246 0.859563 12.0105 0.724288 11.7705 0.691393C11.5097 0.655812 11.2438 0.637686 10.9803 0.637686C6.73846 0.637686 2.53756 5.06516 0.764895 11.4046C-0.275679 15.1238 -0.580802 20.7154 1.98237 24.2349C3.41668 26.2043 5.50924 27.2559 8.20198 27.361C8.21305 27.3613 8.2238 27.3616 8.23487 27.3616C11.5573 27.3616 14.5035 25.1241 15.3997 21.9208C15.9351 20.0058 15.6931 17.9975 14.7176 16.2644C13.7526 14.5508 12.1632 13.3018 10.2418 12.749Z"
                    fill="currentColor"
                  />
                  <path
                    d="M31.0396 16.2648C30.0746 14.5508 28.4852 13.3018 26.5638 12.749C25.7757 12.522 24.9875 12.4069 24.2212 12.4069C23.0373 12.4069 22.0491 12.6775 21.2831 13.0088C22.0215 10.3053 23.7955 5.6405 27.3298 5.11517C27.6571 5.0665 27.9249 4.82986 28.0146 4.51131L28.7869 1.74875C28.8521 1.51512 28.8135 1.26505 28.6802 1.06231C28.5473 0.859563 28.3331 0.724288 28.0928 0.691393C27.8323 0.655812 27.5664 0.637686 27.3026 0.637686C23.0608 0.637686 18.8599 5.06516 17.0869 11.4046C16.0466 15.1238 15.7415 20.7154 18.305 24.2356C19.739 26.2046 21.8319 27.2566 24.5243 27.3613C24.5354 27.3616 24.5461 27.362 24.5575 27.362C27.8796 27.362 30.8261 25.1244 31.7224 21.9211C32.2571 20.0061 32.0147 17.9975 31.0396 16.2648Z"
                    fill="currentColor"
                  />
                </svg>
                <h3 className="mb-6 text-3xl lg:text-4xl font-bold font-heading text-gray-50">
                  Un changement de paradigme est une mécanique sociologique
                  impliquant la genèse d&apos;une communauté de pensée, de méthode et
                  d&apos;objectif autour d&apos;outils communs.
                </h3>
                {/* <div>
              <button className='mr-1 bg-gray-800 rounded-full p-1' />
              <button className='mr-1 bg-gray-800 rounded-full p-1' />
              <button className='mr-1 bg-purple-600 rounded-full p-1' />
              <button className='bg-gray-800 rounded-full p-1' />
            </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>
    </>
  );
}