docs: update home page styles

bcakmakoglu · Oct 6, 2023 · 750c01d · 750c01d · vercel · Oct 6, 2023
1 parent 28fd495
commit 750c01d
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 43 deletions.
diff --git a/docs/components/home/Acknowledgement.vue b/docs/components/home/Acknowledgement.vue
@@ -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>
diff --git 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
@@ -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
@@ -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>

diff --git 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
@@ -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>