# دستورالعمل اجرایی و سیستم طراحی وب‌سایت راویس ویزا
### Ravis Visa Web Engineering & Design System — Master Operational Manual
**نسخه:** 1.0.0 | **وضعیت:** سند اجرایی قطعی | **دامنه پوشش:** کلیه پروژه‌های وب راویس ویزا (`/root/Main/Work/Customer/RavizVisa/Web/`)

این سند قانون قطعی، چارچوب راهبردی و موتور اجرایی طراحی و توسعه وب‌سایت شرکت مهاجرتی **راویس ویزا (Ravis Visa)** است. این ساختار از ترکیب عمیق و هم‌افزایی مهارت‌های هسته (`babak-creative`, `auteur`, `scrollcraft`, `editorial-tech-hero`, `bilingual-web-build`, `taste-skill`, `ui-ux-pro-max`, `popular-web-designs`, `impeccable`) و ابزارهای توسعه تدوین شده تا فرآیند طراحی و پیاده‌سازی با بالاترین سطح استانداردهای بین‌المللی، بدون کپی‌کاری (Anti-Slop) و با هویت معتبر حقوقی اجرا گردد.

---

## ۱. هویت برند، راهبرد حقوقی و خطوط قرمز قطعی (Brand & Legal Core)

1. **مشخصات هویتی و ثبتی:**
   - **نام رسمی فارسی:** راویس ویزا
   - **نام رسمی انگلیسی:** Ravis Visa (دقیقاً با حرف `s`؛ استفاده از `z` ممنوع است).
   - **آدرس پیج اینستاگرام رسمی:** `https://instagram.com/ravisvisa`
   - **درگاه ارتباطی و اکشن قطعی (CTA):** منحصراً لینک مستقیم واتس‌اپ رسمی کانادا: `https://wa.me/16135122792`
   - **ایمیل دیسپچر و ارزیابی:** `ravisvisa@gmail.com`

2. **حوزه انحصاری جغرافیایی:**
   - وب‌سایت **منحصراً و فقط** به دو کشور **آمریکا 🇺🇸** و **کانادا 🇨🇦** اختصاص دارد. معرفی، اشاره یا پیشنهاد هر کشور دیگری اکیداً ممنوع است.

3. **مسیرهای اصلی و رسمی مهاجرتی:**
   - **ایالات متحده آمریکا:**
     * `NIW` (National Interest Waiver - نخبگان و پژوهشگران)
     * `EB-3` (کاری تخصصی و غیرتخصصی)
     * `H-1B` (ویزای کار تخصصی)
     * `Study Permit USA` (ویزای تحصیلی آمریکا)
     * `Visitor Visa` (ویزای توریستی آمریکا)
   - **کانادا:**
     * `Express Entry` (نیروی متخصص فدرال)
     * `Provincial Nominee Program (PNP)` و جاب آفر رسمی
     * `Study Permit Canada` (ویزای تحصیلی کانادا)
     * `Visitor Visa` (ویزای توریستی کانادا)

4. **خطوط قرمز و ممنوعیت‌های کپی‌کاری (Anti-Slop Immigration Rules):**
   - **ممنوعیت تام کلیشه‌های مهاجرتی:** استفاده از وکتورهای کارتونی پاسپورت، کره‌های زمین چرخان سه‌بعدی ارزان، آسمان‌های آبی گرادینتی کلیشه‌ای، برج‌های ایفل یا تصاویر بی‌ربط توریستی ممنوع است.
   - **ممنوعیت متن‌های ژنریک هوش مصنوعی:** عبارات توخالی نظیر «مهاجرت آسان و بدون دردسر»، «آینده خود را متحول کنید»، «صددرصد تضمینی» یا اعداد و آمارهای ساختگی (مانند ۹۹٪ قبولی ویزا بدون سند) ممنوع است.
   - **سیاست شماره تلفن:** هیچ شماره تماسی نباید به عنوان متن خام در سایت جهت تماس مستقیم تلفنی درج شود؛ تمامی مسیرهای ورودی باید از طریق دکمه استاندارد واتس‌اپ رسمی کانادا متصل شوند.
   - **ممنوعیت مشاوره باز و قیمت‌گذاری فرضی:** سایت یک پورتال حقوقی معتبر است، نه دکه قیمت‌دهی. متقاضیان باید به سوی فرم‌های ارزیابی دقیق یا چت مستقیم واتس‌اپ کانادا هدایت شوند.

---

## ۲. زبان بصری، پالت رنگی و تایپوگرافی بابک (Aesthetic DNA)

سایت راویس ویزا با زبان بصری **Cinematic Dark & Corporate Gold** همراه با ظرافت‌های مینی‌مال سوئیسی (Swiss Precision) طراحی می‌شود:

