style getting started cards

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>

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 */
+}