Pages d'atterrissage (style codebyabdullah)

Que fait Pages d'atterrissage (style codebyabdullah) ?

Un index.html, sans étape de build, déployé comme un site statique. Ce qui rend ces pages uniques (et non issues d'un template) est un petit ensemble de règles appliquées sans exception. Elles sont listées ci-dessous. L'implémentation de référence est templates/starter-dental.html : en cas de doute, lisez comment elle fonctionne.

Workflow

1. Brief (2 minutes). Obtenir, ou décider et énoncer : la niche, le nom de la marque (arabe + latin), la ville, l'offre unique (ex. «الكشف الأول مجاني»), et l'action principale (réserver, devis, visiter, commander). Le contenu d'un vrai client (services, téléphone, adresse) est saisi comme donnée ; n'inventez jamais d'avis, d'évaluations, de prix ou de personnes. Une démo fictive doit l'indiquer dans le pill de navigation «مثال · مشروع وهمي للعرض».
2. Choisir le kit de niche depuis references/niches.md : palette, polices, idée 3D pour le hero, interaction signature, ordre des sections, type JSON-LD. Si la niche n'y figure pas, concevez-en une en utilisant les mêmes emplacements.
3. Rédiger d'abord. Écrire chaque ligne avant tout CSS, en utilisant references/copywriting-ar.md. L'offre apparaît 8 à 14 fois sur la page.
4. Partir du starter. Copier templates/starter-dental.html vers <site>/index.html et le personnaliser : tokens, polices, contenu, sections, puis remplacer la scène 3D et l'interaction signature. Conserver le squelette, le bloc de niveau de performance, le système de mouvement et les solutions de repli d'accessibilité. Détails : references/design-system.md, references/page-structure.md, references/hero-3d-and-performance.md, references/motion.md, references/conversion.md.
5. QA avec l'outil. node tools/shoot.js verify <site> génère des captures d'écran bureau, mobile et le niveau statique à chaque section et rapporte les erreurs console et les ancres mortes. Regardez chaque capture d'écran. Puis exécutez references/qa-checklist.md.
6. Assets. node tools/shoot.js assets <site> rend hero-poster.webp, og.jpg et cover.webp.
7. Déployer. Un dépôt git par site, déploiement statique sur Vercel, puis définir canonical/OG/JSON-LD sur l'URL réelle. Voir references/deploy-and-assets.md.

Les non-négociables

• <html lang="ar" dir="rtl">, propriétés CSS logiques uniquement (margin-inline-start, jamais margin-left).
• Pas de photos stock, pas de fichiers image dans le contenu. Chaque visuel est généré : Three.js procédural, SVG inline dessiné au défilement, textures canvas. Mentionnez-le dans le pied de page.
• Un objet 3D procédural par niche qui raconte la proposition de valeur pendant que le hero est épinglé (le scan révèle la dent, les fenêtres s'allument sur les tours, la carte se retourne pour montrer la preuve). C'est une histoire, pas une décoration. 2 à 3 déclarations épinglées la racontent mot à mot.
• Une couleur d'accent par marque, utilisée uniquement sur <em> dans les titres, les CTA et les petites marques.
• Grands titres arabes serrés (letter-spacing:-.035em) associés à une police d'affichage latine ou monospace pour les chiffres, les numéros de section et les étiquettes.
• Une seule courbe d'assouplissement pour CSS (--ease: cubic-bezier(.2,.75,.15,1)) et un petit vocabulaire de mouvement (dévoilement par masque de mot, section horizontale épinglée, soulèvements au défilement, boutons magnétiques, marquee).
• Le bloc mobile-tier-v1 (templates/perf-tier.html) s'exécute avant le premier rendu : full pour le bureau, lite pour les téléphones, static pour les téléphones faibles (poster, sans Three.js). Le h1 est l'élément LCP ; la 3D se construit en temps d'inactivité après l'affichage du texte.
• Une page complète sans mouvement : prefers-reduced-motion et sans JS obtiennent tous les deux la mise en page finale, statique et entièrement lisible.
• Dialecte saoudien (Najdi) blanc, expert et honnête : «ليش»، «وش»، «عشان»، «الحين». Pas de battage publicitaire.
• Formulaires de 3 champs ou moins. Un CTA flottant qui se cache là où un autre CTA est déjà à l'écran.

À ne pas faire (ce qui rend une page semblable à un template)

• Photos stock, emoji dans l'interface, dégradés génériques, plus d'une couleur d'accent.
• Animer tout : le mouvement suit l'histoire, puis s'efface.
• Finitions uniquement bureau : vérifiez le téléphone et le niveau statique aussi soigneusement que le bureau.
• Preuve sociale fictive : pas de témoignages inventés, d'évaluations par étoiles, de logos clients ou de prix.
• margin-left/right, text-align:left, icônes uniquement LTR (les flèches doivent pointer dans le sens RTL).
• Livrer sans avoir regardé chaque capture d'écran de shoot.js verify.