docs(guide): update intro page

docs/src/.vitepress/config.mts

@@ -106,6 +106,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
       }),
       Icons({
         compiler: 'vue3',
+        defaultClass: 'inline-block align-middle'
       }),
     ],
   },

docs/src/.vitepress/windi.config.ts

@@ -21,10 +21,6 @@ export default defineConfig({
     scrollbar,
   ],
 
-  shortcuts: {
-    'primary-gradient': 'bg-gradient-to-b from-accent-500 via-accent-700 to-accent-900',
-  },
-
   theme: {
     extend: {
       colors: {

docs/src/guide/getting-started.md

@@ -32,32 +32,35 @@ and [<span class="font-bold text-purple-500">edges</span>](/typedocs/types/Edge)
 Nodes additionally need a specific position, while edges require a source and a
 target, both represented by node ids.
 
-Below is a basic example:
+::: warning Attention!
+To ensure Vue Flow's is correctly displayed, make sure you include the necessary styles.
+
+Refer to the [Theming](/guide/theming) section for additional information.
+:::
 
 ```vue
-
 <script setup>
-  import {VueFlow} from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
 
-  const elements = ref([
-    // Nodes
-    // An input node, specified by using `type: 'input'`
-    {id: '1', type: 'input', label: 'Node 1', position: {x: 250, y: 5}},
+const elements = ref([
+  // Nodes
+  // An input node, specified by using `type: 'input'`
+  {id: '1', type: 'input', label: 'Node 1', position: {x: 250, y: 5}},
 
-    // Default nodes, you can omit `type: 'default'`
-    {id: '2', label: 'Node 2', position: {x: 100, y: 100},},
-    {id: '3', label: 'Node 3', position: {x: 400, y: 100}},
+  // Default nodes, you can omit `type: 'default'`
+  {id: '2', label: 'Node 2', position: {x: 100, y: 100},},
+  {id: '3', label: 'Node 3', position: {x: 400, y: 100}},
 
-    // An output node, specified by using `type: 'output'`
-    {id: '4', type: 'output', label: 'Node 4', position: {x: 400, y: 200}},
+  // An output node, specified by using `type: 'output'`
+  {id: '4', type: 'output', label: 'Node 4', position: {x: 400, y: 200}},
 
-    // Edges
-    // Most basic edge, only consists of an id, source-id and target-id
-    {id: 'e1-3', source: '1', target: '3'},
+  // Edges
+  // Most basic edge, only consists of an id, source-id and target-id
+  {id: 'e1-3', source: '1', target: '3'},
 
-    // An animated edge
-    {id: 'e1-2', source: '1', target: '2', animated: true},
-  ])
+  // An animated edge
+  {id: 'e1-2', source: '1', target: '2', animated: true},
+])
 </script>
 
 <template>
@@ -73,9 +76,6 @@ Below is a basic example:
 </style>
 ```
 
-::: warning To ensure Vue Flow's functionality and design are optimally displayed, make sure you include the necessary
-styles. Refer to the [Theming](/guide/theming) section for additional information. :::
-
 ## TypeScript
 
 As Vue Flow is entirely written in TypeScript, we highly recommend utilizing TypeScript for improved developer

docs/src/guide/index.md

@@ -2,35 +2,71 @@
 title: Introduction
 ---
 
-# Introduction
+<script setup>
+import PowerPlug from '~icons/mdi/power-plug';
+import Flash from '~icons/mdi/flash';
+import Lifebuoy from '~icons/mdi/lifebuoy';
+import Puzzle from '~icons/mdi/puzzle';
+import Speedometer from '~icons/mdi/speedometer';
+import Cogs from '~icons/mdi/cogs';
+import CubeOutline from '~icons/mdi/cube-outline';
+import Image from '~icons/mdi/image';
+import MapMarkerPath from '~icons/mdi/map-marker-path';
+import Gamepad from '~icons/mdi/gamepad';
+import Wrench from '~icons/mdi/wrench';
+import ArrowExpand from '~icons/mdi/arrow-expand';
+import LockCheck from '~icons/mdi/lock-check';
+</script>
+
+# Welcome to Vue Flow!
 
 ## What is Vue Flow?
 
-Vue Flow is a Vue 3 library that brings interactivity to flowcharts and graphs.
+Vue Flow is a bridge to the world of interactive flowcharts and graphs, empowering you to bring dynamism and
+interactivity to flowcharts and graphic representations.
+Whether it's crafting personal diagrams, generating dynamic editors, or anything else your imagination conjures up, Vue
+Flow is your creative companion.
 
-It is a tool to build your own diagrams, editors and whatever your imagination allows for.
+Vue Flow makes it effortless to customize and extend basic functionalities by allowing the integration of your own
+bespoke nodes and edges.
+Additional components such as Background, Minimap, and Controls further enrich the interface,
+transforming your creations into engaging platforms.
 
-Easily implement your own custom nodes and edges and expand on the basic functionality and on top of that Vue Flow comes
-with a couple of additional components like a Background, a Minimap and Controls.
+Explore the [examples](/examples/) if you're eager to jump right in and get your hands on some code!
 
-Check out the [examples](/examples/) if you want to dive directly into the code.
+## <span class="flex gap-2 items-center"><Flash class="text-yellow-500" /> Key Features</span>
 
-## Key Features
+### <span class="flex gap-2 items-center"><Lifebuoy class="text-red-500" /> Seamless Setup</span>
 
-- 👶 __Easy setup__: Get started hassle-free - Built-in zoom- & pan features, element dragging, selection and much more
+Vue Flow gets you into the action quickly. With built-in features like element dragging, zooming and panning, and
+selection, Vue Flow is ready to go right out of the box.
 
-- 🎨 __Customizable__: Use your own custom nodes, edges, connection lines and expand on the Vue Flows functionality
+### <span class="flex gap-2 items-center"><Puzzle class="text-green-500" /> Customizable</span>
 
-- 🚀 __Fast__: Tracks changes reactively and only re-renders the appropriate elements
+Vue Flow is yours to shape. From custom nodes and edges to connection lines, you can extend the functionality of Vue
+Flow to fit your creative needs.
 
-- 🧲 __Utils & Composition__: Comes with graph helper and state composable functions for advanced uses
+### <span class="flex gap-2 items-center"><Speedometer class="text-" /> Efficient and Responsive</span>
 
-- 📦 __Additional Components__:
+Changes are tracked reactively by Vue Flow, ensuring that only the necessary elements are re-rendered.
 
-  - 🖼 Background: With two built-in patterns and some configuration options like height, width or color.
+### <span class="flex gap-2 items-center"><Cogs class="text-gray-400" /> Utilities and Composability</span>
 
-  - 🧭 Minimap: Shows current nodes in a small map shape in the bottom right corner
+Vue Flow is designed for complex uses, with built-in graph helper and state composable functions.
 
-  - 🕹 Controls: Control zoom behavior from a panel on the bottom left
+### <span class="flex gap-2 items-center"><CubeOutline class="text-accent" /> Additional Components</span>
 
-- 🦾 __Reliable__: Fully written in TypeScript
+Vue Flow comes with supplementary components to enhance the user interface.
+
+- <Image class="text-blue-500" /> [Background](/guide/components/background): Vue Flow offers two built-in patterns, with further configurations like
+  height, width, or color for personalizations.
+- <MapMarkerPath class="text-pink-500" /> [MiniMap](/guide/components/minimap): This feature provides a birds-eye view of your nodes in a small map,
+  located at the bottom-right corner.
+- <Gamepad class="text-purple-500" /> [Controls](/guide/components/controls): Vue Flow lets you handle zoom functions from a control panel on the bottom
+  left.
+- <Wrench class="text-fuchsia-500" /> [NodeToolbar](/guide/components/node-toolbar): Get access to essential tools directly from the Node itself for easy manipulation and control of the Node
+- <ArrowExpand class="text-yellow-500" /> [NodeResizer](/guide/components/node-resizer): Seamlessly adjust the size of your Node to fit your needs and preferences.
+
+### <span class="flex gap-2 items-center"><LockCheck class="text-blue-500" /> Reliable</span>
+
+Vue Flow is written fully in TypeScript, ensuring a reliable and secure experience for developers.