{% extends 'base.html.twig' %}
{% block title %}نرم افزار حسابداری آنلاین،متن‌باز و کاملا رایگان
{% endblock %}

{% block body %}
	<div class="container mx-auto px-4">
		<div class="py-8">
			<div class="py-4">
				<!-- Hero Section با طراحی مدرن -->
				<div class="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 rounded-3xl mb-16">
					<!-- Background Pattern -->
					<div class="absolute inset-0 opacity-10">
						<svg class="w-full h-full" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
							<defs>
								<pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
									<path d="M 10 0 L 0 0 0 10" fill="none" stroke="#3b82f6" stroke-width="0.5"/>
								</pattern>
							</defs>
							<rect width="100" height="100" fill="url(#grid)"/>
						</svg>
					</div>
					
					<div class="relative container mx-auto px-4 pt-12 md:pt-20 pb-16">
						<div class="flex flex-col lg:flex-row items-center gap-12">
							<div class="w-full lg:w-7/12 text-center lg:text-right">
								<!-- Badge -->
								<div class="inline-flex items-center px-4 py-2 rounded-full bg-gradient-to-r from-blue-100 to-purple-100 text-primary-600 text-sm font-medium mb-6 animate-pulse">
									<svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 20 20">
										<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
									</svg>
									رایگان و متن‌باز
								</div>
								
								<h1 class="text-4xl md:text-4xl lg:text-5xl font-bold mb-6 leading-tight">
									<span class="bg-gradient-to-r from-blue-600 via-purple-600 to-blue-800 bg-clip-text text-transparent">
										شروعی ساده و آسان
									</span>
									<br>
									<span class="text-gray-600">برای مدیریت کسب‌و‌کار شما</span>
								</h1>
								
								<p class="text-xl md:text-2xl mb-6 text-gray-600 leading-relaxed">
									حسابیکس پلتفرم حسابداری ابری، متن‌باز و واقعا رایگان
								</p>
								
								<!-- آمار با انیمیشن -->
								<div class="flex flex-wrap justify-center lg:justify-start gap-8 mb-8">
									<div class="text-center lg:text-right">
										<div class="text-3xl md:text-4xl font-bold text-red-600 mb-1 counter" data-target="55">0</div>
										<div class="text-gray-600">هزار کاربر</div>
									</div>
									<div class="text-center lg:text-right">
										<div class="text-3xl md:text-4xl font-bold text-red-600 mb-1 counter" data-target="43">0</div>
										<div class="text-gray-600">کسب و کار فعال</div>
									</div>
								</div>
								
								<!-- دکمه‌های CTA -->
								<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
									<a class="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl hover:from-blue-700 hover:to-purple-700 transform hover:-translate-y-1 transition-all duration-300 shadow-lg hover:shadow-2xl" 
									   href="https://app.hesabix.ir" target="_blank">
										<span class="relative z-10">هم‌اکنون عضو شوید</span>
										<svg class="w-5 h-5 mr-2 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
										</svg>
									</a>
									<a class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-primary-600 bg-white border-2 border-primary-600 rounded-2xl hover:bg-primary-50 transform hover:-translate-y-1 transition-all duration-300 shadow-lg hover:shadow-xl" 
									   href="{{path('app_guide')}}">
										<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
										</svg>
										راهنمای جامع
									</a>
								</div>
							</div>
							
							<div class="w-full lg:w-5/12">
								<div class="relative">
									<!-- تصویر اصلی با انیمیشن -->
									<div class="relative z-10 transform hover:scale-105 transition-transform duration-500">
										<img src="{{asset('img/viewWindows.png')}}" 
											 class="w-full rounded-3xl shadow-2xl" 
											 alt="نرم افزار حسابداری حسابیکس"/>
									</div>
									
									<!-- Floating Elements -->
									<div class="absolute -top-4 -right-4 w-20 h-20 bg-gradient-to-r from-blue-400 to-purple-400 rounded-full opacity-20 animate-bounce"></div>
									<div class="absolute -bottom-4 -left-4 w-16 h-16 bg-gradient-to-r from-green-400 to-blue-400 rounded-full opacity-20 animate-pulse"></div>
									<div class="absolute top-1/2 -left-8 w-12 h-12 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full opacity-20 animate-ping"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
					<div class="mt-8">
						<div class="w-full">
							<div class="card bg-gray-50 mb-6">
								<div class="p-6 text-center">
									<p class="text-center text-gray-600">
										حسابیکس یک پلتفرم مدیریت کسب‌و‌کار که پاسخگوی تمام اهداف تجاری شما از یک فروشگاه کوچک تا یک مجتمع بازرگانی بزرگ است
										<br>
										کافی است گام اول را بردارید،جهت پیشبرد اهدافتان در کنار شما هستیم.
									</p>
								</div>
							</div>
						</div>
					</div>
					</div>
				</div>
			</div>
			<!-- حامیان مالی -->
			<div class="w-full mb-16">
				<div class="container mx-auto px-4">
					<div class="text-center mb-12">
						<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
							حامیان حسابیکس
						</h2>
						<p class="text-lg text-gray-600 max-w-3xl mx-auto">
							حسابیکس با مشارکت حامیان مالی و حمایت کاربران عزیز، به صورت مستمر در حال توسعه و بهبود است.
						</p>
					</div>
					
					<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
						<!-- پارس پک -->
						<a href="https://parspack.com" target="_blank" 
						   class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-8 text-center hover:scale-105 cursor-pointer">
							<img src="{{asset('img/sp/parspack-logo.png')}}" 
								 class="w-24 h-24 mx-auto object-contain" 
								 alt="پارس پک">
						</a>
						
						<!-- ملی پیامک -->
						<a href="https://melipayamak.com" target="_blank" 
						   class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-8 text-center hover:scale-105 cursor-pointer">
							<img src="{{asset('img/sp/melipayamak.png')}}" 
								 class="w-24 h-24 mx-auto object-contain" 
								 alt="ملی پیامک">
						</a>
						
						<!-- ایران موتوربرق -->
						<a href="https://irmotorbargh.com" target="_blank" 
						   class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-8 text-center hover:scale-105 cursor-pointer">
							<img src="{{asset('img/sp/irmr.png')}}" 
								 class="w-24 h-24 mx-auto object-contain" 
								 alt="ایران موتوربرق">
						</a>
					</div>
					
					
				</div>
			</div>
			<!-- Features Section با طراحی مدرن و تعاملی -->
			<div class="w-full mb-16 relative overflow-hidden">
				<!-- Background Pattern -->
				<div class="absolute inset-0 opacity-5">
					<svg class="w-full h-full" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
						<defs>
							<pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse">
								<circle cx="10" cy="10" r="2" fill="#3b82f6"/>
							</pattern>
						</defs>
						<rect width="100" height="100" fill="url(#dots)"/>
					</svg>
				</div>
				
				<div class="container mx-auto px-4 relative">
					<!-- Header Section -->
					<div class="text-center mb-16">
						<div class="inline-flex items-center px-4 py-2 rounded-full bg-gradient-to-r from-blue-100 to-purple-100 text-primary-600 text-sm font-medium mb-6">
							<svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 20 20">
								<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
							</svg>
							شروعی آسان و سریع
						</div>
						
						<h2 class="text-4xl md:text-5xl font-bold mb-6">
							<span class="bg-gradient-to-r from-blue-600 via-purple-600 to-blue-800 bg-clip-text text-transparent">
								سه مرحله تا موفقیت
							</span>
						</h2>
						<p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
							کسب‌و‌کار خود را در سه مرحله ساده به دنیای دیجیتال متصل کنید و از قدرت مدیریت مالی پیشرفته بهره‌مند شوید
						</p>
					</div>
					
					<!-- Main Content -->
					<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center">
						<!-- تصویر موبایل با انیمیشن -->
						<div class="relative order-2 lg:order-1">
							<div class="relative z-10">
								<!-- Floating Background Elements -->
								<div class="absolute -top-6 -right-6 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-r from-blue-400 to-purple-400 rounded-full opacity-20 animate-pulse"></div>
								<div class="absolute -bottom-6 -left-6 w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-r from-green-400 to-blue-400 rounded-full opacity-20 animate-bounce"></div>
								<div class="absolute top-1/2 -left-8 w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full opacity-20 animate-ping"></div>
								
								<!-- Main Image Container -->
								<div class="relative transform hover:scale-105 transition-all duration-500">
									<img src="{{asset('img/viewMobile.png')}}" 
										 class="w-48 sm:w-56 md:w-64 lg:w-72 h-auto mx-auto rounded-3xl shadow-2xl object-contain" 
										 alt="نرم افزار حسابداری حسابیکس موبایل"/>
									
									<!-- Glow Effect -->
									<div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-3xl blur-xl -z-10"></div>
								</div>
							</div>
						</div>
						
						<!-- Steps Container -->
						<div class="space-y-8 order-1 lg:order-2">
							<!-- Step 1 -->
							<div class="group relative">
								<div class="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-2xl blur opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
								<div class="relative bg-white/80 backdrop-blur-sm rounded-2xl p-6 border border-gray-100 hover:border-blue-200 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl">
									<div class="flex items-start space-x-4 space-x-reverse">
										<!-- Step Number -->
										<div class="flex-shrink-0 relative">
											<div class="w-14 h-14 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
												<span class="text-white font-bold text-lg">1</span>
											</div>
											<!-- Connection Line -->
											<div class="absolute top-14 right-1/2 w-0.5 h-8 bg-gradient-to-b from-blue-500 to-transparent transform translate-x-1/2"></div>
										</div>
										
										<!-- Content -->
										<div class="flex-1">
											<h3 class="text-xl font-bold text-gray-800 group-hover:text-blue-600 transition-colors duration-300 mb-3">
												ثبت‌نام و ساخت پنل
											</h3>
											<p class="text-gray-600 leading-relaxed">
												در حسابیکس عضو شوید و پنل کسب و کار خود را به سادگی بسازید. هر تعداد کسب‌و‌کار که داشته باشید می‌توانید از طریق یک داشبورد واحد آن‌ها را مدیریت کنید.
											</p>
											<!-- Progress Indicator -->
											<div class="mt-4 flex items-center text-sm text-blue-600">
												<svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
													<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
												</svg>
												<span class="font-medium">مرحله اول تکمیل شد</span>
											</div>
										</div>
									</div>
								</div>
							</div>
							
							<!-- Step 2 -->
							<div class="group relative">
								<div class="absolute inset-0 bg-gradient-to-r from-purple-500/10 to-pink-500/10 rounded-2xl blur opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
								<div class="relative bg-white/80 backdrop-blur-sm rounded-2xl p-6 border border-gray-100 hover:border-purple-200 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl">
									<div class="flex items-start space-x-4 space-x-reverse">
										<!-- Step Number -->
										<div class="flex-shrink-0 relative">
											<div class="w-14 h-14 bg-gradient-to-r from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
												<span class="text-white font-bold text-lg">2</span>
											</div>
											<!-- Connection Line -->
											<div class="absolute top-14 right-1/2 w-0.5 h-8 bg-gradient-to-b from-purple-500 to-transparent transform translate-x-1/2"></div>
										</div>
										
										<!-- Content -->
										<div class="flex-1">
											<h3 class="text-xl font-bold text-gray-800 group-hover:text-purple-600 transition-colors duration-300 mb-3">
												تنظیمات و راه‌اندازی
											</h3>
											<p class="text-gray-600 leading-relaxed">
												اطلاعات کسب و کار خود را وارد کنید و تنظیمات اولیه را انجام دهید. حسابیکس آماده و در اختیار شماست. در صورت نیاز به راهنمایی، تیم پشتیبانی پاسخگوی شماست.
											</p>
											<!-- Progress Indicator -->
											<div class="mt-4 flex items-center text-sm text-purple-600">
												<svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
													<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
												</svg>
												<span class="font-medium">مرحله دوم تکمیل شد</span>
											</div>
										</div>
									</div>
								</div>
							</div>
							
							<!-- Step 3 -->
							<div class="group relative">
								<div class="absolute inset-0 bg-gradient-to-r from-green-500/10 to-blue-500/10 rounded-2xl blur opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
								<div class="relative bg-white/80 backdrop-blur-sm rounded-2xl p-6 border border-gray-100 hover:border-green-200 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl">
									<div class="flex items-start space-x-4 space-x-reverse">
										<!-- Step Number -->
										<div class="flex-shrink-0">
											<div class="w-14 h-14 bg-gradient-to-r from-green-500 to-green-600 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
												<span class="text-white font-bold text-lg">3</span>
											</div>
										</div>
										
										<!-- Content -->
										<div class="flex-1">
											<h3 class="text-xl font-bold text-gray-800 group-hover:text-green-600 transition-colors duration-300 mb-3">
												دسترسی همه‌جا
											</h3>
											<p class="text-gray-600 leading-relaxed">
												از حسابیکس بر روی موبایل، تبلت و کامپیوتر لذت ببرید. تنها کافی است که یک اتصال اینترنت داشته باشید. حسابیکس در هر نقطه‌ای از جهان در دسترس شما خواهد بود.
											</p>
											<!-- Success Indicator -->
											<div class="mt-4 flex items-center text-sm text-green-600">
												<svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
													<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
												</svg>
												<span class="font-medium">آماده برای استفاده!</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Plugins Section با طراحی مدرن -->
			<div class="w-full mb-16">
				<div class="container mx-auto px-4">
					<div class="text-center mb-16">
						<h2 class="text-4xl md:text-5xl font-bold mb-6">
							<span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
								افزونه‌های قدرتمند
							</span>
							<br>
							<span class="text-gray-800">حسابیکس</span>
						</h2>
						<p class="text-xl text-gray-600 max-w-3xl mx-auto">
							افزونه‌های قدرتمند حسابیکس برای اتصال به سیستم‌های مختلف و بهبود عملکرد کسب‌و‌کار شما
						</p>
					</div>
					
					<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
						<!-- افزونه مودیان -->
						<div class="group relative">
							<div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 rounded-3xl blur opacity-20 group-hover:opacity-30 transition-opacity duration-300"></div>
							<div class="relative bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
								<div class="flex items-center mb-6">
									<div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
										<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
										</svg>
									</div>
									<div class="mr-4">
										<h3 class="text-2xl font-bold text-gray-800 group-hover:text-blue-600 transition-colors duration-300">
											اتصال به سامانه مودیان
										</h3>
										<div class="flex items-center mt-1">
											<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
												<svg class="w-3 h-3 ml-1" fill="currentColor" viewBox="0 0 20 20">
													<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
												</svg>
												فعال
											</span>
										</div>
									</div>
								</div>
								<p class="text-gray-600 leading-relaxed mb-6">
									با استفاده از افزونه اتصال به سامانه مودیان، می‌توانید به صورت خودکار اطلاعات فاکتورهای خود را به سامانه مودیان ارسال کنید. این افزونه امکان ارسال خودکار فاکتورها، دریافت تاییدیه‌ها و مدیریت کامل ارتباط با سازمان امور مالیاتی را فراهم می‌کند.
								</p>
								<div class="flex items-center justify-between">
									<div class="flex items-center text-sm text-gray-500">
										<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
										</svg>
										ارسال خودکار فاکتورها
									</div>
									<div class="w-2 h-2 bg-green-500 rounded-full"></div>
								</div>
							</div>
						</div>
						
						<!-- افزونه ووکامرس -->
						<div class="group relative">
							<div class="absolute inset-0 bg-gradient-to-r from-purple-500 to-pink-500 rounded-3xl blur opacity-20 group-hover:opacity-30 transition-opacity duration-300"></div>
							<div class="relative bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
								<div class="flex items-center mb-6">
									<div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
										<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
										</svg>
									</div>
									<div class="mr-4">
										<h3 class="text-2xl font-bold text-gray-800 group-hover:text-purple-600 transition-colors duration-300">
											اتصال به ووکامرس
										</h3>
										<div class="flex items-center mt-1">
											<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
												<svg class="w-3 h-3 ml-1" fill="currentColor" viewBox="0 0 20 20">
													<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
												</svg>
												در دسترس
											</span>
										</div>
									</div>
								</div>
								<p class="text-gray-600 leading-relaxed mb-6">
									افزونه اتصال به ووکامرس امکان همگام‌سازی کامل فروشگاه شما با حسابیکس را فراهم می‌کند. سفارشات، محصولات و مشتریان به صورت خودکار در حسابیکس ثبت می‌شوند و مدیریت مالی فروشگاه شما را به سادگی انجام دهید.
								</p>
								<div class="flex items-center justify-between">
									<a href="https://source.hesabix.ir/morrning/hesabixWCPlugin" target="_blank" 
									   class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-2xl hover:from-purple-600 hover:to-purple-700 transform hover:-translate-y-1 transition-all duration-300 shadow-lg hover:shadow-xl">
										<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
										</svg>
										دریافت افزونه
									</a>
									<div class="w-2 h-2 bg-blue-500 rounded-full"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Blog Section با طراحی مدرن -->
			<div class="w-full mb-16">
				<div class="container mx-auto px-4">
					<div class="text-center mb-16">
						<h2 class="text-4xl md:text-5xl font-bold mb-6">
							<span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
								از وبلاگ حسابیکس
							</span>
						</h2>
						<p class="text-xl text-gray-600 max-w-3xl mx-auto">
							آخرین مقالات و راهنماهای مفید برای بهبود کسب‌و‌کار شما
						</p>
					</div>
					
					<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
						{% for post in posts %}
							<article class="group relative">
								<div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 rounded-3xl blur opacity-20 group-hover:opacity-30 transition-opacity duration-300"></div>
								<div class="relative bg-white rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
									<!-- تصویر مقاله -->
									<div class="relative overflow-hidden">
										<img src="{{asset('uploaded/' ~ post.mainPic )}}" 
											 class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500" 
											 alt="{{ post.title}}">
										<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
										<div class="absolute bottom-4 right-4">
											<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-white/90 text-gray-800 backdrop-blur-sm">
												<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
													<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
												</svg>
												{{ Jdate.jdate('Y/n/d',post.dateSubmit|date('U')) }}
											</span>
										</div>
									</div>
									
									<!-- محتوای مقاله -->
									<div class="p-6">
										<h3 class="text-xl font-bold text-gray-800 mb-3 group-hover:text-blue-600 transition-colors duration-300 line-clamp-2">
											{{post.title}}
										</h3>
										<p class="text-gray-600 mb-6 leading-relaxed line-clamp-3">
											{{ post.intro }}
										</p>
										<a href="{{path('app_blog_post',{'url':post.url})}}" 
										   class="inline-flex items-center text-blue-600 hover:text-blue-700 font-semibold group-hover:translate-x-1 transition-all duration-300">
											ادامه مطلب
											<svg class="w-4 h-4 mr-2 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
											</svg>
										</a>
									</div>
								</div>
							</article>
						{% endfor %}
					</div>
					
					<!-- دکمه مشاهده همه مقالات -->
					<div class="text-center mt-12">
						<a href="{{path('app_blog_home')}}" 
						   class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-2xl hover:from-blue-700 hover:to-purple-700 transform hover:-translate-y-1 transition-all duration-300 shadow-lg hover:shadow-xl">
							<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
							</svg>
							مشاهده همه مقالات
						</a>
					</div>
				</div>
			</div>
			<!-- Testimonials Section با طراحی مدرن -->
			<div class="w-full mb-16">
				<div class="container mx-auto px-4">
					<div class="text-center mb-16">
						<h2 class="text-4xl md:text-5xl font-bold mb-6">
							<span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
								نظرات مشتریان
							</span>
						</h2>
						<p class="text-xl text-gray-600 max-w-3xl mx-auto">
							آنچه مشتریان ما درباره حسابیکس می‌گویند
						</p>
					</div>
					
					<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
						<!-- نظر 1 -->
						<div class="group relative">
							<div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 rounded-3xl blur opacity-20 group-hover:opacity-30 transition-opacity duration-300"></div>
							<div class="relative bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
								<!-- ستاره‌ها -->
								<div class="flex items-center mb-4">
									<div class="flex space-x-1 space-x-reverse">
										{% for i in 1..5 %}
											<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
												<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
											</svg>
										{% endfor %}
									</div>
								</div>
								
								<!-- متن نظر -->
								<blockquote class="text-gray-600 leading-relaxed mb-6">
									"مرداد امسال بود که میخواستم برای چاپخونه برادرم یک فاکتور بزنم. هرکاری کردم نرم افزار حسابداری که باهاش کار میکردم (حسابیت)خروجی نمی داد و از اون بدتر نه کسی تیکت جواب میداد نه تلفن پشتیبانی کار میکرد. در کمال ناباوری شروع به جستجوی اینترنتی کردم برای یک نرم افزار حسابداری آنلاین که بشه از هرجایی کارو درآورد که به #حسابیکس برخورد کردم..."
								</blockquote>
								
								<!-- اطلاعات کاربر -->
								<div class="flex items-center">
									<div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-white font-bold text-lg">
										ح
									</div>
									<div class="mr-4">
										<h4 class="font-bold text-gray-800">حمیدرضا تینای تهرانی</h4>
										<p class="text-sm text-gray-500">صاحب چاپخانه</p>
									</div>
								</div>
							</div>
						</div>
						
						<!-- نظر 2 -->
						<div class="group relative">
							<div class="absolute inset-0 bg-gradient-to-r from-green-500 to-blue-500 rounded-3xl blur opacity-20 group-hover:opacity-30 transition-opacity duration-300"></div>
							<div class="relative bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
								<!-- ستاره‌ها -->
								<div class="flex items-center mb-4">
									<div class="flex space-x-1 space-x-reverse">
										{% for i in 1..5 %}
											<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
												<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
											</svg>
										{% endfor %}
									</div>
								</div>
								
								<!-- متن نظر -->
								<blockquote class="text-gray-600 leading-relaxed mb-6">
									"من یک شرکت خدمات کامپیوتری دارم و همیشه با مشکل مدیریت مالی و حسابداری مواجه بودم. نرم‌افزارهای مختلفی رو امتحان کردم اما یا خیلی پیچیده بودن یا امکاناتشون کم بود. تا اینکه با حسابیکس آشنا شدم..."
								</blockquote>
								
								<!-- اطلاعات کاربر -->
								<div class="flex items-center">
									<div class="w-12 h-12 bg-gradient-to-r from-green-500 to-blue-500 rounded-full flex items-center justify-center text-white font-bold text-lg">
										م
									</div>
									<div class="mr-4">
										<h4 class="font-bold text-gray-800">محمد رضایی</h4>
										<p class="text-sm text-gray-500">مدیر شرکت خدمات کامپیوتری</p>
									</div>
								</div>
							</div>
						</div>
						
						<!-- نظر 3 -->
						<div class="group relative">
							<div class="absolute inset-0 bg-gradient-to-r from-pink-500 to-purple-500 rounded-3xl blur opacity-20 group-hover:opacity-30 transition-opacity duration-300"></div>
							<div class="relative bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
								<!-- ستاره‌ها -->
								<div class="flex items-center mb-4">
									<div class="flex space-x-1 space-x-reverse">
										{% for i in 1..5 %}
											<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
												<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
											</svg>
										{% endfor %}
									</div>
								</div>
								
								<!-- متن نظر -->
								<blockquote class="text-gray-600 leading-relaxed mb-6">
									"من یک فروشگاه پوشاک دارم و همیشه با مشکل مدیریت موجودی و حساب‌وکتاب مواجه بودم. تا اینکه یکی از دوستانم حسابیکس رو به من معرفی کرد. از همون روز اول که ثبت‌نام کردم، متوجه شدم که این نرم‌افزار چقدر می‌تونه به من کمک کنه..."
								</blockquote>
								
								<!-- اطلاعات کاربر -->
								<div class="flex items-center">
									<div class="w-12 h-12 bg-gradient-to-r from-pink-500 to-purple-500 rounded-full flex items-center justify-center text-white font-bold text-lg">
										ف
									</div>
									<div class="mr-4">
										<h4 class="font-bold text-gray-800">فاطمه محمدی</h4>
										<p class="text-sm text-gray-500">صاحب فروشگاه پوشاک</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

