<!-- Layout Container -->
<div class="flex flex-col w-full min-h-screen bg-background">
<!-- Header -->
<header class="sticky top-0 bg-background border-b z-30" x-data="{ menuIsOpen: false }">
<div class="w-full max-w-6xl px-4 mx-auto">
<div class="flex items-center gap-x-8 relative py-3">
<div class="flex items-center gap-x-3.5">
<!-- Menu trigger -->
<button type="button"
class="hidden max-md:inline-flex items-center justify-center size-9 bg-background border rounded-lg text-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95"
x-on:click="menuIsOpen = !menuIsOpen">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4"
x-show="!menuIsOpen">
<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>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4"
x-show="menuIsOpen">
<path
d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
</svg>
</button><!-- end Menu trigger -->
<!-- Logo -->
<a href="#" class="inline-flex">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path
d="M2.87988 18.049C4.23015 12.0557 7.07526 6.6285 11.003 2.17958C11.1105 2.05778 11.2465 1.90742 11.411 1.72851L11.411 1.72849C11.7101 1.40325 12.2162 1.38203 12.5414 1.68109C12.5579 1.69623 12.5737 1.71205 12.5888 1.72851C12.7553 1.90958 12.8929 2.06164 13.0015 2.1847C16.9268 6.63267 19.7703 12.058 21.12 18.049C18.9786 18.5004 16.7797 18.796 14.5359 18.9235L12.4472 23.101C12.3237 23.348 12.0233 23.4481 11.7763 23.3246C11.6796 23.2762 11.6011 23.1977 11.5527 23.101L9.46401 18.9235C7.22018 18.796 5.02133 18.5004 2.87988 18.049ZM11.9999 14.9954C13.6568 14.9954 14.9999 13.6523 14.9999 11.9954C14.9999 10.3386 13.6568 8.99541 11.9999 8.99541C10.3431 8.99541 8.99994 10.3386 8.99994 11.9954C8.99994 13.6523 10.3431 14.9954 11.9999 14.9954Z">
</path>
</svg>
</a>
</div>
<!-- Menu -->
<ul class="md:flex items-center gap-x-5 hidden">
<li>
<a href="#"
class="inline-flex items-center gap-x-1.5 text-muted-foreground hover:text-foreground py-2.5">
<span class="font-medium text-sm">خانه</span>
</a>
</li>
<li>
<a href="#"
class="inline-flex items-center gap-x-1.5 text-muted-foreground hover:text-foreground py-2.5">
<span class="font-medium text-sm">فرصتهای شغلی</span>
</a>
</li>
<li>
<a href="#"
class="inline-flex items-center gap-x-1.5 text-muted-foreground hover:text-foreground py-2.5">
<span class="font-medium text-sm">وبلاگ</span>
</a>
</li>
<li>
<a href="#"
class="inline-flex items-center gap-x-1.5 text-muted-foreground hover:text-foreground py-2.5">
<span class="font-medium text-sm">درباره ما</span>
</a>
</li>
<li>
<a href="#"
class="inline-flex items-center gap-x-1.5 text-muted-foreground hover:text-foreground py-2.5">
<span class="font-medium text-sm">تماس با ما</span>
</a>
</li>
</ul><!-- end Menu -->
<div class="flex items-center gap-x-5 ms-auto">
<a href="#"
class="inline-flex items-center justify-center size-9 bg-background border rounded-full cursor-pointer text-muted-foreground hover:text-foreground">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
<path fill-rule="evenodd"
d="M12 5a4 4 0 0 0-8 0v2.379a1.5 1.5 0 0 1-.44 1.06L2.294 9.707a1 1 0 0 0-.293.707V11a1 1 0 0 0 1 1h2a3 3 0 1 0 6 0h2a1 1 0 0 0 1-1v-.586a1 1 0 0 0-.293-.707L12.44 8.44A1.5 1.5 0 0 1 12 7.38V5Zm-5.5 7a1.5 1.5 0 0 0 3 0h-3Z"
clip-rule="evenodd" />
</svg>
</a>
<!-- User Dropdown -->
<div class="inline-flex relative" x-data="{ isOpen: false }">
<!-- Dropdown trigger button -->
<button type="button"
class="inline-flex items-center gap-x-2.5 cursor-pointer transition-transform active:scale-95"
x-on:click="isOpen = !isOpen">
<span class="max-md:hidden line-clamp-1 font-semibold text-xs">پرهام
فرهمند</span>
<!-- User Avatar with Online Status Indicator -->
<span class="inline-flex relative">
<span class="inline-block sm:size-10 size-8 rounded-full overflow-hidden">
<img src="https://components.spacedev.ir/images/avatars/02.jpg"
class="size-full object-cover" alt="..." />
</span>
<span
class="absolute -end-0.5 -top-0.5 size-3 bg-emerald-500 border-2 border-background rounded-full">
</span>
</span><!-- end User Avatar with Online Status Indicator -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="sm:size-5 size-4 transition-transform" x-bind:class="{ 'rotate-180': isOpen }">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m6 9l6 6l6-6" />
</svg>
</button><!-- end Dropdown trigger button -->
<!-- Dropdown menu -->
<div class="absolute end-1 top-full pt-1.5" x-cloak x-show="isOpen"
x-on:click.outside="isOpen = false">
<div class="w-60 bg-background border rounded-lg space-y-2 p-3.5">
<div class="flex flex-col gap-y-1">
<span class="block truncate font-semibold text-xs">
شما وارد شدهاید با
</span>
<div class="block truncate font-sans font-semibold text-2xs text-muted-foreground">
example@example.com
</div>
</div>
<!-- Action links -->
<div class="bg-muted border-t-4 rounded-xl p-1.5">
<a href="#"
class="flex items-center gap-x-1.5 w-full rounded-full cursor-pointer text-muted-foreground transition-colors hover:text-foreground hover:bg-background py-2.5 px-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
<path fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2"
d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" />
</svg>
<span class="font-medium text-xs">
مدیریت حساب
</span>
</a>
<a href="#"
class="flex items-center gap-x-1.5 w-full rounded-full cursor-pointer text-muted-foreground transition-colors hover:text-foreground hover:bg-background py-2.5 px-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
<g fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2">
<path
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065" />
<path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0" />
</g>
</svg>
<span class="font-medium text-xs">
تنظیمات
</span>
</a>
<a href="#"
class="flex items-center gap-x-1.5 w-full rounded-full cursor-pointer text-muted-foreground transition-colors hover:text-foreground hover:bg-background py-2.5 px-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
<path fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2"
d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1" />
</svg>
<span class="font-medium text-xs">
اعلانات
</span>
</a>
</div><!-- end Action links -->
<!-- Logout button -->
<button type="button"
class="flex items-center gap-x-1.5 w-full rounded-md cursor-pointer text-destructive/75 transition-colors hover:text-destructive hover:bg-background py-2.5 px-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
<g fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2">
<path
d="M10 8V6a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-2" />
<path d="M15 12H3l3-3m0 6l-3-3" />
</g>
</svg>
<span class="font-medium text-xs">
خروج از حساب
</span>
</button><!-- end Logout button -->
</div>
</div><!-- end Dropdown menu -->
</div><!-- end User Dropdown -->
</div>
<!-- Menu (Mobile) -->
<div class="absolute top-full inset-x-0 md:hidden pt-2.5" x-show="menuIsOpen">
<div class="w-full bg-background border-2 border-double border-border/60 rounded-xl px-5 py-3">
<ul class="flex flex-col gap-y-1">
<li>
<a href="#"
class="flex items-center gap-x-1.5 w-full text-muted-foreground hover:text-foreground py-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
<g fill="none">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
<path fill="currentColor"
d="M13.2 2.65a2 2 0 0 0-2.4 0l-7 5.25A2 2 0 0 0 3 9.5V19a2 2 0 0 0 2 2h3.9a1.1 1.1 0 0 0 1.1-1.1V15a2 2 0 1 1 4 0v4.9a1.1 1.1 0 0 0 1.1 1.1H19a2 2 0 0 0 2-2V9.5a2 2 0 0 0-.8-1.6z" />
</g>
</svg>
<span class="font-medium text-sm">خانه</span>
</a>
</li>
<li>
<a href="#"
class="flex items-center gap-x-1.5 w-full text-muted-foreground hover:text-foreground py-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
<path fill="currentColor"
d="M22 13.478V18a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-4.522l.553.277a21 21 0 0 0 18.897-.002zM14 2a3 3 0 0 1 3 3v1h2a3 3 0 0 1 3 3v2.242l-1.447.724a19 19 0 0 1-16.726.186l-.647-.32l-1.18-.59V9a3 3 0 0 1 3-3h2V5a3 3 0 0 1 3-3zm-2 8a1 1 0 0 0-1 1a1 1 0 1 0 2 .01c0-.562-.448-1.01-1-1.01m2-6h-4a1 1 0 0 0-1 1v1h6V5a1 1 0 0 0-1-1" />
</svg>
<span class="font-medium text-sm">فرصتهای شغلی</span>
</a>
</li>
<li>
<a href="#"
class="flex items-center gap-x-1.5 w-full text-muted-foreground hover:text-foreground py-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
<g fill="currentColor">
<path
d="m12 2l.117.007a1 1 0 0 1 .876.876L13 3v4l.005.15a2 2 0 0 0 1.838 1.844L15 9h4l.117.007a1 1 0 0 1 .876.876L20 10v9a3 3 0 0 1-2.824 2.995L17 22H7a3 3 0 0 1-2.995-2.824L4 19V5a3 3 0 0 1 2.824-2.995L7 2zm3 14H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2m0-4H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2" />
<path d="M19 7h-4l-.001-4.001z" />
</g>
</svg>
<span class="font-medium text-sm">وبلاگ</span>
</a>
</li>
<li>
<a href="#"
class="flex items-center gap-x-1.5 w-full text-muted-foreground hover:text-foreground py-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="size-4">
<path fill-rule="evenodd"
d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6.75 8a.75.75 0 0 0 0 1.5h.75v1.75a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8.25 8h-1.5Z"
clip-rule="evenodd" />
</svg>
<span class="font-medium text-sm">درباره ما</span>
</a>
</li>
<li>
<a href="#"
class="flex items-center gap-x-1.5 w-full text-muted-foreground hover:text-foreground py-2.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="size-4">
<path fill-rule="evenodd"
d="m3.855 7.286 1.067-.534a1 1 0 0 0 .542-1.046l-.44-2.858A1 1 0 0 0 4.036 2H3a1 1 0 0 0-1 1v2c0 .709.082 1.4.238 2.062a9.012 9.012 0 0 0 6.7 6.7A9.024 9.024 0 0 0 11 14h2a1 1 0 0 0 1-1v-1.036a1 1 0 0 0-.848-.988l-2.858-.44a1 1 0 0 0-1.046.542l-.534 1.067a7.52 7.52 0 0 1-4.86-4.859Z"
clip-rule="evenodd" />
</svg>
<span class="font-medium text-sm">تماس با ما</span>
</a>
</li>
</ul>
</div>
</div><!-- end Menu (Mobile) -->
</div>
</div>
</header><!-- end Header -->
<!-- Main -->
<main class="flex-1 relative">
<!-- Placeholder (Remove This) -->
<div class="absolute inset-0 w-full max-w-6xl h-full p-4 mx-auto">
<div class="size-full bg-background border rounded-lg overflow-hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="size-full">
<defs>
<pattern patternUnits="userSpaceOnUse" height="48" width="48" id="grid">
<g opacity="0.1">
<path fill="currentColor"
d="M-0.64647 24.3536L24.3535 -0.646439L23.6464 -1.35355L-1.35358 23.6465L-0.64647 24.3536ZM-0.64647 36.3536L36.3535 -0.646439L35.6464 -1.35355L-1.35358 35.6464L-0.64647 36.3536ZM48.3535 -0.646439L-0.64647 48.3536L-1.35358 47.6465L47.6464 -1.35355L48.3535 -0.646439ZM10.3535 49.3536L49.3535 10.3536L48.6464 9.64645L9.64642 48.6464L10.3535 49.3536ZM49.3535 22.3535L22.3535 49.3535L21.6464 48.6464L48.6464 21.6464L49.3535 22.3535ZM34.3535 49.3536L49.3535 34.3536L48.6464 33.6465L33.6464 48.6464L34.3535 49.3536ZM49.3535 46.3536L46.3535 49.3536L45.6464 48.6465L48.6464 45.6465L49.3535 46.3536ZM-0.64647 12.3536L12.3535 -0.646439L11.6464 -1.35355L-1.35358 11.6465L-0.64647 12.3536Z"
clip-rule="evenodd" fill-rule="evenodd"></path>
</g>
</pattern>
</defs>
<rect fill="url(#grid)" height="100%" width="100%"></rect>
</svg>
</div>
</div><!-- Placeholder (Remove This) -->
<!-- ( Actual Page Content Goes Here ) -->
</main><!-- end Main -->
<!-- Footer -->
<footer class="bg-background border-t py-3.5">
<div class="w-full max-w-6xl px-4 mx-auto">
<div class="flex items-center gap-x-1.5 text-muted-foreground">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
<path fill="currentColor"
d="M16.288 9.428A4.999 4.999 0 0 0 7 12a4.999 4.999 0 0 0 9.288 2.572l-1.715-1.028A3 3 0 1 1 12 9c1.093 0 2.05.584 2.573 1.457zM22 12c0-5.52-4.48-10-10-10S2 6.48 2 12s4.48 10 10 10s10-4.48 10-10M4 12c0-4.42 3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8s-8-3.58-8-8" />
</svg>
<p class="font-medium text-xs">
همه حقوق محفوظ است.
</p>
</div>
</div>
</footer><!-- end Footer -->
</div><!-- Layout Container -->