Shopping for Books

import React from 'react';

const App = () => {
  return (
    <div className="min-h-screen bg-gray-100">
      <header className="bg-blue-600 text-white p-6">
        <h1 className="text-3xl font-bold">Shoping Book</h1>
      </header>
      <main className="container mx-auto p-4">
        <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {Array.from({ length: 7 }).map((_, index) => (
            <div key={index} className="bg-white rounded-lg shadow-lg p-6">
              <img src="https://placehold.co/300x300" alt="Placeholder" className="w-full h-48 object-cover rounded-t-lg" />
              <h2 className="text-xl font-semibold mt-4">Book Title {index + 1}</h2>
              <p className="text-gray-600 mt-2">Author Name</p>
              <p className="text-gray-600 mt-2">$19.99</p>
              <button className="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Add to Cart</button>
            </div>
          ))}
        </section>
      </main>
      <footer className="bg-blue-600 text-white p-6 mt-8">
        <p className="text-center">© 2025 Shoping Book. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;