Crie um site de negócio familiar tradicional com visual clássico e padrões modernos

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 com aparência tradicional para o nosso negócio de família no meu servidor de hospedagem Opus Growth [nome do servidor]. Negócio: [nome do negócio], [o que fazemos, ex.: azeite ou delícia turca], [cidade], [ano de fundação e geração, somente se for verdade]. Produtos: [para cada um, nome, tamanho da embalagem, descrição curta e o preço publicado, ou "sem preço"]. Etapas de produção: [lista curta]. Como as pessoas fazem pedidos: [telefone, loja, entrega]. Telefone: [telefone], e-mail: [e-mail], endereço da loja: [endereço], domínio: [domínio]. Fotos da família e do acervo: [onde estão, ou "nenhuma"]. O visual é antigo, a construção é nova. Deve parecer um rótulo antigo, uma placa de loja ou um livro-caixa de colheita, mas as páginas precisam abrir perfeitamente no celular, não carregar nenhum JavaScript e cada página deve ser medida. O visual antigo nunca é desculpa para má legibilidade ou contraste fraco. A direção de design é tradicional: 1. Tipografia: uma família serifada clássica da Fontshare (ex.: Gambetta 400, 400 itálico, 600). Versaletes com font-variant-caps: all-small-caps e espaçamento largo entre letras no menu, nos botões e nos rótulos; títulos centralizados. 2. Cor: fundo cor de papel, texto marrom-tinta, um marrom secundário e uma cor principal (ex.: verde-oliva), com uma segunda cor quente apenas em rótulos pequenos. Tudo com contraste de no mínimo 4.5:1. 3. Textura: uma textura de papel para o fundo como SVG feTurbulence em data URI no CSS; sem arquivo de imagem extra e sem requisição extra. 4. Elemento marcante: uma moldura de rótulo antigo, uma caixa de filete duplo com ornamentos nos cantos (border, outline-offset e ::before, ::after), e um pequeno ornamento desenhado em SVG inline entre as seções (ex.: um ramo de oliveira), aria-hidden. 5. Layout: centralizado e estreito; produtos em cartões de rótulo emoldurados, uma coluna no celular. 6. Movimento: nenhum. 7. Fotos: use o acervo da família, se houver. Caso contrário, você pode usar fotos de acervo em domínio público ou com licença aberta, mas informe a fonte e a licença na legenda e nunca as apresente como da família. Páginas e seus schemas: 1. index.html: uma primeira tela emoldurada cujo parágrafo de abertura responde "quem, faz o quê, onde, vende como", rótulos de produtos, uma seção da família, como fazer pedidos. WebPage. Defina o subtipo de negócio mais adequado em site.config.js (ex.: Store ou FoodEstablishment). 2. urunler.html: cada produto em seu próprio cartão de rótulo com nome, tamanho da embalagem, descrição e preço publicado. CollectionPage e um Product por item (brand, manufacturer #business, offers com price, priceCurrency, availability). Nunca escreva um preço que eu não tenha informado; sem preço, omita offers por completo. 3. hikayemiz.html: a história real, geração por geração. AboutPage. 4. uretim.html: as etapas da colheita ou da matéria-prima até a embalagem, a definição oficial de grau do produto e a regulamentação em que ela se baseia (ex.: o Código Alimentar Turco). WebPage e HowTo. 5. sss.html: seis perguntas reais sobre pedidos, entrega e armazenamento. FAQPage. 6. iletisim.html: telefone para pedidos, endereço da loja, um link de mapa; deixe de fora o horário de funcionamento se ele mudar conforme a estação. ContactPage. 7. kvkk.html (aviso de privacidade) e 404.html. Regras técnicas. Siga-as exatamente, porque os portões 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 marcante, 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 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 somente 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 insere 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 uma família serifada clássica 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 pegue somente 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, pois 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 em silêncio 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 troca tarde, desloca a página e eleva 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 Boas 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 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 somente na imagem que o Lighthouse indica como elemento LCP, e essa imagem não é lazy; todas as outras 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 no mínimo 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 insere Organization, WebSite e, quando relevante, um subtipo de LocalBusiness, além das 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 um BreadcrumbList; mais um Product com Offer por item na página de produtos, HowTo na página de produção 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 um BreadcrumbList dentro de @graph. Ligue os nós por @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, somente /_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 no mínimo 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 todas as páginas. 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. Portões. Após cada alteração, execute-os 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), adicione texto real, não enchimento. 3. node design-check.mjs: 0 erros. O único aviso permitido é "Hiç hareket yok" (sem movimento); o estilo clássico pede 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 rolagem horizontal, título apertado ou alvo de toque menor que 44 pixels e olhe 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, Boas Práticas e SEO 100 e Desempenho de no mínimo 95; no desktop, as quatro notas de no mínimo 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. Após a publicação, 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 por página no mobile e no desktop, o resultado dos quatro portões, 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).