From 5fa87c3d2728e7aea058e00a9148a2f3321df93a Mon Sep 17 00:00:00 2001
From: Joanna May <joannamadisonmay@gmail.com>
Date: Fri, 23 Aug 2024 15:05:03 -0500
Subject: [PATCH] fix: demo card links, layout improvements, nav improvements

---
 astro.config.mjs                              |  2 +-
 src/components/vgv_card/vgv-card-header.astro |  4 +-
 src/components/vgv_card/vgv-card.astro        | 14 ++---
 src/components/vgv_nav/vgv-nav.astro          | 17 +++++
 src/pages/index.astro                         | 62 +++++++++++++++++--
 src/styles/vgv_brand.css                      |  8 ++-
 6 files changed, 89 insertions(+), 18 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index d1f4ee8..6dbfa00 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -11,7 +11,7 @@ export default defineConfig({
   integrations: [
     starlight({
       favicon: "./public/favicon.png",
-      title: "Very Good Engineering",
+      title: "VGV Engineering",
       head: [
         {
           // Fix theme flickering on page load.
diff --git a/src/components/vgv_card/vgv-card-header.astro b/src/components/vgv_card/vgv-card-header.astro
index db42d64..617799f 100644
--- a/src/components/vgv_card/vgv-card-header.astro
+++ b/src/components/vgv_card/vgv-card-header.astro
@@ -2,13 +2,13 @@
 
 ---
 
-<div>
+<div class="grow flex flex-col">
   <h2
     class="text-2xl font-semibold lg:tracking-tight mt-4 text-center w-[100%]"
   >
     <slot name="title" />
   </h2>
-  <p class="text-md my-6 text-center text-pretty">
+  <p class="grow text-md my-6 text-center text-pretty">
     <slot name="subtitle" />
   </p>
 </div>
diff --git a/src/components/vgv_card/vgv-card.astro b/src/components/vgv_card/vgv-card.astro
index 751250e..539cac0 100644
--- a/src/components/vgv_card/vgv-card.astro
+++ b/src/components/vgv_card/vgv-card.astro
@@ -6,16 +6,16 @@ interface Props {
 const props = Astro.props;
 ---
 
-<a href={props.url} class="contents">
-  <div
-    class="drop-shadow-lg rounded-lg overflow-hidden h-[100%] w-[100%] max-w-[478px] bg-[var(--vgv-card-bg)]"
-  >
+<div
+  class="drop-shadow-lg rounded-lg overflow-hidden h-[100%] w-[100%] max-w-[478px] bg-[var(--vgv-card-bg)] flex flex-col"
+>
+  <a href={props.url} class="contents">
     <slot name="thumbnail" />
-    <div class="p-4">
+    <div class="m-4 grow flex flex-col justify-between">
       <slot />
     </div>
-  </div>
-</a>
+  </a>
+</div>
 
 <style>
   a,
diff --git a/src/components/vgv_nav/vgv-nav.astro b/src/components/vgv_nav/vgv-nav.astro
index 2c08591..ceeedb4 100644
--- a/src/components/vgv_nav/vgv-nav.astro
+++ b/src/components/vgv_nav/vgv-nav.astro
@@ -5,6 +5,9 @@ import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
 import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
 import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
 import type { Props } from "@astrojs/starlight/props";
+
+// Only show docs link from homepage
+const shouldShowLinks = Astro.url.pathname === "/";
 ---
 
 <header class="fixed top-0 w-[100%] transition-all backdrop-blur-2xl z-20">
@@ -16,6 +19,20 @@ import type { Props } from "@astrojs/starlight/props";
       </div>
       <div class="sl-flex">
         <Search {...Astro.props} />
+        <nav
+          class="flex flex-row grow sm:justify-center md:justify-start align-baseline items-center"
+        >
+          {
+            shouldShowLinks && (
+              <a
+                href="/architecture"
+                class="sm:ml-4 md:ml-8 mx-4 mt-[1px] flex text-lg no-underline hover:underline visited:text-inherit active:text-inherit"
+              >
+                Docs
+              </a>
+            )
+          }
+        </nav>
       </div>
       <div class="sl-hidden md:sl-flex right-group">
         <div class="sl-flex social-icons">
diff --git a/src/pages/index.astro b/src/pages/index.astro
index bbdd9bd..2de0d6e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -308,6 +308,23 @@ const actions = props.entry.data.hero?.actions ?? [];
                 <span> Music visualizer </span>
               </li>
             </ul>
+            <div class="mt-8 flex flex-row justify-center gap-4">
+              <CallToAction
+                attrs={{ class: "" }}
+                icon={{ type: "icon", name: "laptop" }}
+                variant="primary"
+                link="https://vgventures.github.io/airplane_entertainment_system/"
+              >
+                Online Demo
+              </CallToAction>
+              <CallToAction
+                attrs={{ class: "" }}
+                variant="secondary"
+                icon={{ type: "icon", name: "github" }}
+                link="https://github.com/VGVentures/airplane_entertainment_system"
+                >GitHub</CallToAction
+              >
+            </div>
           </span>
         </VgvCardHeader>
       </VgvCard>
@@ -346,6 +363,23 @@ const actions = props.entry.data.hero?.actions ?? [];
                 </span>
               </li>
             </ul>
+            <div class="mt-8 flex flex-row justify-center gap-4">
+              <CallToAction
+                attrs={{ class: "" }}
+                icon={{ type: "icon", name: "laptop" }}
+                variant="primary"
+                link="https://vgventures.github.io/financial_dashboard/"
+              >
+                Online Demo
+              </CallToAction>
+              <CallToAction
+                attrs={{ class: "" }}
+                variant="secondary"
+                icon={{ type: "icon", name: "github" }}
+                link="https://github.com/VGVentures/financial_dashboard"
+                >GitHub</CallToAction
+              >
+            </div>
           </span>
         </VgvCardHeader>
       </VgvCard>
@@ -369,10 +403,11 @@ const actions = props.entry.data.hero?.actions ?? [];
             <ul class="pl-4 mt-6 text-center md:text-left">
               <li class="flex gap-2">
                 <Icon name="approve-check" color="green" class="size-6" />
-                <span>
-                  Animated tachometer created with
-                  <a href="https://flame-engine.org/">Flame</a>
-                </span>
+                <div>
+                  Animated tachometer created with <a
+                    href="https://flame-engine.org/">Flame</a
+                  >
+                </div>
               </li>
               <li class="flex gap-2">
                 <Icon name="approve-check" color="green" class="size-6" />
@@ -383,6 +418,23 @@ const actions = props.entry.data.hero?.actions ?? [];
                 <span> Embedded game in a Flutter app </span>
               </li>
             </ul>
+            <div class="mt-8 flex flex-row justify-center gap-4">
+              <CallToAction
+                attrs={{ class: "" }}
+                icon={{ type: "icon", name: "laptop" }}
+                variant="primary"
+                link="https://vgventures.github.io/vehicle_cockpit/"
+              >
+                Online Demo
+              </CallToAction>
+              <CallToAction
+                attrs={{ class: "" }}
+                variant="secondary"
+                icon={{ type: "icon", name: "github" }}
+                link="https://github.com/VGVentures/vehicle_cockpit"
+                >GitHub</CallToAction
+              >
+            </div>
           </span>
         </VgvCardHeader>
       </VgvCard>
@@ -409,7 +461,7 @@ const actions = props.entry.data.hero?.actions ?? [];
         <GithubCard owner="flutter" repo="photobooth" />
         <GithubCard owner="flutter" repo="holobooth" />
         <GithubCard owner="VGVentures" repo="io_crossword" />
-        <GithubCard owner="VGVentures" repo="very_good_adventures" />
+        <GithubCard owner="VeryGoodOpenSource" repo="very_good_ranch" />
       </VgvHeroBreakoutVertical>
     </div>
   </div>
diff --git a/src/styles/vgv_brand.css b/src/styles/vgv_brand.css
index 8723721..6a3afaf 100644
--- a/src/styles/vgv_brand.css
+++ b/src/styles/vgv_brand.css
@@ -43,7 +43,8 @@
 :root[data-theme="light"] {
   --vgv-card-bg: #fafbfe;
   --vgv-card-bg-hover: var(--vgv-gray-10);
-  --vgv-card-fg: black;
+  --vgv-card-fg: var(--vgv-gray-80);
+  --vgv-card-fg-hover: var(--vgv-blue-80);
   --vgv-card-shadow: drop-shadow(0px 0px 8px var(--vgv-gray-30));
   --vgv-card-shadow-hover: drop-shadow(0px 0px 10px var(--vgv-gray-35));
 
@@ -64,15 +65,16 @@
   --vgv-card-bg: var(--vgv-gray-80);
   --vgv-card-bg-hover: var(--vgv-gray-70);
   --vgv-card-fg: white;
+  --vgv-card-fg-hover: var(--vgv-blue-60);
   --vgv-card-shadow: drop-shadow(0px 0px 8px var(--vgv-gray-80));
   --vgv-card-shadow-hover: drop-shadow(0px 0px 16px var(--vgv-gray-60));
 
   --vgv-footer-text: var(--vgv-gray-30);
   --vgv-footer-bg: var(--vgv-gray-80);
 
-  --vgv-nav-bg: transparent;
+  --vgv-nav-bg: black;
   --vgv-nav-glow: var(--vgv-gray-80);
-  --vgv-nav-opacity: 0;
+  --vgv-nav-opacity: 0.4;
 
   --vgv-home-bg: var(--sl-color-bg);