docs: add showcase section to home page

docs/components/home/Acknowledgement.vue

@@ -4,27 +4,34 @@ import Heart from '~icons/mdi/heart'
 
 <template>
   <div id="acknowledgement">
-    <div class="max-w-3/4 md:max-w-4xl mx-auto py-4 md:(pb-12 pt-6) text-center">
-      <h1 class="md:mb-8 flex justify-center items-center"><Heart class="text-red-500 mr-2" /> Acknowledgement</h1>
+    <div class="bg-black text-white dark:(bg-gray-100 text-black)">
+      <div class="max-w-3/4 md:max-w-4xl mx-auto py-4 md:py-12 lg:py-12 text-center">
+        <h1 class="md:(!mb-8) flex justify-center items-center gap-2"><Heart class="text-red-500" /> Acknowledgement</h1>
 
-      <p>
-        <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.
-      </p>
+        <p>
+          <span class="underline">First and foremost</span>: A huge <span class="font-semibold text-red-400">Thank you</span> to
+          the developers of <a href="https://webkid.io" target="_blank" class="text-green-500">Webkid</a>.
 
-      <br />
+          <span class="inline-block">
+            Without their continuous, amazing, open-source work, this project would not have been possible.
+          </span>
+        </p>
 
-      <p>
-        Vue Flow is built on top of existing features and code taken from
-        <a href="https://reactflow.dev" target="_blank" class="text-green-500">React Flow</a>. It replicates the basic features
-        found in React Flow (zoom, pan, graph, additional components and more) and brings them to the Vue 3 experience, with all
-        the fun reactivity and features like template slots etc. you know and love from Vue. If you're happy with Vue Flow,
-        <br />
-        <a href="https://github.com/sponsors/wbkd" target="_blank" class="text-lg font-bold text-green-500">
-          please consider supporting Webkid by donating.
-        </a>
-      </p>
+        <p>
+          <span class="font-semibold text-secondary">Vue Flow</span> is built on top of existing features and code taken from
+          <a href="https://reactflow.dev" target="_blank" class="text-green-500">React Flow</a>. It replicates the features found
+          in React Flow and brings them to the Vue 3 experience, with all the fun reactivity and features like template slots etc.
+          you know and love from Vue. If you're happy with Vue Flow,
+
+          <span class="inline-block text-xl font-medium">
+            please consider supporting <a href="https://webkid.io" target="_blank" class="text-green-500">Webkid</a> by
+            <a href="https://github.com/sponsors/wbkd" target="_blank" class="font-bold text-green-500"> donating </a> or
+            <a href="https://pro.reactflow.dev/" target="_blank" class="font-bold text-green-500">
+              subscribing to React Flow Pro.
+            </a>
+          </span>
+        </p>
+      </div>
     </div>
   </div>
 </template>

docs/components/home/Showcase.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="w-full">
+    <div class="max-w-3/4 md:max-w-4xl mx-auto py-4 md:py-12 lg:py-12 text-center">
+      <div class="flex flex-col items-center justify-center gap-2">
+        <h1>Showcase</h1>
+
+        <p class="text-lg">Vue Flow is used in a variety of projects and applications. Here are some of them:</p>
+
+        <div class="grid grid-cols-2 mt-8">
+          <div class="flex flex-col justify-center">
+            <div class="self-center w-full shadow-xl rounded-xl font-mono uppercase border-1 border-gray overflow-hidden">
+              <img src="/assets/octai.png" alt="Octai" />
+            </div>
+
+            <a href="https://octai.com" target="_blank">
+              <h2 class="text-3xl mt-6 font-semibold text-[#2196f3]">Octai</h2>
+            </a>
+
+            <h3 class="text-lg">Machine Learning NoCode Platform for Data Scientists and Developers.</h3>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

docs/src/.vitepress/theme/layouts/default.vue

@@ -30,9 +30,3 @@ watch(
 <template>
   <ParentLayout></ParentLayout>
 </template>
-
-<style>
-.page-footer {
-  @apply py-4 text-center;
-}
-</style>

docs/src/assets/index.css

@@ -5,6 +5,10 @@
   --vp-c-accent: #BB86FC;
 }
 
+.VPHome {
+  padding-bottom: 0 !important;
+}
+
 .VPNavBar.has-sidebar .content, .VPNav {
   background-color: rgba(var(--vp-c-bg), 0.75);
   backdrop-filter: blur(1px);

docs/src/auto-imports.d.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 export {}
 declare global {
@@ -89,9 +90,9 @@ declare global {
   const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
   const toRaw: typeof import('vue')['toRaw']
   const toReactive: typeof import('@vueuse/core')['toReactive']
-  const toRef: typeof import('@vueuse/core')['toRef']
+  const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
-  const toValue: typeof import('@vueuse/core')['toValue']
+  const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
@@ -278,5 +279,5 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component,ComponentPublicInstance,ComputedRef,InjectionKey,PropType,Ref,VNode } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
 }

docs/src/components.d.ts

@@ -3,11 +3,9 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     Acknowledgement: typeof import('./../components/home/Acknowledgement.vue')['default']
     Additional: typeof import('./../components/home/flows/Additional.vue')['default']
@@ -37,6 +35,7 @@ declare module '@vue/runtime-core' {
     RGB: typeof import('./../components/home/flows/RGB.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Showcase: typeof import('./../components/home/Showcase.vue')['default']
     Sidebar: typeof import('./../components/examples/dnd/Sidebar.vue')['default']
     SnappableConnectionLine: typeof import('./../components/examples/connection-radius/SnappableConnectionLine.vue')['default']
     Team: typeof import('./../components/home/Team.vue')['default']

docs/src/index.md

@@ -9,4 +9,6 @@ layout: home
 
 <Features />
 
+<Showcase />
+
 <Acknowledgement />