Skip to content

Commit 750c01d

Browse files
bcakmakoglubcakmakoglu
committed
docs: update home page styles
1 parent 28fd495 commit 750c01d

File tree

6 files changed

+60
-43
lines changed

6 files changed

+60
-43
lines changed

‎docs/components/home/Acknowledgement.vue‎

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,31 @@ import Heart from '~icons/mdi/heart'
33
</script>
44

55
<template>
6-
<div id="acknowledgement">
7-
<div class="bg-black text-white dark:(bg-gray-100 text-black)">
8-
<div class="max-w-3/4 md:max-w-4xl mx-auto py-4 md:py-12 lg:py-12 text-center">
9-
<h1 class="md:(!mb-8) flex justify-center items-center gap-2"><Heart class="text-red-500" /> Acknowledgement</h1>
6+
<div id="acknowledgement mt-12">
7+
<div class="max-w-3/4 md:max-w-4xl mx-auto py-4 md:py-12 lg:py-12 text-center">
8+
<h1 class="md:(!mb-8) flex justify-center items-center gap-2"><Heart class="text-red-500 min-w-8" /> Acknowledgement</h1>
109

11-
<p>
12-
<span class="underline">First and foremost</span>: A huge <span class="font-semibold text-red-400">Thank you</span> to
13-
the developers of <a href="https://webkid.io" target="_blank" class="text-green-500">Webkid</a>.
10+
<p>
11+
<span class="underline">First and foremost</span>: A huge <span class="font-semibold text-red-400">Thank you</span> to the
12+
developers of <a href="https://webkid.io" target="_blank" class="text-primary">Webkid</a>.
1413

15-
<span class="inline-block">
16-
Without their continuous, amazing, open-source work, this project would not have been possible.
17-
</span>
18-
</p>
14+
<span class="inline-block">
15+
Without their continuous, amazing, open-source work, this project would not have been possible.
16+
</span>
17+
</p>
1918

20-
<p>
21-
<span class="font-semibold text-secondary">Vue Flow</span> is built on top of existing features and code taken from
22-
<a href="https://reactflow.dev" target="_blank" class="text-green-500">React Flow</a>. It replicates the features found
23-
in React Flow and brings them to the Vue 3 experience, with all the fun reactivity and features like template slots etc.
24-
you know and love from Vue. If you're happy with Vue Flow,
19+
<p>
20+
<span class="font-semibold text-accent">Vue Flow</span> is built on top of existing features and code taken from
21+
<a href="https://reactflow.dev" target="_blank" class="text-primary">React Flow</a>. It replicates the features found in
22+
React Flow and brings them to the Vue 3 experience, with all the fun reactivity and features like template slots etc. you
23+
know and love from Vue. If you're happy with Vue Flow,
2524

26-
<span class="inline-block text-xl font-medium">
27-
please consider supporting <a href="https://webkid.io" target="_blank" class="text-green-500">Webkid</a> by
28-
<a href="https://github.com/sponsors/wbkd" target="_blank" class="font-bold text-green-500"> donating </a> or
29-
<a href="https://pro.reactflow.dev/" target="_blank" class="font-bold text-green-500">
30-
subscribing to React Flow Pro.
31-
</a>
32-
</span>
33-
</p>
34-
</div>
25+
<span class="inline-block text-xl font-medium">
26+
please consider supporting <a href="https://webkid.io" target="_blank" class="text-primary">Webkid</a> by
27+
<a href="https://github.com/sponsors/wbkd" target="_blank" class="font-bold text-primary"> donating </a> or
28+
<a href="https://pro.reactflow.dev/" target="_blank" class="font-bold text-primary"> subscribing to React Flow Pro. </a>
29+
</span>
30+
</p>
3531
</div>
3632
</div>
3733
</template>

‎docs/components/home/Features.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ onBeforeUnmount(stop)
2727
<template>
2828
<div ref="el" class="w-full">
2929
<div
30-
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"
30+
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"
3131
>
3232
<div class="flex flex-col md:flex-row gap-12 md:gap-24">
3333
<Basic @pane="onLoad" />

