modified: main_dc/yalarba/easySite/easySite/app/assets/css/travel.css

modified:   main_dc/yalarba/easySite/easySite/app/components/layout/Careers.vue
fix bag with non working button in head of vacations page easysite102.ru

main_dc/yalarba/easySite/easySite/app/assets/css/travel.css

@@ -20,6 +20,7 @@
   bottom: 0;
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="%230ea5e9" points="0,1000 1000,0 1000,1000"/></svg>');
   opacity: 0.1;
+  z-index: -1;
 }
 
 /* Карточки туров */

main_dc/yalarba/easySite/easySite/app/components/layout/Careers.vue

@@ -12,12 +12,12 @@
                         Создаем digital-будущее вместе через open-source
                     </p>
                     <div class="hero-actions">
-                        <button class="btn btn-primary" @click="showContactForm = true">
+                        <NuxtLink class="btn btn-primary" @click="handleJoinTeam()">
                             Присоединиться к команде
-                        </button>
+                        </NuxtLink>
-                        <a href="#vacancies" class="btn btn-outline">
+                        <NuxtLink to="#vacancies" class="btn btn-outline">
                             Смотреть вакансии
-                        </a>
+                        </NuxtLink>
                     </div>
                 </div>
             </div>
@@ -60,7 +60,7 @@
             <div class="container">
                 <h2 class="section-title">👥 Кого мы ищем:</h2>
 
-                <div class="vacancies-grid">
+                <div id="vacancies" class="vacancies-grid">
                     <!-- Frontend -->
                     <div class="vacancy-card">
                         <div class="vacancy-header">
@@ -430,8 +430,9 @@
             </div>
         </section>
 
+        <div id="contact"></div>
         <!-- Модальное окно контактов -->
-        <div v-if="showContactForm" class="modal-overlay" @click="showContactForm = false">
+        <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>
 
@@ -507,7 +508,7 @@
 const { sendMessageToTelegram } = useTelegram();
 const showContactForm = ref(false)
 const loading = ref(false)
-const toast = useToast() 
+const toast = useToast()
 const form = ref({
     name: '',
     email: '',
@@ -521,7 +522,7 @@ const form = ref({
 const formatTelegramMessage = (formData) => {
     const roleLabels = {
         'frontend': 'Frontend Developer',
-        'backend': 'Backend Developer', 
+        'backend': 'Backend Developer',
         'analytics': 'Data Analyst',
         'designer': 'Product Designer',
         'sales': 'Sales & Strategy',
@@ -530,14 +531,14 @@ const formatTelegramMessage = (formData) => {
         'smm': 'SMM Specialist',
         'copywriter': 'Копирайтер',
         'seo-copy': 'SEO + Копирайтинг',
-        'smm-copy': 'SMM + Копирайтинг', 
+        '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}
@@ -559,7 +560,7 @@ const submitForm = async () => {
     try {
         // Форматируем сообщение для Telegram
         const telegramMessage = formatTelegramMessage(form.value);
-        
+
         // Отправляем в Telegram
         const { success, error } = await sendMessageToTelegram(telegramMessage);
 
@@ -575,23 +576,23 @@ const submitForm = async () => {
 
             // Закрываем модальное окно
             showContactForm.value = false
-            
+
             // Сбрасываем форму
-            form.value = { 
+            form.value = {
-                name: '', 
+                name: '',
-                email: '', 
+                email: '',
-                role: '', 
+                role: '',
-                message: '', 
+                message: '',
-                portfolio: '' 
+                portfolio: ''
             }
-            
+
         } else {
             throw new Error(error || 'Ошибка отправки в Telegram');
         }
-        
+
     } catch (error) {
         console.error('Ошибка отправки формы:', error)
-        
+
         // Показываем уведомление об ошибке
         if (error.message.includes('Telegram') || error.message.includes('сети')) {
             toast.add({
@@ -615,6 +616,25 @@ const submitForm = async () => {
     }
 }
 
+// Функция для прокрутки к вакансиям
+const scrollToVacancies = () => {
+    nextTick(() => {
+        const vacanciesSection = document.getElementById('vacancies');
+        if (vacanciesSection) {
+            vacanciesSection.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+    });
+};
+
+
+// Функция для открытия формы
+const handleJoinTeam = () => {
+    showContactForm.value = true;
+};
+
 // SEO мета-теги
 useSeoMeta({
     title: 'Присоединиться к команде - ЯЛ АРБА',
@@ -622,6 +642,8 @@ useSeoMeta({
     ogTitle: 'Вакансии в стартап ЯЛ АРБА',
     ogDescription: 'Ищем тимейтов для роста и прорыва. Создаем будущее вместе.'
 })
+
+
 </script>
 
 <style scoped>
@@ -1300,4 +1322,31 @@ useSeoMeta({
         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>