modified: main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue
modified: main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue new file: main_dc/yalarba/easySite/easySite/app/components/layout/PlanBadge.vue new file: main_dc/yalarba/easySite/easySite/app/components/layout/pricing.vue new file: main_dc/yalarba/easySite/easySite/app/components/pricing/FAQSection.vue new file: main_dc/yalarba/easySite/easySite/app/components/pricing/PricingSection.vue new file: main_dc/yalarba/easySite/easySite/app/pages/rules/index.vue add plane into footer header as a bage and link, add page for tarif palanes
This commit is contained in:
@@ -92,7 +92,7 @@
|
||||
<NuxtLink to="/objects" class="footer-link">🔍 Все объекты</NuxtLink>
|
||||
<NuxtLink to="/objects/create" class="footer-link">➕ Добавить объект</NuxtLink>
|
||||
<a href="#" class="footer-link">❓ Помощь</a>
|
||||
<a href="#" class="footer-link">📋 Правила использования</a>
|
||||
<a href="/rules" class="footer-link">📋 Тарифные планы</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -10,9 +10,15 @@
|
||||
<span class="logo-name">EasySite102</span>
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Гамбургер меню для всех устройств -->
|
||||
<div class="hamburger-nav">
|
||||
<HamburgerMenu />
|
||||
<div class="header-paln-menu">
|
||||
<div class="header-plan">
|
||||
<!-- Трифы -->
|
||||
<Plan />
|
||||
</div>
|
||||
<!-- Гамбургер меню для всех устройств -->
|
||||
<div class="hamburger-nav">
|
||||
<HamburgerMenu />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -21,6 +27,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Plan from '~/components/layout/PlanBadge.vue'
|
||||
import HamburgerMenu from '~/components/layout/HamburgerMenu.vue'
|
||||
</script>
|
||||
|
||||
@@ -82,6 +89,15 @@ import HamburgerMenu from '~/components/layout/HamburgerMenu.vue'
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.header-paln-menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.header-plan {
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
|
||||
.hamburger-nav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
<!-- components/PlanBadge.vue -->
|
||||
<template>
|
||||
<div class="plan-badge" :class="badgeClass">
|
||||
<span class="text-sm font-semibold">{{ planLabel }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
plan: {
|
||||
type: String,
|
||||
default: 'start',
|
||||
validator: (value) => ['start', 'pro', 'vip'].includes(value)
|
||||
}
|
||||
})
|
||||
|
||||
const planLabels = {
|
||||
start: 'Старт',
|
||||
pro: 'Профи',
|
||||
vip: 'VIP'
|
||||
}
|
||||
|
||||
const planColors = {
|
||||
start: 'bg-green-100 text-green-800 border-green-200',
|
||||
pro: 'bg-blue-100 text-blue-800 border-blue-200',
|
||||
vip: 'bg-purple-100 text-purple-800 border-purple-200'
|
||||
}
|
||||
|
||||
const planLabel = computed(() => planLabels[props.plan])
|
||||
const badgeClass = computed(() => `inline-flex items-center px-3 py-1 rounded-full border ${planColors[props.plan]}`)
|
||||
</script>
|
||||
@@ -0,0 +1,282 @@
|
||||
<!-- components/pricing/PricingSection.vue -->
|
||||
<template>
|
||||
<section class="pricing-section">
|
||||
<div class="container">
|
||||
<div class="pricing-header">
|
||||
<h1 class="text-hero text-center">Тарифы для вашего бизнеса</h1>
|
||||
<p class="lead text-center">Выберите оптимальное решение для продвижения ваших туристических услуг</p>
|
||||
</div>
|
||||
|
||||
<div class="pricing-grid">
|
||||
<!-- Тариф Старт -->
|
||||
<div class="pricing-card">
|
||||
<div class="pricing-card__header">
|
||||
<h3 class="h3">Старт</h3>
|
||||
<div class="pricing-card__price">
|
||||
990 ₽<span class="pricing-card__period">/месяц</span>
|
||||
</div>
|
||||
<p class="small">Идеально для начинающих</p>
|
||||
</div>
|
||||
|
||||
<div class="pricing-features">
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>1 объект/услуга</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Базовый шаблон сайта</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Система бронирования</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Базовая SEO-оптимизация</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Статистика просмотров</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Поддержка по email</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pricing-card__footer">
|
||||
<button class="btn btn-outline btn-block">Начать 14-дневный пробный период</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Тариф Профессионал (рекомендуемый) -->
|
||||
<div class="pricing-card featured">
|
||||
<div class="pricing-card__badge">Самое популярное</div>
|
||||
<div class="pricing-card__header">
|
||||
<h3 class="h3">Профессионал</h3>
|
||||
<div class="pricing-card__price">
|
||||
2 990 ₽<span class="pricing-card__period">/месяц</span>
|
||||
</div>
|
||||
<p class="small">Для растущего бизнеса</p>
|
||||
</div>
|
||||
|
||||
<div class="pricing-features">
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>До 5 объектов/услуг</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Расширенные шаблоны</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Приоритетная SEO-оптимизация</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Интеграция с календарями</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Email-рассылки для клиентов</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Подробная аналитика</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Приоритетная поддержка</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pricing-card__footer">
|
||||
<button class="btn btn-primary btn-block">Начать 14-дневный пробный период</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Тариф Бизнес -->
|
||||
<div class="pricing-card">
|
||||
<div class="pricing-card__header">
|
||||
<h3 class="h3">Бизнес</h3>
|
||||
<div class="pricing-card__price">
|
||||
7 990 ₽<span class="pricing-card__period">/месяц</span>
|
||||
</div>
|
||||
<p class="small">Для крупных компаний</p>
|
||||
</div>
|
||||
|
||||
<div class="pricing-features">
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Неограниченное количество объектов</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Кастомизация дизайна</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Продвинутое SEO + контекстная реклама</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Интеграция с CRM</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>API доступ</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Личный менеджер</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Поддержка 24/7</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pricing-card__footer">
|
||||
<button class="btn btn-outline btn-block">Начать 14-дневный пробный период</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Дополнительная информация -->
|
||||
<div class="pricing-info text-center">
|
||||
<p class="small">Все тарифы включают 14-дневный пробный период. Отмена в любой момент.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Логика для переключения тарифов может быть добавлена здесь
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pricing-section {
|
||||
padding: var(--space-2xl) 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.pricing-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.pricing-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pricing-card {
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-2xl);
|
||||
border: 2px solid var(--border-light);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pricing-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.pricing-card.featured {
|
||||
border-color: var(--primary-500);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.pricing-card.featured:hover {
|
||||
transform: scale(1.05) translateY(-4px);
|
||||
}
|
||||
|
||||
.pricing-card__badge {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--primary-500);
|
||||
color: var(--text-inverse);
|
||||
padding: var(--space-xs) var(--space-lg);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
.pricing-card__header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.pricing-card__price {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--text-primary);
|
||||
margin: var(--space-md) 0;
|
||||
}
|
||||
|
||||
.pricing-card__period {
|
||||
color: var(--text-tertiary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.pricing-features {
|
||||
flex-grow: 1;
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.pricing-feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.pricing-feature__icon {
|
||||
color: var(--success-500);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pricing-card__footer {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pricing-info {
|
||||
margin-top: var(--space-xl);
|
||||
padding-top: var(--space-lg);
|
||||
border-top: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
/* Адаптивность */
|
||||
@media (max-width: 768px) {
|
||||
.pricing-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.pricing-card.featured {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.pricing-card.featured:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,90 @@
|
||||
<!-- components/pricing/FAQSection.vue -->
|
||||
<template>
|
||||
<section class="faq-section">
|
||||
<div class="container">
|
||||
<div class="faq-header">
|
||||
<h2 class="h2 text-center">Часто задаваемые вопросы</h2>
|
||||
</div>
|
||||
|
||||
<div class="faq-grid">
|
||||
<div class="faq-item">
|
||||
<h4 class="h4">Можно ли изменить тариф позже?</h4>
|
||||
<p>Да, вы можете перейти на другой тариф в любой момент. Изменения вступят в силу со следующего платежного периода.</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<h4 class="h4">Что входит в пробный период?</h4>
|
||||
<p>14-дневный пробный период включает полный доступ ко всем функциям выбранного тарифа. Никаких платежей не требуется.</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<h4 class="h4">Есть ли ограничения по трафику?</h4>
|
||||
<p>Нет, все тарифы включают неограниченный трафик. Мы обеспечиваем стабильную работу ваших сайтов при любой нагрузке.</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<h4 class="h4">Предоставляете ли вы домены?</h4>
|
||||
<p>Да, мы можем помочь с регистрацией домена или подключением существующего. Домены оплачиваются отдельно.</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<h4 class="h4">Как происходит перенос существующих сайтов?</h4>
|
||||
<p>Наша команда поможет бесплатно перенести ваши существующие сайты и данные на нашу платформу.</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<h4 class="h4">Есть ли скидки при годовой оплате?</h4>
|
||||
<p>Да, при годовой оплате мы предоставляем скидку 20% на любой тариф.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Логика для аккордеона может быть добавлена здесь
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.faq-section {
|
||||
padding: var(--space-2xl) 0;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.faq-header {
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.faq-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
background: var(--bg-secondary);
|
||||
padding: var(--space-lg);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.faq-item h4 {
|
||||
color: var(--primary-600);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.faq-item p {
|
||||
color: var(--text-secondary);
|
||||
line-height: var(--leading-relaxed);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.faq-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,282 @@
|
||||
<!-- components/pricing/PricingSection.vue -->
|
||||
<template>
|
||||
<section class="pricing-section">
|
||||
<div class="container">
|
||||
<div class="pricing-header">
|
||||
<h1 class="text-hero text-center">Тарифы для вашего бизнеса</h1>
|
||||
<p class="lead text-center">Выберите оптимальное решение для продвижения ваших туристических услуг</p>
|
||||
</div>
|
||||
|
||||
<div class="pricing-grid">
|
||||
<!-- Тариф Старт -->
|
||||
<div class="pricing-card">
|
||||
<div class="pricing-card__header">
|
||||
<h3 class="h3">Старт</h3>
|
||||
<div class="pricing-card__price">
|
||||
990 ₽<span class="pricing-card__period">/месяц</span>
|
||||
</div>
|
||||
<p class="small">Идеально для начинающих</p>
|
||||
</div>
|
||||
|
||||
<div class="pricing-features">
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>1 объект/услуга</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Базовый шаблон сайта</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Система бронирования</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Базовая SEO-оптимизация</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Статистика просмотров</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Поддержка по email</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pricing-card__footer">
|
||||
<button class="btn btn-outline btn-block">Начать 14-дневный пробный период</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Тариф Профессионал (рекомендуемый) -->
|
||||
<div class="pricing-card featured">
|
||||
<div class="pricing-card__badge">Самое популярное</div>
|
||||
<div class="pricing-card__header">
|
||||
<h3 class="h3">Профессионал</h3>
|
||||
<div class="pricing-card__price">
|
||||
2 990 ₽<span class="pricing-card__period">/месяц</span>
|
||||
</div>
|
||||
<p class="small">Для растущего бизнеса</p>
|
||||
</div>
|
||||
|
||||
<div class="pricing-features">
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>До 5 объектов/услуг</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Расширенные шаблоны</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Приоритетная SEO-оптимизация</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Интеграция с календарями</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Email-рассылки для клиентов</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Подробная аналитика</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Приоритетная поддержка</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pricing-card__footer">
|
||||
<button class="btn btn-primary btn-block">Начать 14-дневный пробный период</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Тариф Бизнес -->
|
||||
<div class="pricing-card">
|
||||
<div class="pricing-card__header">
|
||||
<h3 class="h3">Бизнес</h3>
|
||||
<div class="pricing-card__price">
|
||||
7 990 ₽<span class="pricing-card__period">/месяц</span>
|
||||
</div>
|
||||
<p class="small">Для крупных компаний</p>
|
||||
</div>
|
||||
|
||||
<div class="pricing-features">
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Неограниченное количество объектов</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Кастомизация дизайна</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Продвинутое SEO + контекстная реклама</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Интеграция с CRM</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>API доступ</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Личный менеджер</span>
|
||||
</div>
|
||||
<div class="pricing-feature">
|
||||
<span class="pricing-feature__icon">✓</span>
|
||||
<span>Поддержка 24/7</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pricing-card__footer">
|
||||
<button class="btn btn-outline btn-block">Начать 14-дневный пробный период</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Дополнительная информация -->
|
||||
<div class="pricing-info text-center">
|
||||
<p class="small">Все тарифы включают 14-дневный пробный период. Отмена в любой момент.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Логика для переключения тарифов может быть добавлена здесь
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pricing-section {
|
||||
padding: var(--space-2xl) 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.pricing-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.pricing-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pricing-card {
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-2xl);
|
||||
border: 2px solid var(--border-light);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pricing-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.pricing-card.featured {
|
||||
border-color: var(--primary-500);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.pricing-card.featured:hover {
|
||||
transform: scale(1.05) translateY(-4px);
|
||||
}
|
||||
|
||||
.pricing-card__badge {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--primary-500);
|
||||
color: var(--text-inverse);
|
||||
padding: var(--space-xs) var(--space-lg);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
.pricing-card__header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.pricing-card__price {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--text-primary);
|
||||
margin: var(--space-md) 0;
|
||||
}
|
||||
|
||||
.pricing-card__period {
|
||||
color: var(--text-tertiary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.pricing-features {
|
||||
flex-grow: 1;
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.pricing-feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.pricing-feature__icon {
|
||||
color: var(--success-500);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pricing-card__footer {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pricing-info {
|
||||
margin-top: var(--space-xl);
|
||||
padding-top: var(--space-lg);
|
||||
border-top: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
/* Адаптивность */
|
||||
@media (max-width: 768px) {
|
||||
.pricing-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.pricing-card.featured {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.pricing-card.featured:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!-- pages/pricing.vue -->
|
||||
<template>
|
||||
<div>
|
||||
<Header />
|
||||
<PricingSection />
|
||||
<FAQSection />
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Импортируем компоненты
|
||||
import Header from '~/components/layout/Header.vue'
|
||||
import Footer from '~/components/layout/Footer.vue'
|
||||
import PricingSection from '~/components/pricing/PricingSection.vue'
|
||||
import FAQSection from '~/components/pricing/FAQSection.vue'
|
||||
|
||||
// SEO мета-теги
|
||||
useSeoMeta({
|
||||
title: 'Тарифы - TravelPlatform для туристического бизнеса',
|
||||
description: 'Выберите подходящий тариф для продвижения ваших туристических услуг. Создавайте сайты для отелей, экскурсий, туров и получайте клиентов.'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
a:hover,
|
||||
a:visited,
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
color: var(--text-primary)
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user