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

div(class="home-page")
    //- Hero Slider
    section(v-if="_.appState.slides.length > 0" class="mb-16")
        imageslider(:slides="_.appState.slides")

    //- Featured Events
    section(v-if="_.appState.featuredEvents.length > 0" class="container mx-auto px-4 mb-16")
        h2(class="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-white") Ближайшие мероприятия
        div(class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6")
            div(
                v-for="event in _.appState.featuredEvents" 
                :key="event._id"
                class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
            )
                app-link(:to="'/events/'+event._id")
                    img(
                        :src="event.image" 
                        :alt="event.title"
                        class="w-full h-48 object-cover"
                    )
                    div(class="p-4")
                        h3(class="text-xl font-semibold mb-2 text-gray-800 dark:text-white") {{ event.title }}
                        p(class="text-gray-600 dark:text-gray-300 mb-2") {{ formatDate(event.event_data.event_date) }}
                        p(class="text-gray-600 dark:text-gray-300 mb-4") {{ event.event_data.location }}
                        div(class="flex justify-between items-center")
                            span(class="text-lg font-bold text-blue-600") {{ event.event_data.price }} TJS
                            span(
                                :class="{'bg-green-100 text-green-800': event.event_data.status === 'upcoming', 'bg-blue-100 text-blue-800': event.event_data.status === 'ongoing', 'bg-gray-100 text-gray-800': event.event_data.status === 'completed' }"
                                class="px-2 py-1 rounded text-sm"
                            ) {{ event.event_data.status === 'upcoming' ? 'Скоро' : event.event_data.status === 'ongoing' ? 'Сейчас' : 'Завершено' }}

    //- Latest Blog Posts
    section(v-if="_.appState.blogPosts.length > 0" class="container mx-auto px-4 mb-16")
        div(class="flex justify-between items-center mb-8")
            h2(class="text-3xl font-bold text-gray-800 dark:text-white") Последние новости
            app-link(
                to="/blog" 
                class="text-blue-600 hover:text-blue-700 font-semibold transition-colors"
            ) Все новости →
        
        div(class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6")
            div(
                v-for="post in _.appState.blogPosts" 
                :key="post._id"
                class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
            )
                app-link(:to="'/blog/'+post._id")
                    img(
                        :src="post.image" 
                        :alt="post.title"
                        class="w-full h-48 object-cover"
                    )
                    div(class="p-4")
                        h3(class="text-xl font-semibold mb-2 text-gray-800 dark:text-white") {{ post.title }}
                        p(class="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3") {{ post.excerpt }}
                        div(class="flex justify-between items-center text-sm text-gray-500")
                            span {{ formatDate(post.created_at) }}
                            span {{ post.author }}

    //- Categories
    section(v-if="_.appState.categories.length > 0" class="container mx-auto px-4 mb-16")
        h2(class="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-white") Категории
        div(class="grid grid-cols-2 md:grid-cols-4 gap-4")
            app-link(
                v-for="category in _.appState.categories" 
                :key="category._id"
                :to="'/events?category='+category._id"
                class="bg-white dark:bg-gray-800 rounded-lg p-6 text-center shadow-md hover:shadow-lg transition-shadow"
            )
                div(
                    :style="{ color: category.color }"
                    class="text-3xl mb-2"
                ) 
                    | {{ category.icon }}
                h3(class="text-lg font-semibold text-gray-800 dark:text-white mb-2") {{ category.name }}
                p(class="text-gray-600 dark:text-gray-300 text-sm") {{ category.description }}

    //- Call to Action
    section(class="bg-blue-600 text-white py-16")
        div(class="container mx-auto px-4 text-center")
            h2(class="text-3xl font-bold mb-4") Станьте частью нашего сообщества
            p(class="text-xl mb-8 opacity-90") Присоединяйтесь к нам и откройте для себя мир искусства и культуры
            div(class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4")
                app-link(
                    to="/events" 
                    class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
                ) Смотреть мероприятия
                app-link(
                    to="/contacts" 
                    class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition-colors"
                ) Связаться с нами