Blob

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>

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>

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",

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"