یک سایت بساز که وفتی واردش شدم یک محیط گرافیکی محرک خیلی جذاب باشه و می خوام که تا جایی که میشه گرافیکش بالا باشه

components/animated-header.js

@@ -0,0 +1,137 @@
+class AnimatedHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: relative;
+          width: 100%;
+          height: 600px;
+          overflow: hidden;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 0 0 40px 40px;
+        }
+        
+        .header-content {
+          position: relative;
+          z-index: 2;
+          padding: 4rem 2rem;
+          text-align: center;
+          color: white;
+        }
+        
+        .title {
+          font-size: 4rem;
+          font-weight: 800;
+          margin-bottom: 1rem;
+          text-shadow: 0 2px 10px rgba(0,0,0,0.2);
+          background: linear-gradient(to right, #ffffff, #f0f0f0);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          animation: titleGlow 3s ease-in-out infinite alternate;
+        }
+        
+        .subtitle {
+          font-size: 1.5rem;
+          opacity: 0.9;
+          max-width: 800px;
+          margin: 0 auto 2rem;
+        }
+        
+        .floating-shapes {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 1;
+        }
+        
+        .shape {
+          position: absolute;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.1);
+          animation: floatShape 20s infinite linear;
+        }
+        
+        @keyframes titleGlow {
+          from { filter: drop-shadow(0 0 10px rgba(255,255,255,0.3)); }
+          to { filter: drop-shadow(0 0 20px rgba(255,255,255,0.6)); }
+        }
+        
+        @keyframes floatShape {
+          0% { transform: translateY(0) rotate(0deg); }
+          100% { transform: translateY(-1000px) rotate(720deg); }
+        }
+        
+        .cta-button {
+          display: inline-block;
+          padding: 1rem 2rem;
+          background: rgba(255, 255, 255, 0.2);
+          backdrop-filter: blur(10px);
+          border: 2px solid rgba(255, 255, 255, 0.3);
+          border-radius: 50px;
+          color: white;
+          font-weight: 600;
+          text-decoration: none;
+          transition: all 0.3s ease;
+          margin: 0 0.5rem;
+        }
+        
+        .cta-button:hover {
+          background: rgba(255, 255, 255, 0.3);
+          transform: translateY(-5px);
+          box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+        }
+        
+        @media (max-width: 768px) {
+          .title {
+            font-size: 2.5rem;
+          }
+          
+          .subtitle {
+            font-size: 1.2rem;
+          }
+        }
+      </style>
+      
+      <div class="floating-shapes" id="shapes"></div>
+      <div class="header-content">
+        <h1 class="title">پایتون مستری آکادمی</h1>
+        <p class="subtitle">یادگیری پایتون را با تجربه‌ای گرافیکی و تعاملی آغاز کنید. محیطی جذاب با انیمیشن‌های زیبا و جلوه‌های بصری خیره‌کننده</p>
+        <div>
+          <a href="/courses" class="cta-button">مشاهده دوره‌ها</a>
+          <a href="/register" class="cta-button">شروع رایگان</a>
+        </div>
+      </div>
+    `;
+    
+    this.createShapes();
+  }
+  
+  createShapes() {
+    const shapesContainer = this.shadowRoot.getElementById('shapes');
+    
+    for (let i = 0; i < 50; i++) {
+      const shape = document.createElement('div');
+      shape.className = 'shape';
+      
+      const size = Math.random() * 100 + 20;
+      const left = Math.random() * 100;
+      const duration = Math.random() * 20 + 10;
+      const delay = Math.random() * 20;
+      
+      shape.style.width = `${size}px`;
+      shape.style.height = `${size}px`;
+      shape.style.left = `${left}%`;
+      shape.style.animationDuration = `${duration}s`;
+      shape.style.animationDelay = `${delay}s`;
+      shape.style.opacity = Math.random() * 0.3 + 0.1;
+      
+      shapesContainer.appendChild(shape);
+    }
+  }
+}
+
+customElements.define('animated-header', AnimatedHeader);

components/floating-elements.js

@@ -0,0 +1,73 @@
+class FloatingElements extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          z-index: -1;
+          overflow: hidden;
+        }
+        
+        .floating-element {
+          position: absolute;
+          border-radius: 50%;
+          background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
+          filter: blur(20px);
+          animation: float 20s infinite ease-in-out;
+        }
+        
+        @keyframes float {
+          0%, 100% { transform: translate(0, 0) rotate(0deg); }
+          25% { transform: translate(100px, 50px) rotate(90deg); }
+          50% { transform: translate(50px, 100px) rotate(180deg); }
+          75% { transform: translate(-50px, 50px) rotate(270deg); }
+        }
+      </style>
+    `;
+    
+    // Create floating elements
+    this.createFloatingElements();
+  }
+  
+  createFloatingElements() {
+    const colors = [
+      'rgba(59, 130, 246, 0.15)',
+      'rgba(16, 185, 129, 0.15)',
+      'rgba(139, 92, 246, 0.15)',
+      'rgba(239, 68, 68, 0.15)',
+      'rgba(245, 158, 11, 0.15)'
+    ];
+    
+    for (let i = 0; i < 8; i++) {
+      const element = document.createElement('div');
+      element.className = 'floating-element';
+      
+      // Random properties
+      const size = Math.random() * 300 + 100;
+      const color = colors[Math.floor(Math.random() * colors.length)];
+      const left = Math.random() * 100;
+      const top = Math.random() * 100;
+      const delay = Math.random() * 20;
+      const duration = 20 + Math.random() * 20;
+      
+      element.style.width = `${size}px`;
+      element.style.height = `${size}px`;
+      element.style.background = color;
+      element.style.left = `${left}%`;
+      element.style.top = `${top}%`;
+      element.style.animationDelay = `${delay}s`;
+      element.style.animationDuration = `${duration}s`;
+      
+      this.shadowRoot.appendChild(element);
+    }
+  }
+}
+
+customElements.define('floating-elements', FloatingElements);

