صنع رابط متجر عربي

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div className="App bg-gray-100 min-h-screen p-8'>
        <header className="text-center mb-8">
          <h1 className="text-4xl font-bold text-gray-800">متجر صغير</h1>
          <p className="text-gray-600 mt-2">عرض 300 منتج باللغة العربية</p>
        </header>

        <main className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {Array.from({ length: 300 }).map((_, index) => (
            <div key={index} className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-300">
              <img src={`https://placehold.co/300x300?text=Product+${index + 1}`} alt={`Product ${index + 1}`} className="w-full h-48 object-cover rounded-md" />
              <div className="mt-4">
                <h2 className="text-xl font-semibold text-gray-800">منتج {index + 1}</h2>
                <p className="text-gray-600 mt-2">وصف المنتج باللغة العربية هنا.</p>
                <button className="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors duration-300">أضف إلى السلة</button>
              </div>
            </div>
          ))}
        </main>

        <footer className="text-center mt-8 text-gray-600">
          © 2025 متجر صغير. جميع الحقوق محفوظة.
        </footer>
      </div>
    );
  }
}

export default App;