borbad.s5l.ru/vue/app/pages/Home/index.pug

//- app/pages/Home/index.pug
section
  // Hero Section со слайдером
  .hero-section
    imageslider(
      :slides='heroSlides'
      :autoplay='true'
      :duration='5000'
    )
  
  // Секция ближайших мероприятий
  section(class='py-16 bg-white dark:bg-gray-800')
    .container.mx-auto.px-4
      h2(class='text-3xl font-bold text-center mb-12 text-gray-800 dark:text-white') Ближайшие мероприятия
        FilterSort(
          :items='events'
          :filters='eventFilters'
          :sortOptions='eventSortOptions'
          @filter-changed='handleFilterChange'
          @sort-changed='handleSortChange'
        )
      .grid.grid-cols-1.gap-8.mt-8(class="md:grid-cols-2 lg:grid-cols-3")
        .event-card(
          v-for='event in filteredEvents'
          :key='event.id'
          class='bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md overflow-hidden card-hover cursor-pointer'
          @click='openEventModal(event)'
        )
          img(:src='event.image' :alt='event.title' class='w-full h-48 object-cover')
          .p-6
            h3(class='text-xl font-bold text-gray-800 dark:text-white mb-2') {{ event.title }}
            p(class='text-gray-600 dark:text-gray-300 mb-4') {{ event.date }}
            p(class='text-gray-700 dark:text-gray-200 line-clamp-2') {{ event.description }}
            button(class='mt-4 bg-accent text-white px-4 py-2 rounded-lg hover:bg-yellow-600 transition-colors') Подробнее
  
  // Секция о зале
  section(class='py-16 bg-gray-100 dark:bg-gray-900')
    .container.mx-auto.px-4
      .grid.grid-cols-1.gap-12.items-center(class="lg:grid-cols-2")
        .about-content
          h2(class='text-3xl font-bold mb-6 text-gray-800 dark:text-white') Легендарный зал "Кохи Борбад"
          p(class='text-gray-700 dark:text-gray-300 mb-4 leading-relaxed') Концертный зал "Кохи Борбад" - одна из главных культурных площадок Душанбе, известная своей богатой историей и выдающейся акустикой.
          p(class='text-gray-700 dark:text-gray-300 mb-6 leading-relaxed') Здесь выступают лучшие артисты Таджикистана и зарубежные звезды:cite[7].
          button(class='bg-primary text-white px-6 py-3 rounded-lg hover:bg-gray-800 transition-colors') Узнать историю
        .about-image
          img(src='https://avatars.mds.yandex.net/get-altay/2816622/2a0000017167ac5535f923e1e152bf892992/XXXL' alt='Интерьер зала' class='rounded-xl shadow-2xl')

  // Секция подписки
  section(class='py-16 bg-accent text-white')
    .container.mx-auto.px-4.text-center
      h2(class='text-3xl font-bold mb-4') Будьте в курсе мероприятий
      p(class='text-xl mb-8 text-yellow-100') Подпишитесь на рассылку и получайте анонсы концертов
      .max-w-md.mx-auto
         FormValidator(
           placeholder='Введите ваш email'
           buttonText='Подписаться'
           type='email'
         )