alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add showcase section to home page

Browse Source
This commit is contained in:
braks
2023-10-06 17:12:38 +02:00
committed by Braks
parent aa2bbd62c2
commit 7ecf37b20c
8 changed files with 64 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/home/Acknowledgement.vue
+25 -18
View File
@@ -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
+27
View File
@@ -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>