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.
266 lines
12 KiB
266 lines
12 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.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.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="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="">
|
|
|
|
<!-- -->
|
|
<div class="flex items-center">
|
|
<div class="relative 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">
|
|
<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.
|
|
<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-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>
|
|
<img class="w-96 mx-auto" src="/dist/assets/img/drawable-xxxhdpi/Drone.png" alt="">
|
|
|
|
<div class=" md:w-1/2 mx-auto">
|
|
<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="py-10 flex justify-end items-center gap-3">
|
|
<div class="w-2/3 flex flex-col justify-between items-start">
|
|
<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="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>
|
|
</div>
|
|
</div>
|
|
<!-- JooL Monitor -->
|
|
|
|
<div class="py-10 flex justify-start items-center gap-3">
|
|
<div class="relative w-auto 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>
|
|
</div>
|
|
<div class="w-2/3 flex flex-col justify-between items-end text-right">
|
|
<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="py-10 flex justify-end items-center gap-3">
|
|
<div class="w-2/3 flex flex-col justify-between items-start">
|
|
<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>
|
|
<!-- -->
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JooL Copter -->
|
|
|
|
<div class="py-10 flex justify-start items-center gap-3">
|
|
<div class="relative w-auto 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>
|
|
</div>
|
|
<div class="w-2/3 flex flex-col justify-between items-end text-right">
|
|
<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>
|
|
<!-- -->
|
|
<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">
|
|
<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>
|
|
<!-- -->
|
|
<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>
|
|
</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 justify-between items-center">
|
|
<div class="flex 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>
|