<!-- Accordion Container -->
<div class="grid gap-y-1.5" x-data="{ open: null }">
    <!-- Accordion Item -->
    <div class="grid gap-y-1.5 bg-background border rounded-lg">
        <!-- Accordion Button -->
        <button class="flex items-center relative w-full text-start cursor-pointer pe-9 ps-4 py-3"
            x-bind:class="open === 1 ? 'text-foreground' : 'text-muted-foreground'"
            x-on:click="open = (open === 1 ? null : 1)">
            <span class="font-semibold sm:text-sm text-xs">چگونه شروع کنم؟</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                class="size-4 absolute end-4 transition-transform" x-bind:class="{ 'rotate-180': open === 1 }">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m6 9l6 6l6-6" />
            </svg>
        </button>

        <!-- Accordion Content -->
        <div x-cloak x-show="open === 1">
            <div class="px-4 pb-5">
                <!-- (Remove This) -->
                <p class="font-medium text-xs text-muted-foreground">
                    برای شروع، ابتدا باید یک حساب کاربری ایجاد کنید. پس از آن، می‌توانید پروفایل
                    خود را تکمیل کرده و اولین پروژه خود را تعریف کنید. در صورت نیاز به راهنمایی
                    بیشتر، به بخش آموزش‌های ما مراجعه کنید.
                </p>

                <!-- ( Actual Accordion Content Goes Here ) -->
            </div>
        </div>
    </div><!-- end Accordion Item -->

    <!-- Accordion Item -->
    <div class="grid gap-y-1.5 bg-background border rounded-lg">
        <!-- Accordion Button -->
        <button class="flex items-center relative w-full text-start cursor-pointer pe-9 ps-4 py-3"
            x-bind:class="open === 2 ? 'text-foreground' : 'text-muted-foreground'"
            x-on:click="open = (open === 2 ? null : 2)">
            <span class="font-semibold sm:text-sm text-xs">هزینه‌ها چگونه محاسبه می‌شوند؟</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                class="size-4 absolute end-4 transition-transform" x-bind:class="{ 'rotate-180': open === 2 }">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m6 9l6 6l6-6" />
            </svg>
        </button>

        <!-- Accordion Content -->
        <div x-cloak x-show="open === 2">
            <div class="px-4 pb-5">
                <!-- (Remove This) -->
                <p class="font-medium text-xs text-muted-foreground">
                    هزینه‌ها بسته به نوع خدمات، مدت زمان پروژه و سطح تخصص مورد نیاز متفاوت است.
                    شما می‌توانید قبل از شروع پروژه، پیش‌بینی هزینه را مشاهده و تایید کنید.
                    جزئیات بیشتر در صفحه تعرفه‌ها موجود است.
                </p>

                <!-- ( Actual Accordion Content Goes Here ) -->
            </div>
        </div>
    </div><!-- end Accordion Item -->

    <!-- Accordion Item -->
    <div class="grid gap-y-1.5 bg-background border rounded-lg">
        <!-- Accordion Button -->
        <button class="flex items-center relative w-full text-start cursor-pointer pe-9 ps-4 py-3"
            x-bind:class="open === 3 ? 'text-foreground' : 'text-muted-foreground'"
            x-on:click="open = (open === 3 ? null : 3)">
            <span class="font-semibold sm:text-sm text-xs">آیا پشتیبانی وجود دارد؟</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                class="size-4 absolute end-4 transition-transform" x-bind:class="{ 'rotate-180': open === 3 }">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m6 9l6 6l6-6" />
            </svg>
        </button>

        <!-- Accordion Content -->
        <div x-cloak x-show="open === 3">
            <div class="px-4 pb-5">
                <!-- (Remove This) -->
                <p class="font-medium text-xs text-muted-foreground">
                    بله، تیم پشتیبانی ما به صورت 24/7 آماده پاسخگویی به سوالات و رفع مشکلات
                    شماست. می‌توانید از طریق ایمیل، تلفن یا چت آنلاین با ما در ارتباط باشید.
                    همچنین، بخش سوالات متداول نیز می‌تواند پاسخ بسیاری از ابهامات شما را ارائه
                    دهد.
                </p>

                <!-- ( Actual Accordion Content Goes Here ) -->
            </div>
        </div>
    </div><!-- end Accordion Item -->
</div><!-- end Accordion Container -->

