first commit

pages/BlogPage.tsx

@@ -0,0 +1,56 @@
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowRight } from 'lucide-react';
+import { MOCK_BLOG_POSTS } from '../services/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} to={`/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;