|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>DeepSite - Crea sitios web 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> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6e8efb, #a777e3); |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in-out; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
|
|
|
<nav class="bg-white shadow-sm"> |
|
|
<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-magic text-purple-600 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-900">DeepSite</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:ml-6 md:flex md:items-center space-x-8"> |
|
|
<a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Inicio</a> |
|
|
<a href="#" class="text-gray-500 hover:text-purple-600 px-3 py-2 text-sm font-medium">Plantillas</a> |
|
|
<a href="#" class="text-gray-500 hover:text-purple-600 px-3 py-2 text-sm font-medium">Ejemplos</a> |
|
|
<a href="#" class="text-gray-500 hover:text-purple-600 px-3 py-2 text-sm font-medium">Precios</a> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
|
|
Iniciar sesión |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="gradient-bg text-white"> |
|
|
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 text-center"> |
|
|
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> |
|
|
Crea sitios web impresionantes con IA |
|
|
</h1> |
|
|
<p class="mt-6 max-w-2xl mx-auto text-xl"> |
|
|
Describe lo que necesitas y nuestra inteligencia artificial generará un sitio web profesional en minutos. |
|
|
</p> |
|
|
<div class="mt-10 max-w-md mx-auto bg-white rounded-lg overflow-hidden shadow-xl"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center border-b border-gray-200 pb-3"> |
|
|
<i class="fas fa-robot text-purple-600 mr-2"></i> |
|
|
<input type="text" class="flex-1 outline-none text-gray-800 placeholder-gray-400" placeholder="Ej: 'Necesito un sitio web para mi restaurante italiano...'"> |
|
|
</div> |
|
|
<button class="mt-4 w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md font-medium"> |
|
|
Generar sitio web |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Características</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Diseño inteligente sin esfuerzo |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg card-hover transition-all duration-300 fade-in"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<i class="fas fa-bolt"></i> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Generación instantánea</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Obtén un sitio web completo en cuestión de minutos con solo describir lo que necesitas. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg card-hover transition-all duration-300 fade-in"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<i class="fas fa-palette"></i> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Diseños personalizados</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
La IA adapta el diseño a tu industria y preferencias para crear algo único. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg card-hover transition-all duration-300 fade-in"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<i class="fas fa-mobile-alt"></i> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Totalmente responsive</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Sitios web que se ven perfectos en cualquier dispositivo, automáticamente. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Cómo funciona</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Crea tu sitio en 3 pasos |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-10"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex items-center justify-center h-8 w-8 rounded-full bg-purple-100 text-purple-600 font-bold mr-3">1</div> |
|
|
<h3 class="text-lg font-medium">Describe tu sitio web</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">Cuéntanos qué necesitas, para qué industria y qué características debe tener tu sitio.</p> |
|
|
|
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex items-center justify-center h-8 w-8 rounded-full bg-purple-100 text-purple-600 font-bold mr-3">2</div> |
|
|
<h3 class="text-lg font-medium">La IA genera opciones</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">Nuestro sistema crea varias versiones de tu sitio web basadas en tu descripción.</p> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<div class="flex items-center justify-center h-8 w-8 rounded-full bg-purple-100 text-purple-600 font-bold mr-3">3</div> |
|
|
<h3 class="text-lg font-medium">Personaliza y publica</h3> |
|
|
</div> |
|
|
<p class="text-gray-600">Edita el diseño, añade tu contenido y publícalo con un solo clic.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="relative"> |
|
|
<div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-200 rounded-full opacity-50"></div> |
|
|
<div class="absolute -bottom-6 -right-6 w-32 h-32 bg-purple-200 rounded-full opacity-50"></div> |
|
|
<div class="relative bg-white p-2 rounded-xl shadow-lg border border-gray-200"> |
|
|
<img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Website demo" class="rounded-lg"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Plantillas</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Ejemplos generados por nuestra IA |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> |
|
|
|
|
|
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md card-hover transition-all duration-300"> |
|
|
<div class="h-48 bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center"> |
|
|
<i class="fas fa-utensils text-white text-5xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-900">Restaurante Elegante</h3> |
|
|
<p class="mt-2 text-gray-600">Perfecto para restaurantes de alta cocina con menú, reservas y galería.</p> |
|
|
<button class="mt-4 text-purple-600 hover:text-purple-800 font-medium"> |
|
|
Usar esta plantilla → |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md card-hover transition-all duration-300"> |
|
|
<div class="h-48 bg-gradient-to-r from-green-400 to-green-600 flex items-center justify-center"> |
|
|
<i class="fas fa-store text-white text-5xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-900">Tienda Online</h3> |
|
|
<p class="mt-2 text-gray-600">E-commerce completo con carrito de compras, categorías y pasarela de pago.</p> |
|
|
<button class="mt-4 text-purple-600 hover:text-purple-800 font-medium"> |
|
|
Usar esta plantilla → |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md card-hover transition-all duration-300"> |
|
|
<div class="h-48 bg-gradient-to-r from-purple-400 to-purple-600 flex items-center justify-center"> |
|
|
<i class="fas fa-laptop-code text-white text-5xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-900">Portafolio Profesional</h3> |
|
|
<p class="mt-2 text-gray-600">Ideal para freelancers y creativos que quieren mostrar su trabajo.</p> |
|
|
<button class="mt-4 text-purple-600 hover:text-purple-800 font-medium"> |
|
|
Usar esta plantilla → |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="gradient-bg py-16"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> |
|
|
¿Listo para crear tu sitio web con IA? |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl mx-auto text-xl text-purple-100"> |
|
|
Empieza gratis y descubre cómo la inteligencia artificial puede transformar tu presencia online. |
|
|
</p> |
|
|
<div class="mt-8 flex justify-center"> |
|
|
<button class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-3 rounded-md text-lg font-medium"> |
|
|
Comenzar ahora |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-white text-sm font-semibold tracking-wider uppercase">Producto</h3> |
|
|
<ul class="mt-4 space-y-2"> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Características</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Plantillas</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Precios</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Ejemplos</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-white text-sm font-semibold tracking-wider uppercase">Recursos</h3> |
|
|
<ul class="mt-4 space-y-2"> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Documentación</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Guías</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Soporte</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-white text-sm font-semibold tracking-wider uppercase">Empresa</h3> |
|
|
<ul class="mt-4 space-y-2"> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Nosotros</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Trabajos</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Privacidad</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Términos</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-white text-sm font-semibold tracking-wider uppercase">Síguenos</h3> |
|
|
<div class="mt-4 flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<p class="text-gray-300 text-sm"> |
|
|
© 2023 DeepSite AI. Todos los derechos reservados. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const animatedElements = document.querySelectorAll('.fade-in'); |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.style.opacity = 1; |
|
|
} |
|
|
}); |
|
|
}, { threshold: 0.1 }); |
|
|
|
|
|
animatedElements.forEach(el => { |
|
|
el.style.opacity = 0; |
|
|
observer.observe(el); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('button').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
if (this.textContent.includes('plantilla') || |
|
|
this.textContent.includes('Generar') || |
|
|
this.textContent.includes('Comenzar')) { |
|
|
alert('¡Gracias por tu interés! En una implementación real, esto te llevaría al generador de sitios web.'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</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=Cruzito99/t2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
