@ -28,15 +28,12 @@
top: 50%;
}
.shape-blob.one {
height: 500px;
width: 500px;
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.small {
height: 100px;
width: 100px;
}
.shape-blob.two {
/* transform: rotate(-180deg); */
@ -98,19 +95,20 @@
< body class = "bg-gray-100" >
<!-- Challenge section -->
< section class = "relative py-20" >
< div class = "mx-auto md:w-11/12 lg:w-10/12 xl:w-9/12 2xl:w-8/12" >
< h2 class = "text-7xl font-bold text-neutral-300 tracking-widest" > CHALLENGES< / h2 >
< img class = "w-96 ml-auto -mt-28 -mb-32" src = "/dist/assets/svg/drone_outline.svg" alt = "" >
< section class = "container relative mx-auto " >
< div
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">
< 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 = "relative w-1/2 md:ml-10" >
< div class = "flex flex-col md:flex-row items-center" >
< div class = "relative md: w-1/2 md:ml-10" >
< 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"
src="dist/assets/svg/play_icon.svg" alt="">
< / 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 >
< 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 >
< / 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 = "text-center py-10 relative" >
< h2 class = "text-7xl font-bold text-neutral-300 tracking-widest -z-10 -mb-10" > POURQUOI NOUS ?< / h2 >
< div class = "text-center py-10 relative mx-3 md:mx-0" >
< 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 = "" >
< 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 >
< 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 >
@ -136,8 +143,8 @@
< / div >
<!-- JooL ID -->
< div class = "py-10 flex justify-end items-center gap-3" >
< div class = "w-2/3 flex flex-col justify-between items-start" >
< 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 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 >
< 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
@ -146,21 +153,22 @@
< 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 >
< / div >
< div class = "relative w-auto" >
< img class = "h-64 -z-10 -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 = "absolute bottom-0 right-0 -z-20 md: relative overflow-hidden sm:overflow-visibl e w-auto" >
< 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 md: top-1/2 transform -translate-y-2/3 md: -translate-y-1/2 -translate-x-1/2 w-64 two" >
< / div >
< / div >
< / div >
<!-- JooL Monitor -->
< div class = "py-10 flex justify-start items-center gap-3" >
< div class = "relative w-auto w-3/12" >
< div class = "relative py-10 sm:py-32 md:py-20 flex justify-end md: justify-start items-center gap-3" >
< 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 = "" >
< 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 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 >
< 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 >
<!-- -->
<!-- JooL Box -->
< div class = "py-10 flex justify-end items-center gap-3" >
< div class = "w-2/3 flex flex-col justify-between items-start" >
< 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 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 Box< / h4 >
< p class = "leading-tight text-sm text-neutral-600" > Notre concept de station d'accueil est
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 >
< 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 >
<!-- -->
< 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 >
< / div >
< div class = "relative w-auto w-3/12 " >
< img class = " -z-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 = "absolute bottom-0 right-0 -z-20 md: relative overflow-hidden sm:overflow-visible w-auto" >
< 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 md: top-1/2 transform -translate-y-2/3 md: -translate-y-1/2 -translate-x-1/2 w-64 two" >
< / div >
< / div >
< / div >
<!-- JooL Copter -->
< div class = "py-10 flex justify-start items-center gap-3" >
< div class = "relative w-auto w-3/12" >
< div class = "relative py-10 sm:py-32 md:py-20 flex justify-end md: justify-start items-center gap-3" >
< 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 = "" >
< 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 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 >
< 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 localse.< / p >
< 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 >
<!-- -->
< 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 >
< / div >
< / div >
<!-- -->
<!-- -->
<!-- JooL Academy -->
< div class = "py-10 flex justify-end items-center gap-3" >
< div class = "w-2/3 flex flex-col justify-between items-start" >
< 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 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 >
< 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 empoils et des vocations.< / p >
< 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 >
<!-- -->
< 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 >
< / div >
< div class = "relative w-auto w-3/12" >
< img class = " -z-10 " src = "/dist/assets/svg/jool_academy.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 = "absolute bottom-0 right-0 -z-20 md:relative overflow-hidden sm:overflow-visible w-auto" >
< 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 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 >
@ -246,8 +243,8 @@
<!-- -->
< 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 = "flex justify-between items-center" >
< div class = "flex gap-5 items-center text-white " >
< div class = "flex flex-col gap-3 md:flex-row justify-between items-center" >
< 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 = "" >
Copyright 2021 | Tous droits réservés
< / div >
Hosanna Amane
4 years ago