Update style

Author: eagleonhill

.vitepress/components/Footer.vue

@@ -1,9 +1,9 @@
 <template>
-  <footer class="w-full relative z-30 border-t"
+  <footer class="vp-raw w-full relative z-30 border-t"
     :style="{ borderColor: 'var(--vp-c-divider)', background: 'var(--vp-c-bg-soft)' }">
     <div class="max-w-7xl mx-auto px-6 py-8 text-[var(--vp-c-text-2)] text-md grid grid-cols-2 md:grid-cols-9 lg:grid-cols-12 gap-row-2 gap-y-10 md:gap-3 mb-6">
       <div class="col-span-2 md:col-span-3 lg:col-span-6 flex flex-col items-start justify-between gap-4">
-        <img src="/logo-h.png" alt="Velda Logo" class="w-40" />
+        <img src="/logo-h.png" alt="Velda Logo" class="h-10" />
         <div class="text-[var(--vp-c-text-3)] text-sm">&copy; {{ currentYear }} Velda. All rights reserved.</div>
       </div>
 

.vitepress/components/LeftRightLayout.vue

@@ -3,9 +3,9 @@
         <div class="lr-title">
             <h2 v-if="title" class="lr-title-heading" v-html="title"></h2>
             <template v-if="$slots.subtitle">
-                <p class="lr-title-sub">
+                <div class="lr-title-sub flex flex-col gap-4">
                     <slot name="subtitle" />
-                </p>
+                </div>
             </template>
             <p v-else-if="subtitle" class="lr-title-sub" v-html="subtitle"></p>
         </div>
@@ -81,6 +81,7 @@ const subtitle = props.subtitle
     font-size: 18px;
     line-height: 1.5;
     color: var(--vp-c-text-2);
+    gap: 1rem;
     margin: 0;
 }
 
@@ -93,7 +94,7 @@ const subtitle = props.subtitle
 
     /* Default: title on the left */
     .lr-grid .lr-title {
-        grid-column: 1 / span 4;
+        grid-column: 1 / span 5;
     }
 
     .lr-grid .lr-content {
@@ -102,7 +103,7 @@ const subtitle = props.subtitle
 
     /* When direction is right, swap positions */
     .lr-grid.direction-right .lr-title {
-        grid-column: 8 / span 4;
+        grid-column: 8 / span 5;
         grid-row: 1;
         /* title on the right */
     }
@@ -116,10 +117,6 @@ const subtitle = props.subtitle
     .lr-title-inner {
         padding: 2rem 1rem 0 0;
     }
-
-    .lr-content {
-        padding-top: 5rem;
-    }
 }
 
 /* Mobile: always title/subtitle first, stacking above content (default grid handles this) */

.vitepress/components/animations/CloningAnimation.vue

@@ -8,7 +8,7 @@
             </svg>
         </div>
 
-        <div class="flex flex-col lg:flex-row justify-center items-center w-full gap-8">
+        <div class="flex flex-col lg:flex-row justify-center items-center w-full gap-8 pt-10">
 
             <!-- Template Machine -->
             <div class="flex flex-col items-center w-full gap-4">

.vitepress/components/animations/RayAnimation.vue

@@ -207,8 +207,10 @@ async function startAnimation() {
  * Creates the Ray head node.
  */
 async function createHeadNode() {
-    const command = "vrun -s ray-head ray start --head";
+    const command = "# Run distributed data processing with Ray";
     await terminal.value.sendCommand(animator, command);
+    const command2 = "vrun -s ray-head ray start --head";
+    await terminal.value.sendCommand(animator, command2);
 
     showHeadNode.value = true;
 

index.md

@@ -95,7 +95,7 @@ Just your local dev experience — with unbounded power.</p>
 <LeftRightLayout title="Scale in Seconds">
   <template #subtitle>
     <p>Develop and scale — all in one platform. </p>
-    <p>Run training, serving, or data pipelines with a simple  <code>vrun</code> prefix.</p>
+    <p>Run training, serving, or data pipelines with a simple  <code>vrun</code> prefix, for any workload.</p>
   </template>
   <AutoAnimationWrapper
     :component="RayAnimation"
@@ -136,8 +136,7 @@ Just your local dev experience — with unbounded power.</p>
       </button>
   </div>
 </div>
-
-<div class="flex flex-row my-25 gap-4 text-center max-w-200">
+<div class="flex flex-col md:flex-row mt-40 mb-3 gap-4 text-center">
   <div class="w-full flex flex-col justify-between p-10 gap-6">
     <div class="gap-5">
       <h2>Individual</h2>
@@ -175,14 +174,22 @@ Just your local dev experience — with unbounded power.</p>
 
 .bottombg {
   position: relative;
+}
+
+.bottombg::before {
+  content: "";
+  position: absolute;
   left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
   width: 100vw;
+  height: 100%;
+  z-index: -1;
   box-sizing: border-box;
   background-image: url("/bg-hm.svg");
   background-repeat: no-repeat;
+  background-position: center center;
   background-size: cover;
 }