rapilist

Plataforma para gestionar tu negocio y crear tu catálogo digital

Ejemplo

Sub categoria dos

Nueva Sub Categoría

Otro ejemplo

Uno

Dos

Tres

🌎 Info sobre nuestra tienda

<div class="w-full min-h-screen flex flex-col items-center justify-center px-4 py-12 gap-16" style="background-color: #5e35b1; color: #ffffff"> <!-- Título principal --> <section id="inicio" class="text-center max-w-3xl" data-aos="fade-up"> <h1 class="text-4xl md:text-5xl font-bold mb-4 transition-all duration-500">🚀 Rapilist</h1> <p class="text-lg md:text-xl transition-opacity duration-500"> Plataforma moderna para gestionar tu negocio y crear tu catálogo digital de forma rápida y sencilla. </p> </section> <!-- Imagen si existe --> <section class="w-full max-w-5xl flex justify-center items-center" data-aos="fade-up"> <img src="/assets/rapilist-mockup.png" alt="Vista previa de la plataforma Rapilist" class="w-full max-w-md rounded-2xl shadow-lg" /> </section> <!-- Sección de beneficios --> <section id="beneficios" class="w-full max-w-4xl text-center space-y-8" data-aos="fade-up"> <h2 class="text-3xl font-semibold">✨ ¿Por qué elegir Rapilist?</h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm md:text-base"> <div class="p-4 rounded-xl shadow-xl transition-transform duration-300 hover:-translate-y-1" style="background-color: #000000"> <p>Catálogo digital 100% personalizado para tu negocio.</p> </div> <div class="p-4 rounded-xl shadow-xl transition-transform duration-300 hover:-translate-y-1" style="background-color: #000000"> <p>Gestión centralizada de productos y ventas.</p> </div> <div class="p-4 rounded-xl shadow-xl transition-transform duration-300 hover:-translate-y-1" style="background-color: #000000"> <p>Interfaz intuitiva y adaptable a cualquier dispositivo.</p> </div> </div> </section> <!-- Llamado a la acción --> <section class="text-center" data-aos="fade-up"> <h3 class="text-2xl font-medium mb-4">📲 Comienza ahora con Rapilist</h3> <button class="px-6 py-3 rounded-full font-semibold transition duration-300 hover:scale-105" style="background-color: #000000; color: #ffffff"> Crear mi catálogo </button> </section> </div>

💥 Página personalizada

"<p><strong>¿Quieres una página web única sin complicaciones? </strong></p><p></p><p>¡Lo puedes hacer tú mismo de forma automática! Nuestra plataforma te permite crear páginas personalizadas en pocos pasos, adaptando el diseño, el contenido y las funcionalidades a tus necesidades, sin tener conocimientos técnicos.</p><p></p><p>Simplement<strong style="color: rgb(99, 102, 241);">e personaliza el diseño que más te guste,</strong> agrega tu contenido y ajusta los detalles a tu gusto. ¡En cuestión de minutos tendrás una página web completamente personalizada y lista para publicar!</p><p></p><p><strong class="ql-size-large" style="color: rgb(255, 255, 255); background-color: rgb(132, 204, 22);">100% personalizable en minutos</strong></p>"

Test de page

