Abdallahossama/landing-pages

Landing pages (estilo codebyabdullah)

Um index.html, sem etapa de build, implantado como site estático. O que faz estas páginas parecerem feitas sob medida, em vez de baseadas em template, é um pequeno conjunto de regras aplicadas sem exceção. Todas estão abaixo. A implementação de referência é templates/starter-dental.html: em caso de dúvida, veja como ela faz.

Fluxo de trabalho

1. Briefing (2 minutos). Obtenha, ou decida e declare: nicho, nome da marca (árabe + latino), cidade, a oferta única (ex.: «الكشف الأول مجاني») e a ação principal (agendar, cotar, visitar, pedir). O conteúdo real do cliente (serviços, telefone, endereço) é inserido como dados; nunca invente avaliações, classificações, preços ou pessoas. Um demo fictício informa isso no selo de navegação «مثال · مشروع وهمي للعرض».
2. Escolha o kit de nicho em references/niches.md: paleta, fontes, ideia do hero 3D, interativo característico, ordem das seções, tipo JSON-LD. Se o nicho não estiver lá, crie um usando os mesmos campos.
3. Escreva a copy primeiro. Escreva cada linha antes de qualquer CSS, usando references/copywriting-ar.md. A oferta aparece de 8 a 14 vezes na página.
4. Comece a partir do starter. Copie templates/starter-dental.html para <site>/index.html e reformule-o: variáveis, fontes, copy, seções; em seguida, substitua a cena 3D e o interativo característico. Mantenha o esqueleto, o bloco de nível de desempenho, o sistema de movimento e os fallbacks de acessibilidade. Detalhes: references/design-system.md, references/page-structure.md, references/hero-3d-and-performance.md, references/motion.md, references/conversion.md.
5. QA com a ferramenta. node tools/shoot.js verify <site> gera capturas de tela do desktop, celular e da camada estática em cada seção e relata erros de console e âncoras quebradas. Olhe cada captura. Em seguida, execute references/qa-checklist.md.
6. Ativos. node tools/shoot.js assets <site> renderiza hero-poster.webp, og.jpg e cover.webp.
7. Implantação. Repositório git próprio por site, implantação estática na Vercel, depois configure canonical/OG/JSON-LD para a URL real. Veja references/deploy-and-assets.md.

Os itens inegociáveis

• <html lang="ar" dir="rtl">, apenas propriedades CSS lógicas (margin-inline-start, nunca margin-left).
• Sem fotos de stock, sem arquivos de imagem no conteúdo. Cada visual é gerado: three.js procedural, arte linear inline SVG desenhada no scroll, texturas em canvas. Informe isso no rodapé.
• Um objeto 3D procedural por nicho que conta a proposta de valor enquanto o hero está fixado (a varredura revela o dente, janelas se acendem nas torres, o cartão vira para mostrar a prova). É uma história, não decoração. 2 a 3 declarações fixas a narram palavra por palavra.
• Uma cor de destaque por marca, usada apenas em <em> nos headings, CTAs e pequenos marcadores.
• Headings árabes grandes e justificados (letter-spacing:-.035em) combinados com uma fonte de exibição ou mono latina para numerais, números de seção e rótulos.
• Uma única curva de easing para CSS (--ease: cubic-bezier(.2,.75,.15,1)) e um pequeno vocabulário de movimento (revelações por máscara de palavra, seção horizontal fixada, elevações com scrub, botões magnéticos, marquee).
• O bloco mobile-tier-v1 (templates/perf-tier.html) executa antes da primeira pintura: full para desktop, lite para celulares, static para celulares fracos (pôster, sem three.js). O h1 é o elemento LCP; o 3D é construído em tempo ocioso após o texto ser pintado.
• Uma página completa sem movimento: prefers-reduced-motion e sem JavaScript recebem o layout final, estático e totalmente legível.
• Dialeto saudita (Najdi) branco, especialista e honesto: «ليش»، «وش»، «عشان»، «الحين». Sem exageros.
• Formulários com no máximo 3 campos. Um CTA flutuante que se esconde onde outro CTA já está na tela.

Não fazer (isto é o que faz uma página parecer um template)

• Fotos de stock, emojis na interface, gradientes genéricos, mais de uma cor de destaque.
• Animar tudo: o movimento segue a história, depois sai do caminho.
• Polimento apenas para desktop: verifique o celular e a camada estática com tanto cuidado quanto o desktop.
• Prova social falsa: nenhum depoimento inventado, classificações por estrelas, logotipos de clientes ou preços.
• margin-left/right, text-align:left, ícones apenas para LTR (setas devem apontar para o sentido RTL).
• Entregar sem olhar cada captura de tela do shoot.js verify.