streaper2/afrov2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: replace share icon footer with a modern CTA section to explore more articles

Browse Source
This commit is contained in:
streaper2
2026-05-10 15:13:18 +02:00
parent 7174736680
commit f4f303b703
1 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/blog/[id]/page.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { ArrowLeft, User, Calendar, Share2 } from 'lucide-react';
import { ArrowLeft, ArrowRight, User, Calendar, Share2 } from 'lucide-react';
import { sanitizeHTML } from '../../../lib/sanitize';
import { prisma } from '../../../lib/prisma';
import BlogShareButtons from '../../../components/BlogShareButtons';
@@ -141,13 +141,20 @@ export default async function BlogPostPage({ params }: Props) {
/>
</div>
{/* Partage / Footer */}
<div className="mt-12 pt-8 border-t border-gray-100 flex justify-between items-center">
<p className="text-sm text-gray-500 font-medium">Vous avez aimé cet article ?</p>
<div className="flex space-x-2">
<button className="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-brand-100 hover:text-brand-600 transition-colors">
<Share2 className="w-5 h-5" />
</button>
{/* Partage / Footer CTA */}
<div className="mt-12 pt-8 border-t border-gray-100">
<div className="bg-brand-50 rounded-xl p-6 md:p-8 flex flex-col md:flex-row justify-between items-center gap-6">
<div className="text-center md:text-left">
<h3 className="text-xl font-bold text-brand-900 mb-1">Vous avez aimé cet article ?</h3>
<p className="text-brand-700">Explorez d'autres contenus exclusifs sur l'afropreneuriat.</p>
</div>
<Link
href="/blog"
className="inline-flex items-center px-8 py-3 bg-brand-600 text-white font-bold rounded-lg hover:bg-brand-700 transition-all hover:scale-105 shadow-lg shadow-brand-200"
>
Voir plus d'articles
<ArrowRight className="ml-2 w-5 h-5" />
</Link>
</div>
</div>
</div>