إنشاء متجر إلكتروني عربي

import React from 'react';

const App = () => {
  return (
    <div className="min-h-screen bg-gray-100 text-gray-900">
      <header className="bg-blue-600 text-white py-6">
        <div className="container mx-auto px-4">
          <h1 className="text-3xl font-bold">متجرنا الإلكتروني</h1>
        </div>
      </header>

      <main className="container mx-auto px-4 py-8">
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">منتجاتنا المميزة</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {[1, 2, 3].map((item) => (
              <div key={item} className="bg-white p-6 rounded-lg shadow-lg">
                <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover mb-4" />
                <h3 className="text-xl font-bold mb-2">اسم المنتج {item}</h3>
                <p className="text-gray-700 mb-4">وصف قصير للمنتج.</p>
                <button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">شراء الآن</button>
              </div>
            ))}
          </div>
        </section>

        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">عروض خاصة</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {[1, 2].map((item) => (
              <div key={item} className="bg-white p-6 rounded-lg shadow-lg">
                <img src="https://placehold.co/600x300" alt="Special Offer" className="w-full h-48 object-cover mb-4" />
                <h3 className="text-xl font-bold mb-2">عرض خاص {item}</h3>
                <p className="text-gray-700 mb-4">وصف قصير للعرض الخاص.</p>
                <button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">اطلع على العرض</button>
              </div>
            ))}
          </div>
        </section>

        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">آراء العملاء</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {[1, 2, 3].map((item) => (
              <div key={item} className="bg-white p-6 rounded-lg shadow-lg">
                <p className="text-gray-700 mb-4">"لقد كانت تجربة رائعة مع متجركم الإلكتروني."</p>
                <p className="text-gray-600">- عميل {item}</p>
              </div>
            ))}
          </div>
        </section>

        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">من نحن</h2>
          <p className="text-gray-700">نحن متجر إلكتروني متخصص في تقديم أفضل المنتجات لعملائنا الكرام. نسعى دائمًا لتوفير تجربة تسوق ممتعة وسهلة.</p>
        </section>

        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">اتصل بنا</h2>
          <form className="bg-white p-6 rounded-lg shadow-lg">
            <div className="mb-4">
              <label className="block text-gray-700 mb-2" htmlFor="name">الاسم</label>
              <input type="text" id="name" className="w-full px-4 py-2 border rounded-lg" />
            </div>
            <div className="mb-4">
              <label className="block text-gray-700 mb-2" htmlFor="email">البريد الإلكتروني</label>
              <input type="email" id="email" className="w-full px-4 py-2 border rounded-lg" />
            </div>
            <div className="mb-4">
              <label className="block text-gray-700 mb-2" htmlFor="message">الرسالة</label>
              <textarea id="message" className="w-full px-4 py-2 border rounded-lg" rows="4"></textarea>
            </div>
            <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">إرسال</button>
          </form>
        </section>

        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">تابعنا</h2>
          <div className="flex space-x-4">
            <a href="#" className="text-blue-600 hover:text-blue-700">فيسبوك</a>
            <a href="#" className="text-blue-600 hover:text-blue-700">تويتر</a>
            <a href="#" className="text-blue-600 hover:text-blue-700">إنستغرام</a>
          </div>
        </section>
      </main>

      <footer className="bg-blue-600 text-white py-6">
        <div className="container mx-auto px-4 text-center">
          <p>© 2025 متجرنا الإلكتروني. جميع الحقوق محفوظة.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;