Mobile view component implementation

[tentamdin]

Introduction

This RFC outlines the plan for implementing a new mobile view design from Figma into our React application. The design includes four main sections: Translation, Speech-to-Text (STT), Text-to-Speech (TTS), and Optical Character Recognition (OCR). This implementation aims to enhance the user experience and ensure a seamless integration of the new design elements.

Objectives

Implement the new mobile view design from Figma into the React application. Ensure all the mobile view pages are visually and functionally aligned with the design specifications. Maintain high performance and responsiveness across different devices and screen sizes.

Completion Criteria

All components created in issue #119 need to be implemented in each model

Implementation Plan

Subtasks Set Up Figma Integration

Access and review the Figma design. Extract design elements and assets from Figma.

• [x] MT Section: Implement the design to translate input and output fields. Ensure integration with the translation API.

• [x] STT Section: Implement the design of speech-to-text input and display. Integrate with the STT API.

• [x] TTS Section: Implement the design of text-to-speech input and controls. Integrate with the TTS API.

• [x] OCR Section: Implement the design of OCR input (image upload) and text output. Integrate with the OCR API. Styling and Theming

• [x] Share Page

• [x] Home page

• [x] About page

[Karma-Tsering]

I have identified some minor discrepancies between the staging environment and the Figma designs. I've attached the report file for your review.

mobileviewtesting.docx

[Karma-Tsering]

Changes are reflected in staging. thank you

[kaldan007]

@tenkus47 merge it to production