v0.4.0

add:
- legal .md files
- routers
- home view
- rewrite App.vue
- update footer / header
- update features

src/components/AppFooter.vue

@@ -6,9 +6,9 @@
         <span class="text-lg font-bold">uVPN</span>
       </div>
       <div class="flex gap-6 text-gray-500 dark:text-gray-400 text-sm">
-        <a href="#" class="hover:text-gray-900 dark:hover:text-gray-400 dark:text-white transition">Политика конфиденциальности</a>
-        <a href="#" class="hover:text-gray-900 dark:hover:text-gray-400 dark:text-white transition">Условия использования</a>
-        <a href="#" class="hover:text-gray-900 dark:hover:text-gray-400 dark:text-white transition">Поддержка</a>
+        <router-link to="/docs/policy" class="hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400 transition hover:cursor-pointer">Политика конфиденциальности</router-link>
+        <router-link to="/docs/agreement" class="hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400 hover:cursor-pointer">Условия использования</router-link>
+        <a href="mailto:support@uvpn.shop" target="_blank" class="hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400 transition">Поддержка</a>
       </div>
       <p class="text-gray-500 dark:text-gray-400 text-sm">
         © 2026 uVPN. Все права защищены.

src/components/AppHeader.vue

@@ -1,31 +1,29 @@
 <template>
   <header class="flex items-center justify-between px-6 py-4 md:px-12 border-b border-gray-200 dark:border-gray-800 sticky top-0 bg-white/80 dark:bg-gray-900/80 backdrop-blur-xs z-50">
-    <div class="flex items-center gap-3">
+    
+    <!-- Логотип -->
+    <router-link to="/" class="flex items-center gap-3 hover:opacity-90 transition">
       <img src="/images/logo.png" alt="uVPN logo" class="size-8" />
       <span class="text-xl font-bold tracking-tight">uVPN</span>
-    </div>
+    </router-link>
 
-    <!-- Якорные ссылки -->
+    <!-- Навигация: теперь это router-link с хэшем секции -->
     <nav class="hidden md:flex items-center gap-6 text-sm text-gray-500 dark:text-gray-400">
-      <a href="#hero" @click.prevent="scrollTo('hero')" class="hover:text-gray-900  dark:hover:text-gray-400 dark:text-white transition">Главная</a>
-      <a href="#features" @click.prevent="scrollTo('features')" class="hover:text-gray-900 dark:hover:text-gray-400 dark:text-white transition">Преимущества</a>
-      <a href="#pricing" @click.prevent="scrollTo('pricing')" class="hover:text-gray-900 dark:hover:text-gray-400 dark:text-white transition">Тарифы</a>
-      <a href="#steps" @click.prevent="scrollTo('steps')" class="hover:text-gray-900 dark:hover:text-gray-400 dark:text-white transition">Как начать</a>
-      <a href="#testimonials" @click.prevent="scrollTo('testimonials')" class="hover:text-gray-900 dark:hover:text-gray-400 dark:text-white transition">Отзывы</a>
-      <a href="#footer" @click.prevent="scrollTo('faq')" class="hover:text-gray-900 dark:hover:text-gray-400 dark:text-white transition">FAQ</a>
+      <router-link :to="{ path: '/', hash: '#hero' }" class="hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400 transition">Главная</router-link>
+      <router-link :to="{ path: '/', hash: '#features' }" class="hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400 transition">Преимущества</router-link>
+      <router-link :to="{ path: '/', hash: '#pricing' }" class="hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400 transition">Тарифы</router-link>
+      <router-link :to="{ path: '/', hash: '#steps' }" class="hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400 transition">Как начать</router-link>
+      <router-link :to="{ path: '/', hash: '#testimonials' }" class="hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400 transition">Отзывы</router-link>
+      <router-link :to="{ path: '/', hash: '#faq' }" class="hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400 transition">FAQ</router-link>
     </nav>
 
