<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Renueva tu espacio con IA y AR</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js"></script>
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <!-- Para AR si lo necesitas -->
</head>
<body>
  <header>
    <div class="container">
      <h1>Renueva tus espacios con la ayuda de la IA y Realidad Aumentada</h1>
      <p>Optimiza tu hogar o espacio de trabajo de manera fácil, rápida y sin necesidad de profesionales en diseño de interiores.</p>
    </div>
  </header>

  <section class="intro">
    <div class="container">
      <h2>¿Por qué usar IA y Realidad Aumentada para renovar tu espacio?</h2>
      <p>Gracias a la inteligencia artificial, puedes planificar y visualizar cambios en tus espacios sin necesidad de un diseñador profesional. La IA puede ayudarte a:</p>
      <ul>
        <li>Optimizar el uso del espacio disponible.</li>
        <li>Elegir la mejor distribución de muebles según tus necesidades.</li>
        <li>Ver tu diseño en tiempo real mediante realidad aumentada.</li>
        <li>Recibir recomendaciones personalizadas basadas en tus gustos y preferencias.</li>
      </ul>
    </div>
  </section>

  <section class="features">
    <div class="container">
      <h2>Ventajas de usar IA en el diseño de interiores</h2>
      <div class="feature-item">
        <h3>Optimización del espacio</h3>
        <p>La IA calcula la mejor distribución de tus muebles para maximizar la funcionalidad y el confort.</p>
      </div>
      <div class="feature-item">
        <h3>Visualización en AR</h3>
        <p>Con la realidad aumentada, puedes ver cómo quedaría tu espacio renovado antes de tomar decisiones.</p>
      </div>
      <div class="feature-item">
        <h3>Personalización</h3>
        <p>La IA aprende tus preferencias y te sugiere ideas que coinciden con tu estilo único.</p>
      </div>
    </div>
  </section>

  <section class="ar-demo">
    <div class="container">
      <h2>Prueba nuestra demostración en Realidad Aumentada</h2>
      <p>Haz clic en el botón para ver cómo tu espacio podría verse renovado con AR.</p>
      <a href="ar-demo.html" class="btn">Ver en AR</a> <!-- Aquí puedes redirigir a una página con demo de AR -->
    </div>
  </section>

  <footer>
    <div class="container">
      <p>&copy; 2024 Renueva tu espacio con IA. Todos los derechos reservados.</p>
    </div>
  </footer>

  <script src="script.js"></script> <!-- Si quieres agregar funcionalidades extra -->
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.