forked from jool-int/jool-int-front
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
263 lines
13 KiB
263 lines
13 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>JooL International</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<style>
|
|
:root {
|
|
--bright-red: #ED1250;
|
|
--jool-light-green: #55AAA0;
|
|
}
|
|
|
|
.shape-blob {
|
|
background: var(--jool-light-green);
|
|
height: 200px;
|
|
width: 200px;
|
|
border-radius: 30% 50% 20% 40%;
|
|
animation:
|
|
transform 20s ease-in-out infinite both alternate,
|
|
movement_one 40s ease-in-out infinite both;
|
|
opacity: .7;
|
|
position: absolute;
|
|
left: 70%;
|
|
top: 50%;
|
|
}
|
|
|
|
.shape-blob.small {
|
|
height: 100px;
|
|
width: 100px;
|
|
}
|
|
|
|
|
|
.shape-blob.two {
|
|
|
|
/* transform: rotate(-180deg); */
|
|
animation: transform 30s ease-in-out infinite both alternate;
|
|
/* movement_two 60s ease-in-out infinite both; */
|
|
}
|
|
|
|
@keyframes transform {
|
|
|
|
0%,
|
|
100% {
|
|
border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%;
|
|
}
|
|
|
|
20% {
|
|
border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%;
|
|
}
|
|
|
|
40% {
|
|
border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%;
|
|
}
|
|
|
|
60% {
|
|
border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%;
|
|
}
|
|
|
|
80% {
|
|
border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes movement_one {
|
|
|
|
0%,
|
|
100% {
|
|
transform: none;
|
|
}
|
|
|
|
50% {
|
|
transform: translate(50%, 20%) rotateY(10deg) scale(1.2);
|
|
}
|
|
}
|
|
|
|
@keyframes movement_two {
|
|
|
|
0%,
|
|
500% {
|
|
transform: none;
|
|
}
|
|
|
|
50% {
|
|
transform: translate(-50%, 20%) rotate(-200deg) scale(1.2);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-gray-100">
|
|
|
|
<!-- Challenge section -->
|
|
<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-6xl 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 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="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 text-center sm:text-left">Cetter perte est due à des agus de confiance, un manque de visibilité du domaine agricole et un manque de performance des actueurs du secteur.
|
|
<a href="" class="text-teal-500 hover:text-teal-700">JooL International </a>
|
|
vous propose une palette de produits et solutions afin de relever ce <a href="" class="text-teal-500 hover:text-teal-700">challenge</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Pourquoi nous section -->
|
|
<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 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 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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JooL ID -->
|
|
<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
|
|
organisations agricoles mais surtout pour digitaliser l'agriculture africaine.</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="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_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="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 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 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>
|
|
<!-- -->
|
|
<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 Box -->
|
|
<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 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="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="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 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 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 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="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 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="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>
|
|
<img class="absolute bottom-0" src="/dist/assets/svg/BgProduits.svg" alt="">
|
|
<!-- -->
|
|
</section>
|
|
|
|
|
|
<!-- Blog et actu -->
|
|
<section>
|
|
<!-- <h2>Blog & actu</h2> -->
|
|
</section>
|
|
|
|
<!-- -->
|
|
<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 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>
|
|
<div class="flex gap-4">
|
|
<img src="dist/assets/svg/facebook_white.svg" alt="">
|
|
<img src="dist/assets/svg/instagram_white.svg" alt="">
|
|
<img src="dist/assets/svg/linkedin_white.svg" alt="">
|
|
<img src="dist/assets/svg/twitter_white.svg" alt="">
|
|
<img src="dist/assets/svg/youtube_white.svg" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
|
|
</html>
|