save avant prochaine modif

app/blog/[id]/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+
+import React, { useEffect } from 'react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { ArrowLeft, User, Calendar, Share2 } from 'lucide-react';
+import { MOCK_BLOG_POSTS } from '../../../lib/mockData';
+
+const BlogPostPage = () => {
+  const { id } = useParams();
+  const post = MOCK_BLOG_POSTS.find(p => p.id === id);
+
+  // Scroll to top when loading a new post
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [id]);
+
+  if (!post) {
+    return (
+      <div className="min-h-[60vh] flex flex-col items-center justify-center">
+        <h2 className="text-3xl font-serif font-bold text-gray-900 mb-4">Article introuvable</h2>
+        <p className="text-gray-600 mb-8">L'article que vous recherchez n'existe pas ou a été supprimé.</p>
+        <Link href="/blog" className="text-brand-600 hover:text-brand-700 font-medium flex items-center">
+          <ArrowLeft className="w-4 h-4 mr-2" /> Retour au blog
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <article className="bg-white min-h-screen">
+      {/* Hero Image */}
+      <div className="w-full h-64 md:h-96 relative">
+        <img
+          src={post.imageUrl}
+          alt={post.title}
+          className="w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+        <div className="absolute bottom-0 left-0 w-full p-4 sm:p-8 max-w-4xl mx-auto">
+          <Link href="/blog" className="inline-flex items-center text-white/80 hover:text-white mb-4 text-sm font-medium transition-colors">
+            <ArrowLeft className="w-4 h-4 mr-1" /> Retour aux articles
+          </Link>
+        </div>
+      </div>
+
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12 -mt-20 relative z-10">
+        <div className="bg-white rounded-xl shadow-xl p-6 md:p-10 border border-gray-100">
+          {/* Header */}
+          <header className="mb-8 border-b border-gray-100 pb-8">
+            <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
+              <span className="flex items-center">
+                <User className="w-4 h-4 mr-1 text-brand-500" />
+                {post.author}
+              </span>
+              <span className="flex items-center">
+                <Calendar className="w-4 h-4 mr-1 text-brand-500" />
+                {post.date}
+              </span>
+              <span className="px-2 py-1 bg-brand-50 text-brand-700 rounded text-xs font-semibold uppercase tracking-wide">
+                Conseils
+              </span>
+            </div>
+            <h1 className="text-3xl md:text-4xl font-serif font-bold text-gray-900 leading-tight">
+              {post.title}
+            </h1>
+          </header>
+
+          {/* Content */}
+          <div className="prose prose-lg prose-orange max-w-none text-gray-600">
+            <p className="lead text-xl text-gray-500 font-serif italic mb-6">
+              {post.excerpt}
+            </p>
+            {/* Rendering paragraphs manually for the mock data */}
+            {post.content.split('\n').map((paragraph, index) => (
+              paragraph.trim() !== '' && (
+                <p key={index} className="mb-4 leading-relaxed">
+                  {paragraph}
+                </p>
+              )
+            ))}
+          </div>
+
+          {/* Footer / Share */}
+          <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>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+};
+
+export default BlogPostPage;

app/blog/page.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+
+import React from 'react';
+import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
+import { MOCK_BLOG_POSTS } from '../../lib/mockData';
+
+const BlogPage = () => (
+  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <div className="text-center mb-12">
+        <h1 className="text-3xl font-bold font-serif text-gray-900 sm:text-4xl">Le Blog de l'Entrepreneur</h1>
+        <p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
+            Conseils, actualités et success stories de l'écosystème africain.
+        </p>
+    </div>
+    <div className="grid gap-8 lg:grid-cols-3">
+        {MOCK_BLOG_POSTS.map(post => (
+            <Link key={post.id} href={`/blog/${post.id}`} className="group flex flex-col rounded-lg shadow-lg overflow-hidden bg-white hover:shadow-xl transition-shadow duration-300">
+                <div className="flex-shrink-0 relative overflow-hidden h-48">
+                    <img className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" src={post.imageUrl} alt={post.title} />
+                    <div className="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"></div>
+                </div>
+                <div className="flex-1 bg-white p-6 flex flex-col justify-between">
+                    <div className="flex-1">
+                        <p className="text-sm font-medium text-brand-600">Conseils</p>
+                        <div className="block mt-2">
+                            <p className="text-xl font-semibold text-gray-900 group-hover:text-brand-700 transition-colors">{post.title}</p>
+                            <p className="mt-3 text-base text-gray-500 line-clamp-3">{post.excerpt}</p>
+                        </div>
+                    </div>
+                    <div className="mt-6 flex items-center justify-between">
+                        <div className="flex items-center">
+                            <div className="flex-shrink-0">
+                                <span className="sr-only">{post.author}</span>
+                                <div className="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold border border-gray-300">
+                                    {post.author.charAt(0)}
+                                </div>
+                            </div>
+                            <div className="ml-3">
+                                <p className="text-sm font-medium text-gray-900">{post.author}</p>
+                                <div className="flex space-x-1 text-sm text-gray-500">
+                                    <time>{post.date}</time>
+                                </div>
+                            </div>
+                        </div>
+                        <span className="text-brand-600 opacity-0 group-hover:opacity-100 transition-opacity">
+                           <ArrowRight className="w-5 h-5" />
+                        </span>
+                    </div>
+                </div>
+            </Link>
+        ))}
+    </div>
+  </div>
+);
+
+export default BlogPage;