دعوت به اقدام

<div class="w-full max-w-6xl px-4 py-10 mx-auto">
    <div class="grid grid-cols-5 items-center gap-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/heroes/01.png" alt="..." />
            </div>
        </div>
    </div>
</div>