Split Landing Page

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Split Landing Page</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="split">
    <section class="pane left">
      <div class="overlay">
        <h1>Opción A</h1>
        <a class="btn" href="#a">Explorar</a>
      </div>
    </section>

    <section class="pane right">
      <div class="overlay">
        <h1>Opción B</h1>
        <a class="btn" href="#b">Explorar</a>
      </div>
    </section>
  </main>

  <script src="script.js"></script>
</body>
</html>

* { box-sizing: border-box; }
:root {
  --speed: 600ms;
  --radius: 24px;
  --gap: 8px;
}

html, body {
  height: 100%;
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #0f1115;
  color: #f5f7fa;
}

/* Contenedor “split” a pantalla completa */
.split {
  display: flex;
  height: 100vh;
  gap: var(--gap);
  padding: var(--gap);
}

/* Panel base */
.pane {
  flex: 1 1 50%;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  transition: flex-basis var(--speed) ease, transform var(--speed) ease;
  background-size: cover;
  background-position: center;
}

/* Imágenes de ejemplo (cámbialas por las tuyas) */
.left  { background-image: url("https://picsum.photos/id/1018/1600/900"); }
.right { background-image: url("https://picsum.photos/id/1025/1600/900"); }

/* Capa oscura y contenido centrado */
.overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
  display: grid; place-content: center; text-align: center;
  padding: 24px;
}

h1 { margin: 0 0 16px; font-size: clamp(28px, 4vw, 56px); }

.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.85);
  color: #fff; text-decoration: none;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
  backdrop-filter: blur(2px);
}
.btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.08); border-color: #fff; }

/* Estados de hover activados por clases JS */
.split.hover-left  .left  { flex-basis: 75%; }
.split.hover-left  .right { flex-basis: 25%; }

.split.hover-right .right { flex-basis: 75%; }
.split.hover-right .left  { flex-basis: 25%; }

/* Sutileza: zoom leve del panel activo */
.split.hover-left  .left,
.split.hover-right .right { transform: scale(1.02); }

/* Responsive (táctiles): apilar en vertical si el alto es limitado */
@media (max-width: 760px) {
  .split { flex-direction: column; }
}

const split = document.querySelector('.split');
const left  = document.querySelector('.left');
const right = document.querySelector('.right');

function onEnterLeft()  { split.classList.add('hover-left');  }
function onLeaveLeft()  { split.classList.remove('hover-left'); }
function onEnterRight() { split.classList.add('hover-right'); }
function onLeaveRight() { split.classList.remove('hover-right'); }

left.addEventListener('mouseenter', onEnterLeft);
left.addEventListener('mouseleave', onLeaveLeft);
right.addEventListener('mouseenter', onEnterRight);
right.addEventListener('mouseleave', onLeaveRight);

/* Soporte básico táctil: al tocar, expandir esa mitad */
left.addEventListener('touchstart',  onEnterLeft,  { passive: true });
right.addEventListener('touchstart', onEnterRight, { passive: true });
document.addEventListener('touchend', () => {
  split.classList.remove('hover-left', 'hover-right');
}, { passive: true });