docs: Add acknowledgement node to intro

# What's changed?

* Move acknowledgement to bottom of page above footer
* Add acknowledgement node that scrolls down
* Reword home page

docs/components/home/Acknowledgement.vue

@@ -1,8 +1,11 @@
+<script lang="ts" setup>
+import Heart from '~icons/mdi/heart'
+</script>
 <template>
-  <div class="w-full bg-black text-white border-b-1 border-white">
+  <div id="acknowledgement" class="w-full bg-black text-white border-y-1 border-white">
     <div class="max-w-11/12 md:max-w-6/12 m-auto py-4 md:(pb-12 pt-6) text-center">
       <div>
-        <div class="font-bold text-4xl mb-4">Acknowledgement</div>
+        <h1 class="md:mb-8 flex justify-center items-center"><Heart class="text-red-500" /> Acknowledgement</h1>
         <strong>First off</strong>: A big thank you to the developers of
         <a href="https://webkid.io" target="_blank" class="text-green-500">Webkid</a>. Their amazing work made it possible for me
         to create this port to Vue 3 - without them there is no Vue Flow.

docs/components/home/flows/Additional.vue

@@ -97,10 +97,12 @@ onPaneReady((i) => emit('pane', i))
   </div>
   <div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
     <div class="flex flex-col gap-2 items-center md:items-start">
-      <h1>Additional Components</h1>
+      <h1>Additional Features</h1>
       <p>
-        Vue Flow includes a MiniMap, Controls and Background, as well as a ton of utilities and a supercharged composable to
-        control the internal state outside the Vue Flow component.
+        On top of all the features Vue Flow comes with several components like a Background, Minimap or Controls.
+
+        <br />
+        Plus it's built for composition, making the access of the internal state easy as can be!
       </p>
       <router-link class="button max-w-max" to="/guide/"> Documentation </router-link>
     </div>

docs/components/home/flows/Basic.vue

@@ -97,10 +97,10 @@ onPaneReady((i) => emit('pane', i))
 <template>
   <div class="md:max-w-1/3 flex flex-col justify-center">
     <div class="flex flex-col gap-2 items-center md:items-start">
-      <h1>Feature-rich</h1>
+      <h1>Batteries-included</h1>
       <p>
-        Vue Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection, controls,
-        several event handlers and more.
+        Vue Flow comes with several built-in features including zooming, panning, zoom & pan controls, single & multi-selections, element dragging,
+        node and edge components and event handlers.
       </p>
       <router-link class="button max-w-max" to="/guide/"> Documentation </router-link>
     </div>

docs/components/home/flows/Intro.vue

@@ -2,35 +2,47 @@
 import { useVueFlow, VueFlow, Handle, Position } from '@braks/vue-flow'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import BoxNode from '../nodes/Box.vue'