components/glowing-cursor.js

@@ -0,0 +1,117 @@
+class GlowingCursor extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          z-index: 9999;
+        }
+        
+        .cursor {
+          position: absolute;
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          background: radial-gradient(circle, #3B82F6, transparent);
+          filter: blur(10px);
+          transform: translate(-50%, -50%);
+          pointer-events: none;
+          transition: width 0.3s, height 0.3s;
+        }
+        
+        .cursor-trail {
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          border-radius: 50%;
+          background: rgba(59, 130, 246, 0.3);
+          filter: blur(5px);
+          transform: translate(-50%, -50%);
+          pointer-events: none;
+          transition: opacity 0.3s;
+        }
+      </style>
+      <div class="cursor"></div>
+    `;
+    
+    this.initCursor();
+  }
+  
+  initCursor() {
+    const cursor = this.shadowRoot.querySelector('.cursor');
+    const trails = [];
+    
+    document.addEventListener('mousemove', (e) => {
+      // Update main cursor
+      cursor.style.left = `${e.clientX}px`;
+      cursor.style.top = `${e.clientY}px`;
+      
+      // Create trail
+      const trail = document.createElement('div');
+      trail.className = 'cursor-trail';
+      trail.style.left = `${e.clientX}px`;
+      trail.style.top = `${e.clientY}px`;
+      this.shadowRoot.appendChild(trail);
+      trails.push(trail);
+      
+      // Remove old trails
+      if (trails.length > 10) {
+        const oldTrail = trails.shift();
+        if (oldTrail.parentNode) {
+          oldTrail.style.opacity = '0';
+          setTimeout(() => {
+            if (oldTrail.parentNode) {
+              this.shadowRoot.removeChild(oldTrail);
+            }
+          }, 300);
+        }
+      }
+      
+      // Remove trails after animation
+      setTimeout(() => {
+        if (trail.parentNode) {
+          trail.style.opacity = '0';
+          setTimeout(() => {
+            if (trail.parentNode) {
+              this.shadowRoot.removeChild(trail);
+            }
+          }, 300);
+        }
+      }, 1000);
+    });
+    
+    // Hover effects
+    document.addEventListener('mouseover', (e) => {
+      if (e.target.tagName === 'A' || e.target.tagName === 'BUTTON') {
+        cursor.style.width = '40px';
+        cursor.style.height = '40px';
+      }
+    });
+    
+    document.addEventListener('mouseout', (e) => {
+      if (e.target.tagName === 'A' || e.target.tagName === 'BUTTON') {
+        cursor.style.width = '20px';
+        cursor.style.height = '20px';
+      }
+    });
+    
+    // Click effect
+    document.addEventListener('click', () => {
+      cursor.style.width = '30px';
+      cursor.style.height = '30px';
+      setTimeout(() => {
+        cursor.style.width = '20px';
+        cursor.style.height = '20px';
+      }, 100);
+    });
+  }
+}
+
+customElements.define('glowing-cursor', GlowingCursor);

components/particles-bg.js

@@ -0,0 +1,133 @@
+class ParticlesBackground extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: -1;
+          overflow: hidden;
+        }
+        
+        canvas {
+          width: 100%;
+          height: 100%;
+        }
+      </style>
+      <canvas id="particles-canvas"></canvas>
+    `;
+    
+    // Initialize particles
+    this.initParticles();
+  }
+  
+  initParticles() {
+    const canvas = this.shadowRoot.getElementById('particles-canvas');
+    const ctx = canvas.getContext('2d');
+    
+    // Set canvas size
+    canvas.width = canvas.offsetWidth;
+    canvas.height = canvas.offsetHeight;
+    
+    // Particle system
+    const particles = [];
+    const particleCount = 150;
+    const colors = [
+      '#3B82F6', '#10B981', '#8B5CF6', '#EF4444', '#F59E0B',
+      '#EC4899', '#06B6D4', '#84CC16', '#F97316', '#6366F1'
+    ];
+    
+    // Create particles
+    for (let i = 0; i < particleCount; i++) {
+      particles.push({
+        x: Math.random() * canvas.width,
+        y: Math.random() * canvas.height,
+        radius: Math.random() * 3 + 1,
+        color: colors[Math.floor(Math.random() * colors.length)],
+        speedX: Math.random() * 2 - 1,
+        speedY: Math.random() * 2 - 1,
+        opacity: Math.random() * 0.5 + 0.2
+      });
+    }
+    
+    // Mouse interaction
+    let mouseX = 0;
+    let mouseY = 0;
+    let mouseRadius = 100;
+    
+    canvas.addEventListener('mousemove', (e) => {
+      const rect = canvas.getBoundingClientRect();
+      mouseX = e.clientX - rect.left;
+      mouseY = e.clientY - rect.top;
+    });
+    
+    // Animation
+    function animate() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      
+      // Update and draw particles
+      particles.forEach(p => {
+        // Move particle
+        p.x += p.speedX;
+        p.y += p.speedY;
+        
+        // Bounce off edges
+        if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;
+        if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;
+        
+        // Draw particle
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
+        ctx.fillStyle = p.color;
+        ctx.globalAlpha = p.opacity;
+        ctx.fill();
+        
+        // Draw connections
+        particles.forEach(p2 => {
+          const dx = p.x - p2.x;
+          const dy = p.y - p2.y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+          
+          if (distance < 100) {
+            ctx.beginPath();
+            ctx.strokeStyle = p.color;
+            ctx.globalAlpha = 0.1 * (1 - distance / 100);
+            ctx.lineWidth = 0.5;
+            ctx.moveTo(p.x, p.y);
+            ctx.lineTo(p2.x, p2.y);
+            ctx.stroke();
+          }
+        });
+        
+        // Mouse interaction
+        const dx = p.x - mouseX;
+        const dy = p.y - mouseY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        
+        if (distance < mouseRadius) {
+          const angle = Math.atan2(dy, dx);
+          const force = (mouseRadius - distance) / mouseRadius;
+          p.x += Math.cos(angle) * force * 5;
+          p.y += Math.sin(angle) * force * 5;
+        }
+      });
+      
+      requestAnimationFrame(animate);
+    }
+    
+    // Handle resize
+    window.addEventListener('resize', () => {
+      canvas.width = canvas.offsetWidth;
+      canvas.height = canvas.offsetHeight;
+    });
+    
+    animate();
+  }
+}
+
+customElements.define('particles-background', ParticlesBackground);

