feat(index): ajouter hero carousel avec images et script dedie

This commit is contained in:
2026-05-28 17:48:45 +02:00
parent 4c958b448a
commit ba31d6447a
7 changed files with 342 additions and 12 deletions
+18 -6
View File
@@ -8,18 +8,28 @@
</head>
<body>
<main data-page-content>
<section class="hero">
<section class="hero hero-carousel" aria-label="Présentation FWS Linux">
<div class="hero-carousel-track" data-hero-track>
<article class="hero-slide is-active" data-hero-slide style="background-image: url('/p/assets/img/hero/xfce.png');" aria-hidden="false"></article>
<article class="hero-slide" data-hero-slide style="background-image: url('/p/assets/img/hero/install.png');" aria-hidden="true"></article>
<article class="hero-slide" data-hero-slide style="background-image: url('/p/assets/img/hero/gnome.png');" aria-hidden="true"></article>
</div>
<div class="hero-inner">
<h1 class="hero-title">FWS Linux</h1>
<h2 class="hero-subtitle">un système léger, libre et compatible</h2>
<p class="lead">Open-source basé sur Arch Linux, Fws facilite la transition depuis Windows sans vous déposséder de vos données. Installation simplifiée, interface épurée, et compatibilité avec vos applications Windows grâce à Wine et Winboat — tout en restant respectueux de votre vie privée.</p>
<h2 class="hero-subtitle">Un systeme leger, libre et compatible</h2>
<p class="lead">Open-source base sur Arch Linux, FWS facilite la transition depuis Windows sans vous deposseder de vos donnees. Installation simplifiee, interface epuree, et compatibilite avec vos applications Windows grace a Wine et Winboat.</p>
<div class="hero-actions">
<a class="button button-primary" href="/?p/dl/" data-route="dl">Télécharger</a>
<a class="button button-primary" href="/?p/dl/" data-route="dl">Telecharger</a>
<a class="button button-secondary" href="/?p/contact/" data-route="contact">En savoir plus</a>
</div>
</div>
<div class="hero-controls" aria-label="Controles du carousel">
<button class="hero-control" type="button" data-hero-prev aria-label="Image precedente"></button>
<div class="hero-dots" data-hero-dots role="tablist" aria-label="Selectionner une image"></div>
<button class="hero-control" type="button" data-hero-next aria-label="Image suivante"></button>
</div>
</section>
<section class="features">
@@ -44,5 +54,7 @@
</section>
</main>
<script src="../assets/js/hero-carousel.js"></script>
</body>
</html>