From c03c3de45264676ac56eab7e42bdf4aa58210fff Mon Sep 17 00:00:00 2001
From: Anatoly Kopyl <hi@kopyl.dev>
Date: Sun, 22 Sep 2024 17:38:17 +0300
Subject: [PATCH] About company responsive

---
 components/about-company.vue   | 35 +++++++++++++++++++++-------------
 components/clients/client.vue  |  7 ++++---
 components/clients/clients.vue |  2 +-
 components/k-nav.vue           |  9 ++++++---
 4 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/components/about-company.vue b/components/about-company.vue
index e9eacd3..eecf5aa 100644
--- a/components/about-company.vue
+++ b/components/about-company.vue
@@ -17,20 +17,21 @@ const handleMouseMove = (event: MouseEvent) => {
 >
   <div class="about__grid py-16">
     <NuxtPicture
-      class="overflow-hidden rounded-r-xl"
-      style="grid-area: img-a;"
+      class="overflow-hidden rounded-r-xl col-span-1 sm:col-span-2 h-0 min-h-full"
       src="/images/sweep.jpg"
     ></NuxtPicture>
-    <div class="rounded-xl p-8 bg-slate-100 md:mr-16" style="grid-area: card-a;">
-      Компания Чистый город осуществляет профессиональные комплексные услуги по уборке помещений для частных и корпоративных клиентов. Высокое качество выполняемых услуг обеспечивается за счет использования современной профессиональной техники с использованием качественных моющих средств нашими опытными специалистами.
+    <div class="rounded-xl p-4 lg:p-8 bg-slate-100 col-start-2 sm:col-start-auto col-span-2 sm:col-span-1 text-2xl mr-4 sm:mr-0">
+      Осуществляем профессиональные комплексные услуги по уборке помещений для частных и корпоративных клиентов.
     </div>
-    <div class="rounded-xl p-8 bg-slate-100 md:ml-16" style="grid-area: card-b;">
+    <div class="rounded-xl p-4 lg:p-8 bg-slate-100 mx-4 sm:mx-0 md:mr-16 col-span-3 sm:col-span-1 text-base">
+      Высокое качество выполняемых услуг обеспечивается за счет использования современной профессиональной техники с использованием качественных моющих средств нашими опытными специалистами.
+    </div>
+    <div class="rounded-xl p-4 lg:p-8 bg-slate-100 ml-4 sm:mx-0 md:ml-16 sm:col-start-2 col-span-2 text-base">
       Нам дорог каждый клиент и важно каждое мнение о нас, поэтому мы с максимальной ответственностью подходим к своей работе! Наша работа делает мир чище! Благодаря нашему труду пространство становиться чистым, а чистота залог здоровья и приятно находиться в убранном чистом месте, пусть это будет ваша квартира, дом или рабочее место! Нам важно, чтобы наши клиенты оставались с нами и рекомендовали нас как ответственных профессионалов своего дела!
     </div>
     <NuxtPicture
-      class="overflow-hidden rounded-l-xl"
+      class="overflow-hidden rounded-l-xl col-span-1 sm:col-span-2 h-0 min-h-full"
       src="/images/building-window.jpg"
-      style="grid-area: img-b;"
     ></NuxtPicture>
   </div>
 
@@ -49,22 +50,26 @@ const handleMouseMove = (event: MouseEvent) => {
 
 <style scoped lang="postcss">
 .about__grid {
+  --about-grid-gap: 16px;
+  --about-grid-magic: calc(calc(var(--about-grid-gap) * 4) / 3);
+
   display: grid;
-  gap: 16px;
+  gap: var(--about-grid-gap);
   grid-template-columns:
     calc(calc(100% - var(--col-width)) / 2)
     repeat(3,
-      calc(calc(var(--col-width) / 3) - 21.33px)
+      calc(calc(var(--col-width) / 3) - var(--about-grid-magic))
     )
     calc(calc(100% - var(--col-width)) / 2);
-  grid-template-rows: 300px 300px;
-  grid-template-areas:
-    'img-a img-a card-a card-a .'
-    '. card-b card-b img-b img-b';
+  grid-auto-rows: auto;
 
   @media screen and (max-width: 1280px) {
     grid-template-columns: auto repeat(3, 1fr) auto;
   }
+
+  @media screen and (max-width: 639px) {
+    grid-template-columns: repeat(3, 1fr)
+  }
 }
 
 :deep(img) {
@@ -78,6 +83,10 @@ const handleMouseMove = (event: MouseEvent) => {
   top: 0;
   left: 0;
   z-index: -1;
+
+  @media (hover: none) {
+    display: none;
+  }
 }
 
 .about__blob {
diff --git a/components/clients/client.vue b/components/clients/client.vue
index f7f12a5..63ed89d 100644
--- a/components/clients/client.vue
+++ b/components/clients/client.vue
@@ -7,12 +7,13 @@ defineProps<{
 </script>
 
 <template>
-<div class="flex flex-col rounded-xl py-8 px-4 gap-4 w-72 items-center border">
+<div class="flex flex-col rounded-xl py-8 px-4 gap-4 w-full sm:w-72 items-center border">
   <img
     :src="logo"
-    class="w-48 h-48 object-contain mb-4"
+    class="w-32 h-32 md:w-48 md:h-48 object-contain mb-4"
+    :alt="`Герб ${name}`"
   >
-  <div>
+  <div class="text-center">
     {{name}}
   </div>
   <div class="text-xs text-slate-400 text-center">
diff --git a/components/clients/clients.vue b/components/clients/clients.vue
index caf852a..1488f7c 100644
--- a/components/clients/clients.vue
+++ b/components/clients/clients.vue
@@ -28,7 +28,7 @@ const clients = [
       Наши клиенты
     </h2>
 
-    <div class="flex gap-16 col-w mx-auto px-4 md:px-16">
+    <div class="flex flex-col sm:flex-row col-w mx-auto px-4 md:px-16 gap-2 lg:gap-16 justify-between lg:justify-start items-center sm:items-stretch">
       <client
         v-for="c in clients"
         :name="c.name"
diff --git a/components/k-nav.vue b/components/k-nav.vue
index e79f4b6..b377bee 100644
--- a/components/k-nav.vue
+++ b/components/k-nav.vue
@@ -10,9 +10,12 @@ import PureCitySvg from '~/assets/pure-city.svg'
         alt="Логотип"
         class="h-16"
       >
-      <h1 class="font-semibold text-5xl">
-        Чистый город
-      </h1>
+      <div class="flex flex-col">
+        <h1 class="font-semibold text-5xl">
+          Чистый город
+        </h1>
+        <h2 class="text-lime-500 ml-4">Клининговая компания</h2>
+      </div>
     </div>
   </nav>
 </template>