إنشاء تطبيق بيع منتجات

import React from 'react';

const App = () => {
  return (
    <div className="App min-h-screen bg-gradient-to-r from-blue-500 to-purple-600 text-white">
      {/* Header */}
      <header className="flex justify-between items-center p-6 bg-black bg-opacity-20">
        <h1 className="text-4xl font-bold">Product Store</h1>
        <nav>
          <ul className="flex space-x-4">
            <li>Home</li>
            <li>Products</li>
            <li>About</li>
            <li>Contact</li>
          </ul>
        </nav>
      </header>

      {/* Hero Section */}
      <section className="flex flex-col items-center justify-center h-96">
        <h2 className="text-6xl font-bold">Welcome to Our Store</h2>
        <p className="text-xl mt-4">Find the best products at the best prices</p>
        <button className="mt-8 px-6 py-3 bg-white text-black rounded-lg hover:bg-gray-200">Shop Now</button>
      </section>

      {/* Featured Products */}
      <section className="p-8">
        <h3 className="text-3xl font-bold mb-6">Featured Products</h3>
        <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 text-gray-800">
              <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-lg" />
              <h4 className="text-xl font-bold mt-4">Product {item}</h4>
              <p className="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              <button className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">Add to Cart</button>
            </div>
          ))}
        </div>
      </section>

      {/* Testimonials */}
      <section className="p-8 bg-black bg-opacity-20">
        <h3 className="text-3xl font-bold mb-6">What Our Customers Say</h3>
        <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 text-gray-800">
              <p className="italic">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo."</p>
              <p className="mt-4 font-bold">- Customer {item}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Newsletter */}
      <section className="flex flex-col items-center p-8">
        <h3 className="text-3xl font-bold mb-4">Subscribe to Our Newsletter</h3>
        <p className="text-xl mb-6">Get the latest updates and exclusive offers</p>
        <form className="flex">
          <input type="email" placeholder="Enter your email" className="px-4 py-2 rounded-l-lg" />
          <button type="submit" className="px-6 py-2 bg-blue-500 text-white rounded-r-lg hover:bg-blue-600">Subscribe</button>
        </form>
      </section>

      {/* Footer */}
      <footer className="p-6 bg-black bg-opacity-20">
        <p className="text-center">© 2025 Product Store. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;