Block mockup

import React from 'react';

export default function BlogLayout() {
  return (
    <div className="bg-gray-50 min-h-screen p-6">
      {/* Header */}
      <header className="text-center mb-12">
        <h1 className="text-4xl font-bold">Crafting Business Blog</h1>
        <p className="text-gray-600">Helping You Turn Your Crafts Into Cash</p>
      </header>

      {/* Featured Post */}
      <section className="mb-12">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="bg-white rounded-2xl shadow-lg p-6">
            <img src="https://via.placeholder.com/600" alt="Featured Post" className="rounded-lg mb-4" />
            <h2 className="text-2xl font-bold">How to Price Your Handmade Products for Profit</h2>
            <p className="text-gray-600">Learn the best strategies to price your crafts to ensure maximum profit.</p>
            <button className="bg-blue-600 text-white px-4 py-2 mt-4 rounded">Read More</button>
          </div>
        </div>
      </section>

      {/* Latest Posts */}
      <section className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {[1, 2, 3].map((post) => (
          <div key={post} className="bg-white rounded-2xl shadow-lg p-6">
            <img src="https://via.placeholder.com/300" alt="Post" className="rounded-lg mb-4" />
            <h3 className="text-xl font-bold">Craft Show Tips for Selling More</h3>
            <p className="text-gray-600 text-sm">Maximize your craft show profits with these practical tips.</p>
            <button className="bg-blue-600 text-white px-4 py-2 mt-4 rounded">Read More</button>
          </div>
        ))}
      </section>

      {/* Newsletter */}
      <section className="text-center bg-blue-100 py-12 mt-12 rounded-2xl">
        <h2 className="text-2xl font-bold">Join Our Craft Business Community</h2>
        <p className="text-gray-600">Get weekly tips to grow your craft business and increase sales.</p>
        <input
          type="email"
          placeholder="Enter your email"
          className="border p-2 rounded mt-4 w-1/2"
        />
        <button className="bg-blue-600 text-white px-4 py-2 mt-4 rounded">Subscribe</button>
      </section>
    </div>
  );
}