Initial commit

components/services/service.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  name: string
+  type: 'indoor' | 'outdoor'
+}>()
+</script>
+
+<template>
+<div class="rounded-lg bg-white flex-grow flex justify-between overflow-hidden">
+  <div class="py-4 px-6 text-center flex-grow">
+    {{ name }}
+  </div>
+  <div
+    class="px-4 flex items-center justify-center"
+    :class="{
+      'bg-yellow-400': type === 'indoor',
+      'bg-lime-500': type === 'outdoor'
+    }"
+  >
+    <Icon
+      :name="type === 'indoor' ? 'bi:house' : 'bi:tree'"
+      class="text-white"
+    ></Icon>
+  </div>
+</div>
+</template>
+
+<style scoped lang="postcss">
+
+</style>

components/services/services.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import Service from "~/components/services/service.vue";
+
+type TService = {
+  name: string
+  type: 'indoor' | 'outdoor'
+}
+
+const indoorServices: TService[] = [
+  // Услуги по уборке помещений
+  { name: 'Генеральная уборка', type: 'indoor' },
+  { name: 'Уборка после ремонта и строительства', type: 'indoor' },
+  { name: 'Уборка после пожара', type: 'indoor' },
+  { name: 'Уход за полами', type: 'indoor' },
+  { name: 'Обеспыливание поверхностей', type: 'indoor' },
+  { name: 'Высотный клининг', type: 'indoor' },
+  { name: 'Влажная уборка', type: 'indoor' },
+  { name: 'Уборка паром', type: 'indoor' },
+  { name: 'Мытье полов', type: 'indoor' },
+  { name: 'Мытье стен', type: 'indoor' },
+  { name: 'Мойка потолков', type: 'indoor' },
+  { name: 'Мытье окон', type: 'indoor' },
+  { name: 'Мойка витрин', type: 'indoor' },
+  { name: 'Мойка балконов и лоджий', type: 'indoor' },
+  { name: 'Химчистка ковров на дому', type: 'indoor' },
+  { name: 'Химчистка мебели', type: 'indoor' },
+  { name: 'Химчистка ковролина на дому', type: 'indoor' },
+  { name: 'Химчистка штор на дому', type: 'indoor' },
+  { name: 'Чистка жалюзи', type: 'indoor' },
+  { name: 'Химчистка матрасов на дому', type: 'indoor' },
+  { name: 'Полировка полов', type: 'indoor' },
+  { name: 'Шлифовка пола', type: 'indoor' },
+  { name: 'Чистка вентиляции', type: 'indoor' },
+  { name: 'Чистка бассейнов', type: 'indoor' },
+  { name: 'Чистка кондиционеров', type: 'indoor' },
+]
+
+const outdoorServices = [
+  // Услуги по уборке территории
+  { name: 'Удаление граффити', type: 'outdoor' },
+  { name: 'Мойка фасадов', type: 'outdoor' },
+  { name: 'Подметание территории', type: 'outdoor' },
+  { name: 'Уборка снега', type: 'outdoor' },
+  { name: 'Уборка листвы', type: 'outdoor' },
+  { name: 'Покос травы', type: 'outdoor' },
+  { name: 'Уход за газоном', type: 'outdoor' }
+]
+
+function mulberry32(a) {
+  return function() {
+    let t = a += 0x6D2B79F5;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  }
+}
+
+const getRand = mulberry32((Math.random()*2**32)>>>0)
+
+function shuffle(array) {
+  let currentIndex = array.length;
+
+  // While there remain elements to shuffle...
+  while (currentIndex != 0) {
+    // Pick a remaining element...
+    let randomIndex = Math.floor(getRand() * currentIndex);
+    currentIndex--;
+
+    // And swap it with the current element.
+    [array[currentIndex], array[randomIndex]] = [
+      array[randomIndex], array[currentIndex]];
+  }
+}
+
+shuffle(outdoorServices)
+</script>
+
+<template>
+<section class="py-16 bg-gray-100">
+  <h2 class="text-4xl font-semibold col-w mx-auto mb-8 px-4 md:px-16">Услуги</h2>
+
+  <div class="col-w mx-auto px-4 md:px-16 gap-2 services__grid mb-16">
+    <service
+      v-for="s in indoorServices"
+      :key="s.name"
+      :name="s.name"
+      :type="s.type"
+    ></service>
+  </div>
+
+  <div class="col-w mx-auto px-4 md:px-16 gap-2 services__grid">
+    <service
+        v-for="s in outdoorServices"
+        :key="s.name"
+        :name="s.name"
+        :type="s.type"
+    ></service>
+  </div>
+</section>
+</template>
+
+<style scoped lang="postcss">
+.services__grid {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+</style>