{"product_id":"vibecoding","title":"كورس الفايب كودينج","description":"\u003c!-- Shopify: paste this entire fragment into a Custom liquid section. Edit CONFIG below before publishing. --\u003e\n\u003cstyle\u003e\n  #vc-course {\n    --bg: #090e1c;\n    --panel: #121b2f;\n    --line: #26334c;\n    --ink: #f4f7ff;\n    --muted: #abb9d0;\n    --mint: #89f0ce;\n    direction: rtl;\n    background: var(--bg);\n    color: var(--ink);\n    font-family: Tahoma, Arial, sans-serif;\n    font-size: 16px;\n    line-height: 1.9;\n    isolation: isolate;\n    overflow: hidden;\n  }\n\n  #vc-course * {\n    box-sizing: border-box;\n  }\n\n  #vc-course a {\n    color: inherit;\n  }\n\n  #vc-course .vc-wrap {\n    max-width: 1100px;\n    margin: auto;\n    padding: 0 24px;\n  }\n\n  #vc-course .vc-nav {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 0;\n    border-bottom: 1px solid var(--line);\n  }\n\n  #vc-course .vc-brand {\n    font-weight: bold;\n    letter-spacing: 1px;\n    direction: ltr;\n  }\n\n  #vc-course .vc-brand span {\n    color: var(--mint);\n  }\n\n  #vc-course .vc-label {\n    font-size: 13px;\n    color: var(--mint);\n    letter-spacing: 1px;\n  }\n\n  #vc-course .vc-hero {\n    text-align: center;\n    padding: 15px 0 10px;\n    background: radial-gradient(ellipse at 50% 20%, #19344988, transparent 65%);\n  }\n\n  #vc-course h1 {\n    font-size: clamp(28px, 4.5vw, 48px);\n    line-height: 1.2;\n    margin: 5px 0;\n    color: var(--ink);\n    font-weight: 800;\n    letter-spacing: -1px;\n  }\n\n  #vc-course h1 em {\n    color: var(--mint);\n    font-style: normal;\n  }\n\n  #vc-course h2 {\n    font-size: clamp(22px, 3vw, 32px);\n    line-height: 1.4;\n    margin: 5px 0 10px;\n    color: var(--ink);\n  }\n\n  #vc-course h3 {\n    font-size: 18px;\n    margin: 10px 0;\n    color: var(--ink);\n  }\n\n  #vc-course p {\n    margin: 5px 0 12px;\n  }\n\n  #vc-course .vc-muted {\n    color: var(--muted);\n  }\n\n  #vc-course .vc-lead {\n    font-size: 17px;\n    max-width: 680px;\n    margin: 0 auto 10px;\n  }\n\n  #vc-course .vc-btn {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    gap: 12px;\n    background: var(--mint);\n    color: #09221c;\n    text-decoration: none;\n    border: 0;\n    border-radius: 10px;\n    padding: 13px 27px;\n    font: 700 16px Tahoma, Arial;\n    min-height: 50px;\n    cursor: pointer;\n  }\n\n  #vc-course .vc-btn:hover {\n    background: #b3ffe6;\n  }\n\n  #vc-course a:focus-visible,\n  #vc-course button:focus-visible,\n  #vc-course summary:focus-visible {\n    outline: 3px solid #ffc46a;\n    outline-offset: 5px;\n  }\n\n  #vc-course .vc-chips {\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n    flex-wrap: wrap;\n    margin: 10px 0;\n  }\n\n  #vc-course .vc-chip {\n    padding: 3px 12px;\n    border: 1px solid var(--line);\n    border-radius: 50px;\n    font-size: 13px;\n    color: var(--muted);\n  }\n\n  #vc-course .vc-section {\n    padding: 25px 0;\n    border-top: 1px solid var(--line);\n  }\n\n  #vc-course .vc-center {\n    text-align: center;\n  }\n\n  #vc-course .vc-video {\n    aspect-ratio: 16 \/ 9;\n    position: relative;\n    background: linear-gradient(135deg, #1c3048, #11192b);\n    border: 1px solid #36516a;\n    border-radius: 20px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    margin-top: 26px;\n    overflow: hidden;\n  }\n\n  #vc-course .vc-video\u003ediv {\n    width: 100%;\n    height: 100%;\n  }\n\n  #vc-course .vc-play {\n    display: grid;\n    place-items: center;\n    width: 70px;\n    height: 70px;\n    border-radius: 50%;\n    background: var(--mint);\n    color: #0a241f;\n    font-size: 26px;\n    margin: 0 auto 14px;\n  }\n\n  #vc-course iframe,\n  #vc-course video {\n    width: 100%;\n    height: 100%;\n    border: 0;\n    position: absolute;\n    inset: 0;\n  }\n\n  #vc-course .vc-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 18px;\n    margin-top: 28px;\n  }\n\n  #vc-course .vc-card {\n    background: var(--panel);\n    border: 1px solid var(--line);\n    border-radius: 16px;\n    padding: 25px;\n  }\n\n  #vc-course .vc-num {\n    font: 700 14px monospace;\n    color: var(--mint);\n  }\n\n  #vc-course .vc-card p {\n    font-size: 14px;\n    color: var(--muted);\n    margin-bottom: 0;\n  }\n\n  #vc-course .vc-banner {\n    display: flex;\n    justify-content: space-between;\n    gap: 24px;\n    align-items: center;\n    margin-top: 30px;\n    padding: 25px;\n    border: 1px solid #345848;\n    background: #122821;\n    border-radius: 16px;\n  }\n\n  #vc-course .vc-banner p {\n    margin: 0;\n    color: #c3ddcf;\n  }\n\n  #vc-course .vc-two {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 18px;\n  }\n\n  #vc-course details {\n    border: 1px solid var(--line);\n    border-radius: 12px;\n    margin: 12px 0;\n    background: var(--panel);\n    overflow: hidden;\n  }\n\n  #vc-course summary {\n    cursor: pointer;\n    list-style: none;\n    padding: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n    font-weight: bold;\n  }\n\n  #vc-course summary::-webkit-details-marker {\n    display: none;\n  }\n\n  #vc-course summary:after {\n    content: '+';\n    color: var(--mint);\n    font-size: 24px;\n    flex-shrink: 0;\n  }\n\n  #vc-course details[open]\u003esummary:after {\n    content: '−';\n  }\n\n  #vc-course .vc-answer {\n    padding: 0 22px 22px;\n    color: var(--muted);\n  }\n\n  #vc-course .vc-lesson {\n    display: flex;\n    justify-content: space-between;\n    gap: 15px;\n    padding: 14px 20px;\n    border-top: 1px solid var(--line);\n    font-size: 14px;\n  }\n\n  #vc-course .vc-duration {\n    white-space: nowrap;\n    color: var(--muted);\n    font-size: 12px;\n  }\n\n  #vc-course .vc-toolbar {\n    display: flex;\n    justify-content: space-between;\n    gap: 15px;\n    align-items: center;\n    flex-wrap: wrap;\n  }\n\n  #vc-course .vc-textbtn {\n    background: none;\n    border: 1px solid var(--line);\n    color: var(--mint);\n    padding: 8px 15px;\n    border-radius: 8px;\n    cursor: pointer;\n    font: inherit;\n    font-size: 13px;\n  }\n\n  #vc-course .vc-preview {\n    aspect-ratio: 16 \/ 10;\n    background: linear-gradient(145deg, #20314c, #162335);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 10px;\n    overflow: hidden;\n    color: var(--muted);\n    font-size: 14px;\n    position: relative;\n    \/* Added for iframe support *\/\n  }\n\n  #vc-course .vc-preview\u003ediv {\n    width: 100%;\n    height: 100%;\n  }\n\n  #vc-course .vc-preview img,\n  #vc-course .vc-preview iframe {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border: 0;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  #vc-course .vc-project-link {\n    display: inline-block;\n    margin-top: 15px;\n    color: var(--mint);\n    text-underline-offset: 5px;\n  }\n\n  #vc-course .vc-pricebox {\n    max-width: 650px;\n    margin: 25px auto 0;\n    background: linear-gradient(140deg, #172e32, #152034);\n    border: 1px solid #4d8876;\n    border-radius: 24px;\n    padding: 36px;\n    text-align: center;\n  }\n\n  #vc-course .vc-price {\n    font-size: 40px;\n    font-weight: bold;\n    line-height: 1.4;\n    margin: 15px 0;\n  }\n\n  #vc-course .vc-old {\n    color: var(--muted);\n  }\n\n  #vc-course .vc-coupon {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 15px;\n    border: 1px dashed #607d88;\n    padding: 14px;\n    border-radius: 10px;\n    margin: 22px 0 10px;\n  }\n\n  #vc-course .vc-coupon code {\n    color: var(--mint);\n    font-size: 20px;\n  }\n\n  #vc-course [hidden] {\n    display: none !important;\n  }\n\n  #vc-course .vc-pricebox .vc-btn {\n    width: 100%;\n  }\n\n  #vc-course .vc-note {\n    font-size: 12px;\n    color: var(--muted);\n  }\n\n  #vc-course .vc-footer {\n    padding: 25px 0;\n    border-top: 1px solid var(--line);\n    text-align: center;\n    color: var(--muted);\n    font-size: 13px;\n  }\n\n  #vc-course #vc-price {\n    scroll-margin-top: 30px;\n  }\n\n  #vc-course .vc-payments {\n    display: flex;\n    gap: 10px;\n    flex-wrap: wrap;\n    margin: 20px 0;\n  }\n\n  #vc-course .vc-payments span {\n    border: 1px solid var(--line);\n    background: var(--panel);\n    padding: 10px 15px;\n    border-radius: 10px;\n  }\n\n  #vc-course .vc-status {\n    font-size: 13px;\n    color: var(--mint);\n    min-height: 25px;\n  }\n\n  @media (max-width: 720px) {\n\n    #vc-course .vc-grid,\n    #vc-course .vc-two {\n      grid-template-columns: 1fr;\n    }\n\n    #vc-course .vc-wrap {\n      padding: 0 18px;\n    }\n\n    #vc-course .vc-hero {\n      padding: 45px 0 30px;\n    }\n\n    #vc-course .vc-section {\n      padding: 35px 0;\n    }\n\n    #vc-course .vc-banner {\n      align-items: stretch;\n      flex-direction: column;\n    }\n\n    #vc-course .vc-pricebox {\n      padding: 25px 18px;\n    }\n\n    #vc-course .vc-nav {\n      font-size: 12px;\n    }\n\n    #vc-course .vc-lesson {\n      padding: 14px 12px;\n    }\n\n    #vc-course .vc-lead {\n      font-size: 16px;\n    }\n  }\n\u003c\/style\u003e\n\n\u003c!-- Motion layer: kept separate so it is easy to adjust or remove. --\u003e\n\u003cstyle\u003e\n  .payment-section {\n    display: none;\n  }\n\n  .price_planss {\n    display: none !important;\n  }\n\n  .coupon-box {\n    display: none !important;\n  }\n\n  .main-page-title {\n    display: none !important;\n  }\n\n  body {\n    background: #090e1c !important;\n  }\n\n  \/* Smooth scrolling between call-to-action buttons and the price section. *\/\n  #vc-course {\n    scroll-behavior: smooth;\n  }\n\n  \/* Sections gently enter when they become visible. *\/\n  #vc-course .vc-section,\n  #vc-course .vc-hero {\n    opacity: 0;\n    transform: translateY(24px);\n    transition: opacity 650ms ease, transform 650ms ease;\n  }\n\n  #vc-course .vc-is-visible {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  \/* Interactive elements get a small lift without affecting layout. *\/\n  #vc-course .vc-card,\n  #vc-course details,\n  #vc-course .vc-banner,\n  #vc-course .vc-pricebox {\n    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;\n  }\n\n  #vc-course .vc-card:hover,\n  #vc-course details:hover,\n  #vc-course .vc-banner:hover {\n    transform: translateY(-5px);\n    border-color: #5d9d8b;\n    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);\n  }\n\n  #vc-course .vc-btn {\n    position: relative;\n    overflow: hidden;\n    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;\n  }\n\n  #vc-course .vc-btn:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 10px 25px rgba(137, 240, 206, 0.22);\n  }\n\n  #vc-course .vc-btn:active {\n    transform: translateY(0) scale(0.98);\n  }\n\n  #vc-course .vc-currency-note {\n    margin: -8px 0 18px;\n    color: var(--muted);\n    font-size: 14px;\n  }\n\n  #vc-course .vc-currency-note strong {\n    color: var(--mint);\n    font-weight: 700;\n  }\n\n  \/* A subtle pulse invites the visitor to play the intro video. *\/\n  #vc-course .vc-video:not(:has(iframe)):not(:has(video)) .vc-play {\n    animation: vc-pulse 2.4s ease-in-out infinite;\n  }\n\n  @keyframes vc-pulse {\n\n    0%,\n    100% {\n      box-shadow: 0 0 0 0 rgba(137, 240, 206, 0.38);\n    }\n\n    50% {\n      box-shadow: 0 0 0 15px rgba(137, 240, 206, 0);\n    }\n  }\n\n  \/* Do not animate when the visitor has requested reduced motion. *\/\n  @media (prefers-reduced-motion: reduce) {\n    #vc-course {\n      scroll-behavior: auto;\n    }\n\n    #vc-course .vc-section,\n    #vc-course .vc-hero {\n      opacity: 1;\n      transform: none;\n      transition: none;\n    }\n\n    #vc-course .vc-card,\n    #vc-course details,\n    #vc-course .vc-banner,\n    #vc-course .vc-pricebox,\n    #vc-course .vc-btn {\n      transition: none;\n    }\n\n    #vc-course .vc-video:not(:has(iframe)):not(:has(video)) .vc-play {\n      animation: none;\n    }\n  }\n\u003c\/style\u003e\n\n\u003cdiv id=\"vc-course\" lang=\"ar\" dir=\"rtl\"\u003e\n  \u003cdiv class=\"vc-wrap\"\u003e\n    \u003cheader class=\"vc-hero\"\u003e\n      \u003cspan class=\"vc-label\"\u003eكورس Vibe Coding • تعلّم وطبّق\u003c\/span\u003e\n      \u003ch1\u003eفكرتك تستاهل تتنفّذ.\u003cbr\u003e\u003cem\u003eابنيها بنفسك.\u003c\/em\u003e\n\u003c\/h1\u003e\n      \u003cp class=\"vc-lead vc-muted\"\u003eاتعلم مجال Vibe Coding وحوّل فكرتك لمشروع حقيقي بمساعدة الذكاء الاصطناعي، من أول\n        التخطيط لحد التشغيل والنشر.\u003c\/p\u003e\n      \u003cstrong\u003eمش محتاج خبرة برمجية عشان تبدأ.\u003c\/strong\u003e\n      \u003cdiv class=\"vc-chips\"\u003e\n        \u003cspan class=\"vc-chip\"\u003eموقع\u003c\/span\u003e\n        \u003cspan class=\"vc-chip\"\u003eتطبيق\u003c\/span\u003e\n        \u003cspan class=\"vc-chip\"\u003eسيستم\u003c\/span\u003e\n        \u003cspan class=\"vc-chip\"\u003eلعبة\u003c\/span\u003e\n      \u003c\/div\u003e\n    \u003c\/header\u003e\n\n    \u003csection class=\"vc-section vc-center\"\u003e\n      \u003ch2\u003eكل التفاصيل هتلاقيها في الفيديو\u003c\/h2\u003e\n      \u003cp class=\"vc-muted\"\u003eاعرف هتتعلم إيه، وإزاي هنمشي مع بعض من الفكرة للتنفيذ.\u003c\/p\u003e\n      \u003cdiv class=\"vc-video\" id=\"vc-video\"\u003e\n        \u003cdiv\u003e\n          \u003cdiv class=\"vc-play\" aria-hidden=\"true\"\u003e▶\u003c\/div\u003e\n          \u003cstrong\u003eمكان فيديو التعريف بالكورس\u003c\/strong\u003e\n          \u003cp class=\"vc-note\"\u003eأضف رابط الفيديو من إعدادات الصفحة\u003c\/p\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003csection class=\"vc-section\"\u003e\n      \u003ch2\u003eمش بس أدوات… هتتعلم الرحلة كاملة\u003c\/h2\u003e\n      \u003cp class=\"vc-muted\"\u003eخطوات عملية تساعدك تبني، تجرّب، وتطلّع مشروعك للنور.\u003c\/p\u003e\n      \u003cdiv class=\"vc-grid\"\u003e\n        \u003carticle class=\"vc-card\"\u003e\n          \u003cspan class=\"vc-num\"\u003e01 \/ BUILD\u003c\/span\u003e\n          \u003ch3\u003eمشاريع من أولها لآخرها\u003c\/h3\u003e\n          \u003cp\u003eهنبني مشاريع كاملة، ونربط الأجزاء ببعض عشان تفهم الصورة كلها.\u003c\/p\u003e\n        \u003c\/article\u003e\n        \u003carticle class=\"vc-card\"\u003e\n          \u003cspan class=\"vc-num\"\u003e02 \/ TEST\u003c\/span\u003e\n          \u003ch3\u003eتثبيت سيرفر محلي\u003c\/h3\u003e\n          \u003cp\u003eهتتعلم تعمل سيرفر محلي وتختبر المشروع قبل ما ترفعه.\u003c\/p\u003e\n        \u003c\/article\u003e\n        \u003carticle class=\"vc-card\"\u003e\n          \u003cspan class=\"vc-num\"\u003e03 \/ LAUNCH\u003c\/span\u003e\n          \u003ch3\u003eرفع على السيرفر \u003c\/h3\u003e\n          \u003cp\u003eشراء الاستضافة والدومين، ورفع مشاريع المواقع وتشغيلها على السيرفر.\u003c\/p\u003e\n        \u003c\/article\u003e\n        \u003carticle class=\"vc-card\"\u003e\n          \u003cspan class=\"vc-num\"\u003e04 \/ INSTALL\u003c\/span\u003e\n          \u003ch3\u003eتركيب الاسكريبتات\u003c\/h3\u003e\n          \u003cp\u003eشرح تركيب الاسكريبتات البرمجية على الموقع وضبط إعدادات تشغيلها.\u003c\/p\u003e\n        \u003c\/article\u003e\n        \u003carticle class=\"vc-card\"\u003e\n          \u003cspan class=\"vc-num\"\u003e05 \/ CREATE\u003c\/span\u003e\n          \u003ch3\u003eبناء التطبيقات\u003c\/h3\u003e\n          \u003cp\u003eنتعلم خطوات بناء التطبيقات وتحويل المتطلبات لميزات قابلة للتجربة.\u003c\/p\u003e\n        \u003c\/article\u003e\n        \u003carticle class=\"vc-card\"\u003e\n          \u003cspan class=\"vc-num\"\u003e06 \/ PLAN\u003c\/span\u003e\n          \u003ch3\u003eابدأ فكرتك صح\u003c\/h3\u003e\n          \u003cp\u003eحدد المتطلبات وخطوات التنفيذ من البداية عشان تقلل النواقص وإعادة الشغل.\u003c\/p\u003e\n        \u003c\/article\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"vc-banner\"\u003e\n        \u003cdiv\u003e\n          \u003cstrong\u003eجاهز تنقل فكرتك للخطوة الجاية؟\u003c\/strong\u003e\n          \u003cp\u003eابدأ التعلم وطبّق مع الدروس.\u003c\/p\u003e\n        \u003c\/div\u003e\n        \u003ca class=\"vc-btn\" href=\"#vc-price\"\u003eاشترك في الكورس ←\u003c\/a\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003csection class=\"vc-section\"\u003e\n      \u003ch2\u003eالكورس مناسب ليك لو…\u003c\/h2\u003e\n      \u003cdiv class=\"vc-two\"\u003e\n        \u003carticle class=\"vc-card\"\u003e\n          \u003cspan class=\"vc-label\"\u003eلسه بتبدأ\u003c\/span\u003e\n          \u003ch3\u003eمش محتاجين خبرة برمجية\u003c\/h3\u003e\n          \u003cp\u003eهنبدأ من الأساسيات ونتعلم إزاي نوجّه الذكاء الاصطناعي ونراجع النتائج خطوة بخطوة.\u003c\/p\u003e\n        \u003c\/article\u003e\n        \u003carticle class=\"vc-card\"\u003e\n          \u003cspan class=\"vc-label\"\u003eعندك خبرة بالفعل\u003c\/span\u003e\n          \u003ch3\u003eبتبرمج لكن النشر بيوقفك\u003c\/h3\u003e\n          \u003cp\u003eهتتعلم تثبّت وتشغّل شغلك على السيرفر، وتنتقل من مشروع على جهازك لموقع منشور.\u003c\/p\u003e\n        \u003c\/article\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003csection class=\"vc-section\"\u003e\n      \u003cspan class=\"vc-label\"\u003eشوف هنتعلم إيه\u003c\/span\u003e\n      \u003cdiv class=\"vc-toolbar\"\u003e\n        \u003ch2\u003eمحتوى الدورة\u003c\/h2\u003e\n        \u003cbutton type=\"button\" class=\"vc-textbtn\" id=\"vc-toggle\"\u003eفتح كل الأقسام\u003c\/button\u003e\n      \u003c\/div\u003e\n      \u003cp class=\"vc-muted\" id=\"vc-total\"\u003e\u003c\/p\u003e\n      \u003cdiv id=\"vc-curriculum\"\u003e\u003c\/div\u003e\n      \u003cp class=\"vc-note\"\u003eالقائمة تعرض الدروس المتاحة حاليًا في هذه الصفحة.\u003c\/p\u003e\n      \u003cdiv class=\"vc-center\" style=\"margin-top:28px\"\u003e\n        \u003ca class=\"vc-btn\" href=\"#vc-price\"\u003eابدأ الآن ←\u003c\/a\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003csection class=\"vc-section\"\u003e\n      \u003cspan class=\"vc-label\"\u003eمن الفكرة للتجربة\u003c\/span\u003e\n      \u003ch2\u003eمشاريع بنطبق عليها\u003c\/h2\u003e\n      \u003cp class=\"vc-muted\"\u003eشوف صور المشاريع وجرّب النسخ المتاحة منها.\u003c\/p\u003e\n      \u003cdiv class=\"vc-grid\" id=\"vc-projects\"\u003e\u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003csection class=\"vc-section\"\u003e\n      \u003cspan class=\"vc-label\"\u003eقبل ما تبدأ\u003c\/span\u003e\n      \u003ch2\u003eأسئلة بتتكرر\u003c\/h2\u003e\n      \u003cdetails\u003e\n        \u003csummary\u003eهل مناسب لغير المبرمجين؟\u003c\/summary\u003e\n        \u003cdiv class=\"vc-answer\"\u003eطبعًا، مش محتاجين اصلا معرفة بالبرمجة لان الذكاء الاصطناعي هو الى هيكتب الكود مش انت.\n        \u003c\/div\u003e\n      \u003c\/details\u003e\n      \u003cdetails\u003e\n        \u003csummary\u003eهل هقدر أنزّل المشاريع اللي طبقنا عليها؟\u003c\/summary\u003e\n        \u003cdiv class=\"vc-answer\"\u003eنعم، تقدر تحمّل السورس كود الخاص بالمشاريع اللي تم تطبيقها في الكورس.\u003c\/div\u003e\n      \u003c\/details\u003e\n      \u003cdetails\u003e\n        \u003csummary\u003eهل الوصول للمحتوى دائم؟\u003c\/summary\u003e\n        \u003cdiv class=\"vc-answer\"\u003eنعم، الوصول لمحتوى الكورس دائم.\u003c\/div\u003e\n      \u003c\/details\u003e\n      \u003cdetails\u003e\n        \u003csummary\u003eالكورس مسجل ولا لايف؟\u003c\/summary\u003e\n        \u003cdiv class=\"vc-answer\"\u003eالكورس مسجل وبتوصل له على منصتنا التعليمية، وأي تحديث للمحتوى هيوصلك مجانًا.\u003c\/div\u003e\n      \u003c\/details\u003e\n      \u003cdetails\u003e\n        \u003csummary\u003eهل في تحديثات؟\u003c\/summary\u003e\n        \u003cdiv class=\"vc-answer\"\u003eإن شاء الله بيتم تحديث المحتوى بشكل مستمر، والتحديثات متاحة للمشتركين مجانًا.\u003c\/div\u003e\n      \u003c\/details\u003e\n      \u003cdetails\u003e\n        \u003csummary\u003eهل بتوفروا استرداد للمال؟\u003c\/summary\u003e\n        \u003cdiv class=\"vc-answer\"\u003eلا نوفر استردادًا بعد الوصول لمحتوى الكورس، لأنك بتقدر تحمّل السورس كود للمشاريع، وتكلفة\n          الاكواد الجاهزة دي اغلي بكتير من سعر الكورس. فيرجي مراجعة المحتوى والتفاصيل قبل الاشتراك..\u003c\/div\u003e\n      \u003c\/details\u003e\n      \u003cdetails\u003e\n        \u003csummary\u003eهل بتوفروا دعم فني؟\u003c\/summary\u003e\n        \u003cdiv class=\"vc-answer\"\u003eالكورس لا يشمل دعمًا فنيًا فرديًا أو تنفيذ أفكار المشتركين، لأن كل مشترك عنده مشروع عايز\n          ينفذه وله متطلبات مختلفة. هتتعلم إزاي تستعين بالذكاء الاصطناعي عشان يبنيلك الفكره الى انت عايزها وعشان كده مش\n          محتاج دعم فني لان الذكاء الاصطناعي هيعملك كل حاجه احنا هنعلم فى الكورس ازاي تبني الفكره صح وازاي تنشرها سواء\n          هي موقع او تطبيق وهنعرفك كل حاجه انت المفروض تعرفها عشان تنفذ فكرتك.\u003c\/div\u003e\n      \u003c\/details\u003e\n      \u003cdiv class=\"vc-center\" style=\"margin-top:28px\"\u003e\n        \u003ca href=\"#vc-price\" class=\"vc-btn\"\u003eشوف السعر واشترك ←\u003c\/a\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003csection class=\"vc-section\"\u003e\n      \u003ch2\u003eجميع طرق الدفع متاحة\u003c\/h2\u003e\n      \u003cdiv class=\"vc-payments\"\u003e\n        \u003cspan\u003e💳 فيزا\u003c\/span\u003e\n        \u003cspan\u003e💳 بطاقات مدى\u003c\/span\u003e\n        \u003cspan\u003e🍎 Apple Pay\u003c\/span\u003e\n        \u003cspan\u003e📱 محفظة \/ فودافون كاش \/ إنستاباي\u003c\/span\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"vc-two\"\u003e\n        \u003carticle class=\"vc-card\"\u003e\n          \u003ch3\u003eالشراء من دول الخليج العربي\u003c\/h3\u003e\n          \u003cp\u003e💱 يتم الدفع داخل المتجر بالجنيه المصري، ويتم الخصم بما يعادله بالريال السعودي أو عملة بلدك حسب سعر الصرف\n            لدى جهة الدفع.\u003c\/p\u003e\n        \u003c\/article\u003e\n        \u003carticle class=\"vc-card\"\u003e\n          \u003ch3\u003eالدفع الدولي والمساعدة\u003c\/h3\u003e\n          \u003cp\u003e🌍 متاح جميع طرق الدفع الدولية وايضا ابل باي تقبل الدفع من جميع انحاء العالم، وبوابة دفع إضافية عبر PayPal\n            تشمل فيزا أيضًا.\u003c\/p\u003e\n          \u003ca class=\"vc-project-link\" href=\"https:\/\/ahmedelserafy.com\/checkout.php\" target=\"_blank\" rel=\"noopener\"\u003ePayPal\n            \/ فيزا ↗\u003c\/a\u003e\n          \u003cp\u003eيمكنك التواصل عبر واتساب للمساعدة في الدفع.\u003c\/p\u003e\n          \u003ca id=\"vc-whatsapp\" hidden class=\"vc-project-link\" target=\"_blank\" rel=\"noopener\"\u003eتواصل عبر واتساب ↗\u003c\/a\u003e\n        \u003c\/article\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003csection class=\"vc-section\" id=\"vc-price\"\u003e\n      \u003cdiv class=\"vc-center\"\u003e\n        \u003cspan class=\"vc-label\"\u003eخطوتك الأولى تبدأ هنا\u003c\/span\u003e\n        \u003ch2\u003eاشترك في كورس Vibe Coding\u003c\/h2\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"vc-pricebox\"\u003e\n        \u003cspan class=\"vc-label\"\u003eوصول دائم • تحديثات مجانية\u003c\/span\u003e\n        \u003ch3\u003eمن أول فكرة… لحد مشروعك\u003c\/h3\u003e\n        \u003cdiv class=\"vc-old\"\u003eقبل الخصم: \u003cdel id=\"vc-before\"\u003eأضف السعر بالجنيه المصري\u003c\/del\u003e\n\u003c\/div\u003e\n        \u003cdiv class=\"vc-price\" id=\"vc-after\"\u003eأضف السعر بالجنيه المصري\u003c\/div\u003e\n        \u003cp class=\"vc-currency-note\" id=\"vc-usd\" hidden\u003eبما يعادل \u003cstrong\u003e\u003c\/strong\u003e دولار أمريكي تقريبًا\u003c\/p\u003e\n        \u003cp class=\"vc-muted\"\u003eدروس مسجلة + تحميل أكواد المشاريع\u003c\/p\u003e\n        \u003ca class=\"vc-btn\" id=\"vc-buy\" hidden\u003eاشتري الآن ←\u003c\/a\u003e\n        \u003cp class=\"vc-note\" id=\"vc-unconfigured\"\u003eسيُتاح زر الشراء بعد إضافة رابط الاشتراك.\u003c\/p\u003e\n        \u003cdiv class=\"vc-coupon\"\u003e\n          \u003cdiv\u003e\n            \u003csmall\u003eكوبون الخصم\u003c\/small\u003e\u003cbr\u003e\n            \u003ccode id=\"vc-code\"\u003eأضف الكوبون\u003c\/code\u003e\n          \u003c\/div\u003e\n          \u003cbutton type=\"button\" class=\"vc-textbtn\" id=\"vc-copy\" disabled\u003eنسخ الكوبون\u003c\/button\u003e\n        \u003c\/div\u003e\n        \u003cp class=\"vc-status\" id=\"vc-copy-status\" role=\"status\" aria-live=\"polite\"\u003e\u003c\/p\u003e\n        \u003cp class=\"vc-note\"\u003eانسخ الكوبون وأدخله عند الدفع. راجع السعر النهائي قبل تأكيد الشراء.\u003c\/p\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003cfooter class=\"vc-footer\"\u003eVibe Coding — فكرتك تبدأ بخطوة.\u003c\/footer\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n  (function () {\n    'use strict';\n\n    \/\/ EDIT HERE: prices are display text; Shopify checkout determines the actual price and discount.\n    const CONFIG = {\n      \/\/ أسعار العرض فقط. السعر الفعلي والخصم يتحددان في منتج Shopify.\n      beforePrice: '5999',\n      afterPrice: '2999',\n      usdEquivalent: '59',\n      coupon: 'V50',\n      buyUrl: 'https:\/\/store.ahmedelserafy.com\/cart\/50766834401505:1',\n      whatsappUrl: 'https:\/\/api.whatsapp.com\/send?phone=201070512345\u0026text=%D9%85%D8%AD%D8%AA%D8%A7%D8%AC%20%D9%85%D8%B3%D8%A7%D8%B9%D8%AF%D8%A9%20%D8%A8%D8%AE%D8%B5%D9%88%D8%B5%20%D9%83%D9%88%D8%B1%D8%B3%20%D8%A7%D9%84%D9%81%D8%A7%D9%8A%D8%A8%20%D9%83%D9%88%D8%AF%D9%8A%D9%86%D8%AC',\n\n      \/\/ رابط MP4 مباشر، أو رابط YouTube بصيغة:\n      \/\/ https:\/\/www.youtube.com\/embed\/VIDEO_ID\n      videoUrl: `\u003ciframe src=\"https:\/\/player.mediadelivery.net\/embed\/608307\/2813e1fd-6f97-43d4-91cc-b59c844577f7?autoplay=ture\u0026loop=false\u0026muted=true\u0026preload=true\u0026responsive=true\" loading=\"lazy\" style=\"border:0;position:absolute;top:0;height:100%;width:100%;\" allow=\"accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;fullscreen;\" allowfullscreen=\"true\"\u003e\u003c\/iframe\u003e`,\n\n      \/\/ كود iframe للفيديو الرئيسي (سيتم استخدامه بدلاً من videoUrl في حال تمت إضافته)\n      mainVideoIframe: ``,\n\n      \/\/ أضف صور المشاريع وروابط التجربة هنا.\n      projects: [\n        {\n          title: 'المشروع الأول',\n          description: 'مشروع سيستم متكامل مبيعات ومشتريات ومتجر الكتروني - وبيع منتجات رقمية',\n          videoIframe: `\u003ciframe src=\"https:\/\/player.mediadelivery.net\/embed\/608307\/be51aff0-27ac-43d4-b87d-8d3fcc970291?autoplay=false\u0026loop=false\u0026muted=false\u0026preload=false\u0026responsive=true\" loading=\"lazy\" style=\"border:0;position:absolute;top:0;height:100%;width:100%;\" allow=\"accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;fullscreen;\" allowfullscreen=\"true\"\u003e\u003c\/iframe\u003e`,\n          demo: ''\n        },\n        {\n          title: 'تطبيق ادارة المصروفات',\n          description: 'تطبيق لإدارة المصروفات ومتابعة النفقات اليومية.',\n          image: '',\n          videoIframe: `\u003ciframe src=\"https:\/\/player.mediadelivery.net\/embed\/608307\/fc8e21a5-44d4-4e2a-80a5-18d6caf083be?autoplay=false\u0026loop=false\u0026muted=false\u0026preload=false\u0026responsive=true\" loading=\"lazy\" style=\"border:0;position:absolute;top:0;height:100%;width:100%;\" allow=\"accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;fullscreen;\" allowfullscreen=\"true\"\u003e\u003c\/iframe\u003e`,\n          demo: ''\n        },\n      ]\n    };\n    \/\/ Screenshot contains 7 introductory lessons + 8 visible project lessons; add remaining lessons when available.\n    const sections = [\n      {\n        title: 'البداية',\n        lessons: [\n          ['الإجابة على بعض الأسئلة', 7],\n          ['تكاليف شراء السيرفر والدومين (تكاليف التشغيل في المرحلة الأخيرة)', 12],\n          ['التكاليف في حالة عمل تطبيق', 3],\n          ['مميزات لازم تعمل حسابها في بداية أي مشروع', 21],\n          ['التعرف على بعض المصطلحات', 10],\n          ['تثبيت سيرفر محلي لبناء المشروع عليه', 5],\n          ['تثبيت أنتي جرافيتي', 3],\n          ['تأكيد قبل البدأ فى المشروع الاول', 1]\n        ]\n      },\n      {\n        title: 'المشروع الأول',\n        lessons: [\n          ['المشروع الأول الجزء الأول', 86],\n          ['المشروع الأول الجزء الثاني', 72],\n          ['المشروع الأول الجزء الثالث', 5],\n          ['فيديو شراء الاستضافة والدومين وتركيب الموقع وربط الإيميل', 19],\n          ['المشروع الأول الجزء الرابع', 42],\n          ['ضبط إعدادات الجدولة – Cron Jobs وظائف كرون ', 7],\n          ['ربط بوابة الدفع باي بال PayPal وتحسين بعض الإعدادات', 18],\n          [' ربط بوابة الدفع باي موب Paymob بالنظام', 5],\n          [' تحميل ملفات المشروع بالكامل', 1],\n          [' ماذا بعد الانتهاء', 3]\n        ]\n      },\n      {\n        title: 'المشروع الثاني بناء تطبيق',\n        lessons: [\n          ['التعرف على كودكس Codex و الموديل الجديد GPT 6 Astra استرا', 4],\n          ['التعرف على استهلاك كودكس', 5],\n          ['بناء التطبيق الجزء الاول', 50],\n          ['ربط فاير بيز Firebase لارسال الاشعارات للمستخدمين', 10],\n          ['تثبيت التطبيق على هاتفك بطريقة مباشره وسهله', 4],\n          ['نقل المشروع للعمل على السيرفر الحقيقي واختباره  - وتحميل جميع ملفات المشروع', 10]\n        ]\n      }\n    ];\n\n    const root = document.getElementById('vc-course');\n    if (!root || root.dataset.ready) return;\n    root.dataset.ready = 'true';\n    const q = s =\u003e root.querySelector(s);\n\n    function url(value) {\n      try {\n        const u = new URL(value, location.origin);\n        return ['https:', 'http:'].includes(u.protocol) \u0026\u0026 value ? u.href : '';\n      } catch (e) {\n        return '';\n      }\n    }\n    let count = 0, total = 0;\n\n    sections.forEach((section, index) =\u003e {\n      const d = document.createElement('details');\n      d.className = 'vc-module';\n      d.open = true;\n      const s = document.createElement('summary');\n      s.textContent = section.title + ' · ' + section.lessons.length + ' دروس';\n      d.append(s);\n\n      section.lessons.forEach(([title, minutes], i) =\u003e {\n        count++;\n        total += minutes;\n        const row = document.createElement('div');\n        row.className = 'vc-lesson';\n        const name = document.createElement('span');\n        name.textContent = (index + 1) + '.' + (i + 1) + '  ' + title;\n        const time = document.createElement('span');\n        time.className = 'vc-duration';\n        time.textContent = minutes + ' دقيقة';\n        row.append(name, time);\n        d.append(row);\n      });\n\n      q('#vc-curriculum').append(d);\n    });\n    q('#vc-total').textContent = sections.length + ' أقسام · ' + count + ' درس معروض · ' + total + ' دقيقة';\n\n    q('#vc-toggle').addEventListener('click', () =\u003e {\n      const ds = [...root.querySelectorAll('.vc-module')];\n      const open = ds.some(d =\u003e !d.open);\n      ds.forEach(d =\u003e d.open = open);\n    });\n    root.querySelectorAll('.vc-module').forEach(d =\u003e {\n      d.addEventListener('toggle', () =\u003e {\n        q('#vc-toggle').textContent = [...root.querySelectorAll('.vc-module')].every(x =\u003e x.open) ? 'طي كل الأقسام' : 'فتح كل الأقسام';\n      });\n    });\n    \/\/ Handle Projects Generation\n    CONFIG.projects.forEach(p =\u003e {\n      const card = document.createElement('article');\n      card.className = 'vc-card';\n      const preview = document.createElement('div');\n      preview.className = 'vc-preview';\n\n      if (p.videoIframe) {\n        preview.innerHTML = p.videoIframe;\n      } else if (url(p.image)) {\n        const img = document.createElement('img');\n        img.src = url(p.image);\n        img.alt = p.title;\n        img.loading = 'lazy';\n        preview.append(img);\n      } else {\n        preview.textContent = 'مكان صورة المشروع';\n      }\n\n      const h = document.createElement('h3');\n      h.textContent = p.title;\n      const desc = document.createElement('p');\n      desc.textContent = p.description;\n      card.append(preview, h, desc);\n\n      if (url(p.demo)) {\n        const a = document.createElement('a');\n        a.href = url(p.demo);\n        a.target = '_blank';\n        a.rel = 'noopener';\n        a.className = 'vc-project-link';\n        a.textContent = 'جرّب المشروع ↗';\n        card.append(a);\n      }\n\n      q('#vc-projects').append(card);\n    });\n    if (CONFIG.beforePrice) q('#vc-before').textContent = CONFIG.beforePrice + ' جنيه مصري';\n    if (CONFIG.afterPrice) q('#vc-after').textContent = CONFIG.afterPrice + ' جنيه مصري';\n    if (CONFIG.usdEquivalent) {\n      q('#vc-usd strong').textContent = CONFIG.usdEquivalent;\n      q('#vc-usd').hidden = false;\n    }\n\n    if (url(CONFIG.buyUrl)) {\n      q('#vc-buy').href = url(CONFIG.buyUrl);\n      q('#vc-buy').hidden = false;\n      q('#vc-unconfigured').hidden = true;\n    }\n    if (url(CONFIG.whatsappUrl)) {\n      q('#vc-whatsapp').href = url(CONFIG.whatsappUrl);\n      q('#vc-whatsapp').hidden = false;\n    }\n\n    if (CONFIG.coupon) {\n      q('#vc-code').textContent = CONFIG.coupon;\n      q('#vc-copy').disabled = false;\n    }\n    q('#vc-copy').addEventListener('click', async () =\u003e {\n      try {\n        await navigator.clipboard.writeText(CONFIG.coupon);\n        q('#vc-copy-status').textContent = 'تم نسخ الكوبون ✓';\n      } catch (e) {\n        q('#vc-copy-status').textContent = 'انسخ الكوبون يدويًا: ' + CONFIG.coupon;\n      }\n    });\n    let mainVidHTML = CONFIG.mainVideoIframe || '';\n    if (!mainVidHTML \u0026\u0026 CONFIG.videoUrl \u0026\u0026 CONFIG.videoUrl.trim().startsWith('\u003c')) {\n      mainVidHTML = CONFIG.videoUrl;\n    }\n    if (mainVidHTML) {\n      q('#vc-video').innerHTML = mainVidHTML;\n    } else if (url(CONFIG.videoUrl)) {\n      const vurl = url(CONFIG.videoUrl);\n      const v = document.createElement(\/\\.mp4(?:\\?|$)\/i.test(vurl) ? 'video' : 'iframe');\n      if (v.tagName === 'VIDEO') {\n        v.controls = true;\n        v.preload = 'metadata';\n      } else {\n        v.title = 'تفاصيل كورس Vibe Coding';\n        v.allow = 'fullscreen; picture-in-picture';\n        v.setAttribute('allowfullscreen', '');\n        v.loading = 'lazy';\n      }\n      v.src = vurl;\n      q('#vc-video').replaceChildren(v);\n    }\n    root.querySelectorAll('a[href=\"#vc-price\"]').forEach(a =\u003e {\n      a.addEventListener('click', e =\u003e {\n        e.preventDefault();\n        q('#vc-price').scrollIntoView({\n          behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',\n          block: 'start'\n        });\n      });\n    });\n    const animatedBlocks = root.querySelectorAll('.vc-hero, .vc-section');\n    const prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReducedMotion || !('IntersectionObserver' in window)) {\n      animatedBlocks.forEach(block =\u003e block.classList.add('vc-is-visible'));\n    } else {\n      const revealObserver = new IntersectionObserver(\n        (entries, observer) =\u003e {\n          entries.forEach(entry =\u003e {\n            if (!entry.isIntersecting) return;\n            entry.target.classList.add('vc-is-visible');\n            observer.unobserve(entry.target);\n          });\n        },\n        { threshold: 0.12 }\n      );\n      animatedBlocks.forEach(block =\u003e revealObserver.observe(block));\n    }\n  })();\n\u003c\/script\u003e\n\n\u003clink href=\"https:\/\/cdn.jsdelivr.net\/npm\/@n8n\/chat\/dist\/style.css\" rel=\"stylesheet\"\u003e\n\n\u003cstyle\u003e\n  .chat-window-toggle {\n    margin-bottom: 57px;\n  }\n\u003c\/style\u003e\n\u003cscript type=\"module\"\u003e\n  import { createChat } from 'https:\/\/cdn.jsdelivr.net\/npm\/@n8n\/chat\/dist\/chat.bundle.es.js';\n\n  createChat({\n    webhookUrl: 'https:\/\/n8n.ahmedelserafy.com\/webhook\/181ad264-3ab7-448c-aba8-e8360456888f\/chat',\n    webhookConfig: {\n      method: 'POST',\n      headers: {}\n    },\n    target: '#n8n-chat',\n    mode: 'window',\n    chatInputKey: 'chatInput',\n    chatSessionKey: 'sessionId',\n    metadata: {},\n    defaultLanguage: 'ar',\n    initialMessages: [\n      'اهلا! 👋',\n      'عندك استفسار ايه فى الكورسات وانا اساعدك ؟'\n\n    ],\n    i18n: {\n      en: {\n        title: 'Hi there! 👋',\n        subtitle: \"Start a chat. We're here to help you 24\/7.\",\n        footer: '',\n        getStarted: 'New Conversation',\n        inputPlaceholder: 'Type your question..',\n      },\n    },\n    i18n: {\n      ar: {\n        title: 'اهلا وسهلا 👋',\n        subtitle: \"انا المساعد الذكي وظيفتي اجاوبك على اي استفسار عندك\",\n        footer: '',\n        getStarted: 'New Conversation',\n        inputPlaceholder: 'Type your question..',\n      },\n    },\n    enableStreaming: false,\n  });\n\n\n\u003c\/script\u003e","brand":"Serafy Store","offers":[{"title":"Default Title","offer_id":50766834401505,"sku":null,"price":5999.0,"currency_code":"EGP","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0796\/5173\/3729\/files\/CodexImageSep14_2026_09_27_11PM.png?v=1791297912","url":"https:\/\/store.ahmedelserafy.com\/products\/vibecoding","provider":"Serafy Store","version":"1.0","type":"link"}