<div class="bg-custom-light text-gray-800 min-h-screen overflow-x-hidden"> <style> .bg-custom-light { background-color: #efebe9; } .bg-custom-dark { background-color: #d7ccc8; } .text-custom-dark { color: #795548; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } </style> <!-- Hero Section --> <header class="py-12 sm:py-24 px-4 sm:px-8 md:px-16 lg:px-32"> <div class="max-w-6xl mx-auto text-center space-y-6" data-aos="fade-down"> <h1 class="text-4xl sm:text-6xl md:text-7xl font-bold mb-4 text-custom-dark"> Información de <span class="bg-gradient-to-r from-[#795548] to-[#8D6E63] text-transparent bg-clip-text">Compra</span> </h1> <p class="text-lg sm:text-xl text-gray-700 max-w-2xl mx-auto leading-relaxed">Productos digitales enviados en formato PDF</p> </div> </header> <!-- Información del Producto --> <section class="py-12 sm:py-24 px-4 sm:px-8 md:px-16 lg:px-32"> <div class="max-w-6xl mx-auto"> <div class="bg-white/70 backdrop-blur-lg rounded-3xl p-8 sm:p-12 shadow-xl" data-aos="fade-up"> <div class="flex items-center mb-8"> <div class="bg-[#795548] p-4 rounded-full mr-4"> <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" /> </svg> </div> <h2 class="text-3xl sm:text-4xl font-bold text-custom-dark">Sobre los Productos</h2> </div> <div class="space-y-6 text-gray-700"> <p class="leading-relaxed"> Todos los productos de la tienda son digitales. Se envían en formato PDF mediante e-mail (el mismo que proporcionas cuando realizas la compra). </p> <p class="leading-relaxed"> En caso de querer personalizar tus infografías, se debe mandar la información con tus datos personales/profesionales junto con el comprobante de pago al número de WhatsApp que aparece cuando confirmas tu pedido. </p> <p class="leading-relaxed"> Los packs de infografías tienen precios promocionales 😊. En caso de querer mezclar infografías que no estén hechas en pack, podés escribirme al WhatsApp y coordinamos. </p> </div> </div> </div> </section> <!-- Proceso de Compra --> <section class="py-12 sm:py-24 px-4 sm:px-8 md:px-16 lg:px-32 bg-custom-dark"> <div class="max-w-6xl mx-auto"> <div class="bg-white/70 backdrop-blur-lg rounded-3xl p-8 sm:p-12 shadow-xl" data-aos="fade-up"> <div class="flex items-center mb-8"> <div class="bg-[#795548] p-4 rounded-full mr-4"> <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> </svg> </div> <h2 class="text-3xl sm:text-4xl font-bold text-custom-dark">Proceso de Compra</h2> </div> <div class="space-y-6"> <div class="flex items-start space-x-4"> <div class="bg-[#795548] p-2 rounded-full mt-1"> <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </div> <p class="text-gray-700">Todos los productos se abonan mediante transferencia al alias: <span class="font-bold">luciaguido.mp</span></p> </div> <div class="flex items-start space-x-4"> <div class="bg-[#795548] p-2 rounded-full mt-1"> <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </div> <p class="text-gray-700">Envía el comprobante de pago + la información para personalizar el producto al WhatsApp</p> </div> <div class="flex items-start space-x-4"> <div class="bg-[#795548] p-2 rounded-full mt-1"> <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </div> <p class="text-gray-700">Recibirás el archivo en formato PDF por correo electrónico dentro de las 24 a 48 horas hábiles</p> </div> </div> </div> </div> </section> <!-- Información Importante --> <section class="py-12 sm:py-24 px-4 sm:px-8 md:px-16 lg:px-32"> <div class="max-w-6xl mx-auto"> <div class="bg-white/70 backdrop-blur-lg rounded-3xl p-8 sm:p-12 shadow-xl" data-aos="fade-up"> <div class="flex items-center mb-8"> <div class="bg-[#795548] p-4 rounded-full mr-4"> <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </div> <h2 class="text-3xl sm:text-4xl font-bold text-custom-dark">Información Importante</h2> </div> <div class="space-y-6 text-gray-700"> <p class="flex items-center"> <svg class="w-5 h-5 text-[#795548] mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> </svg> Los productos se enviarán a la dirección de correo que proporcionas durante la compra </p> <p class="flex items-center"> <svg class="w-5 h-5 text-[#795548] mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> </svg> Verificá que la dirección de correo sea correcta para recibir el archivo sin demoras </p> <p class="flex items-center"> <svg class="w-5 h-5 text-[#795548] mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> </svg> No se realizan devoluciones una vez enviado el contenido </p> <p class="flex items-center"> <svg class="w-5 h-5 text-[#795548] mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> </svg> Los packs tienen precios promocionales </p> </div> </div> </div> </section> <!-- WhatsApp Contacto --> <section class="py-12 sm:py-24 px-4 sm:px-8 md:px-16 lg:px-32 relative overflow-visible"> <div class="max-w-6xl mx-auto relative"> <!-- Título --> <div class="text-center space-y-6 mb-12" data-aos="fade-up"> <h2 class="text-3xl sm:text-4xl font-bold text-custom-dark">Contacto <span class="text-[#795548]">WhatsApp</span></h2> <p class="text-gray-700">Para consultas y envío de comprobantes</p> </div> <!-- Tarjeta Principal de WhatsApp --> <div class="relative"> <a href="https://wa.me/5491155953327" target="_blank" rel="noopener noreferrer" class="block mx-auto max-w-md bg-white rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2" data-aos="zoom-in" > <div class="flex items-center justify-center space-x-6"> <div class="bg-[#25D366] p-4 rounded-full animate-pulse"> <svg class="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 24 24"> <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" /> </svg> </div> <div class="text-center"> <div class="text-2xl font-bold text-custom-dark mb-2">+54 11 5595-3327</div> <div class="text-[#25D366] font-semibold">Enviar mensaje</div> </div> </div> </a> </div> </div> <!-- Botón flotante de WhatsApp --> <div class="fixed bottom-8 right-8 z-[9999]"> <a href="https://wa.me/5491155953327" target="_blank" rel="noopener noreferrer" class="block bg-[#25D366] hover:bg-[#128C7E] p-4 rounded-full shadow-lg transition-all duration-300 hover:scale-110" > <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24"> <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" /> </svg> </a> </div> </section> <!-- Footer --> <footer class="bg-custom-dark py-8"> <div class="container mx-auto px-4 text-center text-gray-700"><p>© 2024 Productos Digitales. Todos los derechos reservados.</p></div> </footer> </div>