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

section
    div(class="hero-section mb-16  pt-16")
        ImageSlider(
            :slides="heroSlides"
            :autoplay="true"
            :duration="6000"
            @slide-click="handleSlideClick"
        )
    
    section(class="py-16 bg-white dark:bg-gray-800")
        div(class="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"
            )
            div(class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8")
                div(
                    v-for="event in filteredEvents"
                    :key="event._id"
                    class="event-card bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md overflow-hidden card-hover cursor-pointer animate-fade-in-up"
                    :class="'animation-delay-' + (($index % 6) * 100)"
                    @click="openEventModal(event)"
                )
                    img(:src="event.image" :alt="event.title" class="w-full h-48 object-cover")
                    div(class="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")
        div(class="container mx-auto px-4")
            div(class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center")
                div(class="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") Здесь выступают лучшие артисты Таджикистана и зарубежные звезды.
                    button(
                        @click="$router.push('/about')"
                        class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-gray-800 transition-colors"
                    ) Узнать историю
                div(class="about-image")
                    img(src="https://avatars.mds.yandex.net/i?id=cc968d84ec5c27e85f59f49fc0daeb8004e348f8-10243924-images-thumbs&n=13" alt="Интерьер зала" class="rounded-xl shadow-2xl")

    section(class="py-16 bg-accent text-white")
        div(class="container mx-auto px-4 text-center")
            h2(class="text-3xl font-bold mb-4") Будьте в курсе мероприятий
            p(class="text-xl mb-8 text-yellow-100") Подпишитесь на рассылку и получайте анонсы концертов
            div(class="max-w-md mx-auto")
                FormValidator(
                    placeholder="Введите ваш email"
                    buttonText="Подписаться"
                    :fields="{ email: true }"
                    @form-submitted="handleSubscription"
                )

    EventDetailModal(
        v-if="selectedEvent"
        :isVisible="showEventModal"
        :event="selectedEvent"
        @update:isVisible="showEventModal = false"
        @ticket-booking="handleTicketBooking"
    )