90 lines
3.8 KiB
HTML
90 lines
3.8 KiB
HTML
{% extends 'layout.html' %}
|
||
|
||
{% block content %}
|
||
<section class="hero">
|
||
<div class="hero-inner">
|
||
<h1>Apprenez à coder de A à Z</h1>
|
||
<p class="hero-sub">Des cours gratuits et payants, structurés et concrets, pour progresser rapidement en programmation.</p>
|
||
<div class="button-grp hero-cta">
|
||
<a class="button cta-primary" href="{% url 'register' %}"><i class="fa-solid fa-play"></i> Commencer gratuitement</a>
|
||
<a class="button cta-secondary" href="{% url 'courses:list' %}"><i class="fa-solid fa-book"></i> Voir les cours</a>
|
||
</div>
|
||
<div class="hero-trust">
|
||
<span><i class="fa-solid fa-check"></i> Pas de carte requise pour commencer</span>
|
||
<span><i class="fa-solid fa-clock"></i> À votre rythme</span>
|
||
<span><i class="fa-solid fa-certificate"></i> Accès premium en option</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="features">
|
||
<div class="feature">
|
||
<div class="feat-ico"><i class="fa-solid fa-route"></i></div>
|
||
<h3>Parcours guidés</h3>
|
||
<p>Des cheminements clairs pour débuter et monter en compétence sans vous perdre.</p>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feat-ico"><i class="fa-solid fa-code"></i></div>
|
||
<h3>Pratique d'abord</h3>
|
||
<p>Des projets concrets, des exercices et des corrections expliquées pas-à-pas.</p>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feat-ico"><i class="fa-solid fa-people-group"></i></div>
|
||
<h3>Communauté</h3>
|
||
<p>Posez vos questions et obtenez de l'aide de la communauté et de l'auteur.</p>
|
||
</div>
|
||
</section>
|
||
{% block course %}
|
||
{% include "courses/partials/list.html" %}
|
||
{% endblock %}
|
||
|
||
<section class="pricing-teaser">
|
||
<h2>Gratuit pour commencer, Premium pour aller plus loin</h2>
|
||
<ul class="ul-arrow">
|
||
<li>Cours d'introduction gratuits</li>
|
||
<li>Contenu premium détaillé: projets complets, corrections, téléchargements</li>
|
||
<li>Accès à vie aux cours achetés</li>
|
||
</ul>
|
||
<div class="button-grp">
|
||
<a class="button cta-primary" href="{% url 'register' %}">Créer mon compte</a>
|
||
<a class="button cta-secondary" href="{% url 'courses:list' %}">Parcourir les cours</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="carousel">
|
||
<h2>Cours en vedette</h2>
|
||
<div class="carousel-track">
|
||
{% for course in courses|slice:":6" %}
|
||
<a class="carousel-item card" href="{% url 'courses:show' course.id course.name|slugify %}">
|
||
<div class="ratio-16x9">
|
||
<img src="{{ course.thumbnail.url }}" alt="{{ course.name }}" loading="lazy">
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>{{ course.name }}</h3>
|
||
</div>
|
||
</a>
|
||
{% endfor %}
|
||
</div>
|
||
<!-- Simple scroll hint -->
|
||
<div class="center" aria-hidden="true" style="opacity:.8; margin-top:8px;">Glissez pour parcourir →</div>
|
||
|
||
</section>
|
||
|
||
<section class="testimonials">
|
||
<h2>Ils progressent avec Partir de zéro</h2>
|
||
<div class="testimonials-grid">
|
||
<div class="testimonial">
|
||
<p>“Des cours clairs et progressifs. J’ai enfin compris Django et j’ai lancé mon premier projet.”</p>
|
||
<div class="who">Alexandre — Débutant devenu autonome</div>
|
||
</div>
|
||
<div class="testimonial">
|
||
<p>“L’approche projet et les explications pas-à-pas m’ont fait gagner des semaines.”</p>
|
||
<div class="who">Sarah — Étudiante en informatique</div>
|
||
</div>
|
||
<div class="testimonial">
|
||
<p>“Parfait pour reprendre les bases et aller plus loin. Le mode sombre est top 👌.”</p>
|
||
<div class="who">Yassine — Dev front-end</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{% endblock %}
|