From 3d46ff0b8958fb169179eb54c6e3c67beedfca53 Mon Sep 17 00:00:00 2001
From: Kenneth Bingham <kenneth.bingham@netfoundry.io>
Date: Fri, 30 Aug 2024 17:58:26 -0400
Subject: [PATCH] style getting started cards

---
 docs/getting-started.mdx   | 20 ++++++++++----------
 website/src/css/custom.css | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/docs/getting-started.mdx b/docs/getting-started.mdx
index 74280c25..70cba0ef 100644
--- a/docs/getting-started.mdx
+++ b/docs/getting-started.mdx
@@ -11,31 +11,31 @@ import DownloadCardStyles from '@site/src/css/download-card.module.css';
 
 ## Choose Your Path
 
-<Columns> 
-  <Column className='text--center'>
+<Columns className='text--center getting-started-cards'> 
+  <Column style={{paddingBottom: 20}}>
     <Card shadow='tl'>
-      <CardHeader style={{textAlign: "center"}}>
+      <CardHeader>
         <h3>Self-Hosted zrok</h3>
       </CardHeader>
-      <CardBody style={{textAlign: "center"}}>
-        Run your own public zrok instance with Linux, Docker, or Kubernetes.
+      <CardBody>
+        Run a zrok instance on Linux, Docker, or Kubernetes.
       </CardBody>
-      <CardFooter style={{textAlign: "center"}}>
+      <CardFooter>
         <a href="/docs/category/self-hosting/">
         <button className='button button--secondary button--block'>Guides</button>
         </a>
       </CardFooter>
     </Card>
   </Column>
-  <Column className='text--justify'> 
+  <Column style={{paddingBottom: 20}}>
     <Card shadow='tl'>
-      <CardHeader style={{textAlign: "center"}}>
+      <CardHeader>
         <h3>Hosted zrokNet</h3>
       </CardHeader>
-      <CardBody style={{textAlign: "center"}}>
+      <CardBody>
         Use NetFoundry's public zrok instance.
       </CardBody>
-      <CardFooter style={{textAlign: "center"}}>
+      <CardFooter>
         <a href="https://myzrok.io/">
         <button className='button button--secondary button--block'>Get an Account</button>
         </a>
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 4d5b0a0c..bd301390 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -217,3 +217,37 @@ a code {
   height: 1.25rem;
   width: 1.25rem;
 }
+
+/* getting started cards */
+
+:root {
+  --contrasting-background: #c4b7f5;
+  --container-border: 1px solid #adadad; /* Light gray border */
+  --button-background-hover: #9c84f9;
+}
+
+[data-theme="dark"] {
+  --contrasting-background: #4b359f;
+  --container-border: 1px solid #6d6d6d; /* Light gray border */
+  --button-background-hover: #251463;
+}
+
+.getting-started-cards .card {
+  background-color: var(--sidebar-selected);
+}
+
+.getting-started-cards .button {
+  background-color: var(--contrasting-background);
+  border: 1px var(--container-border);
+  color: var(--ifm-link-color);
+  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
+}
+
+.getting-started-cards .button:hover {
+    background-color: var(--button-background-hover);
+    outline: none; /* Removes the outline on focus for a clean look */
+}
+
+.getting-started-cards a:hover {
+    text-decoration: none; /* Removes the underline from links */
+}