Split Screen

'use client';

import type { ReactNode } from 'react';
import './SplitScreenLayout.css';

/**
 * SplitScreenLayout — A layout divided into two equal halves, perfect for landing pages.
 */
export interface SplitScreenLayoutProps {
  className?: string;
  left?: ReactNode;
  right?: ReactNode;
}

export function SplitScreenLayout({ className = '',
  left,
  right
}: SplitScreenLayoutProps) {
  return (
    <>
      <div className={`split-layout ${className}`} data-rk-aa2173="">
        <div className="split-side left" data-rk-aa2173="">
          {left ?? (<>
            <div className="demo-split-block" data-rk-aa2173="">
              <h3 data-rk-aa2173="">Left Content</h3>
              <p data-rk-aa2173="">Hero text and main value proposition.</p>
            </div>
          </>)}
        </div>
        <div className="split-side right" data-rk-aa2173="">
          {right ?? (<>
            <div className="demo-split-block" data-rk-aa2173="">
              <h3 data-rk-aa2173="">Right Content</h3>
              <p data-rk-aa2173="">Visual graphic, product mockups, or form.</p>
            </div>
          </>)}
        </div>
      </div>
    </>
  );
}

export default SplitScreenLayout;

/* SplitScreenLayout — ported from astro-component-kit (layout/SplitScreenLayout.astro) */

.split-layout:where([data-rk-aa2173]) {
  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:where([data-rk-aa2173]) {
  flex: 1;
  min-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
}
.left:where([data-rk-aa2173]) {
  background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
}
.right:where([data-rk-aa2173]) {
  background: rgba(0, 0, 0, 0.3);
  border-left: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
}
.demo-split-block:where([data-rk-aa2173]) {
  text-align: center;
}
.demo-split-block:where([data-rk-aa2173]) h3:where([data-rk-aa2173]) {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.demo-split-block:where([data-rk-aa2173]) p:where([data-rk-aa2173]) {
  color: #94a3b8;
}