Files
JooL_website/templates/core/about.html
2026-05-15 11:20:16 +00:00

371 lines
18 KiB
HTML

{% extends "base.html" %}
{% load static %}
{% block title %}À propos — Jool International, pionniers de l'AgriTech africaine{% endblock %}
{% block title_plain %}À propos — Jool International, pionniers de l'AgriTech africaine{% endblock %}
{% block meta_description %}Découvrez Jool International : notre mission, notre équipe et notre vision pour transformer l'agriculture africaine grâce aux technologies satellite, drone et IA. Basés à Abidjan, Côte d'Ivoire.{% endblock %}
{% block og_title %}À propos de Jool International — AgriTech made in Africa{% endblock %}
{% block og_description %}Notre mission : rendre l'agriculture de précision accessible à tous les acteurs de l'agri-industrie africaine. Satellite, drone, IA et digitalisation.{% endblock %}
{% block twitter_title %}À propos de Jool International — AgriTech made in Africa{% endblock %}
{% block twitter_description %}Notre mission : rendre l'agriculture de précision accessible à tous les acteurs de l'agri-industrie africaine.{% endblock %}
{% block schema_org %}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "AboutPage",
"name": "À propos de Jool International",
"url": "https://jool-international.com/a-propos/",
"description": "Jool International est une entreprise AgriTech basée à Abidjan qui développe des solutions d'intelligence artificielle, de télédétection et de digitalisation pour l'agriculture africaine.",
"publisher": {
"@type": "Organization",
"name": "Jool International",
"url": "https://jool-international.com",
"address": {
"@type": "PostalAddress",
"addressLocality": "Abidjan",
"addressCountry": "CI"
}
}
}
</script>
{% endblock %}
{% block extra_css %}
<style>
/* ─── About Hero ─────────────────────────── */
.about-hero {
background: var(--dark-bg);
padding: 96px 64px 80px;
text-align: center;
}
.about-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
background: rgba(255,255,255,.1); color: rgba(255,255,255,.75);
padding: 5px 16px; border-radius: 100px; margin-bottom: 24px;
}
.about-hero h1 {
font-family: var(--display); font-weight: 900; font-style: italic;
font-size: clamp(2.6rem, 5vw, 4rem); letter-spacing: -0.03em;
color: var(--white); line-height: 1.05; margin-bottom: 24px;
}
.about-hero h1 em { font-style: normal; color: var(--accent); }
.about-hero p {
font-size: 18px; color: rgba(255,255,255,.65); line-height: 1.75;
font-weight: 300; max-width: 680px; margin: 0 auto;
}
/* ─── Mission ────────────────────────────── */
.about-mission {
padding: 88px 64px;
display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
max-width: 1200px; margin: 0 auto;
}
.about-mission h2 {
font-family: var(--display); font-weight: 900; font-style: italic;
font-size: clamp(2rem, 3.5vw, 2.8rem); letter-spacing: -0.03em;
color: var(--black); margin-bottom: 20px;
}
.about-mission h2 em { font-style: normal; color: var(--teal); }
.about-mission p {
font-size: 16px; color: #555; line-height: 1.8; font-weight: 300; margin-bottom: 18px;
}
.mission-values { display: flex; flex-direction: column; gap: 16px; }
.mission-value {
display: flex; align-items: flex-start; gap: 14px;
background: var(--teal-pale); border-radius: 14px; padding: 18px 20px;
}
.mission-value .material-icons-round { color: var(--teal); font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.mission-value-body h4 { font-weight: 700; font-size: 15px; color: var(--black); margin-bottom: 4px; }
.mission-value-body p { font-size: 14px; color: #666; line-height: 1.6; font-weight: 300; margin: 0; }
/* ─── Stats strip ────────────────────────── */
.about-stats {
background: var(--teal);
padding: 56px 64px;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 24px; text-align: center;
}
.about-stat-val {
font-family: var(--display); font-weight: 900; font-size: 2.6rem;
color: var(--white); letter-spacing: -.04em;
}
.about-stat-label { font-size: 14px; color: rgba(255,255,255,.7); margin-top: 6px; font-weight: 300; }
/* ─── Produits ───────────────────────────── */
.about-products {
padding: 88px 64px; background: var(--gray-2);
}
.about-products-inner { max-width: 1200px; margin: 0 auto; }
.about-products h2 {
font-family: var(--display); font-weight: 900; font-style: italic;
font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.03em;
color: var(--black); margin-bottom: 48px; text-align: center;
}
.products-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.about-product-card {
background: var(--white); border-radius: 20px; padding: 36px 28px;
border: 1.5px solid var(--gray); transition: border-color .2s, box-shadow .2s, transform .2s;
display: flex; flex-direction: column;
}
.about-product-card:hover {
border-color: var(--teal); box-shadow: 0 8px 32px rgba(25,112,97,.12); transform: translateY(-3px);
}
.apc-icon {
width: 56px; height: 56px; background: var(--teal-pale); border-radius: 16px;
display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.apc-icon .material-icons-round { color: var(--teal); font-size: 28px; }
.apc-title { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--black); margin-bottom: 10px; }
.apc-desc { font-size: 14px; color: #666; line-height: 1.65; font-weight: 300; flex: 1; margin-bottom: 24px; }
.apc-link {
display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 700; color: var(--teal); transition: gap .15s;
}
.apc-link:hover { gap: 10px; }
/* ─── Equipe ─────────────────────────────── */
.about-team { padding: 88px 64px; background: var(--white); }
.about-team-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.about-team h2 {
font-family: var(--display); font-weight: 900; font-style: italic;
font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.03em;
color: var(--black); margin-bottom: 12px;
}
.about-team > .about-team-inner > p {
font-size: 16px; color: #666; font-weight: 300; margin-bottom: 56px;
}
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.team-card { background: var(--gray-2); border-radius: 20px; padding: 32px 24px; text-align: center; }
.team-avatar {
width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 16px;
background: var(--teal); display: flex; align-items: center; justify-content: center;
font-size: 2rem; color: white;
}
.team-name { font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--black); margin-bottom: 4px; }
.team-role { font-size: 13px; color: var(--teal); font-weight: 600; margin-bottom: 12px; }
.team-bio { font-size: 13px; color: #777; line-height: 1.6; font-weight: 300; }
/* ─── Localisation ───────────────────────── */
.about-location {
padding: 88px 64px; background: var(--dark-bg);
display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.about-location h2 {
font-family: var(--display); font-weight: 900; font-style: italic;
font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.03em;
color: var(--white); margin-bottom: 20px;
}
.about-location h2 em { font-style: normal; color: var(--accent); }
.about-location p { font-size: 16px; color: rgba(255,255,255,.6); line-height: 1.75; font-weight: 300; margin-bottom: 16px; }
.location-item {
display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
font-size: 15px; color: rgba(255,255,255,.75);
}
.location-item .material-icons-round { color: var(--accent); font-size: 20px; }
.location-map {
border-radius: 20px; height: 380px;
overflow: hidden; border: 1px solid rgba(255,255,255,.1);
}
.location-map iframe { display: block; }
/* ─── CTA ────────────────────────────────── */
.about-cta { padding: 88px 64px; background: var(--teal-pale); text-align: center; }
.about-cta h2 {
font-family: var(--display); font-weight: 900; font-style: italic;
font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.03em;
color: var(--black); margin-bottom: 16px;
}
.about-cta p { font-size: 16px; color: #666; font-weight: 300; margin-bottom: 32px; }
.btn-cta-lg {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--display); font-weight: 800; font-size: 16px;
padding: 16px 36px; border-radius: 100px; background: var(--teal); color: var(--white);
transition: filter .15s, transform .12s;
}
.btn-cta-lg:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn-outline-about {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--body); font-weight: 700; font-size: 15px;
padding: 14px 30px; border-radius: 100px;
border: 1.5px solid var(--teal); color: var(--teal);
transition: all .15s; margin-left: 16px;
}
.btn-outline-about:hover { background: var(--teal); color: var(--white); }
@media (max-width: 768px) {
.about-hero, .about-mission, .about-stats, .about-products,
.about-team, .about-location, .about-cta { padding: 56px 24px; }
.about-mission, .about-location { grid-template-columns: 1fr; }
.about-stats { grid-template-columns: 1fr 1fr; }
.products-row, .team-grid { grid-template-columns: 1fr; }
.btn-outline-about { margin-left: 0; margin-top: 12px; }
}
</style>
{% endblock %}
{% block content %}
<!-- ══ HERO ══ -->
<section class="about-hero">
<div class="about-eyebrow">À propos de Jool International</div>
<h1>L'intelligence agricole<br>au service de <em>l'Afrique.</em></h1>
<p>Jool International développe des solutions technologiques pour moderniser l'agriculture africaine. Du satellite au terrain, nous donnons aux industriels, coopératives et institutions les outils pour piloter leurs exploitations avec précision.</p>
</section>
<!-- ══ MISSION ══ -->
<section style="background:var(--white);">
<div class="about-mission">
<div class="reveal">
<span style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(25,112,97,.1);color:var(--teal);padding:5px 14px;border-radius:100px;display:inline-block;margin-bottom:20px;">Notre mission</span>
<h2>Transformer l'agriculture<br>africaine par la <em>donnée.</em></h2>
<p>En Afrique subsaharienne, 60% de la population active travaille dans l'agriculture, mais moins de 5% des exploitations ont accès à des outils numériques de gestion. Jool International comble ce fossé.</p>
<p>Nous construisons des outils adaptés aux réalités du terrain africain : connectivité limitée, diversité des cultures, multiplicité des acteurs et besoins de traçabilité pour les marchés internationaux.</p>
</div>
<div class="mission-values reveal">
<div class="mission-value">
<span class="material-icons-round">visibility</span>
<div class="mission-value-body">
<h4>Transparence</h4>
<p>Des données vérifiables et auditables à chaque étape de la chaîne de valeur agricole.</p>
</div>
</div>
<div class="mission-value">
<span class="material-icons-round">bolt</span>
<div class="mission-value-body">
<h4>Impact terrain</h4>
<p>Nos solutions sont conçues pour être utilisées par des agents de terrain, pas seulement des ingénieurs.</p>
</div>
</div>
<div class="mission-value">
<span class="material-icons-round">public</span>
<div class="mission-value-body">
<h4>Scalabilité africaine</h4>
<p>De 100 à 100 000 hectares, nos outils s'adaptent à toutes les tailles d'exploitation.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ══ STATS ══ -->
<div class="about-stats">
<div class="reveal">
<div class="about-stat-val">+280 000</div>
<div class="about-stat-label">Producteurs digitalisés</div>
</div>
<div class="reveal">
<div class="about-stat-val">+100 000 ha</div>
<div class="about-stat-label">Superficie suivie</div>
</div>
<div class="reveal">
<div class="about-stat-val">3</div>
<div class="about-stat-label">Cultures couvertes</div>
</div>
<div class="reveal">
<div class="about-stat-val">89%</div>
<div class="about-stat-label">Précision IA</div>
</div>
</div>
<!-- ══ PRODUITS ══ -->
<section class="about-products">
<div class="about-products-inner">
<h2>Nos solutions</h2>
<div class="products-row">
<div class="about-product-card reveal">
<div class="apc-icon"><span class="material-icons-round">satellite_alt</span></div>
<div class="apc-title">KIRIQ AI</div>
<p class="apc-desc">Surveillance satellitaire et IA pour détecter les stress végétatifs, prioriser les interventions et piloter vos plantations depuis le bureau.</p>
<a href="{% url 'core:kiriq' %}" class="apc-link">Découvrir KIRIQ AI <span class="material-icons-round" style="font-size:18px;">east</span></a>
</div>
<div class="about-product-card reveal">
<div class="apc-icon"><span class="material-icons-round">flight</span></div>
<div class="apc-title">Jool Monitor</div>
<p class="apc-desc">Cartographie drone haute résolution, comptage automatique des plants et audit de conformité pour une vision ultra-précise du terrain.</p>
<a href="{% url 'core:monitor' %}" class="apc-link">Découvrir Monitor <span class="material-icons-round" style="font-size:18px;">east</span></a>
</div>
<div class="about-product-card reveal">
<div class="apc-icon"><span class="material-icons-round">badge</span></div>
<div class="apc-title">Jool ID</div>
<p class="apc-desc">Digitalisation et centralisation des producteurs, parcelles et programmes agricoles pour une gestion fiable et traçable à grande échelle.</p>
<a href="{% url 'core:joolid' %}" class="apc-link">Découvrir Jool ID <span class="material-icons-round" style="font-size:18px;">east</span></a>
</div>
</div>
</div>
</section>
<!-- ══ EQUIPE
<section class="about-team">
<div class="about-team-inner">
<h2>L'équipe fondatrice</h2>
<p>Une équipe pluridisciplinaire alliant expertise agronomique, technologie et connaissance du terrain africain.</p>
<div class="team-grid">
<div class="team-card reveal">
<div class="team-avatar">🌱</div>
<div class="team-name">Israel Coulibaly</div>
<div class="team-role">CEO & Co-fondateur</div>
<p class="team-bio">Expert en agri-business et stratégie. Vision de l'agriculture africaine digitale depuis plus de 8 ans.</p>
</div>
<div class="team-card reveal">
<div class="team-avatar">🛰️</div>
<div class="team-name">Équipe Technique</div>
<div class="team-role">Data Science & IA</div>
<p class="team-bio">Ingénieurs spécialisés en télédétection, machine learning et traitement d'images satellite.</p>
</div>
<div class="team-card reveal">
<div class="team-avatar">🌍</div>
<div class="team-name">Équipe Terrain</div>
<div class="team-role">Agronomie & Opérations</div>
<p class="team-bio">Agronomes et pilotes de drone formés aux spécificités des cultures tropicales africaines.</p>
</div>
</div>
</div>
</section>
══ -->
<!-- ══ LOCALISATION ══ -->
<section class="about-location">
<div class="reveal">
<h2>Basés en <em>Côte d'Ivoire,</em><br>actifs en Afrique.</h2>
<p>Jool International opère dans partout en Afrique de l'Ouest, là où les enjeux agricoles sont les plus importants.</p>
<div class="location-item"><span class="material-icons-round">location_on</span> Abidjan, Côte d'Ivoire (siège)</div>
<div class="location-item"><span class="material-icons-round">email</span> info@jool-int.com</div>
<div class="location-item"><span class="material-icons-round">phone</span> +225 07 99 899 836</div>
</div>
<div class="location-map reveal">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3972.3381998336868!2d-3.9153728148862776!3d5.36527478072492!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfc193bd3101ed6b%3A0x9dab83b7bb1027b9!2sJooL-International!5e0!3m2!1sfr!2sci!4v1778585083283!5m2!1sfr!2sci"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
title="Localisation de Jool International — Abidjan, Côte d'Ivoire">
</iframe>
</div>
</section>
<!-- ══ CTA ══ -->
<section class="about-cta">
<span style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(25,112,97,.12);color:var(--teal);padding:5px 14px;border-radius:100px;display:inline-block;margin-bottom:20px;">Travaillons ensemble</span>
<h2>Prêt à transformer<br>votre exploitation ?</h2>
<p>Discutons de vos besoins et voyons comment Jool peut vous aider.</p>
<div>
<a href="{% url 'core:home' %}#contact" class="btn-cta-lg">
<span class="material-icons-round">east</span> Demander une démo
</a>
{% if careers_enabled %}
<a href="{% url 'careers:job_list' %}" class="btn-outline-about">
Rejoindre l'équipe
</a>
{% endif %}
</div>
</section>
{% endblock %}