AFN Loan Officer Recruiting Site

A high-impact recruiting site showcasing AFN's AI-powered mortgage technology ecosystem built with React and Tailwind CSS.

Tech Stack

• Framework: React with Client-Side Routing
• Language: TypeScript
• Styling: Tailwind CSS v4
• Animation: Motion (Framer Motion)
• Icons: Lucide React
• Charts: Recharts
• State Management: React Context (Theme, Brady Chat, Recruiting Flow)

Project Structure

src/
├── components/
│   ├── layouts/                 # Layout components
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   └── MobileFooter.tsx
│   ├── sections/                # Page sections
│   │   ├── GenericHero.tsx
│   │   ├── GenericCTASection.tsx
│   │   └── JoinAFNHome.tsx
│   ├── shared/                  # Shared components with logic
│   │   ├── EnhancedBradyChat.tsx
│   │   └── CalculatorManager.tsx
│   ├── chat/                    # Brady AI chat components
│   │   ├── InfoRequestForm.tsx
│   │   ├── LeadershipCallForm.tsx
│   │   ├── ModePromptTree.tsx
│   │   └── QuickSuggestions.tsx
│   └── figma/                   # Figma-specific components
│       └── ImageWithFallback.tsx
├── contexts/                    # React Context providers
│   ├── ThemeContext.tsx
│   ├── BradyChatContext.tsx
│   └── RecruitingFlowContext.tsx
└── styles/
    └── globals.css              # Global styles & Tailwind config

components/
├── branch-manager/              # BM-specific components
│   ├── GenericBranchHero.tsx
│   ├── GenericBranchCTA.tsx
│   ├── GenericBranchEarningsLift.tsx
│   ├── LOProductivity.tsx
│   ├── FinancialIntelligence.tsx
│   ├── AIForManagers.tsx
│   └── RecruitingAdvantage.tsx
├── calculators/
│   ├── LOEarningsCalculator.tsx
│   └── BranchProfitabilityCalculator.tsx
├── DevNavigation.tsx            # Dev page switcher
└── ui/                          # shadcn/ui components

Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Installation

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 to view the site.

Build for Production

npm run build
npm start

Key Features

• 🚀 3-Page Architecture: JoinAFN Home (gateway) → Generic LO Page → Generic BM Page
• 🤖 Brady AI Assistant: Fixed sidebar with conversational AI, mode system (Earnings/Profit), and smart forms
• 🎯 Recruiting Flow System: Progressive contact forms with intelligent user identity tracking
• 💰 Interactive Calculators: LO Earnings and Branch Profitability calculators with real-time projections
• 🎨 Dual-Theme Design: Light/Dark mode with AFN brand colors (Sophia Purple #8B5CF6)
• 📱 Fully Responsive: Mobile-optimized with dedicated mobile CTAs and navigation
• 🎭 Standardized Animations: Consistent entrance animations across all sections
• ⚡ Client-Side Routing: Fast page transitions with hash-based navigation

Page Structure

JoinAFN Home (Gateway)

• Hero with dual CTAs (LO + BM)
• Operations section (secondary recruiting path)
• Role cards with micro-copy
• Direct navigation to role-specific pages

Generic LO Page

• Generic hero (no personalization)
• Modeled performance lift calculator
• Tech ecosystem showcase (Vesta LOS, Sophia AI, Rock CRM)
• Product coverage, growth section, NFC card
• Generic CTA

Generic BM Page

• Generic branch manager hero
• Earnings lift projections
• LO productivity tools overview
• Financial intelligence & AI for managers
• Recruiting advantage section
• Generic BM CTA

Development Guidelines

Adding New Components

Section Components (src/components/sections/):

• Full-width page sections
• Export from index.ts for clean imports

UI Components (src/components/ui/):

• Pure, stateless components
• No business logic or API calls
• Reusable across the application

Shared Components (src/components/shared/):

• Components with hooks or local state
• Shared across multiple features
• May include business logic

Layout Components (src/components/layouts/):

• Navigation, headers, footers
• Page structure components

State Management

• Local State: React useState/useReducer
• Global State: React Context in src/contexts/
• Server State: React Server Components (when applicable)

API Integration

• Client logic: src/lib/api/
• Type definitions: src/lib/api/types/
• Data transformers: src/lib/api/mappers/

Form Validation

• Use Zod schemas in src/lib/schemas/
• Validate on both client and server

Tailwind Configuration

Tailwind v4 is configured via @theme in src/styles/globals.css. Typography defaults are set for:

• Headings (h1-h4)
• Paragraphs
• Labels, buttons, inputs

Note: Avoid font-size, font-weight, and line-height Tailwind classes unless explicitly overriding defaults.

License

Proprietary - AFN Internal Use Only

Open [http://localhost:3000](http://localhost:3000) to view the site.

## Build for Production

To create a production build:

```bash
npm run build

To start the production server:

npm start