websites/components/Projects.tsx

import Link from "next/link";

export default function Roadmap() {
  return (
    <section id="projects">
      <div className="skew skew-top mr-for-radius">
        <svg
          className="h-8 md:h-12 lg:h-20 w-full text-purple-600"
          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-purple-600"
          viewBox="0 0 10 10"
          preserveAspectRatio="none"
        >
          <polygon fill="currentColor" points="0 10 10 0 10 10" />
        </svg>
      </div>
      {/* <div className='py-20 bg-purple-600 radius-for-skewed'> */}
      <div className="py-20 bg-gray-900 radius-for-skewed">
        <div className="container mx-auto px-4">
          <div className="mb-8 md:mb-16 max-w-lg mx-auto text-center">
            <span className="text-purple-400 font-bold">
              Avancement des projets
            </span>
            <h2 className="mb-6 text-4xl lg:text-5xl font-bold font-heading text-white">
              Les projets en cours
            </h2>
            {/* <div className='inline-flex flex-wrap py-1 sm:px-1 sm:space-x-1 bg-purple-500 rounded text-sm'>
                  <button className='w-full sm:w-auto mb-1 sm:mb-0 mx-1 sm:mx-0 py-2 px-4 hover:bg-pink-600 text-white rounded hover:shadow font-bold focus:outline-none transition duration-200'>
                    Category 1
                  </button>
                  <button className='w-full sm:w-auto mb-1 sm:mb-0 mx-1 sm:mx-0 py-2 px-4 bg-pink-600 text-white shadow rounded font-bold focus:outline-none transition duration-200'>
                    Category 2
                  </button>
                  <button className='w-full sm:w-auto mb-1 sm:mb-0 mx-1 sm:mx-0 py-2 px-4 hover:bg-pink-600 text-white rounded hover:shadow font-bold focus:outline-none transition duration-200'>
                    Category 3
                  </button>
                  <button className='w-full sm:w-auto mb-1 sm:mb-0 mx-1 sm:mx-0 py-2 px-4 hover:bg-pink-600 text-white rounded hover:shadow font-bold focus:outline-none transition duration-200'>
                    Category 4
                  </button>
                </div> */}
          </div>
          <div className="flex flex-wrap -mx-4 mb-12">
            <div className="flex flex-wrap w-full lg:w-1/2 mb-8 lg:mb-0">
              <div className="w-full lg:w-1/2 px-4 mb-8">
                {/* <img
                      className='h-64 w-full rounded-lg object-cover'
                      src='https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80'
                      alt=''
                    /> */}
              </div>
              <div className="w-full lg:w-1/2 px-4 mb-8">
                <img
                  className="h-64 w-full rounded-lg object-cover"
                  src="/etactics-inc-FnGty3_1Fz4-unsplash.jpg"
                  alt=""
                />
              </div>
              <div className="w-full px-4">
                <div className="relative">
                  <img
                    className="h-64 lg:h-128 w-full rounded-lg object-cover"
                    src="/towfiqu-barbhuiya-HNPrWOH2Z8U-unsplash.jpg"
                    alt=""
                  />
                  <div className="absolute inset-0 bg-gray-900 opacity-80 rounded-lg" />
                  <div className="absolute inset-0 p-6 flex justify-center">
                    <div className="max-w-md my-auto">
                      <span className="text-purple-600 font-bold">2024</span>
                      <h2 className="text-4xl lg:text-5xl text-white font-bold leading-tight">
                        Moteur de facturation sesam-vitale
                      </h2>
                      <div className="max-w-xs">
                        <p className="mb-6 text-gray-400">
                          Développement d’un moteur de facturation sesam‑vitale
                          avec agrément
                        </p>
                        <a
                          className="inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-purple-600 hover:bg-purple-700 text-gray-50 font-bold leading-loose"
                          href="#"
                        >
                          En savoir plus
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="flex flex-wrap w-full lg:w-1/2">
              <div className="w-full px-4 mb-8">
                <div className="relative">
                  <img
                    className="h-128 w-full rounded-lg object-cover"
                    // src='https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80'
                    src="lucas-george-wendt-zEp3CgWcOj0-unsplash.jpg"
                    alt=""
                  />
                  <div className="absolute inset-0 bg-gray-900 opacity-80 rounded-lg" />
                  <div className="absolute inset-0 p-6 flex justify-center">
                    <div className="max-w-md my-auto">
                      <span className="text-purple-600 font-bold">2024</span>
                      <h2 className="text-4xl lg:text-5xl text-white font-bold leading-tight">
                        Mise en place de la SCIC
                      </h2>
                      <div className="max-w-xs">
                        <p className="mb-6 text-gray-400">
                          Les statuts sont en cours d&apos;écriture, nous prenons
                          contacts avec différents acteurs.
                        </p>
                        <a
                          className="inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-purple-600 hover:bg-purple-700 text-gray-50 font-bold leading-loose"
                          href="#"
                        >
                          Rejoignez nous !
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
                <img
                  className="h-64 w-full rounded-lg object-cover"
                  src="etactics-inc-Apdejs-GxW4-unsplash.jpg"
                  alt=""
                />
              </div>
              {/* <div className='w-full lg:w-1/2 px-4'>
                    <img
                      className='h-64 w-full rounded-lg object-cover'
                      src='https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1055&q=80'
                      alt=''
                    />
                  </div> */}
            </div>
          </div>
          {/* <div className='text-center'>
                <a
                  className='inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-pink-600 hover:bg-pink-700 text-gray-50 font-bold leading-loose transition duration-200'
                  href='#'
                >
                  View More Projects
                </a>
              </div> */}
        </div>
      </div>
      <div className="skew skew-bottom mr-for-radius">
        <svg
          className="h-8 md:h-12 lg:h-20 w-full text-purple-600"
          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-purple-600"
          viewBox="0 0 10 10"
          preserveAspectRatio="none"
        >
          <polygon fill="currentColor" points="0 0 10 0 10 10" />
        </svg>
      </div>
    </section>
  );
}