CrimsonFlow

A modern authentication UI featuring a split-panel login design with animated promotional carousel. Built with React, TypeScript, and Tailwind CSS.

Quick Start

git clone https://github.com/C187/crimsonflow.git
cd crimsonflow
npm install
npm run dev

Open http://localhost:5173 to view it.

Demo Account

Email: demo@crimsonflow.com Password: demo123

Features

UI/UX

• Split-screen design with animated promotional carousel
• Glassmorphism effects and smooth CSS transitions
• Fully responsive layout (mobile-first)

Authentication Flows

• Login with email/password and "Remember Me" option
• Social login buttons for Google and Apple
• Registration with real-time password strength validation
• Password recovery workflow

Validation

• Client-side email format validation
• Password complexity requirements
• Inline error messages
• Password visibility toggle

Tech Stack

• React 18
• TypeScript
• Tailwind CSS
• Lucide React (icons)
• Vite

Project Structure

src/
  components/
    Input.tsx
    LoginForm.tsx
    PromoPanel.tsx
    SocialButton.tsx
  services/
    mockAuthService.ts
  App.tsx
  types.ts

Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build

License

MIT