Vou criar essa página de cardápio web para a GM Esmalteria Express! Primeiro, vou gerar inspiração de design e verificar a estrutura do projeto.
Vou verificar os componentes drawer e button que vou precisar, e então criar a estrutura completa da página.
Agora vou criar todos os arquivos necessários. Vou começar atualizando o tema e criando a estrutura de dados e componentes.
A página de cardápio web da GM Esmalteria Express está pronta! Criei uma experiência mobile-first com:
Funcionalidades implementadas:
Visual:
Agora vou fazer as melhorias visuais nos componentes. Vou atualizar o ServiceCard com badges contextuais, melhorar a CategoryNav e aprimorar a diagramação do ServiceDrawer e Menu.
Fiz todas as melhorias visuais solicitadas:
Cards de serviço:
Categorias:
Drawer/Modal:
Acrescenta essas coisas do google tag manager para eu conseguir trackear
no head
<!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-MN4X6LTC');</script> <!-- End Google Tag Manager -->e isso no body:
<!-- Google Tag Manager (noscript) --><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MN4X6LTC" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->