[PROD-001] feat: Complete production deployment setup

✅ Fixed critical issues:
- Fixed .dockerignore to include assets (logo.png, banner-3.gif, custom.css)
- Added psutil dependency for metrics endpoint
- Connected health check endpoints to Reflex app

✅ Added complete CI/CD pipeline:
- Woodpecker.yml with 11 stages (lint, build, scan, deploy)
- Harbor registry integration
- ArgoCD automated deployment
- Kubernetes health checks

✅ Enhanced security:
- Multi-stage Docker build
- Non-root user container
- Security scanning ready
- Network policies configured

✅ Complete documentation:
- Production deployment guide (50+ pages)
- Quick start guide (10 minutes)
- Deployment checklist
- Changelog

🚀 Production ready with automated GitOps deployment!

ApprovalToken: PROD-001

.cursor/plans/wordpress_dynamic_animation_271093ca.plan.md

@@ -0,0 +1,332 @@
+---
+name: WordPress Dynamic Animation
+overview: "پیاده‌سازی انیمیشن پیشرفته برای بخش وردپرس با Canvas: لوگوی وردپرس با چرخ‌دنده‌های چرخان، ذرات نورانی، حلقه‌های انیمیت‌شده و افکت‌های glow سه‌بعدی"
+todos:
+  - id: create-canvas-script
+    content: ایجاد wordpress_canvas_script با سیستم particle، چرخ‌دنده‌ها و انیمیشن‌ها
+    status: completed
+  - id: replace-logo
+    content: جایگزینی SVG لوگوی وردپرس با Canvas element در wordpress_cloud_highlight()
+    status: completed
+    dependencies:
+      - create-canvas-script
+  - id: add-script-injection
+    content: اضافه کردن rx.script() برای inject کردن wordpress_canvas_script
+    status: completed
+    dependencies:
+      - create-canvas-script
+  - id: test-animation
+    content: "تست انیمیشن: smoothness، performance، responsive"
+    status: completed
+    dependencies:
+      - replace-logo
+      - add-script-injection
+  - id: fine-tune
+    content: تنظیم دقیق رنگ‌ها، سرعت‌ها و افکت‌های glow
+    status: in_progress
+    dependencies:
+      - test-animation
+---
+
+# پیاده‌سازی انیمیشن پیشرفته وردپرس
+
+## معماری انیمیشن
+
+```mermaid
+flowchart TD
+    Canvas[Canvas Element] --> AnimLoop[Animation Loop]
+    AnimLoop --> WPLogo[WordPress Logo Center]
+    AnimLoop --> Gears[Rotating Gears]
+    AnimLoop --> Particles[Light Particles]
+    AnimLoop --> Rings[Rotating Rings]
+    AnimLoop --> GlowFX[Glow Effects]
+    
+    WPLogo --> DrawLogo[Draw WordPress W]
+    Gears --> Gear1[Gear Top]
+    Gears --> Gear2[Gear Right]
+    Gears --> Gear3[Gear Bottom]
+    Particles --> System[Particle System]
+    System --> Spawn[Spawn Particles]
+    System --> Move[Move Along Path]
+    System --> Fade[Fade In/Out]
+    Rings --> Ring1[Outer Ring]
+    Rings --> Ring2[Middle Ring]
+    GlowFX --> RadialGlow[Radial Gradient]
+    GlowFX --> LightTrails[Light Trails]
+```
+
+
+
+## تغییرات مورد نیاز
+
+### 1. ایجاد WordPress Canvas Animation Script
+
+**فایل**: [`src/presentation/web/pages/landing/index.py`](src/presentation/web/pages/landing/index.py)ایجاد یک اسکریپت JavaScript جدید بعد از `binary_rain_script`:
+
+```javascript
+wordpress_canvas_script = """
+(function() {
+    function initWordPressAnimation() {
+        const canvas = document.getElementById('wordpress-canvas');
+        if (!canvas) return;
+        
+        const ctx = canvas.getContext('2d');
+        const rect = canvas.parentElement.getBoundingClientRect();
+        canvas.width = rect.width;
+        canvas.height = rect.height;
+        
+        // متغیرهای انیمیشن
+        let time = 0;
+        const centerX = canvas.width / 2;
+        const centerY = canvas.height / 2;
+        
+        // سیستم ذرات نورانی
+        class Particle {
+            constructor(angle, distance, speed) {
+                this.angle = angle;
+                this.distance = distance;
+                this.speed = speed;
+                this.opacity = Math.random();
+                this.size = Math.random() * 3 + 1;
+            }
+            
+            update() {
+                this.angle += this.speed;
+                this.opacity = (Math.sin(time * 2 + this.angle) + 1) / 2;
+            }
+            
+            draw(ctx, cx, cy) {
+                const x = cx + Math.cos(this.angle) * this.distance;
+                const y = cy + Math.sin(this.angle) * this.distance;
+                
+                ctx.save();
+                ctx.globalAlpha = this.opacity;
+                const gradient = ctx.createRadialGradient(x, y, 0, x, y, this.size * 3);
+                gradient.addColorStop(0, '#F59E0B');
+                gradient.addColorStop(1, 'transparent');
+                ctx.fillStyle = gradient;
+                ctx.beginPath();
+                ctx.arc(x, y, this.size * 3, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.restore();
+            }
+        }
+        
+        // ایجاد ذرات
+        const particles = [];
+        for (let i = 0; i < 50; i++) {
+            particles.push(new Particle(
+                Math.random() * Math.PI * 2,
+                120 + Math.random() * 80,
+                (Math.random() - 0.5) * 0.02
+            ));
+        }
+        
+        // تابع رسم چرخ‌دنده
+        function drawGear(ctx, x, y, radius, teeth, rotation) {
+            ctx.save();
+            ctx.translate(x, y);
+            ctx.rotate(rotation);
+            
+            // رسم چرخ‌دنده با gradient
+            const gradient = ctx.createRadialGradient(0, 0, radius * 0.5, 0, 0, radius);
+            gradient.addColorStop(0, '#FB923C');
+            gradient.addColorStop(1, '#F97316');
+            
+            ctx.fillStyle = gradient;
+            ctx.strokeStyle = '#EA580C';
+            ctx.lineWidth = 2;
+            
+            ctx.beginPath();
+            for (let i = 0; i < teeth; i++) {
+                const angle = (i / teeth) * Math.PI * 2;
+                const outerRadius = radius;
+                const innerRadius = radius * 0.7;
+                
+                ctx.lineTo(
+                    Math.cos(angle) * outerRadius,
+                    Math.sin(angle) * outerRadius
+                );
+                ctx.lineTo(
+                    Math.cos(angle + Math.PI / teeth) * innerRadius,
+                    Math.sin(angle + Math.PI / teeth) * innerRadius
+                );
+            }
+            ctx.closePath();
+            ctx.fill();
+            ctx.stroke();
+            
+            // دایره مرکزی
+            ctx.fillStyle = '#1F2937';
+            ctx.beginPath();
+            ctx.arc(0, 0, radius * 0.3, 0, Math.PI * 2);
+            ctx.fill();
+            
+            ctx.restore();
+        }
+        
+        // تابع رسم لوگوی وردپرس
+        function drawWordPressLogo(ctx, x, y, size, rotation) {
+            ctx.save();
+            ctx.translate(x, y);
+            ctx.rotate(rotation);
+            ctx.scale(size / 100, size / 100);
+            
+            // رسم W وردپرس (ساده‌شده)
+            ctx.fillStyle = '#FFFFFF';
+            ctx.font = 'bold 80px sans-serif';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText('W', 0, 0);
+            
+            // دایره دور W
+            ctx.strokeStyle = '#FFFFFF';
+            ctx.lineWidth = 8;
+            ctx.beginPath();
+            ctx.arc(0, 0, 60, 0, Math.PI * 2);
+            ctx.stroke();
+            
+            ctx.restore();
+        }
+        
+        // حلقه انیمیشن اصلی
+        function animate() {
+            time += 0.016;
+            
+            // پاک کردن canvas
+            ctx.fillStyle = 'transparent';
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            
+            // رسم glow پس‌زمینه
+            const bgGradient = ctx.createRadialGradient(
+                centerX, centerY, 0,
+                centerX, centerY, 250
+            );
+            bgGradient.addColorStop(0, 'rgba(245, 158, 11, 0.3)');
+            bgGradient.addColorStop(0.5, 'rgba(251, 146, 60, 0.15)');
+            bgGradient.addColorStop(1, 'transparent');
+            ctx.fillStyle = bgGradient;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            
+            // رسم حلقه‌های چرخان
+            ctx.save();
+            ctx.strokeStyle = 'rgba(245, 158, 11, 0.4)';
+            ctx.lineWidth = 2;
+            ctx.setLineDash([10, 10]);
+            ctx.lineDashOffset = -time * 50;
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, 180, 0, Math.PI * 2);
+            ctx.stroke();
+            
+            ctx.lineDashOffset = time * 50;
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, 220, 0, Math.PI * 2);
+            ctx.stroke();
+            ctx.restore();
+            
+            // رسم و بروزرسانی ذرات
+            particles.forEach(p => {
+                p.update();
+                p.draw(ctx, centerX, centerY);
+            });
+            
+            // رسم چرخ‌دنده‌ها
+            drawGear(ctx, centerX - 100, centerY - 100, 40, 8, time * 0.5);
+            drawGear(ctx, centerX + 100, centerY - 80, 35, 6, -time * 0.7);
+            drawGear(ctx, centerX + 90, centerY + 100, 38, 7, time * 0.6);
+            
+            // رسم لوگوی وردپرس مرکزی با pulsing
+            const logoScale = 100 + Math.sin(time * 2) * 5;
+            drawWordPressLogo(ctx, centerX, centerY, logoScale, Math.sin(time) * 0.1);
+            
+            // افکت glow اضافی روی لوگو
+            ctx.save();
+            ctx.globalCompositeOperation = 'screen';
+            const logoGlow = ctx.createRadialGradient(
+                centerX, centerY, 50,
+                centerX, centerY, 120
+            );
+            logoGlow.addColorStop(0, 'rgba(251, 191, 36, 0.8)');
+            logoGlow.addColorStop(1, 'transparent');
+            ctx.fillStyle = logoGlow;
+            ctx.fillRect(centerX - 120, centerY - 120, 240, 240);
+            ctx.restore();
+            
+            requestAnimationFrame(animate);
+        }
+        
+        animate();
+        
+        // Handle resize
+        window.addEventListener('resize', () => {
+            const rect = canvas.parentElement.getBoundingClientRect();
+            canvas.width = rect.width;
+            canvas.height = rect.height;
+        });
+    }
+    
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initWordPressAnimation);
+    } else {
+        initWordPressAnimation();
+    }
+})();
+"""
+```
+
+
+
+### 2. جایگذاری Canvas در بخش WordPress
+
+**فایل**: [`src/presentation/web/pages/landing/index.py`](src/presentation/web/pages/landing/index.py)در تابع `wordpress_cloud_highlight()`:
+
+- جایگزینی SVG لوگوی فعلی با Canvas element
+- افزودن script tag برای اجرای انیمیشن
+```python
+# قبل از لوگوی مرکزی، اضافه کردن script
+rx.script(wordpress_canvas_script),
+
+# جایگزینی بخش لوگوی وردپرس
+rx.box(
+    rx.html('<canvas id="wordpress-canvas" style="width: 100%; height: 100%;"></canvas>'),
+    position="relative",
+    width="600px",
+    height="600px",
+    display="flex",
+    align_items="center",
+    justify_content="center",
+)
+```
+
+
+
+
+### 3. بهبود استایل و Performance
+
+- اضافه کردن `will-change: transform` برای بهینه‌سازی
+- استفاده از `requestAnimationFrame` برای انیمیشن روان
+- کنترل FPS برای دستگاه‌های ضعیف‌تر
+
+## نکات تکنیکی
+
+1. **ذرات نورانی**: از Particle System با 50 ذره استفاده می‌شه که در مسیر دایره‌ای حرکت می‌کنن
+2. **چرخ‌دنده‌ها**: سه چرخ‌دنده در موقعیت‌های مختلف با سرعت‌های متفاوت می‌چرخن
+3. **Glow Effects**: از `radialGradient` و `globalCompositeOperation: 'screen'` برای افکت نورانی
+4. **حلقه‌های چرخان**: از `setLineDash` و `lineDashOffset` برای انیمیشن خط‌چین
+5. **لوگوی پویا**: لوگوی وردپرس با scale pulsing و چرخش ملایم
+
+## مزایا
+
+- هیچ کتابخانه خارجی لازم نیست
+- Performance بالا با Canvas native
+- کاملاً قابل سفارشی‌سازی
+- Responsive و با resize سازگار
+- افکت‌های بصری جذاب و حرفه‌ای
+
+## تست
+
+بعد از پیاده‌سازی:
+
+1. چک کردن smoothness انیمیشن
+2. تست روی دستگاه‌های مختلف
+3. بررسی CPU usage (باید زیر 10% باشه)