<!-- Accordion Container -->
<div class="grid gap-y-1.5">
    <!-- Accordion Item -->
    <div class="grid gap-y-1.5 bg-background border rounded-lg" x-data="{ isOpen: false }">
        <!-- Accordion Button -->
        <button class="flex items-center relative w-full text-start cursor-pointer pe-9 ps-4 py-3"
            x-bind:class="isOpen ? 'text-foreground' : 'text-muted-foreground'" x-on:click="isOpen = !isOpen">
            <span class="font-semibold sm:text-sm text-xs">چگونه شروع کنم؟</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                class="size-4 absolute end-4 transition-transform" x-bind:class="{ 'rotate-180': isOpen }">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m6 9l6 6l6-6" />
            </svg>
        </button>

        <!-- Accordion Content -->
        <div x-cloak x-show="isOpen">
            <div class="px-4 pb-5">
                <!-- (Remove This) -->
                <p class="font-medium text-xs text-muted-foreground">
                    برای شروع، ابتدا باید یک حساب کاربری ایجاد کنید. پس از آن، می‌توانید پروفایل
                    خود را تکمیل کرده و اولین پروژه خود را تعریف کنید. در صورت نیاز به راهنمایی
                    بیشتر، به بخش آموزش‌های ما مراجعه کنید.
                </p>

                <!-- ( Actual Accordion Content Goes Here ) -->
            </div>
        </div>
    </div><!-- end Accordion Item -->

    <!-- Accordion Item -->
    <div class="grid gap-y-1.5 bg-background border rounded-lg" x-data="{ isOpen: false }">
        <!-- Accordion Button -->
        <button class="flex items-center relative w-full text-start cursor-pointer pe-9 ps-4 py-3"
            x-bind:class="isOpen ? 'text-foreground' : 'text-muted-foreground'" x-on:click="isOpen = !isOpen">
            <span class="font-semibold sm:text-sm text-xs">هزینه‌ها چگونه محاسبه می‌شوند؟</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                class="size-4 absolute end-4 transition-transform" x-bind:class="{ 'rotate-180': isOpen }">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m6 9l6 6l6-6" />
            </svg>
        </button>

        <!-- Accordion Content -->
        <div x-cloak x-show="isOpen">
            <div class="px-4 pb-5">
                <!-- (Remove This) -->
                <p class="font-medium text-xs text-muted-foreground">
                    هزینه‌ها بسته به نوع خدمات، مدت زمان پروژه و سطح تخصص مورد نیاز متفاوت است.
                    شما می‌توانید قبل از شروع پروژه، پیش‌بینی هزینه را مشاهده و تایید کنید.
                    جزئیات بیشتر در صفحه تعرفه‌ها موجود است.
                </p>

                <!-- ( Actual Accordion Content Goes Here ) -->
            </div>
        </div>
    </div><!-- end Accordion Item -->

    <!-- Accordion Item -->
    <div class="grid gap-y-1.5 bg-background border rounded-lg" x-data="{ isOpen: false }">
        <!-- Accordion Button -->
        <button class="flex items-center relative w-full text-start cursor-pointer pe-9 ps-4 py-3"
            x-bind:class="isOpen ? 'text-foreground' : 'text-muted-foreground'" x-on:click="isOpen = !isOpen">
            <span class="font-semibold sm:text-sm text-xs">آیا پشتیبانی وجود دارد؟</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                class="size-4 absolute end-4 transition-transform" x-bind:class="{ 'rotate-180': isOpen }">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m6 9l6 6l6-6" />
            </svg>
        </button>

        <!-- Accordion Content -->
        <div x-cloak x-show="isOpen">
            <div class="px-4 pb-5">
                <!-- (Remove This) -->
                <p class="font-medium text-xs text-muted-foreground">
                    بله، تیم پشتیبانی ما به صورت 24/7 آماده پاسخگویی به سوالات و رفع مشکلات
                    شماست. می‌توانید از طریق ایمیل، تلفن یا چت آنلاین با ما در ارتباط باشید.
                    همچنین، بخش سوالات متداول نیز می‌تواند پاسخ بسیاری از ابهامات شما را ارائه
                    دهد.
                </p>

                <!-- ( Actual Accordion Content Goes Here ) -->
            </div>
        </div>
    </div><!-- end Accordion Item -->
</div><!-- end Accordion Container -->

