# CareConnect UI Prototype CareConnect is a professional SaaS-style UI prototype for clinic lead management, patient messaging, and follow-ups. This project is **frontend-only** (no backend) and is built with **React**, **TypeScript**, **Vite**, and **Tailwind CSS**. ## Tech Stack - React 18 + TypeScript - Vite (bundler & dev server) - Tailwind CSS (design system and utility styling) - ESLint (basic linting) ## Design System - **Brand name:** CareConnect - **Primary:** `#4A60F6` - **Success:** `#48C774` - **Background:** `#F6F7F9` - **Border:** `#E5E7EB` - **Text:** `#1F2937` - **Radius scale:** 8–16px (tokens mapped to Tailwind `rounded-md`, `rounded-lg`, `rounded-xl`) - **Spacing:** 4 / 8 / 12 / 16 / 24 / 32 px - **Elevation:** custom shadows (`shadow-elevation-xs`, `shadow-elevation-sm`, `shadow-elevation-md`, `shadow-elevation-lg`) The main 3-column layout is responsive and collapses to stacked panels on small screens to support mobile and tablet use. ## Getting Started From the project root (`CareConnect`): ```powershell npm install npm run dev ``` Then open the URL printed in the terminal (typically http://localhost:5173) in Chrome, Edge, Firefox, or Safari. ### Build for Production ```powershell npm run build npm run preview ``` ## Accessibility - Form controls include labels and ARIA attributes where appropriate. - The modal component uses `role="dialog"`, `aria-modal`, and focus management. - All interactive elements are keyboard-focusable and use visible focus rings. ## Project Structure - `src/components/ui` – base design-system components (Button, Input, Textarea, Modal, Badge, Avatar) - `src/layouts` – global layout shells (3-column CareConnect layout) - `src/data` – placeholder data for leads - `src/styles` – Tailwind entrypoint and shared tokens - `src/App.tsx` – root application layout # CareConnect