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

section
    div(class="hero-section mb-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") Ближайшие мероприятия
            div(class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8")
                div(
                    v-for="event in featuredEvents"
                    :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-2") {{ formatDate(event.date) }}, {{ event.time }}
                        p(class="text-gray-700 dark:text-gray-200 line-clamp-2 mb-4") {{ event.shortDescription || event.description }}
                        div(class="flex justify-between items-center")
                            span(class="text-2xl font-bold text-accent") {{ event.price }} сомони
                            button(class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition-colors text-sm") Подробнее
    
    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") Здесь выступают лучшие артисты Таджикистана и зарубежные звезды.
                    app-link(
                        to="/about"
                        class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-gray-800 transition-colors inline-block"
                    ) Узнать историю
                div(class="about-image")
                    img(src="/images/hall-interior.jpg" 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"
                )