@@include('../blocks/head.html')

<!-- Удалить при посадке -->

<main class="nav-page">
   <div class="nav-page__inner">
      <div class="nav-page__header">
         <span class="nav-page__label">sitemap</span>
         <h1 class="nav-page__title">Навигация</h1>
      </div>

      <ul class="nav-page__list">
         <li class="nav-page__item">
            <a href="main.html" target="_blank" class="nav-page__link">
               <span class="nav-page__num">01</span>
               <span class="nav-page__name">Главная</span>
               <span class="nav-page__file">main.html</span>
               <svg
                  class="nav-page__arrow"
                  width="9"
                  height="8"
                  viewBox="0 0 9 8"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
               >
                  <path
                     d="M0.330712 0.500212L7.62326 0.500211L7.62326 7.79276M7.62326 0.500211L0.330712 6.92286"
                     stroke="currentColor"
                  />
               </svg>
            </a>
         </li>

         <li class="nav-page__item">
            <a href="cases.html" target="_blank" class="nav-page__link">
               <span class="nav-page__num">02</span>
               <span class="nav-page__name">Кейсы</span>
               <span class="nav-page__file">cases.html</span>
               <svg
                  class="nav-page__arrow"
                  width="9"
                  height="8"
                  viewBox="0 0 9 8"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
               >
                  <path
                     d="M0.330712 0.500212L7.62326 0.500211L7.62326 7.79276M7.62326 0.500211L0.330712 6.92286"
                     stroke="currentColor"
                  />
               </svg>
            </a>
         </li>
         <li class="nav-page__item">
            <a href="cases-detail.html" target="_blank" class="nav-page__link">
               <span class="nav-page__num">03</span>
               <span class="nav-page__name">Кейс детальный</span>
               <span class="nav-page__file">cases-detail.html</span>
               <svg
                  class="nav-page__arrow"
                  width="9"
                  height="8"
                  viewBox="0 0 9 8"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
               >
                  <path
                     d="M0.330712 0.500212L7.62326 0.500211L7.62326 7.79276M7.62326 0.500211L0.330712 6.92286"
                     stroke="currentColor"
                  />
               </svg>
            </a>
         </li>
         <li class="nav-page__item">
            <a href="services.html" target="_blank" class="nav-page__link">
               <span class="nav-page__num">04</span>
               <span class="nav-page__name">Услуги</span>
               <span class="nav-page__file">services.html</span>
               <svg
                  class="nav-page__arrow"
                  width="9"
                  height="8"
                  viewBox="0 0 9 8"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
               >
                  <path
                     d="M0.330712 0.500212L7.62326 0.500211L7.62326 7.79276M7.62326 0.500211L0.330712 6.92286"
                     stroke="currentColor"
                  />
               </svg>
            </a>
         </li>
         <li class="nav-page__item">
            <a href="services-derection.html" target="_blank" class="nav-page__link">
               <span class="nav-page__num">05</span>
               <span class="nav-page__name">Направления услуг</span>
               <span class="nav-page__file">services-derection.html</span>
               <svg
                  class="nav-page__arrow"
                  width="9"
                  height="8"
                  viewBox="0 0 9 8"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
               >
                  <path
                     d="M0.330712 0.500212L7.62326 0.500211L7.62326 7.79276M7.62326 0.500211L0.330712 6.92286"
                     stroke="currentColor"
                  />
               </svg>
            </a>
         </li>
         <li class="nav-page__item">
            <a href="services-seo.html" target="_blank" class="nav-page__link">
               <span class="nav-page__num">05</span>
               <span class="nav-page__name">Услуга SEO</span>
               <span class="nav-page__file">services-seo.html</span>
               <svg
                  class="nav-page__arrow"
                  width="9"
                  height="8"
                  viewBox="0 0 9 8"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
               >
                  <path
                     d="M0.330712 0.500212L7.62326 0.500211L7.62326 7.79276M7.62326 0.500211L0.330712 6.92286"
                     stroke="currentColor"
                  />
               </svg>
            </a>
         </li>
      </ul>
   </div>
</main>

<style>
   .nav-page {
      min-height: 100vh;
      padding: 60px 20px;
      background: #0f0f0f;
      font-family: "Courier New", monospace;
   }

   .nav-page__inner {
      max-width: 800px;
      margin: 0 auto;
   }

   .nav-page__header {
      margin-bottom: 48px;
   }

   .nav-page__label {
      display: block;
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #555;
      margin-bottom: 8px;
   }

   .nav-page__title {
      font-size: 32px;
      font-weight: 400;
      color: #fff;
      margin: 0;
   }

   .nav-page__list {
      list-style: none;
      margin: 0;
      padding: 0;
   }

   .nav-page__item {
      border-top: 1px solid #222;
   }

   .nav-page__item:last-child {
      border-bottom: 1px solid #222;
   }

   .nav-page__link {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 20px 0;
      text-decoration: none;
      color: #888;
      transition: color 0.2s;
   }

   .nav-page__link:hover {
      color: #fff;
   }

   .nav-page__num {
      font-size: 11px;
      color: #444;
      min-width: 24px;
   }

   .nav-page__name {
      flex: 1;
      font-size: 18px;
      color: inherit;
      transition: color 0.2s;
   }

   .nav-page__file {
      font-size: 12px;
      color: #444;
      transition: color 0.2s;
   }

   .nav-page__link:hover .nav-page__file {
      color: #666;
   }

   .nav-page__arrow {
      width: 14px;
      height: 14px;
      color: #444;
      transition:
         color 0.2s,
         transform 0.2s;
      flex-shrink: 0;
   }

   .nav-page__link:hover .nav-page__arrow {
      color: #fff;
      transform: translate(2px, -2px);
   }
</style>

@@include('../blocks/footer.html')