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>