Clients

app.vue

@@ -10,6 +10,7 @@ useSeoMeta({
     <main>
       <about-company></about-company>
       <services></services>
+      <clients></clients>
       <map-view></map-view>
     </main>
     <k-footer></k-footer>
@@ -51,5 +52,11 @@ p:not(:last-of-type) {
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 3px;
+  color: #84cc16;
+  transition: color .2s;
+
+  &:hover {
+    color: #65a30d;
+  }
 }
 </style>

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>

components/k-footer.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-<footer class="">
+<footer class="bg-white">
   <div class="col-w mx-auto px-4 md:px-16 py-4">
     <div class="text-center text-sm">
       Разработано в <a href="https://kopyl.dev" target="_blank" class="link">kopyl.dev</a>

components/k-nav.vue

@@ -3,15 +3,17 @@ import PureCitySvg from '~/assets/pure-city.svg'
 </script>
 
 <template>
-  <nav class="flex flex-col gap-16 justify-center items-center py-8 px-4 w-full border-b-2 bg-white">
+  <nav class="py-8 w-full border-b-2 bg-white">
+    <div class="flex gap-8 items-center col-w mx-auto px-4 md:px-16">
       <img
         :src="PureCitySvg"
         alt="Логотип"
-      class="w-64"
+        class="h-16"
       >
-    <h1 class="font-semibold text-6xl">
+      <h1 class="font-semibold text-5xl">
         Чистый город
       </h1>
+    </div>
   </nav>
 </template>
 

components/map-view.vue

@@ -5,6 +5,7 @@
 <template>
 <iframe
   class="h-96 w-full"
+  style="filter: hue-rotate(51deg);"
   src="https://yandex.ru/map-widget/v1/-/CDH7FS3m"
 ></iframe>
 </template>

components/services/services.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Service from "~/components/services/service.vue";
+import PureCitySvg from '~/assets/pure-city.svg'
 
 type TService = {
   name: string
@@ -49,7 +50,10 @@ const outdoorServices = [
 
 <template>
 <section class="py-16 bg-slate-100">
-  <h2 class="text-4xl font-semibold col-w mx-auto mb-8 px-4 md:px-16">Услуги</h2>
+  <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="col-w mx-auto px-4 md:px-16 gap-2 services__grid mb-16">
     <service