175 lines
8.0 KiB
TypeScript
175 lines
8.0 KiB
TypeScript
|
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'é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>
|
|||
|
|
);
|
|||
|
|
}
|