كود تصميم تطبيق أندرويد لبيع الملابس

import React from 'react';

const App = () => {
  return (
    <div className="min-h-screen bg-gray-100">
      <header className="bg-white shadow">
        <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
          <h1 className="text-3xl font-bold text-gray-900">Fashion Store</h1>
        </div>
      </header>
      <main>
        <div className="max-w-7xl mx-auto py-12 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {Array.from({ length: 7 }).map((_, index) => (
              <div key={index} className="bg-white rounded-lg shadow-lg overflow-hidden">
                <img src="https://placehold.co/300x300" alt="Fashion Item" className="w-full h-48 object-cover" />
                <div className="p-6">
                  <h2 className="text-xl font-semibold text-gray-900">Fashion Item {index + 1}</h2>
                  <p className="mt-2 text-gray-600">Description of the fashion item.</p>
                  <div className="mt-4">
                    <span className="text-lg font-bold text-gray-900">$99.99</span>
                    <button className="ml-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Add to Cart</button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </main>
      <footer className="bg-white shadow mt-12">
        <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
          <p className="text-center text-gray-500">© 2025 Fashion Store. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;