docs: update home page styles

Author: bcakmakoglu

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>

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" />

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"
             >

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);