@ -28,15 +28,12 @@
top: 50%; top: 50%;
} }
.shape-blob.one { .shape-blob.small {
height: 500px; height: 100px;
width: 500px; width: 100px;
left: -200px;
top: -150px;
transform: rotate(-180deg);
animation: transform 30s ease-in-out infinite both alternate, movement_two 60s ease-in-out infinite both;
} }
.shape-blob.two { .shape-blob.two {
/* transform: rotate(-180deg); */ /* transform: rotate(-180deg); */
@ -98,19 +95,20 @@
< body class = "bg-gray-100" > < body class = "bg-gray-100" >
<!-- Challenge section --> <!-- Challenge section -->
< section class = "relative py-20" > < section class = "container relative mx-auto " >
< div class = "mx-auto md:w-11/12 lg:w-10/12 xl:w-9/12 2xl:w-8/12" > < div
< h2 class = "text-7xl font-bold text-neutral-300 tracking-widest" > CHALLENGES< / h2 > class="py-20 mx-auto w-full md:w-11/12 lg:w-10/12 xl:w-9/12 2xl:w-8/12 overflow-hidden sm:overflow-y-visible md:overflow-x-visible">
< img class = "w-96 ml-auto -mt-28 -mb-32" src = "/dist/assets/svg/drone_outline.svg" alt = "" > < h2 class = "text-4xl sm:text-7xl md:text-7xl -mb-10 sm:-mb-24 md:mb-0 font-bold text-neutral-300 tracking-widest" > CHALLENGES< / h2 >
< img class = "w-full md:w-96 ml-20 md:ml-auto -mb-44 sm:-mb-64 md:-mt-28 md:-mb-32"
src="/dist/assets/svg/drone_outline.svg" alt="">
<!-- --> <!-- -->
< div class = "flex items-center" > < div class = "flex flex-col md:flex-row items-center" >
< div class = "relative w-1/2 md:ml-10" > < div class = "relative md: w-1/2 md:ml-10" >
< img src = "dist/assets/img/drawable-xxxhdpi/video_poster.png" alt = "" > < img src = "dist/assets/img/drawable-xxxhdpi/video_poster.png" alt = "" >
< img class = "w-32 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" < img class = "w-32 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
src="dist/assets/svg/play_icon.svg" alt=""> src="dist/assets/svg/play_icon.svg" alt="">
< / div > < / div >
< div class = "w-1/2 bg-white p-7 z-10 -ml-32 shadow-md" > < div class = "mx-7 sm:mx-16 md:mx-0 -mt-10 sm:-mt-16 md:mt-0 md: w-1/2 bg-white pt-10 md:pt-7 p -7 z-10 md: -ml-32 shadow-md" >
< h6 class = "font-medium leading-tight mb-2 text-lg" > Plus de 95% des investisseurs en agriculture perdent leur argent.< / h6 > < h6 class = "font-medium leading-tight mb-2 text-lg" > Plus de 95% des investisseurs en agriculture perdent leur argent.< / h6 >
< p class = "text-slate-600 leading-tight text-sm" > Cetter perte est due à des agus de confiance, un manque de visibilité du domaine agricole et un manque de performance des actueurs du secteur. < p class = "text-slate-600 leading-tight text-sm" > Cetter perte est due à des agus de confiance, un manque de visibilité du domaine agricole et un manque de performance des actueurs du secteur.
@ -122,13 +120,22 @@
< / div > < / div >
< / section > < / section >
<!-- Pourquoi nous section --> <!-- Pourquoi nous section -->
< section class = "relative pb-64" > < section class = "relative pb-20 md:pb- 64" >
< div class = "mx-auto md:w-11/12 lg:w-10/12 xl:w-9/12 2xl:w-8/12" > < div class = "mx-auto md:w-11/12 lg:w-10/12 xl:w-9/12 2xl:w-8/12" >
< div class = "text-center py-10 relative" > < div class = "text-center py-10 relative mx-3 md:mx-0" >
< h2 class = "text-7xl font-bold text-neutral-300 tracking-widest -z-10 -mb-10" > POURQUOI NOUS ?< / h2 > < h2 class = "text-5xl md:text-7xl font-bold text-neutral-300 tracking-widest -z-10 -mb-36 md:-mb-10" >
POURQUOI
NOUS
< br class = "md:hidden" / >
< br class = "md:hidden" / >
< span class = "md:hidden" >
< br / >
CHOISIR
< / span >
?< / h2 >
< img class = "w-96 mx-auto" src = "/dist/assets/img/drawable-xxxhdpi/Drone.png" alt = "" > < img class = "w-96 mx-auto" src = "/dist/assets/img/drawable-xxxhdpi/Drone.png" alt = "" >
< div class = " md:w-1/2 mx-auto" > < div class = " md:w-1/2 mx-auto mt-10 md:mt-3 " >
< h3 class = "text-2xl font-medium text-slate-800" > LES DRONEURS IVOIRIENS< / h3 > < h3 class = "text-2xl font-medium text-slate-800" > LES DRONEURS IVOIRIENS< / h3 >
< p class = "uppercase text-sm leading-tight font-medium text-neutral-500" > JooL < p class = "uppercase text-sm leading-tight font-medium text-neutral-500" > JooL
International est une startup ivoirienne spécialisée dans la technologie des drones< / p > International est une startup ivoirienne spécialisée dans la technologie des drones< / p >
@ -136,8 +143,8 @@
< / div > < / div >
<!-- JooL ID --> <!-- JooL ID -->
< div class = "py-10 flex justify-end items-center gap-3" > < div class = "relative py-10 sm:py-32 md:py-20 flex justify-between md: justify-end items-center gap-3" >
< div class = "w-2/3 flex flex-col justify-between items-start" > < div class = "w-2/3 flex flex-col justify-between items-start p-3 md:p-0 mx-2 md:mx-0 bg-white md:bg-transparent shadow md:shadow-none " >
< h4 class = "font-medium mb-2 tracking-widest" > JooL ID< / h4 > < h4 class = "font-medium mb-2 tracking-widest" > JooL ID< / h4 >
< p class = "leading-tight text-sm text-neutral-600" > Notre plateforme propriétaire experte < p class = "leading-tight text-sm text-neutral-600" > Notre plateforme propriétaire experte
d'identification, de collecte et de traitement de données de planteurs, pour mieux gérer les d'identification, de collecte et de traitement de données de planteurs, pour mieux gérer les
@ -146,21 +153,22 @@
< a href = "" < a href = ""
class="mt-8 inline-block uppercase text-center text-xs text-neutral-400 py-1.5 px-6 border border-neutral-300 bg-white rounded-sm">Découvrir< / a > class="mt-8 inline-block uppercase text-center text-xs text-neutral-400 py-1.5 px-6 border border-neutral-300 bg-white rounded-sm">Découvrir< / a >
< / div > < / div >
< div class = "relative w-auto" > < div class = "absolute bottom-0 right-0 -z-20 md: relative overflow-hidden sm:overflow-visibl e w-auto" >
< img class = "h-64 -z-10 -ml-10 " src = "/dist/assets/svg/jool_id.svg" alt = "" > < img class = "h-64 -z-10 md: -ml-10 " src = "/dist/assets/svg/jool_id.svg" alt = "" >
< div class = "-z-10 shape-blob left-10 top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-64 two" > < div class = "-z-10 shape-blob left-10 md: top-1/2 transform -translate-y-2/3 md: -translate-y-1/2 -translate-x-1/2 w-64 two" >
< / div > < / div >
< / div > < / div >
< / div > < / div >
<!-- JooL Monitor --> <!-- JooL Monitor -->
< div class = "py-10 flex justify-start items-center gap-3" > < div class = "relative py-10 sm:py-32 md:py-20 flex justify-end md: justify-start items-center gap-3" >
< div class = "relative w-auto w-3/12" > < div class = "absolute bottom-0 left-0 -z-20 md: relative overflow-hidden sm:overflow-visible w-auto md: w-3/12" >
< img class = " -z-10 " src = "/dist/assets/svg/jool_monitor.svg" alt = "" > < img class = " -z-10 " src = "/dist/assets/svg/jool_monitor.svg" alt = "" >
< div class = "-z-10 shape-blob right-10 top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-64 two" > < div class = "-z-10 shape-blob md: right-10 md: top-1/2 transform -translate-y-2/3 md: -translate-y-1/2 -translate-x-1/2 w-64 two" >
< / div > < / div >
< / div > < / div >
< div class = "w-2/3 flex flex-col justify-between items-end text-right" > < div
class="w-2/3 flex flex-col justify-between items-end text-right p-3 md:p-0 mx-2 md:mx-0 bg-white md:bg-transparent shadow md:shadow-none">
< h4 class = "font-medium mb-2 tracking-widest" > JooL Monitor< / h4 > < h4 class = "font-medium mb-2 tracking-widest" > JooL Monitor< / h4 >
< p class = "leading-tight text-sm text-neutral-600" > Une plateforme ergonomique, intuitive et propriétaire experte dans le traitement de données agricoles collectées par drone. Elle permet de délimiter les parcelles agricoles, compter les plants, obtenir une vue du ciel des exploitations et analyser la santé des plantes.< / p > < p class = "leading-tight text-sm text-neutral-600" > Une plateforme ergonomique, intuitive et propriétaire experte dans le traitement de données agricoles collectées par drone. Elle permet de délimiter les parcelles agricoles, compter les plants, obtenir une vue du ciel des exploitations et analyser la santé des plantes.< / p >
<!-- --> <!-- -->
@ -170,66 +178,55 @@
< / div > < / div >
<!-- --> <!-- -->
<!-- JooL Box --> <!-- JooL Box -->
< div class = "relative py-10 sm:py-32 md:py-20 flex justify-between md:justify-end items-center gap-3" >
< div class = "py-10 flex justify-end items-center gap-3" > < div class = "w-2/3 flex flex-col justify-between items-start p-3 md:p-0 mx-2 md:mx-0 bg-white md:bg-transparent shadow md:shadow-none" >
< div class = "w-2/3 flex flex-col justify-between items-start" >
< h4 class = "font-medium mb-2 tracking-widest" > JooL Box< / h4 > < h4 class = "font-medium mb-2 tracking-widest" > JooL Box< / h4 >
< p class = "leading-tight text-sm text-neutral-600" > Notre concept de station d'accueil est < p class = "leading-tight text-sm text-neutral-600" > Notre concept de station d'accueil et d'automatisation du processus d'exploitation des drones. Rachat de Drone Hive (une startup française, faisant de nous la première startup ivoirienne à racheter une startup française) nous faisant gagner 8 ans de R& D.< / p >
d'automatisation du processus d'exploitation des drones.
Rachat de Drone Hive (une startup française, faisant de nous la premi!re startup ivoirienne à
racheter une startup française) nous faisant gagner 8 ands de R& D.< / p >
<!-- --> <!-- -->
< a href = "" < a href = ""
class="mt-8 inline-block uppercase text-center text-xs text-neutral-400 py-1.5 px-6 border border-neutral-300 bg-white rounded-sm">Découvrir< / a > class="mt-8 inline-block uppercase text-center text-xs text-neutral-400 py-1.5 px-6 border border-neutral-300 bg-white rounded-sm">Découvrir< / a >
< / div > < / div >
< div class = "relative w-auto w-3/12 " > < div class = "absolute bottom-0 right-0 -z-20 md: relative overflow-hidden sm:overflow-visible w-auto" >
< img class = " -z-10 " src = "/dist/assets/svg/jool_box.svg" alt = "" > < img class = "h-64 -z-10 md:-ml -10 " src = "/dist/assets/svg/jool_box.svg" alt = "" >
< div class = "-z-10 shape-blob left-10 top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-64 two" > < div class = "-z-10 shape-blob left-10 md: top-1/2 transform -translate-y-2/3 md: -translate-y-1/2 -translate-x-1/2 w-64 two" >
< / div > < / div >
< / div > < / div >
< / div > < / div >
<!-- JooL Copter --> <!-- JooL Copter -->
< div class = "py-10 flex justify-start items-center gap-3" > < div class = "relative py-10 sm:py-32 md:py-20 flex justify-end md: justify-start items-center gap-3" >
< div class = "relative w-auto w-3/12" > < div class = "absolute bottom-0 left-0 -z-20 md: relative overflow-hidden sm:overflow-visible w-auto md: w-3/12" >
< img class = " -z-10 " src = "/dist/assets/svg/jool_coopter.svg" alt = "" > < img class = " -z-10 " src = "/dist/assets/svg/jool_coopter.svg" alt = "" >
< div class = "-z-10 shape-blob right-10 top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-64 two" > < div class = "-z-10 shape-blob md: right-10 md: top-1/2 transform -translate-y-2/3 md: -translate-y-1/2 -translate-x-1/2 w-64 two" >
< / div > < / div >
< / div > < / div >
< div class = "w-2/3 flex flex-col justify-between items-end text-right" > < div
class="w-2/3 flex flex-col justify-between items-end text-right p-3 md:p-0 mx-2 md:mx-0 bg-white md:bg-transparent shadow md:shadow-none">
< h4 class = "font-medium mb-2 tracking-widest" > JooL Copter< / h4 > < h4 class = "font-medium mb-2 tracking-widest" > JooL Copter< / h4 >
< p class = "leading-tight text-sm text-neutral-600" > Notre laboratoire de réparation et de fabrication < p class = "leading-tight text-sm text-neutral-600" > Notre laboratoire de réparation et de fabrication de drones local pour fournir des drones en bon état adaptés aux réalités locales.< / p >
de drones local pour fournir des drones en bon
état
adaptés aux réalités localse.< / p >
<!-- --> <!-- -->
< a href = "" < a href = ""
class="mt-8 inline-block uppercase text-center text-xs text-neutral-400 py-1.5 px-6 border border-neutral-300 bg-white rounded-sm">Découvrir< / a > class="mt-8 inline-block uppercase text-center text-xs text-neutral-400 py-1.5 px-6 border border-neutral-300 bg-white rounded-sm">Découvrir< / a >
< / div > < / div >
< / div > < / div >
<!-- --> <!-- -->
<!-- -->
<!-- JooL Academy --> <!-- JooL Academy -->
< div class = "relative py-10 sm:py-32 md:py-20 flex justify-between md:justify-end items-center gap-3" >
< div class = "py-10 flex justify-end items-center gap-3" > < div
< div class = "w-2/3 flex flex-col justify-between items-start" > class= "w-2/3 flex flex-col justify-between items-start p-3 md:p-0 mx-2 md:mx-0 bg-white md:bg-transparent shadow md:shadow-none">
< h4 class = "font-medium mb-2 tracking-widest" > JooL Academy< / h4 > < h4 class = "font-medium mb-2 tracking-widest" > JooL Academy< / h4 >
< p class = "leading-tight text-sm text-neutral-600" > Notre académie de formation de télépilote < p class = "leading-tight text-sm text-neutral-600" > Notre académie de formation de télépilote africain. Elle permettra de créer de nombreux emplois et des vocations.< / p >
africain. Elle permettra de créer de nombreux empoils et des vocations.< / p >
<!-- --> <!-- -->
< a href = "" < a href = ""
class="mt-8 inline-block uppercase text-center text-xs text-neutral-400 py-1.5 px-6 border border-neutral-300 bg-white rounded-sm">Découvrir< / a > class="mt-8 inline-block uppercase text-center text-xs text-neutral-400 py-1.5 px-6 border border-neutral-300 bg-white rounded-sm">Découvrir< / a >
< / div > < / div >
< div class = "relative w-auto w-3/12" > < div class = "absolute bottom-0 right-0 -z-20 md:relative overflow-hidden sm:overflow-visible w-auto" >
< img class = " -z-10 " src = "/dist/assets/svg/jool_academy.svg" alt = "" > < img class = "h-64 -z-10 md:-ml-10 " src = "/dist/assets/svg/jool_box.svg" alt = "" >
< div class = "-z-10 shape-blob left-10 top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-64 two" > < div
class="-z-10 shape-blob left-10 md:top-1/2 transform -translate-y-2/3 md:-translate-y-1/2 -translate-x-1/2 w-64 two">
< / div > < / div >
< / div > < / div >
< / div > < / div >
<!-- -->
< / div > < / div >
@ -246,8 +243,8 @@
<!-- --> <!-- -->
< footer class = "bg-teal-500 py-10" > < footer class = "bg-teal-500 py-10" >
< div class = "mx-auto md:w-11/12 lg:w-10/12 xl:w-9/12 2xl:w-8/12" > < div class = "mx-auto md:w-11/12 lg:w-10/12 xl:w-9/12 2xl:w-8/12" >
< div class = "flex justify-between items-center" > < div class = "flex flex-col gap-3 md:flex-row justify-between items-center" >
< div class = "flex gap-5 items-center text-white " > < div class = "flex flex-col md:flex-row gap-5 items-center text-white " >
< img src = "dist/assets/svg/JOOL intl_logo final-white.svg" alt = "" > < img src = "dist/assets/svg/JOOL intl_logo final-white.svg" alt = "" >
Copyright 2021 | Tous droits réservés Copyright 2021 | Tous droits réservés
< / div > < / div >
Hosanna Amane
4 years ago