From e0f5344b601553f549a7eae3a12b00a3e7b002ff Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 6 Oct 2023 23:18:36 +0200
Subject: [PATCH] docs: update home page styles

---
 docs/components/home/Acknowledgement.vue | 16 +++++-----
 docs/components/home/Features.vue        |  2 +-
 docs/components/home/Home.vue            |  2 +-
 docs/components/home/Showcase.vue        | 37 +++++++++++++++---------
 docs/components/home/flows/Basic.vue     | 13 +++++++--
 docs/components/home/flows/RGB.vue       |  3 ++
 6 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/docs/components/home/Acknowledgement.vue b/docs/components/home/Acknowledgement.vue
index b0d2baf10a..3531050521 100644
--- a/docs/components/home/Acknowledgement.vue
+++ b/docs/components/home/Acknowledgement.vue
@@ -6,11 +6,11 @@ import Heart from '~icons/mdi/heart'
   <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>
+        <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>.
+          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.
@@ -18,15 +18,15 @@ import Heart from '~icons/mdi/heart'
         </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.
+          <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">
+            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>
diff --git a/docs/components/home/Features.vue b/docs/components/home/Features.vue
index fdd8efc79e..5d6253219f 100644
--- a/docs/components/home/Features.vue
+++ b/docs/components/home/Features.vue
@@ -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" />
diff --git a/docs/components/home/Home.vue b/docs/components/home/Home.vue
index cf3d5864b9..e6e18f8c6c 100644
--- a/docs/components/home/Home.vue
+++ b/docs/components/home/Home.vue
@@ -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 {
diff --git a/docs/components/home/Showcase.vue b/docs/components/home/Showcase.vue
index 99ab38cdbb..35778d516f 100644
--- a/docs/components/home/Showcase.vue
+++ b/docs/components/home/Showcase.vue
@@ -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 mb-12">
+    <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>
diff --git a/docs/components/home/flows/Basic.vue b/docs/components/home/flows/Basic.vue
index 7fc201fe6f..84551d2bb4 100644
--- a/docs/components/home/flows/Basic.vue
+++ b/docs/components/home/flows/Basic.vue
@@ -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,
   }
 }
 
diff --git a/docs/components/home/flows/RGB.vue b/docs/components/home/flows/RGB.vue
index c658e64c5d..d411c851b0 100644
--- a/docs/components/home/flows/RGB.vue
+++ b/docs/components/home/flows/RGB.vue
@@ -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>