`app/signup/page.tsx`

128 lines
import type { Metadata } from 'next';
import SignupWizardWrapper from './_SignupWizardWrapper';

export const metadata: Metadata = {
  title: 'Sign Up — Non-Profit Platform',
  description: 'Create your nonprofit organization account and get started in minutes.',
};

export default function SignupPage() {
  return (
    <main
      style={{
        minHeight: '100vh',
        backgroundColor: 'var(--color-bg)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'flex-start',
        padding: '48px 16px 80px',
      }}
    >
      {/* ── Logo / Header ───────────────────────────────────────────────── */}
      <div
        style={{
          textAlign: 'center',
          marginBottom: '40px',
          width: '100%',
          maxWidth: '640px',
        }}
      >
        {/* Logo mark */}
        <div
          aria-hidden="true"
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: '60px',
            height: '60px',
            borderRadius: '16px',
            background: 'linear-gradient(135deg, var(--color-primary), #059669)',
            marginBottom: '20px',
            boxShadow: '0 8px 32px rgba(16,185,129,0.3)',
          }}
        >
          <svg
            viewBox="0 0 24 24"
            fill="none"
            width="30"
            height="30"
            aria-hidden="true"
          >
            <path
              d="M12 2L2 7l10 5 10-5-10-5z"
              stroke="#fff"
              strokeWidth="2"
              strokeLinejoin="round"
            />
            <path
              d="M2 17l10 5 10-5"
              stroke="#fff"
              strokeWidth="2"
              strokeLinejoin="round"
            />
            <path
              d="M2 12l10 5 10-5"
              stroke="#fff"
              strokeWidth="2"
              strokeLinejoin="round"
            />
          </svg>
        </div>

        <h1
          style={{
            fontSize: '36px',
            fontWeight: 800,
            fontFamily: 'var(--font-heading)',
            color: 'var(--color-text)',
            margin: '0 0 10px',
            letterSpacing: '-0.02em',
            lineHeight: 1.2,
          }}
        >
          Non-Profit Platform
        </h1>

        <p
          style={{
            fontSize: '18px',
            color: 'var(--color-text-secondary)',
            margin: 0,
            lineHeight: 1.6,
          }}
        >
          Set up your organization in minutes.
        </p>
      </div>

      {/* ── Wizard ──────────────────────────────────────────────────────── */}
      <div style={{ width: '100%', maxWidth: '640px' }}>
        <SignupWizardWrapper />
      </div>

      {/* ── Footer link ─────────────────────────────────────────────────── */}
      <p
        style={{
          marginTop: '32px',
          fontSize: '15px',
          color: 'var(--color-text-muted)',
          textAlign: 'center',
        }}
      >
        Already have an account?{' '}
        <a
          href="/login"
          style={{
            color: 'var(--color-primary)',
            fontWeight: 600,
          }}
        >
          Sign in
        </a>
      </p>
    </main>
  );
}