add CompatibilitySection

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "uvpn.shop",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "uvpn.shop",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "dependencies": {
         "@lucide/vue": "^1.16.0",
         "@tailwindcss/vite": "^4.3.0",
@@ -15,7 +15,8 @@
         "swiper": "^12.1.4",
         "tailwindcss": "^4.3.0",
         "three": "^0.184.0",
-        "vue": "^3.5.32"
+        "vue": "^3.5.32",
+        "vue3-simple-icons": "^16.10.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.6",
@@ -3000,6 +3001,15 @@
         }
       }
     },
+    "node_modules/vue3-simple-icons": {
+      "version": "16.10.0",
+      "resolved": "https://registry.npmjs.org/vue3-simple-icons/-/vue3-simple-icons-16.10.0.tgz",
+      "integrity": "sha512-i5i4K3R+ZLFLsb+Gjw7jHxOQW5hhH4NcB0U2Xe1v3FKnqFJow8A5sgRglAwFtFDHLw1peDIRRRe8dCxs9yhVdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "vue": "^3"
+      }
+    },
     "node_modules/wsl-utils": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",

package.json

@@ -16,7 +16,8 @@
     "swiper": "^12.1.4",
     "tailwindcss": "^4.3.0",
     "three": "^0.184.0",
-    "vue": "^3.5.32"
+    "vue": "^3.5.32",
+    "vue3-simple-icons": "^16.10.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.6",

src/App.vue

@@ -3,6 +3,7 @@
     <AppHeader />
     <HeroSection />
     <FeaturesSection />
+    <CompatibilitySection />
     <PricingSection />
     <StepsSection />
     <TestimonialsSection />
@@ -14,6 +15,7 @@
 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'

src/components/CompatibilitySection.vue

@@ -0,0 +1,50 @@
+<template>
+  <section id="compatibility" class="px-6 py-20 md:px-12 max-w-7xl mx-auto">
+    <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Совместимость</h2>
+    <p class="text-center text-gray-500 dark:text-gray-400 mb-14">Работает на всех устройствах</p>
+
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
+      <!-- iOS -->
+      <div class="bg-white dark:bg-gray-900 rounded-2xl p-6 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
+        <AppleIcon class="w-10 h-10 text-blue-600 dark:text-blue-400 mx-auto mb-3" />
+        <p class="font-medium">iOS</p>
+      </div>
+
+      <!-- Android -->
+      <div class="bg-white dark:bg-gray-900 rounded-2xl p-6 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
+        <AndroidIcon class="w-10 h-10 text-blue-600 dark:text-blue-400 mx-auto mb-3" />
+        <p class="font-medium">Android</p>
+      </div>
+
+      <!-- Windows -->
+      <div class="bg-white dark:bg-gray-900 rounded-2xl p-6 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
+        <WindowsIcon class="w-10 h-10 text-blue-600 dark:text-blue-400 mx-auto mb-3" />
+        <p class="font-medium">Windows</p>
+      </div>
+
+      <!-- macOS -->
+      <div class="bg-white dark:bg-gray-900 rounded-2xl p-6 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
+        <MacOsIcon class="w-10 h-10 text-blue-600 dark:text-blue-400 mx-auto mb-3" />
+        <p class="font-medium">macOS</p>
+      </div>
+
+      <!-- Linux -->
+      <div class="bg-white dark:bg-gray-900 rounded-2xl p-6 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
+        <LinuxIcon class="w-10 h-10 text-blue-600 dark:text-blue-400 mx-auto mb-3" />
+        <p class="font-medium">Linux</p>
+      </div>
+
+      <!-- Smart TV -->
+      <div class="bg-white dark:bg-gray-900 rounded-2xl p-6 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
+        <AppleTvIcon class="w-10 h-10 text-blue-600 dark:text-blue-400 mx-auto mb-3" />
+        <p class="font-medium">Smart TV</p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+// import { Apple, Smartphone, Monitor, Terminal, Server, Tv } from '@lucide/vue'
+import { AppleIcon, AndroidIcon, LinuxIcon, AppleTvIcon, MacOsIcon } from 'vue3-simple-icons';
+import WindowsIcon from './WindowsIcon.vue'; 
+</script>

src/components/WindowsIcon.vue

@@ -0,0 +1,3 @@
+<template>
+    <svg width="800px" height="800px" viewBox="-0.5 0 257 257" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M0 36.357L104.62 22.11l.045 100.914-104.57.595L0 36.358zm104.57 98.293l.08 101.002L.081 221.275l-.006-87.302 104.494.677zm12.682-114.405L255.968 0v121.74l-138.716 1.1V20.246zM256 135.6l-.033 121.191-138.716-19.578-.194-101.84L256 135.6z" fill="#00ADEF"/></svg>
+</template>