سربرگ
بلاکها
طراحیشده برای توسعهدهندگان
دانیا
برای طراحی وبسایتهای آموزشی
نمونه یک
<!-- Layout Container -->
<div class="flex flex-col min-h-screen w-full" x-data="{ isNavigationOpen: false }">
<!-- Header -->
<header class="sticky top-0 py-2.5 z-30">
<!-- Container -->
<div class="w-full max-w-7xl px-4 mx-auto">
<div
class="flex items-center sm:gap-x-5 gap-x-2.5 relative bg-surface/85 backdrop-blur-md dark:bg-surface-2/85 dark:inset-shadow-xs inset-shadow-surface-content/10 rounded-2xl sm:p-5 p-2.5 max-sm:px-4 z-20">
<!-- Mobile menu toggle -->
<button type="button"
class="hidden shrink-0 max-md:inline-flex items-center justify-center sm:size-9 size-8 bg-surface-2 dark:bg-surface-3 dark:inset-shadow-xs inset-shadow-surface-content/10 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" width="16" height="16" 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>
<!-- Logo -->
<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" width="16" height="16" viewBox="0 0 16 16"
fill="currentColor" class="size-6">
<path
d="M7.25 3.688a8.035 8.035 0 0 0-4.872-.523A.48.48 0 0 0 2 3.64v7.994c0 .345.342.588.679.512a6.02 6.02 0 0 1 4.571.81V3.688ZM8.75 12.956a6.02 6.02 0 0 1 4.571-.81c.337.075.679-.167.679-.512V3.64a.48.48 0 0 0-.378-.475 8.034 8.034 0 0 0-4.872.523v9.268Z" />
</svg>
<span class="font-bold sm:text-lg">دانیا</span>
</span>
<span class="line-clamp-1 font-semibold text-2xs text-surface-2-content">مسیر درست
یادگیری</span>
</a>
<span class="inline-block w-px h-4 bg-border max-md:hidden"></span>
<!-- Course categories -->
<div class="relative group/menu max-md:hidden">
<button type="button"
class="inline-flex items-center justify-center h-9 bg-primary border border-primary rounded-lg inset-shadow-xs inset-shadow-primary-content/30 font-semibold text-2xs text-primary-content cursor-pointer disabled:cursor-default disabled:opacity-50 not-disabled:hover:opacity-90 px-3">
دورههای آموزشی
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="currentColor" class="size-4 ms-1.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>
</button>
<div
class="absolute inset-s-0 top-full opacity-0 invisible translate-y-1 transition-transform group-hover/menu:opacity-100 group-hover/menu:visible group-hover/menu:translate-y-0 pt-2 z-30">
<div class="flex relative w-lg min-h-96 max-h-120 bg-surface dark:bg-surface-3 border rounded-xl inset-shadow-xs inset-shadow-surface-content/10 shadow-xl"
x-data="{ activeTab: 1 }">
<div class="shrink-0 w-56 flex flex-col gap-y-1.5 p-3">
<a href="#"
class="flex items-center gap-x-1.5 w-full h-10 rounded-xl hover:bg-surface-1 dark:hover:bg-surface-2/50 px-3"
x-bind:class="activeTab === 1 ? 'bg-surface-1 dark:bg-surface-2/50 text-surface-content' : 'text-surface-2-content'"
x-on:mouseover="activeTab = 1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="currentColor" class="size-4">
<path fill-rule="evenodd"
d="M4.78 4.97a.75.75 0 0 1 0 1.06L2.81 8l1.97 1.97a.75.75 0 1 1-1.06 1.06l-2.5-2.5a.75.75 0 0 1 0-1.06l2.5-2.5a.75.75 0 0 1 1.06 0ZM11.22 4.97a.75.75 0 0 0 0 1.06L13.19 8l-1.97 1.97a.75.75 0 1 0 1.06 1.06l2.5-2.5a.75.75 0 0 0 0-1.06l-2.5-2.5a.75.75 0 0 0-1.06 0ZM8.856 2.008a.75.75 0 0 1 .636.848l-1.5 10.5a.75.75 0 0 1-1.484-.212l1.5-10.5a.75.75 0 0 1 .848-.636Z"
clip-rule="evenodd" />
</svg>
<span class="line-clamp-1 font-semibold text-sm">
برنامهنویسی
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="currentColor" class="size-4 rtl:rotate-180 ms-auto">
<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>
<a href="#"
class="flex items-center gap-x-1.5 w-full h-10 rounded-xl hover:bg-surface-1 dark:hover:bg-surface-2/50 px-3"
x-bind:class="activeTab === 2 ? 'bg-surface-1 dark:bg-surface-2/50 text-surface-content' : 'text-surface-2-content'"
x-on:mouseover="activeTab = 2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="currentColor" class="size-4">
<path fill-rule="evenodd"
d="M15 4a3.001 3.001 0 0 1-2.25 2.905V8.5a.75.75 0 0 1-.22.53l-.5.5a.75.75 0 0 1-1.06 0l-.72-.72-4.677 4.678A1.75 1.75 0 0 1 4.336 14h-.672a.25.25 0 0 0-.177.073l-.707.707a.75.75 0 0 1-1.06 0l-.5-.5a.75.75 0 0 1 0-1.06l.707-.707A.25.25 0 0 0 2 12.336v-.672c0-.464.184-.909.513-1.237L7.189 5.75l-.72-.72a.75.75 0 0 1 0-1.06l.5-.5a.75.75 0 0 1 .531-.22h1.595A3.001 3.001 0 0 1 15 4ZM9.19 7.75l-.94-.94-4.677 4.678a.25.25 0 0 0-.073.176v.672c0 .058-.003.115-.009.173a1.74 1.74 0 0 1 .173-.009h.672a.25.25 0 0 0 .177-.073L9.189 7.75Z"
clip-rule="evenodd" />
</svg>
<span class="line-clamp-1 font-semibold text-sm">
طراحی رابط کاربری
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="currentColor" class="size-4 rtl:rotate-180 ms-auto">
<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>
<a href="#"
class="flex items-center gap-x-1.5 w-full h-10 rounded-xl hover:bg-surface-1 dark:hover:bg-surface-2/50 px-3"
x-bind:class="activeTab === 3 ? 'bg-surface-1 dark:bg-surface-2/50 text-surface-content' : 'text-surface-2-content'"
x-on:mouseover="activeTab = 3">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="currentColor" class="size-4">
<path fill-rule="evenodd"
d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7A1.5 1.5 0 0 0 3 8.5v5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 11.5 7V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z"
clip-rule="evenodd" />
</svg>
<span class="line-clamp-1 font-semibold text-sm">
امنیت و شبکه
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="currentColor" class="size-4 rtl:rotate-180 ms-auto">
<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 class="block w-px bg-border"></div>
<div class="grow">
<div class="flex flex-col min-h-full px-3" x-show="activeTab === 1">
<a href="#"
class="sticky top-0 shrink-0 inline-flex items-center gap-x-1.5 border-b text-surface-2-content before:inline-block before:w-0 before:h-px before:bg-surface-content before:transition-[width] hover:before:w-2.5 hover:text-surface-content py-4 z-10">
<span class="line-clamp-1 font-semibold text-xs">
همه دورههای برنامهنویسی
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 16 16" fill="currentColor" class="size-4 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 class="grow grid gap-1.5 content-start max-h-80 overflow-y-auto overflow-x-hidden -mx-3 -mb-3 p-1.5"
x-data="{ categories: [
{ title: 'پایتون (Python)', slug: 'python' },
{ title: 'پیاچپی (PHP)', slug: 'php' },
{ title: 'جاوااسکریپت (JS)', slug: 'javascript' },
{ title: 'لاراول (Laravel)', slug: 'laravel' },
{ title: 'جنگو (Django)', slug: 'django' },
{ title: 'سیشارپ (C#)', slug: 'csharp' },
{ title: 'جاوا (Java)', slug: 'java' },
{ title: 'ریاکت (React)', slug: 'react' },
{ title: 'نود (Node.js)', slug: 'nodejs' },
{ title: 'گو (Go)', slug: 'go' },
] }">
<template x-for="item in categories" :key="item.slug">
<a href="#"
class="flex items-center gap-x-1 w-full h-9 rounded-xl text-surface-2-content group/link hover:bg-surface-2 dark:hover:bg-surface-2/50 hover:text-surface-content px-3">
<span class="line-clamp-1 font-semibold text-xs"
x-text="item.title"></span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 16 16" fill="currentColor"
class="size-4 scale-0 transition-transform group-hover/link:scale-100 ms-auto">
<path fill-rule="evenodd"
d="M11.78 11.78a.75.75 0 0 0 0-1.06L6.56 5.5h3.69a.75.75 0 0 0 0-1.5h-5.5a.75.75 0 0 0-.75.75v5.5a.75.75 0 0 0 1.5 0V6.56l5.22 5.22a.75.75 0 0 0 1.06 0Z"
clip-rule="evenodd" />
</svg>
</a>
</template>
</div>
</div>
<div class="grid grid-cols-2 gap-1.5" x-show="activeTab === 2"></div>
<div class="grid grid-cols-2 gap-1.5" x-show="activeTab === 3"></div>
<div class="grid grid-cols-2 gap-1.5" x-show="activeTab === 4"></div>
</div>
</div>
</div>
</div>
<!-- end Course categories -->
<!-- Search -->
<div class="hidden sm:inline-flex lg:min-w-80 min-w-40 relative" x-data="{ isOpen: false, key: '' }">
<div class="relative flex items-center w-full">
<input type="text" name="key" id="key"
class="block w-full h-9 bg-surface-2 dark:bg-surface-3 border ring-2 ring-offset-1 ring-transparent ring-offset-transparent rounded-lg dark:inset-shadow-xs inset-shadow-surface-content/10 shadow-xs font-medium text-xs outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-surface-1/75 focus-visible:ring-offset-surface focus-visible:ring-blue-500 placeholder:text-surface-2-content/70 ps-3 pe-9"
placeholder="دنبال چی میگردی؟" autocomplete="off" x-on:click="isOpen = !isOpen"
x-model="key" x-on:input="if(key.length > 0) isOpen = true" />
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
class="absolute inset-e-2.5 text-surface-2-content">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2">
<path d="m21 21l-4.34-4.34" />
<circle cx="11" cy="11" r="8" />
</g>
</svg>
</div>
<div class="absolute inset-s-0 top-full w-96 pt-2 z-20" x-cloak x-show="isOpen"
x-on:click.outside="isOpen = false" x-transition>
<div
class="flex flex-col gap-y-5 bg-surface dark:bg-surface-2 border inset-shadow-xs dark:inset-shadow-surface-content/10 rounded-xl shadow p-1 pt-3">
<!-- Default: Popular courses -->
<div class="flex flex-col gap-y-2.5" x-show="key.length === 0">
<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-1 max-h-72 overflow-y-auto">
<!-- Course Card -->
<div
class="flex bg-surface dark:bg-surface-2 border rounded-xl inset-shadow-2xs inset-shadow-surface-2-content/10 p-1.5">
<div class="shrink-0 size-28 relative rounded-lg overflow-hidden">
<a href="#" class="block size-full relative">
<img src="/assets/dania/images/landing/education/01.jpg"
class="size-full object-cover" alt="..." />
</a>
</div>
<div class="grow flex flex-col gap-y-2 pt-1 px-3">
<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="/assets/dania/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" width="16" height="16"
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>
<h3>
<a href="#" class="line-clamp-1 font-bold text-xs hover:text-primary">
مکالمه روان (Speaking)
</a>
</h3>
<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" width="16" height="16"
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" width="16" height="16"
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 ms-auto mt-auto">
<div class="flex items-center gap-x-1 ms-auto">
<span class="font-bold sm:text-lg text-sm">2,480,000</span>
<span class="font-semibold text-xs">تومان</span>
</div>
</div>
</div>
</div>
<!-- end Course Card -->
<div class="block w-full h-px bg-border"></div>
<!-- Course Card -->
<div
class="flex bg-surface dark:bg-surface-2 border rounded-xl inset-shadow-2xs inset-shadow-surface-2-content/10 p-1.5">
<div class="shrink-0 size-28 relative rounded-lg overflow-hidden">
<a href="#" class="block size-full relative">
<img src="/assets/dania/images/landing/education/02.jpg"
class="size-full object-cover" alt="..." />
</a>
</div>
<div class="grow flex flex-col gap-y-2 pt-1 px-3">
<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="/assets/dania/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" width="16" height="16"
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>
<h3>
<a href="#" class="line-clamp-1 font-bold text-xs hover:text-primary">
گرامر عملی (Grammar)
</a>
</h3>
<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" width="16" height="16"
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" width="16" height="16"
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,150 زبانآموز
</span>
</div>
</div>
<div class="flex items-center ms-auto mt-auto">
<div class="flex items-center gap-x-1 ms-auto">
<span class="font-bold sm:text-lg text-sm">1,980,000</span>
<span class="font-semibold text-xs">تومان</span>
</div>
</div>
</div>
</div>
<!-- end Course Card -->
</div>
</div>
<!-- end Default: Popular courses -->
<!-- Search results (when typing) -->
<div class="flex flex-col gap-y-2.5" x-show="key.length > 0">
<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-primary before:rounded-full before:ring-2 before:ring-primary/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">نتایج جستجو برای "<span x-text="key"></span>"</h3>
</div>
<div class="grid gap-1 max-h-72 overflow-y-auto">
<div class="flex items-center justify-center py-8">
<div class="flex flex-col items-center gap-y-1.5">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"
viewBox="0 0 24 24" stroke="currentColor" class="size-8 mb-3">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<span class="text-sm">نتیجهای یافت نشد!</span>
<span class="text-xs text-surface-2-content">سعی کنید با کلمات کلیدی
دیگر جستجو
کنید</span>
</div>
</div>
</div>
</div>
<!-- end Search results (when typing) -->
</div>
</div>
</div>
<!-- end Search -->
<div class="flex items-center gap-x-3 ms-auto">
<!-- Dark mode switcher -->
<button type="button"
class="hidden sm:inline-flex items-center justify-center size-9 bg-surface-2 dark:bg-surface-3 dark:inset-shadow-xs inset-shadow-surface-content/10 rounded-lg cursor-pointer text-surface-2-content hover:text-surface-content"
x-on:click="$store.darkMode.toggle()">
<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>
<!-- Cart -->
<a href="./cart.html"
class="shrink-0 inline-flex items-center justify-center relative size-9 bg-surface-2 dark:bg-surface-3 dark:inset-shadow-xs inset-shadow-surface-content/10 rounded-lg 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-4">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2">
<path
d="M2.048 18.566A2 2 0 0 0 4 21h16a2 2 0 0 0 1.952-2.434l-2-9A2 2 0 0 0 18 8H6a2 2 0 0 0-1.952 1.566z" />
<path d="M8 11V6a4 4 0 0 1 8 0v5" />
</g>
</svg>
<span class="absolute -inset-e-1 -top-1 flex size-3">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-accent/60 opacity-75">
</span>
<span class="relative inline-flex size-3 rounded-full bg-accent"></span>
</span>
</a>
<!-- Login / Dashboard button -->
<a href="./login-register.html"
class="inline-flex items-center justify-center h-9 max-md:size-9 bg-primary border border-primary rounded-lg inset-shadow-xs inset-shadow-primary-content/30 font-semibold text-2xs text-primary-content cursor-pointer disabled:cursor-default disabled:opacity-50 not-disabled:hover:opacity-90 md:px-3">
<span class="line-clamp-1 max-md:hidden">ورود به پنل</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="currentColor" class="md:size-3.5 size-4 md: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>
</a>
</div>
</div>
<!-- Secondary nav -->
<div class="max-md:hidden relative bg-surface-3/80 backdrop-blur-lg rounded-b-2xl py-4 px-6 mx-12 z-10">
<ul class="flex items-center justify-center gap-x-3">
<li>
<a href="#"
class="inline-flex items-center h-9 rounded-full font-semibold text-xs text-surface-3-content hover:bg-surface-3-content/10 hover:text-surface-content px-4">
مدرسین
</a>
</li>
<li>
<a href="#"
class="inline-flex items-center h-9 rounded-full font-semibold text-xs text-surface-3-content hover:bg-surface-3-content/10 hover:text-surface-content px-4">
تجربه زبانآموزان
</a>
</li>
<li>
<a href="#"
class="inline-flex items-center h-9 rounded-full font-semibold text-xs text-surface-3-content hover:bg-surface-3-content/10 hover:text-surface-content px-4">
پرسشهای متداول
</a>
</li>
<li>
<a href="#"
class="inline-flex items-center h-9 rounded-full font-semibold text-xs text-surface-3-content hover:bg-surface-3-content/10 hover:text-surface-content px-4">
درباره ما
</a>
</li>
<li>
<a href="#"
class="inline-flex items-center h-9 rounded-full font-semibold text-xs text-surface-3-content hover:bg-surface-3-content/10 hover:text-surface-content px-4">
مشاوره و تماس با ما
</a>
</li>
</ul>
</div>
<!-- end Secondary nav -->
</div>
<!-- end Container -->
</header>
<!-- end Header -->
<!-- Navigation -->
<div class="fixed inset-y-0 inset-s-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" width="16" height="16" viewBox="0 0 16 16"
fill="currentColor" class="size-6">
<path
d="M7.25 3.688a8.035 8.035 0 0 0-4.872-.523A.48.48 0 0 0 2 3.64v7.994c0 .345.342.588.679.512a6.02 6.02 0 0 1 4.571.81V3.688ZM8.75 12.956a6.02 6.02 0 0 1 4.571-.81c.337.075.679-.167.679-.512V3.64a.48.48 0 0 0-.378-.475 8.034 8.034 0 0 0-4.872.523v9.268Z" />
</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 inset-e-3 top-3 inline-flex items-center justify-center size-8 bg-surface-2 dark:bg-surface-3 dark:inset-shadow-xs inset-shadow-surface-content/10 rounded-lg cursor-pointer text-surface-2-content hover:text-surface-content"
x-on:click="$store.darkMode.toggle()">
<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 -->
<div class="border-b px-5 py-2.5">
<div class="relative flex items-center">
<input type="text" name="key" id="key"
class="block w-full h-9 bg-surface-2 dark:bg-surface-3 border ring-2 ring-offset-1 ring-transparent ring-offset-transparent rounded-lg dark:inset-shadow-xs inset-shadow-surface-content/10 shadow-xs font-medium text-xs outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-surface-1/75 focus-visible:ring-offset-surface focus-visible:ring-blue-500 placeholder:text-surface-2-content/70 ps-3 pe-9"
placeholder="دنبال چی میگردی؟" autocomplete="off" />
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
class="absolute inset-e-2.5 text-surface-2-content">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2">
<path d="m21 21l-4.34-4.34" />
<circle cx="11" cy="11" r="8" />
</g>
</svg>
</div>
</div>
<!-- Navigation Menu -->
<div class="flex-1 flex flex-col gap-y-1 overflow-auto p-5">
<div class="flex flex-col gap-y-1.5" x-data="{ isOpen: false }">
<button type="button" class="flex items-center gap-x-2.5 cursor-pointer hover:text-surface-content py-2"
x-bind:class="isOpen ? 'hover:text-surface-content' : 'text-surface-2-content'"
x-on:click="isOpen = !isOpen">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="16" height="16" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="size-5">
<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>
<span class="transition-transform ms-auto" x-bind:class="{ 'rotate-180': isOpen }">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="currentColor" class="size-4">
<path fill-rule="evenodd"
d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd" />
</svg>
</span>
</button>
<div x-transition x-show="isOpen">
<ul
class="flex flex-col relative before:absolute before:inset-y-3 before:inset-s-2.5 before:w-px before:bg-border py-3 ps-5">
<li x-data="{ openChild: false }">
<button type="button"
class="w-full flex items-center gap-x-2 cursor-pointer text-surface-2-content group/nav-item hover:text-surface-content py-2 px-3"
x-on:click="openChild = !openChild">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="16" height="16"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4"
x-bind:class="openChild ? '-rotate-45' : ''">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5">
</path>
</svg>
<span class="font-medium text-xs">برنامه نویسی وب</span>
</button>
<ul class="flex flex-col relative before:absolute before:inset-y-3 before:inset-s-2.5 before:w-px before:bg-border py-3 ps-5"
x-show="openChild">
<li>
<a href="./series.html"
class="w-full flex items-center gap-x-2 text-surface-2-content group/nav-item hover:text-surface-content py-2 px-3">
<span
class="inline-flex w-2 h-px bg-border transition-[width] group-hover/nav-item:w-4 group-hover/nav-item:bg-surface-content"></span>
<span class="font-medium text-xs">جاوااسکریپت</span>
</a>
</li>
<li>
<a href="./series.html"
class="w-full flex items-center gap-x-2 text-surface-2-content group/nav-item hover:text-surface-content py-2 px-3">
<span
class="inline-flex w-2 h-px bg-border transition-[width] group-hover/nav-item:w-4 group-hover/nav-item:bg-surface-content"></span>
<span class="font-medium text-xs">نود جی اس</span>
</a>
</li>
<li>
<a href="./series.html"
class="w-full flex items-center gap-x-2 text-surface-2-content group/nav-item hover:text-surface-content py-2 px-3">
<span
class="inline-flex w-2 h-px bg-border transition-[width] group-hover/nav-item:w-4 group-hover/nav-item:bg-surface-content"></span>
<span class="font-medium text-xs">ریکت جی اس</span>
</a>
</li>
<li>
<a href="./series.html"
class="w-full flex items-center gap-x-2 text-surface-2-content group/nav-item hover:text-surface-content py-2 px-3">
<span
class="inline-flex w-2 h-px bg-border transition-[width] group-hover/nav-item:w-4 group-hover/nav-item:bg-surface-content"></span>
<span class="font-medium text-xs">...</span>
</a>
</li>
</ul>
</li>
<li>
<a href="./series.html"
class="w-full flex items-center gap-x-2 text-surface-2-content group/nav-item hover:text-surface-content py-2 px-3">
<span
class="inline-flex w-2 h-px bg-border transition-[width] group-hover/nav-item:w-4 group-hover/nav-item:bg-surface-content"></span>
<span class="font-medium text-xs">دیتا ساینس</span>
</a>
</li>
<li>
<a href="./series.html"
class="w-full flex items-center gap-x-2 text-surface-2-content group/nav-item hover:text-surface-content py-2 px-3">
<span
class="inline-flex w-2 h-px bg-border transition-[width] group-hover/nav-item:w-4 group-hover/nav-item:bg-surface-content"></span>
<span class="font-medium text-xs">زبانهای برنامه نویسی</span>
</a>
</li>
<li>
<a href="./series.html"
class="w-full flex items-center gap-x-2 text-surface-2-content group/nav-item hover:text-surface-content py-2 px-3">
<span
class="inline-flex w-2 h-px bg-border transition-[width] group-hover/nav-item:w-4 group-hover/nav-item:bg-surface-content"></span>
<span class="font-medium text-xs">...</span>
</a>
</li>
</ul>
</div>
</div>
<a href="#"
class="flex items-center gap-x-2.5 cursor-pointer text-surface-2-content hover:text-surface-content py-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="16" height="16" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="size-5">
<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 text-surface-2-content hover:text-surface-content py-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="16" height="16" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="size-5">
<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 x-show="isNavigationOpen" x-transition.opacity.duration.600ms
class="fixed inset-0 size-full bg-black/25 transition-all z-40" x-on:click="isNavigationOpen = false" x-cloak>
</div>
<!-- Navigation Overlay -->
</div>
<!-- end Layout Container -->