-    <button class="bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 transition px-5 py-2 rounded-lg font-medium text-sm text-white">
+    <!-- Кнопка тарифов -->
+    <router-link :to="{ path: '/', hash: '#pricing' }" class="bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 transition px-5 py-2 rounded-lg font-medium text-sm text-white">
       Попробовать бесплатно
-    </button>
+    </router-link>
   </header>
 </template>
 
 <script setup>
-const scrollTo = (id) => {
-  const el = document.getElementById(id)
-  if (el) {
-    el.scrollIntoView({ behavior: 'smooth' })
-  }
-}
-</script>
+// Скрипты больше не нужны, всю магию сделает роутер!
+</script>

src/components/DocViewer.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="max-w-4xl mx-auto px-4 py-12">
+    <!-- Навигация: теперь используем router-link вместо обычных кнопок -->
+    <nav class="flex space-x-6 mb-8 pb-2">
+      <router-link 
+        to="/docs/policy"
+        class="px-1 py-2 text-sm font-medium transition-colors border-b-2 -mb-2.5"
+        active-class="border-blue-600 text-blue-600 dark:text-blue-400 dark:border-blue-400"
+        inactive-class="border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400"
+      >
+        Политика конфиденциальности
+      </router-link>
+      
+      <router-link 
+        to="/docs/agreement"
+        class="px-1 py-2 text-sm font-medium transition-colors border-b-2 -mb-2.5"
+        active-class="border-blue-600 text-blue-600 dark:text-blue-400 dark:border-blue-400"
+        inactive-class="border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400"
+      >
+        Пользовательское соглашение
+      </router-link>
+    </nav>
+
+    <!-- Область отображения Markdown (Tailwind Typography) -->
+    <div 
+      v-if="htmlContent" 
+      v-html="htmlContent" 
+      class="prose prose-slate max-w-none dark:prose-invert"
+    ></div>
+    
+    <div v-else-if="isLoading" class="text-center py-12 text-slate-500 dark:text-slate-400">
+      Загрузка документа...
+    </div>
+
+    <div v-else class="text-center py-12 text-red-500">
+      Документ не найден или произошла ошибка.
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { marked } from 'marked'
+
+// Принимаем параметр docName из роутера
+const props = defineProps({
+  docName: {
+    type: String,
+    required: true
+  }
+})
+
+const htmlContent = ref('')
+const isLoading = ref(true)
+
+// Функция загрузки md-файла
+const fetchMarkdown = async (name) => {
+  isLoading.value = true
+  htmlContent.value = ''
+  
+  try {
+    // Загрузка из папки public/docs/
+    const response = await fetch(`/docs/${name}.md`)
+    if (!response.ok) throw new Error('Файл отсутствует')
+    
+    const markdownText = await response.text()
+    htmlContent.value = marked(markdownText)
+  } catch (error) {
+    console.error('Ошибка отрисовки md:', error)
+    htmlContent.value = ''
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Загружаем файл при первой инициализации страницы
+onMounted(() => {
+  fetchMarkdown(props.docName)
+})
+
+// Отслеживаем изменение ссылки (например, если пользователь перешел с policy на agreement)
+watch(() => props.docName, (newName) => {
+  fetchMarkdown(newName)
+})
+</script>

src/components/FeaturesSection.vue

@@ -38,7 +38,7 @@
       <div class="bg-white dark:bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
         <RefreshCw class="w-12 h-12 text-blue-600 dark:text-blue-400 mx-auto mb-4" />
         <h3 class="text-xl font-semibold mb-3">Стабильная работа</h3>
-        <p class="text-gray-500 dark:text-gray-400">Автоматические обновления конфигураций — VPN работает даже при новых блокировках</p>
+        <p class="text-gray-500 dark:text-gray-400">Автоматические обновления конфигураций — мы первые подстраиваемся под новые условия</p>
       </div>
     </div>
   </section>