Split Screen

---
/**
 * SplitScreenLayout — A layout divided into two equal halves, perfect for landing pages.
 */
interface Props {
  className?: string;
}

const { className = '' } = Astro.props;
---

<div class={`split-layout ${className}`}>
  <div class="split-side left">
    <slot name="left">
      <div class="demo-split-block">
        <h3>Left Content</h3>
        <p>Hero text and main value proposition.</p>
      </div>
    </slot>
  </div>
  <div class="split-side right">
    <slot name="right">
      <div class="demo-split-block">
        <h3>Right Content</h3>
        <p>Visual graphic, product mockups, or form.</p>
      </div>
    </slot>
  </div>
</div>

<style>
  .split-layout {
    display: flex;
    min-height: 50vh;
    flex-wrap: wrap;
    width: 100%;
    border-radius: var(--r-xl, 16px);
    overflow: hidden;
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
  }
  .split-side {
    flex: 1;
    min-width: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
  }
  .left {
    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
  }
  .right {
    background: rgba(0, 0, 0, 0.3);
    border-left: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
  }
  .demo-split-block {
    text-align: center;
  }
  .demo-split-block h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
  .demo-split-block p {
    color: #94a3b8;
  }
</style>