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 meu servidor de hospedagem Opus Growth
[nome do servidor], construa um site rápido de várias páginas para
[nome do estúdio], com a cara dos sites de estúdios criativos exibidos na Awwwards. Estúdio:
[o que projeta, para quem], cidade e bairro:
[cidade, bairro], equipe:
[número de pessoas, nomes e funções]. Serviços:
[3 serviços]. Trabalhos: [para cada um, nome do cliente, tipo de trabalho, ano, uma frase sobre o desafio, uma sobre a solução, as partes entregues, link da imagem]. Contato:
[e-mail],
[telefone],
[número de WhatsApp],
[endereço]. Domínio:
[domínio]. Preferência de cor:
[cor ou "você escolhe"].
Páginas: home (/: hero com título gigante, marquee de serviços em rolagem, trabalhos selecionados, o que fazemos, processo, FAQ, call to action final), trabalhos (/isler/: o desafio, o que fizemos e o que entregamos em cada projeto), estúdio (/studyo/: equipe e regras de trabalho), contato (/iletisim/), privacidade e KVKK (/gizlilik/) e 404.html. Sem formulário na página de contato; informe e-mail, telefone e um link de WhatsApp com mensagem pré-preenchida, além de uma lista do que incluir na primeira mensagem. Sem números aprovados pelo cliente, descreva os resultados de forma qualitativa e não escreva porcentagens nem números de crescimento.
Estilo: estúdio criativo no estilo Awwwards. Fundo off-white, texto preto e uma única cor de destaque usada apenas como fundo (com texto preto sobre ela, contraste mínimo de 4,5:1). Uma fonte de exibição da Fontshare que se sustente em tamanhos muito grandes (por exemplo Clash Display 600) e uma fonte de texto serena (por exemplo Ranade). O título do hero preenche a tela com clamp entre 3.2rem e 12.5rem e espaçamento entre letras reduzido, sem estourar em 360 px. A lista de trabalhos é um conjunto de linhas com imagens grandes e títulos grandes em uma grade assimétrica que alterna colunas 7/5 e 5/7.
Regras de movimento (a parte mais difícil, siga-as à risca):
1. Bibliotecas: GSAP 3.13 core, ScrollTrigger, SplitText e Lenis, somente nas páginas home e trabalhos. Nenhum script nas páginas de estúdio, contato e privacidade. Não carregue Swiper, WebGL nem vídeo.
2. SplitText: o h1 acima da dobra é o elemento LCP, então nunca o inicie oculto nem deslizando para cima. O h1 começa visível em uma cor esmaecida que ainda passa no contraste AA e o SplitText leva suas linhas à cor plena uma a uma (type "lines", mask "lines", aria "auto"). Mantenha a entrada com linhas mascaradas deslizando para cima nos títulos h2 abaixo da dobra e execute-a com ScrollTrigger once:true. Divida o texto depois de document.fonts.ready para que as quebras de linha fiquem corretas.
3. Marquee infinito: escreva os nomes dos serviços uma única vez no HTML. Sem JS e com movimento reduzido, a lista aparece como um grupo estático com quebra de linha; reduza esse estado estático em celulares, porque na demo ele ocupava a tela como um muro de seis linhas. O JS duplica o grupo uma vez, marca a cópia com aria-hidden e move x em loop infinito; ele acelera brevemente com a velocidade da rolagem e para enquanto o marquee está fora da tela. Movimento com mais de cinco segundos exige um botão "Pausar" visível pela WCAG 2.2.2 (type="button", aria-pressed), exibido apenas enquanto o marquee realmente se move. O foco dentro do marquee também o pausa.
4. Botões magnéticos: somente em dispositivos que correspondam a `(hover: hover) and (pointer: fine)`, use gsap.quickTo para mover a transformação x e y em 30 a 40 por cento da distância do ponteiro ao centro do botão, com retorno elástico quando o ponteiro sai. A área clicável do botão não deve mudar.
5. Rastro de imagens do cursor: somente no desktop, sob a mesma condição de ponteiro preciso, na área do hero. O JS adiciona ao hero uma camada com aria-hidden, pointer-events:none e posicionada ABAIXO do título (z-index). As imagens do rastro não devem ser baixadas no carregamento da página; as miniaturas WebP de 280 px carregam no primeiro movimento do ponteiro. A cada 90 px de deslocamento do ponteiro, a próxima imagem do conjunto aparece no ponteiro, cresce a partir de pequena, depois desliza para baixo e desaparece; mova-a com transform, não com left/top.
6. Ative o Lenis somente em dispositivos `(pointer: fine)` e conduza-o a partir do gsap.ticker; dispositivos de toque mantêm a rolagem nativa. Em links internos da página, mova o foco para o destino depois de rolar.
Configuração e armadilhas conhecidas (cada uma custou pontos ou quebrou algo na medição da demo, não pule nenhuma):
1. Se já houver um site no ar no servidor, avise-me primeiro, porque a configuração sobrescreve index.html e a pasta assets. Mostre a prévia de scaffold_site com confirm=false e chame confirm=true após a minha aprovação. Depois leia site_design_guide e site_seo_guide. Antes de escrever código, coloque a direção de design (tipografia, cor, grade, elemento marcante, linguagem de movimento e as bibliotecas que NÃO serão carregadas) em um ART.md curto fora de assets e mostre-o para mim.
2. Compile o Tailwind, não o carregue pela CDN. Instale `npm i -D tailwindcss@3` com site_run_command e background=true, e acompanhe com site_command_status. Os caminhos de content em `tailwind.config.js` devem cobrir todos os arquivos HTML, todos os templates e todos os arquivos JS que escrevem classes. `_src/tw.css` contém uma linha `@import "../assets/app.css";` e 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 das páginas e vincule apenas `/assets/site.css`. Recompile após cada alteração no HTML.
3. Hospede as fontes você mesmo. Primeiro verifique se a família da Fontshare escolhida tem as letras turcas (ş, ğ, ı, İ, ç, ö, ü): na demo, a Tanker não tinha o ı sem ponto e a Outfit não tinha ş, ğ nem İ, então essas letras cairiam em outra fonte nos títulos. Baixe o woff2 de cada peso separadamente com site_fetch para `assets/fonts/`, escreva as regras @font-face com `font-display: swap` em `assets/app.css` (o design-check procura a fonte personalizada ali) e confira o nome do font-family no CSS que você baixou. Faça preload das fontes de título e de texto usadas acima da dobra em todas as páginas com `<link rel="preload" as="font" type="font/woff2" crossorigin>`, antes da folha de estilo; não faça preload de mais de dois arquivos, porque o preload de um terceiro peso na demo deixou o LCP no celular 0,2 segundo mais longo. A maioria das fontes da Fontshare não tem o símbolo ₺, então escreva "TL" nos preços.
4. Faça o menu e o rodapé em HTML estático. Não carregue chrome.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. Os templates não devem terminar em .html e devem usar marcadores como `
[[NAV]]` em vez de `{{...}}`. Construa o menu mobile sem JS usando `<details>`. Mantenha o nome da organização, o endereço e o telefone como texto simples no rodapé, e faça todo alvo de toque ter pelo menos 44x44 px, incluindo os links do rodapé e do breadcrumb.
5. Converta as imagens ao baixá-las com site_fetch: grave a mesma foto com resize="480x", "800x" e "1200x", image_format="webp", quality=65 em arquivos separados. O site_fetch nunca recorta; quando uma foto do Unsplash precisar de outra proporção, baixe a versão recortada adicionando parâmetros como `?w=1600&h=1200&fit=crop` à URL. Dê a todo `<img>` srcset, sizes e width e height que correspondam à proporção real. A imagem principal acima da dobra recebe fetchpriority="high" e não é lazy; as demais recebem loading="lazy" decoding="async". Se a imagem principal preencher a tela no celular, sirva um recorte menor com `<picture>`.
6. Escreva a versão SVG do logo como favicon.svg com site_write_file e adicione `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` a todas as páginas. Sem favicon, o navegador registra um 404 e as Boas Práticas caem para 96.
7. Regras do validador de HTML: comece com um `<!DOCTYPE html>` em maiúsculas, use ` ` nos espaços do texto visível dos links tel:, nunca use o atributo style="", dê type="button" a todo botão e não coloque um `<details>` dentro de um `<figure>` depois do figcaption.
8. Baixe as bibliotecas de movimento (GSAP, ScrollTrigger, SplitText, Lenis) do jsdelivr para `assets/vendor/` com site_fetch, fixe a versão e carregue-as somente nas páginas home e trabalhos. Não use `<script defer>`; coloque um pequeno loader no final da página que espere o evento load, duas chamadas de requestAnimationFrame e depois requestIdleCallback, e acrescente os scripts em ordem com async=false. Um script de uma linha no `<head>` adiciona a classe `js` ao `<html>` e a classe `anim`, a menos que prefers-reduced-motion seja "reduce"; sem `anim`, o loader não baixa nada. Defina estados iniciais ocultos apenas sob `.anim` e adicione uma animação CSS como rede de segurança que revele todo elemento oculto após 2,5 segundos, caso a biblioteca nunca chegue. Em demos anteriores, bibliotecas com defer empurraram o LCP no celular para 3,2 segundos; com este loader as páginas mediram de 99 a 100. Dê o nome data-reveal ao atributo dos elementos revelados na rolagem; o design-check só reconhece movimento por esse nome.
SEO, AEO e GEO:
1. Use URLs em estilo de diretório com barra final (/isler/, /studyo/, /iletisim/, /gizlilik/). Preencha o bloco seo de site.config.js e execute `node seo-stamp.mjs`. Escreva o schema específico de cada página (home WebPage e FAQPage; trabalhos CollectionPage com um CreativeWork por projeto em hasPart; estúdio AboutPage com entradas Person para a equipe; contato ContactPage; BreadcrumbList nas páginas internas. Para um estúdio com escritório, businessType ProfessionalService em site.config.js) em blocos `<script type="application/ld+json">` separados e vincule-os ao grafo base por @id. Não aninhe o BreadcrumbList dentro de @graph; mantenha-o em seu próprio bloco, porque é a única forma de o seo-check enxergá-lo.
2. Mantenha os títulos em 60 caracteres ou menos (o seo-check marca como erro qualquer um acima de 65), as descrições entre 120 e 158 caracteres, um h1 por página e nenhum nível de título pulado (um h3 logo após o h1 derrubou a acessibilidade para 98). Toda página precisa de pelo menos 150 palavras de conteúdo principal; as páginas de contato e privacidade costumam ficar abaixo disso.
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 a organização que publica e uma data de "Última atualização" em `<time>`.
4. No robots.txt, registre e justifique sua decisão 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. Dê ao sitemap.xml datas lastmod reais. O llms.txt traz um resumo preciso do site em duas frases, os fatos principais e uma lista das páginas importantes.
5. Sem invenção: 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.
Portões de verificação (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 cada página com site_preview usando view="mobile" e view="desktop". O site_preview captura a página com o movimento desligado (reduced-motion); se faltar conteúdo nessa captura, o estado sem movimento está quebrado. Imagens lazy mais abaixo podem aparecer em branco na captura da página inteira; não conte isso como erro, mas confira os caminhos delas.
3. Execute core_web_vitals com strategy="mobile" e strategy="desktop" para cada página. Critério de aceitação: no celular, Performance de pelo menos 95 e Acessibilidade, Boas Práticas e SEO 100; no desktop, as quatro notas de pelo menos 95. Para uma página que não atinja, encontre o arquivo lento com resources=true, corrija e meça de novo. Depois execute seo_audit na página inicial 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 px, alvos de toque de pelo menos 44 px e nenhum erro no console. O site também deve ficar impecável dentro de um quadro de 390x790 e de 1440x898, como nas páginas de prompts.
Verificação de movimento: o site_preview não consegue mostrar movimento, então diga-me o que observar no meu próprio navegador. No desktop, as linhas do título do hero devem escurecer uma após a outra, o marquee deve se mover, acelerar com a rolagem e parar com o botão Pausar, os botões devem se inclinar levemente em direção ao ponteiro, mover o ponteiro sobre o hero deve deixar imagens que aparecem e desaparecem atrás dele, e o texto deve ficar sempre acima das imagens. No celular não deve haver rastro nem efeito magnético, e a rolagem continua nativa. Com movimento reduzido ativado no sistema operacional, nada deve se mover e o marquee aparece como uma lista estática. O anel de foco deve ser visível em todo lugar ao navegar com Tab.
Depois de publicar: faça a prévia da regra `/assets/* Cache-Control: public, max-age=31536000, immutable` com site_headers e aplique-a após a minha aprovação; 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 página inicial com gsc_url_inspect. Por fim, entregue-me: uma tabela de notas por página (página, quatro notas no celular, quatro notas no desktop, LCP, CLS), os resultados dos portões, o resultado das interações testadas em um navegador e a lista das correções aplicadas.
