Abdallahossama/landing-pages

Landing Pages (CodebyAbdullah-Stil)

Eine index.html, kein Build-Schritt, als statische Site deployed. Was diese Seiten maßgeschneidert und nicht wie eine Vorlage aussehen lässt, ist eine kleine, ausnahmslos angewendete Regelmenge. Sie steht unten. Die Referenzimplementierung ist templates/starter-dental.html: lies nach, wie es funktioniert, wenn du unsicher bist.

Arbeitsablauf

1. Briefing (2 Minuten). Ermittle oder entscheide und halte fest: Nische, Markenname (Arabisch + Lateinisch), Stadt, das eine Angebot (z.B. «الكشف الأول مجاني»), und die primäre Handlungsaufforderung (buchen, anfragen, besuchen, bestellen). Die Inhalte eines echten Kunden (Dienstleistungen, Telefon, Adresse) werden als Daten eingefügt; erfinde niemals Bewertungen, Bewertungssterne, Preise oder Personen. Eine fiktive Demo sagt dies in der Nav-Pille «مثال · مشروع وهمي للعرض».
2. Wähle das Nischen-Kit aus references/niches.md: Palette, Schriftarten, 3D-Held-Idee, signifikantes interaktives Element, Abschnitts-Reihenfolge, JSON-LD-Typ. Wenn die Nische nicht vorhanden ist, entwirf eine eigene mit denselben Bausteinen.
3. Zuerst den Text schreiben. Schreibe jede Zeile vor dem CSS, verwende references/copywriting-ar.md. Das Angebot erscheint 8–14 Mal auf der Seite.
4. Von der Startvorlage ausgehen. Kopiere templates/starter-dental.html nach <site>/index.html und passe es an: Tokens, Schriftarten, Text, Abschnitte, dann ersetze die 3D-Szene und das signifikante interaktive Element. Behalte das Grundgerüst, den Performance-Stufen-Block, das Bewegungssystem und die 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 mit dem Tool. node tools/shoot.js verify <site> erstellt Screenshots von Desktop, Telefon und der statischen Stufe für jeden Abschnitt und meldet Konsolenfehler und defekte Anker. Sieh dir jeden Screenshot an. Führe dann references/qa-checklist.md aus.
6. Assets. node tools/shoot.js assets <site> rendert hero-poster.webp, og.jpg und cover.webp.
7. Deployment. Eigenes Git-Repo pro Site, statisches Deployment auf Vercel, dann setze canonical/OG/JSON-LD auf die echte URL. Siehe references/deploy-and-assets.md.

Die nicht verhandelbaren Regeln

• <html lang="ar" dir="rtl">, nur logische CSS-Eigenschaften (margin-inline-start, niemals margin-left).
• Keine Stockfotos, keine Bilddateien im Inhalt. Jedes visuelle Element wird generiert: prozedurales Three.js, Inline-SVG-Linienkunst, die beim Scrollen gezeichnet wird, Canvas-Texturen. Gib dies in der Fußzeile an.
• Ein prozedurales 3D-Objekt pro Nische, das den Wert des Angebots erzählt, während der Hero-Bereich fixiert ist (der Scan legt den Zahn frei, Lichter leuchten in Türmen auf, die Karte dreht sich, um den Beweis zu zeigen). Es ist eine Geschichte, keine Dekoration. 2–3 fixierte Aussagen erzählen sie Wort für Wort.
• Eine Akzentfarbe pro Marke, verwendet nur bei <em> in Überschriften, CTAs und kleinen Markierungen.
• Große enge arabische Überschriften (letter-spacing:-.035em) kombiniert mit einer lateinischen Display- oder Monospace-Schriftart für Zahlen, Abschnittsnummern und Labels.
• Eine Easing-Kurve für CSS (--ease: cubic-bezier(.2,.75,.15,1)) und ein kleines Bewegungsvokabular (Wortmasken-Einblendungen, fixierter horizontaler Abschnitt, geschrubbte Hebebewegungen, magnetische Buttons, Marquee).
• Der mobile-tier-v1-Block (templates/perf-tier.html) wird vor dem ersten Paint ausgeführt: full für Desktop, lite für Telefone, static für schwache Telefone (Poster, kein Three.js). Die h1 ist das LCP-Element; das 3D-Objekt baut sich im Leerlauf auf, nachdem der Text gemalt wurde.
• Eine vollständige Seite ohne Bewegung: prefers-reduced-motion und kein JS erhalten beide das endgültige, statische, vollständig lesbare Layout.
• Saudi-arabischer (Nadschdi) weißer Dialekt, fachkundig und ehrlich: «ليش», «وش», «عشان», «الحين». Kein Hype.
• Formulare mit maximal 3 Feldern. Ein schwebender CTA, der ausgeblendet wird, wenn ein anderer CTA bereits auf dem Bildschirm sichtbar ist.

Verbotenes (das unterscheidet eine maßgeschneiderte Seite von einer Vorlage)

• Stockfotos, Emojis in der UI, generische Gradienten-Blotches, mehr als eine Akzentfarbe.
• Alles animieren: Bewegung folgt der Geschichte und tritt dann in den Hintergrund.
• Desktop-only-Politur: überprüfe die Telefon- und die statische Stufe genauso sorgfältig wie den Desktop.
• Gefälschte soziale Beweise: keine erfundenen Testimonials, Sternebewertungen, Kundenlogos oder Preise.
• margin-left/right, text-align:left, LTR-only Icons (Pfeile müssen in die RTL-Richtung zeigen).
• Ausliefern, ohne sich jeden Screenshot von shoot.js verify angesehen zu haben.