nouvelle version des textes
This commit is contained in:
ifaryd
@@ -1,81 +1,84 @@
|
||||
{% load i18n %}
|
||||
<!-- ══ HERO ══ -->
|
||||
<section class="hero">
|
||||
<div class="hero-text reveal">
|
||||
<h1>{% blocktrans %}L'agriculture n'a plus<br><span>de zones d'ombre.</span>{% endblocktrans %}</h1>
|
||||
<p>{% blocktrans %}JooL révèle ce que chaque hectare cache : risques, anomalies, potentiel et décisions à prendre grâce à l'IA,<br> au satellite et aux drones.{% endblocktrans %}</p>
|
||||
<div class="hero-form">
|
||||
<input id="hero-email" class="hero-input" type="email" placeholder="{% trans 'Votre adresse email' %}">
|
||||
<button id="hero-demo-btn" class="btn-hero" type="button">
|
||||
{% trans "Demander une démo" %}
|
||||
<span class="material-icons-round" style="font-size:18px;">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('hero-demo-btn').addEventListener('click', function () {
|
||||
const email = document.getElementById('hero-email').value.trim();
|
||||
const target = document.getElementById('contact');
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth' });
|
||||
if (email) {
|
||||
setTimeout(function () {
|
||||
const contactEmail = document.querySelector('#contact-form input[name="email"]');
|
||||
if (contactEmail) contactEmail.value = email;
|
||||
const lastName = document.querySelector('#contact-form input[name="last_name"]');
|
||||
if (lastName) lastName.focus();
|
||||
}, 600);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<!-- ══ HERO ══ -->
|
||||
<section class="hero">
|
||||
<div class="hero-text reveal">
|
||||
<h1>
|
||||
<span class="hero-h1-line">{% trans "L'agriculture n'a plus" %}</span>
|
||||
<span class="hero-h1-line hero-h1-accent">{% trans "de zones d'ombre." %}</span>
|
||||
</h1>
|
||||
<p>{% blocktrans %}JooL révèle ce que chaque hectare cache : risques, anomalies, potentiel et décisions à prendre grâce à l'IA, l’imagerie satellite et les drones.{% endblocktrans %}</p>
|
||||
<div class="hero-form">
|
||||
<input id="hero-email" class="hero-input" type="email" placeholder="{% trans 'Votre adresse email' %}">
|
||||
<button id="hero-demo-btn" class="btn-hero" type="button">
|
||||
{% trans "Demander une démo" %}
|
||||
<span class="material-icons-round" style="font-size:18px;">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hero-visual reveal">
|
||||
<div class="float-badge fb-1">
|
||||
<span class="material-icons-round">satellite_alt</span>
|
||||
{% trans "NDVI · Analyse live" %}
|
||||
<script>
|
||||
document.getElementById('hero-demo-btn').addEventListener('click', function () {
|
||||
const email = document.getElementById('hero-email').value.trim();
|
||||
const target = document.getElementById('contact');
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth' });
|
||||
if (email) {
|
||||
setTimeout(function () {
|
||||
const contactEmail = document.querySelector('#contact-form input[name="email"]');
|
||||
if (contactEmail) contactEmail.value = email;
|
||||
const lastName = document.querySelector('#contact-form input[name="last_name"]');
|
||||
if (lastName) lastName.focus();
|
||||
}, 600);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
<div class="hero-visual reveal">
|
||||
<div class="float-badge fb-1">
|
||||
<span class="material-icons-round">satellite_alt</span>
|
||||
{% trans "NDVI · Analyse live" %}
|
||||
</div>
|
||||
<div class="float-badge fb-2">
|
||||
<span class="material-icons-round">check_circle</span>
|
||||
{% trans "Diagnostic en moins de 2h" %}
|
||||
</div>
|
||||
<div class="hero-mockup">
|
||||
<div class="hero-mockup-bar">
|
||||
<div class="hm-dot hm-d1"></div>
|
||||
<div class="hm-dot hm-d2"></div>
|
||||
<div class="hm-dot hm-d3"></div>
|
||||
</div>
|
||||
<div class="float-badge fb-2">
|
||||
<span class="material-icons-round">check_circle</span>
|
||||
{% trans "Diagnostic en moins de 2h" %}
|
||||
<div class="hero-card">
|
||||
<div class="hc-icon"><span class="material-icons-round">satellite_alt</span></div>
|
||||
<div class="hc-text">
|
||||
<div class="hc-title">KIRiQ Ai</div>
|
||||
<div class="hc-sub">{% trans "Risques détectés, rapport disponible" %}</div>
|
||||
</div>
|
||||
<div class="hc-arrow"><span class="material-icons-round">chevron_right</span></div>
|
||||
</div>
|
||||
<div class="hero-mockup">
|
||||
<div class="hero-mockup-bar">
|
||||
<div class="hm-dot hm-d1"></div>
|
||||
<div class="hm-dot hm-d2"></div>
|
||||
<div class="hm-dot hm-d3"></div>
|
||||
<div class="hero-card">
|
||||
<div class="hc-icon" style="background:#e07c00;"><span class="material-icons-round">camera</span></div>
|
||||
<div class="hc-text">
|
||||
<div class="hc-title">Jool Monitor</div>
|
||||
<div class="hc-sub">{% trans "Carte drone prête" %}</div>
|
||||
</div>
|
||||
<div class="hero-card">
|
||||
<div class="hc-icon"><span class="material-icons-round">satellite_alt</span></div>
|
||||
<div class="hc-text">
|
||||
<div class="hc-title">KIRIQ AI</div>
|
||||
<div class="hc-sub">{% trans "Risques détectés, rapport disponible" %}</div>
|
||||
</div>
|
||||
<div class="hc-arrow"><span class="material-icons-round">chevron_right</span></div>
|
||||
<div class="hc-arrow"><span class="material-icons-round">chevron_right</span></div>
|
||||
</div>
|
||||
<div class="hero-card">
|
||||
<div class="hc-icon" style="background:#1a6080;"><span class="material-icons-round">badge</span></div>
|
||||
<div class="hc-text">
|
||||
<div class="hc-title">Jool ID</div>
|
||||
<div class="hc-sub">{% trans "Producteur géoréférencé" %}</div>
|
||||
</div>
|
||||
<div class="hero-card">
|
||||
<div class="hc-icon" style="background:#e07c00;"><span class="material-icons-round">camera</span></div>
|
||||
<div class="hc-text">
|
||||
<div class="hc-title">Jool Monitor</div>
|
||||
<div class="hc-sub">{% trans "Carte drone prête" %}</div>
|
||||
</div>
|
||||
<div class="hc-arrow"><span class="material-icons-round">chevron_right</span></div>
|
||||
</div>
|
||||
<div class="hero-card">
|
||||
<div class="hc-icon" style="background:#1a6080;"><span class="material-icons-round">badge</span></div>
|
||||
<div class="hc-text">
|
||||
<div class="hc-title">Jool ID</div>
|
||||
<div class="hc-sub">{% trans "Producteur géoréférencé" %}</div>
|
||||
</div>
|
||||
<div class="hc-arrow"><span class="material-icons-round">chevron_right</span></div>
|
||||
</div>
|
||||
<div class="hero-card">
|
||||
<div class="hc-icon" style="background:#806c1a;"><span class="material-icons-round">person</span></div>
|
||||
<div class="hc-text">
|
||||
<div class="hc-title">Mon Agro</div>
|
||||
<div class="hc-sub">{% trans "Agronome disponible" %}</div>
|
||||
</div>
|
||||
<div class="hc-arrow"><span class="material-icons-round">chevron_right</span></div>
|
||||
<div class="hc-arrow"><span class="material-icons-round">chevron_right</span></div>
|
||||
</div>
|
||||
<div class="hero-card">
|
||||
<div class="hc-icon" style="background:#806c1a;"><span class="material-icons-round">person</span></div>
|
||||
<div class="hc-text">
|
||||
<div class="hc-title">Mon Agro</div>
|
||||
<div class="hc-sub">{% trans "Agronome disponible" %}</div>
|
||||
</div>
|
||||
<div class="hc-arrow"><span class="material-icons-round">chevron_right</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user