Working on first page with pagination
This commit is contained in:
kbe
@@ -6,18 +6,18 @@
|
||||
<section class="gradient-bg py-12 md:py-16 lg:py-20">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">Exploring Technology's Impact on Work & Life</h1>
|
||||
<p class="text-xl text-gray-700 mb-8">Insights, analysis and trends about how technology is shaping our future</p>
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">Explorer l'Impact de la Technologie sur le Travail et la Vie</h1>
|
||||
<p class="text-xl text-gray-700 mb-8">Perspectives, analyses et tendances sur la manière dont la technologie façonne notre avenir</p>
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-10">
|
||||
<span class="tag bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">AI</span>
|
||||
<span class="tag bg-green-100 text-green-800 text-sm font-medium px-3 py-1 rounded-full">Remote Work</span>
|
||||
<span class="tag bg-purple-100 text-purple-800 text-sm font-medium px-3 py-1 rounded-full">Productivity</span>
|
||||
<span class="tag bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">IA</span>
|
||||
<span class="tag bg-green-100 text-green-800 text-sm font-medium px-3 py-1 rounded-full">Télétravail</span>
|
||||
<span class="tag bg-purple-100 text-purple-800 text-sm font-medium px-3 py-1 rounded-full">Productivité</span>
|
||||
<span class="tag bg-yellow-100 text-yellow-800 text-sm font-medium px-3 py-1 rounded-full">Innovation</span>
|
||||
<span class="tag bg-red-100 text-red-800 text-sm font-medium px-3 py-1 rounded-full">Web3</span>
|
||||
</div>
|
||||
<form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
|
||||
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">Get Updates</button>
|
||||
<input type="email" placeholder="Votre adresse email" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">Recevoir les mises à jour</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -26,10 +26,10 @@
|
||||
<!-- Featured Articles -->
|
||||
<section class="py-12 md:py-16">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Featured Articles</h2>
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Articles en Vedette</h2>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
|
||||
{{ range first 2 $.Site.RegularPages }}
|
||||
{{ range first 2 (where $.Site.RegularPages "Params.categories" "intersect" (slice "Featured")) }}
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-lg article-card">
|
||||
<div class="featured-article">
|
||||
<a href="{{ .RelPermalink }}">
|
||||
@@ -60,10 +60,10 @@
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center text-sm text-gray-500">
|
||||
<img src="https://i.pravatar.cc/24" alt="{{ .Params.author }}" class="w-6 h-6 rounded-full mr-2">
|
||||
{{/* <img src="https://i.pravatar.cc/24" alt="{{ .Params.author }}" class="w-6 h-6 rounded-full mr-2"> */}}
|
||||
<a href="/author/{{ .Params.author | urlize }}" class="hover:underline">{{ .Params.author }}</a>
|
||||
<span class="mx-2">•</span>
|
||||
<span>{{ .Date | time.Format "Jan 2, 2006" }}</span>
|
||||
<span>{{ .Date | time.Format "2 Jan 2006" }}</span>
|
||||
</div>
|
||||
<a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Lire la suite →</a>
|
||||
</div>
|
||||
@@ -73,21 +73,26 @@
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<a href="/articles" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
|
||||
View all articles
|
||||
<i class="fas fa-arrow-right ml-2"></i>
|
||||
<a href="#latest-articles" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
|
||||
Voir plus d'articles
|
||||
<i class="fas fa-arrow-down ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Latest Articles -->
|
||||
<section class="py-12 md:py-16 bg-gray-50">
|
||||
<section id="latest-articles" class="py-12 md:py-16 bg-gray-50">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Latest Articles</h2>
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Derniers Articles</h2>
|
||||
|
||||
{{ $featuredPosts := where $.Site.RegularPages "Params.categories" "intersect" (slice "Featured") }}
|
||||
{{ $regularPosts := where $.Site.RegularPages "Type" "!=" "page" }}
|
||||
{{ $nonFeaturedPosts := complement $featuredPosts $regularPosts }}
|
||||
{{ $paginator := .Paginate $nonFeaturedPosts 9 }}
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
|
||||
{{ range first 6 (after 2 $.Site.RegularPages) }}
|
||||
{{ range $paginator.Pages }}
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
|
||||
<a href="{{ .RelPermalink }}">
|
||||
{{ if .Params.featured_image }}
|
||||
@@ -98,11 +103,13 @@
|
||||
</a>
|
||||
<div class="p-6">
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
{{ range first 1 .Params.categories }}
|
||||
<a href="/categories/{{ . | urlize }}" class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded hover:underline">{{ . }}</a>
|
||||
{{ if .Params.categories }}
|
||||
{{ range first 1 .Params.categories }}
|
||||
<a href="/categories/{{ . | urlize }}" class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded hover:underline">{{ . }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3">{{ .Title }}</h3>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
|
||||
<p class="text-gray-600 text-sm mb-4">
|
||||
{{ if .Params.excerpt }}
|
||||
{{ .Params.excerpt }}
|
||||
@@ -113,48 +120,49 @@
|
||||
{{ end }}
|
||||
</p>
|
||||
<div class="flex items-center justify-between text-sm text-gray-500">
|
||||
<span>{{ .Date | time.Format "Jan 2, 2006" }}</span>
|
||||
<a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Read more →</a>
|
||||
<span>{{ .Date | time.Format "2 Jan 2006" }}</span>
|
||||
<a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Lire la suite →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<a href="/articles" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
|
||||
View all articles
|
||||
<i class="fas fa-arrow-right ml-2"></i>
|
||||
</a>
|
||||
<!-- Pagination -->
|
||||
<div class="flex justify-center mt-12">
|
||||
{{ if gt .Paginator.TotalPages 1 }}
|
||||
{{ partial "pagination-tailwind.html" .Paginator }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{/*
|
||||
<!-- Popular Topics -->
|
||||
<section class="py-12 md:py-16">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Explore Topics</h2>
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Explorer les Thèmes</h2>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-12">
|
||||
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-3">
|
||||
<i class="fas fa-robot text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-900">AI</span>
|
||||
<span class="text-sm font-medium text-gray-900">IA</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-3">
|
||||
<i class="fas fa-laptop-house text-green-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-900">Remote Work</span>
|
||||
<span class="text-sm font-medium text-gray-900">Télétravail</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-3">
|
||||
<i class="fas fa-tachometer-alt text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-900">Productivity</span>
|
||||
<span class="text-sm font-medium text-gray-900">Productivité</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
||||
@@ -168,7 +176,7 @@
|
||||
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-3">
|
||||
<i class="fas fa-code text-red-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-900">Development</span>
|
||||
<span class="text-sm font-medium text-gray-900">Développement</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
||||
@@ -181,31 +189,35 @@
|
||||
|
||||
<div class="text-center">
|
||||
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
|
||||
Browse all topics
|
||||
Parcourir tous les thèmes
|
||||
<i class="fas fa-arrow-right ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
*/}}
|
||||
|
||||
{{/*
|
||||
<!-- Newsletter Section -->
|
||||
<section class="py-12 md:py-16 bg-blue-50">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-4">Stay Updated</h2>
|
||||
<p class="text-gray-700 mb-6">Join our newsletter and get the latest insights on technology and the future of work delivered to your inbox.</p>
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-4">Restez Informé</h2>
|
||||
<p class="text-gray-700 mb-6">Rejoignez notre newsletter et recevez les dernières perspectives sur la technologie et l'avenir du travail directement dans votre boîte mail.</p>
|
||||
<form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
|
||||
<input type="email"
|
||||
placeholder="Your email address"
|
||||
<input type="email"
|
||||
placeholder="Votre adresse email"
|
||||
class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<button type="submit"
|
||||
<button type="submit"
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">
|
||||
Subscribe
|
||||
S'abonner
|
||||
</button>
|
||||
</form>
|
||||
<p class="text-sm text-gray-500 mt-4">No spam. Unsubscribe at any time.</p>
|
||||
<p class="text-sm text-gray-500 mt-4">Pas de spam. Désabonnez-vous à tout moment.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
*/}}
|
||||
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user