feat: Nouvelle version
This commit is contained in:
89
components/Article.tsx
Normal file
89
components/Article.tsx
Normal file
@ -0,0 +1,89 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Article({
|
||||
title,
|
||||
date,
|
||||
content,
|
||||
}: {
|
||||
title: string;
|
||||
date: string;
|
||||
content: string;
|
||||
}) {
|
||||
return (
|
||||
<section className="py-10 lg:py-20 bg-gray-900">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-2xl mx-auto mb-12 text-center">
|
||||
<span className="text-base lg:text-xl text-gray-400">
|
||||
24 Janvier, 2024
|
||||
</span>
|
||||
<div className="mt-2">
|
||||
<h1 className="mb-6 text-4xl lg:text-5xl font-bold font-heading text-white">
|
||||
{title}
|
||||
</h1>
|
||||
{/* <div className='flex justify-center'>
|
||||
<div className='mr-4'>
|
||||
<img
|
||||
className='w-12 h-12 object-cover object-top rounded-full'
|
||||
src='https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80'
|
||||
alt=''
|
||||
/>
|
||||
</div>
|
||||
<div className='text-left'>
|
||||
<a href='#'>
|
||||
<h3 className='text-gray-200 hover:text-gray-600 hover:underline font-bold'>
|
||||
Alice Bradley
|
||||
</h3>
|
||||
</a>
|
||||
<a href='#'>
|
||||
<span className='text-xs text-green-600 font-bold'>
|
||||
Author
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
className="uppercase text-base text-green-600 hover:text-green-700 hover:underline"
|
||||
href="#"
|
||||
>
|
||||
#Travel
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-w-2xl mx-auto prose">
|
||||
{content}
|
||||
{/* <p className='mb-6 leading-loose text-gray-200'>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Praesent commodo est eget consequat imperdiet. Suspendisse
|
||||
laoreet scelerisque lobortis. Mauris facilisis hendrerit nulla
|
||||
at vehicula. Suspendisse potenti. Ut in nulla a purus bibendum
|
||||
convallis. Suspendisse id nunc maximus, suscipit ante ac,
|
||||
vulputate massa. Sed ut nunc suscipit, bibendum arcu a, interdum
|
||||
elit. Nullam laoreet mollis dictum. Ut suscipit, magna at
|
||||
elementum iaculis, erat erat fermentum justo, sit amet ultrices
|
||||
enim leo sit amet purus. Nulla sed erat molestie, auctor mauris
|
||||
lobortis, iaculis justo.
|
||||
</p>
|
||||
<p className='leading-loose text-gray-200'>
|
||||
Duis hendrerit dui in dui ornare luctus. Nullam gravida
|
||||
tincidunt lorem cursus suscipit. Integer scelerisque sem et sem
|
||||
porta, eu volutpat mi tempor. Duis interdum sodales lacus non
|
||||
tempor. Nam mattis, sapien a commodo ultrices, nunc orci
|
||||
tincidunt ante, tempus tempus turpis metus laoreet lacus.
|
||||
Praesent condimentum, arcu ut fringilla tincidunt, augue diam
|
||||
pretium augue, sit amet vestibulum nunc felis vel metus. Duis
|
||||
dolor nulla, pellentesque non ultrices ut, convallis eu felis.
|
||||
Duis luctus tempor arcu, vitae elementum massa porta non. Morbi
|
||||
aliquet, neque ut volutpat sodales, dui enim facilisis enim, ut
|
||||
dictum lacus neque in urna. Nam metus elit, ullamcorper pretium
|
||||
nisi at, aliquet gravida lectus. Nullam id lectus pellentesque,
|
||||
suscipit dolor eget, consequat velit. Pellentesque finibus
|
||||
commodo nisl, id interdum leo. Maecenas aliquam felis justo, ut
|
||||
sagittis nunc maximus ut.
|
||||
</p> */}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
337
components/Blog.tsx
Normal file
337
components/Blog.tsx
Normal file
@ -0,0 +1,337 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Blog() {
|
||||
return (
|
||||
<section>
|
||||
<div className="skew skew-top mr-for-radius">
|
||||
<svg
|
||||
className="h-8 md:h-12 lg:h-20 w-full text-gray-50"
|
||||
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-50"
|
||||
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-50 radius-for-skewed">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="mb-16 flex flex-wrap items-center">
|
||||
<div className="w-full lg:w-1/2">
|
||||
<span className="text-green-600 font-bold">
|
||||
Dolor sit amet consectutar
|
||||
</span>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold font-heading">
|
||||
Featured Posts
|
||||
</h2>
|
||||
</div>
|
||||
<div className="hidden lg:block text-right w-1/2">
|
||||
<a
|
||||
className="inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-green-600 hover:bg-green-700 text-gray-50 font-bold leading-loose transition duration-200"
|
||||
href="#"
|
||||
>
|
||||
View More Articles
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap -mx-3">
|
||||
<div className="mb-8 lg:mb-0 w-full lg:w-1/4 px-3">
|
||||
<div className="py-4 px-6 bg-white shadow rounded">
|
||||
<h4 className="mb-4 text-gray-500 font-bold uppercase">
|
||||
Topics
|
||||
</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
className="block py-2 px-3 mb-4 rounded text-green-600 font-bold bg-gray-50"
|
||||
href="#"
|
||||
>
|
||||
All
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50"
|
||||
href="#"
|
||||
>
|
||||
Community
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50"
|
||||
href="#"
|
||||
>
|
||||
Design
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50"
|
||||
href="#"
|
||||
>
|
||||
Engineering
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50"
|
||||
href="#"
|
||||
>
|
||||
Marketplace
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50"
|
||||
href="#"
|
||||
>
|
||||
News
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50"
|
||||
href="#"
|
||||
>
|
||||
Culture
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50"
|
||||
href="#"
|
||||
>
|
||||
Product Updates
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50"
|
||||
href="#"
|
||||
>
|
||||
Trust & Security
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full lg:w-3/4 px-3">
|
||||
<div className="flex flex-wrap -mx-3 mb-8 lg:mb-6">
|
||||
<div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
|
||||
<img
|
||||
className="w-full h-full object-cover rounded"
|
||||
src="https://images.unsplash.com/photo-1552338804-c42590cb7b88?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1189&q=80"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full lg:w-3/4 px-3">
|
||||
<a className="hover:underline" href="#">
|
||||
<h3 className="mb-1 text-2xl font-bold font-heading">
|
||||
Morbi scelerisque nulla et lectus dignissim eleifend nulla
|
||||
eu nulla a metus
|
||||
</h3>
|
||||
</a>
|
||||
<div className="mb-2 flex items-center text-sm">
|
||||
<a
|
||||
className="text-green-600 hover:underline hover:text-green-700"
|
||||
href="#"
|
||||
>
|
||||
John Doe
|
||||
</a>
|
||||
<span className="text-gray-400 mx-2">•</span>
|
||||
<span className="text-gray-400">24 Jan, 2021</span>
|
||||
</div>
|
||||
<p className="text-gray-500">
|
||||
Quisque id sagittis turpis. Nulla sollicitudin rutrum eros
|
||||
eu dictum...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap -mx-3 mb-8 lg:mb-6">
|
||||
<div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
|
||||
<img
|
||||
className="w-full h-full object-cover rounded"
|
||||
src="https://images.unsplash.com/photo-1578509395623-a34c97f15379?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=968&q=80"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full lg:w-3/4 px-3">
|
||||
<a className="hover:underline" href="#">
|
||||
<h3 className="mb-1 text-2xl font-bold font-heading">
|
||||
Morbi scelerisque nulla et lectus dignissim eleifend nulla
|
||||
eu nulla a metus
|
||||
</h3>
|
||||
</a>
|
||||
<div className="mb-2 flex items-center text-sm">
|
||||
<a
|
||||
className="text-green-600 hover:underline hover:text-green-700"
|
||||
href="#"
|
||||
>
|
||||
John Doe
|
||||
</a>
|
||||
<span className="text-gray-400 mx-2">•</span>
|
||||
<span className="text-gray-400">24 Jan, 2021</span>
|
||||
</div>
|
||||
<p className="text-gray-500">
|
||||
Quisque id sagittis turpis. Nulla sollicitudin rutrum eros
|
||||
eu dictum...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap -mx-3 mb-8 lg:mb-6">
|
||||
<div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
|
||||
<img
|
||||
className="w-full h-full object-cover rounded"
|
||||
src="https://images.unsplash.com/photo-1551008475-4533d141425b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=968&q=80"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full lg:w-3/4 px-3">
|
||||
<a className="hover:underline" href="#">
|
||||
<h3 className="mb-1 text-2xl font-bold font-heading">
|
||||
Morbi scelerisque nulla et lectus dignissim eleifend nulla
|
||||
eu nulla a metus
|
||||
</h3>
|
||||
</a>
|
||||
<div className="mb-2 flex items-center text-sm">
|
||||
<a
|
||||
className="text-green-600 hover:underline hover:text-green-700"
|
||||
href="#"
|
||||
>
|
||||
John Doe
|
||||
</a>
|
||||
<span className="text-gray-400 mx-2">•</span>
|
||||
<span className="text-gray-400">24 Jan, 2021</span>
|
||||
</div>
|
||||
<p className="text-gray-500">
|
||||
Quisque id sagittis turpis. Nulla sollicitudin rutrum eros
|
||||
eu dictum...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap -mx-3 mb-8 lg:mb-6">
|
||||
<div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
|
||||
<img
|
||||
className="w-full h-full object-cover rounded"
|
||||
src="https://images.unsplash.com/37/IHLjdHdzSvi0rgUMMlSK_TE3_0286.jpg?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1191&q=80"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full lg:w-3/4 px-3">
|
||||
<a className="hover:underline" href="#">
|
||||
<h3 className="mb-1 text-2xl font-bold font-heading">
|
||||
Morbi scelerisque nulla et lectus dignissim eleifend nulla
|
||||
eu nulla a metus
|
||||
</h3>
|
||||
</a>
|
||||
<div className="mb-2 flex items-center text-sm">
|
||||
<a
|
||||
className="text-green-600 hover:underline hover:text-green-700"
|
||||
href="#"
|
||||
>
|
||||
John Doe
|
||||
</a>
|
||||
<span className="text-gray-400 mx-2">•</span>
|
||||
<span className="text-gray-400">24 Jan, 2021</span>
|
||||
</div>
|
||||
<p className="text-gray-500">
|
||||
Quisque id sagittis turpis. Nulla sollicitudin rutrum eros
|
||||
eu dictum...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap -mx-3 mb-8 lg:mb-6">
|
||||
<div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
|
||||
<img
|
||||
className="w-full h-full object-cover rounded"
|
||||
src="https://images.unsplash.com/photo-1552338804-c42590cb7b88?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1189&q=80"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full lg:w-3/4 px-3">
|
||||
<a className="hover:underline" href="#">
|
||||
<h3 className="mb-1 text-2xl font-bold font-heading">
|
||||
Morbi scelerisque nulla et lectus dignissim eleifend nulla
|
||||
eu nulla a metus
|
||||
</h3>
|
||||
</a>
|
||||
<div className="mb-2 flex items-center text-sm">
|
||||
<a
|
||||
className="text-green-600 hover:underline hover:text-green-700"
|
||||
href="#"
|
||||
>
|
||||
John Doe
|
||||
</a>
|
||||
<span className="text-gray-400 mx-2">•</span>
|
||||
<span className="text-gray-400">24 Jan, 2021</span>
|
||||
</div>
|
||||
<p className="text-gray-500">
|
||||
Quisque id sagittis turpis. Nulla sollicitudin rutrum eros
|
||||
eu dictum...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap -mx-3">
|
||||
<div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
|
||||
<img
|
||||
className="w-full h-full object-cover rounded"
|
||||
src="https://images.unsplash.com/photo-1578509395623-a34c97f15379?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=968&q=80"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full lg:w-3/4 px-3">
|
||||
<a className="hover:underline" href="#">
|
||||
<h3 className="mb-1 text-2xl font-bold font-heading">
|
||||
Morbi scelerisque nulla et lectus dignissim eleifend nulla
|
||||
eu nulla a metus
|
||||
</h3>
|
||||
</a>
|
||||
<div className="mb-2 flex items-center text-sm">
|
||||
<a
|
||||
className="text-green-600 hover:underline hover:text-green-700"
|
||||
href="#"
|
||||
>
|
||||
John Doe
|
||||
</a>
|
||||
<span className="text-gray-400 mx-2">•</span>
|
||||
<span className="text-gray-400">24 Jan, 2021</span>
|
||||
</div>
|
||||
<p className="text-gray-500">
|
||||
Quisque id sagittis turpis. Nulla sollicitudin rutrum eros
|
||||
eu dictum...
|
||||
</p>
|
||||
</div>
|
||||
</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-50"
|
||||
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-50"
|
||||
viewBox="0 0 10 10"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<polygon fill="currentColor" points="0 0 10 0 10 10" />
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
309
components/Concepts.tsx
Normal file
309
components/Concepts.tsx
Normal file
@ -0,0 +1,309 @@
|
||||
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'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'origine fut exprimée par Edward Lorenz lors d'une conférence
|
||||
scientifique en 1972 :
|
||||
</p>
|
||||
<cite className="text-4xl md:text-xl font-bold text-white">
|
||||
« Le battement d'ailes d'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'usage de technologies conviviales et libres ainsi que
|
||||
l'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'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'usage de systèmes d'information partagés au sein de
|
||||
collectifs de soignants permet d'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'une communauté de pensée, de méthode et
|
||||
d'objectif autour d'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>
|
||||
</>
|
||||
);
|
||||
}
|
108
components/Footer.tsx
Normal file
108
components/Footer.tsx
Normal file
@ -0,0 +1,108 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<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="flex flex-wrap mb-6 lg:mb-2">
|
||||
<div className="mb-6 w-full lg:w-1/5">
|
||||
<Link
|
||||
className="text-white text-3xl font-bold leading-none flex align-middle"
|
||||
href="/"
|
||||
>
|
||||
<img
|
||||
className="h-12 inline"
|
||||
src="/logo2.svg"
|
||||
alt=""
|
||||
width="auto"
|
||||
/>
|
||||
<h1 className="ml-4 leading-loose">P4Pillon</h1>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mb-5 w-full lg:w-1/5">
|
||||
<p className="text-gray-400 leading-loose">
|
||||
Pour une santé en commun et des communs en santé
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full lg:w-3/5 flex flex-wrap -mx-3 justify-end">
|
||||
<div className="mb-6 w-full md:w-1/2 lg:w-1/4 lg:mr-6 px-3">
|
||||
<h5 className="mb-4 font-bold text-gray-50">Liens</h5>
|
||||
<p className="text-gray-400 leading-loose">
|
||||
<Link href="/">La SCIC</Link>
|
||||
</p>
|
||||
{/* <p className="text-gray-400 leading-loose">
|
||||
<a href="https://staging.p4pillon.org/annuaire/#45.55349,2.02698,10z">
|
||||
Annuaire
|
||||
</a>
|
||||
</p> */}
|
||||
<p className="text-gray-400 leading-loose mb-4">
|
||||
<a href="https://apps.p4pillon.org">Outils numériques</a>
|
||||
</p>
|
||||
<p className="text-gray-400 leading-loose">
|
||||
<Link href="/mentions-legales/">Mentions légales</Link>
|
||||
</p>
|
||||
</div>
|
||||
<div className="mb-6 w-full md:w-1/2 lg:w-1/4 px-3">
|
||||
<h5 className="mb-4 font-bold text-gray-50">Contacts</h5>
|
||||
<p className="text-gray-400">
|
||||
<a href="mailto:bonjour@p4pillon.org">bonjour@p4pillon.org</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex justify-center">
|
||||
<p className="text-sm text-gray-400">© 2024 - CC-BY-NC-SA</p>
|
||||
{/* <div className='flex space-x-2 lg:space-x-4'>
|
||||
<a href='#'>
|
||||
<img src='atis-assets/social/facebook-purple.svg' alt='' />
|
||||
</a>
|
||||
<a href='#'>
|
||||
<img src='atis-assets/social/twitter-purple.svg' alt='' />
|
||||
</a>
|
||||
<a href='#'>
|
||||
<img src='atis-assets/social/instagram-purple.svg' alt='' />
|
||||
</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>
|
||||
);
|
||||
}
|
185
components/Hero.tsx
Normal file
185
components/Hero.tsx
Normal file
@ -0,0 +1,185 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Hero() {
|
||||
return (
|
||||
<>
|
||||
<section>
|
||||
<div className="bg-gray-900 pt-12 lg:pt-20 pb-12 md:pb-24">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex flex-wrap -mx-4">
|
||||
<div className="w-full lg:w-1/2 px-4 mb-12 md:mb-20 lg:mb-0 flex items-center">
|
||||
<div className="w-full text-center lg:text-left">
|
||||
<div className="max-w-md mx-auto lg:mx-0">
|
||||
<h2 className="mb-3 text-4xl lg:text-5xl text-white font-bold">
|
||||
<span> Composer une santé en </span>
|
||||
<span className="text-purple-600">commun</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="max-w-sm mx-auto lg:mx-0">
|
||||
<p className="mb-6 text-gray-400 leading-loose">
|
||||
P4Pillon est une initiative de recherche et développement
|
||||
en soins de premier recours ayant pour objectif de changer
|
||||
le paradigme du système de santé.
|
||||
</p>
|
||||
<div>
|
||||
<a
|
||||
className="inline-block mb-3 lg:mb-0 lg:mr-3 w-full lg:w-auto py-2 px-6 leading-loose bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-l-xl rounded-t-xl transition duration-200"
|
||||
href="#"
|
||||
>
|
||||
Devenir partenaire
|
||||
</a>
|
||||
{/* <a
|
||||
className='inline-block w-full lg:w-auto py-2 px-6 leading-loose text-white font-semibold bg-gray-900 border-2 border-gray-700 hover:border-gray-600 rounded-l-xl rounded-t-xl transition duration-200'
|
||||
href='#'
|
||||
>
|
||||
How it works
|
||||
</a> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full lg:w-1/2 px-4 flex items-center justify-center">
|
||||
<div className="relative" style={{ zIndex: 0 }}>
|
||||
<img
|
||||
className="h-128 w-full max-w-lg object-cover rounded-3xl md:rounded-br-none"
|
||||
src="/sante.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="hidden md:block absolute"
|
||||
style={{ top: "-2rem", right: "3rem", zIndex: -1 }}
|
||||
src="atis-assets/elements/blue-up.svg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="hidden md:block absolute"
|
||||
style={{ bottom: "-2rem", right: "-2rem", zIndex: -1 }}
|
||||
src="atis-assets/elements/wing-purple-down.svg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="hidden md:block absolute"
|
||||
style={{ top: "3rem", right: "-3rem", zIndex: -1 }}
|
||||
src="atis-assets/elements/bullets-pink-left.svg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="hidden md:block absolute"
|
||||
style={{ bottom: "2.5rem", left: "-4.5rem", zIndex: -1 }}
|
||||
src="atis-assets/elements/bullets-yellow-left.svg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
|
||||
<div className="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25" />
|
||||
<nav className="relative flex flex-col py-6 px-6 h-full w-full bg-white border-r overflow-y-auto">
|
||||
<div className="flex items-center mb-8">
|
||||
<a className="mr-auto text-3xl font-bold leading-none" href="#">
|
||||
<img
|
||||
className="h-10"
|
||||
src="atis-assets/logo/atis/atis-color-black.svg"
|
||||
alt=""
|
||||
width="auto"
|
||||
/>
|
||||
</a>
|
||||
<button className="navbar-close">
|
||||
<svg
|
||||
className="h-6 w-6 text-gray-400 cursor-pointer hover:text-gray-500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li className="mb-1">
|
||||
<a
|
||||
className="block p-4 text-sm font-semibold text-gray-400 hover:bg-purple-50 hover:text-purple-600 rounded"
|
||||
href="#"
|
||||
>
|
||||
Concepts
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-1">
|
||||
<a
|
||||
className="block p-4 text-sm font-semibold text-gray-400 hover:bg-purple-50 hover:text-purple-600 rounded"
|
||||
href="#"
|
||||
>
|
||||
Projets
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-1">
|
||||
<a
|
||||
className="block p-4 text-sm font-semibold text-gray-400 hover:bg-purple-50 hover:text-purple-600 rounded"
|
||||
href="#"
|
||||
>
|
||||
La SCIC
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-1">
|
||||
<a
|
||||
className="block p-4 text-sm font-semibold text-gray-400 hover:bg-purple-50 hover:text-purple-600 rounded"
|
||||
href="#"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
{/* <li className="mb-1">
|
||||
<a
|
||||
className="block p-4 text-sm font-semibold text-gray-400 hover:bg-purple-50 hover:text-purple-600 rounded"
|
||||
href="#"
|
||||
>
|
||||
Annuaire
|
||||
</a>
|
||||
</li> */}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="mt-auto">
|
||||
<div className="pt-6">
|
||||
<a
|
||||
className="block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold leading-none bg-gray-50 hover:bg-gray-100 rounded-l-xl rounded-t-xl"
|
||||
href="#"
|
||||
>
|
||||
Sign In
|
||||
</a>
|
||||
<a
|
||||
className="block px-4 py-3 mb-2 leading-loose text-xs text-center text-white font-semibold bg-pink-600 hover:bg-pink-700 rounded-l-xl rounded-t-xl"
|
||||
href="#"
|
||||
>
|
||||
Sign Up
|
||||
</a>
|
||||
</div>
|
||||
<p className="my-4 text-xs text-center text-gray-400">
|
||||
<span>© 2020 All rights reserved.</span>
|
||||
</p>
|
||||
<div className="text-center">
|
||||
<a className="inline-block px-1" href="#">
|
||||
<img src="atis-assets/social/facebook-purple.svg" alt="" />
|
||||
</a>
|
||||
<a className="inline-block px-1" href="#">
|
||||
<img src="atis-assets/social/twitter-purple.svg" alt="" />
|
||||
</a>
|
||||
<a className="inline-block px-1" href="#">
|
||||
<img src="atis-assets/social/instagram-purple.svg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
109
components/Mdx.tsx
Normal file
109
components/Mdx.tsx
Normal file
@ -0,0 +1,109 @@
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import { MDXRemote } from 'next-mdx-remote/rsc'
|
||||
// import { highlight } from 'sugar-high'
|
||||
import React from 'react'
|
||||
|
||||
function Table({ data }) {
|
||||
let headers = data.headers.map((header, index) => (
|
||||
<th key={index}>{header}</th>
|
||||
))
|
||||
let rows = data.rows.map((row, index) => (
|
||||
<tr key={index}>
|
||||
{row.map((cell, cellIndex) => (
|
||||
<td key={cellIndex}>{cell}</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
|
||||
return (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>{headers}</tr>
|
||||
</thead>
|
||||
<tbody>{rows}</tbody>
|
||||
</table>
|
||||
)
|
||||
}
|
||||
|
||||
function CustomLink(props) {
|
||||
let href = props.href
|
||||
|
||||
if (href.startsWith('/')) {
|
||||
return (
|
||||
<Link href={href} {...props}>
|
||||
{props.children}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
if (href.startsWith('#')) {
|
||||
return <a {...props} />
|
||||
}
|
||||
|
||||
return <a target="_blank" rel="noopener noreferrer" {...props} />
|
||||
}
|
||||
|
||||
function RoundedImage(props) {
|
||||
return <Image alt={props.alt} className="rounded-lg" {...props} />
|
||||
}
|
||||
|
||||
// function Code({ children, ...props }) {
|
||||
// let codeHTML = highlight(children)
|
||||
// return <code dangerouslySetInnerHTML={{ __html: codeHTML }} {...props} />
|
||||
// }
|
||||
|
||||
function slugify(str) {
|
||||
return str
|
||||
.toString()
|
||||
.toLowerCase()
|
||||
.trim() // Remove whitespace from both ends of a string
|
||||
.replace(/\s+/g, '-') // Replace spaces with -
|
||||
.replace(/&/g, '-and-') // Replace & with 'and'
|
||||
.replace(/[^\w\-]+/g, '') // Remove all non-word characters except for -
|
||||
.replace(/\-\-+/g, '-') // Replace multiple - with single -
|
||||
}
|
||||
|
||||
function createHeading(level) {
|
||||
const Heading = ({ children }) => {
|
||||
let slug = slugify(children)
|
||||
return React.createElement(
|
||||
`h${level}`,
|
||||
{ id: slug },
|
||||
[
|
||||
React.createElement('a', {
|
||||
href: `#${slug}`,
|
||||
key: `link-${slug}`,
|
||||
className: 'anchor',
|
||||
}),
|
||||
],
|
||||
children
|
||||
)
|
||||
}
|
||||
|
||||
Heading.displayName = `Heading${level}`
|
||||
|
||||
return Heading
|
||||
}
|
||||
|
||||
let components = {
|
||||
h1: createHeading(1),
|
||||
h2: createHeading(2),
|
||||
h3: createHeading(3),
|
||||
h4: createHeading(4),
|
||||
h5: createHeading(5),
|
||||
h6: createHeading(6),
|
||||
Image: RoundedImage,
|
||||
a: CustomLink,
|
||||
// code: Code,
|
||||
Table,
|
||||
}
|
||||
|
||||
export function CustomMDX(props) {
|
||||
return (
|
||||
<MDXRemote
|
||||
{...props}
|
||||
components={{ ...components, ...(props.components || {}) }}
|
||||
/>
|
||||
)
|
||||
}
|
138
components/Nav.tsx
Normal file
138
components/Nav.tsx
Normal file
@ -0,0 +1,138 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Nav() {
|
||||
return (
|
||||
<section className="bg-gray-900">
|
||||
<nav className="container mx-auto px-4 relative px-6 py-6 flex justify-between items-center">
|
||||
<Link
|
||||
className="text-white text-3xl font-bold leading-none flex align-middle"
|
||||
href="/"
|
||||
>
|
||||
<img className="h-12 inline" src="/logo2.svg" alt="" width="auto" />
|
||||
<h1 className="ml-4 leading-loose">P4Pillon</h1>
|
||||
</Link>
|
||||
<div className="lg:hidden">
|
||||
<button className="navbar-burger flex items-center text-white p-3">
|
||||
<svg
|
||||
className="block h-4 w-4 fill-current"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Mobile menu</title>
|
||||
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<ul className="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
|
||||
<li>
|
||||
<Link
|
||||
className="text-sm text-gray-300 hover:text-white"
|
||||
href="/#concepts"
|
||||
>
|
||||
Concepts
|
||||
</Link>
|
||||
</li>
|
||||
<li className="text-gray-800">
|
||||
<svg
|
||||
className="w-4 h-4 current-fill"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
|
||||
/>
|
||||
</svg>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="text-sm text-white font-bold" href="/#projects">
|
||||
Projets
|
||||
</Link>
|
||||
</li>
|
||||
<li className="text-gray-800">
|
||||
<svg
|
||||
className="w-4 h-4 current-fill"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
|
||||
/>
|
||||
</svg>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
className="text-sm text-gray-300 hover:text-white"
|
||||
href="/#roadmap"
|
||||
>
|
||||
La SCIC
|
||||
</Link>
|
||||
</li>
|
||||
<li className="text-gray-800">
|
||||
<svg
|
||||
className="w-4 h-4 current-fill"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
|
||||
/>
|
||||
</svg>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
className="text-sm text-gray-300 hover:text-white"
|
||||
href="/blog"
|
||||
>
|
||||
Blog
|
||||
</Link>
|
||||
</li>
|
||||
{/* <li className="text-gray-800">
|
||||
<svg
|
||||
className="w-4 h-4 current-fill"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
|
||||
/>
|
||||
</svg>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="text-sm text-gray-300 hover:text-white"
|
||||
href="https://staging.p4pillon.org/annuaire/#45.55349,2.02698,10z"
|
||||
>
|
||||
Annuaire
|
||||
</a>
|
||||
</li> */}
|
||||
</ul>
|
||||
<a
|
||||
className="hidden lg:inline-block py-2 px-6 bg-pink-500 hover:bg-pink-600 text-sm text-white font-bold rounded-l-xl rounded-t-xl transition duration-200"
|
||||
href="https://apps.p4pillon.org/"
|
||||
>
|
||||
Se connecter
|
||||
</a>
|
||||
</nav>
|
||||
</section>
|
||||
);
|
||||
}
|
94
components/Newsletter.tsx
Normal file
94
components/Newsletter.tsx
Normal file
@ -0,0 +1,94 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Newsletter() {
|
||||
return (
|
||||
<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="flex flex-wrap items-center">
|
||||
{/* <div className='mb-4 w-full lg:w-auto lg:mr-8 text-center'>
|
||||
<div className='flex justify-center items-center p-5 mx-auto w-16 h-16 bg-gray-800 rounded'>
|
||||
<img
|
||||
className='h-12'
|
||||
src='atis-assets/logo/atis/atis-color-sign.svg'
|
||||
alt=''
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="mb-6 w-full lg:w-auto max-w-lg mx-auto lg:ml-0 mr-auto text-center lg:text-left">
|
||||
<h2 className="text-white text-4xl font-bold font-heading">
|
||||
Inscris-toi à notre lettre d'information
|
||||
</h2>
|
||||
<p className="text-gray-500">
|
||||
Pour retrouver l'essentiel de l'actualité de P4Pillon.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full lg:w-2/5">
|
||||
<form
|
||||
method="post"
|
||||
action="https://infolettre.p4pillon.org/subscription/form"
|
||||
>
|
||||
<input type="hidden" name="nonce" />
|
||||
<input
|
||||
type="checkbox"
|
||||
name="l"
|
||||
checked
|
||||
readOnly
|
||||
value="200ba3b3-60cd-4201-afcf-dee65ab57d6b"
|
||||
className="hidden"
|
||||
/>
|
||||
<div className="max-w-md lg:max-w-sm mx-auto flex flex-wrap items-center">
|
||||
<input
|
||||
className="flex-grow py-3 px-4 mr-4 text-xs rounded leading-loose"
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="bonjour@p4pillon.org"
|
||||
/>
|
||||
<button className="flex-none py-2 px-6 rounded-t-xl rounded-l-xl bg-pink-600 hover:bg-pink-700 text-white font-bold leading-loose transition duration-200">
|
||||
S'abonner
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</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>
|
||||
);
|
||||
}
|
39
components/Post.tsx
Normal file
39
components/Post.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function PostSectionBlogLightMono2() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<>
|
||||
<section className="py-10 lg:py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-2xl mx-auto mb-12 text-center">
|
||||
<a className="uppercase text-base lg:text-xl text-green-600 hover:text-green-700 hover:underline" href="#">Travel</a>
|
||||
<span className="text-base lg:text-xl text-gray-400">24 Jan, 2021</span>
|
||||
<div className="mt-2">
|
||||
<h2 className="mb-6 text-4xl lg:text-5xl font-bold font-heading">Curabitur vestibulum odio maximus ipsum</h2>
|
||||
<div className="flex justify-center">
|
||||
<div className="mr-4">
|
||||
<img className="w-12 h-12 object-cover object-top rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<a href="#">
|
||||
<h3 className="text-gray-500 hover:text-gray-600 hover:underline font-bold">Alice Bradley</h3>
|
||||
</a>
|
||||
<a href="#">
|
||||
<span className="text-xs text-green-600 font-bold">Author</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<p className="mb-6 leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo est eget consequat imperdiet. Suspendisse laoreet scelerisque lobortis. Mauris facilisis hendrerit nulla at vehicula. Suspendisse potenti. Ut in nulla a purus bibendum convallis. Suspendisse id nunc maximus, suscipit ante ac, vulputate massa. Sed ut nunc suscipit, bibendum arcu a, interdum elit. Nullam laoreet mollis dictum. Ut suscipit, magna at elementum iaculis, erat erat fermentum justo, sit amet ultrices enim leo sit amet purus. Nulla sed erat molestie, auctor mauris lobortis, iaculis justo.</p>
|
||||
<p className="leading-loose text-gray-500">Duis hendrerit dui in dui ornare luctus. Nullam gravida tincidunt lorem cursus suscipit. Integer scelerisque sem et sem porta, eu volutpat mi tempor. Duis interdum sodales lacus non tempor. Nam mattis, sapien a commodo ultrices, nunc orci tincidunt ante, tempus tempus turpis metus laoreet lacus. Praesent condimentum, arcu ut fringilla tincidunt, augue diam pretium augue, sit amet vestibulum nunc felis vel metus. Duis dolor nulla, pellentesque non ultrices ut, convallis eu felis. Duis luctus tempor arcu, vitae elementum massa porta non. Morbi aliquet, neque ut volutpat sodales, dui enim facilisis enim, ut dictum lacus neque in urna. Nam metus elit, ullamcorper pretium nisi at, aliquet gravida lectus. Nullam id lectus pellentesque, suscipit dolor eget, consequat velit. Pellentesque finibus commodo nisl, id interdum leo. Maecenas aliquam felis justo, ut sagittis nunc maximus ut.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
213
components/Posts.tsx
Normal file
213
components/Posts.tsx
Normal file
@ -0,0 +1,213 @@
|
||||
import Link from 'next/link'
|
||||
import { formatDate, getBlogPosts } from '@/app/blog/utils'
|
||||
|
||||
export function BlogPosts() {
|
||||
let allBlogs = getBlogPosts().sort((a, b) => {
|
||||
if (
|
||||
new Date(a.metadata.publishedAt) > new Date(b.metadata.publishedAt)
|
||||
) {
|
||||
return -1
|
||||
}
|
||||
return 1
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<section>
|
||||
<div className="skew skew-top mr-for-radius">
|
||||
<svg className="h-8 md:h-12 lg:h-20 w-full text-gray-50" 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-50" 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-50 radius-for-skewed">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="mb-16 flex flex-wrap items-center">
|
||||
<div className="w-full lg:w-1/2">
|
||||
<span className="text-green-600 font-bold">Nos dernières actualités !</span>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold font-heading">Postes proposés</h2>
|
||||
</div>
|
||||
{/* <div className="hidden lg:block text-right w-1/2"><a className="inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-green-600 hover:bg-green-700 text-gray-50 font-bold leading-loose transition duration-200" href="#">View More Articles</a></div> */}
|
||||
</div>
|
||||
<div className="flex flex-wrap -mx-3">
|
||||
{/* <div className="mb-8 lg:mb-0 w-full lg:w-1/4 px-3">
|
||||
<div className="py-4 px-6 bg-white shadow rounded">
|
||||
<h4 className="mb-4 text-gray-500 font-bold uppercase">Topics</h4>
|
||||
<ul>
|
||||
<li><a className="block py-2 px-3 mb-4 rounded text-green-600 font-bold bg-gray-50" href="#">Tous</a></li>
|
||||
<li><a className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50" href="#">Community</a></li>
|
||||
<li><a className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50" href="#">Design</a></li>
|
||||
<li><a className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50" href="#">Engineering</a></li>
|
||||
<li><a className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50" href="#">Marketplace</a></li>
|
||||
<li><a className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50" href="#">News</a></li>
|
||||
<li><a className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50" href="#">Culture</a></li>
|
||||
<li><a className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50" href="#">Product Updates</a></li>
|
||||
<li><a className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50" href="#">Trust & Security</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="w-full lg:w-3/4 px-3">
|
||||
{allBlogs.map((post) => (
|
||||
<div className="flex flex-wrap -mx-3 mb-8 lg:mb-6">
|
||||
<div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
|
||||
<img className="w-full h-full object-cover rounded" src="https://images.unsplash.com/photo-1552338804-c42590cb7b88?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1189&q=80" alt="" />
|
||||
</div>
|
||||
<div className="w-full lg:w-3/4 px-3">
|
||||
<Link key={post.slug} className="hover:underline" href={`/blog/${post.slug}`}>
|
||||
<h3 className="mb-1 text-2xl font-bold font-heading">{post.metadata.title}</h3>
|
||||
</Link>
|
||||
<div className="mb-2 flex items-center text-sm">
|
||||
{/* <a className="text-green-600 hover:underline hover:text-green-700" href="#">John Doe</a> */}
|
||||
{/* <span className="text-gray-400 mx-2">•</span> */}
|
||||
<span className="text-gray-400">{formatDate(post.metadata.publishedAt, false)}</span>
|
||||
</div>
|
||||
<p className="text-gray-500">{post.metadata.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{/* <div className="flex flex-wrap -mx-3 mb-8 lg:mb-6">
|
||||
<div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
|
||||
<img className="w-full h-full object-cover rounded" src="https://images.unsplash.com/photo-1552338804-c42590cb7b88?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1189&q=80" alt="" />
|
||||
</div>
|
||||
<div className="w-full lg:w-3/4 px-3">
|
||||
<a className="hover:underline" href="#">
|
||||
<h3 className="mb-1 text-2xl font-bold font-heading">Morbi scelerisque nulla et lectus dignissim eleifend nulla eu nulla a metus</h3>
|
||||
</a>
|
||||
<div className="mb-2 flex items-center text-sm">
|
||||
<a className="text-green-600 hover:underline hover:text-green-700" href="#">John Doe</a>
|
||||
<span className="text-gray-400 mx-2">•</span>
|
||||
<span className="text-gray-400">24 Jan, 2021</span>
|
||||
</div>
|
||||
<p className="text-gray-500">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap -mx-3 mb-8 lg:mb-6">
|
||||
<div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
|
||||
<img className="w-full h-full object-cover rounded" src="https://images.unsplash.com/photo-1578509395623-a34c97f15379?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=968&q=80" alt="" />
|
||||
</div>
|
||||
<div className="w-full lg:w-3/4 px-3">
|
||||
<a className="hover:underline" href="#">
|
||||
<h3 className="mb-1 text-2xl font-bold font-heading">Morbi scelerisque nulla et lectus dignissim eleifend nulla eu nulla a metus</h3>
|
||||
</a>
|
||||
<div className="mb-2 flex items-center text-sm">
|
||||
<a className="text-green-600 hover:underline hover:text-green-700" href="#">John Doe</a>
|
||||
<span className="text-gray-400 mx-2">•</span>
|
||||
<span className="text-gray-400">24 Jan, 2021</span>
|
||||
</div>
|
||||
<p className="text-gray-500">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap -mx-3 mb-8 lg:mb-6">
|
||||
<div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
|
||||
<img className="w-full h-full object-cover rounded" src="https://images.unsplash.com/photo-1551008475-4533d141425b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=968&q=80" alt="" />
|
||||
</div>
|
||||
<div className="w-full lg:w-3/4 px-3">
|
||||
<a className="hover:underline" href="#">
|
||||
<h3 className="mb-1 text-2xl font-bold font-heading">Morbi scelerisque nulla et lectus dignissim eleifend nulla eu nulla a metus</h3>
|
||||
</a>
|
||||
<div className="mb-2 flex items-center text-sm">
|
||||
<a className="text-green-600 hover:underline hover:text-green-700" href="#">John Doe</a>
|
||||
<span className="text-gray-400 mx-2">•</span>
|
||||
<span className="text-gray-400">24 Jan, 2021</span>
|
||||
</div>
|
||||
<p className="text-gray-500">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap -mx-3 mb-8 lg:mb-6">
|
||||
<div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
|
||||
<img className="w-full h-full object-cover rounded" src="https://images.unsplash.com/37/IHLjdHdzSvi0rgUMMlSK_TE3_0286.jpg?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1191&q=80" alt="" />
|
||||
</div>
|
||||
<div className="w-full lg:w-3/4 px-3">
|
||||
<a className="hover:underline" href="#">
|
||||
<h3 className="mb-1 text-2xl font-bold font-heading">Morbi scelerisque nulla et lectus dignissim eleifend nulla eu nulla a metus</h3>
|
||||
</a>
|
||||
<div className="mb-2 flex items-center text-sm">
|
||||
<a className="text-green-600 hover:underline hover:text-green-700" href="#">John Doe</a>
|
||||
<span className="text-gray-400 mx-2">•</span>
|
||||
<span className="text-gray-400">24 Jan, 2021</span>
|
||||
</div>
|
||||
<p className="text-gray-500">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap -mx-3 mb-8 lg:mb-6">
|
||||
<div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
|
||||
<img className="w-full h-full object-cover rounded" src="https://images.unsplash.com/photo-1552338804-c42590cb7b88?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1189&q=80" alt="" />
|
||||
</div>
|
||||
<div className="w-full lg:w-3/4 px-3">
|
||||
<a className="hover:underline" href="#">
|
||||
<h3 className="mb-1 text-2xl font-bold font-heading">Morbi scelerisque nulla et lectus dignissim eleifend nulla eu nulla a metus</h3>
|
||||
</a>
|
||||
<div className="mb-2 flex items-center text-sm">
|
||||
<a className="text-green-600 hover:underline hover:text-green-700" href="#">John Doe</a>
|
||||
<span className="text-gray-400 mx-2">•</span>
|
||||
<span className="text-gray-400">24 Jan, 2021</span>
|
||||
</div>
|
||||
<p className="text-gray-500">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum...</p>
|
||||
</div>
|
||||
</div> */}
|
||||
{/* <div className="flex flex-wrap -mx-3">
|
||||
<div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
|
||||
<img className="w-full h-full object-cover rounded" src="https://images.unsplash.com/photo-1578509395623-a34c97f15379?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=968&q=80" alt="" />
|
||||
</div>
|
||||
<div className="w-full lg:w-3/4 px-3">
|
||||
<a className="hover:underline" href="#">
|
||||
<h3 className="mb-1 text-2xl font-bold font-heading">Morbi scelerisque nulla et lectus dignissim eleifend nulla eu nulla a metus</h3>
|
||||
</a>
|
||||
<div className="mb-2 flex items-center text-sm">
|
||||
<a className="text-green-600 hover:underline hover:text-green-700" href="#">John Doe</a>
|
||||
<span className="text-gray-400 mx-2">•</span>
|
||||
<span className="text-gray-400">24 Jan, 2021</span>
|
||||
</div>
|
||||
<p className="text-gray-500">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum...</p>
|
||||
</div>
|
||||
</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-50" 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-50" viewBox="0 0 10 10" preserveAspectRatio="none">
|
||||
<polygon fill="currentColor" points="0 0 10 0 10 10" />
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
{/* <div>
|
||||
{allBlogs
|
||||
.sort((a, b) => {
|
||||
if (
|
||||
new Date(a.metadata.publishedAt) > new Date(b.metadata.publishedAt)
|
||||
) {
|
||||
return -1
|
||||
}
|
||||
return 1
|
||||
})
|
||||
.map((post) => (
|
||||
<Link
|
||||
key={post.slug}
|
||||
className="flex flex-col space-y-1 mb-4"
|
||||
href={`/blog/${post.slug}`}
|
||||
>
|
||||
<div className="w-full flex flex-col md:flex-row space-x-0 md:space-x-2">
|
||||
<p className="text-neutral-600 dark:text-neutral-400 w-[100px] tabular-nums">
|
||||
{formatDate(post.metadata.publishedAt, false)}
|
||||
</p>
|
||||
<p className="text-neutral-900 dark:text-neutral-100 tracking-tight">
|
||||
{post.metadata.title}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div> */}
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
174
components/Projects.tsx
Normal file
174
components/Projects.tsx
Normal file
@ -0,0 +1,174 @@
|
||||
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>
|
||||
);
|
||||
}
|
164
components/Roadmap.tsx
Normal file
164
components/Roadmap.tsx
Normal file
@ -0,0 +1,164 @@
|
||||
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>
|
||||
);
|
||||
}
|
0
components/Testimonial.tsx
Normal file
0
components/Testimonial.tsx
Normal file
Reference in New Issue
Block a user