186 lines
7.6 KiB
TypeScript
186 lines
7.6 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
}
|