### ۲.۱. پالت توکن‌های رنگی (Color Tokens)
* **بوم و پس‌زمینه اصلی (Canvas / Background):**
  - شید تاریک عمیق شب: `#070E1A` (Dark Midnight Void)
  - پس‌زمینه کارت‌ها و لایه‌های رویی: `#0B1120` و `#111827`
* **رنگ سازمانی و لهجه‌های طلایی لوکس (Corporate Gold Accents):**
  - طلایی سلطنتی و معتبر برند: `#D4A343`
  - هایلایت و درخشش شامپاینی: `#F0CE80`
* **سطوح و کادرهای شیشه‌ای (Glassmorphism & Borders):**
  - مرزها: حاشیه ظریف ۱ پیکسلی با غلظت ملایم `border-white/10` یا `border-white/[0.07]`
  - بافت شیشه‌ای: `backdrop-blur-xl bg-white/[0.03]`
  - **قانون قطعی:** عدم استفاده از سایه‌ها یا درخشش‌های تند نئونی روی المان‌های ثابت. سایه فقط روی سطوح معلق و شناور (`modal`, `dropdown`, `hover`).
* **نشانگرهای وضعیت و راستی‌آزمایی (Status Badges):**
  - تایید پرونده، مدارک معتبر و وضعیت مثبت: سبز زمردی (`#16A34A` / پس‌زمینه محو `rgba(22, 163, 74, 0.1)`)
  - خطاهای رایج، ابطال شایعات و هشدارهای حقوقی (Reality Check): قرمز یاقوتی (`#D90429`)

### ۲.۲. استاندارد طلایی تایپوگرافی (Persian & Latin Typography)
1. **قلم رسمی فارسی:** انحصاری **وزیرمتن (Vazirmatn)** در اوزان کامل:
   - عناوین اصلی هیرو: `Vazirmatn-Black` یا `Bold` با کرنینگ کنترل‌شده.
   - زیرعنوان‌ها و برچسب‌های مهم: `Vazirmatn-SemiBold` و `Medium`.
   - متون بدنه و توضیحات: `Vazirmatn-Regular` (حداقل اندازه متن بدنه ۱۶ پیکسل، ارتفاع خط `1.6`).
2. **قلم ثانویه لاتین (برای اصطلاحات و کلمات انگلیسی):**
   - قلم‌های مدرن بدون سریف نظیر `Plus Jakarta Sans`, `Inter` یا `Space Grotesk`.
3. **قوانین صلب نگارش و کرنینگ RTL:**
   - ممنوعیت مطلق شکستن یا اسپان کردن تک‌تک حروف فارسی در انیمیشن‌ها (انفصال حروف).
   - ممنوعیت اعمال `letter-spacing` مثبت روی متون فارسی (باعث گسستگی خطوط به هم‌پیوسته می‌شود).
   - رعایت دقیق نیم‌فاصله‌ها (`\u200c`) در تمامی افعال و ترکیبات (مانند: پرونده‌های مهاجرتی، ارزیابی‌شده، مشاوران).
   - استفاده انحصاری از خصوصیات منطقی CSS (`margin-inline`, `padding-inline`, `inset-inline`, `text-start`, `text-end`).

---

## ۳. معماری اطلاعات و بخش‌های اصلی سایت (Section Architecture)

وب‌سایت باید به صورت یک روایت منسجم، مرحله‌به‌مرحله و با ریتم مشخص ساخته شود:

```
[1. Floating Precision Nav] ──> ناوبری شناور با سنتر دقیق و دکمه اکشن واتس‌اپ
           │
[2. Editorial Tech Hero]   ──> هیرو اسپیلیت با ویدیوی لوکس، تیتر دوگانه و مارکی پیوسته
           │
[3. Dual-Country Portal]   ──> درگاه اسپلیت تعاملی ۵۰/۵۰ (آمریکا 🇺🇸 و کانادا 🇨🇦)
           │
[4. Asymmetric Bento Grid] ──> ماتریس برنامه‌های رسمی (NIW, EB-3, Job Offer, Study)
           │
[5. Live Eligibility Scanner] ──> ماشین ارزیابی هوشمند تعاملی (The One Live Thing)
           │
[6. Legal Reality vs Myth]  ──> باجه شفافیت حقوقی و راستی‌آزمایی شرایط واقعی
           │
[7. WhatsApp Direct Bridge] ──> اتصال سریع، فرم خلاصه پرونده و دکمه مستقیم کانادا
           │
[8. Cinematic Full Footer]  ──> فوتر تمام‌عرض با امضای برند و لینک‌های رسمی
```

