<!DOCTYPE html>
<html class="light" lang="es"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>360ph - Administración Inmobiliaria con IA</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#0d7ff2",
"background-light": "#f5f7f8",
"background-dark": "#101922",
},
fontFamily: {
"display": ["Manrope", "sans-serif"]
},
borderRadius: {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Manrope', sans-serif;
}
.hero-gradient {
background: radial-gradient(circle at 80% 20%, rgba(13, 127, 242, 0.08) 0%, transparent 40%);
}
.glass-card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
border: 1px solid rgba(13, 127, 242, 0.1);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 antialiased overflow-x-hidden">
<!-- Top Navigation Bar -->
<header class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-800">
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white">
<span class="material-symbols-outlined text-3xl">view_in_ar</span>
</div>
<h2 class="text-2xl font-extrabold tracking-tight text-slate-900 dark:text-white">360ph</h2>
</div>
<nav class="hidden md:flex items-center gap-10">
<a class="text-sm font-semibold hover:text-primary transition-colors" href="#">Inicio</a>
<a class="text-sm font-semibold hover:text-primary transition-colors" href="#">Funcionalidades</a>
<a class="text-sm font-semibold hover:text-primary transition-colors" href="#">Beneficios</a>
</nav>
<div class="flex items-center gap-4">
<button class="hidden sm:block text-sm font-semibold text-slate-600 dark:text-slate-300 hover:text-primary transition-colors">Iniciar Sesión</button>
<button class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-lg font-bold text-sm transition-all shadow-lg shadow-primary/20">
Agendar Demo
</button>
</div>
</div>
</header>
<main class="pt-20">
<!-- Hero Section -->
<section class="relative min-h-[90vh] flex items-center overflow-hidden hero-gradient">
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center py-12 lg:py-24">
<!-- Hero Content -->
<div class="flex flex-col gap-8 z-10">
<div class="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider">
<span class="material-symbols-outlined text-sm">auto_awesome</span>
Impulsado por Inteligencia Artificial
</div>
<h1 class="text-5xl lg:text-7xl font-black text-slate-900 dark:text-white leading-[1.1] tracking-tight">
Administración 360° <span class="text-primary italic">Potenciada</span> por IA
</h1>
<p class="text-lg lg:text-xl text-slate-600 dark:text-slate-400 leading-relaxed max-w-xl">
La plataforma que simplifica la vida en comunidad. Los residentes gestionan todo por WhatsApp, mientras tú administras con un asistente de IA inteligente.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<button class="bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-xl font-bold text-lg transition-all shadow-xl shadow-primary/30 flex items-center justify-center gap-2">
Agendar Demo Gratis
<span class="material-symbols-outlined">arrow_forward</span>
</button>
<button class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-8 py-4 rounded-xl font-bold text-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-all flex items-center justify-center gap-2">
Ver cómo funciona
</button>
</div>
<div class="flex items-center gap-6 pt-4">
<div class="flex -space-x-3">
<div class="w-10 h-10 rounded-full border-2 border-white bg-slate-300 overflow-hidden">
<img alt="Usuario" data-alt="Perfil de administrador satisfecho" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAaLJP8zG96fz_w9pJVOarBwAuLz0WsVA6M5gnORQkFjWsDIe5PzEHzg4BXN5eUSLK4uDKwi8Bap0UBZ8zfYOqwhmTd8kI2mZ6csg5bjGLStvja18F6jLYfTdnX3--Wp-jLA1VbQG8qIaiXjOmVidg57ED0pG6EVPWB1VCb5grBr_HflZ48RF3KzD4ZI-3XuZffpZXYt5lGnb1R9RkZ1abweyxxDDJgJRFw8txl3lGKCGWkW0BF3LEaYujPm7PCCuJV2Ck5iXkVJ9X2"/>
</div>
<div class="w-10 h-10 rounded-full border-2 border-white bg-slate-300 overflow-hidden">
<img alt="Usuario" data-alt="Perfil de residente feliz" src="https://lh3.googleusercontent.com/aida-public/AB6AXuALIkWYqpox5f5S5nUS4la-eX0fpQGauuVER3JTzBPTdkctvSPfO7iTD7Ev4TNsmz9n5uwGernNfIcDcA2sTVFA_djci3P6K7QgCROe8gc9Yn_mCB9zj697BcM6YUFcWxRchj3D9O9nPk5cT9KTZgSFWIBIDiLa4txAywjTfqmEJqiZUUureE-u_3rSOddNm3jOWiVp5y1M4qihHyBeb_K6_VwGhu4AWeZnMgA5gzqkgAR26SQzYdVk5OMfCLmYnZSGDTvjG2YF7kLr"/>
</div>
<div class="w-10 h-10 rounded-full border-2 border-white bg-slate-300 overflow-hidden">
<img alt="Usuario" data-alt="Perfil de administrador moderno" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCjyy8FmO5H1dWTu89Pfn-gK4WW-322a0TMxAJdMj1AUEifMvKu4xOxIhujhYsEuuPTRF1fkjn6mnMS_9SpDiWyZjG02RIX3wT1Qha3Qa9oyE-OMzh6Px2AbuRubnFdVyvcn7Lr0-JWvr9FyndU4AJGijia0Idmfp3tmq89hw_fGe4vmfGbMtpx_e16su2p0RlaY-EyfF8IbFxvaDaVobYUKSJeEay7imbpgMOi9hKqsiFKqm2b_oJSu91TqDwb-5z2kbHj0H7IbM68"/>
</div>
</div>
<p class="text-sm font-medium text-slate-500">Más de <span class="text-slate-900 dark:text-white font-bold">150+ copropiedades</span> ya confían en nosotros</p>
</div>
</div>
<!-- Hero Visuals (Mockups) -->
<div class="relative flex items-center justify-center">
<!-- Dashboard Mockup (Laptop) -->
<div class="relative z-10 w-full max-w-[640px] shadow-2xl rounded-2xl overflow-hidden border-8 border-slate-800 bg-slate-800">
<img alt="Dashboard de administración" class="w-full aspect-[16/10] object-cover" data-alt="Panel de administración moderno con gráficas de IA" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDk0kMDJ5P1m5x4EGtxX4jlRSWAqofejWfObyro5P38rZcP6SuD30nDnaci8qJ98JKbBEXx1FkDVukjfn3Grb9Guiwv4c4h3mjku57Y_dmUvL1hmidUVU68KIyylcEEiFl9eoRrAw6qpui5OBnOPNflEZWKADpl7u9qe8kyRr9tsGqTeAgB97340Pyuzlu2SBaB3_SYaCi2rjOKsBB3zN5SHTHNYaSoOxcXS4SXDH1okwoliTIafmOm-dUhwaT11cKc9Kx1XlWVVIbI"/>
</div>
<!-- WhatsApp Mockup (Floating Phone) -->
<div class="absolute -bottom-10 -right-4 lg:-right-12 z-20 w-[240px] lg:w-[280px] shadow-2xl rounded-[2.5rem] overflow-hidden border-[10px] border-slate-900 bg-white">
<div class="bg-[#075e54] text-white p-4 flex items-center gap-3">
<div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center">
<span class="material-symbols-outlined text-lg">smart_toy</span>
</div>
<div>
<h4 class="text-xs font-bold leading-none">Asistente 360ph</h4>
<span class="text-[10px] opacity-70">En línea ahora</span>
</div>
</div>
<div class="bg-[#e5ddd5] h-[360px] p-4 flex flex-col gap-3 overflow-y-auto">
<div class="bg-white rounded-lg p-2 text-xs max-w-[80%] shadow-sm self-start">
Hola! 👋 ¿Cómo puedo ayudarte hoy?
</div>
<div class="bg-[#dcf8c6] rounded-lg p-2 text-xs max-w-[80%] shadow-sm self-end">
Quiero reservar la cancha de tenis para mañana a las 5pm
</div>
<div class="bg-white rounded-lg p-2 text-xs max-w-[80%] shadow-sm self-start">
¡Claro! Reservado para mañana 17:00. ¿Algo más? 🎾
</div>
<div class="bg-[#dcf8c6] rounded-lg p-2 text-xs max-w-[80%] shadow-sm self-end">
No, ¡gracias!
</div>
</div>
<div class="bg-white p-3 flex items-center gap-2 border-t">
<div class="flex-1 bg-slate-100 rounded-full h-8 px-3 text-[10px] flex items-center text-slate-400">Escribe un mensaje...</div>
<div class="w-8 h-8 bg-[#128c7e] rounded-full flex items-center justify-center text-white">
<span class="material-symbols-outlined text-sm">send</span>
</div>
</div>
</div>
<!-- Decorative Elements -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-primary/20 blur-[100px] -z-10 rounded-full"></div>
</div>
</div>
</section>
<!-- Trust Section -->
<section class="py-16 border-y border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/50">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="flex flex-col items-center text-center gap-2">
<span class="text-4xl font-black text-primary">60%</span>
<p class="text-sm font-semibold text-slate-500 uppercase tracking-widest">Ahorro en Tiempo</p>
</div>
<div class="flex flex-col items-center text-center gap-2">
<span class="text-4xl font-black text-primary">10k+</span>
<p class="text-sm font-semibold text-slate-500 uppercase tracking-widest">Residentes Activos</p>
</div>
<div class="flex flex-col items-center text-center gap-2">
<span class="text-4xl font-black text-primary">24/7</span>
<p class="text-sm font-semibold text-slate-500 uppercase tracking-widest">Atención con IA</p>
</div>
<div class="flex flex-col items-center text-center gap-2">
<span class="text-4xl font-black text-primary">100%</span>
<p class="text-sm font-semibold text-slate-500 uppercase tracking-widest">Gestión Digital</p>
</div>
</div>
</div>
</section>
<!-- Features Quick Grid -->
<section class="py-24 max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl lg:text-4xl font-bold text-slate-900 dark:text-white mb-4">Gestión inteligente para comunidades modernas</h2>
<p class="text-slate-500 max-w-2xl mx-auto">Potenciamos la comunicación entre administradores y residentes con inteligencia artificial de vanguardia directamente en WhatsApp.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="glass-card p-8 rounded-2xl flex flex-col gap-4 group hover:shadow-xl hover:shadow-primary/5 transition-all">
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors">
<span class="material-symbols-outlined text-2xl">robot_2</span>
</div>
<h3 class="text-xl font-bold">Asistente IA para Admins</h3>
<p class="text-slate-500 leading-relaxed">Un copiloto que organiza reportes, genera estados de cuenta y prioriza tareas automáticamente para que tú solo tomes las decisiones.</p>
</div>
<div class="glass-card p-8 rounded-2xl flex flex-col gap-4 group hover:shadow-xl hover:shadow-primary/5 transition-all">
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors">
<span class="material-symbols-outlined text-2xl">chat</span>
</div>
<h3 class="text-xl font-bold">WhatsApp para Residentes</h3>
<p class="text-slate-500 leading-relaxed">Sin descargar apps nuevas. Los residentes solicitan servicios, reportan daños y pagan cuotas desde el chat que ya aman y usan diario.</p>
</div>
<div class="glass-card p-8 rounded-2xl flex flex-col gap-4 group hover:shadow-xl hover:shadow-primary/5 transition-all">
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors">
<span class="material-symbols-outlined text-2xl">bolt</span>
</div>
<h3 class="text-xl font-bold">Automatización Total</h3>
<p class="text-slate-500 leading-relaxed">Desde el control de acceso hasta la gestión de reservas de áreas comunes, todo fluye sin intervención manual constante.</p>
</div>
</div>
</section>
</main>
<footer class="bg-slate-900 text-slate-400 py-16">
<div class="max-w-7xl mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 mb-12">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white">
<span class="material-symbols-outlined text-xl">view_in_ar</span>
</div>
<h2 class="text-xl font-extrabold tracking-tight text-white">360ph</h2>
</div>
<div class="flex gap-8">
<a class="hover:text-white transition-colors" href="#">Privacidad</a>
<a class="hover:text-white transition-colors" href="#">Términos</a>
<a class="hover:text-white transition-colors" href="#">Contacto</a>
</div>
<div class="flex gap-4">
<a class="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center hover:bg-primary hover:text-white transition-all" href="#">
<svg class="w-5 h-5 fill-current" viewbox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path></svg>
</a>
<a class="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center hover:bg-primary hover:text-white transition-all" href="#">
<svg class="w-5 h-5 fill-current" viewbox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg>
</a>
</div>
</div>
<p class="text-sm text-center border-t border-slate-800 pt-8">© 2024 360ph Inc. Todos los derechos reservados. Diseñado para comunidades inteligentes.</p>
</div>
</footer>
</body></html>
Increase team efficiency with WorkFlowPro
Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit
Automate. Integrate. Streamline.
Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis
01
Create an Account
Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa
02
Connect WorkFlowPro
Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa
03
Start Automating
Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa
Accessible through all devices
Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur.
Key Features
Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur.
250+
Ut enim ad minima veniam, quis nostrum exercitationem ullam
90%
Ut enim ad minima veniam, quis nostrum exercitationem ullam
1.5M+
Ut enim ad minima veniam, quis nostrum exercitationem ullam
20+
Ut enim ad minima veniam, quis nostrum exercitationem ullam