Crea tu tienda _EIGHT_BOOKS

import React from 'react';

const App = () => {
  return (
    <div className="App bg-gradient-to-b from-pink-100 to-purple-100 min-h-screen p-8">
      <header className="text-center mb-8">
        <h1 className="text-6xl font-bold text-purple-900">_EIGHT_BOOKS</h1>
        <p className="text-purple-700 mt-2">Accesorios de Super Mario Bros</p>
      </header>

      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div className="bg-white p-6 rounded-lg shadow-lg transform hover:scale-105 transition-transform">
          <img src="https://placehold.co/300X300" alt="Fundas" className="w-full h-48 object-cover rounded-t-lg" />
          <h2 className="text-xl font-semibold mt-4 text-purple-900">Fundas</h2>
          <p className="text-purple-700 mt-2">Protege tus dispositivos con estilo Super Mario Bros.</p>
        </div>

        <div className="bg-white p-6 rounded-lg shadow-lg transform hover:scale-105 transition-transform">
          <img src="https://placehold.co/300X300" alt="Marcapáginas" className="w-full h-48 object-cover rounded-t-lg" />
          <h2 className="text-xl font-semibold mt-4 text-purple-900">Marcapáginas</h2>
          <p className="text-purple-700 mt-2">Marca tus páginas favoritas con personajes icónicos.</p>
        </div>

        <div className="bg-white p-6 rounded-lg shadow-lg transform hover:scale-105 transition-transform">
          <img src="https://placehold.co/300X300" alt="Coleteros" className="w-full h-48 object-cover rounded-t-lg" />
          <h2 className="text-xl font-semibold mt-4 text-purple-900">Coleteros</h2>
          <p className="text-purple-700 mt-2">Añade un toque de diversión a tu cabello.</p>
        </div>

        <div className="bg-white p-6 rounded-lg shadow-lg transform hover:scale-105 transition-transform">
          <img src="https://placehold.co/300X300" alt="Bolsitas Multiuso" className="w-full h-48 object-cover rounded-t-lg" />
          <h2 className="text-xl font-semibold mt-4 text-purple-900">Bolsitas Multiuso</h2>
          <p className="text-purple-700 mt-2">Perfectas para guardar tus pequeños tesoros.</p>
        </div>

        <div className="bg-white p-6 rounded-lg shadow-lg transform hover:scale-105 transition-transform">
          <img src="https://placehold.co/300X300" alt="Pajaritas" className="w-full h-48 object-cover rounded-t-lg" />
          <h2 className="text-xl font-semibold mt-4 text-purple-900">Pajaritas</h2>
          <p className="text-purple-700 mt-2">Elegantes y llenas de encanto Mario.</p>
        </div>

        <div className="bg-white p-6 rounded-lg shadow-lg transform hover:scale-105 transition-transform">
          <img src="https://placehold.co/300X300" alt="Ofertas Especiales" className="w-full h-48 object-cover rounded-t-lg" />
          <h2 className="text-xl font-semibold mt-4 text-purple-900">Ofertas Especiales</h2>
          <p className="text-purple-700 mt-2">Descubre nuestras increíbles promociones.</p>
        </div>
      </section>

      <footer className="text-center mt-8 text-purple-700">
        <p>© 2025 _EIGHT_BOOKS. Todos los derechos reservados.</p>
      </footer>
    </div>
  );
};

export default App;