index.html

@@ -22,138 +22,210 @@
     </script>
 </head>
 <body class="bg-gray-50 font-sans">
+    <particles-background></particles-background>
+    <floating-elements></floating-elements>
+    <glowing-cursor></glowing-cursor>
     <custom-navbar></custom-navbar>
     
-    <main class="container mx-auto px-4 py-8">
-        <!-- Hero Section -->
-        <section class="flex flex-col md:flex-row items-center justify-between gap-8 mb-16">
-            <div class="md:w-1/2">
-                <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
-                    <span class="text-primary">پلتفرم آموزش حرفه‌ای</span> پایتون
-                </h1>
-                <p class="text-lg text-gray-600 mb-8">
-                    یادگیری پایتون را با بهترین متدها و پروژه‌های واقعی شروع کنید. از مبتدی تا حرفه‌ای در کنار ما باشید.
-                </p>
-                <div class="flex flex-col sm:flex-row gap-4">
-                    <a href="/register" class="bg-primary hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium text-center transition">
-                        شروع یادگیری
-                    </a>
-                    <a href="/courses" class="border border-primary text-primary px-6 py-3 rounded-lg font-medium text-center hover:bg-primary-50 transition">
-                        مشاهده دوره‌ها
-                    </a>
+    <animated-header></animated-header>
+    
+    <main class="container mx-auto px-4 py-8 relative z-10">
+        <!-- Stats Section -->
+        <section class="mb-16 slide-up">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+                <div class="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-white/20 text-center hover:scale-105 transition-transform duration-300">
+                    <div class="text-4xl font-bold text-primary mb-2">۲۵۰۰+</div>
+                    <div class="text-gray-600">دانشجو فعال</div>
+                </div>
+                <div class="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-white/20 text-center hover:scale-105 transition-transform duration-300">
+                    <div class="text-4xl font-bold text-secondary mb-2">۵۰+</div>
+                    <div class="text-gray-600">دوره آموزشی</div>
+                </div>
+                <div class="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-white/20 text-center hover:scale-105 transition-transform duration-300">
+                    <div class="text-4xl font-bold text-purple-600 mb-2">۹۸٪</div>
+                    <div class="text-gray-600">رضایت دانشجویان</div>
+                </div>
+                <div class="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-white/20 text-center hover:scale-105 transition-transform duration-300">
+                    <div class="text-4xl font-bold text-pink-600 mb-2">۵۰۰+</div>
+                    <div class="text-gray-600">پروژه عملی</div>
                 </div>
-            </div>
-            <div class="md:w-1/2">
-                <img src="http://static.photos/technology/1024x576/42" alt="Python Programming" class="rounded-xl shadow-lg w-full">
             </div>
         </section>
 
