# Registration Flow URLs and Styling

## Complete Registration Flow URLs

**0. Sign-In Page (OAuth):**

- `http://localhost:3000/auth/signin?plan=starter` (or growth, enhanced, professional)
  - Shows: "Subscribe to the [Plan Name] Plan" with sky blue highlight
  - Provides Google/Apple OAuth sign-in buttons
  - Split-screen design with "What Happens Next?" checklist
  - Dark navy theme (AMS_Page2 design)

**0.5. Terms Pages:**

- **Public Terms:** `http://localhost:3000/terms/`
  - Read-only view of Dealer Agreement (no checkbox/button)
  - Accessible to anyone (authenticated or not)
  - Referenced in Section 11.8 of the agreement

- **Registration Terms:** `http://localhost:3000/registration/terms?plan=starter`
  - Shows terms with agreement checkbox + "Continue to Payment" button
  - Only accessible to authenticated users WITHOUT a dealer
  - Redirects:
    - Not signed in → `/terms/` (public read-only)
    - Has dealer → `/dashboard/` (shouldn't be in registration)
    - Invalid/missing plan → `/` (landing page)

**1. Landing Page:**

- `http://localhost:3000/` - Marketing landing page with pricing cards (served from `public/index.html`)
- Authenticated users are automatically redirected to `/dashboard`
- Old `/landing/` URL redirects to `/` for backward compatibility

**2. Welcome Page:**

- `http://localhost:3000/registration/welcome?session_id=<stripe_session_id>`
  - Shows "Setting Up Your Account..." with loading spinner
  - Polls backend for account creation completion
  - Auto-redirects to onboarding when ready

**3. Onboarding Page (Accordion):**

- `http://localhost:3000/registration/onboarding?session_id=<stripe_session_id>`
  - 3-step accordion form (subdomain, profile, review)
  - Dark theme with numbered badges and chevron animations

## Complete User Flow

1. User clicks Subscribe button on landing page
2. → Redirected to `/auth/signin?plan=<plan>` (if not authenticated)
3. → User signs in with Google/Apple OAuth
4. → Stripe checkout session created
5. → Complete payment in Stripe
6. → Redirected to `/registration/welcome` (polls for account creation)
7. → Auto-redirects to `/registration/onboarding` (our accordion)
8. → Complete 3-step form → Site published

## CSS Files for Styling

### 1. **Global Styles**

**File:** `app/globals.css`

- Tailwind CSS directives
- Global Inter font configuration
- Base styles for entire app
- **Edit for:** App-wide styling changes, custom utility classes

### 2. **Registration Theme (Shared Variables)**

**File:** `app/styles/registration-theme.css`

- CSS variables for registration pages:
  - `--reg-bg-navy` (dark navy background)
  - `--reg-accent-sky` (sky blue for highlights)
  - `--reg-text-white`, `--reg-text-muted`
  - `--reg-bg-slate`, `--reg-bg-gradient-end`
- Used by: Sign-in page, welcome page
- **Edit for:** Changing colors/theme across ALL registration pages

### 3. **Accordion Styles (Onboarding Only)**

**File:** `app/registration/onboarding/accordion-styles.css`

- Figma design for accordion (dark theme, badges, chevrons)
- Accordion item states (expanded/collapsed)
- Number badges (1., 2., 3.)
- Chevron animations
- Form field styling for dark theme
- **Edit for:** Onboarding accordion appearance only

### 4. **Landing Page**

**File:** `public/index.html`

- Has inline `<style>` tag or links to separate CSS
- Accessible at `/` URL (old `/landing/` redirects here)
- **Edit for:** Landing page appearance

## Quick Reference by Page

| Page               | URL                               | Primary CSS File           | Theme Variables          |
| ------------------ | --------------------------------- | -------------------------- | ------------------------ |
| Landing            | `/`                               | `public/index.html` inline | N/A                      |
| Public Terms       | `/terms/`                         | Inline Tailwind + styles   | `registration-theme.css` |
| Registration Terms | `/registration/terms?plan=<plan>` | Inline Tailwind + styles   | `registration-theme.css` |
| Sign-in            | `/auth/signin?plan=<plan>`        | Inline Tailwind + styles   | `registration-theme.css` |
| Welcome            | `/registration/welcome`           | Inline Tailwind + styles   | `registration-theme.css` |
| Onboarding         | `/registration/onboarding`        | `accordion-styles.css`     | N/A (own colors)         |

## Styling Approaches

**Sign-in & Welcome pages:**

- Mostly inline Tailwind classes in JSX
- CSS variables from `registration-theme.css`
- Example: `style={{ backgroundColor: 'var(--reg-bg-navy)' }}`

**Onboarding page:**

- Semantic CSS classes (`.accordion-item`, `.number-badge`, `.chevron-container`)
- Fully styled via `accordion-styles.css`

**To change the visual theme across all registration pages,** start with `app/styles/registration-theme.css` since it defines the CSS variables used by multiple pages.