add CompatibilitySection

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>