valitovgaziz
2941b14b38
- Moved contents of main_dc/yalarba/easySite/easySite/ up to easySite/ - Updated docker-compose.yml build context path - Deleted empty nested easySite/ directory
1088 lines
34 KiB
Vue
1088 lines
34 KiB
Vue
<template>
|
||
<div class="page-wrapper">
|
||
<!-- Хедер -->
|
||
<Header />
|
||
|
||
<!-- Основной контент -->
|
||
<main class="partnership-page">
|
||
<!-- Hero секция -->
|
||
<section class="partnership-hero">
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<h1 class="hero-title">Стать партнером</h1>
|
||
<p class="hero-subtitle">
|
||
Совместно развиваем бизнес и достигаем новых высот. Предлагаем взаимовыгодное сотрудничество для роста и успеха.
|
||
</p>
|
||
<div class="hero-actions">
|
||
<button @click="scrollToForm" class="btn btn-primary">
|
||
Стать партнером
|
||
</button>
|
||
<button @click="scrollToBenefits" class="btn btn-outline">
|
||
Узнать о преимуществах
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Преимущества партнерства -->
|
||
<section ref="benefitsSection" class="benefits-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Преимущества партнерства</h2>
|
||
<p class="section-subtitle">
|
||
Почему компании выбирают сотрудничество с нами
|
||
</p>
|
||
</div>
|
||
|
||
<div class="benefits-grid">
|
||
<div class="benefit-card">
|
||
<div class="benefit-icon">💰</div>
|
||
<h3 class="benefit-title">Выгодные условия</h3>
|
||
<p class="benefit-description">
|
||
Гибкая система комиссий и бонусов. Индивидуальный подход к каждому партнеру.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="benefit-card">
|
||
<div class="benefit-icon">🚀</div>
|
||
<h3 class="benefit-title">Быстрый старт</h3>
|
||
<p class="benefit-description">
|
||
Минимальные сроки подключения. Готовая инфраструктура и поддержка на всех этапах.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="benefit-card">
|
||
<div class="benefit-icon">🛡️</div>
|
||
<h3 class="benefit-title">Надежность</h3>
|
||
<p class="benefit-description">
|
||
Стабильные выплаты, юридическая поддержка и прозрачные условия сотрудничества.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="benefit-card">
|
||
<div class="benefit-icon">📈</div>
|
||
<h3 class="benefit-title">Рост бизнеса</h3>
|
||
<p class="benefit-description">
|
||
Совместные маркетинговые активности и программы для увеличения вашего дохода.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="benefit-card">
|
||
<div class="benefit-icon">🔧</div>
|
||
<h3 class="benefit-title">Техподдержка</h3>
|
||
<p class="benefit-description">
|
||
Круглосуточная техническая поддержка и консультации по всем вопросам.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="benefit-card">
|
||
<div class="benefit-icon">🌟</div>
|
||
<h3 class="benefit-title">Репутация</h3>
|
||
<p class="benefit-description">
|
||
Сотрудничество с надежной компанией усиливает доверие к вашему бизнесу.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Направления сотрудничества -->
|
||
<section class="cooperation-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Направления сотрудничества</h2>
|
||
<p class="section-subtitle">
|
||
Выберите наиболее подходящий формат партнерства
|
||
</p>
|
||
</div>
|
||
|
||
<div class="cooperation-tabs">
|
||
<div class="tabs-header">
|
||
<button
|
||
v-for="tab in tabs"
|
||
:key="tab.id"
|
||
@click="activeTab = tab.id"
|
||
:class="['tab-button', { 'active': activeTab === tab.id }]"
|
||
>
|
||
<span class="tab-icon">{{ tab.icon }}</span>
|
||
<span class="tab-text">{{ tab.title }}</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="tabs-content">
|
||
<div v-if="activeTab === 'referral'" class="tab-panel">
|
||
<div class="tab-content">
|
||
<div class="tab-info">
|
||
<h3 class="tab-title">Реферальная программа</h3>
|
||
<p class="tab-description">
|
||
Приводите клиентов и получайте вознаграждение за каждую успешную сделку.
|
||
Идеально для фрилансеров, маркетологов и компаний с существующей клиентской базой.
|
||
</p>
|
||
<ul class="tab-features">
|
||
<li>💸 До 20% от суммы каждой сделки</li>
|
||
<li>👥 Неограниченное количество рефералов</li>
|
||
<li>📊 Прозрачная статистика в личном кабинете</li>
|
||
<li>🔄 Регулярные выплаты 2 раза в месяц</li>
|
||
</ul>
|
||
</div>
|
||
<div class="tab-image">
|
||
<div class="image-placeholder">📊</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="activeTab === 'reseller'" class="tab-panel">
|
||
<div class="tab-content">
|
||
<div class="tab-info">
|
||
<h3 class="tab-title">Реселлерство</h3>
|
||
<p class="tab-description">
|
||
Продавайте наши услуги под своим брендом. Мы обеспечиваем техническую часть,
|
||
вы сосредотачиваетесь на продажах и клиентском сервисе.
|
||
</p>
|
||
<ul class="tab-features">
|
||
<li>🏷️ White-label решения под ваш бренд</li>
|
||
<li>💼 Готовые пакеты услуг для перепродажи</li>
|
||
<li>🎯 Обучение и материалы для продаж</li>
|
||
<li>📈 Скидки до 40% от розничной цены</li>
|
||
</ul>
|
||
</div>
|
||
<div class="tab-image">
|
||
<div class="image-placeholder">🏷️</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="activeTab === 'integration'" class="tab-panel">
|
||
<div class="tab-content">
|
||
<div class="tab-info">
|
||
<h3 class="tab-title">Техническая интеграция</h3>
|
||
<p class="tab-description">
|
||
Интегрируйте наши сервисы в ваши продукты и платформы.
|
||
Создавайте комплексные решения для ваших клиентов.
|
||
</p>
|
||
<ul class="tab-features">
|
||
<li>🔌 API и веб-хуки для интеграции</li>
|
||
<li>🛠️ Техническая поддержка разработки</li>
|
||
<li>📚 Документация и примеры кода</li>
|
||
<li>🤝 Совместные технические проекты</li>
|
||
</ul>
|
||
</div>
|
||
<div class="tab-image">
|
||
<div class="image-placeholder">🔌</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="activeTab === 'corporate'" class="tab-panel">
|
||
<div class="tab-content">
|
||
<div class="tab-info">
|
||
<h3 class="tab-title">Корпоративное партнерство</h3>
|
||
<p class="tab-description">
|
||
Стратегическое партнерство для крупных компаний.
|
||
Совместные проекты, эксклюзивные условия и долгосрочное сотрудничество.
|
||
</p>
|
||
<ul class="tab-features">
|
||
<li>🤝 Индивидуальные условия сотрудничества</li>
|
||
<li>🏢 Совместные маркетинговые кампании</li>
|
||
<li>📅 Долгосрочные контракты</li>
|
||
<li>🎯 Персональный менеджер</li>
|
||
</ul>
|
||
</div>
|
||
<div class="tab-image">
|
||
<div class="image-placeholder">🤝</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Процесс подключения -->
|
||
<section class="process-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Процесс подключения</h2>
|
||
<p class="section-subtitle">
|
||
Всего 4 простых шага до начала сотрудничества
|
||
</p>
|
||
</div>
|
||
|
||
<div class="process-steps">
|
||
<div class="process-step">
|
||
<div class="step-number">1</div>
|
||
<div class="step-content">
|
||
<h3 class="step-title">Заявка</h3>
|
||
<p class="step-description">
|
||
Заполните форму на этой странице или свяжитесь с нами любым удобным способом
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="process-step">
|
||
<div class="step-number">2</div>
|
||
<div class="step-content">
|
||
<h3 class="step-title">Консультация</h3>
|
||
<p class="step-description">
|
||
Наш менеджер свяжется с вами для обсуждения деталей и подбора оптимальных условий
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="process-step">
|
||
<div class="step-number">3</div>
|
||
<div class="step-content">
|
||
<h3 class="step-title">Договор</h3>
|
||
<p class="step-description">
|
||
Подписываем договор о сотрудничестве и предоставляем доступ ко всем материалам
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="process-step">
|
||
<div class="step-number">4</div>
|
||
<div class="step-content">
|
||
<h3 class="step-title">Старт</h3>
|
||
<p class="step-description">
|
||
Начинаем совместную работу и помогаем вам достигать первых результатов
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Форма заявки -->
|
||
<section ref="formSection" class="application-section">
|
||
<div class="container">
|
||
<div class="application-card">
|
||
<div class="application-header">
|
||
<h2 class="application-title">Стать партнером</h2>
|
||
<p class="application-subtitle">
|
||
Заполните заявку и наш менеджер свяжется с вами в течение 24 часов
|
||
</p>
|
||
</div>
|
||
|
||
<form @submit.prevent="submitApplication" class="application-form">
|
||
<div class="form-columns">
|
||
<div class="form-column">
|
||
<div class="form-group">
|
||
<label for="company" class="form-label">Название компании *</label>
|
||
<input
|
||
id="company"
|
||
v-model="application.company"
|
||
type="text"
|
||
class="form-input"
|
||
placeholder="ООО 'Ваша компания'"
|
||
required
|
||
>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="name" class="form-label">Контактное лицо *</label>
|
||
<input
|
||
id="name"
|
||
v-model="application.name"
|
||
type="text"
|
||
class="form-input"
|
||
placeholder="Иванов Иван Иванович"
|
||
required
|
||
>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="phone" class="form-label">Телефон *</label>
|
||
<input
|
||
id="phone"
|
||
v-model="application.phone"
|
||
type="tel"
|
||
class="form-input"
|
||
placeholder="+7 (999) 999-99-99"
|
||
required
|
||
>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="email" class="form-label">Email *</label>
|
||
<input
|
||
id="email"
|
||
v-model="application.email"
|
||
type="email"
|
||
class="form-input"
|
||
placeholder="partner@company.ru"
|
||
required
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-column">
|
||
<div class="form-group">
|
||
<label for="partnership-type" class="form-label">Тип партнерства *</label>
|
||
<select
|
||
id="partnership-type"
|
||
v-model="application.partnershipType"
|
||
class="form-select"
|
||
required
|
||
>
|
||
<option value="" disabled selected>Выберите тип сотрудничества</option>
|
||
<option value="referral">Реферальная программа</option>
|
||
<option value="reseller">Реселлерство</option>
|
||
<option value="integration">Техническая интеграция</option>
|
||
<option value="corporate">Корпоративное партнерство</option>
|
||
<option value="other">Другое</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="website" class="form-label">Сайт компании</label>
|
||
<input
|
||
id="website"
|
||
v-model="application.website"
|
||
type="url"
|
||
class="form-input"
|
||
placeholder="https://example.com"
|
||
>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="experience" class="form-label">Опыт в сфере</label>
|
||
<select
|
||
id="experience"
|
||
v-model="application.experience"
|
||
class="form-select"
|
||
>
|
||
<option value="" selected>Не указано</option>
|
||
<option value="none">Нет опыта</option>
|
||
<option value="1-3">1-3 года</option>
|
||
<option value="3-5">3-5 лет</option>
|
||
<option value="5+">Более 5 лет</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="volume" class="form-label">Планируемый объем</label>
|
||
<select
|
||
id="volume"
|
||
v-model="application.volume"
|
||
class="form-select"
|
||
>
|
||
<option value="" selected>Не указано</option>
|
||
<option value="small">До 10 клиентов в месяц</option>
|
||
<option value="medium">10-50 клиентов в месяц</option>
|
||
<option value="large">Более 50 клиентов в месяц</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group full-width">
|
||
<label for="message" class="form-label">Дополнительная информация</label>
|
||
<textarea
|
||
id="message"
|
||
v-model="application.message"
|
||
class="form-input form-textarea"
|
||
placeholder="Расскажите о вашей компании, целях сотрудничества, ожиданиях..."
|
||
rows="4"
|
||
></textarea>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary submit-button" :disabled="loading">
|
||
<span v-if="loading">Отправка...</span>
|
||
<span v-else>Отправить заявку</span>
|
||
</button>
|
||
<p class="form-note">
|
||
Нажимая кнопку, вы соглашаетесь с обработкой персональных данных
|
||
</p>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FAQ -->
|
||
<section class="faq-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Частые вопросы</h2>
|
||
<p class="section-subtitle">
|
||
Ответы на популярные вопросы о партнерстве
|
||
</p>
|
||
</div>
|
||
|
||
<div class="faq-grid">
|
||
<div class="faq-item">
|
||
<h3 class="faq-question">Как быстро начинаются выплаты?</h3>
|
||
<p class="faq-answer">
|
||
Выплаты производятся 2 раза в месяц - 15 и 30 числа. Первые выплаты поступают после завершения первого месяца сотрудничества.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<h3 class="faq-question">Нужны ли специальные знания?</h3>
|
||
<p class="faq-answer">
|
||
Мы предоставляем все необходимые материалы и обучение. Специальные знания не требуются - всему научим.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<h3 class="faq-question">Есть ли минимальные объемы?</h3>
|
||
<p class="faq-answer">
|
||
Для большинства программ минимальных объемов нет. Вы можете начать с любого количества клиентов и постепенно наращивать объемы.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<h3 class="faq-question">Как происходит подключение?</h3>
|
||
<p class="faq-answer">
|
||
После одобрения заявки мы подписываем договор, предоставляем доступ к партнерскому кабинету и всем необходимым материалам.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Футер -->
|
||
<Footer />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import Header from '~/components/layout/Header.vue'
|
||
import Footer from '~/components/layout/Footer.vue'
|
||
|
||
definePageMeta({
|
||
title: 'Стать партнером - ООО "ИКЦ ЯЛ АРБА"'
|
||
})
|
||
|
||
// Рефы для скролла
|
||
const benefitsSection = ref<HTMLElement>()
|
||
const formSection = ref<HTMLElement>()
|
||
|
||
// Состояние табов
|
||
const activeTab = ref('referral')
|
||
|
||
const tabs = [
|
||
{ id: 'referral', title: 'Реферальная программа', icon: '💰' },
|
||
{ id: 'reseller', title: 'Реселлерство', icon: '🏷️' },
|
||
{ id: 'integration', title: 'Техническая интеграция', icon: '🔌' },
|
||
{ id: 'corporate', title: 'Корпоративное партнерство', icon: '🤝' }
|
||
]
|
||
|
||
// Данные формы
|
||
const application = ref({
|
||
company: '',
|
||
name: '',
|
||
phone: '',
|
||
email: '',
|
||
partnershipType: '',
|
||
website: '',
|
||
experience: '',
|
||
volume: '',
|
||
message: ''
|
||
})
|
||
|
||
const loading = ref(false)
|
||
|
||
// Функции скролла
|
||
const scrollToForm = () => {
|
||
formSection.value?.scrollIntoView({ behavior: 'smooth' })
|
||
}
|
||
|
||
const scrollToBenefits = () => {
|
||
benefitsSection.value?.scrollIntoView({ behavior: 'smooth' })
|
||
}
|
||
|
||
// Функция отправки заявки
|
||
const submitApplication = async () => {
|
||
loading.value = true
|
||
|
||
try {
|
||
const { sendMessageToTelegram } = useTelegram()
|
||
|
||
const telegramMessage = `
|
||
🤝 <b>НОВАЯ ЗАЯВКА НА ПАРТНЕРСТВО</b>
|
||
|
||
🏢 <b>Компания:</b> ${application.value.company}
|
||
👤 <b>Контактное лицо:</b> ${application.value.name}
|
||
📞 <b>Телефон:</b> ${application.value.phone}
|
||
📧 <b>Email:</b> ${application.value.email}
|
||
|
||
💼 <b>Тип партнерства:</b> ${getPartnershipTypeText(application.value.partnershipType)}
|
||
🌐 <b>Сайт:</b> ${application.value.website || 'Не указан'}
|
||
📊 <b>Опыт:</b> ${getExperienceText(application.value.experience)}
|
||
📈 <b>Планируемый объем:</b> ${getVolumeText(application.value.volume)}
|
||
|
||
💬 <b>Дополнительная информация:</b>
|
||
${application.value.message || 'Не указано'}
|
||
|
||
⏰ <b>Время отправки:</b> ${new Date().toLocaleString('ru-RU')}
|
||
`.trim()
|
||
|
||
const { success, error } = await sendMessageToTelegram(telegramMessage)
|
||
|
||
if (success) {
|
||
// Сброс формы
|
||
application.value = {
|
||
company: '',
|
||
name: '',
|
||
phone: '',
|
||
email: '',
|
||
partnershipType: '',
|
||
website: '',
|
||
experience: '',
|
||
volume: '',
|
||
message: ''
|
||
}
|
||
|
||
showNotification('Заявка успешно отправлена! Наш менеджер свяжется с вами в течение 24 часов.', 'success')
|
||
} else {
|
||
throw new Error(error || 'Неизвестная ошибка при отправке')
|
||
}
|
||
} catch (error) {
|
||
console.error('Ошибка отправки заявки:', error)
|
||
showNotification('Произошла ошибка при отправке заявки. Пожалуйста, попробуйте еще раз.', 'error')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// Вспомогательные функции
|
||
const getPartnershipTypeText = (type: string) => {
|
||
const types: { [key: string]: string } = {
|
||
referral: 'Реферальная программа',
|
||
reseller: 'Реселлерство',
|
||
integration: 'Техническая интеграция',
|
||
corporate: 'Корпоративное партнерство',
|
||
other: 'Другое'
|
||
}
|
||
return types[type] || 'Не указано'
|
||
}
|
||
|
||
const getExperienceText = (experience: string) => {
|
||
const experiences: { [key: string]: string } = {
|
||
none: 'Нет опыта',
|
||
'1-3': '1-3 года',
|
||
'3-5': '3-5 лет',
|
||
'5+': 'Более 5 лет'
|
||
}
|
||
return experiences[experience] || 'Не указано'
|
||
}
|
||
|
||
const getVolumeText = (volume: string) => {
|
||
const volumes: { [key: string]: string } = {
|
||
small: 'До 10 клиентов в месяц',
|
||
medium: '10-50 клиентов в месяц',
|
||
large: 'Более 50 клиентов в месяц'
|
||
}
|
||
return volumes[volume] || 'Не указано'
|
||
}
|
||
|
||
const showNotification = (message: string, type: 'success' | 'error' = 'success') => {
|
||
if (type === 'success') {
|
||
alert(`✅ ${message}`)
|
||
} else {
|
||
alert(`❌ ${message}`)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page-wrapper {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.partnership-page {
|
||
flex: 1;
|
||
}
|
||
|
||
/* Hero секция */
|
||
.partnership-hero {
|
||
background: var(--hero-gradient);
|
||
color: white;
|
||
position: relative;
|
||
overflow: hidden;
|
||
padding: 5rem 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.partnership-hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: var(--hero-pattern);
|
||
opacity: 0.1;
|
||
}
|
||
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 10;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.hero-title {
|
||
font-family: var(--font-heading);
|
||
font-size: var(--text-5xl);
|
||
font-weight: var(--font-bold);
|
||
line-height: var(--leading-tight);
|
||
margin-bottom: var(--space-lg);
|
||
color: white;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-family: var(--font-accent);
|
||
font-size: var(--text-xl);
|
||
font-weight: var(--font-light);
|
||
line-height: var(--leading-relaxed);
|
||
opacity: 0.9;
|
||
color: white;
|
||
margin-bottom: var(--space-2xl);
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
gap: var(--space-lg);
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* Секции */
|
||
.benefits-section,
|
||
.cooperation-section,
|
||
.process-section,
|
||
.application-section,
|
||
.faq-section {
|
||
padding: var(--space-2xl) 0;
|
||
}
|
||
|
||
.cooperation-section {
|
||
background: var(--bg-secondary);
|
||
}
|
||
|
||
.faq-section {
|
||
background: var(--bg-secondary);
|
||
}
|
||
|
||
.section-header {
|
||
text-align: center;
|
||
margin-bottom: var(--space-2xl);
|
||
}
|
||
|
||
.section-title {
|
||
font-family: var(--font-heading);
|
||
font-size: var(--text-3xl);
|
||
font-weight: var(--font-semibold);
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
.section-subtitle {
|
||
font-size: var(--text-lg);
|
||
color: var(--text-secondary);
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* Преимущества */
|
||
.benefits-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: var(--space-xl);
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.benefit-card {
|
||
background: var(--bg-primary);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-2xl);
|
||
text-align: center;
|
||
border: 1px solid var(--border-light);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.benefit-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.benefit-icon {
|
||
font-size: 3rem;
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.benefit-title {
|
||
font-family: var(--font-heading);
|
||
font-size: var(--text-xl);
|
||
font-weight: var(--font-semibold);
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.benefit-description {
|
||
color: var(--text-secondary);
|
||
line-height: var(--leading-relaxed);
|
||
}
|
||
|
||
/* Табы сотрудничества */
|
||
.cooperation-tabs {
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.tabs-header {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: var(--space-sm);
|
||
margin-bottom: var(--space-2xl);
|
||
}
|
||
|
||
.tab-button {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
padding: var(--space-lg);
|
||
background: var(--bg-primary);
|
||
border: 1px solid var(--border-light);
|
||
border-radius: var(--radius-lg);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
text-align: center;
|
||
}
|
||
|
||
.tab-button:hover {
|
||
border-color: var(--primary-300);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.tab-button.active {
|
||
background: var(--primary-50);
|
||
border-color: var(--primary-500);
|
||
color: var(--primary-700);
|
||
}
|
||
|
||
.tab-icon {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.tab-text {
|
||
font-weight: var(--font-semibold);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.tab-panel {
|
||
background: var(--bg-primary);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-2xl);
|
||
border: 1px solid var(--border-light);
|
||
}
|
||
|
||
.tab-content {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr;
|
||
gap: var(--space-2xl);
|
||
align-items: center;
|
||
}
|
||
|
||
.tab-title {
|
||
font-family: var(--font-heading);
|
||
font-size: var(--text-2xl);
|
||
font-weight: var(--font-semibold);
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.tab-description {
|
||
color: var(--text-secondary);
|
||
line-height: var(--leading-relaxed);
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.tab-features {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.tab-features li {
|
||
padding: var(--space-xs) 0;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.tab-image {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.image-placeholder {
|
||
font-size: 8rem;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* Процесс */
|
||
.process-steps {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: var(--space-xl);
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.process-step {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: var(--space-lg);
|
||
padding: var(--space-xl);
|
||
background: var(--bg-primary);
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--border-light);
|
||
}
|
||
|
||
.step-number {
|
||
width: 3rem;
|
||
height: 3rem;
|
||
background: var(--primary-500);
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: var(--font-bold);
|
||
font-size: var(--text-lg);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.step-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.step-title {
|
||
font-family: var(--font-heading);
|
||
font-size: var(--text-lg);
|
||
font-weight: var(--font-semibold);
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-xs);
|
||
}
|
||
|
||
.step-description {
|
||
color: var(--text-secondary);
|
||
line-height: var(--leading-relaxed);
|
||
margin: 0;
|
||
}
|
||
|
||
/* Форма заявки */
|
||
.application-card {
|
||
background: var(--bg-primary);
|
||
border-radius: var(--radius-xl);
|
||
box-shadow: var(--shadow-lg);
|
||
border: 1px solid var(--border-light);
|
||
padding: var(--space-2xl);
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.application-header {
|
||
text-align: center;
|
||
margin-bottom: var(--space-2xl);
|
||
}
|
||
|
||
.application-title {
|
||
font-family: var(--font-heading);
|
||
font-size: var(--text-3xl);
|
||
font-weight: var(--font-semibold);
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
.application-subtitle {
|
||
color: var(--text-secondary);
|
||
font-size: var(--text-lg);
|
||
}
|
||
|
||
.application-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-xl);
|
||
}
|
||
|
||
.form-columns {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--space-xl);
|
||
}
|
||
|
||
.form-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-xs);
|
||
}
|
||
|
||
.form-group.full-width {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.form-label {
|
||
font-weight: var(--font-medium);
|
||
color: var(--text-secondary);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.form-input,
|
||
.form-select {
|
||
padding: var(--space-sm) var(--space-md);
|
||
border: 1px solid var(--border-medium);
|
||
border-radius: var(--radius-md);
|
||
font-size: var(--text-base);
|
||
transition: all 0.2s ease;
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
font-family: var(--font-primary);
|
||
}
|
||
|
||
.form-input:focus,
|
||
.form-select:focus {
|
||
outline: none;
|
||
border-color: var(--primary-500);
|
||
box-shadow: 0 0 0 3px rgb(14 165 233 / 0.1);
|
||
}
|
||
|
||
.form-textarea {
|
||
resize: vertical;
|
||
min-height: 100px;
|
||
font-family: var(--font-primary);
|
||
}
|
||
|
||
.form-actions {
|
||
text-align: center;
|
||
}
|
||
|
||
.submit-button {
|
||
padding: var(--space-md) var(--space-2xl);
|
||
font-size: var(--text-lg);
|
||
font-weight: var(--font-semibold);
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
.form-note {
|
||
color: var(--text-tertiary);
|
||
font-size: var(--text-sm);
|
||
margin: 0;
|
||
}
|
||
|
||
/* FAQ */
|
||
.faq-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: var(--space-xl);
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.faq-item {
|
||
background: var(--bg-primary);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-xl);
|
||
border: 1px solid var(--border-light);
|
||
}
|
||
|
||
.faq-question {
|
||
font-family: var(--font-primary);
|
||
font-size: var(--text-lg);
|
||
font-weight: var(--font-semibold);
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.faq-answer {
|
||
color: var(--text-secondary);
|
||
line-height: var(--leading-relaxed);
|
||
margin: 0;
|
||
}
|
||
|
||
/* Адаптивность */
|
||
@media (max-width: 1024px) {
|
||
.form-columns {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.tab-content {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
}
|
||
|
||
.tabs-header {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.partnership-hero {
|
||
padding: 3rem 0;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: var(--text-3xl);
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: var(--text-lg);
|
||
}
|
||
|
||
.hero-actions {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.benefits-grid,
|
||
.process-steps,
|
||
.faq-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.tabs-header {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.application-card {
|
||
padding: var(--space-xl);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.partnership-hero {
|
||
padding: 2rem 0;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: var(--text-2xl);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: var(--text-2xl);
|
||
}
|
||
|
||
.application-card {
|
||
padding: var(--space-lg);
|
||
}
|
||
|
||
.process-step {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.step-number {
|
||
align-self: center;
|
||
}
|
||
}
|
||
</style> |