### شرح تفصیلی بخش‌ها:

1. **ناوبری فوق دقیق (Header / Nav):**
   - قرارگیری لگوتایپ رسمی راویس ویزا در سمت راست.
   - منوی پیوندها در سنتر ریاضی صفحه (`absolute inset-x-0 mx-auto w-fit` تا در RTL دچار انحراف ترنسفورم نشود).
   - نشانگر پالس زنده وضعیت مشاوران (Active WhatsApp Gateway) و دکمه کپسولی تماس سریع.

2. **هیرو سوئیسی مدرن (Editorial Tech Hero):**
   - گرید ۱۲ ستونه واکنش‌گرا با استیج مدیا (ویدیو یا بوم سه‌بعدی تعاملی با فال‌بک WebP محلی).
   - تیتر دوگانه تأثیرگذار: خط ۱ توپر سنگین (`font-black`)، خط ۲ استروک اوت‌لاین ظریف (`-webkit-text-stroke: 1.5px`).
   - مارکی روان و پیوسته زیر هیرو درون کانتینر صریح `dir="ltr"` با تکرار برنامه‌ها بدون برخورد کلمات.

3. **درگاه دوگانه انتخابی کشورها (Dual-Country Portal):**
   - در دسکتاپ: دو ستون مساوی ۵۰/۵۰ برای آمریکا و کانادا (`h-[100dvh]` یا سکشن مجزا).
   - در موبایل: ساختار صریح `grid-cols-1 grid-rows-2` تا هیچ پنلی به زیر صفحه پرتاب نشود.
   - جهت‌گیری فلش‌ها متناسب با راست‌به‌چپ (فلش به چپ `←` در پنل فارسی).

4. **ماتریس نامتقارن بنتو (Asymmetric Bento Grid):**
   - فرار از کارت‌های متقارن و خسته‌کننده. کارت‌های شاخص ۲ ستونه برای برنامه‌های کلیدی (NIW و اکسپرس انتری) و کارت‌های ۱ ستونه برای سایر برنامه‌ها.
   - کارت‌ها با روکش شیشه‌ای، برچسب‌های متالیک و نمایش ریزشرایط هر برنامه.

5. **ماشین ارزیابی زنده شرایط (The One Live Thing):**
   - بر اساس اصل چهارم `taste-skill`: داشتن یک المان زنده تعاملی که کاربر بتواند بدون پر کردن فرم‌های خسته‌کننده طولانی، مقطع تحصیلی، سن، سطح زبان و سابقه کار خود را مشخص کرده و بلافاصله مسیر پیشنهادی به همراه پیش‌نویس متن جهت ارسال به واتس‌اپ کارشناسان را دریافت کند.

6. **شفافیت حقوقی و باطل‌کننده باورهای غلط (Myth vs Reality):**
   - نمایش کارت‌های دوگانه از اشتباهات مرگبار متقاضیان (با رنگ قرمز یاقوتی) در برابر رویکرد رسمی حقوقی راویس ویزا (با رنگ سبز زمردی و طلایی).

7. **پل ارتباطی مستقیم واتس‌اپ کانادا (WhatsApp Bridge):**
   - دکمه‌های بزرگ با هندسه پیل (`rounded-full`)، انیمیشن آرام پالس و لینک مستقیم به `https://wa.me/16135122792`.

8. **فوتر سینمایی (Full-Width Designed Close):**
   - نام راویس ویزا در مقیاس بسیار بزرگ و کم‌رنگ در انتهای صفحه، آدرس اینستاگرام، سلب مسئولیت حقوقی و نشان استاندارد.

---

## ۴. مهندسی انیمیشن، تعاملات و فیزیک حرکتی (Motion & Performance)

1. **قوانین صلب GSAP و React 18/19:**
   - همواره کلیه تایم‌لاین‌های انیمیشن در کامپوننت‌ها درون `gsap.context()` کپسوله شوند و در پاکسازی هوک `ctx.revert()` اجرا گردد.
   - استفاده اجباری از `clearProps: 'all'` در انتهای انیمیشن‌های ورودی تاکہ در صورت بروز وقفه، المان‌ها مخفی نمانند.
2. **منحنی‌های شتاب و سرعت:**
   - انیمیشن‌های ورود: فقط `ease-out` یا فیزیک فنری نرم (`spring(damping: 20, stiffness: 100)`). استفاده از `ease-in` در ورود المان‌ها ممنوع است.
   - هاورها و ترنزیشن دکمه‌ها: زمان‌بندی دقیق بین ۱۵۰ تا ۲۵۰ میلی‌ثانیه.
