O C R Mobile App - Copy this React, Tailwind Component to your project
Create a clean, intuitive mobile app interface for an OCR application with the following features: 1. Home Screen: - Minimalist design with a light theme (option for dark mode) - Clear app name "TextSnap" or "OCR Scanner" at the top - Large, prominent camera button in the center bottom - Gallery access button next to the camera button - Recent scans preview cards in a horizontal scrollable list 2. Camera/Image Capture Interface: - Full-screen camera view with clear frame guidelines - Flash toggle option - Capture button with subtle animation feedback - Image quality/resolution selector (discreet dropdown) - "Back" button to return to home screen 3. Text Extraction View: - Progress indicator during text recognition - Split-screen view showing: * Original image on top half (pinch to zoom enabled) * Extracted text in bottom half (scrollable) - Edit pencil icon that expands the text field for easy editing - Text formatting options (accessible via three-dot menu) 4. Action Buttons (Bottom Action Bar): - Copy text button with icon - Share text button with icon - Save button with icon - Delete button with icon 5. User Experience Elements: - Haptic feedback on button presses - Smooth transitions between screens - Pull-to-refresh functionality - Simple onboarding tutorial for first-time users - Bottom navigation bar with: Home, History, Settings icons 6. Settings Screen: - Language selection for OCR - Default save location options - Theme selection - Text size adjustment The interface should follow mobile-first design principles with emphasis on one-handed operation, clear touch targets, and visual clarity. All interactive elements should have appropriate visual and tactile feedback.