{% endblock %}

{% block javascripts %}
	{{ parent() }}
	<script>
		// انیمیشن شمارشگر آمار
		function animateCounter(element, target, duration = 2000) {
			let start = 0;
			const increment = target / (duration / 16);
			
			function updateCounter() {
				start += increment;
				if (start < target) {
					element.textContent = Math.floor(start);
					requestAnimationFrame(updateCounter);
				} else {
					element.textContent = target;
				}
			}
			
			updateCounter();
		}
		
		// اجرای انیمیشن شمارشگر هنگام اسکرول
		function handleScrollAnimation() {
			const counters = document.querySelectorAll('.counter');
			const observer = new IntersectionObserver((entries) => {
				entries.forEach(entry => {
					if (entry.isIntersecting) {
						const target = parseInt(entry.target.dataset.target);
						animateCounter(entry.target, target);
						observer.unobserve(entry.target);
					}
				});
			}, { threshold: 0.5 });
			
			counters.forEach(counter => {
				observer.observe(counter);
			});
		}
		
		// انیمیشن مراحل Features Section
		function animateSteps() {
			const steps = document.querySelectorAll('.group');
			const observer = new IntersectionObserver((entries) => {
				entries.forEach((entry, index) => {
					if (entry.isIntersecting) {
						setTimeout(() => {
							entry.target.style.opacity = '1';
							entry.target.style.transform = 'translateY(0)';
						}, index * 200);
						observer.unobserve(entry.target);
					}
				});
			}, { threshold: 0.3 });
			
			steps.forEach(step => {
				step.style.opacity = '0';
				step.style.transform = 'translateY(30px)';
				step.style.transition = 'all 0.6s ease-out';
				observer.observe(step);
			});
		}
		
		// انیمیشن Floating Elements
		function animateFloatingElements() {
			const floatingElements = document.querySelectorAll('.absolute.animate-pulse, .absolute.animate-bounce, .absolute.animate-ping');
			
			floatingElements.forEach((element, index) => {
				element.style.animationDelay = `${index * 0.5}s`;
			});
		}
		
		// انیمیشن Hover Effects
		function initHoverEffects() {
			const stepCards = document.querySelectorAll('.group');
			
			stepCards.forEach(card => {
				card.addEventListener('mouseenter', function() {
					this.style.transform = 'translateY(-8px)';
				});
				
				card.addEventListener('mouseleave', function() {
					this.style.transform = 'translateY(0)';
				});
			});
		}
		
		// اجرا پس از بارگذاری صفحه
		document.addEventListener('DOMContentLoaded', function() {
			handleScrollAnimation();
			animateSteps();
			animateFloatingElements();
			initHoverEffects();
		});
	</script>
{% endblock %}