Note: Currently the pages have the text baked into the images, and the customer does not want that. This is an opportunity to improve their current quality of life by following a best practice: Text should not be rendered into images; it is bad for accessibility, translation, and also makes restyling/maintaining the site much more difficult.
Text should be rendered in a white font with a black drop-shadow, approximately 75% opacity.
Text: 工業プロセス用添加剤
Image: (this is made from the page linked above using generative fill, we want the customer to provide originals if possible though)
Mobile requirements:
As the page gets smaller, the hero should occupy no more than 33% of the viewport height and the font should scale down to an appropriate size. Some experimentation might be needed as the current site uses images only.
This should leverage the standard hero, adjusted to fit the size/styling needs for Momentive's JP site.
https://www.momentive.jp/content/momentive/jp/ja/Product/ProductCategories/construction-sealants.html#tabs-57bdaeedc7-item-4127f05bc0-tab
Note: Currently the pages have the text baked into the images, and the customer does not want that. This is an opportunity to improve their current quality of life by following a best practice: Text should not be rendered into images; it is bad for accessibility, translation, and also makes restyling/maintaining the site much more difficult.
Text should be rendered in a white font with a black drop-shadow, approximately 75% opacity.
Example hero: (from https://www.momentive.jp/content/momentive/jp/ja/Product/ProductCategories/Industrial_Process_Additives.html)
Text: 工業プロセス用添加剤 Image: (this is made from the page linked above using generative fill, we want the customer to provide originals if possible though)
Mobile requirements:
As the page gets smaller, the hero should occupy no more than 33% of the viewport height and the font should scale down to an appropriate size. Some experimentation might be needed as the current site uses images only.