Preencha antes de enviar
[nome do servidor][nome do negócio][restaurante / café / casa de café da manhã][culinária][cardápio e preços][informações alimentares][horários][telefone / WhatsApp / ambos][telefone][WhatsApp][endereço][estacionamento e transporte]
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 do zero um novo site para o meu restaurante no meu servidor de hospedagem [nome do servidor]. Detalhes:
1. Nome: [nome do negócio], tipo: [restaurante / café / casa de café da manhã], culinária: [culinária]
2. Cardápio com seções, descrições e preços: [cardápio e preços]
3. Informações sobre opções vegetarianas, veganas, sem glúten e alérgenos: [informações alimentares]
4. Horário de funcionamento (separado para café da manhã e jantar, se forem diferentes): [horários]
5. Como as reservas são feitas: [telefone / WhatsApp / ambos], telefone: [telefone], WhatsApp: [WhatsApp]
6. Endereço e orientações de acesso: [endereço], [estacionamento e transporte]
7. De onde vêm os ingredientes e a nossa história: [produtores e história]
8. Domínio: [domínio], fotos reais: [onde estão as fotos, ou "use banco de imagens"]
Primeiro confirme o servidor com list_servers e execute scaffold_site com style="restaurant", primeiro com confirm=false e depois com confirm=true após a minha aprovação. Leia site_design_guide e site_seo_guide. Escreva uma decisão de design natural e orgânica em _kaynak/ART.md e mostre para mim: uma fonte de exibição serifada e acolhedora da Fontshare (por exemplo Gambarino) com uma fonte de texto suave (por exemplo Supreme), fundo cor de areia, texto em tons terrosos, dois tons quentes em verde-oliva e terracota, e o mesmo canto arredondado em todos os cartões. O elemento de assinatura é uma caixa de "quadro do dia" na página do cardápio. Se a fonte escolhida não tiver o glifo ₺, escreva os preços com "TL".
Páginas e schema:
1. Início: a primeira tela diz o que você serve e onde, com os botões "Reservar uma mesa" e "Ver o cardápio" e uma foto grande. Depois, três pratos do cardápio, de onde vêm os ingredientes, um resumo de horários e localização e 4 perguntas frequentes. Schema: WebPage, FAQPage, e adicione servesCuisine, acceptsReservations (a URL da página de reservas) e hasMenu ao nó #business.
2. Cardápio: em HTML, não em PDF. Cada seção tem um título e um link âncora, cada prato tem nome, descrição, preço e etiquetas de dieta, e o topo da página mostra a data da última atualização e um aviso sobre alérgenos. Use preços apenas da lista que forneci; nunca invente um preço que esteja faltando. Schema: Menu com MenuSection em hasMenuSection, MenuItem em hasMenuItem, Offer em offers (price, priceCurrency TRY) e suitableForDiet quando se aplicar.
3. Reservas: como as reservas funcionam, telefone e WhatsApp, um formulário de WhatsApp com mensagem pré-preenchida (data, horário, número de pessoas, jardim ou salão) e 3 perguntas frequentes (atraso, grupos grandes, cancelamento). Schema: WebPage, FAQPage.
4. Nossa história e produtores: quem está à frente do lugar, de quem vêm os ingredientes e uma tabela sazonal mostrando qual ingrediente está no cardápio em quais meses. Schema: AboutPage.
5. Localização e horários: endereço, tabela de horários, um link "Como chegar", como chegar de carro, do centro da cidade e de transporte público, e uma observação sobre acessibilidade. Schema: ContactPage.
6. Uma página 404.
Para continuar rápido apesar das fotos: uma imagem grande na primeira tela e todas as outras com carregamento lazy; WebP com qualidade de 60 a 65 e no máximo oito imagens por página; não carregue uma biblioteca de slider para a galeria.
Sem invenções: não escreva avaliações, notas, prêmios, certificados, números de clientes nem afirmações como "o melhor" que não sejam reais. Não adicione ao schema nem ao texto horários de funcionamento, coordenadas, preços ou e-mail que eu não tenha fornecido; deixe o campo de fora e liste-o como ausente no relatório. Não use travessões longos nem slogans genéricos, e faça o primeiro parágrafo de cada página responder diretamente à pergunta daquela página.
Trabalho de SEO compartilhado: cada página recebe um title único de 48 a 60 caracteres, uma description de 145 a 158 caracteres, um único H1 e um canonical terminando em barra. Adicione o nó WebPage próprio de cada página e um BreadcrumbList, ligados ao grafo base por @id. No robots.txt escreva Allow: / para Googlebot, Bingbot, OAI-SearchBot, ChatGPT-User, GPTBot, Claude-SearchBot, Claude-User, ClaudeBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended e CCBot, explique a decisão em um comentário e indique o que mudar se eu quiser bloquear os rastreadores de treinamento. O sitemap.xml traz datas lastmod reais. O llms.txt descreve o negócio com precisão em duas frases e lista o NAP e as páginas importantes com links.
Configuração técnica (o caminho padrão do kit não é usado neste site, pelos motivos abaixo):
1. Compile o Tailwind e elimine o CDN. O kit carrega o Tailwind pelo Play CDN, que compila no navegador, mostra um aviso no console e reduz o desempenho no mobile. Escreva _kaynak/package.json com site_write_file, instale com site_run_command("cd _kaynak && npm i -D tailwindcss@3 html-validate", background=true) e aguarde com site_command_status. Em _kaynak/tailwind.config.js defina content como "./*.html", "./**/*.html", "!./_kaynak/**" e "./_kaynak/chrome.mjs". Mova as regras @font-face, as linhas @tailwind e o anel de foco, o skip link e a proteção contra overflow do app.css do kit para _kaynak/site.css. Gere a saída em assets/app.css, porque o design-check.mjs procura as fontes nesse arquivo, e adicione ?v=<hash do conteúdo> ao link em todas as páginas para que o cache de borda nunca sirva o arquivo antigo.
2. Hospede as fontes você mesmo. Leia a URL de CSS das famílias da Fontshare que você escolheu (api.fontshare.com/v2/css?f[]=...) com site_read_url, baixe os arquivos woff2 com site_fetch para assets/fonts/ e declare-os com @font-face e font-display: swap. Faça preload de cada peso usado acima da dobra com <link rel="preload" as="font" type="font/woff2" crossorigin>, no máximo três arquivos. Se pular isso, a troca de fontes desloca o layout; na demonstração, o CLS no desktop foi 0,078 por esse motivo e caiu para 0 com o preload.
3. Transforme o menu e o rodapé em HTML estático. Os componentes <site-nav> e <site-footer> do kit funcionam com JavaScript, e a maioria dos rastreadores de IA nunca vê o menu, o endereço nem o telefone. Remova os scripts chrome.js e motion.js de todas as páginas. Em _kaynak/chrome.mjs escreva duas funções que montem o HTML do cabeçalho e do rodapé a partir de assets/site.config.js; construa o menu mobile sem JavaScript usando <details> e <summary>, e marque a página atual com aria-current="page". Escreva build.mjs na raiz do site que, em ordem, execute node seo-stamp.mjs, reaplique tudo entre <!-- chrome:header:start --> e <!-- chrome:header:end --> (e o mesmo para o rodapé) em todas as páginas, compile o Tailwind e atualize o hash no link do CSS. Após cada alteração, execute apenas site_run_command("node build.mjs").
4. Movimento apenas com CSS, e de forma sutil. Coloque data-reveal nos cartões de imagem e construa o efeito de revelação com uma animação CSS orientada por rolagem (animation-timeline: view()) usando apenas transform; não anime a opacidade, porque o texto que começa com opacidade zero desaparece em navegadores sem JavaScript e falha na verificação de contraste das auditorias de acessibilidade. Envolva a regra em @media (prefers-reduced-motion: no-preference) e @supports (animation-timeline: view()). Não carregue GSAP, Lenis nem Swiper.
5. Reduza as imagens. Baixe cada foto com site_fetch em arquivos separados usando resize="480x", "800x", "1200x", "1600x", image_format="webp" e qualidade entre 60 e 68. Dê a cada <img> srcset, sizes, e width e height compatíveis com a proporção real; se você recortar, adicione uma classe de proporção como aspect-[4/3] com object-cover, caso contrário o layout se desloca quando a imagem carrega. A imagem da primeira tela recebe fetchpriority="high" e não é lazy; todas as outras recebem loading="lazy". Baixe a imagem de compartilhamento como JPG 1200x630 com site_fetch.
6. Pequenos detalhes que custam pontos: adicione um favicon SVG com <link rel="icon"> (caso contrário o navegador solicita /favicon.ico, o 404 aparece como erro no console e a pontuação de Boas Práticas cai). Escreva DOCTYPE em maiúsculas, não use atributos style e não deixe espaços em branco no final das linhas. Use em vez de espaços no texto visível dos links de telefone (a regra tel-non-breaking do html-validate). Os links no menu, no rodapé, no breadcrumb e nos títulos devem ter pelo menos 44 pixels de altura e largura. Não incorpore um iframe do Google Maps; o site não deve fazer requisições externas, então mostre o endereço e um link "Como chegar".
7. Nenhuma requisição pode sair do site: fontes, scripts, estilos e imagens ficam todos no seu próprio servidor. Não há um processador de formulários, então o formulário de contato é um formulário method="get" apontando para https://wa.me/[número do WhatsApp] com um textarea pré-preenchido chamado "text"; não é preciso JavaScript.
Verificações (nesta ordem; só considere concluído quando todas passarem):
1. Execute node build.mjs com site_run_command e depois node seo-check.mjs: 0 erros, 0 avisos. Um aviso de conteúdo duplicado significa que duas páginas não são diferentes o suficiente; reescreva-as.
2. node design-check.mjs: 0 erros. Se você escolheu um estilo sem movimento, relate o aviso de "sem movimento" como uma decisão deliberada, com o motivo.
3. _kaynak/node_modules/.bin/html-validate em todos os arquivos HTML: 0 erros. Coloque uma linha _kaynak/ em um arquivo .htmlvalidateignore na raiz do site para que as dependências não sejam analisadas.
4. Veja todas as páginas com site_preview em view="mobile", view="desktop" e também em larguras de 360 e 768. Corrija rolagem horizontal, títulos que transbordam, botões apertados ou texto ilegível e veja novamente.
5. Meça todas as páginas com core_web_vitals em strategy="mobile" e strategy="desktop", e obtenha as pontuações de acessibilidade, boas práticas e SEO com seo_audit. A meta no mobile é 100 em acessibilidade, boas práticas e SEO e pelo menos 95 em desempenho; no desktop, pelo menos 95 nas quatro. Em uma página que não atingir a meta, execute core_web_vitals com resources=true, encontre o elemento LCP e qualquer imagem grande demais, corrija e repita seo_audit com runs=2, porque uma única execução de laboratório pode oscilar.
6. As requisições de rede não devem conter nenhum endereço fora do domínio do próprio site.
Após publicar: envie o sitemap.xml com gsc_submit_sitemap e verifique a página inicial e as três páginas mais importantes com gsc_inspect_urls. Nenhuma ferramenta consegue clicar em "Solicitar indexação"; liste o que preciso solicitar manualmente no Search Console.
Termine com este relatório: a lista de páginas com as pontuações de mobile e desktop por página em uma tabela (desempenho, acessibilidade, boas práticas, SEO, LCP, CLS), o resultado de cada verificação, as correções que você fez e as informações que ainda precisa de mim. Se alguma meta não foi atingida, diga isso claramente em vez de considerar concluído.