From 820aff3d833a5d5569fc3841cd21af2a492110d1 Mon Sep 17 00:00:00 2001
From: Anatoly Kopyl <hi@kopyl.dev>
Date: Sun, 22 Sep 2024 15:24:55 +0300
Subject: [PATCH] Blob

---
 components/about-company.vue | 39 +++++++++++++++-
 components/k-nav.vue         |  4 +-
 package-lock.json            | 89 ++++++++++++++++++++++++++++++++++++
 package.json                 |  1 +
 4 files changed, 130 insertions(+), 3 deletions(-)

diff --git a/components/about-company.vue b/components/about-company.vue
index 00284b8..e9eacd3 100644
--- a/components/about-company.vue
+++ b/components/about-company.vue
@@ -1,9 +1,20 @@
 <script setup lang="ts">
+import {useMouse, useWindowScroll} from "@vueuse/core"
 
+const y = ref<number>()
+const x = ref<number>()
+
+const handleMouseMove = (event: MouseEvent) => {
+  x.value = event.clientX
+  y.value = event.clientY
+}
 </script>
 
 <template>
-<section>
+<section
+  class="overflow-hidden"
+  @mousemove="handleMouseMove"
+>
   <div class="about__grid py-16">
     <NuxtPicture
       class="overflow-hidden rounded-r-xl"
@@ -22,6 +33,17 @@
       style="grid-area: img-b;"
     ></NuxtPicture>
   </div>
+
+  <div
+    class="about__blob-wrapper"
+    :style="{
+      transform: `translate(${x}px, ${y}px)`
+    }"
+  >
+    <div
+      class="about__blob bg-lime-500"
+    ></div>
+  </div>
 </section>
 </template>
 
@@ -50,4 +72,19 @@
   height: 100%;
   object-fit: cover;
 }
+
+.about__blob-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+.about__blob {
+  width: 300px;
+  height: 300px;
+  border-radius: 999px;
+  filter: blur(96px);
+  transform: translate(-50%, -50%);
+}
 </style>
diff --git a/components/k-nav.vue b/components/k-nav.vue
index da79e4b..6c624e1 100644
--- a/components/k-nav.vue
+++ b/components/k-nav.vue
@@ -3,13 +3,13 @@ import PureCitySvg from '~/assets/pure-city.svg'
 </script>
 
 <template>
-  <nav class="flex flex-col gap-16 justify-center items-center p-4 pt-8 w-full">
+  <nav class="flex flex-col gap-16 justify-center items-center py-8 px-4 w-full border-b-2 bg-white">
     <img
       :src="PureCitySvg"
       alt="Логотип"
       class="w-64"
     >
-    <h1 class="font-semibold text-5xl">
+    <h1 class="font-semibold text-6xl">
       Чистый город
     </h1>
   </nav>
diff --git a/package-lock.json b/package-lock.json
index 9109e31..6fd26bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
         "@nuxt/icon": "^1.5.1",
         "@nuxt/image": "^1.8.0",
         "@nuxtjs/tailwindcss": "^6.12.1",
+        "@vueuse/core": "^11.1.0",
         "nuxt": "^3.13.0",
         "vue": "latest",
         "vue-router": "latest"
@@ -2262,6 +2263,11 @@
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
       "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+    },
     "node_modules/@unhead/dom": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.11.6.tgz",
@@ -2668,6 +2674,89 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.7.tgz",
       "integrity": "sha512-NBE1PBIvzIedxIc2RZiKXvGbJkrZ2/hLf3h8GlS4/sP9xcXEZMFWOazFkNd6aGeUCMaproe5MHVYB3/4AW9q9g=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.1.0.tgz",
+      "integrity": "sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "11.1.0",
+        "@vueuse/shared": "11.1.0",
+        "vue-demi": ">=0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.1.0.tgz",
+      "integrity": "sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.1.0.tgz",
+      "integrity": "sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==",
+      "dependencies": {
+        "vue-demi": ">=0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
diff --git a/package.json b/package.json
index aa5a459..a93a08e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@nuxt/icon": "^1.5.1",
     "@nuxt/image": "^1.8.0",
     "@nuxtjs/tailwindcss": "^6.12.1",
+    "@vueuse/core": "^11.1.0",
     "nuxt": "^3.13.0",
     "vue": "latest",
     "vue-router": "latest"