feat(docs): Add blobity to home

docs/components/home/Features.vue

@@ -44,6 +44,6 @@ watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoin
 </template>
 <style>
 .button {
-  @apply shadow-lg transition-colors duration-200 hover:(dark:(bg-white text-black) bg-black) text-white font-semibold text-lg mt-4 px-5 py-3 rounded-xl bg-green-500;
+  @apply z-1 shadow-lg transition-colors duration-200 text-white font-semibold text-lg mt-4 px-5 py-3 rounded-lg bg-green-500;
 }
 </style>

docs/components/home/Home.vue

@@ -1,8 +1,26 @@
 <script lang="ts" setup>
 import { VueFlow, Handle, Position, useVueFlow } from '@braks/vue-flow'
 import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
+import Blobity from 'blobity'
 import BoxNode from './nodes/Box.vue'
 
+const dark = useDark({
+  selector: 'html',
+})
+
+const blobity = new Blobity({
+  color: dark.value ? '#ffffff' : '#000000',
+  invert: true,
+  zIndex: 0,
+  magnetic: false,
+  dotColor: '#10b981',
+  radius: 8,
+})
+
+onBeforeUnmount(() => {
+  blobity.destroy()
+})
+
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
 const { dimensions, instance, onPaneReady, getNodes, getNode, getEdge, updateEdge, edges } = useVueFlow({
@@ -163,7 +181,7 @@ onPaneReady(({ fitView }) => {
   transform
   transition-transform
   duration-300
-  hover:(scale-102 bg-black dark:(bg-white text-black))
+  hover:(scale-102)
   transition-colors
   ease-in-out
   rounded-lg