|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>BookBot - Asistente de catálogo de libros con IA</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%); |
|
|
} |
|
|
|
|
|
.feature-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.chat-bubble { |
|
|
position: relative; |
|
|
border-radius: 1rem; |
|
|
} |
|
|
|
|
|
.chat-bubble:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -10px; |
|
|
left: 20px; |
|
|
border-width: 10px 10px 0; |
|
|
border-style: solid; |
|
|
border-color: #f3f4f6 transparent; |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: floating 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes floating { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-15px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.language-selector { |
|
|
position: fixed; |
|
|
top: 100px; |
|
|
right: 20px; |
|
|
z-index: 1000; |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.lang-btn { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
background: white; |
|
|
cursor: pointer; |
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.lang-btn:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.lang-btn.active { |
|
|
background: #3B82F6; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.hidden-lang { |
|
|
display: none; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<div class="language-selector"> |
|
|
<div class="lang-btn active" id="btn-es">ES</div> |
|
|
<div class="lang-btn" id="btn-en">EN</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="bg-white shadow-sm fixed w-full z-10"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-book-open text-blue-600 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-900">BookBot</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center space-x-8"> |
|
|
<a href="#features" class="lang-es text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Características</a> |
|
|
<a href="#features" class="lang-en hidden-lang text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Features</a> |
|
|
|
|
|
<a href="#how-it-works" class="lang-es text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Cómo funciona</a> |
|
|
<a href="#how-it-works" class="lang-en hidden-lang text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">How It Works</a> |
|
|
|
|
|
<a href="#testimonials" class="lang-es text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Testimonios</a> |
|
|
<a href="#testimonials" class="lang-en hidden-lang text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Testimonials</a> |
|
|
|
|
|
<a href="https://v0-book-catalog-chat-bot.vercel.app/" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Probar ahora</a> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center sm:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden sm:hidden" id="mobile-menu"> |
|
|
<div class="pt-2 pb-3 space-y-1 px-4 bg-white shadow-md"> |
|
|
<a href="#features" class="lang-es block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Características</a> |
|
|
<a href="#features" class="lang-en hidden-lang block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Features</a> |
|
|
|
|
|
<a href="#how-it-works" class="lang-es block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Cómo funciona</a> |
|
|
<a href="#how-it-works" class="lang-en hidden-lang block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">How It Works</a> |
|
|
|
|
|
<a href="#testimonials" class="lang-es block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Testimonios</a> |
|
|
<a href="#testimonials" class="lang-en hidden-lang block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Testimonials</a> |
|
|
|
|
|
<a href="https://v0-book-catalog-chat-bot.vercel.app/" target="_blank" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-blue-600 hover:bg-blue-700">Probar ahora</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 gradient-bg text-white"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="md:flex md:items-center md:justify-between"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0"> |
|
|
<h1 class="lang-es text-4xl md:text-5xl font-bold leading-tight mb-4">Descubre tu próximo libro favorito</h1> |
|
|
<h1 class="lang-en hidden-lang text-4xl md:text-5xl font-bold leading-tight mb-4">Discover Your Next Favorite Book</h1> |
|
|
|
|
|
<p class="lang-es text-xl mb-8 text-blue-100">BookBot es tu bibliotecario personal con IA, que te ayuda a encontrar el libro perfecto de nuestro extenso catálogo.</p> |
|
|
<p class="lang-en hidden-lang text-xl mb-8 text-blue-100">BookBot is your AI-powered personal librarian, helping you find the perfect book from our extensive catalog.</p> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<a href="https://v0-book-catalog-chat-bot.vercel.app/" target="_blank" class="lang-es bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-semibold text-center transition duration-300">Probar BookBot ahora</a> |
|
|
<a href="https://v0-book-catalog-chat-bot.vercel.app/" target="_blank" class="lang-en hidden-lang bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-semibold text-center transition duration-300">Try BookBot Now</a> |
|
|
|
|
|
<a href="#features" class="lang-es border-2 border-white text-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-lg font-semibold text-center transition duration-300">Saber más</a> |
|
|
<a href="#features" class="lang-en hidden-lang border-2 border-white text-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-lg font-semibold text-center transition duration-300">Learn More</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative w-full max-w-md"> |
|
|
<div class="absolute -top-10 -left-10 w-32 h-32 bg-blue-400 rounded-full opacity-20"></div> |
|
|
<div class="absolute -bottom-10 -right-10 w-32 h-32 bg-purple-400 rounded-full opacity-20"></div> |
|
|
<div class="relative bg-white rounded-xl shadow-xl overflow-hidden"> |
|
|
<div class="bg-gray-100 px-4 py-3 flex items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<div class="ml-4 text-sm text-gray-600">BookBot Chat</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="mb-4"> |
|
|
<div class="bg-gray-200 rounded-lg p-3 max-w-xs"> |
|
|
<p class="lang-es text-gray-800">¡Hola! Soy BookBot. ¿Cómo puedo ayudarte a encontrar tu próxima lectura?</p> |
|
|
<p class="lang-en hidden-lang text-gray-800">Hi! I'm BookBot. How can I help you find your next read?</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-end mb-4"> |
|
|
<div class="bg-blue-600 rounded-lg p-3 max-w-xs"> |
|
|
<p class="lang-es text-white">Busco un libro de ciencia ficción con protagonistas femeninas fuertes</p> |
|
|
<p class="lang-en hidden-lang text-white">I'm looking for a sci-fi book with strong female characters</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<div class="bg-gray-200 rounded-lg p-3 max-w-xs"> |
|
|
<p class="lang-es text-gray-800">Según tu solicitud, te recomiendo "El Largo Viaje a un Pequeño Planeta Iracundo" de Becky Chambers. ¿Quieres más sugerencias?</p> |
|
|
<p class="lang-en hidden-lang text-gray-800">Based on your request, I recommend "The Long Way to a Small, Angry Planet" by Becky Chambers. Would you like more suggestions?</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-100 rounded-lg p-3"> |
|
|
<p class="lang-es text-gray-500 text-sm">Escribe tu mensaje...</p> |
|
|
<p class="lang-en hidden-lang text-gray-500 text-sm">Type your message...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-16 px-4 sm:px-6 lg:px-8 bg-white"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="lang-es text-3xl font-bold text-gray-900 mb-4">Características principales</h2> |
|
|
<h2 class="lang-en hidden-lang text-3xl font-bold text-gray-900 mb-4">Powerful Features</h2> |
|
|
|
|
|
<p class="lang-es text-xl text-gray-600 max-w-3xl mx-auto">BookBot combina inteligencia artificial con una extensa base de datos de libros para revolucionar cómo descubres literatura.</p> |
|
|
<p class="lang-en hidden-lang text-xl text-gray-600 max-w-3xl mx-auto">BookBot combines AI intelligence with an extensive book database to revolutionize how you discover literature.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
<div class="feature-card bg-gray-50 p-8 rounded-xl transition duration-300"> |
|
|
<div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-robot text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="lang-es text-xl font-semibold mb-3">Recomendaciones con IA</h3> |
|
|
<h3 class="lang-en hidden-lang text-xl font-semibold mb-3">AI-Powered Recommendations</h3> |
|
|
|
|
|
<p class="lang-es text-gray-600">Nuestra IA avanzada entiende tus preferencias y sugiere libros adaptados a ti, aprendiendo de cada interacción.</p> |
|
|
<p class="lang-en hidden-lang text-gray-600">Our advanced AI understands your preferences and suggests books tailored just for you, learning from each interaction.</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-gray-50 p-8 rounded-xl transition duration-300"> |
|
|
<div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-book text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="lang-es text-xl font-semibold mb-3">Amplia base de datos</h3> |
|
|
<h3 class="lang-en hidden-lang text-xl font-semibold mb-3">Vast Book Database</h3> |
|
|
|
|
|
<p class="lang-es text-gray-600">Accede a miles de títulos de todos los géneros, desde bestsellers hasta joyas ocultas, todo al alcance de tu mano.</p> |
|
|
<p class="lang-en hidden-lang text-gray-600">Access thousands of titles across all genres, from bestsellers to hidden gems, all at your fingertips.</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-gray-50 p-8 rounded-xl transition duration-300"> |
|
|
<div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-comments text-green-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="lang-es text-xl font-semibold mb-3">Conversaciones naturales</h3> |
|
|
<h3 class="lang-en hidden-lang text-xl font-semibold mb-3">Natural Conversations</h3> |
|
|
|
|
|
<p class="lang-es text-gray-600">Habla naturalmente como lo harías con un bibliotecario. Sin filtros de búsqueda complicados, solo dile a BookBot qué estás buscando.</p> |
|
|
<p class="lang-en hidden-lang text-gray-600">Chat naturally as you would with a librarian. No complicated search filters - just tell BookBot what you're looking for.</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-gray-50 p-8 rounded-xl transition duration-300"> |
|
|
<div class="w-16 h-16 bg-orange-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-shield-alt text-orange-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="lang-es text-xl font-semibold mb-3">Sin APIs externas</h3> |
|
|
<h3 class="lang-en hidden-lang text-xl font-semibold mb-3">No External APIs</h3> |
|
|
|
|
|
<p class="lang-es text-gray-600">Todo el procesamiento se hace localmente sin necesidad de conectar con servicios de IA externos, garantizando tu privacidad.</p> |
|
|
<p class="lang-en hidden-lang text-gray-600">All processing is done locally without connecting to external AI services, ensuring your privacy.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="how-it-works" class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="lang-es text-3xl font-bold text-gray-900 mb-4">Cómo funciona BookBot</h2> |
|
|
<h2 class="lang-en hidden-lang text-3xl font-bold text-gray-900 mb-4">How BookBot Works</h2> |
|
|
|
|
|
<p class="lang-es text-xl text-gray-600 max-w-3xl mx-auto">Obtener tu recomendación de libro perfecta está a solo unos pasos.</p> |
|
|
<p class="lang-en hidden-lang text-xl text-gray-600 max-w-3xl mx-auto">Getting your perfect book recommendation is just a few simple steps away.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 mb-12"> |
|
|
<div class="text-center"> |
|
|
<div class="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4">1</div> |
|
|
<h3 class="lang-es text-xl font-semibold mb-2">Comienza a chatear</h3> |
|
|
<h3 class="lang-en hidden-lang text-xl font-semibold mb-2">Start Chatting</h3> |
|
|
|
|
|
<p class="lang-es text-gray-600">Abre BookBot y comienza la conversación describiendo lo que estás buscando.</p> |
|
|
<p class="lang-en hidden-lang text-gray-600">Open BookBot and begin your conversation by describing what you're looking for.</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4">2</div> |
|
|
<h3 class="lang-es text-xl font-semibold mb-2">Refina tu búsqueda</h3> |
|
|
<h3 class="lang-en hidden-lang text-xl font-semibold mb-2">Refine Your Search</h3> |
|
|
|
|
|
<p class="lang-es text-gray-600">Responde a las preguntas de seguimiento de BookBot para afinar las recomendaciones perfectas.</p> |
|
|
<p class="lang-en hidden-lang text-gray-600">Answer BookBot's follow-up questions to narrow down the perfect recommendations.</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4">3</div> |
|
|
<h3 class="lang-es text-xl font-semibold mb-2">Descubre y disfruta</h3> |
|
|
<h3 class="lang-en hidden-lang text-xl font-semibold mb-2">Discover & Enjoy</h3> |
|
|
|
|
|
<p class="lang-es text-gray-600">Obtén sugerencias de libros personalizadas con resúmenes y razones por las que te encantarán.</p> |
|
|
<p class="lang-en hidden-lang text-gray-600">Get personalized book suggestions with summaries and reasons why you'll love them.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/2 p-8 md:p-12 flex items-center"> |
|
|
<div> |
|
|
<h3 class="lang-es text-2xl font-bold text-gray-900 mb-4">Experimenta el futuro del descubrimiento de libros</h3> |
|
|
<h3 class="lang-en hidden-lang text-2xl font-bold text-gray-900 mb-4">Experience the Future of Book Discovery</h3> |
|
|
|
|
|
<p class="lang-es text-gray-600 mb-6">BookBot transforma cómo encuentras libros combinando el conocimiento de un bibliotecario con la conveniencia de la tecnología de IA. No más desplazamientos interminables por listas: solo dile a BookBot qué deseas leer y obtén recomendaciones perfectas al instante.</p> |
|
|
<p class="lang-en hidden-lang text-gray-600 mb-6">BookBot transforms how you find books by combining the knowledge of a librarian with the convenience of AI technology. No more endless scrolling through lists - just tell BookBot what you're in the mood for and get perfect recommendations instantly.</p> |
|
|
|
|
|
<a href="https://v0-book-catalog-chat-bot.vercel.app/" target="_blank" class="lang-es inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition duration-300">Comienza tu viaje literario</a> |
|
|
<a href="https://v0-book-catalog-chat-bot.vercel.app/" target="_blank" class="lang-en hidden-lang inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition duration-300">Start Your Book Journey</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="h-full bg-gray-100 flex items-center justify-center p-8"> |
|
|
<div class="relative w-full max-w-md floating"> |
|
|
<img src="https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" alt="Person reading book" class="rounded-lg shadow-md w-full h-auto"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="testimonials" class="py-16 px-4 sm:px-6 lg:px-8 bg-white"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="lang-es text-3xl font-bold text-gray-900 mb-4">Lo que dicen los lectores</h2> |
|
|
<h2 class="lang-en hidden-lang text-3xl font-bold text-gray-900 mb-4">What Readers Are Saying</h2> |
|
|
|
|
|
<p class="lang-es text-xl text-gray-600 max-w-3xl mx-auto">No solo tomes nuestra palabra, escucha a nuestros usuarios satisfechos.</p> |
|
|
<p class="lang-en hidden-lang text-xl text-gray-600 max-w-3xl mx-auto">Don't just take our word for it - hear from our satisfied users.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-50 p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold">Ana Martínez</h4> |
|
|
<p class="lang-es text-gray-500 text-sm">Lectora ávida</p> |
|
|
<p class="lang-en hidden-lang text-gray-500 text-sm">Avid Reader</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="lang-es text-gray-600">"BookBot me recomendó un libro que nunca había escuchado antes y ahora es uno de mis favoritos. ¡La IA realmente entiende mis gustos!"</p> |
|
|
<p class="lang-en hidden-lang text-gray-600">"BookBot recommended me a book I'd never heard of before, and it's now one of my all-time favorites. The AI really understands my taste!"</p> |
|
|
<div class="mt-4 text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold">José González</h4> |
|
|
<p class="lang-es text-gray-500 text-sm">Organizador de club de lectura</p> |
|
|
<p class="lang-en hidden-lang text-gray-500 text-sm">Book Club Organizer</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="lang-es text-gray-600">"Uso BookBot para seleccionar lecturas para mi club de lectura. Me ha ahorrado horas de investigación y a todos les encantan las elecciones."</p> |
|
|
<p class="lang-en hidden-lang text-gray-600">"I use BookBot to find selections for my book club. It's saved me hours of research and everyone loves the picks we get."</p> |
|
|
<div class="mt-4 text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold">Luisa Fernández</h4> |
|
|
<p class="lang-es text-gray-500 text-sm">Bibliotecaria</p> |
|
|
<p class="lang-en hidden-lang text-gray-500 text-sm">Librarian</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="lang-es text-gray-600">"Como bibliotecaria, estoy impresionada por el conocimiento de BookBot. Lo mejor es que no necesita conexión a servicios externos, todo funciona localmente."</p> |
|
|
<p class="lang-en hidden-lang text-gray-600">"As a librarian, I'm impressed by BookBot's knowledge. The best part is it doesn't need external service connections, everything works locally."</p> |
|
|
<div class="mt-4 text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 px-4 sm:px-6 lg:px-8 gradient-bg text-white"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h2 class="lang-es text-3xl md:text-4xl font-bold mb-6">¿Listo para transformar tu experiencia de lectura?</h2> |
|
|
<h2 class="lang-en hidden-lang text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Reading Experience?</h2> |
|
|
|
|
|
<p class="lang-es text-xl mb-8 text-blue-100">Únete a miles de lectores que han descubierto su próximo libro favorito con BookBot. Todo procesado localmente, sin conexión a APIs externas.</p> |
|
|
<p class="lang-en hidden-lang text-xl mb-8 text-blue-100">Join thousands of readers who have discovered their next favorite book with BookBot. All processed locally, no external API connections.</p> |
|
|
|
|
|
<a href="https://v0-book-catalog-chat-bot.vercel.app/" target="_blank" class="lang-es inline-block bg-white text-blue-600 hover:bg-gray-100 px-8 py-4 rounded-lg font-semibold text-lg transition duration-300">Chatea con BookBot ahora</a> |
|
|
<a href="https://v0-book-catalog-chat-bot.vercel.app/" target="_blank" class="lang-en hidden-lang inline-block bg-white text-blue-600 hover:bg-gray-100 px-8 py-4 rounded-lg font-semibold text-lg transition duration-300">Start Chatting with BookBot Now</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="grid md:grid-cols-4 gap-8 mb-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i class="fas fa-book-open text-blue-400 mr-2"></i> |
|
|
BookBot |
|
|
</h3> |
|
|
<p class="lang-es text-gray-400">Tu bibliotecario personal con IA, ayudándote a descubrir libros que amarás. Todo procesado localmente sin APIs externas.</p> |
|
|
<p class="lang-en hidden-lang text-gray-400">Your AI-powered personal librarian, helping you discover books you'll love. All processed locally with no external APIs.</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Enlaces rápidos</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#features" class="lang-es text-gray-400 hover:text-white transition duration-300">Características</a></li> |
|
|
<li><a href="#features" class="lang-en hidden-lang text-gray-400 hover:text-white transition duration-300">Features</a></li> |
|
|
|
|
|
<li><a href="#how-it-works" class="lang-es text-gray-400 hover:text-white transition duration-300">Cómo funciona</a></li> |
|
|
<li><a href="#how-it-works" class="lang-en hidden-lang text-gray-400 hover:text-white transition duration-300">How It Works</a></li> |
|
|
|
|
|
<li><a href="#testimonials" class="lang-es text-gray-400 hover:text-white transition duration-300">Testimonios</a></li> |
|
|
<li><a href="#testimonials" class="lang-en hidden-lang text-gray-400 hover:text-white transition duration-300">Testimonials</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Recursos</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Centro de ayuda</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Política de privacidad</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Conéctate con nosotros</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-twitter text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-facebook text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-instagram text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-linkedin text-xl"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 pt-8 text-center text-gray-400"> |
|
|
<p class="lang-es">© 2023 BookBot. Todos los derechos reservados.</p> |
|
|
<p class="lang-en hidden-lang">© 2023 BookBot. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
if (menu.classList.contains('hidden')) { |
|
|
menu.classList.remove('hidden'); |
|
|
} else { |
|
|
menu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const btnES = document.getElementById('btn-es'); |
|
|
const btnEN = document.getElementById('btn-en'); |
|
|
const esElements = document.querySelectorAll('.lang-es'); |
|
|
const enElements = document.querySelectorAll('.lang-en'); |
|
|
|
|
|
btnES.addEventListener('click', function() { |
|
|
|
|
|
btnES.classList.add('active'); |
|
|
btnEN.classList.remove('active'); |
|
|
|
|
|
|
|
|
esElements.forEach(el => el.classList.remove('hidden-lang')); |
|
|
|
|
|
|
|
|
enElements.forEach(el => el.classList.add('hidden-lang')); |
|
|
}); |
|
|
|
|
|
btnEN.addEventListener('click', function() { |
|
|
|
|
|
btnEN.classList.add('active'); |
|
|
btnES.classList.remove('active'); |
|
|
|
|
|
|
|
|
enElements.forEach(el => el.classList.remove('hidden-lang')); |
|
|
|
|
|
|
|
|
esElements.forEach(el => el.classList.add('hidden-lang')); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=Ateneo/bookbot" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
|
</html> |