+        <!-- Interactive Demo -->
+        <section class="mb-16 slide-up">
+            <div class="bg-gradient-to-br from-primary/10 to-secondary/10 rounded-3xl p-8 md:p-12 border border-white/30 backdrop-blur-sm">
+                <div class="flex flex-col md:flex-row items-center justify-between gap-8">
+                    <div class="md:w-1/2">
+                        <h2 class="text-3xl font-bold text-gray-900 mb-4">تجربه تعاملی کدنویسی</h2>
+                        <p class="text-gray-600 mb-6">
+                            کد پایتون را مستقیماً در مرورگر خود اجرا کنید. محیطی زنده با قابلیت نمایش خروجی بلافاصله.
+                        </p>
+                        <div class="bg-gray-900 text-gray-100 p-4 rounded-xl font-mono text-sm mb-4">
+                            <div class="text-green-400"># کد نمونه</div>
+                            <div class="text-blue-400">def</div>
+                            <div class="ml-4"><span class="text-yellow-400">print</span>(<span class="text-green-400">"سلام دنیا!"</span>)</div>
+                        </div>
+                        <button id="run-code" class="bg-primary hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition transform hover:scale-105">
+                            اجرای کد
+                        </button>
+                    </div>
+                    <div class="md:w-1/2">
+                        <div class="bg-white/90 backdrop-blur-sm p-6 rounded-2xl shadow-xl border border-gray-200">
+                            <div class="flex items-center gap-2 mb-4">
+                                <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                                <div class="text-gray-500 text-sm mr-2">خروجی</div>
+                            </div>
+                            <div id="code-output" class="font-mono text-gray-800 min-h-[100px] p-4 bg-gray-50 rounded-lg">
+                                خروجی کد اینجا نمایش داده می‌شود...
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
         <!-- Features Section -->
-        <section class="mb-16">
+        <section class="mb-16 slide-up">
             <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">چرا پایتون مستری؟</h2>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
-                    <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
-                        <i data-feather="code" class="text-primary w-6 h-6"></i>
+                <div class="bg-white/80 backdrop-blur-sm p-8 rounded-2xl shadow-xl border border-white/30 hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
+                    <div class="relative">
+                        <div class="bg-gradient-to-r from-primary to-secondary w-16 h-16 rounded-2xl flex items-center justify-center mb-6 transform rotate-12 hover:rotate-0 transition-transform">
+                            <i data-feather="code" class="text-white w-8 h-8"></i>
+                        </div>
+                        <div class="absolute top-0 left-0 w-16 h-16 rounded-2xl bg-gradient-to-r from-primary/20 to-secondary/20 -z-10 animate-pulse"></div>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">آموزش پروژه‌محور</h3>
+                    <h3 class="text-xl font-semibold mb-3">آموزش پروژه‌محور</h3>
                     <p class="text-gray-600">یادگیری با انجام پروژه‌های واقعی و کاربردی در دنیای کار</p>
                 </div>
-                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
-                    <div class="bg-secondary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
-                        <i data-feather="users" class="text-secondary w-6 h-6"></i>
+                <div class="bg-white/80 backdrop-blur-sm p-8 rounded-2xl shadow-xl border border-white/30 hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
+                    <div class="relative">
+                        <div class="bg-gradient-to-r from-purple-500 to-pink-500 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 transform -rotate-12 hover:rotate-0 transition-transform">
+                            <i data-feather="users" class="text-white w-8 h-8"></i>
+                        </div>
+                        <div class="absolute top-0 left-0 w-16 h-16 rounded-2xl bg-gradient-to-r from-purple-500/20 to-pink-500/20 -z-10 animate-pulse"></div>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">مربیان حرفه‌ای</h3>
+                    <h3 class="text-xl font-semibold mb-3">مربیان حرفه‌ای</h3>
                     <p class="text-gray-600">همراهی با بهترین مربیان صنعت در طول مسیر یادگیری</p>
                 </div>
-                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
-                    <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
-                        <i data-feather="award" class="text-primary w-6 h-6"></i>
+                <div class="bg-white/80 backdrop-blur-sm p-8 rounded-2xl shadow-xl border border-white/30 hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
+                    <div class="relative">
+                        <div class="bg-gradient-to-r from-yellow-500 to-orange-500 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 transform rotate-12 hover:rotate-0 transition-transform">
+                            <i data-feather="award" class="text-white w-8 h-8"></i>
+                        </div>
+                        <div class="absolute top-0 left-0 w-16 h-16 rounded-2xl bg-gradient-to-r from-yellow-500/20 to-orange-500/20 -z-10 animate-pulse"></div>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">گواهینامه معتبر</h3>
+                    <h3 class="text-xl font-semibold mb-3">گواهینامه معتبر</h3>
                     <p class="text-gray-600">دریافت مدرک معتبر پس از اتمام هر دوره</p>
                 </div>
             </div>
         </section>
-
         <!-- Courses Preview -->
-        <section class="mb-16">
+        <section class="mb-16 slide-up">
             <div class="flex justify-between items-center mb-8">
                 <h2 class="text-3xl font-bold text-gray-900">دوره‌های آموزشی</h2>
-                <a href="/courses" class="text-primary hover:text-primary-600 font-medium flex items-center gap-2">
+                <a href="/courses" class="text-primary hover:text-primary-600 font-medium flex items-center gap-2 group">
                     مشاهده همه
