valitovgaziz
ff16cfd0f6
modified: main_dc/yalarba/easySite/easySite/app/components/layout/Careers.vue fix bag with non working button in head of vacations page easysite102.ru
1352 lines
47 KiB
Vue
1352 lines
47 KiB
Vue
<!-- 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">
|
||
<NuxtLink class="btn btn-primary" @click="handleJoinTeam()">
|
||
Присоединиться к команде
|
||
</NuxtLink>
|
||
<NuxtLink to="#vacancies" class="btn btn-outline">
|
||
Смотреть вакансии
|
||
</NuxtLink>
|
||
</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 id="vacancies" 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="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 id="contact"></div>
|
||
<!-- Модальное окно контактов -->
|
||
<div v-if="showContactForm" id="contact" class="modal-overlay" @click="showContactForm = false">
|
||
<div class="modal-content" @click.stop>
|
||
<button class="modal-close" @click="showContactForm = false">×</button>
|
||
|
||
<h3>Присоединиться к команде</h3>
|
||
|
||
<form class="contact-form" @submit.prevent="submitForm">
|
||
<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="Ваш опыт, почему хотите присоединиться, что вас вдохновляет..." />
|
||
</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:valitovgaziz@yandex.ru" class="contact-link">
|
||
📧 mailto:valitovgaziz@yandex.ru
|
||
</a>
|
||
<a href="https://t.me/valitovgaziz" class="contact-link" target="_blank">
|
||
💬 Telegram
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
const { sendMessageToTelegram } = useTelegram();
|
||
const showContactForm = ref(false)
|
||
const loading = ref(false)
|
||
const toast = useToast()
|
||
const form = ref({
|
||
name: '',
|
||
email: '',
|
||
role: '',
|
||
message: '',
|
||
portfolio: ''
|
||
})
|
||
|
||
|
||
// Функция для форматирования сообщения в Telegram
|
||
const formatTelegramMessage = (formData) => {
|
||
const roleLabels = {
|
||
'frontend': 'Frontend Developer',
|
||
'backend': 'Backend Developer',
|
||
'analytics': 'Data Analyst',
|
||
'designer': 'Product Designer',
|
||
'sales': 'Sales & Strategy',
|
||
'manager': 'Project Manager',
|
||
'seo': 'SEO Specialist',
|
||
'smm': 'SMM Specialist',
|
||
'copywriter': 'Копирайтер',
|
||
'seo-copy': 'SEO + Копирайтинг',
|
||
'smm-copy': 'SMM + Копирайтинг',
|
||
'smm-seo': 'SMM + SEO',
|
||
'digital-marketing': 'Digital Marketing (полный цикл)',
|
||
'other': 'Другое'
|
||
};
|
||
|
||
const roleName = roleLabels[formData.role] || formData.role;
|
||
|
||
return `🎯 <b>Новая заявка в команду!</b>
|
||
|
||
👤 <b>Имя:</b> ${formData.name}
|
||
📧 <b>Email:</b> ${formData.email}
|
||
💼 <b>Роль:</b> ${roleName}
|
||
|
||
📝 <b>Сообщение:</b>
|
||
${formData.message}
|
||
|
||
${formData.portfolio ? `🔗 <b>Портфолио:</b> ${formData.portfolio}` : '🔗 <b>Портфолио:</b> Не указано'}
|
||
|
||
⏰ <b>Время:</b> ${new Date().toLocaleString('ru-RU')}
|
||
🌐 <b>Источник:</b> Careers Page`;
|
||
}
|
||
|
||
const submitForm = async () => {
|
||
loading.value = true
|
||
|
||
try {
|
||
// Форматируем сообщение для Telegram
|
||
const telegramMessage = formatTelegramMessage(form.value);
|
||
|
||
// Отправляем в Telegram
|
||
const { success, error } = await sendMessageToTelegram(telegramMessage);
|
||
|
||
if (success) {
|
||
// Успешная отправка - показываем красивое уведомление
|
||
toast.add({
|
||
title: 'Заявка отправлена! 🎉',
|
||
description: 'Свяжемся с вами в ближайшее время',
|
||
icon: 'i-heroicons-check-badge',
|
||
color: 'green',
|
||
timeout: 5000
|
||
});
|
||
|
||
// Закрываем модальное окно
|
||
showContactForm.value = false
|
||
|
||
// Сбрасываем форму
|
||
form.value = {
|
||
name: '',
|
||
email: '',
|
||
role: '',
|
||
message: '',
|
||
portfolio: ''
|
||
}
|
||
|
||
} else {
|
||
throw new Error(error || 'Ошибка отправки в Telegram');
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('Ошибка отправки формы:', error)
|
||
|
||
// Показываем уведомление об ошибке
|
||
if (error.message.includes('Telegram') || error.message.includes('сети')) {
|
||
toast.add({
|
||
title: 'Ошибка отправки 🌐',
|
||
description: 'Проблемы с соединением. Напишите нам напрямую в Telegram или на email',
|
||
icon: 'i-heroicons-exclamation-triangle',
|
||
color: 'red',
|
||
timeout: 7000
|
||
});
|
||
} else {
|
||
toast.add({
|
||
title: 'Ошибка ❌',
|
||
description: 'Не удалось отправить заявку. Попробуйте еще раз',
|
||
icon: 'i-heroicons-exclamation-triangle',
|
||
color: 'red',
|
||
timeout: 5000
|
||
});
|
||
}
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// Функция для прокрутки к вакансиям
|
||
const scrollToVacancies = () => {
|
||
nextTick(() => {
|
||
const vacanciesSection = document.getElementById('vacancies');
|
||
if (vacanciesSection) {
|
||
vacanciesSection.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
|
||
// Функция для открытия формы
|
||
const handleJoinTeam = () => {
|
||
showContactForm.value = true;
|
||
};
|
||
|
||
// SEO мета-теги
|
||
useSeoMeta({
|
||
title: 'Присоединиться к команде - ЯЛ АРБА',
|
||
description: 'Станьте частью команды, создающей цифровое-будущее через open-source создание SaaS сервисов. 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);
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
border: none;
|
||
font-family: inherit;
|
||
}
|
||
|
||
/* Стили для NuxtLink если используете */
|
||
.btn.btn-outline {
|
||
border: 1px solid var(--primary-500);
|
||
background: transparent;
|
||
color: var(--primary-500);
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.btn.btn-outline:hover {
|
||
background: var(--primary-500);
|
||
color: var(--text-inverse);
|
||
}
|
||
|
||
.hero-actions .btn {
|
||
pointer-events: auto !important;
|
||
}
|
||
</style> |