Use minha conexão com o Opus Growth para isso. Se você não encontrar a ferramenta de que precisa, procure entre as ferramentas do Opus Growth (com search_tools, se estiver na sua lista); se não conseguir acessar as ferramentas de forma alguma, não adivinhe, me avise.
No site
[nome do servidor] do meu servidor de hospedagem Opus Growth, crie um site de marketing estático e rápido para o meu produto de software
[nome do produto], com a cara dos templates modernos de SaaS do Webflow, mas sem usar o Webflow. Produto:
[o que faz e para quem, em uma frase]. Principais recursos:
[seis recursos, uma frase para cada]. Capturas de tela do app:
[links para três capturas de tela e o que cada uma mostra]. Planos: [nomes dos planos, preços mensais e anuais, se os impostos estão incluídos, o que cada plano inclui]. Logos de clientes que tenho autorização por escrito para exibir:
[arquivos de logotipo ou "nenhum"]. Depoimentos de clientes: [depoimento aprovado, nome, cargo, empresa ou "nenhum"]. Empresa:
[razão social],
[endereço],
[telefone],
[e-mail],
[número do WhatsApp]. Caminho de cadastro ou demonstração: [URL da página de cadastro ou "pedidos de demonstração por WhatsApp e e-mail"]. Domínio:
[domínio].
Páginas: home (hero com uma captura de tela do produto, faixa de logos, grade bento de recursos, vitrine do produto em abas, depoimentos de clientes, FAQ, chamada final para ação), recursos (/ozellikler/, cada recurso com seu próprio título e âncora), preços (/fiyatlar/: alternador, cards de planos, tabela comparativa, FAQ de cobrança), contato (/iletisim/, sem formulário; e-mail, WhatsApp com mensagem pré-preenchida e telefone), privacidade (/gizlilik/) e 404.html.
Estilo: SaaS moderno com fundo claro. Se nenhuma
[preferência de cor] for informada, use um fundo off-white quente, texto preto-tinta e um único destaque vibrante (usado apenas como fundo, com texto escuro sobre ele). Dois pesos de uma mesma família da Fontshare (por exemplo, Satoshi 400 e 700). Tiles bento grandes e arredondados, botões em formato de pílula, a captura de tela do produto dentro de uma moldura de janela escura. Sem gradientes de roxo para azul e sem efeito de vidro em tudo.
Regras de interação (interações do Webflow sem biblioteca):
1. GSAP, Lenis e Swiper NÃO são carregados. Escreva as interações em CSS mais um único arquivo JS puro de no máximo 3 KB, carregado com defer apenas na home. O alternador de preços não precisa de script.
2. Grade bento: uma grade CSS de 4 colunas no desktop, com um tile 2x2 e dois tiles de 2 colunas de largura, organizados de modo que nenhuma célula fique vazia; uma coluna no mobile. Cada tile traz um link real para o título correspondente na página de recursos e o tile inteiro é clicável: dê ao link um ::after com inset:0 (um stretched link) e não coloque um segundo link no tile. Ao passar o mouse e em :focus-within, a borda escurece, o tile sobe 4 pixels com transform e o pequeno fragmento de interface dentro dele se move (uma lista de passos desliza para o lado, barras crescem com scaleY).
3. A faixa de logos usa apenas logos de clientes que deram autorização por escrito; se não houver nenhum, deixe a seção de fora e não a substitua por logos fictícios nem por uma lista inventada de "integrações". A faixa é feita de duas cópias da mesma lista (a segunda com aria-hidden="true") que se movem com um @keyframes translate3d(-50%, 0, 0) em CSS; ela pausa ao passar o mouse e ao receber foco. Como o movimento dura mais de cinco segundos, a WCAG 2.2.2 exige um botão "Pausar faixa": o botão fica oculto no HTML, o JS o revela e atualiza aria-pressed e o rótulo. Dê à linha que contém o botão um min-height igual à altura do botão; na demonstração a linha crescia quando o botão aparecia e foi medido um pequeno deslocamento (CLS 0,002) no desktop. Com prefers-reduced-motion a animação para, a cópia fica oculta e os logos viram uma grade estática com quebra de linha.
4. Vitrine do produto em abas: no HTML, as abas são links internos da página para os painéis (href="#ekran-x") e os três painéis ficam visíveis um embaixo do outro, de modo que o conteúdo fica completo com o JS desativado e para os crawlers. Dê ao contêiner das abas role="group" e um aria-label. O JS as transforma em role="tablist", "tab" e "tabpanel", gerencia aria-selected, aria-controls, tabindex e hidden, oferece suporte às setas esquerda e direita, Home e End, e seleciona a aba correspondente quando a página é aberta com #ekran-x. Os painéis ficam abaixo da primeira tela, então ocultá-los não causa deslocamento de layout; as imagens dos painéis usam loading="lazy".
5. O alternador de preços funciona sem JS: dois botões de opção (radio) dentro de um fieldset (Mensal marcado por padrão) e regras como `.pricing:has(#donem-yillik:checked) .price-m { display: none }` que revelam os preços anuais. Oculte o radio visualmente, mas mantenha o label inteiro clicável e focável pelo teclado; mostre o anel de foco com `label:has(input:focus-visible)`. Na visão mensal, cada plano exibe uma linha "Cobrado anualmente: X TL", de modo que os dois preços existam no texto.
6. Os depoimentos de clientes vêm apenas de citações aprovadas que possam ser verificadas por nome, cargo e empresa. Se você não tiver nenhuma, remova a seção; se usar uma durante o rascunho, faça dela um card placeholder com borda tracejada informando que será preenchido quando chegar um depoimento real, e pergunte-me antes de publicar. Não escreva schema de Review nem de aggregateRating.
7. A captura de tela do produto no hero é o elemento LCP no desktop: fetchpriority="high", sem lazy, com sizes indicando sua largura real. No mobile o LCP costuma ser o texto do título; a captura de tela ainda deve carregar a versão de 480 pixels por meio do srcset.
Schema: SoftwareApplication na home e na página de preços (name, applicationCategory "BusinessApplication", operatingSystem, url, image, publisher e uma Offer por plano e período de cobrança: name, price, priceCurrency "TRY", url). O Google exige uma avaliação ou review para o rich result de aplicativo de software; sem avaliações genuínas coletadas no seu próprio site, nenhuma estrela será exibida, e isso não deve ser resolvido com uma nota inventada. FAQPage na home, em recursos e em preços, ContactPage em contato, BreadcrumbList nas páginas internas. O primeiro parágrafo da página de preços responde diretamente: "Os preços do
[nome do produto] começam em N TL por mês". A tabela comparativa é uma `<table>` de verdade e rola na horizontal em telas estreitas dentro de `<section tabindex="0" aria-label="...">`; na demonstração, uma div com role="region" disparou prefer-native-element, e duas sections rotuladas pelo mesmo título dispararam unique-landmark.
Configuração e armadilhas conhecidas (cada uma custou pontos nas medições da demonstração, não pule nenhuma):
1. Se já houver um site no ar no servidor, avise-me primeiro, porque a configuração sobrescreve o index.html e a pasta assets. Faça a prévia de scaffold_site com confirm=false e chame-o com confirm=true somente depois que eu aprovar. Em seguida, leia site_design_guide e site_seo_guide. Antes de escrever código, coloque a direção de design (tipografia, cores, grade, elemento de assinatura, linguagem de movimento e as bibliotecas que NÃO serão carregadas) em um pequeno arquivo ART.md fora de assets e mostre-o para mim.
2. Compile o Tailwind, não o carregue pelo CDN. Instale-o com site_run_command e background=true (`npm i -D tailwindcss@3`) e acompanhe com site_command_status. Os caminhos de content em `tailwind.config.js` devem cobrir todos os arquivos HTML, os templates de `_src` e qualquer arquivo JS que escreva classes. `_src/tw.css` contém a linha `@import "../assets/app.css";` mais as três linhas `@tailwind`; compile-o em um único arquivo com `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify`. Remova o script cdn.tailwindcss.com e o tailwind.config inline de todas as páginas e vincule apenas `/assets/site.css`. Recompile após cada alteração no HTML.
3. Hospede as fontes você mesmo. Leia o CSS da família Fontshare escolhida, baixe o woff2 de cada peso separadamente com site_fetch em `assets/fonts/` e escreva as regras @font-face com `font-display: swap` em `assets/app.css`, que é onde o design-check procura uma fonte personalizada. Confira o nome do font-family no CSS baixado e confirme que a família tem as letras turcas ı, İ, ş e ğ (a Tanker não tem ı). Faça preload de TODOS os pesos usados na primeira tela com `<link rel="preload" as="font" type="font/woff2" crossorigin>`, posicionado antes da linha do stylesheet; se forem mais de três arquivos, use menos pesos. Na demonstração, um único peso de texto sem preload empurrou o LCP no mobile para 2,6 segundos e a Performance para 97. A maioria das fontes da Fontshare não tem o símbolo ₺, então escreva os preços com "TL".
4. Faça o menu e o rodapé em HTML estático. Não carregue chrome.js, motion.js nem site.config.js nas páginas. Escreva um pequeno `chrome-stamp.mjs` que leia a lista de navegação de site.config.js e carimbe `_src/header.tpl` e `_src/footer.tpl` entre os marcadores `<!-- nav:start --><!-- nav:end -->` e `<!-- footer:start --><!-- footer:end -->` em todas as páginas, adicionando aria-current="page" ao link ativo. Use placeholders como `
[[NAV]]` em vez de `{{...}}` e não dê aos templates a extensão .html, senão o design-check e o seo-check os tratam como páginas inacabadas. Construa o menu mobile com um `<details>` sem JS. Mantenha o nome da empresa, o endereço e o telefone como texto simples no rodapé e faça os links do rodapé e do breadcrumb terem pelo menos 44 pixels de altura.
5. Converta as imagens ao buscá-las com site_fetch: grave a mesma imagem como arquivos separados com resize="480x", "800x" e "1200x", image_format="webp", quality=60 (o site_fetch não recorta, então peça a origem na proporção de que você precisa). Dê a cada `<img>` srcset, sizes, width e height que correspondam à proporção real. A imagem que é o elemento LCP da página recebe fetchpriority="high" e não é lazy; todas as outras imagens recebem loading="lazy" decoding="async". Se uma imagem preencher a primeira tela no mobile, sirva um recorte menor para o mobile com `<picture>`.
6. Adicione `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` a todas as páginas e gere um apple-touch-icon de 180 pixels a partir do logo com site_fetch e resize="180x180". Sem o link de favicon, o navegador solicita /favicon.ico, registra um 404 e as Práticas recomendadas caem para 96.
7. Regras do validador de HTML: comece cada documento com um `<!DOCTYPE html>` em maiúsculas; todo espaço no texto visível de um link tel: deve ser ` `, inclusive o que vem depois de um prefixo como "Ligue: 0212..."; não use style=""; dê um type a todo botão; coloque aria-label apenas em landmarks, formulários ou elementos interativos (em um ul ou em uma div sem role, deu erro); nunca rotule dois landmarks com o mesmo nome; não deixe espaços em branco no final das linhas.
8. Não pule níveis de título: em uma página de lista, títulos de cards como h3 logo após o h1 derrubaram a Acessibilidade para 98. Ao reutilizar um card, defina o nível do título por página (h2 em uma página de lista, h3 dentro de uma seção h2).
9. Chame o atributo de movimento de data-reveal (o design-check só reconhece movimento por esse nome). O JS dá o estado inicial oculto apenas aos blocos que estão abaixo da tela quando a página abre e nunca oculta o conteúdo da primeira tela; use transform, pois fazer fade com opacity reduz a auditoria de contraste. Coloque o atributo no bloco que envolve um título e sua descrição, não só no título; na demonstração, um título em espera deslizou sobre o parágrafo abaixo dele. Com prefers-reduced-motion: reduce nada é ocultado e as animações ficam desativadas.
SEO, AEO e GEO:
1. Use URLs no estilo de diretório com barra final. Preencha o bloco seo de site.config.js e execute `node seo-stamp.mjs`. Escreva o schema específico de cada página em blocos `<script type="application/ld+json">` separados, vinculados ao grafo base por @id. Não aninhe BreadcrumbList dentro de @graph; mantenha-o em seu próprio bloco, que é a única forma de o seo-check enxergá-lo.
2. Títulos com no máximo 60 caracteres (o seo-check sinaliza como erro qualquer um abaixo de 25 ou acima de 65), descrições de 130 a 158 caracteres, um h1 por página e pelo menos 150 palavras de conteúdo principal em cada página. Páginas de contato, privacidade e de lista tendem a ficar curtas; acrescente informações específicas da página, não enchimento.
3. O primeiro parágrafo de cada página responde diretamente à pergunta da página. Escreva FAQs específicas de cada página com `<details>` e marque-as como FAQPage. Mostre o publisher e uma data de "Última atualização" em um elemento `<time>`.
4. No robots.txt, escreva sua decisão com o motivo para GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended, Bingbot e CCBot, e aponte para o sitemap. O sitemap.xml traz datas lastmod reais. O llms.txt contém um resumo preciso do site em duas frases e uma lista das páginas importantes.
5. Sem invenções: não escreva avaliações, notas, prêmios, números de clientes, certificados, horários de funcionamento, coordenadas nem preços sem me perguntar. Deixe totalmente de fora do schema qualquer campo que você não conheça.
Gates (em ordem; não diga "pronto" até que todos passem):
1. Com site_run_command, execute `node chrome-stamp.mjs`, o build do Tailwind, `node seo-stamp.mjs`, `node seo-check.mjs` (0 erros, 0 avisos), `node design-check.mjs` (0 erros; justifique qualquer aviso restante) e `npx html-validate "**/*.html"` (0 erros).
2. Veja todas as páginas com site_preview, view="mobile" e view="desktop". O site_preview captura a página com o movimento desativado (reduced-motion); se faltar conteúdo nessa captura, o estado estático está quebrado. Em capturas de página inteira, elementos fixos, como uma barra sticky, podem aparecer no meio da página e imagens lazy mais abaixo podem ficar em branco; não conte isso como erro, mas confira os caminhos delas.
3. Execute core_web_vitals para cada página com strategy="mobile" e strategy="desktop". Critério de aceitação: no mobile, Performance de pelo menos 95 (meta de 99 a 100) e Acessibilidade, Práticas recomendadas e SEO 100; no desktop, os quatro em 100. Para uma página que não atingir a meta, use resources=true para encontrar o arquivo que a atrasa, corrija e meça de novo. Depois execute seo_audit na home com strategy="mobile" e runs=2. Nenhum endereço fora do seu próprio domínio pode permanecer na lista de requisições de rede.
4. Sem rolagem horizontal em 360, 390, 768 e 1440 pixels de largura, alvos de toque de pelo menos 44 pixels, sem erros no console.
Verificação de interação: o site_preview não consegue mostrar hover nem movimento. Diga-me como verificar em um navegador desktop que os tiles bento sobem ao passar o mouse e ao focar com Tab, que o botão "Pausar faixa" para a faixa, que as abas mudam com as setas do teclado, que o alternador de preços mostra os preços anuais mesmo com o JavaScript desativado, e que, em um celular com movimento reduzido, os logos viram uma grade estática.
Depois de publicar: faça a prévia da regra `/assets/* Cache-Control: public, max-age=31536000, immutable` com site_headers e aplique-a quando eu aprovar; a partir daí, versione o nome do arquivo sempre que o CSS ou o JS mudar (site-v2.css e assim por diante). Envie o sitemap.xml com gsc_submit_sitemap e verifique a home com gsc_url_inspect. No final, entregue-me: uma tabela de pontuação página por página (página, quatro notas no mobile, quatro notas no desktop, LCP, CLS), o resultado de cada gate e a lista das correções que você aplicou.
