pn-new-crm/src/components/shared/branded-auth-shell.tsx

const BG_URL = 'https://s3.portnimara.com/images/Overhead_1_blur.png';
const LOGO_URL =
  'https://s3.portnimara.com/images/Port%20Nimara%20New%20Logo-Circular%20Frame_250px.png';

/**
 * Branded shell shared by every auth/form surface — CRM login, portal login,
 * password set/reset/activate, forgot-password. Renders the blurred Port
 * Nimara overhead background, the circular logo, and a centered white card
 * that consumers populate with their own form/content.
 */
export function BrandedAuthShell({ children }: { children: React.ReactNode }) {
  return (
    <div
      className="min-h-screen flex items-center justify-center px-4 py-8"
      style={{
        backgroundImage: `url('${BG_URL}')`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundColor: '#f2f2f2',
      }}
    >
      <div className="w-full max-w-md">
        <div className="bg-white rounded-lg shadow-lg p-8">
          <div className="flex justify-center mb-6">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={LOGO_URL} alt="Port Nimara" className="w-24 h-auto" />
          </div>
          {children}
        </div>
      </div>
    </div>
  );
}