3. **پایداری هندسه دکمه‌های کپسولی (Pill Button Seam Protection):**
   - برای پیشگیری از پرش لبه‌های مستطیلی در مرورگرهای وب‌کیت در دکمه‌های `rounded-full` هنگام اجرای ترنزیشن، الزامی است:
     ```css
     .btn-pill {
       border-radius: 9999px;
       isolation: isolate;
       -webkit-mask-image: -webkit-radial-gradient(white, black);
     }
     .btn-pill::before {
       border-radius: inherit;
     }
     ```
4. **اسکرول روان سینمایی (Smooth Scrollytelling):**
   - یکپارچه‌سازی با کتابخانه Lenis برای حرکت مخملی اسکرول.
   - الزام پشتیبانی از `@media (prefers-reduced-motion)` با کاهش ترنسفورم‌ها و حفظ سادگی.

---

## ۵. اکوسیستم ابزارها، CLI و دارایی‌های محلی (Tooling & Asset Pipeline)

1. **مدیریت دارایی‌ها - قانون استقلال ۱۰۰٪ از CDN خارجی (Zero-CDN Policy):**
   - به هیچ وجه نباید از فونت‌ها یا اسکریپت‌های هاست‌شده روی سرورهای مسدود یا فیلترشونده (مانند Google Fonts یا cdnjs بدون پشتیبان) به عنوان وابستگی انحصاری استفاده شود.
   - فونت‌های وزیرمتن به صورت WOFF2 و TTF در پوشه `public/fonts/` مستقر می‌شوند.
   - تمامی تصاویر و بافت‌ها به صورت WebP بهینه‌شده محلی در `public/images/` ذخیره می‌گردند.
2. **استفاده از 21st CLI (`l3al3ak021`):**
   - جستجوی کامپوننت‌های مدرن: `21st search <query> --limit 5`
   - دریافت کدهای مرجع و کامپوننت‌های دستچین: `21st get <id>`
   - بازبینی کیفیت کد با ابزار ریویو: `21st review <path>`
3. **اسکریپت‌های بازرسی و ضد اسلوپ (`taste-skill`):**
   - ارزیابی جهت بصری: `node /root/.hermes/skills/creative/taste-skill/scripts/draw.mjs`
   - اسکن کدهای زائد و ساختار نامناسب: `node /root/.hermes/skills/creative/taste-skill/scripts/lint.mjs`
   - بازرسی در رزولوشن‌های واقعی مرورگر (1440, 768, 390): `node /root/.hermes/skills/creative/taste-skill/scripts/inspect.mjs`
4. **کاتالوگ دیزاین سیستم (`ui-ux-pro-max`):**
   - استخراج الگوهای برتر UI/UX:
     ```bash
     python3 /root/.hermes/skills/software-development/ui-ux-pro-max/scripts/search.py "legal consulting corporate" --domain style
     ```

---

## ۶. گیت‌های پذیرش نهایی و ارزیابی کیفیت (Pre-Flight Quality Gate)

هیچ کدی به عنوان نسخه نهایی تحویل داده نمی‌شود مگر آنکه تمامی گزینه‌های چک‌لیست زیر را پاس کند:

- [ ] **بررسی عناوین و تیترها:** هیچ تیتری در هیچ‌یک از عرض‌های ۳۹۰، ۷۶۸ و ۱۴۴۰ پیکسل بیش از ۲ خط نشود.
- [ ] **عدم وجود خطای افقی (Zero Horizontal Overflow):** بوم صفحه در موبایل به هیچ عنوان اسکرول افقی نخورد (`overflow-x: clip`).
- [ ] **تایپوگرافی بدون نقص:** عدم انفصال کاراکترهای فارسی، عدم استفاده از letter-spacing روی فونت فارسی، استفاده از خط الرسم تمیز با نیم‌فاصله‌های استاندارد.
- [ ] **صحت ارجاعات و مسیرها:** درگاه واتس‌اپ مستقیماً به `https://wa.me/16135122792` متصل باشد؛ عدم وجود هرگونه شماره تلفن متنی خام.
- [ ] **انحصار کشورها:** فقط آمریکا 🇺🇸 و کانادا 🇨🇦 روی تمامی بنرها و مسیرها درج شده باشد.
- [ ] **تست در مرورگر زنده:** رندر بدون خطای کنسول در ابزار مرورگر و تایید زیبایی و خوانایی کنتراست رنگی (حداقل نسبت ۴.۵ به ۱).
- [ ] **تحویل دوگانه در صورت نیاز (Dual-Delivery):** ساختار هم به عنوان یک پکیج استاتیک آماده اجرای محلی (`index.html`) و هم به صورت کدهای مدرن ماژولار React/Tailwind در دسترس باشد.