50 lines
2.6 KiB
Vue
50 lines
2.6 KiB
Vue
<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> |