Globatienda: Plataforma Digital

import React from 'react';

const App = () => {
  return (
    <div className="flex flex-col min-h-screen bg-gradient-to-r from-blue-50 to-purple-50">
      {/* Header */}
      <header className="bg-gradient-to-r from-blue-700 to-purple-700 text-white py-6">
        <div className="container mx-auto px-4">
          <h1 className="text-4xl font-bold">Globatienda</h1>
          <p className="mt-2 text-lg">Tu Plataforma para Impulsar Negocios Digitales</p>
        </div>
      </header>

      {/* Introduction */}
      <section className="container mx-auto px-4 py-8">
        <p className="text-gray-700 leading-relaxed">
          Globatienda no es solo una tienda virtual; es una plataforma robusta diseñada para que emprendedores y pequeños negocios puedan vender y promocionar sus productos y servicios online.
        </p>
      </section>

      {/* Maintenance Notice */}
      <section className="bg-yellow-50 py-6">
        <div className="container mx-auto px-4">
          <p className="text-yellow-800 text-center">
            Actualmente en mantenimiento (www.globatienda.com), Globatienda es propiedad de Technosysa (www.technosysa.com), empresa con matrícula mercantil número 02726353 de la Cámara de Comercio de Bogotá, y cuenta con todos sus derechos de marca y dominio debidamente registrados.
          </p>
        </div>
      </section>

      {/* Target Audience */}
      <section className="container mx-auto px-4 py-8">
        <h2 className="text-3xl font-bold text-blue-800 mb-4">¿A quién está dirigida Globatienda?</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-semibold text-purple-700">Comprar productos o servicios</h3>
            <p className="text-gray-600 mt-2">De forma segura y eficiente.</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-semibold text-purple-700">Promocionar y vender</h3>
            <p className="text-gray-600 mt-2">Consolidando tu presencia local con proyección nacional e internacional.</p>
          </div>
        </div>
      </section>

      {/* Value-Added Services */}
      <section className="bg-gradient-to-r from-blue-50 to-purple-50 py-8">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-blue-800 mb-6">Servicios de Valor Agregado</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold text-purple-700">Procesador de pagos online</h3>
              <p className="text-gray-600 mt-2">Facilita transacciones seguras y eficientes.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold text-purple-700">Publicidad en Globanuncio.com</h3>
              <p className="text-gray-600 mt-2">Aprovecha nuestra plataforma de anuncios para dar mayor visibilidad a tus ofertas.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold text-purple-700">Publicación y venta de productos</h3>
              <p className="text-gray-600 mt-2">Alojamiento de tu información y datos, con la opción de asociar un subdominio o dominio propio según tu preferencia.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Business Models */}
      <section className="container mx-auto px-4 py-8">
        <h2 className="text-3xl font-bold text-blue-800 mb-6">Modelos de Negocio Flexibles</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-semibold text-purple-700">Contrato Cliente Proveedor</h3>
            <p className="text-gray-600 mt-2">Este modelo está diseñado para clientes que desean ofrecer sus productos a un precio competitivo, por debajo del precio de venta normal.</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-semibold text-purple-700">Contrato Cliente Vendedor</h3>
            <p className="text-gray-600 mt-2">El modelo Cliente Vendedor te permite establecer tus propios precios de venta y aprovechar todas las funcionalidades de la plataforma.</p>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gradient-to-r from-blue-700 to-purple-700 text-white py-6 mt-auto">
        <div className="container mx-auto px-4 text-center">
          <p>© 2025 Globatienda. Todos los derechos reservados.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;