-                    <i data-feather="arrow-left" class="w-4 h-4"></i>
+                    <i data-feather="arrow-left" class="w-4 h-4 group-hover:-translate-x-2 transition-transform"></i>
                 </a>
             </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                 <!-- Course Card 1 -->
-                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
-                    <img src="http://static.photos/technology/640x360/101" alt="Python Basics" class="w-full h-48 object-cover">
+                <div class="group bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-500 hover:-translate-y-3 border border-white/30">
+                    <div class="relative overflow-hidden">
+                        <img src="http://static.photos/technology/640x360/101" alt="Python Basics" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-700">
+                        <div class="absolute top-4 left-4 bg-gradient-to-r from-primary to-secondary text-white px-3 py-1 rounded-full text-sm">
+                            جدید
+                        </div>
+                    </div>
                     <div class="p-6">
-                        <div class="flex justify-between items-start mb-2">
+                        <div class="flex justify-between items-start mb-3">
                             <h3 class="text-xl font-bold">پایتون مقدماتی</h3>
-                            <span class="bg-primary-100 text-primary text-sm px-3 py-1 rounded-full">جدید</span>
-                        </div>
-                        <p class="text-gray-600 mb-4">آموزش اصول اولیه برنامه‌نویسی با پایتون برای شروع کار</p>
-                        <div class="flex justify-between items-center">
                             <div class="flex items-center gap-1 text-yellow-500">
                                 <i data-feather="star" class="w-4 h-4 fill-current"></i>
                                 <span>4.9</span>
                             </div>
-                            <a href="/course/python-basics" class="text-primary hover:text-primary-600 font-medium">مشاهده دوره</a>
+                        </div>
+                        <p class="text-gray-600 mb-6">آموزش اصول اولیه برنامه‌نویسی با پایتون برای شروع کار</p>
+                        <div class="flex justify-between items-center">
+                            <div class="text-lg font-bold text-primary">رایگان</div>
+                            <a href="/course/python-basics" class="text-primary hover:text-primary-600 font-medium flex items-center gap-1 group">
+                                مشاهده دوره
+                                <i data-feather="arrow-left" class="w-4 h-4 group-hover:-translate-x-1 transition-transform"></i>
+                            </a>
                         </div>
                     </div>
                 </div>
                 
                 <!-- Course Card 2 -->
-                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
-                    <img src="http://static.photos/technology/640x360/102" alt="Python OOP" class="w-full h-48 object-cover">
+                <div class="group bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-500 hover:-translate-y-3 border border-white/30">
+                    <div class="relative overflow-hidden">
+                        <img src="http://static.photos/technology/640x360/102" alt="Python OOP" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-700">
+                        <div class="absolute top-4 left-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white px-3 py-1 rounded-full text-sm">
+                            پرفروش
+                        </div>
+                    </div>
                     <div class="p-6">
-                        <div class="flex justify-between items-start mb-2">
+                        <div class="flex justify-between items-start mb-3">
                             <h3 class="text-xl font-bold">برنامه‌نویسی شی‌گرا</h3>
-                            <span class="bg-secondary-100 text-secondary text-sm px-3 py-1 rounded-full">پرفروش</span>
-                        </div>
-                        <p class="text-gray-600 mb-4">آموزش کامل مفاهیم شی‌گرایی در پایتون با مثال‌های عملی</p>
-                        <div class="flex justify-between items-center">
                             <div class="flex items-center gap-1 text-yellow-500">
                                 <i data-feather="star" class="w-4 h-4 fill-current"></i>
                                 <span>4.8</span>
                             </div>
-                            <a href="/course/python-oop" class="text-primary hover:text-primary-600 font-medium">مشاهده دوره</a>
+                        </div>
+                        <p class="text-gray-600 mb-6">آموزش کامل مفاهیم شی‌گرایی در پایتون با مثال‌های عملی</p>
+                        <div class="flex justify-between items-center">
+                            <div class="text-lg font-bold text-primary">۱۹۰,۰۰۰ تومان</div>
+                            <a href="/course/python-oop" class="text-primary hover:text-primary-600 font-medium flex items-center gap-1 group">
+                                مشاهده دوره
+                                <i data-feather="arrow-left" class="w-4 h-4 group-hover:-translate-x-1 transition-transform"></i>
+                            </a>
                         </div>
                     </div>
                 </div>
                 
                 <!-- Course Card 3 -->
-                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
-                    <img src="http://static.photos/technology/640x360/103" alt="Python Web" class="w-full h-48 object-cover">
+                <div class="group bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-500 hover:-translate-y-3 border border-white/30">
+                    <div class="relative overflow-hidden">
+                        <img src="http://static.photos/technology/640x360/103" alt="Python Web" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-700">
+                        <div class="absolute top-4 left-4 bg-gradient-to-r from-green-500 to-teal-500 text-white px-3 py-1 rounded-full text-sm">
+                            پرطرفدار
+                        </div>
+                    </div>
                     <div class="p-6">
-                        <div class="flex justify-between items-start mb-2">
+                        <div class="flex justify-between items-start mb-3">
                             <h3 class="text-xl font-bold">توسعه وب با پایتون</h3>
