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

docs: update home page styles

Browse Source
This commit is contained in:
braks
2023-10-06 23:39:02 +02:00
committed by Braks
parent 28fd4955f4
commit 750c01df9d
6 changed files with 60 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/home/Showcase.vue
+23 -14
View File
@@ -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>