صفحه فرود

<!-- Layout Container -->
<div class="flex flex-col min-h-screen w-full bg-surface-1" x-data="{ isNavigationOpen: false }">
    <!-- Header -->
    <header class="sticky top-0 py-2.5 z-30">
        <div class="w-full max-w-7xl px-4 mx-auto">
            <div class="flex items-center gap-x-5 bg-surface/85 backdrop-blur-md dark:bg-surface-2/85 rounded-2xl p-5">
                <button type="button"
                    class="hidden max-md:inline-flex items-center justify-center size-9 bg-surface-2 dark:bg-surface-3 rounded-lg cursor-pointer text-surface-2-content hover:text-surface-content"
                    x-on:click="isNavigationOpen = true">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
                        <path fill-rule="evenodd"
                            d="M2 4.75A.75.75 0 0 1 2.75 4h10.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75Zm0 6.5a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z"
                            clip-rule="evenodd" />
                    </svg>
                </button>

                <span class="hidden max-md:inline-block w-px h-4 bg-border"></span>

                <a href="#" class="flex flex-col items-start gap-y-1">
                    <span class="flex items-center gap-x-1">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-6">
                            <path fill-rule="evenodd"
                                d="M8 2C4.262 2 1 4.57 1 8c0 1.86.98 3.486 2.455 4.566a3.472 3.472 0 0 1-.469 1.26.75.75 0 0 0 .713 1.14 6.961 6.961 0 0 0 3.06-1.06c.403.062.818.094 1.241.094 3.738 0 7-2.57 7-6s-3.262-6-7-6ZM5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm7-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
                                clip-rule="evenodd" />
                        </svg>
                        <span class="font-bold text-lg">زبانینو</span>
                    </span>
                    <span class="font-semibold text-2xs text-surface-2-content">مسیر درست یادگیری</span>
                </a>

                <span class="inline-block w-px h-4 bg-border max-md:hidden"></span>

                <ul class="flex items-center gap-x-3 max-md:hidden">
                    <li>
                        <a href="#"
                            class="inline-flex items-center h-9 rounded-full font-medium text-xs text-surface-2-content hover:bg-surface-1 hover:text-surface-content px-4">
                            دوره‌های آموزشی
                        </a>
                    </li>
                    <li>
                        <a href="#"
                            class="inline-flex items-center h-9 rounded-full font-medium text-xs text-surface-2-content hover:bg-surface-1 hover:text-surface-content px-4">
                            مدرسین
                        </a>
                    </li>
                    <li>
                        <a href="#"
                            class="inline-flex items-center h-9 rounded-full font-medium text-xs text-surface-2-content hover:bg-surface-1 hover:text-surface-content px-4">
                            تجربه زبان‌آموزان
                        </a>
                    </li>
                </ul>

                <div class="flex items-center gap-x-3 ms-auto">
                    <button type="button"
                        class="hidden sm:inline-flex items-center justify-center size-9 bg-surface-2 dark:bg-surface-3 rounded-lg cursor-pointer text-surface-2-content hover:text-surface-content"
                        x-on:click="darkMode = !darkMode">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                            class="dark:hidden">
                            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2">
                                <circle cx="12" cy="12" r="4" />
                                <path
                                    d="M12 4h.01M20 12h.01M12 20h.01M4 12h.01m13.647-5.657h.01m-.01 11.314h.01m-11.324 0h.01m-.01-11.314h.01" />
                            </g>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                            class="dark:block hidden">
                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2"
                                d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />
                        </svg>
                    </button>

                    <button type="button"
                        class="inline-flex items-center justify-center h-9 bg-blue-500 border border-blue-500 rounded-lg inset-shadow-xs inset-shadow-white/50 font-semibold text-2xs text-white cursor-pointer disabled:cursor-default disabled:bg-blue-400 disabled:border-blue-400 hover:bg-blue-500/90 px-3">
                        ورود به پنل
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                            class="size-3.5 ms-2">
                            <path
                                d="M4.75 2A2.75 2.75 0 0 0 2 4.75v6.5A2.75 2.75 0 0 0 4.75 14h3a2.75 2.75 0 0 0 2.75-2.75v-.5a.75.75 0 0 0-1.5 0v.5c0 .69-.56 1.25-1.25 1.25h-3c-.69 0-1.25-.56-1.25-1.25v-6.5c0-.69.56-1.25 1.25-1.25h3C8.44 3.5 9 4.06 9 4.75v.5a.75.75 0 0 0 1.5 0v-.5A2.75 2.75 0 0 0 7.75 2h-3Z" />
                            <path
                                d="M8.03 6.28a.75.75 0 0 0-1.06-1.06L4.72 7.47a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 1 0 1.06-1.06l-.97-.97h7.19a.75.75 0 0 0 0-1.5H7.06l.97-.97Z" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </header>
    <!-- end Header -->

    <!-- Main Content Area -->
    <div class="flex-1 space-y-20">
        <div class="w-full max-w-6xl space-y-20 px-4 mx-auto">
            <!-- Hero -->
            <div class="grid grid-cols-5 items-center gap-10 py-10">
                <div class="sm:col-span-3 col-span-full flex flex-col items-start gap-y-6">
                    <div class="flex flex-col items-start">
                        <span
                            class="inline-flex items-center gap-x-1.5 bg-surface rounded-full cursor-default font-semibold text-2xs text-surface-2-content ps-1 pe-2.5 py-1 mb-2">
                            🌍 زبان رو زندگی کن، نه حفظ
                        </span>
                        <h1 class="font-bold md:text-4xl sm:text-3xl text-2xl leading-normal">
                            <span class="text-blue-500">یادگیری زبان،</span> <br />
                            ساده‌تر از چیزی که فکر می‌کنی
                        </h1>
                        <p class="text-sm max-sm:text-xs text-surface-2-content leading-normal mt-3">
                            با دوره‌های هدفمند، تمرین‌های واقعی و پشتیبانی مستمر
                            کمکت می‌کنیم زبان رو وارد زندگی روزمره‌ات کنی، <br />
                            نه اینکه فقط حفظش کنی.
                        </p>
                    </div>
                    <div class="flex flex-wrap gap-1.5">
                        <button type="button"
                            class="inline-flex items-center justify-center h-9 bg-blue-500 border border-blue-500 rounded-lg inset-shadow-xs inset-shadow-white/50 font-semibold text-2xs text-white cursor-pointer disabled:cursor-default disabled:bg-blue-400 disabled:border-blue-400 hover:bg-blue-500/90 px-3">
                            <span class="line-clamp-1">
                                مشاهده دوره‌های آموزشی
                            </span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                class="shrink-0 size-3.5 rtl:-rotate-90 ms-2">
                                <path fill-rule="evenodd"
                                    d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
                                    clip-rule="evenodd" />
                            </svg>
                        </button>
                        <button type="button"
                            class="inline-flex items-center justify-center h-9 bg-neutral-500 border border-neutral-500 rounded-lg inset-shadow-xs inset-shadow-white/50 font-semibold text-2xs text-white cursor-pointer disabled:cursor-default disabled:bg-neutral-400 disabled:border-neutral-400 hover:bg-neutral-500/90 px-3">
                            <span class="line-clamp-1">
                                مشاوره رایگان
                            </span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                class="shrink-0 size-3.5 ms-2">
                                <path fill-rule="evenodd"
                                    d="M1 8.74c0 .983.713 1.825 1.69 1.943.764.092 1.534.164 2.31.216v2.351a.75.75 0 0 0 1.28.53l2.51-2.51c.182-.181.427-.286.684-.294a44.298 44.298 0 0 0 3.837-.293C14.287 10.565 15 9.723 15 8.74V4.26c0-.983-.713-1.825-1.69-1.943a44.447 44.447 0 0 0-10.62 0C1.712 2.435 1 3.277 1 4.26v4.482ZM5.5 6.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2.5 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm3.5 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
                                    clip-rule="evenodd" />
                            </svg>
                        </button>
                    </div>
                    <div class="flex flex-wrap items-center md:gap-8 gap-4">
                        <div class="flex items-center gap-x-3">
                            <span
                                class="shrink-0 inline-flex items-center justify-center size-11 bg-surface rounded-xl text-neutral-500">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                    class="size-5">
                                    <path
                                        d="M3 4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H3ZM15 4.75a.75.75 0 0 0-1.28-.53l-2 2a.75.75 0 0 0-.22.53v2.5c0 .199.079.39.22.53l2 2a.75.75 0 0 0 1.28-.53v-6.5Z" />
                                </svg>
                            </span>
                            <div class="grow flex flex-col gap-y-1.5">
                                <span class="font-bold text-sm">71+</span>
                                <span class="font-semibold text-xs text-surface-2-content">دوره تخصصی</span>
                            </div>
                        </div>
                        <div class="flex items-center gap-x-3">
                            <span
                                class="shrink-0 inline-flex items-center justify-center size-11 bg-surface rounded-xl text-neutral-500">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                    class="size-5">
                                    <path
                                        d="M1 4.804a1 1 0 0 1 1.53-.848l5.113 3.196a1 1 0 0 1 0 1.696L2.53 12.044A1 1 0 0 1 1 11.196V4.804ZM13.5 4.5A.5.5 0 0 1 14 4h.5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5H14a.5.5 0 0 1-.5-.5v-7ZM10.5 4a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5v-7A.5.5 0 0 0 11 4h-.5Z" />
                                </svg>
                            </span>
                            <div class="grow flex flex-col gap-y-1.5">
                                <span class="font-bold text-sm">2500+</span>
                                <span class="font-semibold text-xs text-surface-2-content">ساعت آموزش</span>
                            </div>
                        </div>
                        <div class="flex items-center gap-x-3">
                            <span
                                class="shrink-0 inline-flex items-center justify-center size-11 bg-surface rounded-xl text-neutral-500">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                    class="size-5">
                                    <path
                                        d="M8 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM3.156 11.763c.16-.629.44-1.21.813-1.72a2.5 2.5 0 0 0-2.725 1.377c-.136.287.102.58.418.58h1.449c.01-.077.025-.156.045-.237ZM12.847 11.763c.02.08.036.16.046.237h1.446c.316 0 .554-.293.417-.579a2.5 2.5 0 0 0-2.722-1.378c.374.51.653 1.09.813 1.72ZM14 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM3.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM5 13c-.552 0-1.013-.455-.876-.99a4.002 4.002 0 0 1 7.753 0c.136.535-.324.99-.877.99H5Z" />
                                </svg>
                            </span>
                            <div class="grow flex flex-col gap-y-1.5">
                                <span class="font-bold text-sm">5000+</span>
                                <span class="font-semibold text-xs text-surface-2-content">زبان‌آموز</span>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center gap-x-3">
                        <div class="flex -space-x-2">
                            <span class="inline-block size-7 border-2 border-white rounded-full overflow-hidden">
                                <img src="https://blocks.spacedev.ir/images/avatars/01.jpg"
                                    class="size-full object-cover" alt="..." />
                            </span>
                            <span class="inline-block size-7 border-2 border-white rounded-full overflow-hidden">
                                <img src="https://blocks.spacedev.ir/images/avatars/02.jpg"
                                    class="size-full object-cover" alt="..." />
                            </span>
                            <span class="inline-block size-7 border-2 border-white rounded-full overflow-hidden">
                                <img src="https://blocks.spacedev.ir/images/avatars/03.jpg"
                                    class="size-full object-cover" alt="..." />
                            </span>
                            <span class="inline-block size-7 border-2 border-white rounded-full overflow-hidden">
                                <img src="https://blocks.spacedev.ir/images/avatars/04.jpg"
                                    class="size-full object-cover" alt="..." />
                            </span>
                            <span class="inline-block size-7 border-2 border-white rounded-full overflow-hidden">
                                <img src="https://blocks.spacedev.ir/images/avatars/05.jpg"
                                    class="size-full object-cover" alt="..." />
                            </span>
                        </div>
                        <p class="cursor-default text-surface-2-content text-2xs font-semibold line-clamp-1">
                            به جمع <span class="text-surface-content">5000+</span> زبان‌آموز فعال بپیوند ❤️
                        </p>
                    </div>
                </div>

                <div class="sm:col-span-2 col-span-full flex flex-col items-center justify-center">
                    <div
                        class="relative w-full max-w-sm after:absolute after:inset-x-0 after:bottom-0 after:w-full after:h-10 after:bg-linear-to-b after:to-surface-1">
                        <img src="https://blocks.spacedev.ir/images/landing/education/student-01.png" alt="..." />
                    </div>
                </div>
            </div>
            <!-- end Hero -->

            <!-- Why Choose Us -->
            <div class="grid gap-y-8">
                <div class="flex flex-col gap-y-2.5 ps-16">
                    <div class="flex items-center gap-x-3">
                        <span
                            class="inline-flex items-center gap-x-1.5 before:shrink-0 before:inline-block before:size-1 before:bg-surface-content before:rounded-full before:ring-2 before:ring-surface-content/40 after:inline-block after:w-5 after:h-px after:bg-surface-2-content/35 ps-1.5">
                        </span>
                        <h3 class="font-bold sm:text-2xl text-xl">چرا زبانینو؟</h3>
                    </div>
                    <p class="font-semibold sm:text-sm text-xs text-surface-2-content">
                        یادگیری زبان، ساده‌تر و کاربردی‌تر از همیشه.
                    </p>
                </div>

                <div class="grid md:grid-cols-3 items-start gap-5 md:[&>div]:nth-2:mt-6 md:[&>div]:nth-3:mt-12">
                    <div class="flex flex-col gap-y-2 bg-surface dark:bg-surface-2 rounded-2xl p-6">
                        <span
                            class="inline-flex relative size-14 bg-surface-2 dark:bg-surface rounded-xl rotate-1 mb-3">
                            <span
                                class="absolute inset-1.5 inline-flex items-center justify-center bg-surface dark:bg-surface-3 rounded-lg shadow-xs">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                    class="size-5">
                                    <path fill-rule="evenodd"
                                        d="M1 8.74c0 .983.713 1.825 1.69 1.943.904.108 1.817.19 2.737.243.363.02.688.231.85.556l1.052 2.103a.75.75 0 0 0 1.342 0l1.052-2.103c.162-.325.487-.535.85-.556.92-.053 1.833-.134 2.738-.243.976-.118 1.689-.96 1.689-1.942V4.259c0-.982-.713-1.824-1.69-1.942a44.45 44.45 0 0 0-10.62 0C1.712 2.435 1 3.277 1 4.26v4.482Zm3-3.49a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5A.75.75 0 0 1 4 5.25ZM4.75 7a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5h-2.5Z"
                                        clip-rule="evenodd" />
                                </svg>
                            </span>
                        </span>
                        <h3 class="font-bold text-base">
                            مکالمه‌محور
                        </h3>
                        <p class="font-semibold text-xs text-surface-2-content">
                            از همان جلسات ابتدایی وارد مکالمه می‌شوید و زبان را در موقعیت‌های واقعی تمرین می‌کنید.
                        </p>
                    </div>
                    <div class="flex flex-col gap-y-2 bg-surface dark:bg-surface-2 rounded-2xl p-6">
                        <span
                            class="inline-flex relative size-14 bg-surface-2 dark:bg-surface rounded-xl rotate-1 mb-3">
                            <span
                                class="absolute inset-1.5 inline-flex items-center justify-center bg-surface dark:bg-surface-3 rounded-lg shadow-xs">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                    class="size-5">
                                    <path fill-rule="evenodd"
                                        d="M5.37 2.257a1.25 1.25 0 0 1 1.214-.054l3.378 1.69 2.133-1.313A1.25 1.25 0 0 1 14 3.644v7.326c0 .434-.225.837-.595 1.065l-2.775 1.708a1.25 1.25 0 0 1-1.214.053l-3.378-1.689-2.133 1.313A1.25 1.25 0 0 1 2 12.354V5.029c0-.434.225-.837.595-1.064L5.37 2.257ZM6 4a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 6 4Zm4.75 2.75a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0v-4.5Z"
                                        clip-rule="evenodd" />
                                </svg>
                            </span>
                        </span>
                        <h3 class="font-bold text-base">
                            مسیر شخصی
                        </h3>
                        <p class="font-semibold text-xs text-surface-2-content">
                            سطح، هدف و زمان شما در برنامه‌ریزی دوره‌ها در نظر گرفته می‌شود تا بهترین نتیجه را
                            بگیرید.
                        </p>
                    </div>
                    <div class="flex flex-col gap-y-2 bg-surface dark:bg-surface-2 rounded-2xl p-6">
                        <span
                            class="inline-flex relative size-14 bg-surface-2 dark:bg-surface rounded-xl rotate-1 mb-3">
                            <span
                                class="absolute inset-1.5 inline-flex items-center justify-center bg-surface dark:bg-surface-3 rounded-lg shadow-xs">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                    class="size-5">
                                    <path fill-rule="evenodd"
                                        d="M12.95 3.05a7 7 0 1 0-9.9 9.9 7 7 0 0 0 9.9-9.9Zm-7.262-.042a5.516 5.516 0 0 1 4.624 0L8.698 5.082a3.016 3.016 0 0 0-1.396 0L5.688 3.008Zm-2.68 2.68a5.516 5.516 0 0 0 0 4.624l2.074-1.614a3.015 3.015 0 0 1 0-1.396L3.008 5.688Zm2.68 7.304 1.614-2.074c.458.11.938.11 1.396 0l1.614 2.074a5.516 5.516 0 0 1-4.624 0Zm7.304-2.68a5.516 5.516 0 0 0 0-4.624l-2.074 1.614c.11.458.11.938 0 1.396l2.074 1.614ZM6.94 6.939a1.5 1.5 0 1 1 2.122 2.122 1.5 1.5 0 0 1-2.122-2.122Z"
                                        clip-rule="evenodd" />
                                </svg>
                            </span>
                        </span>
                        <h3 class="font-bold text-base">
                            پشتیبانی مداوم
                        </h3>
                        <p class="font-semibold text-xs text-surface-2-content">
                            در طول مسیر یادگیری تنها نیستید؛ پشتیبانی آموزشی و رفع اشکال همیشه در کنار شماست.
                        </p>
                    </div>
                </div>
            </div>
            <!-- end Why Choose Us -->

            <!-- Courses -->
            <div class="grid gap-y-8">
                <div class="flex items-center gap-x-4">
                    <div class="flex flex-col gap-y-2.5">
                        <div class="flex items-center gap-x-3">
                            <span
                                class="inline-flex items-center gap-x-1.5 before:shrink-0 before:inline-block before:size-1 before:bg-surface-content before:rounded-full before:ring-2 before:ring-surface-content/40 after:inline-block after:w-5 after:h-px after:bg-surface-2-content/35 ps-1.5">
                            </span>
                            <h3 class="font-bold sm:text-2xl text-xl">دوره‌های آموزشی</h3>
                        </div>
                        <p class="font-semibold sm:text-sm text-xs text-surface-2-content">
                            انتخاب دوره مناسب با سطح و هدف شما.
                        </p>
                    </div>

                    <a href="#"
                        class="inline-flex items-center gap-x-2 h-9 bg-surface dark:bg-surface-2 rounded-full text-surface-2-content hover:text-surface-content px-4 ms-auto">
                        <span class="line-clamp-1 font-semibold sm:text-xs text-2xs">دیدن همه</span>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                            class="size-3.5 rtl:-rotate-90">
                            <path fill-rule="evenodd"
                                d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </div>

                <div class="grid lg:grid-cols-3 sm:grid-cols-2 gap-5">
                    <!-- Course Card -->
                    <div class="flex flex-col rounded-2xl p-1.5">
                        <div class="relative rounded-xl overflow-hidden">
                            <a href="#" class="block relative after:absolute after:inset-0 after:bg-black/40">
                                <img src="https://blocks.spacedev.ir/images/landing/education/01.jpg" class="size-full"
                                    alt="..." />
                            </a>
                            <a href="#"
                                class="absolute end-3 top-3 inline-flex items-center gap-x-1.5 h-9 bg-white/15 rounded-full text-white hover:bg-white/25 px-4">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                    class="size-3.5">
                                    <path
                                        d="M3.5 2A1.5 1.5 0 0 0 2 3.5v2A1.5 1.5 0 0 0 3.5 7h2A1.5 1.5 0 0 0 7 5.5v-2A1.5 1.5 0 0 0 5.5 2h-2ZM3.5 9A1.5 1.5 0 0 0 2 10.5v2A1.5 1.5 0 0 0 3.5 14h2A1.5 1.5 0 0 0 7 12.5v-2A1.5 1.5 0 0 0 5.5 9h-2ZM9 3.5A1.5 1.5 0 0 1 10.5 2h2A1.5 1.5 0 0 1 14 3.5v2A1.5 1.5 0 0 1 12.5 7h-2A1.5 1.5 0 0 1 9 5.5v-2ZM10.5 9A1.5 1.5 0 0 0 9 10.5v2a1.5 1.5 0 0 0 1.5 1.5h2a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 12.5 9h-2Z" />
                                </svg>
                                <span class="font-semibold sm:text-xs text-2xs">مکالمه</span>
                            </a>
                        </div>
                        <div
                            class="flex flex-col gap-y-4 bg-surface rounded-xl inset-shadow-2xs inset-shadow-surface-2-content/10 -translate-y-5 mx-3 p-5">
                            <div class="flex items-center gap-x-3.5">
                                <div class="flex items-center gap-x-2">
                                    <span class="inline-block size-5 rounded-full overflow-hidden">
                                        <img src="https://blocks.spacedev.ir/images/flag/gb4x3.svg"
                                            class="object-cover size-full" alt="..." />
                                    </span>
                                    <span class="line-clamp-1 font-semibold text-2xs">
                                        انگیسی
                                    </span>
                                </div>
                                <span class="inline-block size-1 bg-surface-content/50 rounded-full"></span>
                                <div class="flex items-center gap-x-2 text-surface-2-content">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="shrink-0 size-4">
                                        <path
                                            d="M12 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-1ZM6.5 6a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V6ZM2 9a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9Z" />
                                    </svg>
                                    <span class="line-clamp-1 font-semibold text-2xs">
                                        مبتدی تا پیشرفته
                                    </span>
                                </div>
                                <div class="flex items-center gap-x-1 ms-auto">
                                    <span class="font-bold text-xs">
                                        4.7
                                    </span>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="shrink-0 size-4 text-yellow-500">
                                        <path fill-rule="evenodd"
                                            d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </div>
                            </div>
                            <div class="block w-full h-px bg-border"></div>
                            <div class="grid gap-y-2">
                                <h3>
                                    <a href="#" class="line-clamp-1 font-bold sm:text-lg hover:text-blue-500">
                                        مکالمه روان (Speaking)
                                    </a>
                                </h3>
                                <p class="line-clamp-2 font-semibold text-xs text-surface-2-content">
                                    تقویت مهارت صحبت‌کردن با تمرین مکالمه‌های واقعی و
                                    روان‌صحبت‌کردن در موقعیت‌های روزمره.
                                </p>
                            </div>
                            <div class="flex items-center gap-x-3.5">
                                <div class="flex items-center gap-x-2 text-surface-2-content">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="shrink-0 size-4">
                                        <path fill-rule="evenodd"
                                            d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm-.847-9.766A.75.75 0 0 0 6 5.866v4.268a.75.75 0 0 0 1.153.633l3.353-2.134a.75.75 0 0 0 0-1.266L7.153 5.234Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                    <span class="line-clamp-1 font-semibold text-2xs">
                                        59 ویدئو
                                    </span>
                                </div>
                                <span class="inline-block size-1 bg-surface-content/50 rounded-full"></span>
                                <div class="flex items-center gap-x-2 text-surface-2-content">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="shrink-0 size-4">
                                        <path
                                            d="M8.5 4.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10.9 12.006c.11.542-.348.994-.9.994H2c-.553 0-1.01-.452-.902-.994a5.002 5.002 0 0 1 9.803 0ZM14.002 12h-1.59a2.556 2.556 0 0 0-.04-.29 6.476 6.476 0 0 0-1.167-2.603 3.002 3.002 0 0 1 3.633 1.911c.18.522-.283.982-.836.982ZM12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
                                    </svg>
                                    <span class="line-clamp-1 font-semibold text-2xs">
                                        3,248 زبان‌آموز
                                    </span>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <div class="flex items-center gap-x-1 ms-auto">
                                    <span class="font-bold sm:text-2xl text-xl">2,480,000</span>
                                    <span class="font-semibold text-xs">تومان</span>
                                </div>
                            </div>
                            <div class="flex gap-2">
                                <a href="#"
                                    class="grow inline-flex items-center justify-center h-9 bg-blue-500/10 border border-transparent rounded-lg inset-shadow-xs inset-shadow-white/50 dark:inset-shadow-white/10 font-semibold text-xs text-blue-500 cursor-pointer hover:bg-blue-500/90 hover:text-white px-3">
                                    <span class="line-clamp-1"> شروع یادگیری</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="size-3.5 ms-2">
                                        <path
                                            d="M8.5 4.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 13c.552 0 1.01-.452.9-.994a5.002 5.002 0 0 0-9.802 0c-.109.542.35.994.902.994h8ZM12.5 3.5a.75.75 0 0 1 .75.75v1h1a.75.75 0 0 1 0 1.5h-1v1a.75.75 0 0 1-1.5 0v-1h-1a.75.75 0 0 1 0-1.5h1v-1a.75.75 0 0 1 .75-.75Z" />
                                    </svg>
                                </a>
                                <button type="button"
                                    class="shrink-0 inline-flex items-center justify-center size-9 bg-red-500/10 border border-transparent rounded-lg inset-shadow-xs inset-shadow-white/50 dark:inset-shadow-white/10 font-semibold text-2xs text-red-500 cursor-pointer disabled:cursor-default disabled:bg-red-400 disabled:border-red-400 hover:bg-red-500/90 hover:text-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="size-4">
                                        <path
                                            d="M2 6.342a3.375 3.375 0 0 1 6-2.088 3.375 3.375 0 0 1 5.997 2.26c-.063 2.134-1.618 3.76-2.955 4.784a14.437 14.437 0 0 1-2.676 1.61c-.02.01-.038.017-.05.022l-.014.006-.004.002h-.002a.75.75 0 0 1-.592.001h-.002l-.004-.003-.015-.006a5.528 5.528 0 0 1-.232-.107 14.395 14.395 0 0 1-2.535-1.557C3.564 10.22 1.999 8.558 1.999 6.38L2 6.342Z" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- end Course Card -->

                    <!-- Course Card -->
                    <div class="flex flex-col rounded-2xl p-1.5">
                        <div class="relative rounded-xl overflow-hidden">
                            <a href="#" class="block relative after:absolute after:inset-0 after:bg-black/40">
                                <img src="https://blocks.spacedev.ir/images/landing/education/02.jpg" class="size-full"
                                    alt="..." />
                            </a>
                            <a href="#"
                                class="absolute end-3 top-3 inline-flex items-center gap-x-1.5 h-9 bg-white/15 rounded-full text-white hover:bg-white/25 px-4">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                    class="size-3.5">
                                    <path
                                        d="M3.5 2A1.5 1.5 0 0 0 2 3.5v2A1.5 1.5 0 0 0 3.5 7h2A1.5 1.5 0 0 0 7 5.5v-2A1.5 1.5 0 0 0 5.5 2h-2ZM3.5 9A1.5 1.5 0 0 0 2 10.5v2A1.5 1.5 0 0 0 3.5 14h2A1.5 1.5 0 0 0 7 12.5v-2A1.5 1.5 0 0 0 5.5 9h-2ZM9 3.5A1.5 1.5 0 0 1 10.5 2h2A1.5 1.5 0 0 1 14 3.5v2A1.5 1.5 0 0 1 12.5 7h-2A1.5 1.5 0 0 1 9 5.5v-2ZM10.5 9A1.5 1.5 0 0 0 9 10.5v2a1.5 1.5 0 0 0 1.5 1.5h2a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 12.5 9h-2Z" />
                                </svg>
                                <span class="font-semibold sm:text-xs text-2xs">گرامر</span>
                            </a>
                        </div>
                        <div
                            class="flex flex-col gap-y-4 bg-surface rounded-xl inset-shadow-2xs inset-shadow-surface-2-content/10 -translate-y-5 mx-3 p-5">
                            <div class="flex items-center gap-x-3.5">
                                <div class="flex items-center gap-x-2">
                                    <span class="inline-block size-5 rounded-full overflow-hidden">
                                        <img src="https://blocks.spacedev.ir/images/flag/gb4x3.svg"
                                            class="object-cover size-full" alt="..." />
                                    </span>
                                    <span class="line-clamp-1 font-semibold text-2xs">
                                        انگیسی
                                    </span>
                                </div>
                                <span class="inline-block size-1 bg-surface-content/50 rounded-full"></span>
                                <div class="flex items-center gap-x-2 text-surface-2-content">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="shrink-0 size-4">
                                        <path
                                            d="M12 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-1ZM6.5 6a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V6ZM2 9a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9Z" />
                                    </svg>
                                    <span class="line-clamp-1 font-semibold text-2xs">
                                        مبتدی تا پیشرفته
                                    </span>
                                </div>
                                <div class="flex items-center gap-x-1 ms-auto">
                                    <span class="font-bold text-xs">
                                        4.8
                                    </span>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="shrink-0 size-4 text-yellow-500">
                                        <path fill-rule="evenodd"
                                            d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </div>
                            </div>
                            <div class="block w-full h-px bg-border"></div>
                            <div class="grid gap-y-2">
                                <h3>
                                    <a href="#" class="line-clamp-1 font-bold sm:text-lg hover:text-blue-500">
                                        گرامر عملی (Grammar)
                                    </a>
                                </h3>
                                <p class="line-clamp-2 font-semibold text-xs text-surface-2-content">
                                    یادگیری گرامر به زبان ساده و قابل استفاده، با تمرکز روی ساخت جملات درست در
                                    مکالمه و نوشتار.
                                </p>
                            </div>
                            <div class="flex items-center gap-x-3.5">
                                <div class="flex items-center gap-x-2 text-surface-2-content">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="shrink-0 size-4">
                                        <path fill-rule="evenodd"
                                            d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm-.847-9.766A.75.75 0 0 0 6 5.866v4.268a.75.75 0 0 0 1.153.633l3.353-2.134a.75.75 0 0 0 0-1.266L7.153 5.234Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                    <span class="line-clamp-1 font-semibold text-2xs">
                                        73 ویدئو
                                    </span>
                                </div>
                                <span class="inline-block size-1 bg-surface-content/50 rounded-full"></span>
                                <div class="flex items-center gap-x-2 text-surface-2-content">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="shrink-0 size-4">
                                        <path
                                            d="M8.5 4.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10.9 12.006c.11.542-.348.994-.9.994H2c-.553 0-1.01-.452-.902-.994a5.002 5.002 0 0 1 9.803 0ZM14.002 12h-1.59a2.556 2.556 0 0 0-.04-.29 6.476 6.476 0 0 0-1.167-2.603 3.002 3.002 0 0 1 3.633 1.911c.18.522-.283.982-.836.982ZM12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
                                    </svg>
                                    <span class="line-clamp-1 font-semibold text-2xs">
                                        4,115 زبان‌آموز
                                    </span>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <div class="flex items-center gap-x-1 ms-auto">
                                    <span class="font-bold sm:text-2xl text-xl">1,980,000</span>
                                    <span class="font-semibold text-xs">تومان</span>
                                </div>
                            </div>
                            <div class="flex gap-2">
                                <a href="#"
                                    class="grow inline-flex items-center justify-center h-9 bg-blue-500/10 border border-transparent rounded-lg inset-shadow-xs inset-shadow-white/50 dark:inset-shadow-white/10 font-semibold text-xs text-blue-500 cursor-pointer hover:bg-blue-500/90 hover:text-white px-3">
                                    <span class="line-clamp-1"> شروع یادگیری</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="size-3.5 ms-2">
                                        <path
                                            d="M8.5 4.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 13c.552 0 1.01-.452.9-.994a5.002 5.002 0 0 0-9.802 0c-.109.542.35.994.902.994h8ZM12.5 3.5a.75.75 0 0 1 .75.75v1h1a.75.75 0 0 1 0 1.5h-1v1a.75.75 0 0 1-1.5 0v-1h-1a.75.75 0 0 1 0-1.5h1v-1a.75.75 0 0 1 .75-.75Z" />
                                    </svg>
                                </a>
                                <button type="button"
                                    class="shrink-0 inline-flex items-center justify-center size-9 bg-red-500/10 border border-transparent rounded-lg inset-shadow-xs inset-shadow-white/50 dark:inset-shadow-white/10 font-semibold text-2xs text-red-500 cursor-pointer disabled:cursor-default disabled:bg-red-400 disabled:border-red-400 hover:bg-red-500/90 hover:text-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="size-4">
                                        <path
                                            d="M2 6.342a3.375 3.375 0 0 1 6-2.088 3.375 3.375 0 0 1 5.997 2.26c-.063 2.134-1.618 3.76-2.955 4.784a14.437 14.437 0 0 1-2.676 1.61c-.02.01-.038.017-.05.022l-.014.006-.004.002h-.002a.75.75 0 0 1-.592.001h-.002l-.004-.003-.015-.006a5.528 5.528 0 0 1-.232-.107 14.395 14.395 0 0 1-2.535-1.557C3.564 10.22 1.999 8.558 1.999 6.38L2 6.342Z" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- end Course Card -->

                    <!-- Course Card -->
                    <div class="flex flex-col rounded-2xl p-1.5">
                        <div class="relative rounded-xl overflow-hidden">
                            <a href="#" class="block relative after:absolute after:inset-0 after:bg-black/40">
                                <img src="https://blocks.spacedev.ir/images/landing/education/03.jpg" class="size-full"
                                    alt="..." />
                            </a>
                            <a href="#"
                                class="absolute end-3 top-3 inline-flex items-center gap-x-1.5 h-9 bg-white/15 rounded-full text-white hover:bg-white/25 px-4">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                    class="size-3.5">
                                    <path
                                        d="M3.5 2A1.5 1.5 0 0 0 2 3.5v2A1.5 1.5 0 0 0 3.5 7h2A1.5 1.5 0 0 0 7 5.5v-2A1.5 1.5 0 0 0 5.5 2h-2ZM3.5 9A1.5 1.5 0 0 0 2 10.5v2A1.5 1.5 0 0 0 3.5 14h2A1.5 1.5 0 0 0 7 12.5v-2A1.5 1.5 0 0 0 5.5 9h-2ZM9 3.5A1.5 1.5 0 0 1 10.5 2h2A1.5 1.5 0 0 1 14 3.5v2A1.5 1.5 0 0 1 12.5 7h-2A1.5 1.5 0 0 1 9 5.5v-2ZM10.5 9A1.5 1.5 0 0 0 9 10.5v2a1.5 1.5 0 0 0 1.5 1.5h2a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 12.5 9h-2Z" />
                                </svg>
                                <span class="font-semibold sm:text-xs text-2xs">شنیداری</span>
                            </a>
                        </div>
                        <div
                            class="flex flex-col gap-y-4 bg-surface rounded-xl inset-shadow-2xs inset-shadow-surface-2-content/10 -translate-y-5 mx-3 p-5">
                            <div class="flex items-center gap-x-3.5">
                                <div class="flex items-center gap-x-2">
                                    <span class="inline-block size-5 rounded-full overflow-hidden">
                                        <img src="https://blocks.spacedev.ir/images/flag/de4x3.svg"
                                            class="object-cover size-full" alt="..." />
                                    </span>
                                    <span class="line-clamp-1 font-semibold text-2xs">
                                        آلمانی
                                    </span>
                                </div>
                                <span class="inline-block size-1 bg-surface-content/50 rounded-full"></span>
                                <div class="flex items-center gap-x-2 text-surface-2-content">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="shrink-0 size-4">
                                        <path
                                            d="M12 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-1ZM6.5 6a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V6ZM2 9a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9Z" />
                                    </svg>
                                    <span class="line-clamp-1 font-semibold text-2xs">
                                        مبتدی تا پیشرفته
                                    </span>
                                </div>
                                <div class="flex items-center gap-x-1 ms-auto">
                                    <span class="font-bold text-xs">
                                        4.6
                                    </span>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="shrink-0 size-4 text-yellow-500">
                                        <path fill-rule="evenodd"
                                            d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </div>
                            </div>
                            <div class="block w-full h-px bg-border"></div>
                            <div class="grid gap-y-2">
                                <h3>
                                    <a href="#" class="line-clamp-1 font-bold sm:text-lg hover:text-blue-500">
                                        درک شنیداری (Listening)
                                    </a>
                                </h3>
                                <p class="line-clamp-2 font-semibold text-xs text-surface-2-content">
                                    افزایش توانایی فهم مکالمات، ویدیوها و فایل‌های صوتی واقعی با تمرین‌های هدفمند و
                                    تدریجی.
                                </p>
                            </div>
                            <div class="flex items-center gap-x-3.5">
                                <div class="flex items-center gap-x-2 text-surface-2-content">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="shrink-0 size-4">
                                        <path fill-rule="evenodd"
                                            d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm-.847-9.766A.75.75 0 0 0 6 5.866v4.268a.75.75 0 0 0 1.153.633l3.353-2.134a.75.75 0 0 0 0-1.266L7.153 5.234Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                    <span class="line-clamp-1 font-semibold text-2xs">
                                        48 ویدئو
                                    </span>
                                </div>
                                <span class="inline-block size-1 bg-surface-content/50 rounded-full"></span>
                                <div class="flex items-center gap-x-2 text-surface-2-content">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="shrink-0 size-4">
                                        <path
                                            d="M8.5 4.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10.9 12.006c.11.542-.348.994-.9.994H2c-.553 0-1.01-.452-.902-.994a5.002 5.002 0 0 1 9.803 0ZM14.002 12h-1.59a2.556 2.556 0 0 0-.04-.29 6.476 6.476 0 0 0-1.167-2.603 3.002 3.002 0 0 1 3.633 1.911c.18.522-.283.982-.836.982ZM12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
                                    </svg>
                                    <span class="line-clamp-1 font-semibold text-2xs">
                                        2,723 زبان‌آموز
                                    </span>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <div class="flex items-center gap-x-1 ms-auto">
                                    <span class="font-bold sm:text-2xl text-xl">2,560,000</span>
                                    <span class="font-semibold text-xs">تومان</span>
                                </div>
                            </div>
                            <div class="flex gap-2">
                                <a href="#"
                                    class="grow inline-flex items-center justify-center h-9 bg-blue-500/10 border border-transparent rounded-lg inset-shadow-xs inset-shadow-white/50 dark:inset-shadow-white/10 font-semibold text-xs text-blue-500 cursor-pointer hover:bg-blue-500/90 hover:text-white px-3">
                                    <span class="line-clamp-1"> شروع یادگیری</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="size-3.5 ms-2">
                                        <path
                                            d="M8.5 4.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 13c.552 0 1.01-.452.9-.994a5.002 5.002 0 0 0-9.802 0c-.109.542.35.994.902.994h8ZM12.5 3.5a.75.75 0 0 1 .75.75v1h1a.75.75 0 0 1 0 1.5h-1v1a.75.75 0 0 1-1.5 0v-1h-1a.75.75 0 0 1 0-1.5h1v-1a.75.75 0 0 1 .75-.75Z" />
                                    </svg>
                                </a>
                                <button type="button"
                                    class="shrink-0 inline-flex items-center justify-center size-9 bg-red-500/10 border border-transparent rounded-lg inset-shadow-xs inset-shadow-white/50 dark:inset-shadow-white/10 font-semibold text-2xs text-red-500 cursor-pointer disabled:cursor-default disabled:bg-red-400 disabled:border-red-400 hover:bg-red-500/90 hover:text-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="size-4">
                                        <path
                                            d="M2 6.342a3.375 3.375 0 0 1 6-2.088 3.375 3.375 0 0 1 5.997 2.26c-.063 2.134-1.618 3.76-2.955 4.784a14.437 14.437 0 0 1-2.676 1.61c-.02.01-.038.017-.05.022l-.014.006-.004.002h-.002a.75.75 0 0 1-.592.001h-.002l-.004-.003-.015-.006a5.528 5.528 0 0 1-.232-.107 14.395 14.395 0 0 1-2.535-1.557C3.564 10.22 1.999 8.558 1.999 6.38L2 6.342Z" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- end Course Card -->
                </div>
            </div>
            <!-- end Courses -->

            <!-- Teaching Method -->
            <div class="grid grid-cols-5 items-center gap-10 py-10">
                <div
                    class="md:col-span-3 col-span-full flex flex-col items-start gap-y-10 bg-surface dark:bg-surface-2 rounded-2xl p-10">
                    <div class="flex flex-col gap-y-2.5">
                        <div class="flex items-center gap-x-3">
                            <span
                                class="inline-flex items-center gap-x-1.5 before:shrink-0 before:inline-block before:size-1 before:bg-surface-content before:rounded-full before:ring-2 before:ring-surface-content/40 after:inline-block after:w-5 after:h-px after:bg-surface-2-content/35 ps-1.5">
                            </span>
                            <h3 class="font-bold sm:text-2xl text-xl">روش آموزش ما</h3>
                        </div>
                        <p class="font-semibold sm:text-sm text-xs text-surface-2-content">
                            یادگیری زبان با تمرین‌های هدفمند و ابزارهای کاربردی.
                        </p>
                    </div>

                    <div class="flex flex-col gap-5">
                        <div class="flex items-start gap-x-4">
                            <span class="shrink-0 inline-flex relative size-12 bg-sky-500/10 rounded-xl rotate-1">
                                <span
                                    class="absolute inset-1.5 inline-flex items-center justify-center bg-sky-500 border border-sky-500 rounded-lg inset-shadow-xs inset-shadow-white/50 text-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="size-4">
                                        <path fill-rule="evenodd"
                                            d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm-.847-9.766A.75.75 0 0 0 6 5.866v4.268a.75.75 0 0 0 1.153.633l3.353-2.134a.75.75 0 0 0 0-1.266L7.153 5.234Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </span>
                            </span>
                            <div class="flex flex-col gap-y-2">
                                <h3 class="font-bold text-base text-sky-500">
                                    ویدئوهای تعاملی
                                </h3>
                                <p class="font-semibold text-xs text-surface-2-content">
                                    مشاهده درس‌ها و مثال‌ها از طریق ویدئوهای جذاب و تعاملی که مفاهیم را به شکل عملی
                                    آموزش می‌دهد.
                                </p>
                            </div>
                        </div>
                        <div class="flex items-start gap-x-4">
                            <span class="shrink-0 inline-flex relative size-12 bg-amber-500/10 rounded-xl rotate-1">
                                <span
                                    class="absolute inset-1.5 inline-flex items-center justify-center bg-amber-500 border border-amber-500 rounded-lg inset-shadow-xs inset-shadow-white/50 text-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="size-4">
                                        <path fill-rule="evenodd"
                                            d="M11.986 3H12a2 2 0 0 1 2 2v6a2 2 0 0 1-1.5 1.937V7A2.5 2.5 0 0 0 10 4.5H4.063A2 2 0 0 1 6 3h.014A2.25 2.25 0 0 1 8.25 1h1.5a2.25 2.25 0 0 1 2.236 2ZM10.5 4v-.75a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0-.75.75V4h3Z"
                                            clip-rule="evenodd" />
                                        <path fill-rule="evenodd"
                                            d="M2 7a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7Zm6.585 1.08a.75.75 0 0 1 .336 1.005l-1.75 3.5a.75.75 0 0 1-1.16.234l-1.75-1.5a.75.75 0 0 1 .977-1.139l1.02.875 1.321-2.64a.75.75 0 0 1 1.006-.336Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </span>
                            </span>
                            <div class="flex flex-col gap-y-2">
                                <h3 class="font-bold text-base text-amber-500">
                                    تمرین‌های هدفمند
                                </h3>
                                <p class="font-semibold text-xs text-surface-2-content">
                                    تمرین‌های کوتاه و کاربردی برای تثبیت مهارت‌ها در مکالمه، گرامر و شنیداری، متناسب
                                    با سطح شما.
                                </p>
                            </div>
                        </div>
                        <div class="flex items-start gap-x-4">
                            <span class="shrink-0 inline-flex relative size-12 bg-green-500/10 rounded-xl rotate-1">
                                <span
                                    class="absolute inset-1.5 inline-flex items-center justify-center bg-green-500 border border-green-500 rounded-lg inset-shadow-xs inset-shadow-white/50 text-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="size-4">
                                        <path fill-rule="evenodd"
                                            d="M15 8c0 .982-.472 1.854-1.202 2.402a2.995 2.995 0 0 1-.848 2.547 2.995 2.995 0 0 1-2.548.849A2.996 2.996 0 0 1 8 15a2.996 2.996 0 0 1-2.402-1.202 2.995 2.995 0 0 1-2.547-.848 2.995 2.995 0 0 1-.849-2.548A2.996 2.996 0 0 1 1 8c0-.982.472-1.854 1.202-2.402a2.995 2.995 0 0 1 .848-2.547 2.995 2.995 0 0 1 2.548-.849A2.995 2.995 0 0 1 8 1c.982 0 1.854.472 2.402 1.202a2.995 2.995 0 0 1 2.547.848c.695.695.978 1.645.849 2.548A2.996 2.996 0 0 1 15 8Zm-3.291-2.843a.75.75 0 0 1 .135 1.052l-4.25 5.5a.75.75 0 0 1-1.151.043l-2.25-2.5a.75.75 0 1 1 1.114-1.004l1.65 1.832 3.7-4.789a.75.75 0 0 1 1.052-.134Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </span>
                            </span>
                            <div class="flex flex-col gap-y-2">
                                <h3 class="font-bold text-base text-green-500">
                                    آزمون‌ها و ارزیابی‌ها
                                </h3>
                                <p class="font-semibold text-xs text-surface-2-content">
                                    تست‌های مرحله‌ای و ارزیابی پیشرفت برای شناسایی نقاط قوت و نیاز به تمرین بیشتر،
                                    با بازخورد فوری.
                                </p>
                            </div>
                        </div>
                        <div class="flex items-start gap-x-4">
                            <span class="shrink-0 inline-flex relative size-12 bg-zinc-500/10 rounded-xl rotate-1">
                                <span
                                    class="absolute inset-1.5 inline-flex items-center justify-center bg-zinc-500 border border-zinc-500 rounded-lg inset-shadow-xs inset-shadow-white/50 text-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="size-4">
                                        <path
                                            d="M1 8.849c0 1 .738 1.851 1.734 1.947L3 10.82v2.429a.75.75 0 0 0 1.28.53l1.82-1.82A3.484 3.484 0 0 1 5.5 10V9A3.5 3.5 0 0 1 9 5.5h4V4.151c0-1-.739-1.851-1.734-1.947a44.539 44.539 0 0 0-8.532 0C1.738 2.3 1 3.151 1 4.151V8.85Z" />
                                        <path
                                            d="M7 9a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-.25v1.25a.75.75 0 0 1-1.28.53L9.69 12H9a2 2 0 0 1-2-2V9Z" />
                                    </svg>
                                </span>
                            </span>
                            <div class="flex flex-col gap-y-2">
                                <h3 class="font-bold text-base text-zinc-500">
                                    پشتیبانی و مشاوره
                                </h3>
                                <p class="font-semibold text-xs text-surface-2-content">
                                    دریافت راهنمایی و پاسخ به سوالات توسط مدرس‌ها و مشاوران، برای رفع اشکال و پیشرفت
                                    سریع‌تر در مسیر یادگیری.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="md:col-span-2 col-span-full flex flex-col items-center justify-center">
                    <div
                        class="relative w-full max-w-sm after:absolute after:inset-x-0 after:bottom-0 after:w-full after:h-10 after:bg-linear-to-b after:to-surface-1">
                        <img src="https://blocks.spacedev.ir/images/landing/education/student-02.png" alt="..." />
                    </div>
                </div>
            </div>
            <!-- end Teaching Method -->
        </div>

        <!-- Testimonials -->
        <div class="grid gap-y-8">
            <div class="w-full max-w-6xl px-4 mx-auto">
                <div class="flex flex-col gap-y-2.5 ps-16">
                    <div class="flex items-center gap-x-3">
                        <span
                            class="inline-flex items-center gap-x-1.5 before:shrink-0 before:inline-block before:size-1 before:bg-surface-content before:rounded-full before:ring-2 before:ring-surface-content/40 after:inline-block after:w-5 after:h-px after:bg-surface-2-content/35 ps-1.5">
                        </span>
                        <h3 class="font-bold sm:text-2xl text-xl">همراهان زبانینو</h3>
                    </div>
                    <p class="font-semibold sm:text-sm text-xs text-surface-2-content">
                        آنچه زبان‌آموزان درباره تجربه یادگیری خود می‌گویند.
                    </p>
                </div>
            </div>

            <div x-data="{
                        pauseOnHover: true,
                    
                        init() {
                            this.$nextTick(() => {
                                const marqueeList = this.$refs.marqueeList
                                const items = marqueeList.children
                                let totalWidth = 0
                    
                                // محاسبه مجموع عرض آیتم‌ها + gap
                                for (let item of items) {
                                    totalWidth += item.offsetWidth
                                }
                    
                                // gap بین آیتم‌ها (از Tailwind: gap-10 => 2.5rem = 40px)
                                const gap = parseInt(getComputedStyle(marqueeList).columnGap || getComputedStyle(marqueeList).gap) || 0
                                totalWidth += gap * (items.length - 1)
                    
                                // ست کردن عرض واقعی
                                marqueeList.style.width = `${totalWidth}px`
                    
                                // کلون گرفتن برای marquee
                                this.$refs.marqueeTrack.appendChild(marqueeList.cloneNode(true))
                            })
                        }
                    }" class="relative overflow-hidden bg-noise border-y py-10">
                <div class="absolute inset-y-0 start-0 z-10 w-32 bg-linear-to-r from-surface-1 to-transparent rtl:bg-linear-to-l"
                    aria-hidden="true"></div>
                <div class="absolute inset-y-0 end-0 z-10 w-32 bg-linear-to-l from-surface-1 to-transparent rtl:bg-linear-to-r"
                    aria-hidden="true"></div>

                <div x-ref="marqueeTrack"
                    class="animate-full-tl rtl:animate-full-tr relative flex flex-nowrap gap-10 w-full"
                    x-bind:class="{ 'hover:[animation-play-state:paused]': pauseOnHover }">
                    <div x-ref="marqueeList"
                        class="flex w-full shrink-0 flex-nowrap items-center justify-around gap-10 [&>div]:odd:w-2xs [&>div]:even:w-xs px-5">
                        <!-- Testimonial Item -->
                        <div
                            class="shrink-0 flex flex-col gap-y-3.5 bg-surface rounded-2xl inset-shadow-2xs inset-shadow-surface-2-content/10 p-5">
                            <div class="flex items-center gap-x-3.5">
                                <span class="shrink-0 inline-block sm:size-10 size-8 rounded-full overflow-hidden">
                                    <img src="https://blocks.spacedev.ir/images/avatars/01.jpg"
                                        class="size-full object-cover" alt="..." />
                                </span>
                                <div class="grow flex flex-col items-start gap-y-1.5">
                                    <span class="line-clamp-1 font-semibold text-xs">
                                        نگار فرهمند
                                    </span>
                                    <div class="flex items-center gap-x-0.5 text-yellow-500">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                            <p class="text-xs text-surface-2-content">
                                قبل از این دوره جرأت صحبت‌کردن نداشتم، اما تمرین‌های مکالمه‌محور کمک کرد خیلی
                                روان‌تر و با اعتمادبه‌نفس حرف بزنم.
                            </p>
                            <div class="flex items-center justify-end gap-x-2 font-semibold text-2xs">
                                <span class="inline-block size-4 rounded-full overflow-hidden">
                                    <img src="https://blocks.spacedev.ir/images/flag/gb4x3.svg"
                                        class="object-cover size-full" alt="..." />
                                </span>
                                <a href="#" class="hover:text-blue-500">
                                    مکالمه روان (Speaking)
                                </a>
                            </div>
                        </div>
                        <!-- end Testimonial Item -->

                        <!-- Testimonial Item -->
                        <div
                            class="shrink-0 flex flex-col gap-y-3.5 bg-surface rounded-2xl inset-shadow-2xs inset-shadow-surface-2-content/10 p-5">
                            <div class="flex items-center gap-x-3.5">
                                <span class="shrink-0 inline-block sm:size-10 size-8 rounded-full overflow-hidden">
                                    <img src="https://blocks.spacedev.ir/images/avatars/02.jpg"
                                        class="size-full object-cover" alt="..." />
                                </span>
                                <div class="grow flex flex-col items-start gap-y-1.5">
                                    <span class="line-clamp-1 font-semibold text-xs">
                                        سامان دادفر
                                    </span>
                                    <div class="flex items-center gap-x-0.5 text-yellow-500">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                            <p class="text-xs text-surface-2-content">
                                تمرکز دوره روی صحبت‌کردن واقعی بود، نه حفظ‌کردن. دقیقاً همون چیزی که برای پیشرفت
                                مکالمه لازم داشتم.
                            </p>
                            <div class="flex items-center justify-end gap-x-2 font-semibold text-2xs">
                                <span class="inline-block size-4 rounded-full overflow-hidden">
                                    <img src="https://blocks.spacedev.ir/images/flag/gb4x3.svg"
                                        class="object-cover size-full" alt="..." />
                                </span>
                                <a href="#" class="hover:text-blue-500">
                                    مکالمه روان (Speaking)
                                </a>
                            </div>
                        </div>
                        <!-- end Testimonial Item -->

                        <!-- Testimonial Item -->
                        <div
                            class="shrink-0 flex flex-col gap-y-3.5 bg-surface rounded-2xl inset-shadow-2xs inset-shadow-surface-2-content/10 p-5">
                            <div class="flex items-center gap-x-3.5">
                                <span class="shrink-0 inline-block sm:size-10 size-8 rounded-full overflow-hidden">
                                    <img src="https://blocks.spacedev.ir/images/avatars/03.jpg"
                                        class="size-full object-cover" alt="..." />
                                </span>
                                <div class="grow flex flex-col items-start gap-y-1.5">
                                    <span class="line-clamp-1 font-semibold text-xs">
                                        سارا آذین‌فر
                                    </span>
                                    <div class="flex items-center gap-x-0.5 text-yellow-500">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                            <p class="text-xs text-surface-2-content">
                                گرامر همیشه برام پیچیده بود، اما این دوره خیلی ساده و کاربردی توضیح می‌داد. الان
                                راحت‌تر جمله می‌سازم.
                            </p>
                            <div class="flex items-center justify-end gap-x-2 font-semibold text-2xs">
                                <span class="inline-block size-4 rounded-full overflow-hidden">
                                    <img src="https://blocks.spacedev.ir/images/flag/gb4x3.svg"
                                        class="object-cover size-full" alt="..." />
                                </span>
                                <a href="#" class="hover:text-blue-500">
                                    گرامر عملی (Grammar)
                                </a>
                            </div>
                        </div>
                        <!-- end Testimonial Item -->

                        <!-- Testimonial Item -->
                        <div
                            class="shrink-0 flex flex-col gap-y-3.5 bg-surface rounded-2xl inset-shadow-2xs inset-shadow-surface-2-content/10 p-5">
                            <div class="flex items-center gap-x-3.5">
                                <span class="shrink-0 inline-block sm:size-10 size-8 rounded-full overflow-hidden">
                                    <img src="https://blocks.spacedev.ir/images/avatars/04.jpg"
                                        class="size-full object-cover" alt="..." />
                                </span>
                                <div class="grow flex flex-col items-start gap-y-1.5">
                                    <span class="line-clamp-1 font-semibold text-xs">
                                        نیکا کیانی
                                    </span>
                                    <div class="flex items-center gap-x-0.5 text-yellow-500">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                            <p class="text-xs text-surface-2-content">
                                نکته‌های گرامری دقیقاً جایی آموزش داده می‌شدن که توی مکالمه بهشون نیاز داشتم. کاملاً
                                قابل استفاده بود.
                            </p>
                            <div class="flex items-center justify-end gap-x-2 font-semibold text-2xs">
                                <span class="inline-block size-4 rounded-full overflow-hidden">
                                    <img src="https://blocks.spacedev.ir/images/flag/gb4x3.svg"
                                        class="object-cover size-full" alt="..." />
                                </span>
                                <a href="#" class="hover:text-blue-500">
                                    گرامر عملی (Grammar)
                                </a>
                            </div>
                        </div>
                        <!-- end Testimonial Item -->

                        <!-- Testimonial Item -->
                        <div
                            class="shrink-0 flex flex-col gap-y-3.5 bg-surface rounded-2xl inset-shadow-2xs inset-shadow-surface-2-content/10 p-5">
                            <div class="flex items-center gap-x-3.5">
                                <span class="shrink-0 inline-block sm:size-10 size-8 rounded-full overflow-hidden">
                                    <img src="https://blocks.spacedev.ir/images/avatars/05.jpg"
                                        class="size-full object-cover" alt="..." />
                                </span>
                                <div class="grow flex flex-col items-start gap-y-1.5">
                                    <span class="line-clamp-1 font-semibold text-xs">
                                        داریوش پاک‌زاد
                                    </span>
                                    <div class="flex items-center gap-x-0.5 text-yellow-500">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                            <p class="text-xs text-surface-2-content">
                                فایل‌های شنیداری و تمرین‌ها کمک کرد خیلی بهتر مکالمه‌های واقعی آلمانی رو متوجه بشم،
                                مخصوصاً لهجه‌ها.
                            </p>
                            <div class="flex items-center justify-end gap-x-2 font-semibold text-2xs">
                                <span class="inline-block size-4 rounded-full overflow-hidden">
                                    <img src="https://blocks.spacedev.ir/images/flag/de4x3.svg"
                                        class="object-cover size-full" alt="..." />
                                </span>
                                <a href="#" class="hover:text-blue-500">
                                    درک شنیداری (Listening)
                                </a>
                            </div>
                        </div>
                        <!-- end Testimonial Item -->

                        <!-- Testimonial Item -->
                        <div
                            class="shrink-0 flex flex-col gap-y-3.5 bg-surface rounded-2xl inset-shadow-2xs inset-shadow-surface-2-content/10 p-5">
                            <div class="flex items-center gap-x-3.5">
                                <span class="shrink-0 inline-block sm:size-10 size-8 rounded-full overflow-hidden">
                                    <img src="https://blocks.spacedev.ir/images/avatars/06.jpg"
                                        class="size-full object-cover" alt="..." />
                                </span>
                                <div class="grow flex flex-col items-start gap-y-1.5">
                                    <span class="line-clamp-1 font-semibold text-xs">
                                        آراد شایگان
                                    </span>
                                    <div class="flex items-center gap-x-0.5 text-yellow-500">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-3.5">
                                            <path fill-rule="evenodd"
                                                d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                            <p class="text-xs text-surface-2-content">
                                اوایل فهمیدن آلمانی برام سخت بود، ولی این دوره مرحله‌به‌مرحله پیش رفت و پیشرفتم
                                کاملاً محسوس بود.
                            </p>
                            <div class="flex items-center justify-end gap-x-2 font-semibold text-2xs">
                                <span class="inline-block size-4 rounded-full overflow-hidden">
                                    <img src="https://blocks.spacedev.ir/images/flag/de4x3.svg"
                                        class="object-cover size-full" alt="..." />
                                </span>
                                <a href="#" class="hover:text-blue-500">
                                    درک شنیداری (Listening)
                                </a>
                            </div>
                        </div>
                        <!-- end Testimonial Item -->
                    </div>
                </div>
            </div>
        </div>
        <!-- end Testimonials -->

        <div class="w-full max-w-6xl space-y-20 px-4 mx-auto">
            <!-- Blog / Articles -->
            <div class="grid gap-y-8">
                <div class="flex items-center gap-x-4">
                    <div class="flex flex-col gap-y-2.5">
                        <div class="flex items-center gap-x-3">
                            <span
                                class="inline-flex items-center gap-x-1.5 before:shrink-0 before:inline-block before:size-1 before:bg-surface-content before:rounded-full before:ring-2 before:ring-surface-content/40 after:inline-block after:w-5 after:h-px after:bg-surface-2-content/35 ps-1.5">
                            </span>
                            <h3 class="font-bold sm:text-2xl text-xl">مقالات</h3>
                        </div>
                        <p class="font-semibold sm:text-sm text-xs text-surface-2-content">
                            آخرین نکات، ترفندها و راهنمایی‌ها برای یادگیری بهتر زبان.
                        </p>
                    </div>

                    <a href="#"
                        class="inline-flex items-center gap-x-2 h-9 bg-surface dark:bg-surface-2 rounded-full text-surface-2-content hover:text-surface-content px-4 ms-auto">
                        <span class="line-clamp-1 font-semibold sm:text-xs text-2xs">دیدن همه</span>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                            class="size-3.5 rtl:-rotate-90">
                            <path fill-rule="evenodd"
                                d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </div>

                <div class="grid lg:grid-cols-4 sm:grid-cols-2 gap-2.5">
                    <!-- Post Card -->
                    <div class="flex flex-col gap-y-2.5 bg-surface dark:bg-surface-2 rounded-2xl p-2.5">
                        <a href="#" class="block h-40 rounded-lg overflow-hidden">
                            <img src="https://blocks.spacedev.ir/images/landing/education/post-01.jpg"
                                class="object-cover size-full" alt="..." />
                        </a>

                        <div class="flex flex-col gap-y-1.5">
                            <h3>
                                <a href="#" class="line-clamp-1 font-semibold text-sm hover:text-blue-500">
                                    تقویت مکالمه در ۳۰ روز
                                </a>
                            </h3>
                            <p class="line-clamp-2 font-semibold text-2xs text-surface-2-content">
                                روش‌ها و تمرین‌های کوتاه روزانه برای افزایش روانی صحبت کردن و اعتمادبه‌نفس در
                                مکالمه.
                            </p>

                            <div class="flex items-center justify-between border-t pt-2 mt-2">
                                <div class="flex items-center gap-x-2">
                                    <span
                                        class="shrink-0 inline-block size-7 border-2 border-white rounded-full overflow-hidden">
                                        <img src="https://blocks.spacedev.ir/images/avatars/05.jpg"
                                            class="size-full object-cover" alt="..." />
                                    </span>
                                    <div class="flex flex-col gap-y-0.5 font-semibold">
                                        <span class="text-2xs text-surface-2-content">نویسنده:</span>
                                        <span class="text-xs">داریوش پاک‌زاد</span>
                                    </div>
                                </div>

                                <a href="#"
                                    class="inline-flex items-center gap-x-1 bg-surface-1 dark:bg-surface-2 rounded-full text-surface-2-content hover:text-surface-content px-3 py-2 ms-auto">
                                    <span class="line-clamp-1 font-semibold text-xs">خواندن</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="size-3.5 rtl:rotate-180">
                                        <path fill-rule="evenodd"
                                            d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- end Post Card -->

                    <!-- Post Card -->
                    <div class="flex flex-col gap-y-2.5 bg-surface dark:bg-surface-2 rounded-2xl p-2.5">
                        <a href="#" class="block h-40 rounded-lg overflow-hidden">
                            <img src="https://blocks.spacedev.ir/images/landing/education/post-02.jpg"
                                class="object-cover size-full" alt="..." />
                        </a>

                        <div class="flex flex-col gap-y-1.5">
                            <h3>
                                <a href="#" class="line-clamp-1 font-semibold text-sm hover:text-blue-500">
                                    گرامر را ساده یاد بگیرید
                                </a>
                            </h3>
                            <p class="line-clamp-2 font-semibold text-2xs text-surface-2-content">
                                نکات کاربردی گرامری که به راحتی در مکالمه و نوشتار قابل استفاده هستند.
                            </p>

                            <div class="flex items-center justify-between border-t pt-2 mt-2">
                                <div class="flex items-center gap-x-2">
                                    <span
                                        class="shrink-0 inline-block size-7 border-2 border-white rounded-full overflow-hidden">
                                        <img src="https://blocks.spacedev.ir/images/avatars/05.jpg"
                                            class="size-full object-cover" alt="..." />
                                    </span>
                                    <div class="flex flex-col gap-y-0.5 font-semibold">
                                        <span class="text-2xs text-surface-2-content">نویسنده:</span>
                                        <span class="text-xs">داریوش پاک‌زاد</span>
                                    </div>
                                </div>

                                <a href="#"
                                    class="inline-flex items-center gap-x-1 bg-surface-1 dark:bg-surface-2 rounded-full text-surface-2-content hover:text-surface-content px-3 py-2 ms-auto">
                                    <span class="line-clamp-1 font-semibold text-xs">خواندن</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="size-3.5 rtl:rotate-180">
                                        <path fill-rule="evenodd"
                                            d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- end Post Card -->

                    <!-- Post Card -->
                    <div class="flex flex-col gap-y-2.5 bg-surface dark:bg-surface-2 rounded-2xl p-2.5">
                        <a href="#" class="block h-40 rounded-lg overflow-hidden">
                            <img src="https://blocks.spacedev.ir/images/landing/education/post-03.jpg"
                                class="object-cover size-full" alt="..." />
                        </a>

                        <div class="flex flex-col gap-y-1.5">
                            <h3>
                                <a href="#" class="line-clamp-1 font-semibold text-sm hover:text-blue-500">
                                    شنیداری فعال: کلید فهم بهتر
                                </a>
                            </h3>
                            <p class="line-clamp-2 font-semibold text-2xs text-surface-2-content">
                                تمرین‌ها و روش‌های عملی برای درک بهتر مکالمات و محتوای صوتی واقعی.
                            </p>

                            <div class="flex items-center justify-between border-t pt-2 mt-2">
                                <div class="flex items-center gap-x-2">
                                    <span
                                        class="shrink-0 inline-block size-7 border-2 border-white rounded-full overflow-hidden">
                                        <img src="https://blocks.spacedev.ir/images/avatars/05.jpg"
                                            class="size-full object-cover" alt="..." />
                                    </span>
                                    <div class="flex flex-col gap-y-0.5 font-semibold">
                                        <span class="text-2xs text-surface-2-content">نویسنده:</span>
                                        <span class="text-xs">داریوش پاک‌زاد</span>
                                    </div>
                                </div>

                                <a href="#"
                                    class="inline-flex items-center gap-x-1 bg-surface-1 dark:bg-surface-2 rounded-full text-surface-2-content hover:text-surface-content px-3 py-2 ms-auto">
                                    <span class="line-clamp-1 font-semibold text-xs">خواندن</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="size-3.5 rtl:rotate-180">
                                        <path fill-rule="evenodd"
                                            d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- end Post Card -->

                    <!-- Post Card -->
                    <div class="flex flex-col gap-y-2.5 bg-surface dark:bg-surface-2 rounded-2xl p-2.5">
                        <a href="#" class="block h-40 rounded-lg overflow-hidden">
                            <img src="https://blocks.spacedev.ir/images/landing/education/post-04.jpg"
                                class="object-cover size-full" alt="..." />
                        </a>

                        <div class="flex flex-col gap-y-1.5">
                            <h3>
                                <a href="#" class="line-clamp-1 font-semibold text-sm hover:text-blue-500">
                                    چطور منظم زبان تمرین کنیم؟
                                </a>
                            </h3>
                            <p class="line-clamp-2 font-semibold text-2xs text-surface-2-content">
                                راهکارهای ساده برای ساخت عادت روزانه یادگیری زبان، بدون فشار و خستگی، حتی با زمان
                                کم.
                            </p>

                            <div class="flex items-center justify-between border-t pt-2 mt-2">
                                <div class="flex items-center gap-x-2">
                                    <span
                                        class="shrink-0 inline-block size-7 border-2 border-white rounded-full overflow-hidden">
                                        <img src="https://blocks.spacedev.ir/images/avatars/05.jpg"
                                            class="size-full object-cover" alt="..." />
                                    </span>
                                    <div class="flex flex-col gap-y-0.5 font-semibold">
                                        <span class="text-2xs text-surface-2-content">نویسنده:</span>
                                        <span class="text-xs">داریوش پاک‌زاد</span>
                                    </div>
                                </div>

                                <a href="#"
                                    class="inline-flex items-center gap-x-1 bg-surface-1 dark:bg-surface-2 rounded-full text-surface-2-content hover:text-surface-content px-3 py-2 ms-auto">
                                    <span class="line-clamp-1 font-semibold text-xs">خواندن</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                        class="size-3.5 rtl:rotate-180">
                                        <path fill-rule="evenodd"
                                            d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- end Post Card -->
                </div>
            </div>
            <!-- end Blog / Articles -->
        </div>
    </div><!-- end Main Content Area -->

    <!-- Footer -->
    <footer class="p-2.5 mt-28">
        <div class="bg-surface dark:bg-surface-2 rounded-3xl overflow-hidden">
            <div class="w-full max-w-7xl space-y-3 px-4 mx-auto">
                <div class="flex flex-col items-center justify-center text-center gap-y-5 py-8">
                    <a href="#" class="flex items-center gap-x-2">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-8">
                            <path fill-rule="evenodd"
                                d="M8 2C4.262 2 1 4.57 1 8c0 1.86.98 3.486 2.455 4.566a3.472 3.472 0 0 1-.469 1.26.75.75 0 0 0 .713 1.14 6.961 6.961 0 0 0 3.06-1.06c.403.062.818.094 1.241.094 3.738 0 7-2.57 7-6s-3.262-6-7-6ZM5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm7-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
                                clip-rule="evenodd" />
                        </svg>
                        <span class="font-bold text-xl">زبانینو</span>
                    </a>

                    <p class="text-sm max-sm:text-xs leading-normal text-surface-2-content">
                        با دوره‌های هدفمند، تمرین‌های واقعی و پشتیبانی مستمر
                        کمکت می‌کنیم زبان رو وارد زندگی روزمره‌ات کنی.
                    </p>
                </div>
            </div>
            <div
                class="bg-surface dark:bg-surface-1/50 rounded-t-2xl inset-shadow-2xs inset-shadow-surface-2-content/10 py-5">
                <div class="w-full max-w-7xl space-y-3 px-4 mx-auto">
                    <div class="grid grid-cols-4 lg:gap-5 gap-10">
                        <div class="lg:col-span-1 col-span-full">
                            <div class="flex items-center gap-x-5">
                                <a href="#" class="flex flex-col items-start gap-y-1">
                                    <span class="flex items-center gap-x-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-6">
                                            <path fill-rule="evenodd"
                                                d="M8 2C4.262 2 1 4.57 1 8c0 1.86.98 3.486 2.455 4.566a3.472 3.472 0 0 1-.469 1.26.75.75 0 0 0 .713 1.14 6.961 6.961 0 0 0 3.06-1.06c.403.062.818.094 1.241.094 3.738 0 7-2.57 7-6s-3.262-6-7-6ZM5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm7-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <span class="font-bold text-lg">زبانینو</span>
                                    </span>
                                    <span class="font-semibold text-2xs text-surface-2-content">مسیر درست
                                        یادگیری</span>
                                </a>
                                <span class="inline-block w-px h-4 bg-border"></span>
                                <div class="flex items-center gap-x-2">
                                    <a href="#" class="inline-flex text-surface-2-content hover:text-surface-content">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                            viewBox="0 0 24 24" class="size-4">
                                            <g fill="none" stroke="currentColor" stroke-linecap="round"
                                                stroke-linejoin="round" stroke-width="2">
                                                <path
                                                    d="M4 8a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z" />
                                                <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0m7.5-4.5v.01" />
                                            </g>
                                        </svg>
                                    </a>
                                    <a href="#" class="inline-flex text-surface-2-content hover:text-surface-content">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                            viewBox="0 0 24 24" class="size-4">
                                            <path fill="none" stroke="currentColor" stroke-linecap="round"
                                                stroke-linejoin="round" stroke-width="2"
                                                d="m15 10l-4 4l6 6l4-16l-18 7l4 2l2 6l3-4" />
                                        </svg>
                                    </a>
                                    <a href="#" class="inline-flex text-surface-2-content hover:text-surface-content">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                            viewBox="0 0 24 24" class="size-4">
                                            <g fill="none" stroke="currentColor" stroke-linecap="round"
                                                stroke-linejoin="round" stroke-width="2">
                                                <path d="M8 11v5m0-8v.01M12 16v-5m4 5v-3a2 2 0 1 0-4 0" />
                                                <path
                                                    d="M3 7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z" />
                                            </g>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                            <div class="block w-full h-px bg-border my-4"></div>
                            <p class="font-semibold text-xs text-surface-2-content">
                                ما در این آموزشگاه با بهره‌گیری از مدرس‌های مجرب و متدهای به‌روز، یادگیری زبان را به
                                تجربه‌ای کاربردی و هدفمند تبدیل کرده‌ایم. تمرکز ما بر مکالمه، درک واقعی زبان و
                                پیشرفت مستمر زبان‌آموزان است.
                            </p>
                        </div>
                        <div class="lg:col-span-1 sm:col-span-2 col-span-full flex flex-col gap-y-3.5">
                            <div class="flex items-center gap-x-3">
                                <span
                                    class="inline-flex items-center gap-x-1.5 before:shrink-0 before:inline-block before:size-1 before:bg-surface-content before:rounded-full before:ring-2 before:ring-surface-content/40 after:inline-block after:w-5 after:h-px after:bg-surface-2-content/35 ps-1.5">
                                </span>
                                <h3 class="font-bold text-sm">دوره‌های محبوب</h3>
                            </div>

                            <ul class="flex flex-col items-start gap-y-1.5">
                                <li>
                                    <a href="#"
                                        class="inline-flex font-semibold text-xs text-surface-2-content hover:text-surface-content">
                                        مکالمه روان (Speaking) (انگلیسی)
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                        class="inline-flex font-semibold text-xs text-surface-2-content hover:text-surface-content">
                                        گرامر عملی (Grammar) (انگلیسی)
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                        class="inline-flex font-semibold text-xs text-surface-2-content hover:text-surface-content">
                                        درک شنیداری (Listening) (آلمانی)
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                        class="inline-flex font-semibold text-xs text-surface-2-content hover:text-surface-content">
                                        گرامر عملی (Grammar) (آلمانی)
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="lg:col-span-1 sm:col-span-2 col-span-full flex flex-col gap-y-3.5">
                            <div class="flex items-center gap-x-3">
                                <span
                                    class="inline-flex items-center gap-x-1.5 before:shrink-0 before:inline-block before:size-1 before:bg-surface-content before:rounded-full before:ring-2 before:ring-surface-content/40 after:inline-block after:w-5 after:h-px after:bg-surface-2-content/35 ps-1.5">
                                </span>
                                <h3 class="font-bold text-sm">لینک‌های مفید</h3>
                            </div>

                            <ul class="flex flex-col items-start gap-y-1.5">
                                <li>
                                    <a href="#"
                                        class="inline-flex font-semibold text-xs text-surface-2-content hover:text-surface-content">
                                        درباره آموزشگاه
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                        class="inline-flex font-semibold text-xs text-surface-2-content hover:text-surface-content">
                                        تماس با ما
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                        class="inline-flex font-semibold text-xs text-surface-2-content hover:text-surface-content">
                                        پرسش‌های متداول
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                        class="inline-flex font-semibold text-xs text-surface-2-content hover:text-surface-content">
                                        قوانین و شرایط استفاده
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                        class="inline-flex font-semibold text-xs text-surface-2-content hover:text-surface-content">
                                        حریم خصوصی
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="lg:col-span-1 col-span-full flex flex-col gap-y-3.5">
                            <div class="flex items-center gap-x-3">
                                <span
                                    class="inline-flex items-center gap-x-1.5 before:shrink-0 before:inline-block before:size-1 before:bg-surface-content before:rounded-full before:ring-2 before:ring-surface-content/40 after:inline-block after:w-5 after:h-px after:bg-surface-2-content/35 ps-1.5">
                                </span>
                                <h3 class="font-bold text-sm">راه‌های ارتباط با ما</h3>
                            </div>

                            <div class="grid gap-y-2.5">
                                <div class="flex items-start gap-x-2">
                                    <span
                                        class="shrink-0 inline-flex items-center justify-center size-9 bg-neutral-500 border border-neutral-500 rounded-lg inset-shadow-xs inset-shadow-white/50 text-zinc-100">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-4">
                                            <path fill-rule="evenodd"
                                                d="m3.855 7.286 1.067-.534a1 1 0 0 0 .542-1.046l-.44-2.858A1 1 0 0 0 4.036 2H3a1 1 0 0 0-1 1v2c0 .709.082 1.4.238 2.062a9.012 9.012 0 0 0 6.7 6.7A9.024 9.024 0 0 0 11 14h2a1 1 0 0 0 1-1v-1.036a1 1 0 0 0-.848-.988l-2.858-.44a1 1 0 0 0-1.046.542l-.534 1.067a7.52 7.52 0 0 1-4.86-4.859Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </span>
                                    <span class="flex flex-col gap-y-1">
                                        <span class="font-semibold text-2xs text-surface-2-content">
                                            تلفن پشتیبانی:
                                        </span>
                                        <a href="tel:+982112345678" class="font-bold text-xs" dir="ltr">
                                            021-12345678
                                        </a>
                                    </span>
                                </div>
                                <div class="flex items-start gap-x-2">
                                    <span
                                        class="shrink-0 inline-flex items-center justify-center size-9 bg-neutral-500 border border-neutral-500 rounded-lg inset-shadow-xs inset-shadow-white/50 text-zinc-100">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-4">
                                            <path
                                                d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
                                            <path
                                                d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
                                        </svg>
                                    </span>
                                    <span class="flex flex-col gap-y-1">
                                        <span class="font-semibold text-2xs text-surface-2-content">
                                            ایمیل:
                                        </span>
                                        <a href="mailto:support@zabanino.ir" class="font-bold font-sans text-xs"
                                            dir="ltr">
                                            support@zabanino.ir
                                        </a>
                                    </span>
                                </div>
                                <div class="flex items-start gap-x-2">
                                    <span
                                        class="shrink-0 inline-flex items-center justify-center size-9 bg-neutral-500 border border-neutral-500 rounded-lg inset-shadow-xs inset-shadow-white/50 text-zinc-100">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                            class="size-4">
                                            <path fill-rule="evenodd"
                                                d="m7.539 14.841.003.003.002.002a.755.755 0 0 0 .912 0l.002-.002.003-.003.012-.009a5.57 5.57 0 0 0 .19-.153 15.588 15.588 0 0 0 2.046-2.082c1.101-1.362 2.291-3.342 2.291-5.597A5 5 0 0 0 3 7c0 2.255 1.19 4.235 2.292 5.597a15.591 15.591 0 0 0 2.046 2.082 8.916 8.916 0 0 0 .189.153l.012.01ZM8 8.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </span>
                                    <span class="flex flex-col gap-y-1">
                                        <span class="font-semibold text-2xs text-surface-2-content">
                                            آدرس:
                                        </span>
                                        <span class="font-bold text-xs">
                                            تهران، خیابان ولیعصر، بالاتر از یه پارک :)
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div
                        class="font-semibold text-2xs text-center text-surface-2-content border-t select-none pt-5 mt-5">
                        تمامی حقوق این وب‌سایت محفوظ است — آموزشگاه زبانینو
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- end Footer -->

    <!-- Navigation -->
    <div class="fixed inset-y-0 start-0 flex flex-col w-64 h-screen bg-surface dark:bg-surface-2 rounded-e-2xl transition-transform duration-300 ease-in-out z-50"
        x-bind:class="isNavigationOpen ? 'translate-x-0' : '-translate-x-full rtl:translate-x-full'" x-cloak>
        <!-- Navigation Header -->
        <div class="sticky top-0 flex flex-col items-start gap-y-2.5 border-b p-5">
            <a href="#" class="flex flex-col items-start gap-y-1">
                <span class="flex items-center gap-x-1">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-6">
                        <path fill-rule="evenodd"
                            d="M8 2C4.262 2 1 4.57 1 8c0 1.86.98 3.486 2.455 4.566a3.472 3.472 0 0 1-.469 1.26.75.75 0 0 0 .713 1.14 6.961 6.961 0 0 0 3.06-1.06c.403.062.818.094 1.241.094 3.738 0 7-2.57 7-6s-3.262-6-7-6ZM5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm7-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
                            clip-rule="evenodd" />
                    </svg>
                    <span class="font-bold text-lg">زبانینو</span>
                </span>
                <span class="font-semibold text-2xs text-surface-2-content">مسیر درست یادگیری</span>
            </a>

            <button type="button"
                class="absolute end-3 top-3 inline-flex items-center justify-center size-8 bg-surface-2 dark:bg-surface-3 rounded-lg cursor-pointer text-surface-2-content hover:text-surface-content"
                x-on:click="darkMode = !darkMode">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="dark:hidden">
                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2">
                        <circle cx="12" cy="12" r="4" />
                        <path
                            d="M12 4h.01M20 12h.01M12 20h.01M4 12h.01m13.647-5.657h.01m-.01 11.314h.01m-11.324 0h.01m-.01-11.314h.01" />
                    </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                    class="dark:block hidden">
                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2"
                        d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />
                </svg>
            </button>
        </div><!-- end Navigation Header -->

        <!-- Navigation Menu -->
        <div class="flex-1 flex flex-col gap-y-1 overflow-auto p-5">
            <a href="#" class="flex items-center gap-x-2.5 cursor-pointer py-2">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-5 text-surface-2-content">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
                </svg>
                <span class="line-clamp-1 font-semibold text-xs">
                    دوره‌های آموزشی
                </span>
            </a>
            <a href="#" class="flex items-center gap-x-2.5 cursor-pointer py-2">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-5 text-surface-2-content">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
                </svg>
                <span class="line-clamp-1 font-semibold text-xs">
                    مدرسین
                </span>
            </a>
            <a href="#" class="flex items-center gap-x-2.5 cursor-pointer py-2">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-5 text-surface-2-content">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
                </svg>
                <span class="line-clamp-1 font-semibold text-xs">
                    تجربه زبان‌آموزان
                </span>
            </a>
        </div><!-- end Navigation Menu -->
    </div><!-- end Navigation -->

    <!-- Navigation Overlay -->
    <div class="fixed inset-0 size-full bg-black/25 transition-all z-40"
        x-bind:class="isNavigationOpen ? 'opacity-100 visible' : 'opacity-0 invisible'"
        x-on:click="isNavigationOpen = false">
    </div><!-- Navigation Overlay -->
</div><!-- end Layout Container -->

@theme {
  /* https://www.spacedev.ir/docs */

  --animate-full-tl: full-tl 25s linear infinite;
  --animate-full-tr: full-tr 25s linear infinite;

  @keyframes full-tl {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes full-tr {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(100%);
    }
  }
}