-                            <span class="bg-primary-100 text-primary text-sm px-3 py-1 rounded-full">پرطرفدار</span>
-                        </div>
-                        <p class="text-gray-600 mb-4">یادگیری Django و Flask برای ساخت وب‌اپلیکیشن‌های حرفه‌ای</p>
-                        <div class="flex justify-between items-center">
                             <div class="flex items-center gap-1 text-yellow-500">
                                 <i data-feather="star" class="w-4 h-4 fill-current"></i>
                                 <span>4.7</span>
                             </div>
-                            <a href="/course/python-web" class="text-primary hover:text-primary-600 font-medium">مشاهده دوره</a>
+                        </div>
+                        <p class="text-gray-600 mb-6">یادگیری Django و Flask برای ساخت وب‌اپلیکیشن‌های حرفه‌ای</p>
+                        <div class="flex justify-between items-center">
+                            <div class="text-lg font-bold text-primary">۲۹۰,۰۰۰ تومان</div>
+                            <a href="/course/python-web" class="text-primary hover:text-primary-600 font-medium flex items-center gap-1 group">
+                                مشاهده دوره
+                                <i data-feather="arrow-left" class="w-4 h-4 group-hover:-translate-x-1 transition-transform"></i>
+                            </a>
                         </div>
                     </div>
                 </div>
             </div>
         </section>
-
         <!-- Testimonials -->
-        <section class="mb-16">
+        <section class="mb-16 slide-up">
             <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">نظرات دانشجویان</h2>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-                <div class="bg-white p-6 rounded-xl shadow-md">
-                    <div class="flex items-center gap-4 mb-4">
-                        <img src="http://static.photos/people/200x200/1" alt="User" class="w-12 h-12 rounded-full object-cover">
+                <div class="bg-gradient-to-br from-white/80 to-primary/5 backdrop-blur-sm p-8 rounded-2xl shadow-xl border border-white/30 hover:shadow-2xl transition-all duration-500">
+                    <div class="flex items-center gap-4 mb-6">
+                        <div class="relative">
+                            <img src="http://static.photos/people/200x200/1" alt="User" class="w-16 h-16 rounded-full object-cover border-4 border-white/50">
+                            <div class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white"></div>
+                        </div>
                         <div>
-                            <h4 class="font-semibold">محمد رضایی</h4>
+                            <h4 class="font-bold text-lg">محمد رضایی</h4>
                             <div class="flex items-center gap-1 text-yellow-500">
                                 <i data-feather="star" class="w-4 h-4 fill-current"></i>
                                 <i data-feather="star" class="w-4 h-4 fill-current"></i>
@@ -163,15 +235,18 @@
                             </div>
                         </div>
                     </div>
-                    <p class="text-gray-600">
-                        بهترین پلتفرم برای یادگیری پایتون. دوره‌ها بسیار کامل و پروژه‌محور هستند. بعد از اتمام دوره مقدماتی توانستم در شرکت معتبری استخدام شوم.
+                    <p class="text-gray-700 text-lg leading-relaxed">
+                        "بهترین پلتفرم برای یادگیری پایتون. دوره‌ها بسیار کامل و پروژه‌محور هستند. بعد از اتمام دوره مقدماتی توانستم در شرکت معتبری استخدام شوم."
                     </p>
                 </div>
-                <div class="bg-white p-6 rounded-xl shadow-md">
-                    <div class="flex items-center gap-4 mb-4">
-                        <img src="http://static.photos/people/200x200/2" alt="User" class="w-12 h-12 rounded-full object-cover">
+                <div class="bg-gradient-to-br from-white/80 to-secondary/5 backdrop-blur-sm p-8 rounded-2xl shadow-xl border border-white/30 hover:shadow-2xl transition-all duration-500">
+                    <div class="flex items-center gap-4 mb-6">
+                        <div class="relative">
+                            <img src="http://static.photos/people/200x200/2" alt="User" class="w-16 h-16 rounded-full object-cover border-4 border-white/50">
+                            <div class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white"></div>
+                        </div>
                         <div>
-                            <h4 class="font-semibold">فاطمه محمدی</h4>
+                            <h4 class="font-bold text-lg">فاطمه محمدی</h4>
                             <div class="flex items-center gap-1 text-yellow-500">
                                 <i data-feather="star" class="w-4 h-4 fill-current"></i>
                                 <i data-feather="star" class="w-4 h-4 fill-current"></i>
@@ -181,34 +256,84 @@
                             </div>
                         </div>
                     </div>
-                    <p class="text-gray-600">
-                        به عنوان کسی که هیچ پیشینه برنامه‌نویسی نداشتم، دوره‌های این سایت واقعا برای من مفید بود. پشتیبانی عالی و محتوای باکیفیت.
+                    <p class="text-gray-700 text-lg leading-relaxed">
+                        "به عنوان کسی که هیچ پیشینه برنامه‌نویسی نداشتم، دوره‌های این سایت واقعا برای من مفید بود. پشتیبانی عالی و محتوای باکیفیت."
                     </p>
                 </div>
             </div>
         </section>
-
         <!-- CTA Section -->
