From 2b0b19e5158d55476b8596d6daaa3c310990b2e9 Mon Sep 17 00:00:00 2001
From: valitovgaziz <valitovgaziz@yandex.ru>
Date: Sun, 2 Nov 2025 05:11:08 +0500
Subject: [PATCH] 	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

---
 .../easySite/app/components/layout/Footer.vue |   2 +-
 .../easySite/app/components/layout/Header.vue |  22 +-
 .../app/components/layout/PlanBadge.vue       |  31 ++
 .../app/components/layout/pricing.vue         | 282 ++++++++++++++++++
 .../app/components/pricing/FAQSection.vue     |  90 ++++++
 .../app/components/pricing/PricingSection.vue | 282 ++++++++++++++++++
 .../easySite/app/pages/rules/index.vue        |  32 ++
 7 files changed, 737 insertions(+), 4 deletions(-)
 create mode 100644 main_dc/yalarba/easySite/easySite/app/components/layout/PlanBadge.vue
 create mode 100644 main_dc/yalarba/easySite/easySite/app/components/layout/pricing.vue
 create mode 100644 main_dc/yalarba/easySite/easySite/app/components/pricing/FAQSection.vue
 create mode 100644 main_dc/yalarba/easySite/easySite/app/components/pricing/PricingSection.vue
 create mode 100644 main_dc/yalarba/easySite/easySite/app/pages/rules/index.vue

diff --git a/main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue b/main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue
index 9a75d8e..d48b885 100644
--- a/main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue
+++ b/main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue
@@ -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>
 
diff --git a/main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue b/main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue
index c3e556c..a368472 100644
--- a/main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue
+++ b/main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue
@@ -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;
 }
diff --git a/main_dc/yalarba/easySite/easySite/app/components/layout/PlanBadge.vue b/main_dc/yalarba/easySite/easySite/app/components/layout/PlanBadge.vue
new file mode 100644
index 0000000..380f322
--- /dev/null
+++ b/main_dc/yalarba/easySite/easySite/app/components/layout/PlanBadge.vue
@@ -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>
\ No newline at end of file
diff --git a/main_dc/yalarba/easySite/easySite/app/components/layout/pricing.vue b/main_dc/yalarba/easySite/easySite/app/components/layout/pricing.vue
new file mode 100644
index 0000000..49995c1
--- /dev/null
+++ b/main_dc/yalarba/easySite/easySite/app/components/layout/pricing.vue
@@ -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>
\ No newline at end of file
diff --git a/main_dc/yalarba/easySite/easySite/app/components/pricing/FAQSection.vue b/main_dc/yalarba/easySite/easySite/app/components/pricing/FAQSection.vue
new file mode 100644
index 0000000..7d1bf7a
--- /dev/null
+++ b/main_dc/yalarba/easySite/easySite/app/components/pricing/FAQSection.vue
@@ -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>
\ No newline at end of file
diff --git a/main_dc/yalarba/easySite/easySite/app/components/pricing/PricingSection.vue b/main_dc/yalarba/easySite/easySite/app/components/pricing/PricingSection.vue
new file mode 100644
index 0000000..4ce3757
--- /dev/null
+++ b/main_dc/yalarba/easySite/easySite/app/components/pricing/PricingSection.vue
@@ -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>
\ No newline at end of file
diff --git a/main_dc/yalarba/easySite/easySite/app/pages/rules/index.vue b/main_dc/yalarba/easySite/easySite/app/pages/rules/index.vue
new file mode 100644
index 0000000..ab4a1e9
--- /dev/null
+++ b/main_dc/yalarba/easySite/easySite/app/pages/rules/index.vue
@@ -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>
\ No newline at end of file