From d0c61330b8f7712210f176c698a4b881c606f9d8 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 7 Oct 2023 12:22:07 +0200
Subject: [PATCH] docs: update home page styles

---
 docs/components/home/Acknowledgement.vue | 46 +++++++++++++-----------
 docs/components/home/Features.vue        |  2 +-
 docs/components/home/Showcase.vue        | 14 +++++---
 docs/src/.vitepress/theme/style.css      |  4 +++
 4 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/docs/components/home/Acknowledgement.vue b/docs/components/home/Acknowledgement.vue
index b32a0946..c3f81153 100644
--- a/docs/components/home/Acknowledgement.vue
+++ b/docs/components/home/Acknowledgement.vue
@@ -3,31 +3,35 @@ import Heart from '~icons/mdi/heart'
 </script>
 
 <template>
-  <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>
+  <div id="acknowledgement">
+    <div class="border-t-1 border-secondary pt-6">
+      <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-primary">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-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,
+        <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-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>
+          <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>
   </div>
 </template>
diff --git a/docs/components/home/Features.vue b/docs/components/home/Features.vue
index 5d625321..35d0da90 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 2xl:max-w-7xl m-auto py-12 md:py-24 text-center md:text-left"
+      class="flex flex-col divide-y divide-secondary 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/Showcase.vue b/docs/components/home/Showcase.vue
index 8f257f92..21892a2e 100644
--- a/docs/components/home/Showcase.vue
+++ b/docs/components/home/Showcase.vue
@@ -1,17 +1,21 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="w-full text-white bg-gradient-to-br from-secondary-500 to-secondary-100 dark:(!bg-none)">
-    <div class="max-w-5/6 2xl:max-w-7xl mx-auto py-4 md:py-12 lg:py-12">
+  <div
+    class="border-t-1 border-secondary w-full text-white bg-gradient-to-br from-secondary-500 to-secondary-100 dark:(!bg-none)"
+  >
+    <div class="max-w-5/6 2xl:max-w-7xl mx-auto py-12 md:py-16">
       <div class="flex flex-col items-center justify-center gap-2">
         <h1>Putting Ideas into Action: The Showcase</h1>
 
-        <p class="font-medium max-w-3/4 xl:max-w-1/2">
+        <p class="font-medium max-w-3/4 text-center">
           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 text-center md:text-left">
+        <div
+          class="divide-y divide-secondary md:divide-y-0 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"
@@ -30,7 +34,7 @@
             </div>
           </div>
 
-          <div class="flex-1 flex flex-col justify-center">
+          <div class="pt-12 md:pt-0 flex-1 flex flex-col justify-center">
             <div
               class="h-[200px] md:min-h-[300px] w-full shadow-xl rounded-xl font-mono uppercase border-1 border-gray overflow-hidden"
             >
diff --git a/docs/src/.vitepress/theme/style.css b/docs/src/.vitepress/theme/style.css
index 08becba6..8eb8c3c8 100644
--- a/docs/src/.vitepress/theme/style.css
+++ b/docs/src/.vitepress/theme/style.css
@@ -143,6 +143,10 @@
   padding-bottom: 0 !important;
 }
 
+.VPFooter {
+  @apply dark:(border-secondary)
+}
+
 .VPNavBar.has-sidebar .content, .VPNav {
   background-color: rgba(var(--vp-c-bg), 0.75);
   backdrop-filter: blur(1px);