Abdallahossama/landing-pages

Landing pages (codebyabdullah style)

One index.html, no build step, deployed as a static site. What makes these look custom-built instead of template-built is a small set of rules applied without exception. They are all below. The reference implementation is templates/starter-dental.html: when in doubt, read how it does it.

Workflow

1. Brief (2 minutes). Get, or decide and state: niche, brand name (Arabic + Latin), city, the one offer (e.g. «الكشف الأول مجاني»), and the primary action (book, quote, visit, order). A real client's content (services, phone, address) goes in as data; never invent reviews, ratings, prices, or people. A fictional demo says so in the nav pill «مثال · مشروع وهمي للعرض».
2. Pick the niche kit from references/niches.md: palette, fonts, 3D hero idea, signature interactive, section order, JSON-LD type. If the niche isn't there, design one using the same slots.
3. Copy first. Write every line before any CSS, using references/copywriting-ar.md. The offer appears 8–14 times on the page.
4. Start from the starter. Copy templates/starter-dental.html to <site>/index.html and re-skin it: tokens, fonts, copy, sections, then replace the 3D scene and the signature interactive. Keep the skeleton, the perf tier block, the motion system and the a11y fallbacks. Details: references/design-system.md, references/page-structure.md, references/hero-3d-and-performance.md, references/motion.md, references/conversion.md.
5. QA with the tool. node tools/shoot.js verify <site> screenshots desktop, phone and the static tier at every section and reports console errors and dead anchors. Look at every screenshot. Then run references/qa-checklist.md.
6. Assets. node tools/shoot.js assets <site> renders hero-poster.webp, og.jpg and cover.webp.
7. Deploy. Own git repo per site, static deploy on Vercel, then set canonical/OG/JSON-LD to the real URL. See references/deploy-and-assets.md.

The non-negotiables

• <html lang="ar" dir="rtl">, logical CSS properties only (margin-inline-start, never margin-left).
• No stock photos, no image files in the content. Every visual is generated: procedural three.js, inline SVG line art drawn on scroll, canvas textures. Say so in the footer.
• One procedural 3D object per niche that tells the value proposition while the hero is pinned (the scan reveals the tooth, windows light up across towers, the card flips to show the proof). It's a story, not decoration. 2–3 pinned statements narrate it word by word.
• One accent colour per brand, used only on <em> in headings, CTAs and small marks.
• Big tight Arabic headings (letter-spacing:-.035em) paired with a Latin display or mono font for numerals, section numbers and labels.
• One easing curve for CSS (--ease: cubic-bezier(.2,.75,.15,1)) and a small motion vocabulary (word-mask reveals, pinned horizontal section, scrubbed lifts, magnetic buttons, marquee).
• The mobile-tier-v1 block (templates/perf-tier.html) runs before first paint: full desktop, lite phones, static weak phones (poster, no three.js). The h1 is the LCP element; the 3D builds at idle time after the text paints.
• A complete page without motion: prefers-reduced-motion and no-JS both get the final, static, fully readable layout.
• Saudi (Najdi) white dialect, expert and honest: «ليش»، «وش»، «عشان»، «الحين». No hype.
• Forms of 3 fields or fewer. A floating CTA that hides where another CTA is already on screen.

Don'ts (these are what make a page look like a template)

• Stock photos, emoji in UI, generic gradient blobs, more than one accent colour.
• Animating everything: motion follows the story, then gets out of the way.
• Desktop-only polish: check the phone and the static tier as carefully as desktop.
• Fake social proof: no invented testimonials, star ratings, client logos or prices.
• margin-left/right, text-align:left, LTR-only icons (arrows must point the RTL way).
• Shipping without looking at every screenshot from shoot.js verify.