# برومبت هيكلي — اعمل موقع زي «مشروع يجنن» بفكرتك إنت

> للمشاهد: انسخ الجزء اللي بين الخطوط لـ Claude Code (أو أي وكيل بيكتب كود ووردبريس)، واملأ كل `{{...}}`.
> المطلوب يكون جاهز قبل ما تبعت البرومبت: ووردبريس شغّال عليه Elementor 4 (+Pro)، JetEngine، وأداة تنفيذ كود (Novamira أو ما يعادلها)،
> وصورك/فيديوهاتك مرفوعة في Media. لو مفيش فيديو، سيب `{{HERO_VIDEO_URL}}` فاضي وهيستخدم الصور.

---

# Build a story-driven WordPress demo site: "{{SITE_NAME}}"

Work one step at a time and show me the result of each step before moving on. Ask questions before planning if anything below is unclear.

## 0. Concept
- Theme / joke / story in one line: {{ONE_LINE_CONCEPT}}
- Audience and language: {{LANGUAGE}} ({{RTL_OR_LTR}}), tone: {{TONE e.g. comedic, nostalgic, dramatic}}
- Site name: {{SITE_NAME}} · tagline: {{TAGLINE}}
- Brand tokens (create them as Elementor global variables with the prefix `{{PREFIX}}-`):
  - colors: ink {{#HEX}}, night {{#HEX}}, paper {{#HEX}}, cream {{#HEX}}, accent {{#HEX}}, accent-2 {{#HEX}}, alarm {{#HEX}}, muted {{#HEX}}
  - fonts: display {{DISPLAY_FONT}}, body {{BODY_FONT}} (Google Fonts)
  - shape language: radius {{14-24}}px, {{3}}px ink outlines, hard offset shadows `6px 6px 0 ink`
- Create global classes `{{PREFIX}}-section/container/h1/h2/h3/lead/body/eyebrow/btn/btn-ghost/card/badge/bubble/row/grid-3/dark` from these tokens before building any page. Use Elementor 4 atomic elements (flexbox / div-block / heading / paragraph / button / image) only, no legacy sections.

## 1. Home — scroll-driven video story (one row, 100vh)
- The home page has ONE full-viewport row: a sticky stage whose video time follows the scroll position (scroll down = play, scroll up = rewind). No pin-spacer tricks: a tall wrapper + `position: sticky` stage.
- Assets: hero video {{HERO_VIDEO_URL}} (16:9, muted, 15–25 s, fragmented MP4 if possible) and {{N}} key stills as fallback: {{STILL_1_URL}}, {{STILL_2_URL}}, {{STILL_3_URL}}, {{STILL_4_URL}}.
- Loading: fetch the video and feed it to a MediaSource buffer so the first seconds are scrubbable immediately; clamp the scroll to the loaded fraction and show a thin progress bar + "{{LOADING_TEXT}} 42%" label. Fallback for browsers without MediaSource: load the whole file as a blob, keep scrolling free.
- Never seek while a seek is pending (`video.seeking`); lerp the target time for smoothness.
- Captions: this spoken text split into 4 lines, each shown in a time window of the video (fractions of its duration):
  1. «{{CAPTION_1}}» (0–22 %)  2. «{{CAPTION_2}}» (27–50 %)  3. «{{CAPTION_3}}» (54–76 %)  4. «{{CAPTION_4}}» (79–97 %, big, centered)
- At 86 % of the scroll a centered popup card fades in: eyebrow «{{POPUP_EYEBROW}}», title «{{POPUP_TITLE}}», text «{{POPUP_TEXT}}», primary button «{{POPUP_CTA}}» → /{{LISTING_SLUG}}/, ghost button «{{POPUP_BACK}}» → scroll back to top.
- Brand bar overlaid top: site name (links home) + one button «{{NAV_CTA}}» → /{{LISTING_SLUG}}/. Fixed footer bar at the bottom (desktop): «{{FOOTER_TEXT}}» + link «{{FOOTER_LINK_TEXT}}» → {{FOOTER_LINK_URL}}.
- Mobile (< 768px): stage becomes a column: brand bar / video full-width 16:9 / caption box (captions stacked in one grid cell) / the popup card always visible. Scroll only scrubs the video. Must fit one screen height.
- Desktop crop rule: `object-position {{62}}% center` so the important side of the frame is never cut on 16:10 screens; letterbox (contain) under aspect 1.5.
- Respect `prefers-reduced-motion`: show the stills stacked, no pinning.

## 2. Content type — "{{ITEM_SINGULAR}}" ({{ITEM_PLURAL}})
- Create a JetEngine **Custom Content Type** `{{CPT_SLUG}}` (no single pages needed; items live in their own table). Fields: `{{cpt}}_emoji` (text), `{{cpt}}_price` (text, "{{PRICE_LABEL}}"), `{{cpt}}_tag` (text, "{{TAG_LABEL e.g. من فيلم}}"), `{{cpt}}_pitch` (textarea), `{{cpt}}_author` (text), `{{cpt}}_motion` (select: {{MOTION_KEYS}}), `{{cpt}}_video` (media, URL), `{{cpt}}_votes_count` (number; filled by the Data Store), `menu_order` (number).
- Seed {{3-6}} published items: {{ITEM_LIST — title | emoji | price | tag | 2-line pitch, one per line}}.
- JetEngine Data Store `{{cpt}}_votes`: type cookies, size 0, "count posts" ON, "Is Custom Content Type store" ON with this content type selected (the count is written to the `{{cpt}}_votes_count` column).

## 3. Listing page — /{{LISTING_SLUG}}/ (one row)
- Background image {{LISTING_BG_URL}} (16:9) as section background; ambient life: a warm light glow that flickers every ~2 s + 18 slow dust motes (GSAP). Same brand bar as home (site name → home, button «{{LISTING_CTA}}» → /{{ORDER_SLUG}}/).
- Top-right text block: eyebrow «{{LISTING_EYEBROW}}», H1 «{{LISTING_TITLE}}», one-line bubble «{{LISTING_LEAD}}».
- Cards strip at the bottom: an RTL/LTR scroll-snap carousel, 3 visible, arrows both sides (disabled at the ends), reading ALL items with status publish from the content type, sorted by votes DESC then menu order. Card = small {{ICON_SHAPE e.g. tea glass}} SVG with steam animation, title (emoji stripped, trimmed to 12 chars + "…"), price pill, tag line. Hover: lift + rattle.
- Vote button on each card (icon: {{VOTE_ICON}}, with count in local digits): adds/removes the item in the Data Store via admin-ajax (`jet_engine_add_to_store_{{cpt}}_votes` / `jet_engine_remove_from_store_{{cpt}}_votes`), one vote per browser, mirrored in localStorage, stopPropagation so it doesn't open the card.
- Badges: «{{TOP_BADGE e.g. الأكتر تصويت}}» on the most voted item (votes > 0), «{{NEW_BADGE}}» for items published in the last {{14}} days.
- Click a card → full-screen popup: media area 16:9 on top (if `{{cpt}}_video` set → autoplay muted loop video; else a code-made SVG+GSAP motion graphic keyed by `{{cpt}}_motion`; else a generic poster with emoji/title/price), then tag, full title, pitch, price pill, buttons «{{POPUP_ORDER_CTA}}» → /{{ORDER_SLUG}}/ and «{{POPUP_CLOSE}}». Close on X (SVG, flex-centered), backdrop and Escape.
- Mobile: same 3-up strip with compact cards and arrows under it, fits one screen.

## 4. Order / contact page — /{{ORDER_SLUG}}/ (one screen, no scroll on desktop)
- Background image {{ORDER_BG_URL}}: the "{{HOST_CHARACTER e.g. waiter}}" on the RIGHT, calm area on the LEFT. Desktop: a 500–540px column at the left ({{5–13}}% margin) with eyebrow «{{ORDER_EYEBROW}}», H2 «{{ORDER_TITLE}}», one-line intro «{{ORDER_INTRO}}», then the form card. Nothing may cover the character. Mobile: text in a dark glass panel over the image, form below, fixed footer visible.
- Form fields: {{FIELD_1_LABEL}} (text, required), {{FIELD_2_LABEL}} (text), {{FIELD_3_LABEL}} (text), {{FIELD_4_LABEL}} (text), {{FIELD_5_LABEL}} (textarea, required). Submit button «{{SUBMIT_TEXT}}». Success «{{SUCCESS_TEXT}}», error «{{ERROR_TEXT}}».
- Submissions go to a REST endpoint `{{namespace}}/v1/{{cpt}}` that inserts a DRAFT row in the `{{CPT_SLUG}}` content type (never public without review) and emails the admin.
- Anti-spam, all server-side, in this order: honeypot field; WordPress REST nonce (header + body); signed render timestamp (HMAC, reject < 4 s or > 24 h); rate limit 6 per 10 min per salted-hashed IP (transient); title ≤ 80 chars, pitch ≤ 600, no links in title, max 1 link in pitch; identical title+pitch blocked for 24 h. Return friendly {{LANGUAGE}} messages for each.

## 5. Quality bar (check before you say done)
- Test on a real mobile emulation (390×844, mobile UA, touch), not just a narrow window: no horizontal overflow (`html,body{overflow-x:clip}`), no element parked at `left:-9999px` (breaks RTL viewports).
- No theme styles leaking into custom UI (force colors with `!important` where the theme sets h3/button colors).
- GSAP owns transforms: don't put CSS `transition: transform` on elements GSAP animates.
- SVG text containing code/English inside an RTL page needs `direction="ltr"`.
- Lighthouse mobile performance ≥ 80; hero video ≤ 15 MB desktop, ≤ 8 MB mobile.
- Nothing secret in code (no passwords, app passwords, API keys).

Deliver: the pages live, the custom plugin file, and a short README of what each piece does.
---

## خريطة سريعة للـ placeholders (أمثلة من «مشروع يجنن»)
| Placeholder | مثالنا |
|---|---|
| SITE_NAME | مشروع يجنن |
| ONE_LINE_CONCEPT | أفكار مشاريع هزار لمطورين فضّاهم الـ AI، على طريقة مشهد البيض لسمير غانم |
| PREFIX | kk |
| HERO_VIDEO_URL | katakeet-hero-1080.mp4 (Veo، 21 ثانية) |
| CAPTION_1…4 | الاقتباس مقسوم 4 جمل، آخرها «مشروع يجنن!» |
| ITEM_SINGULAR / CPT_SLUG | فكرة / idea |
| LISTING_SLUG / ORDER_SLUG | ahwa / order |
| ICON_SHAPE / VOTE_ICON | كوباية شاي / فنجان قهوة صغير |
| HOST_CHARACTER | الواد الفكرجي (الجرسون) |
| TOP_BADGE / NEW_BADGE | الأكتر تصويت / جديد |