Crie o site de um escritório de advocacia ou contabilidade em estilo minimalista suíço, com fortes sinais de confiança

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 estático multipágina, em estilo minimalista suíço, para o nosso escritório no meu servidor de hospedagem do Opus Growth [nome do servidor]. Escritório: [nome do escritório], [profissão, ex.: escritório de advocacia ou escritório de contabilidade], [cidade]. Áreas de atuação: [áreas]. Profissionais: [para cada um, nome, cargo, ordem ou conselho em que está registrado, número de registro, áreas]. Telefone: [telefone], e-mail: [e-mail], endereço: [endereço], domínio: [domínio]. Tema da nota informativa: [um assunto frequente, ex.: o limite legal para reajustes de aluguel]. Esta é uma área em que as pessoas tomam decisões sobre seu dinheiro e seus direitos, então a confiança deve vir de clareza, credenciais e fontes, não de decoração. Respeite as regras profissionais: para advogados na Turquia, o regulamento de proibição de publicidade da União das Ordens dos Advogados da Turquia; para contadores, as regras profissionais da TÜRMOB; ou o equivalente onde você atua. Não escreva taxas de sucesso, números de casos ganhos, nomes de clientes, afirmações de superioridade como "o melhor" ou "especialista líder", comparações de honorários, garantias ou promessas exageradas. Apresente as informações com um aviso de que são gerais e não substituem aconselhamento jurídico ou financeiro. A direção de design é minimalista suíça: 1. Tipografia: uma única família grotesca da Fontshare (ex.: Switzer 400, 500, 600). A hierarquia vem apenas do tamanho e do peso: um título grande, compacto e alinhado à esquerda, texto de corpo sóbrio, rótulos de seção pequenos. 2. Cor: fundo branco, texto quase preto, um cinza escuro e um único destaque (ex.: vermelho suíço). O destaque aparece apenas na marca da seção, nos rótulos e no anel de foco. As fotos são em preto e branco (grayscale do Tailwind). 3. Grade: 12 colunas rigorosas. Em cada seção, o rótulo fica nas colunas 1 a 3 e o conteúdo nas colunas 4 a 12; as seções são separadas por uma linha preta de 1 pixel. Sem cantos arredondados nem sombras. 4. Elemento de assinatura: rótulos de seção numerados com o símbolo § na cor de destaque, e linhas-guia tênues das 12 colunas desenhadas apenas em CSS atrás da primeira tela. 5. Movimento: nenhum. Páginas e seus schemas: 1. index.html: uma primeira tela cujo parágrafo de abertura responde "qual assunto, para quem, onde", as áreas de atuação, como você trabalha e como os honorários são definidos (sem valores, com a tabela oficial e um contrato de prestação de serviços por escrito), a nota informativa mais recente, um resumo da equipe. WebPage. 2. calisma-alanlari.html: uma seção por área; o primeiro parágrafo responde à pergunta mais comum dessa área, seguido dos principais temas e da base legal. Um Service por área. 3. ekip.html: um perfil para cada profissional (nome, cargo, ordem ou conselho, áreas, biografia curta). AboutPage e uma Person por profissional (jobTitle, knowsAbout, worksFor #business, memberOf da ordem ou do conselho). 4. bilgi-notlari/[tema].html: uma nota fundamentada na lei, que começa com uma resposta curta. No topo: autor, revisor, data de publicação e data da última revisão; no final, uma lista de fontes. Article (autor e publisher via @id, image, datePublished, dateModified, citation) e reviewedBy mais lastReviewed na WebPage. Nunca escreva um ponto jurídico ou financeiro que você não conheça; pergunte-me sobre cada frase de que não tiver certeza. 5. sss.html: seis perguntas reais, FAQPage. 6. iletisim.html: ContactPage. 7. kvkk.html (mencionando o sigilo profissional) e 404.html. Regras técnicas. Siga-as exatamente, porque os gates 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. Elimine 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 brand, contact 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 enxergam 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, link de todas as páginas, aviso de privacidade, "Web: Opus Growth") em _kaynak/alt.inc. Use a extensão .inc para que o seo-stamp e o html-validate não tratem os fragmentos como páginas. Cada página leva os marcadores <!-- ust:bas --><!-- ust:son --> e <!-- alt:bas --><!-- alt:son -->. Depois, escreva com site_write_file um script Node sem dependências 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 de desktop e mobile são dois elementos <nav> separados com aria-label diferentes. 4. Hospede as fontes você mesmo. Este site usa uma família de fontes e no máximo três arquivos. 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 use apenas as URLs woff2 da família solicitada; o serviço às vezes acrescenta uma família que você não pediu. 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 uma utilitária 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 cada 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 Best Practices. 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 detalhadas). Toda <img> tem srcset, sizes compatível 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 fim das linhas; tabelas com <thead>, <tbody> e th scope. Links dentro de parágrafos são sublinhados; links de menu, rodapé, breadcrumb e botões 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 relevante, um subtipo de LocalBusiness, além de tags canonical e OG. Adicione à mão o schema específico de cada página: em todas as páginas um nó WebPage com @id (ou AboutPage, ContactPage, CollectionPage, ProfilePage), datePublished e dateModified, isPartOf #site, about #business ou #org, e breadcrumb apontando para uma BreadcrumbList; além de um Service por área de atuação, uma Person por profissional na página da equipe, Article e reviewedBy na nota informativa, e FAQPage na página de perguntas frequentes. 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 enxerga uma BreadcrumbList dentro de @graph. Ligue os nós com @id. Nunca invente horários 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 nem curtos, sem slogans prontos, sem promessas vazias. Se algo no site não for real, diga claramente que é fictício. Gates. Após cada alteração, execute estes com site_run_command nesta ordem e só avance quando cada um estiver 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 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); o estilo exige isso, então explique 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 espremido 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, Accessibility, Best Practices e SEO 100 e Performance de pelo menos 95; no desktop, as quatro de pelo menos 95. Nenhuma requisição pode sair do site. Se o LCP estiver alto, use resources=true para encontrar o arquivo que o está atrasando: 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 dê o trabalho por 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 do Search Console, avise-me; não tente conectar uma por conta própria. Relatório de entrega: uma tabela com as quatro notas do Lighthouse e o LCP de cada página no mobile e no desktop, o resultado dos quatro gates, 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 ainda preciso fazer (Business Profile, fotos reais, horário de funcionamento e assim por diante).