Дизайн нескольких внутренних страниц для сервиса text to speech.

Нам необходимо создать интерфейс для сервиса генерации аудио по тексту. 

Идея следующая: 

Пользователь входит в дашборд, первая страница - создание аудио по тексту. 

Возможно нужен какойто breadcrumb. ссылка на главную - со списком аудио и текущее местоположение, создание или редактирование. 

Есть элементы выбора языка и голоса и кнопка для превью(прослушивание голоса)

Большой textarea для текста

кнопка для генерации аудио.

При генерации, пользователь остается на той же странице и ждет окончания генерации.

Когда аудио готово мы расширяем эту страницу дополнительными элементами

показываем плеер, чтобы прослушать результат, показываем code snipped, чтобы встроить этот плеер к себе на сайт.

Показываем текстовый элемент с прямой ссылкой на аудио файл и пару кнопок - скачать файлик или скопировать эту ссылку.

вторая страница:

список сгенерированных аудио: 

кнопка для проигрывания аудио, текст аудио, кнопка чтобы скачать это аудио. И возможность перейти в редактирование или просмотреть подробнее информацию об этом аудио. Тогда мы попадем на страницу редактирования.

И кнопка чтобы создать новое аудио.

Так же вверху должен быть наш логотип и информация о пользователе: его текущий баланс. Баланс указан в количестве симфолов доступных для озвучивания. Когда баланс равен 0, мы должны показать ему кнопку или ссылку, чтобы пополнить баланс, а так же сообщить что он не может озвучивать новые тексты и обновлять старые. Кнопка покупки - будет отправлять пользователя на страницу оплаты(stripe ее дизайн не требуется.). Нужны так же две страницы - с успешной покупкой и не успешной. 

 Если пользователь оплатил покупку, мы должны как то это отображать на страницах и должны показать кнопку для перехода на страницу управления своей подпиской, эта ссылка будет вести на страницу stripe наверное как то это надо обыграть, чтобы пользователь понимал что идет не на внутреннюю страницу. 

наш текущий сайт: bottalk.io

Мы использвем шаблон bootstrap Argon Dashboard React by Creative Tim

Использование этих компонентов будет предпочтительнее, но не обязательно.