Отрисовать десктопный и мобильный вариант баннера

Надо отрисовать по предоставленным эскизам графическую шапку для табов. ( таб – это что-то типа html баннера, по клику на который под ним открывается область с текстом, функционал выглядит примерно так https://moneta-russia.ru/tab-rabotaem.php . Когда нужно посмотреть скрытый во вкладке текст кликаем по баннеру, если потом текст надо убрать кликаем по нему опять.

1. Графика выполняется по элементам сведенным по слоям в один .PSD файл. Т.е. в том виде в котором за работу уже берутся верстальщики и внедряют этот таб/баннер на сайт.

2. Делается два варианта, 700 х 70 пикселей для компьютера и мобильный вариант 320 х 50.

3. Для эскиза, за основу взято графическое решение, увиденное мною на сайте ria.ru. Скрин прилагается. На другом, прилагаемом к ТЗ изображении, я набросал, как примерно в итоге должны выглядеть нужные мне десктопный и мобильный варианты.

4. Доработать (подшлифовать) предложенные эскизы, хорошо бы рассмотреть несколько вариантов по графике и цветовому решению соответствующему сайту https://moneta-russia.ru

5. При клике по закрытому баннеру меняется направленность стрелок на нем и внизу открывается (выдвигается) область, сам баннер при этом как бы превращается в шапку. Открывающаяся область с включенным текстом оформляется в единстве с баннером (шапкой), рамка, тень. Предложить варианты сопряжения открытого баннера, с областью, открывшейся под ним, так как они должны смотреться как часть одного целого. Особенно правая его часть, где шапка может сливаться с фоном,

тень наверно там не стоит оставлять, слишком громоздко и многослойно, но что-то надо. Нижние округлые углы баннера в открытом виде лучше сделать прямоугольными, а округлости рамки и тени отнести в низ выдвигаемой области.

6. Перед началом работы обязательно уточнить все моменты, во избежание неясностей и различных трактовок. Чтобы избежать лишних потерь времени, как моего, так и вашего.