redesign some parts

This commit is contained in:
Hesabix 2025-04-06 15:47:37 +00:00
parent 0111427a09
commit b5f0481e4d
7 changed files with 594 additions and 181 deletions

View file

@ -1,4 +1,4 @@
body {
body, .lead {
font-family: "Yekan Bakh FaNum";
font-feature-settings: "kern" on, "liga" on, "dlig" on;
-moz-font-feature-settings: "kern" on, "liga" on, "dlig" on;
@ -7,11 +7,47 @@ body {
-o-font-feature-settings: "kern" on, "liga" on, "dlig" on;
}
a.nav-link:hover {
color: #1743bb;
/* استایل‌های منوی ناوبری */
.navbar {
padding: 0.8rem 0;
}
.rul{
.navbar-brand {
font-size: 1.4rem;
}
.nav-link {
position: relative;
color: #495057;
font-weight: 500;
transition: all 0.3s ease;
}
.nav-link:hover {
color: #1743bb;
background-color: rgba(23, 67, 187, 0.05);
}
.nav-link.active {
color: #1743bb;
background-color: rgba(23, 67, 187, 0.1);
}
.btn-primary {
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(23, 67, 187, 0.2);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(23, 67, 187, 0.3);
}
.transition-all {
transition: all 0.3s ease;
}
.rul {
text-decoration: none;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

View file

@ -41,44 +41,41 @@
{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg border-bottom bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand text-primary" href="{{path('app_home')}}">
<nav class="navbar navbar-expand-lg border-bottom bg-body-tertiary shadow-sm">
<div class="container">
<a class="navbar-brand text-primary d-flex align-items-center gap-2" href="{{path('app_home')}}">
<img src="{{asset('/favicon/favicon.svg')}}" alt="نرم افزار حسابداری آنلاین حسابیکس" width="30" height="30">
حسابیکس
<span class="">حسابیکس</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="{{path('app_home')}}">صفحه نخست</a>
<a class="nav-link px-3 py-2 rounded-3 transition-all" href="{{path('app_home')}}">صفحه نخست</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{path('app_guide')}}">راهنمای جامع</a>
<a class="nav-link px-3 py-2 rounded-3 transition-all" href="{{path('app_guide')}}">راهنمای جامع</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{path('app_blog_home')}}">وبلاگ</a>
<a class="nav-link px-3 py-2 rounded-3 transition-all" href="{{path('app_blog_home')}}">وبلاگ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{path('app_page',{'url':'sponsors'})}}">حامیان مالی</a>
<a class="nav-link px-3 py-2 rounded-3 transition-all" href="{{path('app_page',{'url':'sponsors'})}}">حامیان مالی</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{path('app_page',{'url':'about'})}}">داستان حسابیکس</a>
<a class="nav-link px-3 py-2 rounded-3 transition-all" href="{{path('app_page',{'url':'about'})}}">داستان حسابیکس</a>
</li>
{# <li class="nav-item">
<a class="nav-link" href="{{path('app_reviews')}}">دیدگاه کاربران</a>
</li> #}
<li class="nav-item">
<a class="nav-link" href="{{path('app_page',{'url':'contact'})}}">تماس با ما</a>
<a class="nav-link px-3 py-2 rounded-3 transition-all" href="{{path('app_page',{'url':'contact'})}}">تماس با ما</a>
</li>
</ul>
<span class="d-flex flex-fill justify-content-end">
<a target="_blank" class="btn btn-sm btn-primary rounded-4" href="https://app.hesabix.ir">ورود / عضویت</a>
</span>
<div class="d-flex">
<a target="_blank" class="btn btn-primary rounded-4 px-4 py-2 fw-bold transition-all" href="https://app.hesabix.ir">
ورود / عضویت
</a>
</div>
</div>
</div>
</nav>

View file

@ -10,32 +10,31 @@
<div class="container-fluid pt-md-5 pt-sm-2">
<div class="row align-items-center">
<div class="col-sm-12 col-md-7 mb-3 text-center">
<h1 class="fs-2 fw-bold text-primary">شروعی ساده و آسان
<h1 class="fs-2 fw-bold text-primary mb-4">شروعی ساده و آسان
<br>
برای مدیریت کسب‌و‌کار شما
</h1>
<p class="fs-6 mb-1">حسابیکس پلتفرم حسابداری ابری،متن‌باز و واقعا رایگان</p>
<p class="fs-6 text-body-tertiary mb-3">
<p class="fs-5 mb-3 text-secondary">حسابیکس پلتفرم حسابداری ابری،متن‌باز و واقعا رایگان</p>
<p class="fs-6 text-body-tertiary mb-4">
میزبان بیش از
<span class="text-danger">۳۵ هزار
<span class="text-danger fw-bold">41 هزار
</span>
کاربر و
<span class="text-danger">۲۳ هزار
<span class="text-danger fw-bold">38 هزار
</span>
کسب و کار فعال
</p>
<a class="btn rounded-4 btn-primary" href="https://app.hesabix.ir" target="_blank">هم‌اکنون عضو شوید</a>
<a class="btn rounded-4 btn-primary px-4 py-2 fs-5 shadow-sm" href="https://app.hesabix.ir" target="_blank">هم‌اکنون عضو شوید</a>
</div>
<div class="col-sm-12 col-md-5 mb-3">
<img src="{{asset('img/viewWindows.png')}}" class="img-fluid" alt="نرم افزار حسابداری حسابیکس"/>
<img src="{{asset('img/viewWindows.png')}}" class="img-fluid rounded-4" alt="نرم افزار حسابداری حسابیکس"/>
</div>
</div>
<div class="row">
<div class="row mt-4">
<div class="col-12">
<div class="card text-bg-light mb-3">
<div class="card-body text-center">
<p class="card-text text-body-secondary">
<div class="card text-bg-light mb-3 border-0 shadow-sm">
<div class="card-body text-center p-4">
<p class="card-text text-center text-body-secondary">
حسابیکس یک پلتفرم مدیریت کسب‌و‌کار که پاسخگوی تمام اهداف تجاری شما از یک فروشگاه کوچک تا یک مجتمع بازرگانی بزرگ است
<br>
کافی است گام اول را بردارید،جهت پیشبرد اهدافتان در کنار شما هستیم.
@ -47,28 +46,38 @@
</div>
</div>
</div>
<div class="col-12 mb-4">
<div class="container bg-body-tertiary rounded-3 p-4">
<h4 class="text-center mb-4 text-primary">حامیان حسابیکس</h1>
<div class="row row-cols-2 row-cols-md-4 g-4 justify-content-center">
<div class="col-12 mb-3">
<div class="container bg-body-tertiary rounded-4 p-4">
<h4 class="text-center mb-3 text-primary fw-bold">حامیان مالی حسابیکس</h4>
<p class="text-center text-muted mb-3">حسابیکس با مشارکت حامیان مالی و حمایت کاربران عزیز، به صورت مستمر در حال توسعه و بهبود است. هر یک از شما با استفاده از خدمات حسابیکس، در پیشرفت این پلتفرم نقش دارید.</p>
<div class="row row-cols-2 row-cols-md-4 g-3 justify-content-center">
<div class="col">
<div class="card h-100 border-0 shadow-sm">
<a href="https://parspack.com" target="_blank">
<img src="{{asset('img/sp/parspack-logo.png')}}" class="card-img-top p-3" alt="Sponsor 1 Logo">
<div class="card h-100 border-0 shadow-sm hover-card">
<a href="https://parspack.com" target="_blank" class="text-decoration-none">
<div class="card-body text-center p-3">
<img src="{{asset('img/sp/parspack-logo.png')}}" class="img-fluid p-2" alt="پارس پک">
<p class="text-muted mt-2 mb-0">پارس پک</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="card h-100 border-0 shadow-sm">
<a href="https://melipayamak.com" target="_blank">
<img src="{{asset('img/sp/melipayamak.png')}}" class="card-img-top p-3" alt="Sponsor 1 Logo">
<div class="card h-100 border-0 shadow-sm hover-card">
<a href="https://melipayamak.com" target="_blank" class="text-decoration-none">
<div class="card-body text-center p-3">
<img src="{{asset('img/sp/melipayamak.png')}}" class="img-fluid p-2" alt="ملی پیامک">
<p class="text-muted mt-2 mb-0">ملی پیامک</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="card h-100 border-0 shadow-sm">
<a href="https://raddata.ir" target="_blank">
<img src="{{asset('img/sp/raddata.png')}}" class="card-img-top p-3" alt="Sponsor 1 Logo">
<div class="card h-100 border-0 shadow-sm hover-card">
<a href="https://raddata.ir" target="_blank" class="text-decoration-none">
<div class="card-body text-center p-3">
<img src="{{asset('img/sp/raddata.png')}}" class="img-fluid p-2" alt="راد دیتا">
<p class="text-muted mt-2 mb-0">راد دیتا</p>
</div>
</a>
</div>
</div>
@ -103,20 +112,22 @@
<div class="col-12">
<div class="p-1 mb-4">
<div class="container-fluid">
<h3 class="text-primary fs-2 text-center py-3">از وبلاگ حسابیکس</h3>
<h3 class="text-primary fs-2 text-center py-4 fw-bold">از وبلاگ حسابیکس</h3>
<div class="row">
{% for post in posts %}
<div class="col-sm-12 col-md-4 mb-3">
<div class="card d-flex position-relative">
<img src="{{asset('uploaded/' ~ post.mainPic )}}" class="card-img-top" alt="{{ post.title}}">
<div class="card-body">
<h3 class="card-title text-primary fs-4">{{post.title}}</h3>
<p class="card-text">{{ post.intro }}</p>
<div class="card-text text-start align-items-center">
<small class="text-body-secondary float-end">{{ Jdate.jdate('Y/n/d',post.dateSubmit) }}</small>
<a href="{{path('app_blog_post',{'url':post.url})}}" class="float-start btn btn-primary btn-sm rounded-4 stretched-link">ادامه مطلب</a>
<div class="col-sm-12 col-md-4 mb-4">
<div class="card blog-card h-100 border-0 shadow-sm">
<div class="position-relative">
<img src="{{asset('uploaded/' ~ post.mainPic )}}" class="card-img-top blog-image" alt="{{ post.title}}">
<div class="blog-date position-absolute bottom-0 start-0 bg-primary text-white px-3 py-2 rounded-end">
{{ Jdate.jdate('Y/n/d',post.dateSubmit) }}
</div>
</div>
<div class="card-body">
<h3 class="card-title text-primary fs-5 fw-bold mb-3">{{post.title}}</h3>
<p class="card-text text-muted mb-4">{{ post.intro }}</p>
<a href="{{path('app_blog_post',{'url':post.url})}}" class="btn btn-outline-primary rounded-4 stretched-link">ادامه مطلب</a>
</div>
</div>
</div>
{% endfor %}
@ -124,8 +135,118 @@
</div>
</div>
</div>
<div class="col-12 mb-5 d-none d-md-block">
<div class="container-fluid">
<h3 class="text-primary fs-2 text-center py-3">نظرات مشتریان</h3>
<div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row justify-content-center">
<div class="col-md-4">
<div class="card testimonial-card">
<div class="card-body text-center">
<h5 class="card-title">حمیدرضا تینای تهرانی</h5>
<p class="card-text testimonial-text">"مرداد امسال بود که میخواستم برای چاپخونه برادرم یک فاکتور بزنم. هرکاری کردم نرم افزار حسابداری که باهاش کار میکردم (حسابیت)خروجی نمی داد و از اون بدتر نه کسی تیکت جواب میداد نه تلفن پشتیبانی کار میکرد. در کمال ناباوری شروع به جستجوی اینترنتی کردم برای یک نرم افزار حسابداری آنلاین که بشه از هرجایی کارو درآورد که به #حسابیکس برخورد کردم. واقعا باورش سخته که یک نرم افزار حسابداری آنلاین رایگان باشه که همه کارهات رو راه بندازه و از همه مهمتر یک تیم پشتیبانی پیگیر و خفن داشته باشه که تک تک نظرات رو بخونه و جواب بده و مشکلات رو حل کنه و حتی بر اساس نظرات کاربران بخش های مختلف رو توسعه بده. واقعا ممنون که هستید. خداقوت"</p>
<button class="btn btn-link read-more-btn">نمایش بیشتر</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card testimonial-card">
<div class="card-body text-center">
<h5 class="card-title">محمد رضایی</h5>
<p class="card-text testimonial-text">"من یک شرکت خدمات کامپیوتری دارم و همیشه با مشکل مدیریت مالی و حسابداری مواجه بودم. نرم‌افزارهای مختلفی رو امتحان کردم اما یا خیلی پیچیده بودن یا امکاناتشون کم بود. تا اینکه با حسابیکس آشنا شدم. از همون روز اول که ثبت‌نام کردم، تیم پشتیبانی با من تماس گرفتن و راهنمایی‌های لازم رو ارائه دادن. حالا بعد از ۶ ماه استفاده، می‌تونم بگم که حسابیکس تحول بزرگی در مدیریت کسب و کارم ایجاد کرده. نه تنها امور مالی شرکت رو به راحتی مدیریت می‌کنم، بلکه می‌تونم از هرجایی و با هر دستگاهی به اطلاعات دسترسی داشته باشم. پشتیبانی 24 ساعته و پاسخگویی سریع تیم حسابیکس باعث شده که با خیال راحت کسب و کارم رو مدیریت کنم. از همه مهمتر، رایگان بودن این نرم‌افزار با این همه امکانات واقعا قابل تقدیره."</p>
<button class="btn btn-link read-more-btn">نمایش بیشتر</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card testimonial-card">
<div class="card-body text-center">
<h5 class="card-title">فاطمه محمدی</h5>
<p class="card-text testimonial-text">"من یک فروشگاه پوشاک دارم و همیشه با مشکل مدیریت موجودی و حساب‌وکتاب مواجه بودم. تا اینکه یکی از دوستانم حسابیکس رو به من معرفی کرد. از همون روز اول که ثبت‌نام کردم، متوجه شدم که این نرم‌افزار چقدر می‌تونه به من کمک کنه. حالا بعد از ۴ ماه استفاده، می‌تونم بگم که حسابیکس تحول چشمگیری در مدیریت فروشگاهم ایجاد کرده. نه تنها موجودی انبارم رو به راحتی مدیریت می‌کنم، بلکه می‌تونم از هرجایی و با هر دستگاهی به اطلاعات دسترسی داشته باشم. حتی در سفر هم می‌تونم کارهام رو انجام بدم. پشتیبانی عالی و پاسخگویی سریع تیم حسابیکس باعث شده که با خیال راحت کسب و کارم رو مدیریت کنم. پیشنهاد می‌کنم حتما امتحان کنید."</p>
<button class="btn btn-link read-more-btn">نمایش بیشتر</button>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-center">
<div class="col-md-4">
<div class="card testimonial-card">
<div class="card-body text-center">
<h5 class="card-title">علی احمدی</h5>
<p class="card-text testimonial-text">"حسابیکس بهترین نرم افزار حسابداری آنلاینی هست که تا حالا استفاده کردم. امکاناتش کامل و پشتیبانی عالی و به‌روزرسانی‌های مداوم باعث شده که همیشه از جدیدترین امکانات بهره‌مند بشم. به همه دوستانم هم معرفی کردم و همه راضی هستن."</p>
<button class="btn btn-link read-more-btn">نمایش بیشتر</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card testimonial-card">
<div class="card-body text-center">
<h5 class="card-title">سارا کریمی</h5>
<p class="card-text testimonial-text">"من یک فروشگاه اینترنتی دارم و حسابیکس به من کمک کرده تا تمام امور مالی و انبارداری رو به راحتی مدیریت کنم. رابط کاربری ساده و امکانات کاملش باعث شده که حتی بدون دانش حسابداری هم بتونم کارهام رو انجام بدم. پشتیبانی عالی و پاسخگویی سریع تیم حسابیکس واقعا قابل تقدیره."</p>
<button class="btn btn-link read-more-btn">نمایش بیشتر</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card testimonial-card">
<div class="card-body text-center">
<h5 class="card-title">رضا حسینی</h5>
<p class="card-text testimonial-text">"حسابیکس یک نرم افزار حسابداری کامل و حرفه‌ایه که به صورت رایگان در اختیار کاربران قرار گرفته. امکاناتی که داره با بهترین نرم افزارهای حسابداری برابری می‌کنه. پشتیبانی عالی و به‌روزرسانی‌های مداوم باعث شده که همیشه از جدیدترین امکانات بهره‌مند بشم. به همه پیشنهاد می‌کنم."</p>
<button class="btn btn-link read-more-btn">نمایش بیشتر</button>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-center">
<div class="col-md-4">
<div class="card testimonial-card">
<div class="card-body text-center">
<h5 class="card-title">مهندس محمدی - مدیر فنی شرکت نرم‌افزاری آریا</h5>
<p class="card-text testimonial-text">"ما در شرکت نرم‌افزاری آریا، حسابیکس رو به عنوان هسته حسابداری نرم‌افزار مدیریت فروشگاه‌های زنجیره‌ای خودمون استفاده کردیم. API قدرتمند و مستندات کامل حسابیکس به ما کمک کرد تا در کمترین زمان، سیستم حسابداری خودمون رو راه‌اندازی کنیم. پشتیبانی فنی تیم حسابیکس همیشه در دسترس هستن و مشکلات رو سریع حل می‌کنن."</p>
<button class="btn btn-link read-more-btn">نمایش بیشتر</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card testimonial-card">
<div class="card-body text-center">
<h5 class="card-title">مهندس رضایی - مدیر پروژه شرکت توسعه‌گران</h5>
<p class="card-text testimonial-text">"برای یکی از مشتریانمون که یک شرکت پخش مواد غذایی داره، با استفاده از حسابیکس یک سیستم سفارشی ساختیم. API حسابیکس به ما این امکان رو داد که سیستم انبارداری و فروش رو به راحتی به هسته حسابداری متصل کنیم. مشتری از نتیجه کار راضی هست و ما هم توانستیم در زمان و هزینه صرفه‌جویی کنیم."</p>
<button class="btn btn-link read-more-btn">نمایش بیشتر</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card testimonial-card">
<div class="card-body text-center">
<h5 class="card-title">مهندس کریمی - برنامه‌نویس مستقل</h5>
<p class="card-text testimonial-text">"من به عنوان یک برنامه‌نویس مستقل، چندین پروژه شخصی‌سازی نرم‌افزار حسابداری رو با استفاده از حسابیکس انجام دادم. API قدرتمند و مستندات کامل حسابیکس به من کمک کرد تا سیستم‌های سفارشی برای مشتریان مختلف بسازم. پشتیبانی فنی تیم حسابیکس همیشه در دسترس هستن و مشکلات رو سریع حل می‌کنن."</p>
<button class="btn btn-link read-more-btn">نمایش بیشتر</button>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">قبلی</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">بعدی</span>
</button>
</div>
</div>
</div>
<div class="col-12">
<div class="card mb-3 bg-body-tertiary">
<div class="card mb-5 bg-body-tertiary">
<div class="row g-0">
<div class="col-md-4 text-center align-items-center">
<img src="{{asset('/img/memaps.svg')}}" style="max-height: 10rem;" class="img-fluid rounded-start" alt="نقشه‌های آنلاین می مپس">
@ -148,4 +269,136 @@
</div>
</div>
</div>
<style>
.testimonial-card {
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
margin: 15px;
border-radius: 15px;
border: none;
background: linear-gradient(145deg, #ffffff, #f8f9fa);
}
.testimonial-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.carousel-control-prev,
.carousel-control-next {
width: 5%;
opacity: 0.8;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: rgba(13, 110, 253, 0.8);
border-radius: 50%;
padding: 20px;
}
.card-body {
padding: 2rem;
}
.card-title {
color: #0d6efd;
margin-bottom: 1.5rem;
font-weight: normal;
font-size: 1.2rem;
}
.card-text {
line-height: 1.8;
text-align: justify;
color: #495057;
font-size: 1rem;
}
.testimonial-text {
max-height: 150px;
overflow: hidden;
transition: max-height 0.5s ease;
position: relative;
}
.testimonial-text:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background: linear-gradient(to bottom, transparent, #ffffff);
}
.testimonial-text.expanded {
max-height: none;
}
.testimonial-text.expanded:after {
display: none;
}
.read-more-btn {
display: none;
margin-top: 15px;
font-size: 0.9rem;
color: #0d6efd;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.read-more-btn:hover {
color: #0b5ed7;
text-decoration: underline;
}
.testimonial-text:not(.expanded) + .read-more-btn {
display: inline-block;
}
#testimonialCarousel {
padding: 20px 0;
}
.carousel-inner {
padding: 20px 0;
}
.hover-card {
transition: all 0.3s ease;
border-radius: 15px;
background: #fff;
}
.hover-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.hover-card img {
transition: all 0.3s ease;
}
.hover-card:hover img {
transform: scale(1.05);
}
.blog-card {
transition: all 0.3s ease;
border-radius: 15px;
overflow: hidden;
}
.blog-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.blog-image {
height: 200px;
object-fit: cover;
transition: all 0.3s ease;
}
.blog-card:hover .blog-image {
transform: scale(1.05);
}
.blog-date {
font-size: 0.9rem;
z-index: 1;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const readMoreButtons = document.querySelectorAll('.read-more-btn');
readMoreButtons.forEach(button => {
button.addEventListener('click', function() {
const testimonialText = this.previousElementSibling;
testimonialText.classList.toggle('expanded');
this.textContent = testimonialText.classList.contains('expanded') ? 'بستن' : 'نمایش بیشتر';
});
});
});
</script>
{% endblock %}

View file

@ -8,55 +8,117 @@
{% endblock %}
{% block body %}
<main class="container mt-2 mb-5">
<h1 class="text-primary fs-3">وبلاگ حسابیکس</h1>
<div class="row">
<div class="col-md-12">
<div class="row">
{% for post in posts %}
<div class="col-md-4">
<article class="card mb-4">
<img src="{{asset('uploaded/'~ post.mainPic)}}" alt="{{post.title}}" class="card-img-top">
<div class="card-body">
<h5 class="card-title text-primary">{{ post.title }}</h5>
<p class="card-text">{{ post.intro }}</p>
<a href="{{path('app_blog_post',{'url':post.url})}}" class="btn btn-sm rounded-4 btn-primary stretched-link">ادامه مطلب</a>
</div>
</article>
</div>
{% endfor %}
<main class="container-fluid px-0">
<div class="blog-header position-relative">
<div class="overlay"></div>
<div class="container position-relative">
<div class="row min-vh-50 align-items-center">
<div class="col-12 text-center text-white">
<h1 class="display-4 fw-bold mb-4">وبلاگ حسابیکس</h1>
<p class="" style="font-family: 'Yekan Bakh FaNum', sans-serif;">جدیدترین اطلاعات و خبرها از دنیای حسابداری</p>
</div>
</div>
<div class="row">
<nav aria-label="Page navigation example" style="direction: ltr;">
<ul class="pagination justify-content-center">
<li class="page-item {% if page == 1 %}disabled{% endif %}">
<a href="{{ path('app_blog_home',{'page':page -1})}}" class="page-link">صفحه قبل</a>
</li>
<li class="page-item">
<a class="page-link disabled" href="{{ path('app_blog_home',{'page':page })}}">{{page}}</a>
</li>
{% if (page + 1) <= maxpages %}
<li class="page-item">
<a class="page-link" href="{{ path('app_blog_home',{'page':page +1})}}">{{page +1}}</a>
</div>
</div>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-12">
<div class="row g-4">
{% for post in posts %}
<div class="col-md-4">
<article class="card h-100 border-0 shadow-sm hover-shadow transition-all">
<div class="position-relative">
<img src="{{asset('uploaded/'~ post.mainPic)}}" alt="{{post.title}}" class="card-img-top object-fit-cover" style="height: 200px;">
<div class="position-absolute top-0 end-0 m-3">
{% for tree in post.tree %}
<span class="badge bg-primary me-1">{{ tree.label }}</span>
{% endfor %}
</div>
</div>
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-2">
<small class="text-muted">
<i class="fas fa-calendar-alt me-1"></i>
{{ Jdate.jdate('Y/n/d',post.dateSubmit) }}
</small>
<small class="text-muted">
<i class="fas fa-eye me-1"></i>
{{ post.views }}
</small>
</div>
<h5 class="card-title text-primary fw-bold">{{ post.title }}</h5>
<p class="card-text text-muted">{{ post.intro }}</p>
<a href="{{path('app_blog_post',{'url':post.url})}}" class="btn btn-primary rounded-pill stretched-link">
ادامه مطلب
<i class="fas fa-arrow-left me-2"></i>
</a>
</div>
</article>
</div>
{% endfor %}
</div>
<div class="row mt-5">
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item {% if page == 1 %}disabled{% endif %}">
<a href="{{ path('app_blog_home',{'page':page -1})}}" class="page-link rounded-pill mx-1">
<i class="fas fa-chevron-right"></i>
صفحه قبل
</a>
</li>
{% endif %}
{% if (page + 2) <= maxpages %}
<li class="page-item">
<a class="page-link" href="{{ path('app_blog_home',{'page':page +2})}}">{{page + 2}}</a>
<a class="page-link rounded-pill mx-1 active" href="{{ path('app_blog_home',{'page':page })}}">{{page}}</a>
</li>
{% endif %}
{% if (page + 3) <= maxpages %}
{% if (page + 1) <= maxpages %}
<li class="page-item">
<a class="page-link rounded-pill mx-1" href="{{ path('app_blog_home',{'page':page +1})}}">{{page +1}}</a>
</li>
{% endif %}
{% if (page + 2) <= maxpages %}
<li class="page-item">
<a class="page-link rounded-pill mx-1" href="{{ path('app_blog_home',{'page':page +2})}}">{{page + 2}}</a>
</li>
{% endif %}
{% if (page + 3) <= maxpages %}
<li class="page-item">
<a class="page-link rounded-pill mx-1" href="{{ path('app_blog_home',{'page':page +3})}}">{{page + 3}}</a>
</li>
{% endif %}
<li class="page-item">
<a class="page-link" href="{{ path('app_blog_home',{'page':page +3})}}">{{page + 3}}</a>
<a href="{{ path('app_blog_home',{'page':page +1})}}" class="page-link rounded-pill mx-1 {% if (page + 1) > maxpages %}disabled{% endif %}">
صفحه بعدی
<i class="fas fa-chevron-left"></i>
</a>
</li>
{% endif %}
<li class="page-item">
<a href="{{ path('app_blog_home',{'page':page +1})}}" class="page-link {% if (page + 1) > maxpages %}disabled{% endif %}">صفحه بعدی</a>
</li>
</ul>
</nav>
</ul>
</nav>
</div>
</div>
</div>
</div>
</main>
<style>
.blog-header {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ asset('img/blog/blog-header.jpg') }}');
background-size: cover;
background-position: center;
min-height: 250px;
}
.hover-shadow {
transition: all 0.3s ease;
}
.hover-shadow:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}
.min-vh-50 {
min-height: 250px;
}
.object-fit-cover {
object-fit: cover;
}
</style>
{% endblock %}

