feat: add chapter 05-design-and-ux specs

chapters/05-design-and-ux/06-lesson-components-states-animations/spec.md

@@ -0,0 +1,105 @@
+# مشخصات درس‌نامه: کامپوننت‌ها، وضعیت‌ها و انیمیشن (Components, Interactive States & Animations)
+- **شناسه در سیلابس:** `L5.7`
+- **فصل:** فصل ۵: طراحی تجربه و هویت محصول (Ch 5)
+- **نوع محتوا:** 📘 درس‌نامه متنی
+- **زمان تقریبی مطالعه:** ۱۵ دقیقه
+- **پیش‌نیازهای مستقیم:** `L5.6` (طراحی واکنش‌گرا)
+
+---
+
+## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)
+دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:
+- [ ] **درک کند (Understand):** چرا یک کامپوننت وب (دکمه، کارت، اینپوت، مودال) یک شکل گرافیکی مرده نیست، بلکه یک ماشین وضعیت (State Machine) چندحالته است.
+- [ ] **تحلیل/ارزیابی کند (Evaluate):** پنج وضعیت ضروری رابط کاربری شامل: **حالت پیش‌فرض (Default)، شناور (Hover)، فشرده‌شده (Active)، فوکوس کیبورد (Focus)، و حالت در حال بارگذاری/غیرفعال (Loading/Disabled)** را بررسی و مدیریت کند.
+- [ ] **به‌کار ببندد (Apply):** انیمیشن‌های میکرو و گذارهای نرم و سریع (Micro-Animations: بین ۱۵۰ تا ۲۵۰ میلی‌ثانیه) را برای زنده کردن کارت‌ها و دکمه‌های پروژه محوری پیاده کند.
+- [ ] **به‌کار ببندد (Apply):** آیکون‌های مدرن، سبک و هماهنگ را از مراجع ترند جهانی به ویژه **Lucide Icons (https://lucide.dev/)** و **Tabler Icons** در اجزای پورتفولیو و پنل ادمین ادغام نماید.
+- [ ] **تحلیل/ارزیابی کند (Evaluate):** خطای استفاده از انیمیشن‌های نمایشی و طولانی را تشخیص داده و مرز میان انیمیشن کاربردی با اغراق‌های آزاردهنده را رعایت کند.
+
+---
+
+## ۲. محدوده و مرزهای محتوا (Scope & Boundaries)
+
+### آنچه باید پوشش داده شود (In-Scope):
+1. **آناتومی یک کامپوننت تعاملی زنده:**
+   * کامپوننتی که در برابر لمس یا اشاره موس کاربر واکنشی نشان ندهد، حس یک صفحه پرینت‌شده کاغذی و بی‌کیفیت را القا می‌کند.
+2. **پنج وضعیت حیاتی رابط کاربری (The 5 Essential States):**
+   * **۱. پیش‌فرض (Idle / Default):** ظاهر نرمال و باوقار کامپوننت در حالت استراحت.
+   * **۲. اشاره‌گر موس (Hover):** تغییر ملایم روشنایی، هاله نورانی دور کارت یا بالا آمدن نامحسوس (`translate-y-[-2px]`).
+   * **۳. فشرده‌شدن (Active / Pressed):** کوچک شدن جزئی مقیاس (`scale-[0.98]`) که حس فیزیکی کلیک شدن کلید را تداعی می‌کند.
+   * **۴. فوکوس دسترسی‌پذیری (Focus / Focus-Visible):** حلقه درخشان دور اینپوت یا دکمه هنگام جابجایی با کلید Tab برای کاربران کیبورد.
+   * **۵. در حال بارگذاری و قفل (Loading & Disabled):** چرخش اسپینر انیمیشنی، کم‌رنگ شدن دکمه (`opacity-50`) و غیرفعال شدن کلیک مجدد جهت پیشگیری از ارسال تکراری فرم‌ها.
+3. **فلسفه انیمیشن‌های میکرو (Micro-Animations):**
+   * راز محصولات میلیاردی اپل و استارتاپ‌های پیشتاز: استفاده از کلاس طلایی `transition-all duration-200 ease-in-out`.
+   * تفاوت انیمیشن‌های چابک و سریع (زیر ۲۵۰ میلی‌ثانیه) با انیمیشن‌های نمایشی سنگین که وقت کاربر را تلف می‌کنند.
+4. **جعبه‌ابزار آیکون‌های مدرن: پیشتازی Lucide Icons:**
+   * معرفی **Lucide Icons (lucide.dev)** به عنوان زبان رسمی آیکون در پروژه‌های Next.js و کامپوننت‌های shadcn/ui (آیکون‌های تمیز، هماهنگ، خطی و بسیار سبک).
+   * معرفی **Tabler Icons** به عنوان گزینه آلترناتیو قدرتمند.
+   * انتخاب آیکون‌های پروژه پورتفولیو: `ExternalLink` (لینک دموی زنده)، `Github` (کدها)، `Edit` (ویرایش پروژه)، `Trash2` (حذف)، و `Settings` (پنل سئو).
+5. **پیاده‌سازی تعاملات در پروژه پورتفولیوی پویا:**
+   * کارت‌های پروژه‌ها: تغییر رنگ بوردر به سفید ملایم هنگام هاور همراه با انیمیشن نرم.
+   * دکمه ذخیره در پنل ادمین: تبدیل به حالت اسپینر لودینگ هنگام ثبت در دیتابیس.
+   * مودال جزئیات: باز شدن با محو شدن پس‌زمینه شیشه‌ای (`backdrop-blur-md`).
+6. **کال‌اوت‌های Quera:**
+   * `<details class="violet">`: چرا Lucide Icons به انتخاب شماره یک ایجنت‌های وایب کدینگ در سال‌های اخیر تبدیل شده است؟
+   * `<details class="red">`: تله انیمیشن‌های سیرکی؛ انیمیشن برای دادن بازخورد است نه خودنمایی! هر انیمیشنی که بیش از ۳۰۰ میلی‌ثانیه طول بکشد، کاربر را کلافه می‌کند.
+
+### آنچه نباید وارد آن شویم (Out-of-Scope):
+- کتابخانه‌های انیمیشن سنگین سه‌بعدی نظیر Three.js یا کدهای پیچیده وب‌جی‌ال (در فصول پیشرفته بررسی می‌شود).
+- رندرینگ فریم‌ورک‌های انیمیشن ری‌اکتی مثل Framer Motion به صورت عمیق (در فصل ۶ به قدر کفایت لمس خواهد شد).
+
+---
+
+## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)
+
+| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
+| :--- | :--- | :--- |
+| Component States | وضعیت‌های کامپوننت | حالت‌های بصری گوناگون یک عنصر در پاسخ به رویدادهای کاربر (هاور، فوکوس، لودینگ) |
+| Micro-Animation | انیمیشن خرد / ظریف | پویانمایی‌های بسیار سریع و زیرکانه (زیر ۳۰۰ میلی‌ثانیه) برای ایجاد حس پویایی و زنده بودن |
+| Transition Duration | مدت زمان گذار | زمان سپری‌شده برای تغییر وضعیت یک استایل بصری به وضعیت دیگر (معمولاً ۱۵۰ تا ۲۰۰ میلی‌ثانیه) |
+| Lucide Icons | آیکون‌های لوسید | مجموعه آیکون‌های خطی و مدرن متن‌باز استاندارد در اکوسیستم مدرن فرانت‌اند |
+| Tactile Feedback | بازخورد لمسی بصری | حسی که کاربر از فشرده‌شدن و پاسخ دکمه روی صفحه دریافت می‌کند |
+
+---
+
+## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
+> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:
+
+1. **تصویر کاور درس:** `images/cover.png`
+   * **موضوع:** کاور مدرن با تم تیره که دکمه‌های شیشه‌ای شناور را با تغییر وضعیت نوری و ذرات حرکتی میکرو به صورت زنده نشان می‌دهد.
+2. **نوار پنج وضعیت استاندارد یک دکمه:** `images/five-ui-states-strip.png`
+   * **موضوع:** اسکرین‌شات مقایسه‌ای ۵ حالت متوالی: ۱. پیش‌فرض $\rightarrow$ ۲. شناور (Hover) $\rightarrow$ ۳. فشرده (Active) $\rightarrow$ ۴. فوکوس $\rightarrow$ ۵. لودینگ با اسپینر.
+3. **نمودار سرعت و منحنی انیمیشن‌های بهینه:** `images/animation-timing-curves.png`
+   * **موضوع:** اینفوگرافیک مقایسه‌ای: منحنی گذار چابک ۲۰۰ میلی‌ثانیه‌ای (Snappy) در برابر انیمیشن کش‌دار و کند ۱ ثانیه‌ای.
+4. **ویترین آیکون‌های منتخب Lucide:** `images/lucide-icons-showcase.png`
+   * **موضوع:** کادر منظم آیکون‌های پرکاربرد پورتفولیو (Github, ExternalLink, Sparkles, Folder, Settings, Lock) با کدهای استاندارد.
+5. **کارت پروژه تعاملی در عمل:** `images/interactive-card-hover-demo.png`
+   * **موضوع:** نمایش تصویری کارت پورتفولیو پیش از اشاره موس و پس از هاور (با افکت نور ملایم، بالا آمدن ۲ پیکسلی و آیکون لینک).
+
+---
+
+## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`)
+
+1. **تیتر اصلی:** `# کامپوننت‌ها، وضعیت‌ها و انیمیشن: دمیدن جان و زندگی به اجزای صفحه`
+2. **مقدمه:** چرا تفاوت یک وب‌سایت مرده با یک محصول فوق‌العاده زنده، در ریزه‌کاری‌های تعاملی پنهان است؟
+3. **جدول کاور درس**
+4. **ماشین وضعیت: پنج حالت حیاتی هر کامپوننت:**
+   * حالت Idle، Hover، Active، Focus و Loading.
+5. **باکس نکته Quera (`<details class="violet">`):** نقش حیاتی حالت Focus در دسترسی‌پذیری کار با کیبورد.
+6. **میکروانیمیشن‌ها: فرمول طلایی حرکت نرم (۲۰۰ میلی‌ثانیه):**
+   * چرا انیمیشن‌های طولانی دشمن تجربه کاربری هستند؟
+   * قدرت کلاس‌های `transition-all duration-200`.
+7. **آیکون‌های ترند و مدرن وب: چرا همه از Lucide Icons استفاده می‌کنند؟:**
+   * بررسی مزایای Lucide و Tabler در برابر فونت‌آیکون‌های قدیمی.
+   * جدول آیکون‌های کاربردی پروژه پورتفولیو.
+8. **تعاملات زنده در پروژه پورتفولیوی پویا:**
+   * رفتار کارت‌ها، فرم‌های ادمین و مودال با افکت Backdrop Blur.
+9. **باکس هشدار Quera (`<details class="red">`):** انیمیشن در خدمت بازخورد است، نه نمایش سیرک!
+10. **جمع‌بندی درس‌نامه:** مجهز شدن اجزای بصری و ورود به ایستگاه حیاتی یکپارچه‌سازی در سیستم طراحی (Design System).
+
+---
+
+## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
+- [ ] پنج وضعیت استاندارد کامپوننت‌ها به روشنی و با مصادیق ملموس تفکیک شده باشند.
+- [ ] استانداردهای زمانی میکروانیمیشن‌ها (زیر ۳۰۰ میلی‌ثانیه) همراه با نقد انیمیشن‌های سنگین ذکر شوند.
+- [ ] مجموعه آیکون‌های Lucide Icons و نحوه استفاده از آن‌ها در پروژه معرفی گردد.
+- [ ] تعاملات و وضعیت‌های اختصاصی پورتفولیوی پویا (دکمه ذخیره، کارت‌ها و مودال) مستند شوند.