Layout

Window Card

The frosted-glass 'OS window' — a chrome bar (with a single functional mac-style red close dot when onClose is passed) above a content slot. This is the shell behind the homepage's AI intake card.

Preview

Window content

Chrome bar + glass body.

Code

src/components/ui/WindowCard.tsx
"use client";

import type { ReactNode } from "react";
import { glassCard } from "@/lib/tokens";

/**
 * WindowCard — the `card` token from hyliox-waitlist-card.md staged as a
 * floating OS window: a chrome bar (single functional red mac-style dot when
 * `onClose` is passed) above the content slot.
 */
export function WindowCard({
  children,
  onClose,
  closeLabel = "Close",
  className = "",
}: {
  children: ReactNode;
  onClose?: () => void;
  closeLabel?: string;
  className?: string;
}) {
  return (
    <div className={`overflow-hidden rounded-lg ${glassCard} ${className}`}>
      <div className="flex items-center border-b border-(--glass-border) px-5 py-3">
        {onClose && (
          <button
            type="button"
            onClick={onClose}
            aria-label={closeLabel}
            className="group flex h-3 w-3 items-center justify-center rounded-full bg-[#FF5F57] transition-transform hover:scale-110"
          >
            <span className="text-[8px] font-bold leading-none text-[#4d0000] opacity-0 group-hover:opacity-100">
              &times;
            </span>
          </button>
        )}
      </div>
      {children}
    </div>
  );
}

Installation

Usage
import { WindowCard } from "@/components/ui/WindowCard";

<WindowCard onClose={() => setOpen(false)}>
  <div className="p-8">Your content</div>
</WindowCard>

Props

PropTypeDefaultDescription
childrenReactNode—Content rendered below the chrome bar.
onClose() => void—If provided, renders a functional red close dot. Omit to render the chrome bar without a close control.
closeLabelstring"Close"aria-label for the close button.
classNamestring""Extra classes merged onto the outer window.

Accessibility

The close control is a real <button> with an aria-label — always pass closeLabel with a translated string in localized contexts.

web design.