-        <section class="bg-gradient-to-r from-primary to-secondary text-white rounded-xl p-8 md:p-12 mb-16">
-            <div class="max-w-3xl mx-auto text-center">
-                <h2 class="text-3xl md:text-4xl font-bold mb-4">آماده شروع یادگیری هستید؟</h2>
-                <p class="text-lg mb-8 opacity-90">
+        <section class="relative overflow-hidden bg-gradient-to-r from-primary via-purple-600 to-secondary text-white rounded-3xl p-8 md:p-12 mb-16 slide-up">
+            <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
+                <div class="absolute -top-20 -left-20 w-64 h-64 bg-white/10 rounded-full"></div>
+                <div class="absolute bottom-10 right-10 w-40 h-40 bg-white/5 rounded-full"></div>
+                <div class="absolute top-1/2 left-1/2 w-80 h-80 bg-white/5 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
+            </div>
+            <div class="relative z-10 max-w-3xl mx-auto text-center">
+                <h2 class="text-3xl md:text-4xl font-bold mb-6">آماده شروع یادگیری هستید؟</h2>
+                <p class="text-xl mb-10 opacity-95">
                     همین حالا ثبت‌نام کنید و به جمع هزاران دانشجوی ما بپیوندید. اولین قدم برای تبدیل شدن به یک برنامه‌نویس حرفه‌ای را بردارید.
                 </p>
-                <a href="/register" class="bg-white text-primary hover:bg-gray-100 px-8 py-3 rounded-lg font-bold inline-block transition">
-                    ثبت‌نام رایگان
+                <a href="/register" class="group bg-white text-primary hover:bg-gray-100 px-10 py-4 rounded-2xl font-bold inline-block transition-all duration-300 transform hover:scale-105 shadow-2xl">
+                    <span class="flex items-center justify-center gap-3">
+                        ثبت‌نام رایگان
+                        <i data-feather="arrow-left" class="w-5 h-5 group-hover:-translate-x-2 transition-transform"></i>
+                    </span>
                 </a>
+                <p class="mt-6 opacity-80">اولین جلسه رایگان • پشتیبانی ۲۴ ساعته • گواهینامه معتبر</p>
             </div>
         </section>
+</main>
     </main>
 
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
+    <script src="components/particles-bg.js"></script>
+    <script src="components/floating-elements.js"></script>
+    <script src="components/glowing-cursor.js"></script>
+    <script src="components/animated-header.js"></script>
     <script src="script.js"></script>
     <script>
       feather.replace();
+      
+      // Interactive code runner
+      document.getElementById('run-code')?.addEventListener('click', function() {
+        const output = document.getElementById('code-output');
+        output.innerHTML = '<div class="text-green-600">$ python hello.py</div><div class="mt-2">سلام دنیا!</div><div class="mt-2 text-gray-500">کد با موفقیت اجرا شد!</div>';
+        
+        // Add animation
+        output.classList.add('animate-pulse');
+        setTimeout(() => output.classList.remove('animate-pulse'), 500);
+      });
     </script>
     <script type="module" src="/src/main.jsx"></script>
+    <style>
+        body {
+            overflow-x: hidden;
+        }
+        
+        .slide-up {
+            animation: slideUp 0.8s ease-out;
+        }
+        
+        @keyframes slideUp {
+            from { 
+                opacity: 0;
+                transform: translateY(40px);
+            }
+            to { 
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        /* Glass effect */
+        .glass {
+            background: rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+    </style>
 </body>
 </html>

script.js

@@ -1,3 +1,4 @@
+
 // Main JavaScript File
 document.addEventListener('DOMContentLoaded', function() {
     // Initialize animations
@@ -33,6 +34,100 @@ document.addEventListener('DOMContentLoaded', function() {
             document.body.classList.add('dark');
         }
     }
+    
+    // Interactive code runner
+    const runCodeBtn = document.getElementById('run-code');
+    if (runCodeBtn) {
+        runCodeBtn.addEventListener('click', function() {
+            const output = document.getElementById('code-output');
+            if (output) {
+                output.innerHTML = `
+                    <div class="text-green-600 font-bold">$ python hello.py</div>
+                    <div class="mt-3 text-2xl font-bold text-primary">سلام دنیا!</div>
+                    <div class="mt-3 text-gray-600">✅ کد با موفقیت اجرا شد!</div>
+                    <div class="mt-4 text-sm text-gray-500">
+                        زمان اجرا: ۰.۰۰۲ ثانیه<br>
+                        حافظه مصرفی: ۲.۱ مگابایت
+                    </div>
+                `;
+                
+                // Add animation
+                output.classList.add('animate-pulse');
+                setTimeout(() => output.classList.remove('animate-pulse'), 500);
+                
+                // Button feedback
+                this.innerHTML = '<span>✅ اجرا شد!</span>';
+                this.classList.add('bg-green-600', 'hover:bg-green-700');
+                setTimeout(() => {
+                    this.innerHTML = '<span>اجرای کد</span>';
+                    this.classList.remove('bg-green-600', 'hover:bg-green-700');
+                }, 2000);
+            }
+        });
+    }
+    
+    // Add hover effects to cards
+    const cards = document.querySelectorAll('.bg-white\\/80');
+    cards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-10px) scale(1.02)';
+        });
+        
+        card.addEventListener('mouseleave', function() {
+            this.style.transform = 'translateY(0) scale(1)';
+        });
+    });
+    
+    // Add parallax effect to floating elements
+    window.addEventListener('mousemove', function(e) {
+        const x = e.clientX / window.innerWidth;
+        const y = e.clientY / window.innerHeight;
+        
+        document.querySelectorAll('.floating-element').forEach(el => {
+            const speed = parseFloat(el.getAttribute('data-speed') || '0.5');
+            const xMove = x * speed * 100;
+            const yMove = y * speed * 100;
+            el.style.transform = `translate(${xMove}px, ${yMove}px)`;
+        });
+    });
+    
+    // Initialize typing animation
+    const typeWriter = document.getElementById('typewriter');
+    if (typeWriter) {
+        const texts = [
+            'یادگیری پایتون',
+            'ساخت پروژه‌های واقعی',
+            'تبدیل شدن به حرفه‌ای'
+        ];
+        let textIndex = 0;
+        let charIndex = 0;
+        let isDeleting = false;
+        
+        function type() {
+            const currentText = texts[textIndex];
+            
+            if (isDeleting) {
+                typeWriter.textContent = currentText.substring(0, charIndex - 1);
+                charIndex--;
+            } else {
+                typeWriter.textContent = currentText.substring(0, charIndex + 1);
+                charIndex++;
+            }
+            
+            if (!isDeleting && charIndex === currentText.length) {
+                isDeleting = true;
+                setTimeout(type, 2000);
+            } else if (isDeleting && charIndex === 0) {
+                isDeleting = false;
+                textIndex = (textIndex + 1) % texts.length;
+                setTimeout(type, 500);
+            } else {
+                setTimeout(type, isDeleting ? 50 : 100);
+            }
+        }
+        
+        setTimeout(type, 1000);
+    }
 });
 
 // API functions
