نمای شبکه‌ای

<div class="grid lg:grid-cols-3 sm:grid-cols-2 gap-5">
    <!-- Instructor card -->
    <div class="bg-surface rounded-2xl shadow-xs inset-shadow-2xs inset-shadow-surface-content/10 p-6">
        <!-- Profile image + social icons + info -->
        <div class="flex gap-5">
            <!-- Avatar and social icons -->
            <div class="shrink-0 flex flex-col gap-y-3">
                <span class="inline-flex relative">
                    <span class="inline-block sm:size-20 size-14 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="absolute end-1.5 bottom-0 inline-flex items-center justify-center size-5 ring-2 bg-surface ring-surface rounded-full text-blue-500">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-5">
                            <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 items-center justify-center gap-1.5">
                    <a href="#" class="inline-flex cursor-pointer 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-3.5">
                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2" d="m4 4l11.733 16H20L8.267 4zm0 16l6.768-6.768m2.46-2.46L20 4" />
                        </svg>
                    </a>
                    <a href="#" class="inline-flex cursor-pointer 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-3.5">
                            <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 cursor-pointer 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-3.5">
                            <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><!-- end Avatar and social icons -->

            <!-- Instructor info and stats -->
            <div class="grow flex flex-col items-start gap-y-3">
                <div class="flex flex-col gap-y-1.5">
                    <h3 class="font-bold text-sm">نیکی فرهمند</h3>
                    <p class="font-medium text-xs text-surface-2-content">فرانت‌اند دولوپر</p>
                </div>

                <div class="flex flex-col gap-y-2 mt-auto">
                    <div class="flex items-center gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                            class="shrink-0 size-4 text-yellow-400">
                            <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 class="flex items-center gap-x-2">
                            <span class="font-bold text-xs">4.8</span>
                            <span class="inline-block size-1 bg-surface-2-content/50 rounded-full"></span>
                            <span class="font-semibold text-2xs text-surface-2-content">
                                (3,282 نظر)
                            </span>
                        </div>
                    </div>
                    <a href="#"
                        class="inline-flex items-center justify-center h-9 bg-surface border rounded-full inset-shadow-xs inset-shadow-white/50 font-semibold text-2xs text-surface-2-content cursor-pointer hover:bg-surface-1 hover:text-surface-content 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="M7.702 1.368a.75.75 0 0 1 .597 0c2.098.91 4.105 1.99 6.004 3.223a.75.75 0 0 1-.194 1.348A34.27 34.27 0 0 0 8.341 8.25a.75.75 0 0 1-.682 0c-.625-.32-1.262-.62-1.909-.901v-.542a36.878 36.878 0 0 1 2.568-1.33.75.75 0 0 0-.636-1.357 38.39 38.39 0 0 0-3.06 1.605.75.75 0 0 0-.372.648v.365c-.773-.294-1.56-.56-2.359-.8a.75.75 0 0 1-.194-1.347 40.901 40.901 0 0 1 6.005-3.223ZM4.25 8.348c-.53-.212-1.067-.411-1.611-.596a40.973 40.973 0 0 0-.418 2.97.75.75 0 0 0 .474.776c.175.068.35.138.524.21a5.544 5.544 0 0 1-.58.681.75.75 0 1 0 1.06 1.06c.35-.349.655-.726.915-1.124a29.282 29.282 0 0 0-1.395-.617A5.483 5.483 0 0 0 4.25 8.5v-.152Z" />
                            <path
                                d="M7.603 13.96c-.96-.6-1.958-1.147-2.989-1.635a6.981 6.981 0 0 0 1.12-3.341c.419.192.834.393 1.244.602a2.25 2.25 0 0 0 2.045 0 32.787 32.787 0 0 1 4.338-1.834c.175.978.315 1.969.419 2.97a.75.75 0 0 1-.474.776 29.385 29.385 0 0 0-4.909 2.461.75.75 0 0 1-.794 0Z" />
                        </svg>
                    </a>
                </div>

            </div><!-- end Instructor info and stats -->
        </div><!-- end Profile image + social icons + info -->

        <!-- Instructor bio -->
        <div class="line-clamp-3 font-medium leading-relaxed text-xs text-surface-2-content mt-5">
            نیکی بیش از ۵ ساله که در زمینه‌ی توسعه رابط کاربری فعالیت می‌کنه و عاشق طراحی تمیز و تجربه
            کاربری قدرتمنده.
            تدریس براش فرصتیه برای انتقال دانشی که همیشه به‌روز نگهش می‌داره.
        </div>

        <!-- Stats: students and courses -->
        <div class="flex flex-wrap items-center gap-2 border-t pt-3 mt-3">
            <div class="flex items-center gap-x-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                    class="size-3.5 text-cyan-500">
                    <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 class="font-semibold text-2xs text-surface-2-content">4,733 دانشجو</span>
            </div>
            <span class="inline-block size-1 bg-surface-2-content/50 rounded-full"></span>
            <div class="flex items-center gap-x-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                    class="size-3.5 text-green-500">
                    <path
                        d="M5.5 3.5A1.5 1.5 0 0 1 7 2h2.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 1 .439 1.061V9.5A1.5 1.5 0 0 1 12 11V8.621a3 3 0 0 0-.879-2.121L9 4.379A3 3 0 0 0 6.879 3.5H5.5Z" />
                    <path
                        d="M4 5a1.5 1.5 0 0 0-1.5 1.5v6A1.5 1.5 0 0 0 4 14h5a1.5 1.5 0 0 0 1.5-1.5V8.621a1.5 1.5 0 0 0-.44-1.06L7.94 5.439A1.5 1.5 0 0 0 6.878 5H4Z" />
                </svg>
                <span class="font-semibold text-2xs text-surface-2-content">21 دوره آموزشی</span>
            </div>
        </div><!-- end Stats: students and courses -->
    </div><!-- end Instructor card -->

    <!-- Instructor card -->
    <div class="bg-surface rounded-2xl shadow-xs inset-shadow-2xs inset-shadow-surface-content/10 p-6">
        <!-- Profile image + social icons + info -->
        <div class="flex gap-5">
            <!-- Avatar and social icons -->
            <div class="shrink-0 flex flex-col gap-y-3">
                <span class="inline-flex relative">
                    <span class="inline-block sm:size-20 size-14 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="absolute end-1.5 bottom-0 inline-flex items-center justify-center size-5 ring-2 bg-surface ring-surface rounded-full text-blue-500">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-5">
                            <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 items-center justify-center gap-1.5">
                    <a href="#" class="inline-flex cursor-pointer 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-3.5">
                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2" d="m4 4l11.733 16H20L8.267 4zm0 16l6.768-6.768m2.46-2.46L20 4" />
                        </svg>
                    </a>
                    <a href="#" class="inline-flex cursor-pointer 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-3.5">
                            <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 cursor-pointer 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-3.5">
                            <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><!-- end Avatar and social icons -->

            <!-- Instructor info and stats -->
            <div class="grow flex flex-col items-start gap-y-3">
                <div class="flex flex-col gap-y-1.5">
                    <h3 class="font-bold text-sm">سامان دادفر</h3>
                    <p class="font-medium text-xs text-surface-2-content">توسعه‌دهنده فول‌استک</p>
                </div>

                <div class="flex flex-col gap-y-2 mt-auto">
                    <div class="flex items-center gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                            class="shrink-0 size-4 text-yellow-400">
                            <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 class="flex items-center gap-x-2">
                            <span class="font-bold text-xs">4.9</span>
                            <span class="inline-block size-1 bg-surface-2-content/50 rounded-full"></span>
                            <span class="font-semibold text-2xs text-surface-2-content">
                                (2,421 نظر)
                            </span>
                        </div>
                    </div>
                    <a href="#"
                        class="inline-flex items-center justify-center h-9 bg-surface border rounded-full inset-shadow-xs inset-shadow-white/50 font-semibold text-2xs text-surface-2-content cursor-pointer hover:bg-surface-1 hover:text-surface-content 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="M7.702 1.368a.75.75 0 0 1 .597 0c2.098.91 4.105 1.99 6.004 3.223a.75.75 0 0 1-.194 1.348A34.27 34.27 0 0 0 8.341 8.25a.75.75 0 0 1-.682 0c-.625-.32-1.262-.62-1.909-.901v-.542a36.878 36.878 0 0 1 2.568-1.33.75.75 0 0 0-.636-1.357 38.39 38.39 0 0 0-3.06 1.605.75.75 0 0 0-.372.648v.365c-.773-.294-1.56-.56-2.359-.8a.75.75 0 0 1-.194-1.347 40.901 40.901 0 0 1 6.005-3.223ZM4.25 8.348c-.53-.212-1.067-.411-1.611-.596a40.973 40.973 0 0 0-.418 2.97.75.75 0 0 0 .474.776c.175.068.35.138.524.21a5.544 5.544 0 0 1-.58.681.75.75 0 1 0 1.06 1.06c.35-.349.655-.726.915-1.124a29.282 29.282 0 0 0-1.395-.617A5.483 5.483 0 0 0 4.25 8.5v-.152Z" />
                            <path
                                d="M7.603 13.96c-.96-.6-1.958-1.147-2.989-1.635a6.981 6.981 0 0 0 1.12-3.341c.419.192.834.393 1.244.602a2.25 2.25 0 0 0 2.045 0 32.787 32.787 0 0 1 4.338-1.834c.175.978.315 1.969.419 2.97a.75.75 0 0 1-.474.776 29.385 29.385 0 0 0-4.909 2.461.75.75 0 0 1-.794 0Z" />
                        </svg>
                    </a>
                </div>

            </div><!-- end Instructor info and stats -->
        </div><!-- end Profile image + social icons + info -->

        <!-- Instructor bio -->
        <p class="line-clamp-3 font-medium leading-relaxed text-xs text-surface-2-content mt-5">
            سامان از علاقه‌مندان یادگیری دائمیه و از ترکیب فرانت و بک‌اند برای ساخت محصولات کامل لذت می‌بره.
            او در کلاس‌هاش تمرکز زیادی روی درک عمیق مفاهیم داره.
        </p>

        <!-- Stats: students and courses -->
        <div class="flex flex-wrap items-center gap-2 border-t pt-3 mt-3">
            <div class="flex items-center gap-x-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                    class="size-3.5 text-cyan-500">
                    <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 class="font-semibold text-2xs text-surface-2-content">7,346 دانشجو</span>
            </div>
            <span class="inline-block size-1 bg-surface-2-content/50 rounded-full"></span>
            <div class="flex items-center gap-x-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                    class="size-3.5 text-green-500">
                    <path
                        d="M5.5 3.5A1.5 1.5 0 0 1 7 2h2.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 1 .439 1.061V9.5A1.5 1.5 0 0 1 12 11V8.621a3 3 0 0 0-.879-2.121L9 4.379A3 3 0 0 0 6.879 3.5H5.5Z" />
                    <path
                        d="M4 5a1.5 1.5 0 0 0-1.5 1.5v6A1.5 1.5 0 0 0 4 14h5a1.5 1.5 0 0 0 1.5-1.5V8.621a1.5 1.5 0 0 0-.44-1.06L7.94 5.439A1.5 1.5 0 0 0 6.878 5H4Z" />
                </svg>
                <span class="font-semibold text-2xs text-surface-2-content">7 دوره آموزشی</span>
            </div>
        </div><!-- end Stats: students and courses -->
    </div><!-- end Instructor card -->

    <!-- Instructor card -->
    <div class="bg-surface rounded-2xl shadow-xs inset-shadow-2xs inset-shadow-surface-content/10 p-6">
        <!-- Profile image + social icons + info -->
        <div class="flex gap-5">
            <!-- Avatar and social icons -->
            <div class="shrink-0 flex flex-col gap-y-3">
                <span class="inline-flex relative">
                    <span class="inline-block sm:size-20 size-14 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="absolute end-1.5 bottom-0 inline-flex items-center justify-center size-5 ring-2 bg-surface ring-surface rounded-full text-blue-500">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-5">
                            <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 items-center justify-center gap-1.5">
                    <a href="#" class="inline-flex cursor-pointer 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-3.5">
                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2" d="m4 4l11.733 16H20L8.267 4zm0 16l6.768-6.768m2.46-2.46L20 4" />
                        </svg>
                    </a>
                    <a href="#" class="inline-flex cursor-pointer 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-3.5">
                            <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 cursor-pointer 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-3.5">
                            <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><!-- end Avatar and social icons -->

            <!-- Instructor info and stats -->
            <div class="grow flex flex-col items-start gap-y-3">
                <div class="flex flex-col gap-y-1.5">
                    <h3 class="font-bold text-sm">سارا آذین‌فر</h3>
                    <p class="font-medium text-xs text-surface-2-content">طراح تجربه کاربری</p>
                </div>

                <div class="flex flex-col gap-y-2 mt-auto">
                    <div class="flex items-center gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                            class="shrink-0 size-4 text-yellow-400">
                            <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 class="flex items-center gap-x-2">
                            <span class="font-bold text-xs">4.8</span>
                            <span class="inline-block size-1 bg-surface-2-content/50 rounded-full"></span>
                            <span class="font-semibold text-2xs text-surface-2-content">
                                (1,235 نظر)
                            </span>
                        </div>
                    </div>
                    <a href="#"
                        class="inline-flex items-center justify-center h-9 bg-surface border rounded-full inset-shadow-xs inset-shadow-white/50 font-semibold text-2xs text-surface-2-content cursor-pointer hover:bg-surface-1 hover:text-surface-content 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="M7.702 1.368a.75.75 0 0 1 .597 0c2.098.91 4.105 1.99 6.004 3.223a.75.75 0 0 1-.194 1.348A34.27 34.27 0 0 0 8.341 8.25a.75.75 0 0 1-.682 0c-.625-.32-1.262-.62-1.909-.901v-.542a36.878 36.878 0 0 1 2.568-1.33.75.75 0 0 0-.636-1.357 38.39 38.39 0 0 0-3.06 1.605.75.75 0 0 0-.372.648v.365c-.773-.294-1.56-.56-2.359-.8a.75.75 0 0 1-.194-1.347 40.901 40.901 0 0 1 6.005-3.223ZM4.25 8.348c-.53-.212-1.067-.411-1.611-.596a40.973 40.973 0 0 0-.418 2.97.75.75 0 0 0 .474.776c.175.068.35.138.524.21a5.544 5.544 0 0 1-.58.681.75.75 0 1 0 1.06 1.06c.35-.349.655-.726.915-1.124a29.282 29.282 0 0 0-1.395-.617A5.483 5.483 0 0 0 4.25 8.5v-.152Z" />
                            <path
                                d="M7.603 13.96c-.96-.6-1.958-1.147-2.989-1.635a6.981 6.981 0 0 0 1.12-3.341c.419.192.834.393 1.244.602a2.25 2.25 0 0 0 2.045 0 32.787 32.787 0 0 1 4.338-1.834c.175.978.315 1.969.419 2.97a.75.75 0 0 1-.474.776 29.385 29.385 0 0 0-4.909 2.461.75.75 0 0 1-.794 0Z" />
                        </svg>
                    </a>
                </div>

            </div><!-- end Instructor info and stats -->
        </div><!-- end Profile image + social icons + info -->

        <!-- Instructor bio -->
        <p class="line-clamp-3 font-medium leading-relaxed text-xs text-surface-2-content mt-5">
            سارا با نگاه دقیق به رفتار کاربر، طراحی رو به تجربه‌ای لذت‌بخش تبدیل می‌کنه.
            او معتقده هر پیکسل باید هدفی مشخص داشته باشه.
        </p>

        <!-- Stats: students and courses -->
        <div class="flex flex-wrap items-center gap-2 border-t pt-3 mt-3">
            <div class="flex items-center gap-x-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                    class="size-3.5 text-cyan-500">
                    <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 class="font-semibold text-2xs text-surface-2-content">2,821 دانشجو</span>
            </div>
            <span class="inline-block size-1 bg-surface-2-content/50 rounded-full"></span>
            <div class="flex items-center gap-x-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                    class="size-3.5 text-green-500">
                    <path
                        d="M5.5 3.5A1.5 1.5 0 0 1 7 2h2.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 1 .439 1.061V9.5A1.5 1.5 0 0 1 12 11V8.621a3 3 0 0 0-.879-2.121L9 4.379A3 3 0 0 0 6.879 3.5H5.5Z" />
                    <path
                        d="M4 5a1.5 1.5 0 0 0-1.5 1.5v6A1.5 1.5 0 0 0 4 14h5a1.5 1.5 0 0 0 1.5-1.5V8.621a1.5 1.5 0 0 0-.44-1.06L7.94 5.439A1.5 1.5 0 0 0 6.878 5H4Z" />
                </svg>
                <span class="font-semibold text-2xs text-surface-2-content">3 دوره آموزشی</span>
            </div>
        </div><!-- end Stats: students and courses -->
    </div><!-- end Instructor card -->

    <!-- Instructor card -->
    <div class="bg-surface rounded-2xl shadow-xs inset-shadow-2xs inset-shadow-surface-content/10 p-6">
        <!-- Profile image + social icons + info -->
        <div class="flex gap-5">
            <!-- Avatar and social icons -->
            <div class="shrink-0 flex flex-col gap-y-3">
                <span class="inline-flex relative">
                    <span class="inline-block sm:size-20 size-14 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="absolute end-1.5 bottom-0 inline-flex items-center justify-center size-5 ring-2 bg-surface ring-surface rounded-full text-blue-500">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-5">
                            <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 items-center justify-center gap-1.5">
                    <a href="#" class="inline-flex cursor-pointer 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-3.5">
                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2" d="m4 4l11.733 16H20L8.267 4zm0 16l6.768-6.768m2.46-2.46L20 4" />
                        </svg>
                    </a>
                    <a href="#" class="inline-flex cursor-pointer 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-3.5">
                            <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 cursor-pointer 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-3.5">
                            <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><!-- end Avatar and social icons -->

            <!-- Instructor info and stats -->
            <div class="grow flex flex-col items-start gap-y-3">
                <div class="flex flex-col gap-y-1.5">
                    <h3 class="font-bold text-sm">نیکا کیانی</h3>
                    <p class="font-medium text-xs text-surface-2-content">تولید محتوا</p>
                </div>

                <div class="flex flex-col gap-y-2 mt-auto">
                    <div class="flex items-center gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                            class="shrink-0 size-4 text-yellow-400">
                            <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 class="flex items-center gap-x-2">
                            <span class="font-bold text-xs">4.9</span>
                            <span class="inline-block size-1 bg-surface-2-content/50 rounded-full"></span>
                            <span class="font-semibold text-2xs text-surface-2-content">
                                (4,644 نظر)
                            </span>
                        </div>
                    </div>
                    <a href="#"
                        class="inline-flex items-center justify-center h-9 bg-surface border rounded-full inset-shadow-xs inset-shadow-white/50 font-semibold text-2xs text-surface-2-content cursor-pointer hover:bg-surface-1 hover:text-surface-content 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="M7.702 1.368a.75.75 0 0 1 .597 0c2.098.91 4.105 1.99 6.004 3.223a.75.75 0 0 1-.194 1.348A34.27 34.27 0 0 0 8.341 8.25a.75.75 0 0 1-.682 0c-.625-.32-1.262-.62-1.909-.901v-.542a36.878 36.878 0 0 1 2.568-1.33.75.75 0 0 0-.636-1.357 38.39 38.39 0 0 0-3.06 1.605.75.75 0 0 0-.372.648v.365c-.773-.294-1.56-.56-2.359-.8a.75.75 0 0 1-.194-1.347 40.901 40.901 0 0 1 6.005-3.223ZM4.25 8.348c-.53-.212-1.067-.411-1.611-.596a40.973 40.973 0 0 0-.418 2.97.75.75 0 0 0 .474.776c.175.068.35.138.524.21a5.544 5.544 0 0 1-.58.681.75.75 0 1 0 1.06 1.06c.35-.349.655-.726.915-1.124a29.282 29.282 0 0 0-1.395-.617A5.483 5.483 0 0 0 4.25 8.5v-.152Z" />
                            <path
                                d="M7.603 13.96c-.96-.6-1.958-1.147-2.989-1.635a6.981 6.981 0 0 0 1.12-3.341c.419.192.834.393 1.244.602a2.25 2.25 0 0 0 2.045 0 32.787 32.787 0 0 1 4.338-1.834c.175.978.315 1.969.419 2.97a.75.75 0 0 1-.474.776 29.385 29.385 0 0 0-4.909 2.461.75.75 0 0 1-.794 0Z" />
                        </svg>
                    </a>
                </div>

            </div><!-- end Instructor info and stats -->
        </div><!-- end Profile image + social icons + info -->

        <!-- Instructor bio -->
        <p class="line-clamp-3 font-medium leading-relaxed text-xs text-surface-2-content mt-5">
            نیکا با ترکیب خلاقیت و تحلیل، محتوایی می‌سازد که هم تأثیرگذار است و هم هدفمند. او باور دارد هر
            برند داستانی دارد که باید درست روایت شود.
        </p>

        <!-- Stats: students and courses -->
        <div class="flex flex-wrap items-center gap-2 border-t pt-3 mt-3">
            <div class="flex items-center gap-x-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                    class="size-3.5 text-cyan-500">
                    <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 class="font-semibold text-2xs text-surface-2-content">5,921 دانشجو</span>
            </div>
            <span class="inline-block size-1 bg-surface-2-content/50 rounded-full"></span>
            <div class="flex items-center gap-x-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                    class="size-3.5 text-green-500">
                    <path
                        d="M5.5 3.5A1.5 1.5 0 0 1 7 2h2.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 1 .439 1.061V9.5A1.5 1.5 0 0 1 12 11V8.621a3 3 0 0 0-.879-2.121L9 4.379A3 3 0 0 0 6.879 3.5H5.5Z" />
                    <path
                        d="M4 5a1.5 1.5 0 0 0-1.5 1.5v6A1.5 1.5 0 0 0 4 14h5a1.5 1.5 0 0 0 1.5-1.5V8.621a1.5 1.5 0 0 0-.44-1.06L7.94 5.439A1.5 1.5 0 0 0 6.878 5H4Z" />
                </svg>
                <span class="font-semibold text-2xs text-surface-2-content">4 دوره آموزشی</span>
            </div>
        </div><!-- end Stats: students and courses -->
    </div><!-- end Instructor card -->

    <!-- Instructor card -->
    <div class="bg-surface rounded-2xl shadow-xs inset-shadow-2xs inset-shadow-surface-content/10 p-6">
        <!-- Profile image + social icons + info -->
        <div class="flex gap-5">
            <!-- Avatar and social icons -->
            <div class="shrink-0 flex flex-col gap-y-3">
                <span class="inline-flex relative">
                    <span class="inline-block sm:size-20 size-14 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>
                    <span
                        class="absolute end-1.5 bottom-0 inline-flex items-center justify-center size-5 ring-2 bg-surface ring-surface rounded-full text-blue-500">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-5">
                            <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 items-center justify-center gap-1.5">
                    <a href="#" class="inline-flex cursor-pointer 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-3.5">
                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2" d="m4 4l11.733 16H20L8.267 4zm0 16l6.768-6.768m2.46-2.46L20 4" />
                        </svg>
                    </a>
                    <a href="#" class="inline-flex cursor-pointer 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-3.5">
                            <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 cursor-pointer 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-3.5">
                            <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><!-- end Avatar and social icons -->

            <!-- Instructor info and stats -->
            <div class="grow flex flex-col items-start gap-y-3">
                <div class="flex flex-col gap-y-1.5">
                    <h3 class="font-bold text-sm">داریوش پاک‌زاد</h3>
                    <p class="font-medium text-xs text-surface-2-content">متخصص DevOps</p>
                </div>

                <div class="flex flex-col gap-y-2 mt-auto">
                    <div class="flex items-center gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                            class="shrink-0 size-4 text-yellow-400">
                            <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 class="flex items-center gap-x-2">
                            <span class="font-bold text-xs">4.8</span>
                            <span class="inline-block size-1 bg-surface-2-content/50 rounded-full"></span>
                            <span class="font-semibold text-2xs text-surface-2-content">
                                (2,738 نظر)
                            </span>
                        </div>
                    </div>
                    <a href="#"
                        class="inline-flex items-center justify-center h-9 bg-surface border rounded-full inset-shadow-xs inset-shadow-white/50 font-semibold text-2xs text-surface-2-content cursor-pointer hover:bg-surface-1 hover:text-surface-content 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="M7.702 1.368a.75.75 0 0 1 .597 0c2.098.91 4.105 1.99 6.004 3.223a.75.75 0 0 1-.194 1.348A34.27 34.27 0 0 0 8.341 8.25a.75.75 0 0 1-.682 0c-.625-.32-1.262-.62-1.909-.901v-.542a36.878 36.878 0 0 1 2.568-1.33.75.75 0 0 0-.636-1.357 38.39 38.39 0 0 0-3.06 1.605.75.75 0 0 0-.372.648v.365c-.773-.294-1.56-.56-2.359-.8a.75.75 0 0 1-.194-1.347 40.901 40.901 0 0 1 6.005-3.223ZM4.25 8.348c-.53-.212-1.067-.411-1.611-.596a40.973 40.973 0 0 0-.418 2.97.75.75 0 0 0 .474.776c.175.068.35.138.524.21a5.544 5.544 0 0 1-.58.681.75.75 0 1 0 1.06 1.06c.35-.349.655-.726.915-1.124a29.282 29.282 0 0 0-1.395-.617A5.483 5.483 0 0 0 4.25 8.5v-.152Z" />
                            <path
                                d="M7.603 13.96c-.96-.6-1.958-1.147-2.989-1.635a6.981 6.981 0 0 0 1.12-3.341c.419.192.834.393 1.244.602a2.25 2.25 0 0 0 2.045 0 32.787 32.787 0 0 1 4.338-1.834c.175.978.315 1.969.419 2.97a.75.75 0 0 1-.474.776 29.385 29.385 0 0 0-4.909 2.461.75.75 0 0 1-.794 0Z" />
                        </svg>
                    </a>
                </div>

            </div><!-- end Instructor info and stats -->
        </div><!-- end Profile image + social icons + info -->

        <!-- Instructor bio -->
        <p class="line-clamp-3 font-medium leading-relaxed text-xs text-surface-2-content mt-5">
            داریوش زیرساخت رو قلب پروژه می‌دونه و عاشق اتوماسیون فرآیندهاست.
            با سابقه‌ی چندین سال کار در تیم‌های بزرگ، آموزش‌هاش پر از تجربه‌ی واقعی دنیای DevOpsه.
        </p>

        <!-- Stats: students and courses -->
        <div class="flex flex-wrap items-center gap-2 border-t pt-3 mt-3">
            <div class="flex items-center gap-x-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                    class="size-3.5 text-cyan-500">
                    <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 class="font-semibold text-2xs text-surface-2-content">1,429 دانشجو</span>
            </div>
            <span class="inline-block size-1 bg-surface-2-content/50 rounded-full"></span>
            <div class="flex items-center gap-x-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                    class="size-3.5 text-green-500">
                    <path
                        d="M5.5 3.5A1.5 1.5 0 0 1 7 2h2.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 1 .439 1.061V9.5A1.5 1.5 0 0 1 12 11V8.621a3 3 0 0 0-.879-2.121L9 4.379A3 3 0 0 0 6.879 3.5H5.5Z" />
                    <path
                        d="M4 5a1.5 1.5 0 0 0-1.5 1.5v6A1.5 1.5 0 0 0 4 14h5a1.5 1.5 0 0 0 1.5-1.5V8.621a1.5 1.5 0 0 0-.44-1.06L7.94 5.439A1.5 1.5 0 0 0 6.878 5H4Z" />
                </svg>
                <span class="font-semibold text-2xs text-surface-2-content">2 دوره آموزشی</span>
            </div>
        </div><!-- end Stats: students and courses -->
    </div><!-- end Instructor card -->

    <!-- Instructor card -->
    <div class="bg-surface rounded-2xl shadow-xs inset-shadow-2xs inset-shadow-surface-content/10 p-6">
        <!-- Profile image + social icons + info -->
        <div class="flex gap-5">
            <!-- Avatar and social icons -->
            <div class="shrink-0 flex flex-col gap-y-3">
                <span class="inline-flex relative">
                    <span class="inline-block sm:size-20 size-14 border-2 border-white rounded-full overflow-hidden">
                        <img src="https://blocks.spacedev.ir/images/avatars/06.jpg" class="size-full object-cover"
                            alt="..." />
                    </span>
                    <span
                        class="absolute end-1.5 bottom-0 inline-flex items-center justify-center size-5 ring-2 bg-surface ring-surface rounded-full text-blue-500">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-5">
                            <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 items-center justify-center gap-1.5">
                    <a href="#" class="inline-flex cursor-pointer 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-3.5">
                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2" d="m4 4l11.733 16H20L8.267 4zm0 16l6.768-6.768m2.46-2.46L20 4" />
                        </svg>
                    </a>
                    <a href="#" class="inline-flex cursor-pointer 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-3.5">
                            <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 cursor-pointer 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-3.5">
                            <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><!-- end Avatar and social icons -->

            <!-- Instructor info and stats -->
            <div class="grow flex flex-col items-start gap-y-3">
                <div class="flex flex-col gap-y-1.5">
                    <h3 class="font-bold text-sm">آراد شایگان</h3>
                    <p class="font-medium text-xs text-surface-2-content">طراح محصول</p>
                </div>

                <div class="flex flex-col gap-y-2 mt-auto">
                    <div class="flex items-center gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                            class="shrink-0 size-4 text-yellow-400">
                            <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 class="flex items-center gap-x-2">
                            <span class="font-bold text-xs">4.9</span>
                            <span class="inline-block size-1 bg-surface-2-content/50 rounded-full"></span>
                            <span class="font-semibold text-2xs text-surface-2-content">
                                (1,563 نظر)
                            </span>
                        </div>
                    </div>
                    <a href="#"
                        class="inline-flex items-center justify-center h-9 bg-surface border rounded-full inset-shadow-xs inset-shadow-white/50 font-semibold text-2xs text-surface-2-content cursor-pointer hover:bg-surface-1 hover:text-surface-content 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="M7.702 1.368a.75.75 0 0 1 .597 0c2.098.91 4.105 1.99 6.004 3.223a.75.75 0 0 1-.194 1.348A34.27 34.27 0 0 0 8.341 8.25a.75.75 0 0 1-.682 0c-.625-.32-1.262-.62-1.909-.901v-.542a36.878 36.878 0 0 1 2.568-1.33.75.75 0 0 0-.636-1.357 38.39 38.39 0 0 0-3.06 1.605.75.75 0 0 0-.372.648v.365c-.773-.294-1.56-.56-2.359-.8a.75.75 0 0 1-.194-1.347 40.901 40.901 0 0 1 6.005-3.223ZM4.25 8.348c-.53-.212-1.067-.411-1.611-.596a40.973 40.973 0 0 0-.418 2.97.75.75 0 0 0 .474.776c.175.068.35.138.524.21a5.544 5.544 0 0 1-.58.681.75.75 0 1 0 1.06 1.06c.35-.349.655-.726.915-1.124a29.282 29.282 0 0 0-1.395-.617A5.483 5.483 0 0 0 4.25 8.5v-.152Z" />
                            <path
                                d="M7.603 13.96c-.96-.6-1.958-1.147-2.989-1.635a6.981 6.981 0 0 0 1.12-3.341c.419.192.834.393 1.244.602a2.25 2.25 0 0 0 2.045 0 32.787 32.787 0 0 1 4.338-1.834c.175.978.315 1.969.419 2.97a.75.75 0 0 1-.474.776 29.385 29.385 0 0 0-4.909 2.461.75.75 0 0 1-.794 0Z" />
                        </svg>
                    </a>
                </div>

            </div><!-- end Instructor info and stats -->
        </div><!-- end Profile image + social icons + info -->

        <!-- Instructor bio -->
        <p class="line-clamp-3 font-medium leading-relaxed text-xs text-surface-2-content mt-5">
            آراد بیش از ۶ ساله که در زمینه طراحی محصول و تجربه کاربری فعالیت می‌کنه و علاقه‌مند به خلق
            رابط‌های ساده و جذابه. تدریس برای او فرصتیه برای انتقال دانش عملی و به‌روز در طراحی محصولات
            دیجیتال.
        </p>

        <!-- Stats: students and courses -->
        <div class="flex flex-wrap items-center gap-2 border-t pt-3 mt-3">
            <div class="flex items-center gap-x-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                    class="size-3.5 text-cyan-500">
                    <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 class="font-semibold text-2xs text-surface-2-content">2,260 دانشجو</span>
            </div>
            <span class="inline-block size-1 bg-surface-2-content/50 rounded-full"></span>
            <div class="flex items-center gap-x-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                    class="size-3.5 text-green-500">
                    <path
                        d="M5.5 3.5A1.5 1.5 0 0 1 7 2h2.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 1 .439 1.061V9.5A1.5 1.5 0 0 1 12 11V8.621a3 3 0 0 0-.879-2.121L9 4.379A3 3 0 0 0 6.879 3.5H5.5Z" />
                    <path
                        d="M4 5a1.5 1.5 0 0 0-1.5 1.5v6A1.5 1.5 0 0 0 4 14h5a1.5 1.5 0 0 0 1.5-1.5V8.621a1.5 1.5 0 0 0-.44-1.06L7.94 5.439A1.5 1.5 0 0 0 6.878 5H4Z" />
                </svg>
                <span class="font-semibold text-2xs text-surface-2-content">3 دوره آموزشی</span>
            </div>
        </div><!-- end Stats: students and courses -->
    </div><!-- end Instructor card -->
</div>