‎docs/components/home/Home.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ onMounted(() => {
2525
<style lang="scss">
2626
.is-home {
2727
h1 {
28-
@apply text-xl lg:text-4xl mb-4 font-bold;
28+
@apply text-2xl md:text-3xl xl:text-4xl mb-4 font-bold;
2929
}
3030
3131
h2 {

‎docs/components/home/Showcase.vue‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,33 @@
11
<script lang="ts" setup></script>
22

33
<template>
4-
<div class="w-full">
5-
<div class="max-w-5/6 lg:max-w-7xl mx-auto py-4 md:py-12 lg:py-12 text-center">
4+
<div class="w-full text-white bg-gradient-to-br from-secondary-500 to-secondary-100">
5+
<div class="max-w-5/6 2xl:max-w-7xl mx-auto py-4 md:py-12 lg:py-12">
66
<div class="flex flex-col items-center justify-center gap-2">
7-
<h1>Showcase</h1>
7+
<h1>Putting Ideas into Action: The Showcase</h1>
88

9-
<p class="text-lg">Vue Flow is used in a variety of projects and applications. Here are some of them:</p>
9+
<p class="font-medium max-w-3/4 xl:max-w-1/2">
10+
Whether you're a seasoned developer or just starting your journey with Vue Flow, this showcase offers inspiration and
11+
insights into what's possible. Dive in and discover the potential of Vue Flow for your next project.
12+
</p>
1013

11-
<div class="flex flex-col md:flex-row justify-between items-center gap-12 mt-8">
12-
<div class="flex-1 flex flex-col justify-center">
14+
<div class="flex flex-col md:flex-row justify-between items-center gap-12 mt-8 text-center md:text-left">
15+
<div class="flex-1 flex flex-col items-center md:items-start">
1316
<div
1417
class="h-[200px] md:min-h-[300px] w-full shadow-xl rounded-xl font-mono uppercase border-1 border-gray overflow-hidden"
1518
>
1619
<img class="object-cover h-full w-full" src="/assets/octai.png" alt="Octai" />
1720
</div>
1821

19-
<a href="https://octai.com" target="_blank">
20-
<h2 class="text-3xl mt-6 font-semibold text-[#2196f3]">Octai</h2>
21-
</a>
22+
<div class="px-1">
23+
<a href="https://octai.com" target="_blank">
24+
<h2 class="text-3xl mt-6 font-semibold inline-block">Octai</h2>
25+
</a>
2226

23-
<h3 class="text-lg">A Machine-Learning NoCode platform using a node-based UI for Data Scientists and Developers.</h3>
27+
<h3 class="text-lg">
28+
A Machine-Learning NoCode platform using a node-based UI for Data Scientists and Developers.
29+
</h3>
30+
</div>
2431
</div>
2532

2633
<div class="flex-1 flex flex-col justify-center">
@@ -30,11 +37,13 @@
3037
<img class="object-cover h-full w-full" src="/assets/kestra.webp" alt="Kestra" />
3138
</div>
3239

33-
<a href="https://octai.com" target="_blank">
34-
<h2 class="text-3xl mt-6 font-semibold text-[#4b0aaa]">Kestra</h2>
35-
</a>
40+
<div class="px-1">
41+
<a href="https://octai.com" target="_blank">
42+
<h2 class="text-3xl mt-6 font-semibold inline-block">Kestra</h2>
43+
</a>
3644

37-
<h3 class="text-lg">An open-source orchestrator that makes both scheduled and event-driven workflows easy.</h3>
45+
<h3 class="text-lg">An open-source orchestrator that makes both scheduled and event-driven workflows easy.</h3>
46+
</div>
3847
</div>
3948
</div>
4049
</div>

‎docs/components/home/flows/Basic.vue‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,15 @@ const emit = defineEmits(['pane'])
1111
const getNodeClass: ClassFunc<GraphNode> = (el) => {
1212
const classes = ['font-semibold', '!border-2', 'transition-colors', 'duration-300', 'ease-in-out']
1313
if (el.selected) {
14-
classes.push(...['!border-primary/80', '!shadow-md', '!shadow-primary/50', '!bg-primary-100/50', '!text-gray-700'])
14+
classes.push(
15+
...[
16+
'!border-primary/80',
17+
'!shadow-lg',
18+
'shadow-secondary dark:(!shadow-primary/50)',
19+
'!bg-primary-100/50 dark:(!bg-primary-300/80)',
20+
'!text-gray-700 dark:(!text-white)',
21+
],
22+
)
1523
}
1624
1725
return classes.join(' ')
@@ -26,7 +34,8 @@ const getEdgeStyle: StyleFunc<GraphEdge> = (el) => {
2634
const sourceNodeSelected = el.sourceNode.selected
2735
return {
2836
transition: 'stroke ease-in-out 300ms',
29-
stroke: el.selected || sourceNodeSelected ? 'var(--secondary)' : '',
37+
stroke: el.selected || sourceNodeSelected ? 'var(--primary)' : '',
38+
strokeWidth: 2,
3039
}
3140
}
3241

‎docs/components/home/flows/RGB.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,15 +95,18 @@ const nodeColor: MiniMapNodeFunc = (node) => {
9595
<RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
9696
</template>
9797
<Controls class="hidden md:block" />
98+
9899
<Background
99100
:variant="BackgroundVariant.Lines"
100101
:pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
101102
:gap="48"
102103
:size="1"
103104
/>
105+
104106
<MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right" :node-color="nodeColor" />
105107
</VueFlow>
106108
</div>
109+
107110
<div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
108111
<div class="flex flex-col gap-2 items-center md:items-start">
109112
<h1>Customizable</h1>

0 commit comments

Comments
 (0)