<!-- Accordion Container -->
<div class="grid gap-y-1.5">
    <!-- Accordion Item -->
    <div class="grid gap-y-1.5 bg-background border rounded-lg" x-data="{ isOpen: false }">
        <!-- Accordion Button -->
        <button class="flex items-center relative w-full text-start cursor-pointer pe-9 ps-4 py-3"
            x-bind:class="isOpen ? 'text-foreground' : 'text-muted-foreground'" x-on:click="isOpen = !isOpen">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 me-3">
                <path fill="currentColor" fill-rule="evenodd"
                    d="M20.337 3.664c.213.212.354.486.404.782c.294 1.711.657 5.195-.906 6.76c-1.77 1.768-8.485 5.517-10.611 6.683a.99.99 0 0 1-1.176-.173l-.882-.88l-.877-.884a.99.99 0 0 1-.173-1.177c1.165-2.126 4.913-8.841 6.682-10.611c1.562-1.563 5.046-1.198 6.757-.904c.296.05.57.191.782.404M5.407 7.576l4-.341l-2.69 4.48l-2.857-.334a.996.996 0 0 1-.565-1.694zm11.357 7.02l-.34 4l-2.111 2.113a.996.996 0 0 1-1.69-.565l-.422-2.807zm.84-6.21a1.99 1.99 0 1 1-3.98 0a1.99 1.99 0 0 1 3.98 0"
                    clip-rule="evenodd" />
            </svg>
            <span class="font-semibold sm:text-sm text-xs">چگونه شروع کنم؟</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                class="size-4 absolute end-4 transition-transform" x-bind:class="{ 'rotate-180': isOpen }">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m6 9l6 6l6-6" />
            </svg>
        </button>

        <!-- Accordion Content -->
        <div x-cloak x-show="isOpen">
            <div class="px-4 pb-5">
                <!-- (Remove This) -->
                <p class="font-medium text-xs text-muted-foreground">
                    برای شروع، ابتدا باید یک حساب کاربری ایجاد کنید. پس از آن، می‌توانید پروفایل
                    خود را تکمیل کرده و اولین پروژه خود را تعریف کنید. در صورت نیاز به راهنمایی
                    بیشتر، به بخش آموزش‌های ما مراجعه کنید.
                </p>

                <!-- ( Actual Accordion Content Goes Here ) -->
            </div>
        </div>
    </div><!-- end Accordion Item -->

    <!-- Accordion Item -->
    <div class="grid gap-y-1.5 bg-background border rounded-lg" x-data="{ isOpen: false }">
        <!-- Accordion Button -->
        <button class="flex items-center relative w-full text-start cursor-pointer pe-9 ps-4 py-3"
            x-bind:class="isOpen ? 'text-foreground' : 'text-muted-foreground'" x-on:click="isOpen = !isOpen">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 me-3">
                <g fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M7 6a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-2v-4a3 3 0 0 0-3-3H7z"
                        clip-rule="evenodd" />
                    <path fill-rule="evenodd"
                        d="M2 11a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm7.5 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5"
                        clip-rule="evenodd" />
                    <path d="M10.5 14.5a1 1 0 1 1-2 0a1 1 0 0 1 2 0" />
                </g>
            </svg>
            <span class="font-semibold sm:text-sm text-xs">هزینه‌ها چگونه محاسبه می‌شوند؟</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                class="size-4 absolute end-4 transition-transform" x-bind:class="{ 'rotate-180': isOpen }">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m6 9l6 6l6-6" />
            </svg>
        </button>

        <!-- Accordion Content -->
        <div x-cloak x-show="isOpen">
            <div class="px-4 pb-5">
                <!-- (Remove This) -->
                <p class="font-medium text-xs text-muted-foreground">
                    هزینه‌ها بسته به نوع خدمات، مدت زمان پروژه و سطح تخصص مورد نیاز متفاوت است.
                    شما می‌توانید قبل از شروع پروژه، پیش‌بینی هزینه را مشاهده و تایید کنید.
                    جزئیات بیشتر در صفحه تعرفه‌ها موجود است.
                </p>

                <!-- ( Actual Accordion Content Goes Here ) -->
            </div>
        </div>
    </div><!-- end Accordion Item -->

    <!-- Accordion Item -->
    <div class="grid gap-y-1.5 bg-background border rounded-lg" x-data="{ isOpen: false }">
        <!-- Accordion Button -->
        <button class="flex items-center relative w-full text-start cursor-pointer pe-9 ps-4 py-3"
            x-bind:class="isOpen ? 'text-foreground' : 'text-muted-foreground'" x-on:click="isOpen = !isOpen">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 me-3">
                <g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
                    <path
                        d="M4 3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1v2a1 1 0 0 0 1.707.707L9.414 13H15a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1z" />
                    <path
                        d="M8.023 17.215q.05-.046.098-.094L10.243 15H15a3 3 0 0 0 3-3V8h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-1v2a1 1 0 0 1-1.707.707L14.586 18H9a1 1 0 0 1-.977-.785" />
                </g>
            </svg>
            <span class="font-semibold sm:text-sm text-xs">آیا پشتیبانی وجود دارد؟</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                class="size-4 absolute end-4 transition-transform" x-bind:class="{ 'rotate-180': isOpen }">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m6 9l6 6l6-6" />
            </svg>
        </button>

        <!-- Accordion Content -->
        <div x-cloak x-show="isOpen">
            <div class="px-4 pb-5">
                <!-- (Remove This) -->
                <p class="font-medium text-xs text-muted-foreground">
                    بله، تیم پشتیبانی ما به صورت 24/7 آماده پاسخگویی به سوالات و رفع مشکلات
                    شماست. می‌توانید از طریق ایمیل، تلفن یا چت آنلاین با ما در ارتباط باشید.
                    همچنین، بخش سوالات متداول نیز می‌تواند پاسخ بسیاری از ابهامات شما را ارائه
                    دهد.
                </p>

                <!-- ( Actual Accordion Content Goes Here ) -->
            </div>
        </div>
    </div><!-- end Accordion Item -->
</div><!-- end Accordion Container -->