Vende productos de Super Mario Bros

import React from 'react';

const App = () => {
  return (
    <div className='App bg-pastel-blue min-h-screen p-8'>
      <header className='flex justify-between items-center mb-12'>
        <h1 className='text-pastel-pink text-4xl font-bold'>_EIGHT_BOOKS</h1>
        <nav className='space-x-8'>
          <a href='#home' className='text-pastel-yellow hover:text-pastel-pink'>Home</a>
          <a href='#products' className='text-pastel-yellow hover:text-pastel-pink'>Products</a>
          <a href='#about' className='text-pastel-yellow hover:text-pastel-pink'>About</a>
          <a href='#contact' className='text-pastel-yellow hover:text-pastel-pink'>Contact</a>
        </nav>
      </header>

      <section id='home' className='mb-12'>
        <div className='bg-pastel-green p-8 rounded-lg'>
          <h2 className='text-pastel-pink text-3xl mb-4'>Welcome to _EIGHT_BOOKS</h2>
          <p className='text-pastel-yellow'>Discover our exclusive collection of Super Mario Bros themed accessories.</p>
        </div>
      </section>

      <section id='products' className='mb-12'>
        <h2 className='text-pastel-pink text-3xl mb-8'>Our Products</h2>
        <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8'>
          <ProductCard title='Phone Cases' imageUrl='https://placehold.co/300X300' />
          <ProductCard title='Bookmarks' imageUrl='https://placehold.co/300X300' />
          <ProductCard title='Hair Ties' imageUrl='https://placehold.co/300X300' />
          <ProductCard title='Multi-use Bags' imageUrl='https://placehold.co/300X300' />
          <ProductCard title='Bow Ties' imageUrl='https://placehold.co/300X300' />
        </div>
      </section>

      <section id='about' className='mb-12'>
        <div className='bg-pastel-green p-8 rounded-lg'>
          <h2 className='text-pastel-pink text-3xl mb-4'>About Us</h2>
          <p className='text-pastel-yellow'>At _EIGHT_BOOKS, we specialize in bringing the magic of Super Mario Bros to your everyday life with our unique range of products.</p>
        </div>
      </section>

      <section id='contact' className='mb-12'>
        <div className='bg-pastel-green p-8 rounded-lg'>
          <h2 className='text-pastel-pink text-3xl mb-4'>Contact Us</h2>
          <p className='text-pastel-yellow'>Got questions? We've got answers! Reach out to us for any inquiries or assistance.</p>
          <form className='mt-4'>
            <input type='text' placeholder='Your Name' className='rounded-full p-2 pl-4 mb-4 w-full' />
            <input type='email' placeholder='Your Email' className='rounded-full p-2 pl-4 mb-4 w-full' />
            <textarea placeholder='Your Message' className='rounded-lg p-2 pl-4 mb-4 w-full' rows='4'></textarea>
            <button type='submit' className='bg-pastel-pink text-white rounded-full px-8 py-2'>Send</button>
          </form>
        </div>
      </section>

      <footer className='text-center mt-12'>
        <p className='text-pastel-yellow'>© 2025 _EIGHT_BOOKS. All rights reserved.</p>
      </footer>
    </div>
  );
};

const ProductCard = ({ title, imageUrl }) => {
  return (
    <div className='bg-white rounded-lg shadow-lg p-4'>
      <img src={imageUrl} alt={title} className='w-full h-64 object-cover rounded-lg mb-4' />
      <h3 className='text-pastel-pink text-2xl mb-2'>{title}</h3>
      <button className='bg-pastel-blue text-white rounded-full px-8 py-2'>Shop Now</button>
    </div>
  );
};

export default App;