<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neck Nirvana | Упражнения от остеохондроза</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="components/navbar.js"></script>
    <script src="components/exercise-card.js"></script>
    <script src="components/tip-card.js"></script>
    <script src="components/footer.js"></script>
</head>
<body class="bg-blue-50">
    <custom-navbar></custom-navbar>
    
    <main class="container mx-auto px-4 py-8">
        <!-- Hero Section -->
        <section class="text-center mb-12">
            <h1 class="text-4xl font-bold text-blue-800 mb-4">Освободите свою шею</h1>
            <p class="text-xl text-blue-600 max-w-2xl mx-auto">Простые упражнения и советы для здоровья вашего позвоночника и устранения "холки"</p>
            <div class="mt-8">
                <img src="http://static.photos/wellness/640x360/1" alt="Neck exercises" class="rounded-lg shadow-lg mx-auto w-full max-w-2xl">
            </div>
        </section>

        <!-- Stats Section -->
        <section class="bg-white rounded-xl shadow-md p-6 mb-12">
            <div class="grid grid-cols dropped-2 md:grid-cols-3 gap-4">
                <div class="text-center p-4">
                    <div class="text-blue-600 mb-2">
                        <i data-feather="clock" class="w-12 h-12 mx-auto"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">10 минут в день</h3>
                    <p class="text-gray-600">Достаточно для видимого результата</p>
                </div>
                <div class="text-center p-4">
                    <div class="text-blue-600 mb-2">
                        <i data-feather="thumbs-up" class="w-12 h-12 mx-auto"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Без боли</h3>
                    <p class="text-gray-600">Мягкие естественные движения</p>
                </div>
                <div class="text-center p-4">
                    <div class="text-blue-600 mb-2">
                        <i data-feather="calendar" class="w-12 h-12 mx-auto"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">21 день</h3>
                    <p class="text-gray-600">Средний срок для первых улучшений</p>
                </div>
            </div>
        </section>

        <!-- Exercises Section -->
        <section class="mb-12">
            <h2 class="text-3xl font-bold text-blue-800 mb-6 text-center">Популярные упражнения</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <custom-exercise-card 
                    title="Повороты головы" 
                    image="http://static.photos/wellness/320x240/1"
                    difficulty="легкое"
                    duration="2 мин"
                    description="Медленные повороты головы влево и вправо">
                </custom-exercise-card>
                
                <custom-exercise-card 
                    title="Наклоны головы" 
                    image="http://static.photos/wellness/320x240/2"
                    difficulty="легкое"
                    duration="2 мин"
                    description="Наклоны головы к плечам, чередуя стороны">
                </custom-exercise-card>
                
                <custom-exercise-card 
                    title="Круговые движения" 
                    image="http://static.photos/wellness/320x240/3"
                    difficulty="среднее"
                    duration="3 мин"
                    description="Медленные круговые движения головой по и против часовой стрелки">
                </custom-exercise-card>
            </div>
            <div class="text-center mt-8">
                <a href="/exercises" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg inline-flex items-center">
                    <span>Все упражнения</span>
                    <i data-feather="arrow-right" class="ml-2"></i>
                </a>
            </div>
        </section>

        <!-- Tips Section -->
        <section class="mb-12">
            <h2 class="text-3xl font-bold text-blue-800 mb-6 text-center">Советы дня</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <custom-tip-card 
                    title="Рабочее место" 
                    icon="monitor"
                    description="Отрегулируйте высоту монитора на уровне глаз, чтобы избежать напряжения шеи">
                </custom-tip-card>
                
                <custom-tip-card 
                    title="Сон" 
                    icon="moon"
                    description="Используйте ортопедическую подушку средней высоты для поддержки шейного отдела">
                </custom-tip-card>
            </div>
            <div class="text-center mt-8">
                <a href="/tips" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg inline-flex items-center">
                    <span>Больше советов</span>
                    <i data-feather="arrow-right" class="ml-2"></i>
                </a>
            </div>
        </section>

        <!-- Track Progress Section -->
        <section class="bg-blue-100 rounded-xl p-8 mb-12">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8">
                    <h2 class="text-3xl font-bold text-blue-800 mb-4">Отслеживайте прогресс</h2>
                    <p class="text-blue-700 mb-6">Делайте фото профиля раз в неделю, чтобы видеть изменения в осанке и уменьшение "холки"</p>
                    <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg inline-flex items-center">
                        <i data-feather="plus" class="mr-2"></i>
                        <span>Добавить фото</span>
                    </button>
                </div>
                <div class="md:w-1/2">
                    <img src="http://static.photos/wellness/640x360/5" alt="Progress tracking" class="rounded-lg shadow-lg w-full">
                </div>
            </div>
        </section>
    </main>

    <custom-footer></custom-footer>
    <script>feather.replace();</script>
    <script src="script.js"></script>
</body>
</html>