Tawat Market 阿尔及利亚市场

import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className='App'>
      {/* Splash Screen */}
      <section className='flex flex-col items-center justify-center h-screen bg-blue-50'>
        <img src='https://placehold.co/200X200' alt='Logo' className='mb-4' />
        <h1 className='text-3xl font-bold text-blue-800'>Welcome to Tawat Market</h1>
      </section>

      {/* Home Screen */}
      <section className='p-8 bg-gray-100'>
        <h2 className='text-2xl font-semibold text-gray-800 mb-6'>Categories</h2>
        <div className='grid grid-cols-2 gap-4'>
          {['Cars', 'Electronics', 'Clothing', 'Furniture', 'Books', 'Kids', 'Others'].map((category) => (
            <div key={category} className='p-6 bg-white rounded-lg shadow-md text-center'>
              <h3 className='text-lg font-medium'>{category}</h3>
            </div>
          ))}
        </div>
        <div className='flex justify-between mt-8'>
          <button className='bg-green-500 text-white px-6 py-2 rounded-lg'>Login for Sellers</button>
          <button className='bg-blue-500 text-white px-6 py-2 rounded-lg'>Add Your Listing</button>
        </div>
      </section>

      {/* Seller Login/Sign-up Screen */}
      <section className='p-8 bg-white'>
        <h2 className='text-2xl font-semibold text-gray-800 mb-6'>Seller Login/Sign-up</h2>
        <form className='max-w-md mx-auto'>
          <input type='email' placeholder='Email' className='w-full p-2 mb-4 border rounded-lg' />
          <input type='password' placeholder='Password' className='w-full p-2 mb-4 border rounded-lg' />
          <button type='submit' className='w-full bg-blue-500 text-white p-2 rounded-lg'>Login/Sign-up</button>
        </form>
      </section>

      {/* Add Product Screen */}
      <section className='p-8 bg-gray-50'>
        <h2 className='text-2xl font-semibold text-gray-800 mb-6'>Add Product</h2>
        <form className='max-w-md mx-auto'>
          <input type='text' placeholder='Product Name' className='w-full p-2 mb-4 border rounded-lg' />
          <textarea placeholder='Description' className='w-full p-2 mb-4 border rounded-lg'></textarea>
          <input type='number' placeholder='Price' className='w-full p-2 mb-4 border rounded-lg' />
          <select className='w-full p-2 mb-4 border rounded-lg'>
            <option>Select Category</option>
            {['Cars', 'Electronics', 'Clothing', 'Furniture', 'Books', 'Kids', 'Others'].map((category) => (
              <option key={category}>{category}</option>
            ))}
          </select>
          <input type='tel' placeholder='Phone Number' className='w-full p-2 mb-4 border rounded-lg' />
          <button type='submit' className='w-full bg-green-500 text-white p-2 rounded-lg'>Upload Product</button>
        </form>
      </section>

      {/* Category Screen */}
      <section className='p-8 bg-white'>
        <h2 className='text-2xl font-semibold text-gray-800 mb-6'>Category</h2>
        <div className='grid grid-cols-2 gap-4'>
          {Array.from({ length: 4 }).map((_, index) => (
            <div key={index} className='p-4 bg-gray-50 rounded-lg shadow-sm'>
              <img src='https://placehold.co/150X150' alt='Product' className='w-full mb-2' />
              <h3 className='text-lg font-medium'>Product {index + 1}</h3>
              <p className='text-sm text-gray-600'>$100</p>
            </div>
          ))}
        </div>
      </section>

      {/* Product Details Screen */}
      <section className='p-8 bg-gray-100'>
        <h2 className='text-2xl font-semibold text-gray-800 mb-6'>Product Details</h2>
        <div className='max-w-md mx-auto bg-white p-6 rounded-lg shadow-md'>
          <img src='https://placehold.co/300X300' alt='Product' className='w-full mb-4' />
          <h3 className='text-xl font-bold mb-2'>Product Name</h3>
          <p className='text-gray-700 mb-4'>Description of the product goes here.</p>
          <p className='text-lg font-semibold mb-4'>$100</p>
          <button className='w-full bg-blue-500 text-white p-2 rounded-lg'>Contact Seller</button>
        </div>
      </section>

      {/* Copyright */}
      <footer className='text-center p-4 bg-gray-800 text-white'>
        © 2025 Tawat Market. All rights reserved.
      </footer>
    </div>
  );
};

export default App;