+import Heart from '~icons/mdi/heart'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
-const { dimensions, instance, onPaneReady, getNodes, getNode, getEdge, updateEdge, edges } = useVueFlow({
+const initialEdges = [
+  {
+    id: 'eintro-examples',
+    type: 'smoothstep',
+    sourceHandle: 'a',
+    source: 'intro',
+    target: 'examples',
+    animated: true,
+    style: { strokeWidth: 2, stroke: '#8b5cf6' },
+  },
+  {
+    id: 'eintro-documentation',
+    type: 'smoothstep',
+    sourceHandle: 'a',
+    source: 'intro',
+    target: 'documentation',
+    animated: true,
+    style: { strokeWidth: 2, stroke: '#f97316' },
+  },
+  {
+    id: 'eintro-acknowledgement',
+    type: 'smoothstep',
+    sourceHandle: 'a',
+    source: 'intro',
+    target: 'acknowledgement',
+    animated: true,
+    style: { strokeWidth: 2, stroke: '#0ea5e9' },
+  },
+]
+const { dimensions, instance, onPaneReady, getNodes, getNode, getEdge, updateEdge, edges, setEdges } = useVueFlow({
   nodes: [
     { id: 'intro', type: 'box', position: { x: 0, y: 0 } },
     { id: 'examples', type: 'box', position: { x: -50, y: 400 } },
     { id: 'documentation', type: 'box', position: { x: 300, y: 400 } },
+    { id: 'acknowledgement', type: 'box', position: { x: 150, y: 500 } },
   ],
-  edges: [
-    {
-      id: 'eintro-examples',
-      type: 'smoothstep',
-      sourceHandle: 'a',
-      source: 'intro',
-      target: 'examples',
-      animated: true,
-      style: { strokeWidth: 2, stroke: '#8b5cf6' },
-    },
-    {
-      id: 'eintro-documentation',
-      type: 'smoothstep',
-      sourceHandle: 'a',
-      source: 'intro',
-      target: 'documentation',
-      animated: true,
-      style: { strokeWidth: 2, stroke: '#f97316' },
-    },
-  ],
+  edges: initialEdges,
   elementsSelectable: true,
   nodesDraggable: false,
   panOnDrag: false,
@@ -62,27 +74,51 @@ onPaneReady(({ fitView }) => {
               y: mainNode.dimensions.height * 2 + 50,
             }
             break
+          case 'acknowledgement':
+            node.position = {
+              x: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
+              y: mainNode.dimensions.height * 3,
+            }
+            break
         }
       })
 
       nextTick(() => {
-        const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
-          source: 'examples',
-          target: 'documentation',
-          targetHandle: null,
-          sourceHandle: null,
+        setEdges(() => {
+          return [
+            {
+              id: 'eintro-examples',
+              type: 'smoothstep',
+              sourceHandle: 'a',
+              source: 'intro',
+              target: 'examples',
+              animated: true,
+              style: { strokeWidth: 2, stroke: '#8b5cf6' },
+            },
+            {
+              id: 'eexamples-documentation',
+              type: 'smoothstep',
+              source: 'examples',
+              target: 'documentation',
+              animated: true,
+              style: { strokeWidth: 2, stroke: '#f97316' },
+            },
+            {
+              id: 'edocumentation-acknowledgement',
+              type: 'smoothstep',
+              source: 'documentation',
+              target: 'acknowledgement',
+              animated: true,
+              style: { strokeWidth: 2, stroke: '#0ea5e9' },
+            },
+          ]
         })
-        if (newEdge) edgeId.value = newEdge.id
 
         fitView({
           duration: 1500,
         })
       })
     } else {
-      fitView({
-        duration: 1500,
-      })
-
       getNodes.value.forEach((node) => {
         const mainNode = getNode.value('intro')!
         switch (node.id) {
@@ -98,17 +134,20 @@ onPaneReady(({ fitView }) => {
               y: mainNode.dimensions.height * 1.5,
             }
             break
+          case 'acknowledgement':
+            node.position = {
+              x: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
+              y: mainNode.dimensions.height * 2,
+            }
+            break
         }
       })
 
       nextTick(() => {
-        const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
-          source: 'intro',
-          target: 'documentation',
-          targetHandle: null,
-          sourceHandle: null,
+        setEdges(initialEdges)
+        fitView({
+          duration: 1500,
         })
-        if (newEdge) edgeId.value = newEdge.id
       })
     }
 
@@ -123,6 +162,13 @@ onPaneReady(({ fitView }) => {
 
   useResizeObserver(el, setNodes)
 })
+
+const scrollTo = () => {
+  const el = document.getElementById('acknowledgement')
+  if (el) {
+    el.scrollIntoView({ behavior: 'smooth' })
+  }
+}
 </script>
 <template>
   <VueFlow ref="el" class="dark:bg-black bg-white transition-colors duration-200 ease-in-out">
@@ -144,6 +190,7 @@ onPaneReady(({ fitView }) => {
           <router-link class="link group bg-orange-500" to="/guide/"> Read The Documentation </router-link>
         </div>
         <Handle type="target" :position="Position.Top" />
+        <Handle class="block md:hidden" type="source" :position="Position.Bottom" />
       </template>
       <template v-else-if="props.id === 'examples'">
         <div class="flex">
@@ -152,6 +199,12 @@ onPaneReady(({ fitView }) => {
         <Handle type="target" :position="Position.Top" />
         <Handle class="block md:hidden" type="source" :position="Position.Bottom" />
       </template>
+      <template v-else-if="props.id === 'acknowledgement'">
+        <div class="flex" @click="scrollTo">
+          <div class="link group bg-sky-500"><Heart class="text-red-500" /> Acknowledgement</div>
+        </div>
+        <Handle type="target" :position="Position.Top" />
+      </template>
     </template>
   </VueFlow>
 </template>

docs/components/home/flows/Nested.vue

@@ -58,8 +58,12 @@ onPaneReady((i) => emit('pane', i))
 <template>
   <div class="md:max-w-1/3 flex flex-col justify-center <md:pt-12">
     <div class="flex flex-col gap-2 items-center md:items-start">
-      <h1>Nested- & Subflows</h1>
-      <p>Vue Flow comes with built-in support for nested nodes and nested flows.</p>
+      <h1>Complex Flows</h1>
+      <p>
+        You want to visualize more complex ideas?
+        <br />
+        No worries! Vue Flow supports creating nested nodes and nested graphs out-of-the-box.
+      </p>
       <router-link class="button max-w-max" to="/guide/"> Documentation </router-link>
     </div>
   </div>

docs/components/home/flows/RGB.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { BackgroundVariant, VueFlow, Background, Controls, MiniMap, MiniMapNodeFunc, useVueFlow } from '@braks/vue-flow'
 import { breakpointsTailwind } from '@vueuse/core'
-import CustomEdge from './edges/Custom.vue'
-import RGBNode from './nodes/Input.vue'
-import RGBOutputNode from './nodes/Output.vue'
+import CustomEdge from '../edges/Custom.vue'
+import RGBNode from '../nodes/Input.vue'
+import RGBOutputNode from '../nodes/Output.vue'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
@@ -103,8 +103,7 @@ const nodeColor: MiniMapNodeFunc = (node) => {
     <div class="flex flex-col gap-2 items-center md:items-start">
       <h1>Customizable</h1>
       <p>
-        You can create your own node and edge types or just pass a custom style. Implement custom UIs inside your nodes and add
-        functionality to your edges.
+        You can expand on the existing features by using your own custom nodes and edges and implement any design and functionality you want.
       </p>
       <router-link class="button max-w-max" to="/guide/">Documentation</router-link>
     </div>