пример

<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    primary: '#E8112D',
                    secondary: '#F9A01B',
                    dark: '#1A1A1A',
                    light: '#F8F9FA',
                },
                fontFamily: {
                    sans: ['Inter', 'sans-serif'],
                },
                animation: {
                    'float': 'float 6s ease-in-out infinite',
                    'fade-in': 'fadeIn 1s ease-out forwards',
                },
                keyframes: {
                    float: {
                        '0%, 100%': { transform: 'translateY(0)' },
                        '50%': { transform: 'translateY(-20px)' },
                    },
                    fadeIn: {
                        '0%': { opacity: '0' },
                        '100%': { opacity: '1' },
                    }
                }
            }
        }
    }
</script>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

    .gradient-text {
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        background-image: linear-gradient(90deg, #E8112D, #F9A01B);
    }

    .glass-effect {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .parallax-bg {
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        background: white;
        opacity: 0.5;
    }

    .swiper-pagination-bullet-active {
        background: #F9A01B;
        opacity: 1;
    }
</style>

<!-- Cursor Effect -->
<div id="cursor" class="fixed w-8 h-8 rounded-full bg-primary/20 pointer-events-none transform -translate-x-1/2 -translate-y-1/2 z-50 transition-transform duration-100 mix-blend-difference"></div>

<!-- Header -->
<header id="header" class="fixed w-full py-4 px-4 md:px-8 lg:px-16 z-40 transition-all duration-300 glass-effect">
    <div class="container mx-auto flex justify-between items-center">
        <a href="#" class="text-2xl font-black">
            <span class="text-primary">Эл</span> <span class="text-secondary">агартуу</span>
        </a>

        <nav class="hidden md:block">
            <ul class="flex space-x-8">
                <li><a href="#home" class="font-medium hover:text-primary transition-colors flex items-center">
                    <i class="fas fa-home mr-2"></i> Башкы бет
                </a></li>
                <li class="group relative">
                    <a href="#magazine" class="font-medium hover:text-primary transition-colors flex items-center">
                        <i class="fas fa-book mr-2"></i> Журнал <i class="fas fa-chevron-down ml-2 text-xs"></i>
                    </a>
                    <div class="absolute left-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
                        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Акыркы номер</a>
                        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Архив</a>
                        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Темалар</a>
                    </div>
                </li>
                <li><a href="#features" class="font-medium hover:text-primary transition-colors flex items-center">
                    <i class="fas fa-star mr-2"></i> Өзгөчөлүктөр
                </a></li>
                <li><a href="#subscribe" class="font-medium hover:text-primary transition-colors flex items-center">
                    <i class="fas fa-envelope mr-2"></i> Жазылуу
                </a></li>
            </ul>
        </nav>

        <button class="hidden md:block bg-primary text-white px-6 py-2 rounded-full font-medium hover:bg-secondary transition-all transform hover:-translate-y-1 shadow-lg">
            <i class="fas fa-user mr-2"></i> Кируу
        </button>

        <button id="mobile-menu-button" class="md:hidden text-2xl">
            <i class="fas fa-bars"></i>
        </button>
    </div>

    <!-- Mobile Menu -->
    <div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-white shadow-lg py-4 px-4">
        <a href="#home" class="block py-2 hover:text-primary"><i class="fas fa-home mr-2"></i> Башкы бет</a>
        <a href="#magazine" class="block py-2 hover:text-primary"><i class="fas fa-book mr-2"></i> Журнал</a>
        <a href="#features" class="block py-2 hover:text-primary"><i class="fas fa-star mr-2"></i> Өзгөчөлүктөр</a>
        <a href="#subscribe" class="block py-2 hover:text-primary"><i class="fas fa-envelope mr-2"></i> Жазылуу</a>
        <button class="mt-4 w-full bg-primary text-white px-6 py-2 rounded-full font-medium">
            <i class="fas fa-user mr-2"></i> Кируу
        </button>
    </div>
</header>

<!-- Hero Section -->
<section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20">
    <div class="absolute inset-0 parallax-bg" style="background-image: url('https://images.unsplash.com/photo-1588072432836-e10032774350?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div>
    <div class="absolute inset-0 bg-black/60"></div>

    <div class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10 text-center">
        <motion.div 
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            class="mb-8"
        >
            <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">
                Билим берүүнүн <span class="gradient-text">жаңы демилгелери</span>
            </h1>
            <p class="text-xl text-white/80 max-w-3xl mx-auto">
                Кыргызстандын алдыңкы педагогикалык журналы. Заманбап методикалар, илимий изилдөөлөр жана инновациялык чечимдер.
            </p>
        </motion.div>

        <motion.div
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            class="flex flex-col sm:flex-row justify-center gap-4"
        >
            <a href="#magazine" class="bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-full font-bold transition-all transform hover:-translate-y-1 shadow-lg flex items-center justify-center">
                Акыркы номер <i class="fas fa-arrow-right ml-2"></i>
            </a>
            <a href="#subscribe" class="bg-white/10 hover:bg-white/20 text-white border-2 border-white px-8 py-4 rounded-full font-bold transition-all transform hover:-translate-y-1 shadow-lg flex items-center justify-center">
                Жазылуу <i class="fas fa-envelope ml-2"></i>
            </a>
        </motion.div>
    </div>

    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
        <a href="#magazine" class="text-white text-2xl">
            <i class="fas fa-chevron-down"></i>
        </a>
    </div>
</section>

<!-- Magazine Section -->
<section id="magazine" class="py-20 bg-white">
    <div class="container mx-auto px-4 md:px-8 lg:px-16">
        <motion.div
            initial={{ opacity: 0, y: 50 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            class="text-center mb-16"
        >
            <h2 class="text-3xl md:text-4xl font-bold mb-4 relative inline-block">
                Акыркы номерлер
                <span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-20 h-1 bg-secondary"></span>
            </h2>
            <p class="text-gray-600 max-w-2xl mx-auto">
                Биздин журналдын акыркы чыккан номерлери. Ар бир макала билим берүү тармагындагы жаңы тенденциялар жана илимий изилдөөлөр менен тааныштырат.
            </p>
        </motion.div>

        <!-- Swiper Slider -->
        <div class="swiper magazine-slider">
            <div class="swiper-wrapper pb-12">
                <!-- Slide 1 -->
                <div class="swiper-slide">
                    <motion.div
                        whileHover={{ y: -10 }}
                        class="bg-white rounded-xl overflow-hidden shadow-xl transition-all duration-300"
                    >
                        <div class="h-64 bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white text-xl font-bold">
                            Журнал #1
                        </div>
                        <div class="p-6">
                            <div class="flex flex-wrap gap-2 mb-4">
                                <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full">Билим берүү</span>
                                <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-3 py-1 rounded-full">Изилдөө</span>
                            </div>
                            <h3 class="text-xl font-bold mb-3">Дистанциондук окутуунун келечеги</h3>
                            <p class="text-gray-600 mb-6">Онлайн билим берүүнүн кыргызстандык студенттерге тийгизген таасири жана анын өнүгүү перспективалары...</p>
                            <a href="#" class="text-primary font-semibold flex items-center hover:text-secondary transition-colors">
                                Окуу <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                            <div class="absolute top-4 right-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full">
                                Июнь 2023
                            </div>
                        </div>
                    </motion.div>
                </div>

                <!-- Slide 2 -->
                <div class="swiper-slide">
                    <motion.div
                        whileHover={{ y: -10 }}
                        class="bg-white rounded-xl overflow-hidden shadow-xl transition-all duration-300"
                    >
                        <div class="h-64 bg-gradient-to-r from-secondary to-primary flex items-center justify-center text-white text-xl font-bold">
                            Журнал #2
                        </div>
                        <div class="p-6">
                            <div class="flex flex-wrap gap-2 mb-4">
                                <span class="bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">Педагогика</span>
                                <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full">Билим берүү</span>
                            </div>
                            <h3 class="text-xl font-bold mb-3">Мугалимдердин жаңы ролу</h3>
                            <p class="text-gray-600 mb-6">Заманбап мугалимдердин 21-кылымдагы функциялары жана алардын квалификациясын жогорулатуу жолдору...</p>
                            <a href="#" class="text-primary font-semibold flex items-center hover:text-secondary transition-colors">
                                Окуу <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                            <div class="absolute top-4 right-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full">
                                Май 2023
                            </div>
                        </div>
                    </motion.div>
                </div>

                <!-- Slide 3 -->
                <div class="swiper-slide">
                    <motion.div
                        whileHover={{ y: -10 }}
                        class="bg-white rounded-xl overflow-hidden shadow-xl transition-all duration-300"
                    >
                        <div class="h-64 bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white text-xl font-bold">
                            Журнал #3
                        </div>
                        <div class="p-6">
                            <div class="flex flex-wrap gap-2 mb-4">
                                <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-3 py-1 rounded-full">Изилдөө</span>
                                <span class="bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">Педагогика</span>
                            </div>
                            <h3 class="text-xl font-bold mb-3">Балдардын чыгармачылыгын өнүктүрүү</h3>
                            <p class="text-gray-600 mb-6">Мектептеги сабактарда креативдүү ой жүгүртүүнү өнүктүрүүнүн эффективдүү ыкмалары...</p>
                            <a href="#" class="text-primary font-semibold flex items-center hover:text-secondary transition-colors">
                                Окуу <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                            <div class="absolute top-4 right-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full">
                                Апрель 2023
                            </div>
                        </div>
                    </motion.div>
                </div>

                <!-- Slide 4 -->
                <div class="swiper-slide">
                    <motion.div
                        whileHover={{ y: -10 }}
                        class="bg-white rounded-xl overflow-hidden shadow-xl transition-all duration-300"
                    >
                        <div class="h-64 bg-gradient-to-r from-secondary to-primary flex items-center justify-center text-white text-xl font-bold">
                            Журнал #4
                        </div>
                        <div class="p-6">
                            <div class="flex flex-wrap gap-2 mb-4">
                                <span class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-3 py-1 rounded-full">Инновация</span>
                                <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full">Билим берүү</span>
                            </div>
                            <h3 class="text-xl font-bold mb-3">Технологиялардын билим берүүгө таасири</h3>
                            <p class="text-gray-600 mb-6">Заманбап технологиялардын окутуу процессине интеграциясы жана анын натыйжалуулугу...</p>
                            <a href="#" class="text-primary font-semibold flex items-center hover:text-secondary transition-colors">
                                Окуу <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                            <div class="absolute top-4 right-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full">
                                Март 2023
                            </div>
                        </div>
                    </motion.div>
                </div>
            </div>

            <!-- Pagination -->
            <div class="swiper-pagination"></div>
        </div>

        <div class="text-center mt-12">
            <a href="#" class="inline-block bg-primary hover:bg-secondary text-white font-bold py-3 px-8 rounded-full transition-all transform hover:-translate-y-1 shadow-lg">
                Бардык номерлерди көрүү <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
    </div>
</section>

<!-- Features Section -->
<section id="features" class="py-20 bg-gradient-to-b from-gray-50 to-white">
    <div class="container mx-auto px-4 md:px-8 lg:px-16">
        <motion.div
            initial={{ opacity: 0, y: 50 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            class="text-center mb-16"
        >
            <h2 class="text-3xl md:text-4xl font-bold mb-4 relative inline-block">
                Биздин өзгөчөлүктөр
                <span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-20 h-1 bg-secondary"></span>
            </h2>
            <p class="text-gray-600 max-w-2xl mx-auto">
                Эл агартуу журналы - бул билим берүү тармагындагы инновациялар жана илимий изилдөөлөр үчүн негизги булак.
            </p>
        </motion.div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- Feature 1 -->
            <motion.div
                whileHover={{ y: -10 }}
                initial={{ opacity: 0, y: 50 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5 }}
                class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all"
            >
                <div class="w-20 h-20 bg-primary/10 text-primary rounded-full flex items-center justify-center mb-6 mx-auto">
                    <i class="fas fa-flask text-3xl"></i>
                </div>
                <h3 class="text-xl font-bold text-center mb-4">Илимий макалалар</h3>
                <p class="text-gray-600 text-center">
                    Биз илимий изилдөөлөргө, эксперименттерге жана статистикалык анализдерге негизделген сапаттуу макалаларды жарыялайбыз.
                </p>
            </motion.div>

            <!-- Feature 2 -->
            <motion.div
                whileHover={{ y: -10 }}
                initial={{ opacity: 0, y: 50 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: 0.1 }}
                class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all"
            >
                <div class="w-20 h-20 bg-primary/10 text-primary rounded-full flex items-center justify-center mb-6 mx-auto">
                    <i class="fas fa-chalkboard-teacher text-3xl"></i>
                </div>
                <h3 class="text-xl font-bold text-center mb-4">Практикалык сунуштар</h3>
                <p class="text-gray-600 text-center">
                    Мугалимдер үчүн колдонмо методикалык сунуштар жана сабак өтүүнүн инновациялык ыкмалары.
                </p>
            </motion.div>

            <!-- Feature 3 -->
            <motion.div
                whileHover={{ y: -10 }}
                initial={{ opacity: 0, y: 50 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: 0.2 }}
                class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all"
            >
                <div class="w-20 h-20 bg-primary/10 text-primary rounded-full flex items-center justify-center mb-6 mx-auto">
                    <i class="fas fa-globe text-3xl"></i>
                </div>
                <h3 class="text-xl font-bold text-center mb-4">Эл аралык тажрыйба</h3>
                <p class="text-gray-600 text-center">
                    Дүйнөлүк билим берүү системасындагы мыкты практикалар жана аларды Кыргызстанга ылайыкташтыруу.
                </p>
            </motion.div>

            <!-- Feature 4 -->
            <motion.div
                whileHover={{ y: -10 }}
                initial={{ opacity: 0, y: 50 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: 0.3 }}
                class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all"
            >
                <div class="w-20 h-20 bg-primary/10 text-primary rounded-full flex items-center justify-center mb-6 mx-auto">
                    <i class="fas fa-users text-3xl"></i>
                </div>
                <h3 class="text-xl font-bold text-center mb-4">Эксперттер жамааты</h3>
                <p class="text-gray-600 text-center">
                    Биздин авторлор - бул билим берүү тармагындагы ишенимдүү эксперттер жана илимпоздор.
                </p>
            </motion.div>
        </div>
    </div>
</section>

<!-- Stats Section -->
<section class="py-20 bg-primary text-white">
    <div class="container mx-auto px-4 md:px-8 lg:px-16">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            <!-- Stat 1 -->
            <motion.div
                initial={{ opacity: 0, y: 50 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5 }}
                class="p-6"
            >
                <div class="text-4xl md:text-5xl font-bold mb-2">25+</div>
                <div class="text-lg">Жылдык тажрыйба</div>
            </motion.div>

            <!-- Stat 2 -->
            <motion.div
                initial={{ opacity: 0, y: 50 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: 0.1 }}
                class="p-6"
            >
                <div class="text-4xl md:text-5xl font-bold mb-2">500+</div>
                <div class="text-lg">Басылган макала</div>
            </motion.div>

            <!-- Stat 3 -->
            <motion.div
                initial={{ opacity: 0, y: 50 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: 0.2 }}
                class="p-6"
            >
                <div class="text-4xl md:text-5xl font-bold mb-2">150+</div>
                <div class="text-lg">Авторлор</div>
            </motion.div>

            <!-- Stat 4 -->
            <motion.div
                initial={{ opacity: 0, y: 50 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: 0.3 }}
                class="p-6"
            >
                <div class="text-4xl md:text-5xl font-bold mb-2">10K+</div>
                <div class="text-lg">Окуучулар</div>
            </motion.div>
        </div>
    </div>
</section>

<!-- Subscribe Section -->
<section id="subscribe" class="py-20 bg-white">
    <div class="container mx-auto px-4 md:px-8 lg:px-16">
        <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            class="bg-gradient-to-r from-primary to-secondary rounded-2xl p-8 md:p-12 shadow-2xl overflow-hidden relative"
        >
            <div class="absolute -top-20 -right-20 w-40 h-40 bg-white/10 rounded-full"></div>
            <div class="absolute -bottom-20 -left-20 w-40 h-40 bg-white/10 rounded-full"></div>

            <div class="relative z-10 text-center max-w-3xl mx-auto">
                <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Жазылыңыз!</h2>
                <p class="text-white/90 mb-8">
                    Биздин акыркы номерлер жана билим берүү боюнча жаңылыктар электрондук почтаңызга жөнөтүлөт
                </p>

                <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
                    <input 
                        type="email" 
                        placeholder="Электрондук почтаңыз" 
                        class="flex-grow px-6 py-4 rounded-full focus:outline-none focus:ring-2 focus:ring-white"
                        required
                    >
                    <button 
                        type="submit" 
                        class="bg-dark hover:bg-black text-white font-bold px-8 py-4 rounded-full transition-all transform hover:-translate-y-1 shadow-lg"
                    >
                        Жазылуу
                    </button>
                </form>
            </div>
        </motion.div>
    </div>
</section>

<!-- Footer -->
<footer class="bg-dark text-white pt-20 pb-10">
    <div class="container mx-auto px-4 md:px-8 lg:px-16">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
            <!-- About Column -->
            <div>
                <div class="text-2xl font-black mb-6">
                    <span class="text-primary">Эл</span> <span class="text-secondary">агартуу</span>
                </div>
                <p class="text-gray-400 mb-6">
                    Кыргызстандын алдыңкы педагогикалык жана билим берүү журналы. 1998-жылдан бери билим берүү тармагын өнүктүрүүгө салым кошуп келебиз.
                </p>
                <div class="flex space-x-4">
                    <a href="#" class="w-10 h-10 bg-white/10 hover:bg-primary rounded-full flex items-center justify-center transition-colors">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="#" class="w-10 h-10 bg-white/10 hover:bg-primary rounded-full flex items-center justify-center transition-colors">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="#" class="w-10 h-10 bg-white/10 hover:bg-primary rounded-full flex items-center justify-center transition-colors">
                        <i class="fab fa-telegram"></i>
                    </a>
                    <a href="#" class="w-10 h-10 bg-white/10 hover:bg-primary rounded-full flex items-center justify-center transition-colors">
                        <i class="fab fa-youtube"></i>
                    </a>
                </div>
            </div>

            <!-- Links Column -->
            <div>
                <h3 class="text-xl font-bold mb-6 relative pb-2">
                    Шилтемелер
                    <span class="absolute bottom-0 left-0 w-10 h-1 bg-primary"></span>
                </h3>
                <ul class="space-y-3">
                    <li><a href="#home" class="text-gray-400 hover:text-white transition-colors flex items-center">
                        <i class="fas fa-chevron-right text-xs mr-2"></i> Башкы бет
                    </a></li>
                    <li><a href="#magazine" class="text-gray-400 hover:text-white transition-colors flex items-center">
                        <i class="fas fa-chevron-right text-xs mr-2"></i> Журнал
                    </a></li>
                    <li><a href="#features" class="text-gray-400 hover:text-white transition-colors flex items-center">
                        <i class="fas fa-chevron-right text-xs mr-2"></i> Өзгөчөлүктөр
                    </a></li>
                    <li><a href="#subscribe" class="text-gray-400 hover:text-white transition-colors flex items-center">
                        <i class="fas fa-chevron-right text-xs mr-2"></i> Жазылуу
                    </a></li>
                </ul>
            </div>

            <!-- Issues Column -->
            <div>
                <h3 class="text-xl font-bold mb-6 relative pb-2">
                    Номерлер
                    <span class="absolute bottom-0 left-0 w-10 h-1 bg-primary"></span>
                </h3>
                <ul class="space-y-3">
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors flex items-center">
                        <i class="fas fa-chevron-right text-xs mr-2"></i> Акыркы номер
                    </a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors flex items-center">
                        <i class="fas fa-chevron-right text-xs mr-2"></i> Архив
                    </a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors flex items-center">
                        <i class="fas fa-chevron-right text-xs mr-2"></i> Көп суралуу суроолор
                    </a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors flex items-center">
                        <i class="fas fa-chevron-right text-xs mr-2"></i> Авторлорго
                    </a></li>
                </ul>
            </div>

            <!-- Contact Column -->
            <div>
                <h3 class="text-xl font-bold mb-6 relative pb-2">
                    Байланыш
                    <span class="absolute bottom-0 left-0 w-10 h-1 bg-primary"></span>
                </h3>
                <ul class="space-y-4">
                    <li class="flex items-start">
                        <i class="fas fa-map-marker-alt text-primary mt-1 mr-4"></i>
                        <span class="text-gray-400">Бишкек ш., Чуй проспекти, 123</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-phone text-primary mr-4"></i>
                        <span class="text-gray-400">+996 555 123 456</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-envelope text-primary mr-4"></i>
                        <span class="text-gray-400">info@el-agartuu.kg</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-clock text-primary mr-4"></i>
                        <span class="text-gray-400">Дүйшөмбү-Жума, 9:00 - 18:00</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="pt-8 border-t border-gray-800 text-center text-gray-500">
            <p>&copy; 2023 "Эл агартуу" журналы. Бардык укуктар корголгон.</p>
        </div>
    </div>
</footer>

<!-- Back to Top Button -->
<a href="#home" id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-primary hover:bg-secondary rounded-full flex items-center justify-center text-white shadow-lg transition-all opacity-0 invisible">
    <i class="fas fa-arrow-up"></i>
</a>

<script>
    // Preloader
    window.addEventListener('load', function() {
        setTimeout(function() {
            document.getElementById('preloader').style.opacity = '0';
            setTimeout(function() {
                document.getElementById('preloader').style.display = 'none';
            }, 500);
        }, 1000);
    });

    // Mobile Menu Toggle
    document.getElementById('mobile-menu-button').addEventListener('click', function() {
        const menu = document.getElementById('mobile-menu');
        menu.classList.toggle('hidden');
    });

    // Header Scroll Effect
    window.addEventListener('scroll', function() {
        const header = document.getElementById('header');
        const backToTop = document.getElementById('back-to-top');

        if (window.scrollY > 100) {
            header.classList.add('shadow-lg');
            header.classList.remove('glass-effect');
            header.classList.add('bg-white');
            backToTop.classList.remove('opacity-0', 'invisible');
            backToTop.classList.add('opacity-100', 'visible');
        } else {
            header.classList.remove('shadow-lg');
            header.classList.add('glass-effect');
            header.classList.remove('bg-white');
            backToTop.classList.add('opacity-0', 'invisible');
            backToTop.classList.remove('opacity-100', 'visible');
        }
    });

    // Cursor Effect
    const cursor = document.getElementById('cursor');
    document.addEventListener('mousemove', (e) => {
        cursor.style.left = e.clientX + 'px';
        cursor.style.top = e.clientY + 'px';
    });

    // Swiper Initialization
    new Swiper('.magazine-slider', {
        slidesPerView: 1,
        spaceBetween: 20,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        breakpoints: {
            640: {
                slidesPerView: 2,
            },
            1024: {
                slidesPerView: 3,
            },
        }
    });

    // Animation on scroll
    const animateOnScroll = function() {
        const elements = document.querySelectorAll('.feature-card, .magazine-card, .stat-item');

        elements.forEach(element => {
            const elementPosition = element.getBoundingClientRect().top;
            const screenPosition = window.innerHeight / 1.3;

            if (elementPosition < screenPosition) {
                element.style.opacity = '1';
                element.style.transform = 'translateY(0)';
            }
        });
    };

    // Set initial state for animation
    window.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.feature-card, .magazine-card, .stat-item').forEach(element => {
            element.style.opacity = '0';
            element.style.transform = 'translateY(30px)';
            element.style.transition = 'all 0.6s ease';
        });

        // Trigger animations once after page load
        setTimeout(animateOnScroll, 300);
    });

    window.addEventListener('scroll', animateOnScroll);
</script>