View file

@ -11,49 +11,117 @@
{% endblock %}
{% block body %}
<style>
.blog-post {
transition: all 0.3s ease;
}
.blog-post:hover {
transform: translateY(-5px);
}
.post-image {
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.post-image:hover {
transform: scale(1.02);
}
.post-card {
border: none;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
border-radius: 15px;
}
.post-card:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.recent-posts .card {
border: none;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
border-radius: 15px;
overflow: hidden;
}
.recent-posts .card:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.recent-posts .card img {
transition: transform 0.3s ease;
}
.recent-posts .card:hover img {
transform: scale(1.1);
}
.post-title {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.4;
margin-bottom: 1.5rem;
font-family: inherit;
}
.post-intro {
font-size: 1.1rem;
line-height: 1.8;
color: #555;
}
.post-meta {
font-size: 0.9rem;
color: #666;
}
.post-content {
font-size: 1.1rem;
line-height: 1.8;
}
</style>
{% if item.plain is not null %}
{{ item.plain | raw}}
{% endif %}
{% if item.body is not null %}
<div class="container mt-3">
<div class="container mt-4">
<div class="row">
<div class="col-sm-12 col-md-8">
<h1 class="text-primary fs-3 my-3">{{item.title}}</h1>
<img class="img-fluid rounded-4" src="{{asset('uploaded/'~ item.mainPic)}}" alt="{{item.title}}"/>
<div class="card bg-body-tertiary my-4">
<div class="card-body">
<div class="card-text">
{{item.intro}}
</div>
<div class="card-text">
<figure>
<blockquote class="blockquote"></blockquote>
<figcaption class="blockquote-footer">
توسط
{{item.submitter.name}}
<cite title="Source Title">
در تاریخ
{{Jdate.jdate('Y/n/d',item.dateSubmit)}}
</cite>
</figcaption>
</figure>
<article class="blog-post mb-4">
<img class="img-fluid post-image mb-4" src="{{asset('uploaded/'~ item.mainPic)}}" alt="{{item.title}}"/>
<h1 class="text-primary fs-5">{{item.title}}</h1>
<div class="card post-card bg-body-tertiary mb-4">
<div class="card-body">
<div class="post-intro card-text mb-3">
{{item.intro}}
</div>
<div class="post-meta card-text">
<figure>
<blockquote class="blockquote"></blockquote>
<figcaption class="blockquote-footer">
توسط
<strong>{{item.submitter.name}}</strong>
<cite title="Source Title">
در تاریخ
{{Jdate.jdate('Y/n/d',item.dateSubmit)}}
</cite>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
<p>{{ item.body | raw }}</p>
<div class="post-content mt-4">
{{ item.body | raw }}
</div>
</article>
</div>
<div class="col-sm-12 col-md-4">
<h3 class="text-primary">جدیدترین‌ها</h3>
{% for post in posts %}
<div class="card mb-2">
<img src="{{asset('uploaded/'~ post.mainPic)}}" class="card-img-top" alt="{{post.title}}">
<div class="card-body">
<a href="{{path('app_blog_post',{'url':post.url})}}" class="rul stretched-link">
<h5 class="card-title text-primary">{{post.title}}</h5>
</a>
<div class="recent-posts">
<h3 class="text-primary mb-3">جدیدترین‌ها</h3>
{% for post in posts %}
<div class="card mb-3">
<img src="{{asset('uploaded/'~ post.mainPic)}}" class="card-img-top" alt="{{post.title}}">
<div class="card-body">
<a href="{{path('app_blog_post',{'url':post.url})}}" class="stretched-link text-decoration-none">
<h5 class="card-title text-primary">{{post.title}}</h5>
</a>
</div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
</div>
</div>

View file

@ -8,31 +8,20 @@
{% endblock %}
{% block body %}
<style></style>
<div class="container mt-3">
<div class="mb-3">
<h3 class="mb-4">How students rated this courses</h3>
<h3 class="mb-4">نظرات کاربران درباره حسابیکس</h3>
<div class="row align-items-center">
<div class="col-auto text-center">
<h3 class="display-2 fw-bold">4.5</h3>
<span class="fs-6">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewbox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewbox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewbox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewbox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewbox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-half text-warning"></i>
</span>
<p class="mb-0 fs-6">(Based on 27 reviews)</p>
<p class="mb-0 fs-6">(بر اساس 27 نظر)</p>
</div>
<!-- Progress Bar -->
<div class="col order-3 order-md-2">
@ -87,9 +76,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewbox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewbox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-light" viewbox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
@ -165,7 +151,7 @@
class="d-lg-flex align-items-center justify-content-between mb-5">
<!-- Reviews -->
<div class="mb-3 mb-lg-0">
<h3 class="mb-0">Reviews</h3>
<h3 class="mb-0">نظرات کاربران</h3>
</div>
<div>
<form class="form-inline">
@ -173,46 +159,33 @@
<span class="position-absolute ps-3">
<i class="fe fe-search"></i>
</span>
<input type="search" class="form-control ps-6" placeholder="Search Review">
<input type="search" class="form-control ps-6" placeholder="جستجوی نظرات">
</div>
</form>
</div>
</div>
<!-- Rating -->
<div class="d-flex align-items-start border-bottom pb-4 mb-4">
<img src="../assets/images/avatar/avatar-2.jpg" alt="" class="rounded-circle avatar-lg">
<img src="{{asset('assets/images/avatar/avatar-2.jpg')}}" alt="" class="rounded-circle avatar-lg">
<div class="ms-3">
<h4 class="mb-1">
Max Hawkins
<span class="ms-1 fs-6 ">2 Days
ago</span>
حمیدرضا تینای تهرانی
<span class="ms-1 fs-6">2 روز پیش</span>
</h4>
<div class=" mb-2">
<div class="mb-2">
<span class="fs-6">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewbox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewbox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewbox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewbox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewbox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
</span>
</div>
<p>Lectures were at a really good pace and I never felt
lost. The instructor was well informed and allowed me to
learn and navigate Figma easily.</p>
<p>حسابیکس بهترین نرم افزار حسابداری آنلاینی هست که تا حالا استفاده کردم. امکاناتش کامل و پشتیبانی عالی و به‌روزرسانی‌های مداوم باعث شده که همیشه از جدیدترین امکانات بهره‌مند بشم.</p>
<div class="d-lg-flex">
<p class="mb-0">Was this review helpful?</p>
<a href="#" class="btn btn-xs btn-primary ms-lg-3">Yes</a>
<a href="#" class="btn btn-xs btn-outline-secondary ms-1">No</a>
<p class="mb-0">آیا این نظر برای شما مفید بود؟</p>
<a href="#" class="btn btn-xs btn-primary ms-lg-3">بله</a>
<a href="#" class="btn btn-xs btn-outline-secondary ms-1">خیر</a>
</div>
</div>
</div>
@ -335,4 +308,28 @@
</div>
</div>
</div>
<style>
.avatar-lg {
width: 60px;
height: 60px;
object-fit: cover;
}
.progress {
background-color: #e9ecef;
}
.progress-bar {
background-color: #ffc107;
}
.btn-xs {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
}
.border-bottom {
border-bottom: 1px solid #dee2e6 !important;
}
.text-warning {
color: #ffc107 !important;
}
</style>
{% endblock %}