fix: url's and layout

VGVentures · Aug 29, 2024 · 2a18f6e · 2a18f6e
1 parent 264c82e
commit 2a18f6e
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 28 deletions.
diff --git a/src/components/vgv_hero/vgv-hero-breakout.astro b/src/components/vgv_hero/vgv-hero-breakout.astro
@@ -1,36 +1,53 @@
 ---
 interface Props {
-  // featureImage: ImageMetadata;
+  firstUrl?: string;
+  secondUrl?: string;
 }
 
-// const props = Astro.props;
+const props = Astro.props;
 ---
 
 <div
   class="max-w-screen-xl px-5 mx-auto flex flex-col items-center justify-center dark:text-slate-300 text-slate-600"
 >
   <slot name="heading" />
 
-  <div class="grid md:grid-cols-2 py-10 min-w-[100%]">
-    <div class="grid place-items-center pb-10 md:pb-0 md:order-2">
-      <slot name="first-image" />
-    </div>
+  <a class="block quiet" href={props.firstUrl ?? ""}>
+    <div class="quiet grid md:grid-cols-2 py-10 min-w-[100%]">
+      <div class="grid place-items-center pb-10 md:pb-0 md:order-2 mx-8">
+        <slot name="first-image" />
+      </div>
 
-    <div class="grid place-items-center">
-      <div class="max-w-lg h-[100%]">
-        <slot name="first-content" />
+      <div class="grid place-items-center">
+        <div class="max-w-lg h-[100%]">
+          <slot name="first-content" />
+        </div>
       </div>
     </div>
-  </div>
+  </a>
 
-  <div class="grid md:grid-cols-2 py-10 min-w-[100%]">
-    <div class="grid place-items-center pb-10 md:pb-0 order-1">
-      <slot name="second-image" />
-    </div>
-    <div class="grid place-items-center order-1">
-      <div class="max-w-lg h-[100%]">
-        <slot name="second-content" />
+  <a class="block quiet" href={props.secondUrl ?? ""}>
+    <div class="grid md:grid-cols-2 py-10 min-w-[100%]">
+      <div class="grid place-items-center pb-10 md:pb-0 order-1 mx-8">
+        <slot name="second-image" />
+      </div>
+      <div class="grid place-items-center order-1">
+        <div class="max-w-lg h-[100%]">
+          <slot name="second-content" />
+        </div>
       </div>
     </div>
-  </div>
+  </a>
 </div>
+
+<style>
+  .quiet,
+  .quiet:visited,
+  .quiet:hover,
+  .quiet:active,
+  .quiet:focus,
+  .quiet:focus-visible {
+    text-decoration: inherit;
+    color: inherit;
+  }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -103,7 +103,10 @@ const actions = props.entry.data.hero?.actions ?? [];
     </div>
   </VgvHeroFeature>
 
-  <VgvHeroBreakout>
+  <VgvHeroBreakout
+    firstUrl="https://cli.vgv.dev/"
+    secondUrl="https://dartfrog.vgv.dev/"
+  >
     <Fragment slot="heading">
       <VgvChip color="purple">SHIP FASTER</VgvChip>
       <VgvHeroSectionHeader>
@@ -133,20 +136,23 @@ const actions = props.entry.data.hero?.actions ?? [];
         &#128187; The Command-Line Interface to generate scalable templates and
         use helpful commands.
       </h3>
-      <p class="max-w-[100%] mt-4 text-balance text-center md:text-left">
-        Generate a <a href="https://cli.vgv.dev/docs/templates/core"
+      <p
+        class="max-w-[100%] mt-4 text-balance text-center md:text-left flex flex-row flex-wrap"
+      >
+        Generate a&nbsp;<a href="https://cli.vgv.dev/docs/templates/core"
           >Flutter app</a
-        >, <a href="https://cli.vgv.dev/docs/templates/flame_game"
+        >,&nbsp;<a href="https://cli.vgv.dev/docs/templates/flame_game"
           >Flame game
-        </a>,
+        </a>,&nbsp;
         <a href="https://cli.vgv.dev/docs/templates/flutter_pkg">
           Flutter package
-        </a>,
-        <a href="https://cli.vgv.dev/docs/templates/dart_pkg">Dart package</a>,
+        </a>,&nbsp;
+        <a href="https://cli.vgv.dev/docs/templates/dart_pkg">Dart package</a
+        >,&nbsp;
         <a href="https://cli.vgv.dev/docs/templates/federated_plugin">
           federated plugin
-        </a>, or
-        <a href="https://cli.vgv.dev/docs/templates/dart_cli">Dart CLI</a>
+        </a>, or&nbsp;
+        <a href="https://cli.vgv.dev/docs/templates/dart_cli">Dart CLI</a>&nbsp;
         with one command.
       </p>
       <ul class="pl-4 mt-6 text-center md:text-left">
@@ -192,7 +198,7 @@ const actions = props.entry.data.hero?.actions ?? [];
 
           <span class="text-sm">Hot Reload</span>
         </li>
-        <li class="flex gap-2">
+        <li class="flex gap-2 items-baseline">
           <Icon name="approve-check" color="green" class="size-6" />
 
           <span class="text-sm"