Abdallahossama/landing-pages

Páginas de aterrizaje (estilo codebyabdullah)

Un solo index.html, sin paso de compilación, desplegado como sitio estático. Lo que hace que estas páginas parezcan hechas a medida en lugar de generadas con plantillas es un conjunto pequeño de reglas que se aplican sin excepción. Todas están a continuación. La implementación de referencia es templates/starter-dental.html: en caso de duda, lee cómo lo hace.

Flujo de trabajo

1. Brief (2 minutos). Obtén, o decide y declara: nicho, nombre de la marca (árabe + latín), ciudad, la única oferta (ej. «الكشف الأول مجاني») y la acción principal (reservar, cotizar, visitar, pedir). El contenido real de un cliente (servicios, teléfono, dirección) se incluye como datos; nunca inventes reseñas, valoraciones, precios o personas. Un demo ficticio lo indica en la píldora de navegación «مثال · مشروع وهمي للعرض».
2. Elige el kit de nicho de references/niches.md: paleta, tipografías, idea del héroe 3D, interactivo característico, orden de secciones, tipo JSON-LD. Si el nicho no está allí, diseña uno usando las mismas categorías.
3. Copia primero. Escribe cada línea antes de cualquier CSS, usando references/copywriting-ar.md. La oferta aparece de 8 a 14 veces en la página.
4. Empieza desde el inicio. Copia templates/starter-dental.html a <sitio>/index.html y reemplaza su apariencia: tokens, fuentes, copia, secciones; luego reemplaza la escena 3D y el interactivo característico. Mantén el esqueleto, el bloque de nivel de rendimiento, el sistema de movimiento y las degradaciones de accesibilidad. Detalles: references/design-system.md, references/page-structure.md, references/hero-3d-and-performance.md, references/motion.md, references/conversion.md.
5. QA con la herramienta. node tools/shoot.js verify <sitio> captura pantallas de escritorio, móvil y el nivel estático en cada sección, e informa errores de consola y enlaces rotos. Revisa cada captura. Luego ejecuta references/qa-checklist.md.
6. Assets. node tools/shoot.js assets <sitio> renderiza hero-poster.webp, og.jpg y cover.webp.
7. Desplegar. Un repositorio git propio por sitio, despliegue estático en Vercel, luego establece canónico/OG/JSON-LD a la URL real. Consulta references/deploy-and-assets.md.

Los intocables

• <html lang="ar" dir="rtl">, solo propiedades CSS lógicas (margin-inline-start, nunca margin-left).
• Sin fotos de stock, sin archivos de imagen en el contenido. Cada elemento visual es generado: three.js procedural, arte lineal SVG en línea dibujado al hacer scroll, texturas de canvas. Menciónalo en el pie de página.
• Un objeto 3D procedural por nicho que cuenta la propuesta de valor mientras el héroe está fijado (el escáner revela el diente, las ventanas se iluminan a través de las torres, la tarjeta se da la vuelta para mostrar la prueba). Es una historia, no decoración. 2–3 declaraciones fijadas la narran palabra por palabra.
• Un color de acento por marca, utilizado solo en <em> en encabezados, CTAs y marcas pequeñas.
• Encabezados árabes grandes y ajustados (letter-spacing:-.035em) combinados con una fuente latina de exhibición o mono para números, números de sección y etiquetas.
• Una sola curva de easing para CSS (--ease: cubic-bezier(.2,.75,.15,1)) y un pequeño vocabulario de movimiento (revelaciones con máscara de palabras, sección horizontal fijada, elevaciones barridas, botones magnéticos, marquee).
• El bloque mobile-tier-v1 (templates/perf-tier.html) se ejecuta antes de la primera pintura: full para escritorio, lite para teléfonos, static para teléfonos débiles (póster, sin three.js). El h1 es el elemento LCP; el 3D se construye en tiempo de inactividad después de que el texto se pinte.
• Una página completa sin movimiento: prefers-reduced-motion y sin JS obtienen ambos el diseño final, estático y completamente legible.
• Dialecto saudí (Najdi) blanco, experto y honesto: «ليش»، «وش»، «عشان»، «الحين». Sin exageraciones.
• Formularios de 3 campos o menos. Un CTA flotante que se oculta donde ya hay otro CTA visible en pantalla.

No hacer (esto es lo que hace que una página parezca de plantilla)

• Fotos de stock, emojis en la interfaz, degradados genéricos, más de un color de acento.
• Animar todo: el movimiento sigue la historia, luego se aparta.
• Pulido solo para escritorio: revisa el teléfono y el nivel estático con tanto cuidado como el escritorio.
• Prueba social falsa: sin testimonios inventados, valoraciones de estrellas, logotipos de clientes ni precios.
• margin-left/right, text-align:left, iconos solo LTR (las flechas deben apuntar en dirección RTL).
• Enviar sin mirar cada captura de pantalla de shoot.js verify.