Add src/components/sections/blog/BlogGrid.js

src/components/sections/blog/BlogGrid.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Calendar, User } from 'lucide-react';
+
+function BlogGrid() {
+  const blogPosts = [
+    {
+      title: 'Getting Started with Modern React',
+      excerpt: 'Learn the fundamentals of React 18 and build amazing user interfaces.',
+      author: 'John Doe',
+      date: '2024-01-15',
+      image: '/images/courses.aee168f4-1768917228064.png',
+      category: 'React'
+    },
+    {
+      title: 'Building Scalable Web Applications',
+      excerpt: 'Best practices for creating maintainable and scalable web applications.',
+      author: 'Jane Smith',
+      date: '2024-01-10',
+      image: '/images/courses-box-1.e8498908-1768917228039.png',
+      category: 'Architecture'
+    },
+    {
+      title: 'The Future of Web Development',
+      excerpt: 'Explore emerging trends and technologies shaping the future of web development.',
+      author: 'Mike Johnson',
+      date: '2024-01-05',
+      image: '/images/courses-box-2.2e36a41b-1768917228024.png',
+      category: 'Trends'
+    }
+  ];
+
+  return (
+    <section className="py-16 bg-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+            Latest from our blog
+          </h2>
+          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            Stay updated with the latest trends and best practices in web development
+          </p>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {blogPosts.map((post, index) => (
+            <article key={index} className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow overflow-hidden border">
+              <img src={post.image} alt={post.title} className="w-full h-48 object-cover" />
+              
+              <div className="p-6">
+                <div className="text-sm text-blue-600 font-semibold mb-2">
+                  {post.category}
+                </div>
+                
+                <h3 className="text-xl font-bold text-gray-900 mb-3 hover:text-blue-600 cursor-pointer">
+                  {post.title}
+                </h3>
+                
+                <p className="text-gray-600 mb-4">
+                  {post.excerpt}
+                </p>
+                
+                <div className="flex items-center text-sm text-gray-500">
+                  <User className="w-4 h-4 mr-1" />
+                  <span className="mr-4">{post.author}</span>
+                  <Calendar className="w-4 h-4 mr-1" />
+                  <span>{post.date}</span>
+                </div>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default BlogGrid;