From 0b53761192c10618c61e4605352c5e5ab4c7fe7c Mon Sep 17 00:00:00 2001
From: valitovgaziz <valitovgaziz@yandex.ru>
Date: Sat, 1 Nov 2025 02:34:41 +0500
Subject: [PATCH] 	new file:  
 main_dc/yalarba/easySite/easySite/app/components/layout/Careers.vue 
 modified:  
 main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue 
 modified:   main_dc/yalarba/easySite/easySite/app/pages/about/index.vue 
 new file:   main_dc/yalarba/easySite/easySite/app/pages/vacations/index.vue
 add careers page and link from footer to career

---
 .../app/components/layout/Careers.vue         | 1263 +++++++++++++++++
 .../easySite/app/components/layout/Footer.vue |    8 +-
 .../easySite/app/pages/about/index.vue        |    2 +-
 .../easySite/app/pages/vacations/index.vue    |   31 +
 4 files changed, 1299 insertions(+), 5 deletions(-)
 create mode 100644 main_dc/yalarba/easySite/easySite/app/components/layout/Careers.vue
 create mode 100644 main_dc/yalarba/easySite/easySite/app/pages/vacations/index.vue

diff --git a/main_dc/yalarba/easySite/easySite/app/components/layout/Careers.vue b/main_dc/yalarba/easySite/easySite/app/components/layout/Careers.vue
new file mode 100644
index 0000000..afa076f
--- /dev/null
+++ b/main_dc/yalarba/easySite/easySite/app/components/layout/Careers.vue
@@ -0,0 +1,1263 @@
+<!-- pages/careers.vue -->
+<template>
+    <div class="careers-page">
+        <!-- Hero секция -->
+        <section class="hero-section">
+            <div class="container">
+                <div class="hero-content">
+                    <h1 class="hero-title">
+                        🚀 Ищем тимейтов для роста и прорыва
+                    </h1>
+                    <p class="hero-subtitle">
+                        Создаем digital-будущее вместе через open-source
+                    </p>
+                    <div class="hero-actions">
+                        <button class="btn btn-primary" @click="showContactForm = true">
+                            Присоединиться к команде
+                        </button>
+                        <a href="#vacancies" class="btn btn-outline">
+                            Смотреть вакансии
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Миссия -->
+        <section class="mission-section">
+            <div class="container">
+                <div class="mission-grid">
+                    <div class="mission-content">
+                        <h2>💫 Наша миссия</h2>
+                        <p>Мы строим сообщество профессионалов, которые через технологии создают реальную пользу для
+                            людям. Это не коммерческая работа — это возможность расти, решая сложные задачи и открывая
+                            новые горизонты.</p>
+
+                        <div class="values-grid">
+                            <div class="value-card">
+                                <div class="value-icon">🌱</div>
+                                <h3>Бирюзовый подход</h3>
+                                <p>Самоуправляемые команды, эволюционная цель, целостность личности</p>
+                            </div>
+                            <div class="value-card">
+                                <div class="value-icon">🌍</div>
+                                <h3>ESG принципы</h3>
+                                <p>Устойчивое развитие, социальная ответственность, экологичное мышление</p>
+                            </div>
+                            <div class="value-card">
+                                <div class="value-icon">⚡</div>
+                                <h3>Open Source</h3>
+                                <p>Прозрачность, сообщество, совместное создание ценности</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Вакансии -->
+        <section id="vacancies" class="vacancies-section">
+            <div class="container">
+                <h2 class="section-title">👥 Кого мы ищем:</h2>
+
+                <div class="vacancies-grid">
+                    <!-- Frontend -->
+                    <div class="vacancy-card">
+                        <div class="vacancy-header">
+                            <div class="vacancy-icon">💻</div>
+                            <h3>Frontend Developer</h3>
+                            <span class="badge badge-primary">Nuxt.js 4</span>
+                        </div>
+                        <div class="vacancy-tech">
+                            <h4>Технологии:</h4>
+                            <div class="tech-tags">
+                                <span class="tech-tag">Nuxt.js 4</span>
+                                <span class="tech-tag">Vue 3</span>
+                                <span class="tech-tag">Vite</span>
+                                <span class="tech-tag">Node.js</span>
+                                <span class="tech-tag">TypeScript</span>
+                                <span class="tech-tag">CSS3</span>
+                            </div>
+                        </div>
+                        <div class="vacancy-description">
+                            <p>Создаем современные пользовательские интерфейсы для сложных web-приложений. Работа с
+                                микросервисной архитектурой, оптимизация производительности.</p>
+                        </div>
+                    </div>
+
+                    <!-- Backend -->
+                    <div class="vacancy-card">
+                        <div class="vacancy-header">
+                            <div class="vacancy-icon">⚙️</div>
+                            <h3>Backend Developer</h3>
+                            <span class="badge badge-accent">Golang</span>
+                        </div>
+                        <div class="vacancy-tech">
+                            <h4>Технологии:</h4>
+                            <div class="tech-tags">
+                                <span class="tech-tag">Golang</span>
+                                <span class="tech-tag">GORM</span>
+                                <span class="tech-tag">Chi</span>
+                                <span class="tech-tag">PostgreSQL</span>
+                                <span class="tech-tag">Docker</span>
+                                <span class="tech-tag">Redis</span>
+                            </div>
+                        </div>
+                        <div class="vacancy-description">
+                            <p>Разработка высоконагруженных API, проектирование баз данных, создание масштабируемой
+                                микросервисной архитектуры.</p>
+                        </div>
+                    </div>
+
+                    <!-- Analytics -->
+                    <div class="vacancy-card">
+                        <div class="vacancy-header">
+                            <div class="vacancy-icon">📊</div>
+                            <h3>Data Analyst</h3>
+                            <span class="badge badge-success">Analytics</span>
+                        </div>
+                        <div class="vacancy-tech">
+                            <h4>Направления:</h4>
+                            <div class="tech-tags">
+                                <span class="tech-tag">SQL</span>
+                                <span class="tech-tag">Python</span>
+                                <span class="tech-tag">Tableau</span>
+                                <span class="tech-tag">A/B тесты</span>
+                                <span class="tech-tag">ML basics</span>
+                            </div>
+                        </div>
+                        <div class="vacancy-description">
+                            <p>Анализ пользовательского поведения, построение метрик продукта, data-driven принятие
+                                решений, визуализация данных.</p>
+                        </div>
+                    </div>
+
+                    <!-- Designer -->
+                    <div class="vacancy-card">
+                        <div class="vacancy-header">
+                            <div class="vacancy-icon">🎨</div>
+                            <h3>Product Designer</h3>
+                            <span class="badge badge-secondary">Figma</span>
+                        </div>
+                        <div class="vacancy-tech">
+                            <h4>Инструменты:</h4>
+                            <div class="tech-tags">
+                                <span class="tech-tag">Figma</span>
+                                <span class="tech-tag">UI/UX</span>
+                                <span class="tech-tag">Prototyping</span>
+                                <span class="tech-tag">Design Systems</span>
+                                <span class="tech-tag">User Research</span>
+                            </div>
+                        </div>
+                        <div class="vacancy-description">
+                            <p>Создание пользовательских интерфейсов, проектирование UX, разработка дизайн-систем,
+                                исследование пользовательских сценариев.</p>
+                        </div>
+                    </div>
+
+                    <!-- Sales -->
+                    <div class="vacancy-card">
+                        <div class="vacancy-header">
+                            <div class="vacancy-icon">🚀</div>
+                            <h3>Sales & Strategy</h3>
+                            <span class="badge badge-warning">Growth</span>
+                        </div>
+                        <div class="vacancy-tech">
+                            <h4>Навыки:</h4>
+                            <div class="tech-tags">
+                                <span class="tech-tag">B2B Sales</span>
+                                <span class="tech-tag">Strategy</span>
+                                <span class="tech-tag">Market Research</span>
+                                <span class="tech-tag">Partnerships</span>
+                                <span class="tech-tag">GTM</span>
+                            </div>
+                        </div>
+                        <div class="vacancy-description">
+                            <p>Разработка стратегий роста, поиск партнеров, построение sales-процессов, анализ рынков и
+                                конкурентов.</p>
+                        </div>
+                    </div>
+
+                    <!-- Manager -->
+                    <div class="vacancy-card">
+                        <div class="vacancy-header">
+                            <div class="vacancy-icon">👔</div>
+                            <h3>Project Manager</h3>
+                            <span class="badge badge-info">Management</span>
+                        </div>
+                        <div class="vacancy-tech">
+                            <h4>Компетенции:</h4>
+                            <div class="tech-tags">
+                                <span class="tech-tag">Agile</span>
+                                <span class="tech-tag">Scrum</span>
+                                <span class="tech-tag">Team Leadership</span>
+                                <span class="tech-tag">Roadmapping</span>
+                                <span class="tech-tag">Stakeholder Management</span>
+                            </div>
+                        </div>
+                        <div class="vacancy-description">
+                            <p>Координация команд, управление проектами, планирование релизов, коммуникация со
+                                стейкхолдерами.</p>
+                        </div>
+                    </div>
+
+                    <!-- SEO Specialist -->
+                    <div class="vacancy-card">
+                        <div class="vacancy-header">
+                            <div class="vacancy-icon">🔍</div>
+                            <h3>SEO Specialist</h3>
+                            <span class="badge badge-success">Search</span>
+                        </div>
+                        <div class="vacancy-tech">
+                            <h4>Навыки:</h4>
+                            <div class="tech-tags">
+                                <span class="tech-tag">Technical SEO</span>
+                                <span class="tech-tag">Keyword Research</span>
+                                <span class="tech-tag">Link Building</span>
+                                <span class="tech-tag">Google Analytics</span>
+                                <span class="tech-tag">Content Strategy</span>
+                            </div>
+                        </div>
+                        <div class="vacancy-description">
+                            <p>Повышение органической видимости проекта, техническая SEO-оптимизация, анализ
+                                конкурентов, работа с метриками.</p>
+                        </div>
+                    </div>
+
+                    <!-- SMM Specialist -->
+                    <div class="vacancy-card">
+                        <div class="vacancy-header">
+                            <div class="vacancy-icon">📱</div>
+                            <h3>SMM Specialist</h3>
+                            <span class="badge badge-primary">Social Media</span>
+                        </div>
+                        <div class="vacancy-tech">
+                            <h4>Навыки:</h4>
+                            <div class="tech-tags">
+                                <span class="tech-tag">Content Planning</span>
+                                <span class="tech-tag">Community Building</span>
+                                <span class="tech-tag">Analytics</span>
+                                <span class="tech-tag">Paid Ads</span>
+                                <span class="tech-tag">Storytelling</span>
+                            </div>
+                        </div>
+                        <div class="vacancy-description">
+                            <p>Создание и ведение сообществ, разработка контент-стратегии, работа с аудиторией, запуск
+                                рекламных кампаний в соцсетях.</p>
+                        </div>
+                    </div>
+
+                    <!-- Copywriter -->
+                    <div class="vacancy-card">
+                        <div class="vacancy-header">
+                            <div class="vacancy-icon">✍️</div>
+                            <h3>Копирайтер</h3>
+                            <span class="badge badge-secondary">Content</span>
+                        </div>
+                        <div class="vacancy-tech">
+                            <h4>Навыки:</h4>
+                            <div class="tech-tags">
+                                <span class="tech-tag">Storytelling</span>
+                                <span class="tech-tag">UX Writing</span>
+                                <span class="tech-tag">SEO Texts</span>
+                                <span class="tech-tag">Brand Voice</span>
+                                <span class="tech-tag">Editing</span>
+                            </div>
+                        </div>
+                        <div class="vacancy-description">
+                            <p>Создание продающих, информационных и SEO-текстов, разработка контент-стратегии, работа с
+                                тоном голоса бренда.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Пояснение про комбинированные роли -->
+                <div class="roles-explanation">
+                    <div class="explanation-card">
+                        <h3>💡 О комбинированных ролях в стартапе</h3>
+                        <p>В стартап-среде мы ценим <strong>универсальность и способность работать на стыке
+                                специальностей</strong>. Если вы чувствуете силу в нескольких направлениях — это
+                            огромное преимущество!</p>
+
+                        <div class="combination-examples">
+                            <h4>🎭 Возможные комбинации:</h4>
+                            <div class="combination-grid">
+                                <div class="combination-item">
+                                    <div class="combination-badges">
+                                        <span class="badge badge-success">SEO</span>
+                                        <span class="badge badge-secondary">Copy</span>
+                                    </div>
+                                    <p>SEO + Копирайтинг</p>
+                                </div>
+                                <div class="combination-item">
+                                    <div class="combination-badges">
+                                        <span class="badge badge-primary">SMM</span>
+                                        <span class="badge badge-secondary">Copy</span>
+                                    </div>
+                                    <p>SMM + Копирайтинг</p>
+                                </div>
+                                <div class="combination-item">
+                                    <div class="combination-badges">
+                                        <span class="badge badge-primary">SMM</span>
+                                        <span class="badge badge-success">SEO</span>
+                                    </div>
+                                    <p>SMM + SEO</p>
+                                </div>
+                                <div class="combination-item">
+                                    <div class="combination-badges">
+                                        <span class="badge badge-primary">SMM</span>
+                                        <span class="badge badge-success">SEO</span>
+                                        <span class="badge badge-secondary">Copy</span>
+                                    </div>
+                                    <p>Digital Marketing Generalist</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="explanation-grid">
+                            <div class="explanation-item">
+                                <div class="explanation-icon">🔄</div>
+                                <h4>Гибкость</h4>
+                                <p>Возможность пробовать разные направления и находить свои сильные стороны</p>
+                            </div>
+                            <div class="explanation-item">
+                                <div class="explanation-icon">🚀</div>
+                                <h4>Быстрый рост</h4>
+                                <p>Освоение смежных навыков ускоряет профессиональное развитие</p>
+                            </div>
+                            <div class="explanation-item">
+                                <div class="explanation-icon">🎯</div>
+                                <h4>Широкий взгляд</h4>
+                                <p>Понимание holistic подхода к digital-маркетингу</p>
+                            </div>
+                        </div>
+
+                        <div class="cta-note">
+                            <p><strong>Не бойтесь пробовать!</strong> Даже если вы сильны только в одном направлении, но
+                                хотите развиваться в других — мы готовы поддержать ваше развитие.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Важные качества -->
+        <section class="qualities-section">
+            <div class="container">
+                <h2 class="section-title">⭐ Важные качества</h2>
+
+                <div class="qualities-grid">
+                    <div class="quality-item">
+                        <div class="quality-icon">🛡️</div>
+                        <h4>Антипригарное покрытие</h4>
+                        <p>Устойчивость к выгоранию, умение сохранять энергию на длинной дистанции</p>
+                    </div>
+
+                    <div class="quality-item">
+                        <div class="quality-icon">🎯</div>
+                        <h4>Самостоятельность</h4>
+                        <p>Способность брать ответственность и доводить задачи до конца</p>
+                    </div>
+
+                    <div class="quality-item">
+                        <div class="quality-icon">🤝</div>
+                        <h4>Терпимость</h4>
+                        <p>Уважение к разным мнениям, эмпатия, конструктивная коммуникация</p>
+                    </div>
+
+                    <div class="quality-item">
+                        <div class="quality-icon">🌿</div>
+                        <h4>Здоровые привычки</h4>
+                        <p>Осознанный подход к здоровью, баланс работы и отдыха</p>
+                    </div>
+
+                    <div class="quality-item">
+                        <div class="quality-icon">⚽</div>
+                        <h4>Спорт/Хобби</h4>
+                        <p>Программирование — часть жизни, а не работа. Важно иметь другие увлечения</p>
+                    </div>
+
+                    <div class="quality-item">
+                        <div class="quality-icon">🌟</div>
+                        <h4>Проактивность</h4>
+                        <p>Инициативность, желание влиять на результат, а не просто выполнять задачи</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Что получаете -->
+        <section class="benefits-section">
+            <div class="container">
+                <h2 class="section-title">🎯 Что получаете взамен:</h2>
+
+                <div class="benefits-grid">
+                    <div class="benefit-card">
+                        <div class="benefit-icon">✅</div>
+                        <h3>Реальный опыт</h3>
+                        <p>Задачи уровня коммерческих проектов, которые впечатляют работодателей</p>
+                    </div>
+
+                    <div class="benefit-card">
+                        <div class="benefit-icon">📈</div>
+                        <h3>Профессиональный рост</h3>
+                        <p>Следующий уровень навыков гарантирован через решение сложных задач</p>
+                    </div>
+
+                    <div class="benefit-card">
+                        <div class="benefit-icon">🤝</div>
+                        <h3>Нетворкинг</h3>
+                        <p>Сообщество сильных специалистов, взаимопомощь и обмен опытом</p>
+                    </div>
+
+                    <div class="benefit-card">
+                        <div class="benefit-icon">💼</div>
+                        <h3>Портфолио</h3>
+                        <p>Проекты, которые действительно впечатляют и показывают ваш уровень</p>
+                    </div>
+
+                    <div class="benefit-card">
+                        <div class="benefit-icon">🔄</div>
+                        <h3>Горизонтальное развитие</h3>
+                        <p>Возможность пробовать себя в смежных ролях и расширять экспертизу</p>
+                    </div>
+
+                    <div class="benefit-card">
+                        <div class="benefit-icon">💎</div>
+                        <h3>Доля в проекте</h3>
+                        <p>Участие в будущих доходах проекта как сооснователь</p>
+                    </div>
+                </div>
+
+                <!-- Важное предупреждение -->
+                <div class="warning-card">
+                    <div class="warning-header">
+                        <span class="warning-icon">⚠️</span>
+                        <h3>Важная информация</h3>
+                    </div>
+                    <p>Это <strong>стартап на ранней стадии</strong>. На данный момент единственное возможное
+                        вознаграждение:</p>
+                    <ul>
+                        <li>💪 <strong>Опыт</strong> — реальные проекты в портфолио</li>
+                        <li>📚 <strong>Рост профессионализма</strong> — следующий уровень навыков</li>
+                        <li>📈 <strong>Доля от будущих доходов</strong> — участие в успехе проекта</li>
+                        <li>👥 <strong>Новые знакомства</strong> — сообщество единомышленников</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <!-- CTA секция -->
+        <section class="cta-section">
+            <div class="container">
+                <div class="cta-content">
+                    <h2>Готовы расти вместе?</h2>
+                    <p>Если вы ищете не просто проект, а сообщество для профессионального прорыва — давайте знакомиться!
+                    </p>
+                    <div class="cta-actions">
+                        <button class="btn btn-primary btn-large" @click="showContactForm = true">
+                            Написать нам
+                        </button>
+                        <a href="https://t.me/your_telegram" class="btn btn-outline btn-large" target="_blank">
+                            Telegram
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Модальное окно контактов -->
+        <div v-if="showContactForm" class="modal-overlay" @click="showContactForm = false">
+            <div class="modal-content" @click.stop>
+                <button class="modal-close" @click="showContactForm = false">×</button>
+
+                <h3>Присоединиться к команде</h3>
+
+                <form @submit.prevent="submitForm" class="contact-form">
+                    <div class="form-group">
+                        <label for="name">Имя *</label>
+                        <input id="name" v-model="form.name" type="text" required placeholder="Как к вам обращаться?">
+                    </div>
+
+                    <div class="form-group">
+                        <label for="email">Email *</label>
+                        <input id="email" v-model="form.email" type="email" required placeholder="your@email.com">
+                    </div>
+
+                    <!-- В модальном окне формы обновите опции ролей -->
+                    <div class="form-group">
+                        <label for="role">Интересующая роль *</label>
+                        <select id="role" v-model="form.role" required>
+                            <option value="">Выберите роль</option>
+                            <option value="frontend">Frontend Developer</option>
+                            <option value="backend">Backend Developer</option>
+                            <option value="analytics">Data Analyst</option>
+                            <option value="designer">Product Designer</option>
+                            <option value="sales">Sales & Strategy</option>
+                            <option value="manager">Project Manager</option>
+                            <option value="seo">SEO Specialist</option>
+                            <option value="smm">SMM Specialist</option>
+                            <option value="copywriter">Копирайтер</option>
+                            <option value="seo-copy">SEO + Копирайтинг</option>
+                            <option value="smm-copy">SMM + Копирайтинг</option>
+                            <option value="smm-seo">SMM + SEO</option>
+                            <option value="digital-marketing">Digital Marketing (полный цикл)</option>
+                            <option value="other">Другое</option>
+                        </select>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="message">Расскажите о себе *</label>
+                        <textarea id="message" v-model="form.message" required rows="5"
+                            placeholder="Ваш опыт, почему хотите присоединиться, что вас вдохновляет..."></textarea>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="portfolio">Ссылка на портфолио/GitHub</label>
+                        <input id="portfolio" v-model="form.portfolio" type="url"
+                            placeholder="https://github.com/yourname">
+                    </div>
+
+                    <button type="submit" class="btn btn-primary btn-full" :disabled="loading">
+                        {{ loading ? 'Отправка...' : 'Отправить заявку' }}
+                    </button>
+                </form>
+
+                <div class="alternative-contacts">
+                    <p>Или напишите напрямую:</p>
+                    <div class="contact-links">
+                        <a href="mailto:team@yal-arba.ru" class="contact-link">
+                            📧 team@yal-arba.ru
+                        </a>
+                        <a href="https://t.me/your_telegram" class="contact-link" target="_blank">
+                            💬 Telegram
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const showContactForm = ref(false)
+const loading = ref(false)
+
+const form = ref({
+    name: '',
+    email: '',
+    role: '',
+    message: '',
+    portfolio: ''
+})
+
+const submitForm = async () => {
+    loading.value = true
+
+    try {
+        // Здесь будет отправка формы на бэкенд
+        await $fetch('/api/careers/apply', {
+            method: 'POST',
+            body: form.value
+        })
+
+        // Успешная отправка
+        showContactForm.value = false
+        form.value = { name: '', email: '', role: '', message: '', portfolio: '' }
+
+        // Показать уведомление об успехе
+        alert('Заявка отправлена! Свяжемся с вами в ближайшее время.')
+    } catch (error) {
+        console.error('Ошибка отправки формы:', error)
+        alert('Произошла ошибка. Попробуйте еще раз или напишите напрямую.')
+    } finally {
+        loading.value = false
+    }
+}
+
+// SEO мета-теги
+useSeoMeta({
+    title: 'Присоединиться к команде - ЯЛ АРБА',
+    description: 'Станьте частью команды, создающей digital-будущее через open-source. Frontend, Backend, Design, Analytics вакансии.',
+    ogTitle: 'Вакансии в стартап ЯЛ АРБА',
+    ogDescription: 'Ищем тимейтов для роста и прорыва. Создаем будущее вместе.'
+})
+</script>
+
+<style scoped>
+.careers-page {
+    background: var(--bg-primary);
+}
+
+/* Hero секция */
+.hero-section {
+    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
+    color: var(--text-inverse);
+    padding: var(--space-2xl) 0;
+    text-align: center;
+}
+
+.hero-title {
+    font-size: clamp(2rem, 5vw, 3.5rem);
+    margin-bottom: var(--space-lg);
+    line-height: 1.1;
+}
+
+.hero-subtitle {
+    font-size: clamp(1.125rem, 2vw, 1.5rem);
+    margin-bottom: var(--space-xl);
+    opacity: 0.9;
+}
+
+.hero-actions {
+    display: flex;
+    gap: var(--space-md);
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+/* Миссия */
+.mission-section {
+    padding: var(--space-2xl) 0;
+    background: var(--bg-secondary);
+}
+
+.mission-grid {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.mission-content h2 {
+    margin-bottom: var(--space-lg);
+    color: var(--primary-600);
+}
+
+.values-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--space-lg);
+    margin-top: var(--space-xl);
+}
+
+.value-card {
+    background: var(--bg-primary);
+    padding: var(--space-lg);
+    border-radius: var(--radius-lg);
+    text-align: center;
+    border: 1px solid var(--border-light);
+}
+
+.value-icon {
+    font-size: 2.5rem;
+    margin-bottom: var(--space-md);
+}
+
+.value-card h3 {
+    margin-bottom: var(--space-sm);
+    color: var(--primary-600);
+}
+
+/* Вакансии */
+.vacancies-section {
+    padding: var(--space-2xl) 0;
+}
+
+.section-title {
+    text-align: center;
+    margin-bottom: var(--space-2xl);
+    font-size: var(--text-3xl);
+    color: var(--text-primary);
+}
+
+.vacancies-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: var(--space-lg);
+}
+
+.vacancy-card {
+    background: var(--bg-primary);
+    padding: var(--space-xl);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-light);
+    transition: all 0.3s ease;
+}
+
+.vacancy-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--primary-300);
+}
+
+.vacancy-header {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-md);
+    margin-bottom: var(--space-lg);
+}
+
+.vacancy-icon {
+    font-size: 2rem;
+    flex-shrink: 0;
+}
+
+.vacancy-header h3 {
+    flex: 1;
+    margin-bottom: var(--space-xs);
+    color: var(--text-primary);
+}
+
+.vacancy-tech h4 {
+    margin-bottom: var(--space-sm);
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+}
+
+.tech-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+    margin-bottom: var(--space-lg);
+}
+
+.tech-tag {
+    background: var(--gray-100);
+    color: var(--gray-700);
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.vacancy-description p {
+    color: var(--text-secondary);
+    line-height: var(--leading-relaxed);
+}
+
+/* Качества */
+.qualities-section {
+    padding: var(--space-2xl) 0;
+    background: var(--bg-secondary);
+}
+
+.qualities-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: var(--space-lg);
+}
+
+.quality-item {
+    text-align: center;
+    padding: var(--space-lg);
+}
+
+.quality-icon {
+    font-size: 2.5rem;
+    margin-bottom: var(--space-md);
+}
+
+.quality-item h4 {
+    margin-bottom: var(--space-sm);
+    color: var(--primary-600);
+}
+
+.quality-item p {
+    color: var(--text-secondary);
+    line-height: var(--leading-relaxed);
+}
+
+/* Бенефиты */
+.benefits-section {
+    padding: var(--space-2xl) 0;
+}
+
+.benefits-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--space-lg);
+    margin-bottom: var(--space-2xl);
+}
+
+.benefit-card {
+    background: var(--bg-primary);
+    padding: var(--space-xl);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-light);
+    text-align: center;
+}
+
+.benefit-icon {
+    font-size: 2.5rem;
+    margin-bottom: var(--space-md);
+}
+
+.benefit-card h3 {
+    margin-bottom: var(--space-sm);
+    color: var(--primary-600);
+}
+
+.benefit-card p {
+    color: var(--text-secondary);
+    line-height: var(--leading-relaxed);
+}
+
+.warning-card {
+    background: var(--warning-50);
+    border: 1px solid var(--warning-200);
+    border-radius: var(--radius-lg);
+    padding: var(--space-xl);
+    margin-top: var(--space-xl);
+}
+
+.warning-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    margin-bottom: var(--space-md);
+}
+
+.warning-icon {
+    font-size: 1.5rem;
+}
+
+.warning-header h3 {
+    color: var(--warning-700);
+    margin-bottom: 0;
+}
+
+.warning-card ul {
+    margin-top: var(--space-md);
+    padding-left: var(--space-lg);
+}
+
+.warning-card li {
+    margin-bottom: var(--space-sm);
+    color: var(--text-secondary);
+}
+
+/* CTA секция */
+.cta-section {
+    background: linear-gradient(135deg, var(--secondary-400) 0%, var(--secondary-600) 100%);
+    color: var(--text-inverse);
+    padding: var(--space-2xl) 0;
+    text-align: center;
+}
+
+.cta-content h2 {
+    margin-bottom: var(--space-lg);
+    font-size: var(--text-3xl);
+}
+
+.cta-content p {
+    margin-bottom: var(--space-xl);
+    font-size: var(--text-lg);
+    opacity: 0.9;
+}
+
+.cta-actions {
+    display: flex;
+    gap: var(--space-md);
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.btn-large {
+    padding: var(--space-md) var(--space-xl);
+    font-size: var(--text-lg);
+}
+
+.btn-full {
+    width: 100%;
+}
+
+/* Модальное окно */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: var(--space-md);
+}
+
+.modal-content {
+    background: var(--bg-primary);
+    border-radius: var(--radius-lg);
+    padding: var(--space-2xl);
+    max-width: 500px;
+    width: 100%;
+    max-height: 90vh;
+    overflow-y: auto;
+    position: relative;
+}
+
+.modal-close {
+    position: absolute;
+    top: var(--space-md);
+    right: var(--space-md);
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: var(--text-tertiary);
+}
+
+.modal-content h3 {
+    margin-bottom: var(--space-xl);
+    text-align: center;
+    color: var(--primary-600);
+}
+
+.contact-form {
+    margin-bottom: var(--space-xl);
+}
+
+.alternative-contacts {
+    text-align: center;
+    padding-top: var(--space-lg);
+    border-top: 1px solid var(--border-light);
+}
+
+.contact-links {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+    margin-top: var(--space-md);
+}
+
+.contact-link {
+    color: var(--primary-600);
+    text-decoration: none;
+    padding: var(--space-sm);
+    border: 1px solid var(--border-light);
+    border-radius: var(--radius-md);
+    transition: all 0.2s;
+}
+
+.contact-link:hover {
+    background: var(--primary-50);
+    border-color: var(--primary-300);
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+
+    .hero-actions,
+    .cta-actions {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .vacancies-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .modal-content {
+        padding: var(--space-xl);
+    }
+
+    .vacancy-header {
+        flex-direction: column;
+        text-align: center;
+    }
+}
+
+/* Стили для обновленной секции вакансий */
+.featured-card {
+    border: 2px solid var(--primary-300);
+    background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-primary) 100%);
+    position: relative;
+}
+
+.badge-group {
+    display: flex;
+    gap: var(--space-xs);
+    flex-wrap: wrap;
+}
+
+.role-combination {
+    background: var(--primary-100);
+    border-radius: var(--radius-md);
+    padding: var(--space-md);
+    margin-bottom: var(--space-lg);
+    border-left: 4px solid var(--primary-500);
+}
+
+.combination-label {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    font-weight: var(--font-semibold);
+    color: var(--primary-700);
+    margin-bottom: var(--space-xs);
+}
+
+.combination-icon {
+    font-size: 1.2rem;
+}
+
+.combination-description {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    margin: 0;
+}
+
+.skills-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--space-lg);
+    margin-bottom: var(--space-lg);
+}
+
+.skill-category h5 {
+    margin-bottom: var(--space-sm);
+    color: var(--text-primary);
+    font-size: var(--text-sm);
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+}
+
+.role-details {
+    list-style: none;
+    padding: 0;
+    margin: var(--space-md) 0;
+}
+
+.role-details li {
+    position: relative;
+    padding-left: var(--space-lg);
+    margin-bottom: var(--space-xs);
+    color: var(--text-secondary);
+}
+
+.role-details li:before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: var(--success-500);
+    font-weight: bold;
+}
+
+.role-flexibility {
+    background: var(--success-50);
+    border: 1px solid var(--success-200);
+    border-radius: var(--radius-md);
+    padding: var(--space-md);
+    margin-top: var(--space-lg);
+}
+
+.flexibility-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    background: var(--success-100);
+    color: var(--success-700);
+    padding: 0.25rem 0.75rem;
+    border-radius: var(--radius-sm);
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    margin-bottom: var(--space-sm);
+}
+
+.flexibility-icon {
+    font-size: 1rem;
+}
+
+.roles-explanation {
+    margin-top: var(--space-2xl);
+}
+
+.explanation-card {
+    background: var(--bg-secondary);
+    border-radius: var(--radius-lg);
+    padding: var(--space-2xl);
+    border: 1px solid var(--border-light);
+}
+
+.explanation-card h3 {
+    margin-bottom: var(--space-lg);
+    color: var(--primary-600);
+    text-align: center;
+}
+
+.explanation-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--space-lg);
+    margin: var(--space-xl) 0;
+}
+
+.explanation-item {
+    text-align: center;
+    padding: var(--space-lg);
+}
+
+.explanation-icon {
+    font-size: 2rem;
+    margin-bottom: var(--space-md);
+}
+
+.explanation-item h4 {
+    margin-bottom: var(--space-sm);
+    color: var(--primary-600);
+}
+
+.explanation-item p {
+    color: var(--text-secondary);
+    line-height: var(--leading-relaxed);
+}
+
+.cta-note {
+    background: var(--primary-50);
+    border-radius: var(--radius-md);
+    padding: var(--space-lg);
+    text-align: center;
+    border-left: 4px solid var(--primary-500);
+}
+
+.cta-note p {
+    margin: 0;
+    color: var(--primary-700);
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+    .skills-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .explanation-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .role-combination,
+    .role-flexibility {
+        padding: var(--space-sm);
+    }
+}
+
+/* Стили для обновленной секции вакансий */
+.roles-explanation {
+  margin-top: var(--space-2xl);
+}
+
+.explanation-card {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  padding: var(--space-2xl);
+  border: 1px solid var(--border-light);
+}
+
+.explanation-card h3 {
+  margin-bottom: var(--space-lg);
+  color: var(--primary-600);
+  text-align: center;
+}
+
+.combination-examples {
+  margin: var(--space-xl) 0;
+  padding: var(--space-lg);
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-light);
+}
+
+.combination-examples h4 {
+  margin-bottom: var(--space-lg);
+  color: var(--text-primary);
+  text-align: center;
+}
+
+.combination-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-lg);
+}
+
+.combination-item {
+  text-align: center;
+  padding: var(--space-lg);
+  background: var(--gray-50);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-light);
+}
+
+.combination-badges {
+  display: flex;
+  justify-content: center;
+  gap: var(--space-xs);
+  margin-bottom: var(--space-sm);
+  flex-wrap: wrap;
+}
+
+.combination-item p {
+  margin: 0;
+  font-weight: var(--font-medium);
+  color: var(--text-primary);
+}
+
+.explanation-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--space-lg);
+  margin: var(--space-xl) 0;
+}
+
+.explanation-item {
+  text-align: center;
+  padding: var(--space-lg);
+}
+
+.explanation-icon {
+  font-size: 2rem;
+  margin-bottom: var(--space-md);
+}
+
+.explanation-item h4 {
+  margin-bottom: var(--space-sm);
+  color: var(--primary-600);
+}
+
+.explanation-item p {
+  color: var(--text-secondary);
+  line-height: var(--leading-relaxed);
+}
+
+.cta-note {
+  background: var(--primary-50);
+  border-radius: var(--radius-md);
+  padding: var(--space-lg);
+  text-align: center;
+  border-left: 4px solid var(--primary-500);
+}
+
+.cta-note p {
+  margin: 0;
+  color: var(--primary-700);
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .combination-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .explanation-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .explanation-card {
+    padding: var(--space-lg);
+  }
+  
+  .combination-examples {
+    padding: var(--space-md);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue b/main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue
index 891f29b..ae82af5 100644
--- a/main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue
+++ b/main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue
@@ -8,12 +8,12 @@
         <div class="footer-section">
           <div class="footer-logo">
             <div class="logo-icon">
-              <span class="logo-text">T</span>
+              <span class="logo-text">ES</span>
             </div>
-            <span class="logo-name">TravelEasy</span>
+            <span class="logo-name">EasySite</span>
           </div>
           <p class="footer-description">
-            Платформа для агрегации туристических объектов и создания маршрутов путешествий.
+            Платформа для агрегации туристических объектов.
           </p>
           <div class="social-links">
             <a href="https://vk.com/club222248484" target="_blank" class="social-link" aria-label="ВКонтакте">
@@ -78,7 +78,7 @@
         <div class="footer-section">
           <h3 class="footer-title">Карьера</h3>
           <div class="footer-links">
-            <a href="#" class="footer-link">💼 Открытые вакансии</a>
+            <NuxtLink to="/vacations" class="footer-link">Открытые вакансии</NuxtLink>
             <a href="#" class="footer-link">👥 Стать партнером</a>
             <nuxt-link class="footer-link" href="/about">🏢 О компании</nuxt-link>
             <a href="#" class="footer-link">📰 Новости</a>
diff --git a/main_dc/yalarba/easySite/easySite/app/pages/about/index.vue b/main_dc/yalarba/easySite/easySite/app/pages/about/index.vue
index 918cef4..50749ff 100644
--- a/main_dc/yalarba/easySite/easySite/app/pages/about/index.vue
+++ b/main_dc/yalarba/easySite/easySite/app/pages/about/index.vue
@@ -99,7 +99,7 @@
               <div class="member-avatar">
                 <span class="avatar-icon">👨‍💻</span>
               </div>
-              <h3 class="member-name">Валитов Газиз</h3>
+              <h3 class="member-name"><a href="https://valitovgaziz.ru" target="_blank">Валитов Газиз</a></h3>
               <p class="member-role">Основатель & Fullstack-разработчик</p>
               <p class="member-bio">
                 С 2022 года изучаю технологии и создаю решения.
diff --git a/main_dc/yalarba/easySite/easySite/app/pages/vacations/index.vue b/main_dc/yalarba/easySite/easySite/app/pages/vacations/index.vue
new file mode 100644
index 0000000..5307d5c
--- /dev/null
+++ b/main_dc/yalarba/easySite/easySite/app/pages/vacations/index.vue
@@ -0,0 +1,31 @@
+<!-- pages/privacy.vue -->
+<template>
+  <div>
+
+    <Header />
+    <Vacations />
+    <Footer />
+  </div>
+</template>
+
+<script setup>
+// Импортируем компонент
+import Header from '~/components/layout/Header.vue'
+import Footer from '~/components/layout/Footer.vue'
+import Vacations from '~/components/layout/Careers.vue'
+
+// SEO мета-теги
+useSeoMeta({
+  title: 'Вакансии Ял Арба',
+  description: 'Страница вакансий ООО "ИКЦ Ял Арба"'
+})
+</script>
+
+<style>
+a:hover,
+a:visited,
+a:focus {
+  text-decoration: none;
+  color: var(--text-primary)
+}
+</style>
\ No newline at end of file