Web site development (html and js for wordpress theme

We need a custom Wordpress template for a website. the stucture is different between mobile and desktop versions. In attachment all page template that we need. --- IT IS DEVELOPED WITH ADOBE XD --- The project consists in some HTML templates that will be used to build a website; including CSS animations and Javascript scripts to accomplish the described functions. HTML page templates: * General * grey areas have to be covered by a placeholder image with same dimensions; * heading section with featured images and footer are meant to extend to full page width; * HOME PAGE * heading section is composed by two different slideshows; * section "Azienda": labels will rotate on mouse hover, displaying a second label; * section "Azienda": grey areas have to be covered by a placeholder image with same dimensions; * section "Guida prodotto": bottom label "nome prodotto / codice" is an HTML input element, type text; "Cerca" is an HTML input element, type submit; * section "In evidenza": is a slideshow listing different products; * section "Punti vendita": is an HTML form, "Città" is an HTML input, type text; "Cerca" is an HTML input, type submit; * section "Social wall": content is not needed, will be built using a specific external component; * section "Iscriviti alla nostra Newsletter!": is an HTML form; "Email" is an input, type text; "Invio" is an input, type button; * AZIENDA * section "Noi di Tassani": left section is an accordion, image is relative to the single section. By clicking an accordion item, its section gets expanded with a CSS animation and relative image gets loaded in the section on the right. When the page is loaded, first accordion item is opened. * section "Urban renewal": * PRODOTTI - Single product * section "Utilizzo": features a special animation meant to show to website users on which surfaces the paint can be applied. By hovering the mouse on a paint brush symbol (or clicking in mobile version) the circle will enlarge, coloring the unerlying part of image and showing related surface name instead of the brush. Paint brush coordinates and surface names are different for each product and could be stored in a Javascript variable inside the page (that we will populate dynamically on page load) or requested via AJAX. To obtain desaturated version of the image will be used CSS filters and not a separated image; * section "Preparazione del supporto": bottom selectors "Cemento/Supporti già verniciati/Ceramiche) are different tabs; by clicking one of them the main upper section will change, showing detailed information about the specific surface; * section "Social wall": upper section is an embedded Youtube video; bottom section "Scopri i nostri post" is not needed;