docs: update home page styles
This commit is contained in:
braks
@@ -3,35 +3,31 @@ import Heart from '~icons/mdi/heart'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="acknowledgement">
|
||||
<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>
|
||||
<div id="acknowledgement mt-12">
|
||||
<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 min-w-8" /> Acknowledgement</h1>
|
||||
|
||||
<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>.
|
||||
<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-primary">Webkid</a>.
|
||||
|
||||
<span class="inline-block">
|
||||
Without their continuous, amazing, open-source work, this project would not have been possible.
|
||||
</span>
|
||||
</p>
|
||||
<span class="inline-block">
|
||||
Without their continuous, amazing, open-source work, this project would not have been possible.
|
||||
</span>
|
||||
</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,
|
||||
<p>
|
||||
<span class="font-semibold text-accent">Vue Flow</span> is built on top of existing features and code taken from
|
||||
<a href="https://reactflow.dev" target="_blank" class="text-primary">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>
|
||||
<span class="inline-block text-xl font-medium">
|
||||
please consider supporting <a href="https://webkid.io" target="_blank" class="text-primary">Webkid</a> by
|
||||
<a href="https://github.com/sponsors/wbkd" target="_blank" class="font-bold text-primary"> donating </a> or
|
||||
<a href="https://pro.reactflow.dev/" target="_blank" class="font-bold text-primary"> subscribing to React Flow Pro. </a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -27,7 +27,7 @@ onBeforeUnmount(stop)
|
||||
<template>
|
||||
<div ref="el" class="w-full">
|
||||
<div
|
||||
class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-5/6 xl:max-w-7xl m-auto py-12 md:py-24 text-center md:text-left"
|
||||
class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-5/6 2xl:max-w-7xl m-auto py-12 md:py-24 text-center md:text-left"
|
||||
>
|
||||
<div class="flex flex-col md:flex-row gap-12 md:gap-24">
|
||||
<Basic @pane="onLoad" />
|
||||
|
||||
@@ -25,7 +25,7 @@ onMounted(() => {
|
||||
<style lang="scss">
|
||||
.is-home {
|
||||
h1 {
|
||||
@apply text-xl lg:text-4xl mb-4 font-bold;
|
||||
@apply text-2xl md:text-3xl xl:text-4xl mb-4 font-bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
||||
@@ -1,26 +1,33 @@
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div class="max-w-5/6 lg:max-w-7xl mx-auto py-4 md:py-12 lg:py-12 text-center">
|
||||
<div class="w-full text-white bg-gradient-to-br from-secondary-500 to-secondary-100">
|
||||
<div class="max-w-5/6 2xl:max-w-7xl mx-auto py-4 md:py-12 lg:py-12">
|
||||
<div class="flex flex-col items-center justify-center gap-2">
|
||||
<h1>Showcase</h1>
|
||||
<h1>Putting Ideas into Action: The Showcase</h1>
|
||||
|
||||
<p class="text-lg">Vue Flow is used in a variety of projects and applications. Here are some of them:</p>
|
||||
<p class="font-medium max-w-3/4 xl:max-w-1/2">
|
||||
Whether you're a seasoned developer or just starting your journey with Vue Flow, this showcase offers inspiration and
|
||||
insights into what's possible. Dive in and discover the potential of Vue Flow for your next project.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-12 mt-8">
|
||||
<div class="flex-1 flex flex-col justify-center">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-12 mt-8 text-center md:text-left">
|
||||
<div class="flex-1 flex flex-col items-center md:items-start">
|
||||
<div
|
||||
class="h-[200px] md:min-h-[300px] w-full shadow-xl rounded-xl font-mono uppercase border-1 border-gray overflow-hidden"
|
||||
>
|
||||
<img class="object-cover h-full w-full" 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>
|
||||
<div class="px-1">
|
||||
<a href="https://octai.com" target="_blank">
|
||||
<h2 class="text-3xl mt-6 font-semibold inline-block">Octai</h2>
|
||||
</a>
|
||||
|
||||
<h3 class="text-lg">A Machine-Learning NoCode platform using a node-based UI for Data Scientists and Developers.</h3>
|
||||
<h3 class="text-lg">
|
||||
A Machine-Learning NoCode platform using a node-based UI for Data Scientists and Developers.
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col justify-center">
|
||||
@@ -30,11 +37,13 @@
|
||||
<img class="object-cover h-full w-full" src="/assets/kestra.webp" alt="Kestra" />
|
||||
</div>
|
||||
|
||||
<a href="https://octai.com" target="_blank">
|
||||
<h2 class="text-3xl mt-6 font-semibold text-[#4b0aaa]">Kestra</h2>
|
||||
</a>
|
||||
<div class="px-1">
|
||||
<a href="https://octai.com" target="_blank">
|
||||
<h2 class="text-3xl mt-6 font-semibold inline-block">Kestra</h2>
|
||||
</a>
|
||||
|
||||
<h3 class="text-lg">An open-source orchestrator that makes both scheduled and event-driven workflows easy.</h3>
|
||||
<h3 class="text-lg">An open-source orchestrator that makes both scheduled and event-driven workflows easy.</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,7 +11,15 @@ const emit = defineEmits(['pane'])
|
||||
const getNodeClass: ClassFunc<GraphNode> = (el) => {
|
||||
const classes = ['font-semibold', '!border-2', 'transition-colors', 'duration-300', 'ease-in-out']
|
||||
if (el.selected) {
|
||||
classes.push(...['!border-primary/80', '!shadow-md', '!shadow-primary/50', '!bg-primary-100/50', '!text-gray-700'])
|
||||
classes.push(
|
||||
...[
|
||||
'!border-primary/80',
|
||||
'!shadow-lg',
|
||||
'shadow-secondary dark:(!shadow-primary/50)',
|
||||
'!bg-primary-100/50 dark:(!bg-primary-300/80)',
|
||||
'!text-gray-700 dark:(!text-white)',
|
||||
],
|
||||
)
|
||||
}
|
||||
|
||||
return classes.join(' ')
|
||||
@@ -26,7 +34,8 @@ const getEdgeStyle: StyleFunc<GraphEdge> = (el) => {
|
||||
const sourceNodeSelected = el.sourceNode.selected
|
||||
return {
|
||||
transition: 'stroke ease-in-out 300ms',
|
||||
stroke: el.selected || sourceNodeSelected ? 'var(--secondary)' : '',
|
||||
stroke: el.selected || sourceNodeSelected ? 'var(--primary)' : '',
|
||||
strokeWidth: 2,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -95,15 +95,18 @@ const nodeColor: MiniMapNodeFunc = (node) => {
|
||||
<RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
|
||||
</template>
|
||||
<Controls class="hidden md:block" />
|
||||
|
||||
<Background
|
||||
:variant="BackgroundVariant.Lines"
|
||||
:pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
|
||||
:gap="48"
|
||||
:size="1"
|
||||
/>
|
||||
|
||||
<MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right" :node-color="nodeColor" />
|
||||
</VueFlow>
|
||||
</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>Customizable</h1>
|
||||
|
||||
Reference in New Issue
Block a user