<?php
/*
Template Name: Page d’accueil personnalisée
*/
get_header(); ?>

<!– Barre de recherche en haut –>
<div class= »bg-white shadow py-2 px-4″>
<div class= »container mx-auto »>
<?php get_search_form(); ?>
</div>
</div>

<!– Hero section –>
<section class= »bg-orange-100 py-12 text-center »>
<div class= »container mx-auto »>
<h2 class= »text-3xl md:text-4xl font-bold text-gray-900 mb-2″>Toute l’actualité du livre, partout au Canada</h2>
<p class= »text-md md:text-lg text-gray-700″>Critiques, entrevues, offres d’emploi, et plus encore</p>
<a href= »# » class= »mt-4 inline-block bg-red-700 text-white px-6 py-2 rounded-full hover:bg-red-800″>Explorer les dernières nouvelles</a>
</div>
</section>

<main class= »container mx-auto py-12 space-y-16″>

<!– À la une –>
<section aria-label= »À la une »>
<h3 class= »text-2xl font-bold text-blue-800 mb-6 border-b pb-2″>À la une</h3>
<div class= »grid md:grid-cols-3 gap-6″>
<?php
$alaune = new WP_Query([‘category_name’ => ‘alaune’, ‘posts_per_page’ => 3]);
if ($alaune->have_posts()) :
while ($alaune->have_posts()) : $alaune->the_post(); ?>
<article class= »bg-white p-4 rounded shadow hover:shadow-lg transition »>
<?php if (has_post_thumbnail()) : ?>
<a href= »<?php the_permalink(); ?> »><?php the_post_thumbnail(‘medium’, [‘class’ => ’rounded mb-2′]); ?></a>
<?php else: ?>
<div class= »h-48 bg-gray-200 rounded mb-2″></div>
<?php endif; ?>
<h4 class= »font-semibold text-lg »><a href= »<?php the_permalink(); ?> »><?php the_title(); ?></a></h4>
<p class= »text-sm text-gray-600″><?php the_excerpt(); ?></p>
</article>
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</section>

<!– Dossiers –>
<?php get_template_part(‘template-parts/section’, ‘dossiers’); ?>

<!– Carrousel (après les annonces d’emploi) –>
<?php get_template_part(‘template-parts/section’, ‘carousel’); ?>

<!– Littérature Jeunesse –>
<?php get_template_part(‘template-parts/section’, ‘litterature-jeunesse’); ?>

<!– Littératures Autochtones –>
<?php get_template_part(‘template-parts/section’, ‘litteratures-autochtones’); ?>

<!– En Coulisse –>
<?php get_template_part(‘template-parts/section’, ‘en-coulisse’); ?>

<!– Ballados –>
<section aria-label= »Ballados »>
<h3 class= »text-2xl font-bold text-blue-800 mb-6 border-b pb-2″>Ballados</h3>
<div class= »grid md:grid-cols-2 gap-6″>
<?php
$ballados = new WP_Query([‘category_name’ => ‘ballados’, ‘posts_per_page’ => 2]);
if ($ballados->have_posts()) :
while ($ballados->have_posts()) : $ballados->the_post(); ?>
<article class= »bg-white p-4 rounded shadow hover:shadow-lg transition »>
<h4 class= »font-semibold text-lg »><a href= »<?php the_permalink(); ?> »><?php the_title(); ?></a></h4>
<p class= »text-sm text-gray-600″><?php the_excerpt(); ?></p>
</article>
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</section>

<!– Chroniques –>
<section aria-label= »Chroniques »>
<h3 class= »text-2xl font-bold text-blue-800 mb-6 border-b pb-2″>Chroniques</h3>
<div class= »grid md:grid-cols-2 gap-6″>
<?php
$chroniques = new WP_Query([‘category_name’ => ‘chroniques’, ‘posts_per_page’ => 2]);
if ($chroniques->have_posts()) :
while ($chroniques->have_posts()) : $chroniques->the_post(); ?>
<article class= »bg-white p-4 rounded shadow hover:shadow-lg transition »>
<h4 class= »font-semibold text-lg »><a href= »<?php the_permalink(); ?> »><?php the_title(); ?></a></h4>
<p class= »text-sm text-gray-600″><?php the_excerpt(); ?></p>
</article>
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</section>

<!– Livres –>
<section aria-label= »Livres » class= »relative »>
<h3 class= »text-2xl font-bold text-blue-800 mb-6 border-b pb-2″>Livres</h3>
<div class= »relative »>
<button id= »prevSlide » class= »absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white shadow px-2 py-1 rounded-l hover:bg-blue-700 hover:text-white »>◀</button>
<button id= »nextSlide » class= »absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white shadow px-2 py-1 rounded-r hover:bg-blue-700 hover:text-white »>▶</button>
<div id= »carouselLivres » class= »flex overflow-x-auto space-x-4 pb-4 scroll-smooth snap-x snap-mandatory no-scrollbar »>
<?php
$livres = new WP_Query([‘category_name’ => ‘livres’, ‘posts_per_page’ => 10]);
if ($livres->have_posts()) :
while ($livres->have_posts()) : $livres->the_post(); ?>
<article class= »min-w-[160px] max-w-[160px] snap-start bg-white shadow rounded p-2 hover:shadow-lg transition duration-300 flex-shrink-0″>
<a href= »<?php the_permalink(); ?> »>
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail(‘medium’, [‘class’ => ‘w-full h-[240px] object-cover mb-2 rounded’]); ?>
<?php else : ?>
<div class= »w-full h-[240px] bg-gray-200 mb-2 rounded »></div>
<?php endif; ?>
<h4 class= »text-sm font-medium text-gray-800 leading-tight hover:text-blue-700 hover:underline »>
<?php the_title(); ?>
</h4>
</a>
</article>
<?php endwhile;
wp_reset_postdata();
endif; ?>
</div>
</div>
</section>

<script>
const carousel = document.getElementById(‘carouselLivres’);
document.getElementById(‘nextSlide’).addEventListener(‘click’, () => {
carousel.scrollBy({ left: 180, behavior: ‘smooth’ });
});
document.getElementById(‘prevSlide’).addEventListener(‘click’, () => {
carousel.scrollBy({ left: -180, behavior: ‘smooth’ });
});
</script>

h h h kjk
<section class= »bg-red-50 p-6 rounded shadow text-center »>
<h3 class= »text-xl font-bold »>Abonnez-vous à notre infolettre</h3>
<p class= »text-gray-600 mb-4″>Recevez nos critiques, portraits et offres d’emploi chaque mois</p>
<form class= »flex justify-center space-x-2″ method= »post » action= »# »>
<input type= »email » name= »email » placeholder= »Votre courriel » class= »px-4 py-2 border rounded w-64″ required>
<button type= »submit » class= »bg-red-700 text-white px-4 py-2 rounded hover:bg-red-800″>S’abonner</button>
</form>
</section>

</main>

<?php get_footer(); ?>

📚 À lire aussi

• Diadié Dembélé lauréat du Prix CEQF « La Francophonie en débat »
• Medgine Mathurin, nouvelle poète officielle de la Ville d’Edmonton
• livre 4