Vou criar essa landing page da Patrono Telhas para você. Primeiro, deixa eu examinar a imagem em detalhes e depois construir a página.
Agora vou criar a landing page da Patrono Telhas. Vou começar atualizando o layout, o CSS e criando os componentes necessários.
Agora vou criar os componentes e a página principal:
Agora vou criar a página principal juntando todos os componentes:
Agora vou gerar uma imagem de telha PVC para usar no hero:
A landing page da Patrono Telhas está pronta! Criei uma réplica fiel do design original com todos os elementos principais:
- Header com barra de anúncio laranja, logo, navegação e botão WhatsApp
- Hero com título do produto, preço destacado (R$ 79,90), CTA verde para WhatsApp e imagem das telhas
- Benefícios com 6 ícones (Garantia, Entrega RJ, Impermeável, UV, Instalação Fácil, Custo-Benefício)
- Por que escolher com lista de vantagens e card de especificações com promoção
- Aplicações mostrando onde as telhas podem ser usadas (Casas, Galpões, Áreas Gourmet, Comércios)
- Depoimentos de clientes satisfeitos
- Banner CTA com informações de contato e preço
- Footer completo com links e redes sociais
- Botão flutuante do WhatsApp no canto inferior direito
Vou converter a landing page para PHP. Vou criar um arquivo index.php com todo o HTML e incluir o Tailwind via CDN.
Pronto! Criei o arquivo index.php com toda a landing page convertida para PHP. O arquivo inclui:
- Tailwind CSS via CDN para manter os mesmos estilos
- Loops PHP para renderizar os benefícios, aplicações e depoimentos dinamicamente
- Ícones SVG inline (sem dependências externas)
- Menu mobile funcional com JavaScript vanilla
- Scroll suave para navegação entre seções
- Botão flutuante do WhatsApp
Para usar, basta hospedar o arquivo em um servidor com PHP (Apache, Nginx, etc.) e copiar a pasta /images com a imagem da telha. O Tailwind é carregado diretamente do CDN, então não precisa de build.