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.
223 lines
9.1 KiB
223 lines
9.1 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">
|
|
|
|
|
|
<section class="relative pb-72">
|
|
<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-xl font-medium text-slate-900">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">JooL ID</h4>
|
|
<p class="leading-tight text-sm text-neutral-500">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">JooL Monitor</h4>
|
|
<p class="leading-tight text-sm text-neutral-500">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">JooL Box</h4>
|
|
<p class="leading-tight text-sm text-neutral-500">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">JooL Copter</h4>
|
|
<p class="leading-tight text-sm text-neutral-500">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">JooL Academy</h4>
|
|
<p class="leading-tight text-sm text-neutral-500">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>
|
|
</body>
|
|
|
|
</html>
|