Crie um site institucional de várias páginas sem JavaScript e entregue com nota 100

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. Crie um site corporativo, com várias páginas e totalmente estático, para o meu negócio no meu servidor de hospedagem Opus Growth [nome do servidor]. Negócio: [nome da empresa], [setor, por exemplo escritório de engenharia e arquitetura], [cidade/área de atendimento]. Serviços: [serviços com uma breve descrição de cada um]. Telefone: [telefone], e-mail: [e-mail], endereço: [endereço], domínio: [domínio]. Preferência de cores: [preferência de cor/marca, ou "à sua escolha"]. Fotos: [onde estão as fotos reais, ou "use fotos de banco de imagens adequadas"]. Este site prioriza velocidade e acessibilidade. Nenhuma linha de JavaScript em nenhuma página; GSAP, Lenis e Swiper nunca são carregados. Tudo, incluindo o menu, o menu mobile e o FAQ, funciona com HTML e CSS. A direção de design é "folha de desenho técnico": 1. Tipografia: uma fonte de títulos grotesca e compacta da Fontshare (por exemplo, Cabinet Grotesk 800) e uma fonte de corpo discreta (por exemplo, General Sans 400 e 600). No máximo três arquivos de fonte. 2. Cor: fundo claro em tom de papel, texto em tinta escura, um cinza secundário e uma única cor de destaque como sinal. O destaque aparece apenas em rótulos, filetes finos e no botão principal. Toda cor de texto atinge pelo menos 4,5:1 de contraste. 3. Grade: 12 colunas, seções separadas por filetes de 1 pixel; sem sombras, cantos arredondados ou gradientes. 4. Elemento de assinatura: abaixo da imagem da primeira tela, uma faixa de quatro células no estilo do carimbo de um desenho de arquitetura (por exemplo, tipo de projeto, norma seguida, escala, número da folha), e uma grade milimétrica muito discreta desenhada apenas em CSS atrás da primeira tela. 5. Movimento: nenhum. Nem durações de transição; apenas o sublinhado e a mudança de cor acontecem instantaneamente ao passar o mouse. Páginas e seus schemas: 1. index.html: uma primeira tela cujo parágrafo de abertura responde diretamente a "o que vocês fazem, para quem, onde", três cartões de serviço (cada um com link para a sua seção), um processo de quatro etapas (numeradas como "Etapa 1" com um contador CSS, não 01/02), dois exemplos de projetos, uma faixa de telefone. WebPage. 2. hizmetler.html: uma seção por serviço; o primeiro parágrafo responde "quando é necessário, o que faz", depois uma lista de escopo, duração típica e entregáveis. WebPage mais um Service por serviço (provider #business, areaServed). 3. projeler.html: exemplos com tipo de edificação, método e resultado; nomes de clientes apenas com permissão. CollectionPage. 4. hakkimizda.html: quem somos, nossas regras de trabalho, onde atuamos. AboutPage. 5. sss.html: pelo menos seis perguntas reais dentro de <details>. WebPage e FAQPage. 6. iletisim.html: telefone, e-mail e endereço dentro de <address>, um link de mapa; deixe de fora o horário de funcionamento se você não o souber. ContactPage com mainEntity #business. 7. kvkk.html (aviso de privacidade) e 404.html. Regras técnicas. Siga-as exatamente, porque os testes abaixo medem exatamente isto: 1. Configuração. Execute scaffold_site primeiro como prévia, mostre-me a lista de arquivos e instale com confirm=true depois que eu aprovar. Em seguida, leia site_design_guide e site_seo_guide por completo. Antes de escrever qualquer código, escreva a direção em _kaynak/ART.md (sensação, combinação de fontes, cores com taxas de contraste, grade, elemento de assinatura, decisão sobre movimento, lista de páginas) e mostre-a para mim. 2. Remova o JavaScript. Nenhuma página deste site carrega JavaScript. Remova de todas as páginas o script cdn.tailwindcss.com, a linha tailwind.config, as tags de GSAP, ScrollTrigger, SplitText, Lenis e Swiper e as tags de script motion.js, chrome.js e site.config.js; exclua assets/chrome.js e assets/motion.js. Mantenha assets/site.config.js, mas apenas como fonte de marca, contato e seo para o seo-stamp.mjs; ele nunca é carregado no navegador. 3. Menu e rodapé são HTML estático. Os componentes <site-nav> e <site-footer> são desenhados por JavaScript, então rastreadores de busca e de IA não conseguem ver o menu, os links internos nem os dados de contato. Escreva o cabeçalho em _kaynak/ust.inc e o rodapé (nome, endereço, telefone, e-mail, todos os links de páginas, aviso de privacidade, "Web: Opus Growth") em _kaynak/alt.inc. Use a extensão .inc para que seo-stamp e html-validate não tratem os fragmentos como páginas. Toda página leva os marcadores <!-- ust:bas --><!-- ust:son --> e <!-- alt:bas --><!-- alt:son -->. Depois, escreva um script Node sem dependências com site_write_file em _kaynak/parca-bas.mjs: ele carimba os dois fragmentos entre os marcadores em todos os arquivos HTML, adiciona aria-current="page" ao link do menu da página atual e reescreve o sitemap.xml usando o dateModified do JSON-LD de cada página como lastmod (ignorando 404 e páginas noindex). Construa o menu mobile sem JavaScript usando <details><summary>Menu</summary>; os menus desktop e mobile são dois elementos <nav> separados com aria-labels diferentes. 4. Hospede as fontes você mesmo. Este site usa no máximo três arquivos de fonte. Baixe o CSS da Fontshare (https://api.fontshare.com/v2/css?f[]=family@400,600&display=swap, código de peso 401 para itálico) com site_fetch para _kaynak/fontshare.css, leia-o com site_read_file e pegue apenas as URLs woff2 da família que você pediu; o serviço às vezes acrescenta uma família que você não solicitou. Baixe cada woff2 com site_fetch para assets/fonts/. Coloque as regras @font-face (font-display: swap) dentro de assets/app.css, porque o design-check.mjs só procura uma fonte personalizada nesse arquivo. Não use as padrão Inter, Roboto, Poppins ou Montserrat. 5. Compile o Tailwind. assets/app.css passa a ser a fonte do Tailwind: @tailwind base; @tailwind components; @tailwind utilities; no topo, depois @font-face, o anel de foco, o skip link, uma regra prefers-reduced-motion e suas próprias classes de componente dentro de @layer components. Nunca dê a uma classe de componente o nome de um utilitário do Tailwind (list-item, table, grid, container, hidden e assim por diante), porque o conflito quebra o layout silenciosamente após a compilação. Escreva tailwind.config.js na raiz (content: ["./*.html", "./**/*.html", "./_kaynak/*.inc"], cores e fontFamily). Execute "npx --yes tailwindcss@3 -i assets/app.css -o assets/site.css --minify" com site_run_command e background=true, e aguarde com site_command_status. O <head> de toda página contém, nesta ordem: um único <link rel="stylesheet" href="/assets/site.css">, depois uma linha de preload para cada arquivo de fonte usado na primeira tela (título, destaque e corpo; as="font" type="font/woff2" crossorigin). Linhas de preload colocadas antes da folha de estilo atrasam o CSS e aumentam o LCP; uma fonte da primeira tela sem preload é trocada tarde, desloca a página e aumenta o CLS, e <link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">. A linha do favicon é obrigatória: sem ela o navegador pede /favicon.ico, recebe um 404, e o erro no console reduz as Melhores Práticas. 6. Imagens. Baixe as fotos com site_fetch usando resize e image_format="webp" em várias larguras (480, 800, 1200 e 1600 para a imagem da primeira tela, 480, 800 e 1200 para as demais; qualidade entre 60 e 75, menor para fotos com muitos detalhes). Toda <img> tem srcset, sizes compatíveis com o layout real, width e height (CLS zero) e um texto alt significativo e honesto. fetchpriority="high" vai apenas na imagem que o Lighthouse indica como elemento LCP, e essa imagem não é lazy; todas as outras imagens usam loading="lazy". Se o elemento LCP for texto, nenhuma imagem recebe fetchpriority. Prepare também assets/img/logo.png, um assets/img/og.jpg de 1200x630 e assets/img/favicon.svg. 7. Regras de HTML (padrões do html-validate). <!DOCTYPE html> em maiúsculas; nenhum atributo style inline (incluindo o style="background:var(--brand)" do kit, use uma classe); &nbsp; em vez de espaços comuns no texto dos links tel:; um type em todo <button>; sem espaços no final das linhas; tabelas com <thead>, <tbody> e th scope. Links dentro de parágrafos são sublinhados; links de menu, rodapé, breadcrumb e botão têm área de toque de pelo menos 44x44 pixels (min-h-[44px] min-w-[44px]). 8. Dados estruturados. Preencha o bloco seo em site.config.js (siteUrl, description, logo, imagem og, tipo de negócio, campos de endereço) e execute "node seo-stamp.mjs" com site_run_command; ele carimba Organization, WebSite e, quando pertinente, um subtipo de LocalBusiness, além de tags canonical e OG. Adicione à mão o schema específico de cada página: em toda página um nó WebPage com @id (ou AboutPage, ContactPage, CollectionPage, ProfilePage), datePublished e dateModified, isPartOf #site, about #business ou #org, e breadcrumb apontando para um BreadcrumbList; mais um Service por serviço na página de serviços e FAQPage na página de FAQ. Escreva cada nó em seu PRÓPRIO bloco <script type="application/ld+json"> e não use um wrapper @graph, porque o seo-check.mjs só lê o @type de nível superior e não encontra um BreadcrumbList dentro de @graph. Conecte os nós com @id. Nunca invente horário de funcionamento, coordenadas, avaliações, comentários, prêmios, número de clientes ou certificados; deixe de fora os campos desconhecidos. 9. Acesso para IA. Escreva o robots.txt: o site inteiro aberto, apenas /_kaynak/ fechado; Allow: / para GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended e Bingbot; sua decisão sobre o CCBot com o motivo em um comentário; a linha Sitemap por último. Adicione llms.txt na raiz: um resumo correto do negócio em duas frases, as páginas importantes com uma linha cada e os dados de contato. Escreva 404.html (noindex, com os marcadores de cabeçalho e rodapé). 10. Redação. Cada página tem pelo menos 150 palavras de texto original dentro de <main>, e o primeiro parágrafo responde diretamente à pergunta principal da página. Os títulos têm de 48 a 60 caracteres, as descrições de 145 a 158, únicos em cada página. Sem travessões longos ou médios, sem slogans prontos, sem promessas vazias. Se algo no site não for real, diga claramente que é fictício. Testes. Após cada alteração, execute-os com site_run_command nesta ordem e não avance até que cada um esteja limpo: 1. node _kaynak/parca-bas.mjs, node seo-stamp.mjs, a compilação do Tailwind (de novo se você adicionou classes). 2. node seo-check.mjs: 0 erros e 0 avisos. Se ele avisar "gövde kısa" (corpo curto demais), adicione texto real, não enchimento. 3. node design-check.mjs: 0 erros. O único aviso permitido é "Hiç hareket yok" (sem movimento); essa é uma escolha deliberada deste site, então dê o motivo no relatório. 4. npx --yes html-validate "**/*.html": 0 erros. 5. Veja cada página com site_preview em view="mobile" e view="desktop", e confira também a página inicial em 360 e 768 pixels. Corrija qualquer overflow horizontal, título apertado ou alvo de toque menor que 44 pixels e verifique de novo. 6. Meça cada página com core_web_vitals em strategy="mobile" e strategy="desktop", depois audite a página inicial e a página mais longa com seo_audit. Meta: no mobile, Acessibilidade, Melhores Práticas e SEO 100 e Desempenho pelo menos 95; no desktop, as quatro pelo menos 95. Nenhuma requisição pode sair do site. Se o LCP estiver alto, use resources=true para encontrar o arquivo que o atrasa: geralmente linhas de preload colocadas antes da folha de estilo, ou fetchpriority dado a uma imagem que não é o elemento LCP. Se o CLS passar de 0,1, procure uma fonte da primeira tela sem preload. Não considere o trabalho concluído até que tudo isso passe. Depois de publicar, envie https://[domínio]/sitemap.xml com gsc_submit_sitemap e verifique a página inicial com gsc_url_inspect. Se não houver uma propriedade no Search Console, avise-me; não tente conectar uma por conta própria. Relatório de entrega: uma tabela com as quatro pontuações do Lighthouse e o LCP de cada página no mobile e no desktop, o resultado dos quatro testes, o motivo de qualquer aviso do design-check, uma lista das informações do site que são fictícias ou estão faltando, e o que eu ainda preciso fazer (Business Profile, fotos reais, horário de funcionamento e assim por diante).