From f4f303b70334bb198fc280aba3ff63f97a315573 Mon Sep 17 00:00:00 2001
From: streaper2 <streaper2@gmail.com>
Date: Sun, 10 May 2026 15:13:18 +0200
Subject: [PATCH] UI: replace share icon footer with a modern CTA section to
 explore more articles

---
 app/blog/[id]/page.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/blog/[id]/page.tsx b/app/blog/[id]/page.tsx
index 4e84d55..a45e710 100644
--- a/app/blog/[id]/page.tsx
+++ b/app/blog/[id]/page.tsx
@@ -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>