A complete medium-fidelity interactive prototype for the Atrios Connector Network onboarding flow built with Vite, React, React Router, and shadcn/ui. Features all 18 screens with exact copy from Lucia's wireframes.
- Landing - "Join the Atrios Connector Network" with value props
- Referral Code - Optional referral code entry
- Sign Up - User registration form
- LinkedIn Connect - Simulated OAuth with modal
- Processing - Manual tier path selection for demo
- Fast Track - Expedited approval for VIP profiles
- Schedule Call - Calendar interface for onboarding call
- Confirmation - Success confirmation with next steps
- Qualified - Standard verification process intro
- Find Matches - Explain LinkedIn data requirement
- Export Instructions - 9-step LinkedIn export guide
- Waiting LinkedIn - Progress tracker while waiting
- Upload Data - File upload interface
- Analyzing Connections - Processing with loader 12a. Approved - Success with match stats → Schedule Call 12b. Rejected - Not enough matches message
- Waitlist - Under review message
- Medium-fidelity UI - Polished shadcn/ui components with proper styling
- Professional color palette - Clean, modern design matching Atrios brand
- Micro-interactions - Hover states, transitions, and subtle animations
- Responsive layout - Works on all screen sizes
- Gradient backgrounds - Subtle gradients for visual depth
- Shadow & depth - Layered card design with proper elevation
- LinkedIn OAuth simulation - Modal overlay with 2-3 second loading state
- Manual tier selection - Three clickable paths after profile analysis
- Context API - Persistent user data across screens
- Form validation - Real-time validation on all inputs
- Smooth animations - Custom keyframes for fade-in and zoom effects
- Loading states - Professional spinners and loading indicators
- Vite - Build tool and dev server
- React - UI library
- React Router - Client-side routing
- shadcn/ui - Component library
- Tailwind CSS - Styling
- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser to
http://localhost:5173
atrios-onboarding/
├── src/
│ ├── components/
│ │ └── ui/ # shadcn/ui components
│ │ ├── button.jsx
│ │ ├── card.jsx
│ │ ├── input.jsx
│ │ └── label.jsx
│ ├── context/
│ │ └── OnboardingContext.jsx # User data persistence
│ ├── screens/ # Flow screens
│ │ ├── Landing.jsx
│ │ ├── ReferralCode.jsx
│ │ ├── SignUp.jsx
│ │ ├── LinkedInConnect.jsx
│ │ └── Processing.jsx
│ ├── lib/
│ │ └── utils.js # Utility functions
│ ├── App.jsx # Router configuration
│ ├── main.jsx # Entry point
│ └── index.css # Global styles
├── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
└── postcss.config.js
- Landing → User clicks "Get Started" or "I don't have a referral code"
- Referral Code (optional) → User enters code or skips
- Sign Up → User enters name and email
- LinkedIn Connect → User authorizes LinkedIn (simulated)
- Processing → System analyzes profile and assigns tier
After the processing screen analyzes the profile, users can manually select one of three paths:
- Tier 1 (Fast Track) - Strong network alignment
- Tier 2 (Qualified) - Additional verification needed
- Tier 3 (Waitlist) - Under review
The landing page currently displays "ATRIOS" as a text placeholder. To add your actual logo:
- Place your logo file in
public/logo.png(or.svg) - Follow the detailed instructions in
LOGO_INSTRUCTIONS.md
Recommended format: SVG with transparent background, 32-48px height
Major Redesign - Exclusive & Aspirational
- 🎯 New positioning: "30K applied, 2.8K accepted" - selective, high-quality
- ✨ Premium design: White backgrounds, generous whitespace, refined typography
- 🆕 New screens: Choose User Type, split-screen Create Account
- 🎉 Confetti: Success celebrations with react-confetti
- 📊 Stepper: Progress indicators for Qualified path
- 📱 Phone field: Added to context and About You screen
- 💼 User types: Connector/Company selection
Infrastructure Complete:
- ✅ react-confetti installed
- ✅ Stepper component created
- ✅ Context updated (phone, userType, matchCount)
- ✅ Premium design patterns documented
Screens Rebuilt:
- ✅ Landing: Premium exclusive positioning
- ✅ Choose User Type: New screen with radio cards
Documentation:
- 📖
PREMIUM_REDESIGN_STATUS.md- Complete implementation guide - Includes all design patterns, code examples, and remaining work
Design System Overhaul:
- ✅ Professional color palette (#1a1a1a primary, success/warning/error colors)
- ✅ Enhanced typography (h1: 40px, h2: 32px, body: 16px, proper line-height)
- ✅ Custom animations (fadeIn, pulse-slow, smooth transitions)
- ✅ Professional shadows (sm, md, lg, xl)
- ✅ Lucide-react icons integrated throughout
Enhanced Components:
- ✅ Button: Hover lift effect, shadows, icon gap, success variant, larger sizes
- ✅ Input: h-12, enhanced focus states with ring, rounded-lg borders
- ✅ Card: rounded-xl, fadeIn animation, better shadows
- ✅ Progress: New component with smooth transitions
- ✅ Badge: New component with color variants (success, warning, error)
Upgraded Screens:
- ✅ Landing: Lucide icons in colored circles, hover cards, ArrowRight on CTA
- ✅ Processing: Enhanced spinner, icon-based tier selection with hover lift
Design Guidelines Created:
- 📖
DESIGN_UPGRADE_GUIDE.md- Complete reference for upgrading all remaining screens - Includes code patterns, icon usage, color coding, and implementation priorities
Full Implementation:
- ✅ All 18 screens built with exact wireframe copy
- ✅ Core flow (5 screens) + 3 complete tier paths
- ✅ Full navigation between all screens
- ✅ Manual tier selection for demo purposes
- ✅ Random branching in Qualified path (Approved/Rejected)
Tier Paths:
- Fast Track (Tier 1): 3 screens - VIP expedited path
- Qualified (Tier 2): 8 screens - Standard verification with LinkedIn export
- Waitlist (Tier 3): 1 screen - Immediate waitlist
See FLOW_DOCUMENTATION.md for complete screen-by-screen breakdown with exact copy and navigation flows.
User data is stored in Context and includes:
- Email address
- First and last name
- Referral code (if provided)
- LinkedIn connection status
- Selected tier (manual selection for demo purposes)
This data is accessible across all screens and displayed where relevant.