电商网站建设

import React from 'react';

const App = () => {
  return (
    <div className='App bg-gray-100 min-h-screen'>
      <header className='bg-blue-600 text-white p-6 text-center'>
        <h1 className='text-4xl font-bold'>Welcome to Our E-Commerce Site</h1>
      </header>
      <main className='container mx-auto p-4'>
        <section className='grid md:grid-cols-3 gap-4'>
          <div className='bg-white p-6 rounded-lg shadow-lg'>
            <img src='https://placehold.co/300x200' alt='Product' className='w-full h-48 object-cover rounded-md' />
            <h2 className='text-xl font-semibold mt-4'>Product 1</h2>
            <p className='text-gray-600 mt-2'>$19.99</p>
            <button className='mt-4 bg-blue-600 text-white py-2 px-4 rounded-lg'>Add to Cart</button>
          </div>
          <div className='bg-white p-6 rounded-lg shadow-lg'>
            <img src='https://placehold.co/300x200' alt='Product' className='w-full h-48 object-cover rounded-md' />
            <h2 className='text-xl font-semibold mt-4'>Product 2</h2>
            <p className='text-gray-600 mt-2'>$29.99</p>
            <button className='mt-4 bg-blue-600 text-white py-2 px-4 rounded-lg'>Add to Cart</button>
          </div>
          <div className='bg-white p-6 rounded-lg shadow-lg'>
            <img src='https://placehold.co/300x200' alt='Product' className='w-full h-48 object-cover rounded-md' />
            <h2 className='text-xl font-semibold mt-4'>Product 3</h2>
            <p className='text-gray-600 mt-2'>$39.99</p>
            <button className='mt-4 bg-blue-600 text-white py-2 px-4 rounded-lg'>Add to Cart</button>
          </div>
        </section>
        <section className='mt-8 bg-white p-6 rounded-lg shadow-lg'>
          <h2 className='text-2xl font-bold'>Featured Products</h2>
          <div className='grid md:grid-cols-2 gap-4 mt-4'>
            <div className='flex items-center space-x-4'>
              <img src='https://placehold.co/100x100' alt='Featured Product' className='w-24 h-24 object-cover rounded-md' />
              <div>
                <h3 className='text-xl font-semibold'>Featured Product 1</h3>
                <p className='text-gray-600'>$49.99</p>
              </div>
            </div>
            <div className='flex items-center space-x-4'>
              <img src='https://placehold.co/100x100' alt='Featured Product' className='w-24 h-24 object-cover rounded-md' />
              <div>
                <h3 className='text-xl font-semibold'>Featured Product 2</h3>
                <p className='text-gray-600'>$59.99</p>
              </div>
            </div>
          </div>
        </section>
        <section className='mt-8 bg-white p-6 rounded-lg shadow-lg'>
          <h2 className='text-2xl font-bold'>Customer Reviews</h2>
          <div className='mt-4 space-y-4'>
            <div className='bg-gray-50 p-4 rounded-lg'>
              <p className='text-gray-700'>'Great products and fast delivery!'</p>
              <p className='text-sm text-gray-500 mt-2'>- John Doe</p>
            </div>
            <div className='bg-gray-50 p-4 rounded-lg'>
              <p className='text-gray-700'>'Excellent customer service.'</p>
              <p className='text-sm text-gray-500 mt-2'>- Jane Smith</p>
            </div>
          </div>
        </section>
        <section className='mt-8 bg-white p-6 rounded-lg shadow-lg'>
          <h2 className='text-2xl font-bold'>About Us</h2>
          <p className='text-gray-600 mt-4'>We are a leading e-commerce platform offering a wide range of products at competitive prices. Our mission is to provide the best shopping experience for our customers.</p>
        </section>
        <section className='mt-8 bg-white p-6 rounded-lg shadow-lg'>
          <h2 className='text-2xl font-bold'>Contact Us</h2>
          <p className='text-gray-600 mt-4'>Email: [email protected]</p>
          <p className='text-gray-600 mt-2'>Phone: +1 234 567 890</p>
        </section>
      </main>
      <footer className='bg-blue-600 text-white p-6 text-center mt-8'>
        <p>© 2025 E-Commerce Site. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;