v0.4.0

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

src/App.vue

@@ -1,25 +1,16 @@
 <template>
-  <div class="bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-white font-sans antialiased min-h-screen">
+  <div class="bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-white font-sans antialiased min-h-screen flex flex-col">
     <AppHeader />
-    <HeroSection />
-    <FeaturesSection />
-    <CompatibilitySection />
-    <PricingSection />
-    <StepsSection />
-    <TestimonialsSection />
-    <FaqSection />
+    
+    <main class="grow">
+      <RouterView /> 
+    </main>
+
     <AppFooter />
   </div>
 </template>
 
 <script setup>
 import AppHeader from './components/AppHeader.vue'
-import HeroSection from './components/HeroSection.vue'
-import FeaturesSection from './components/FeaturesSection.vue'
-import CompatibilitySection from './components/CompatibilitySection.vue'
-import PricingSection from './components/PricingSection.vue'
-import StepsSection from './components/StepsSection.vue'
-import TestimonialsSection from './components/TestimonialsSection.vue'
-import FaqSection from './components/FaqSection.vue'
 import AppFooter from './components/AppFooter.vue'
-</script>
+</script>

src/assets/styles.css

@@ -1 +1,2 @@
-@import "tailwindcss";
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";

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>

src/main.js

@@ -1,5 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
 import './assets/styles.css'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')

src/router/index.js

@@ -0,0 +1,34 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+import DocViewer from '../components/DocViewer.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  
+  scrollBehavior(to, from, savedPosition) {
+    // Если в ссылке есть хэш (например, #pricing)
+    if (to.hash) {
+      return new Promise((resolve) => {
+        // Даем 200 миллисекунд компонентам (Three.js/Swiper) на полную отрисовку
+        setTimeout(() => {
+          resolve({
+            el: to.hash,
+            behavior: 'smooth',
+            // Корректировка отступа сверху, чтобы липкая (sticky) шапка не перекрывала заголовок блока
+            offset: { x: 0, y: 80 } 
+          })
+        }, 200)
+      })
+    }
+    
+    // Если хэша нет, при переходе на новую страницу просто скроллим в самый верх
+    return { top: 0 }
+  },
+
+  routes: [
+    { path: '/', name: 'home', component: HomeView },
+    { path: '/docs/:docName', name: 'documents', component: DocViewer, props: true }
+  ]
+})
+
+export default router

src/views/HomeView.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <HeroSection />
+    <FeaturesSection />
+    <CompatibilitySection />
+    <PricingSection />
+    <StepsSection />
+    <TestimonialsSection />
+    <FaqSection />
+  </div>
+</template>
+
+<script setup>
+import HeroSection from '../components/HeroSection.vue'
+import FeaturesSection from '../components/FeaturesSection.vue'
+import CompatibilitySection from '../components/CompatibilitySection.vue'
+import PricingSection from '../components/PricingSection.vue'
+import StepsSection from '../components/StepsSection.vue'
+import TestimonialsSection from '../components/TestimonialsSection.vue'
+import FaqSection from '../components/FaqSection.vue'
+</script>