Clients

components/clients/client.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  name: string
+  logo: string
+  fullName: string
+}>()
+</script>
+
+<template>
+<div class="flex flex-col rounded-xl py-8 px-4 gap-4 w-72 items-center border">
+  <img
+    :src="logo"
+    class="w-48 h-48 object-contain mb-4"
+  >
+  <div>
+    {{name}}
+  </div>
+  <div class="text-xs text-slate-400 text-center">
+    {{fullName}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="postcss">
+
+</style>

components/clients/clients.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import PureCitySvg from "assets/pure-city.svg";
+import Client from "./client.vue"
+
+const clients = [
+  {
+    name: 'МО Озеро долгое',
+    fullName: 'МЕСТНАЯ АДМИНИСТРАЦИЯ ВНУТРИГОРОДСКОГО МУНИЦИПАЛЬНОГО ОБРАЗОВАНИЯ ГОРОДА ФЕДЕРАЛЬНОГО ЗНАЧЕНИЯ САНКТ-ПЕТЕРБУРГА МУНИЦИПАЛЬНЫЙ ОКРУГ ОЗЕРО ДОЛГОЕ',
+    logo: '/images/clients/mo-ozero-dolgoe.jpg'
+  },
+  {
+    name: 'МО Юнтолово',
+    fullName: 'МЕСТНАЯ АДМИНИСТРАЦИЯ ВНУТРИГОРОДСКОГО МУНИЦИПАЛЬНОГО ОБРАЗОВАНИЯ ГОРОДА ФЕДЕРАЛЬНОГО ЗНАЧЕНИЯ САНКТ-ПЕТЕРБУРГА МУНИЦИПАЛЬНЫЙ ОКРУГ ЮНТОЛОВО',
+    logo: '/images/clients/mo-untolovo.jpg'
+  },
+  {
+    name: 'Приморский район',
+    fullName: 'АДМИНИСТРАЦИЯ ПРИМОРСКОГО РАЙОНА САНКТ-ПЕТЕРБУРГА',
+    logo: '/images/clients/primorskiy-rayon.gif'
+  }
+]
+</script>
+
+<template>
+  <section class="py-16 bg-white">
+    <h2 class="text-4xl font-semibold col-w mx-auto mb-8 px-4 md:px-16 flex items-center gap-8">
+      <img :src="PureCitySvg" class="h-16">
+      Наши клиенты
+    </h2>
+
+    <div class="flex gap-16 col-w mx-auto px-4 md:px-16">
+      <client
+        v-for="c in clients"
+        :name="c.name"
+        :full-name="c.fullName"
+        :logo="c.logo"
+      ></client>
+    </div>
+</section>
+</template>
+
+<style scoped lang="postcss">
+
+</style>