<div class="container mb-5">
<div class="row g-4 p-3 align-items-center">
<div class="customize d-flex flex-column flex-lg-row p-5 g-4 align-items-center">
<div class="row">
<div class="col-12">
<h2 class="fw-bold mb-3 inner-sec-title">سوالات متداول</h2>
</div>
<div class="col-12 w-100">
<section id="faq" class="py-5 w-100">
<div class="container w-100">
<div class="accordion w-100 bg-none" style="background-color: transparent!important;"
id="faqAccordion">
{% set faqs = [
{
question: "آیا برای استفاده از سایتساز نیاز به دانش برنامهنویسی دارم؟",
answer: "خیر، همه چیز به صورت Drag & Drop و آماده است. بدون هیچ دانش کدنویسی میتوانید سایت یا فروشگاه خودتان را بسازید."
},
{
question: "آیا هاست و دامنه هم شامل پلنها میشود؟",
answer: "بله، تمام سایتها روی هاست سریع و امن ما میزبانی میشوند. همچنین میتوانید دامنه اختصاصی خودتان را متصل کنید."
},
{
question: "چطور میتوانم درگاه پرداخت به سایتم اضافه کنم؟",
answer: "فقط با چند کلیک در تنظیمات فروشگاه، میتوانید درگاههای پرداخت ایرانی مثل زرینپال یا آیدیپی را متصل کنید."
},
{
question: "آیا امکان ارتقا پلن وجود دارد؟",
answer: "بله، هر زمان بخواهید میتوانید با پرداخت مابهالتفاوت پلن خود را ارتقا دهید."
},
{
question: "پشتیبانی شما به چه صورت است؟",
answer: "تیم پشتیبانی ما از طریق تیکت، چت آنلاین و تلگرام به صورت ۲۴/۷ پاسخگوی شما خواهد بود."
}
] %}
{% for faq in faqs %}
<div class="accordion-item" style="background-color: transparent!important;">
<h2 class="accordion-header" style="background-color: transparent!important;"
id="heading{{ loop.index }}">
<button class="accordion-button {{ not loop.first ? 'collapsed' }}"
style="background-color: transparent!important;"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapse{{ loop.index }}"
aria-expanded="{{ loop.first ? 'true' : 'false' }}"
aria-controls="collapse{{ loop.index }}">
{{ faq.question }}
</button>
</h2>
<div id="collapse{{ loop.index }}"
style="background-color: transparent!important;"
class="accordion-collapse collapse {{ loop.first ? 'show' }}"
aria-labelledby="heading{{ loop.index }}"
data-bs-parent="#faqAccordion">
<div class="accordion-body">
{{ faq.answer }}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<style>
.accordion-item {
border: none !important;
}
.accordion-button:focus {
border: none !important;
}
.accordion-button:focus {
box-shadow: none !important; /* حذف هاله آبی */
border-color: transparent !important; /* حذف خط دور */
outline: 0 !important;
}
.accordion-item {
border: none !important;
}
.accordion-button:not(.collapsed) {
box-shadow: none !important;
}
.accordion-button {
text-align: right !important;
}
</style>