@@ -62,4 +157,38 @@ function validateForm(form) {
     });
     
     return isValid;
-}
+}
+
+// Create confetti effect
+function createConfetti() {
+    const confettiCount = 100;
+    const colors = ['#3B82F6', '#10B981', '#8B5CF6', '#EF4444', '#F59E0B'];
+    
+    for (let i = 0; i < confettiCount; i++) {
+        const confetti = document.createElement('div');
+        confetti.style.position = 'fixed';
+        confetti.style.width = '10px';
+        confetti.style.height = '10px';
+        confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
+        confetti.style.borderRadius = '50%';
+        confetti.style.left = `${Math.random() * 100}vw`;
+        confetti.style.top = '-20px';
+        confetti.style.zIndex = '9999';
+        confetti.style.pointerEvents = 'none';
+        document.body.appendChild(confetti);
+        
+        // Animation
+        const animation = confetti.animate([
+            { transform: 'translateY(0) rotate(0deg)', opacity: 1 },
+            { transform: `translateY(${window.innerHeight + 100}px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
+        ], {
+            duration: Math.random() * 3000 + 2000,
+            easing: 'cubic-bezier(0.215, 0.610, 0.355, 1)'
+        });
+        
+        animation.onfinish = () => confetti.remove();
+    }
+}
+
+// Export for global use
+window.createConfetti = createConfetti;

style.css

@@ -1,26 +1,30 @@
+
 /* Custom Styles */
 @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
 body {
     font-family: 'Vazirmatn', sans-serif;
+    overflow-x: hidden;
 }
 
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
-    width: 8px;
+    width: 12px;
 }
 
 ::-webkit-scrollbar-track {
-    background: #f1f1f1;
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #3B82F6;
-    border-radius: 4px;
+    background: linear-gradient(to bottom, #3B82F6, #8B5CF6);
+    border-radius: 10px;
+    border: 2px solid rgba(255, 255, 255, 0.8);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: #2563EB;
+    background: linear-gradient(to bottom, #2563EB, #7C3AED);
 }
 
 /* Animation Classes */
@@ -34,13 +38,13 @@ body {
 }
 
 .slide-up {
-    animation: slideUp 0.5s ease-out;
+    animation: slideUp 0.8s ease-out;
 }
 
 @keyframes slideUp {
     from { 
         opacity: 0;
-        transform: translateY(20px);
+        transform: translateY(40px);
     }
     to { 
         opacity: 1;
@@ -48,6 +52,41 @@ body {
     }
 }
 
+/* Glass effect */
+.glass {
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+/* Gradient text */
+.gradient-text {
+    background: linear-gradient(90deg, #3B82F6, #8B5CF6, #EC4899);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* Pulse animation */
+@keyframes pulse-glow {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+
+.pulse-glow {
+    animation: pulse-glow 2s infinite;
+}
+
+/* Floating animation */
+@keyframes floating {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-20px); }
+}
+
+.floating {
+    animation: floating 3s ease-in-out infinite;
+}
+
 /* Responsive Adjustments */
 @media (max-width: 768px) {
     .hero-text {
@@ -57,4 +96,16 @@ body {
     .hero-buttons {
         justify-content: center;
     }
-}
+    
+    .mobile-hide {
+        display: none;
+    }
+}
+
+/* Background patterns */
+.bg-grid {
+    background-image: 
+        linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
+    background-size: 50px 50px;
+}