From b96b11d9c629a87ef09d7c2397d70482293c6d60 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Thu, 27 Nov 2025 09:30:31 -0500
Subject: [PATCH] content: #248 remove stackblitz links from home page

---
 src/components/get-started/get-started.js     |  7 +++----
 .../get-started/get-started.module.css        | 12 +++++------
 src/components/hero-banner/hero-banner.js     |  7 +++----
 .../hero-banner/hero-banner.module.css        | 20 +++++++++----------
 4 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/components/get-started/get-started.js b/src/components/get-started/get-started.js
index d16a5567..691d22a6 100644
--- a/src/components/get-started/get-started.js
+++ b/src/components/get-started/get-started.js
@@ -15,12 +15,11 @@ export default class GetStarted extends HTMLElement {
         </div>
 
         <div>
-          <a href="https://stackblitz.com/github/projectevergreen/greenwood-getting-started" class="${styles.buttonBlitz}" target="_blank">
-            <span>View in Stackblitz</span>
-            <span class="no-show-screen-reader"> (opens in a new window)</span>
+          <a href="/docs/introduction/about/" class="${styles.buttonSecondary}">
+            <span>Learn More</span>
           </a>
           
-          <a href="/guides/getting-started/" class="${styles.buttonStarted}">
+          <a href="/guides/getting-started/" class="${styles.buttonPrimary}">
             <span>Get Started</span>
           </a>
         </div>
diff --git a/src/components/get-started/get-started.module.css b/src/components/get-started/get-started.module.css
index 682c0dcf..2a21ada1 100644
--- a/src/components/get-started/get-started.module.css
+++ b/src/components/get-started/get-started.module.css
@@ -36,7 +36,7 @@
   vertical-align: middle;
 }
 
-.buttonBlitz {
+.buttonSecondary {
   display: inline-block;
   border-radius: var(--radius-3);
   border: var(--border-size-1) solid var(--color-white);
@@ -49,7 +49,7 @@
   text-decoration: none;
 }
 
-.buttonStarted {
+.buttonPrimary {
   display: inline-block;
   border-radius: var(--radius-3);
   padding: var(--size-fluid-1) var(--size-fluid-2);
@@ -62,15 +62,15 @@
   text-decoration: none;
 }
 
-.buttonBlitz:hover,
-.buttonBlitz:focus {
+.buttonSecondary:hover,
+.buttonSecondary:focus {
   background-color: var(--color-gray);
   text-decoration: none;
   color: var(--color-black) !important;
 }
 
-.buttonStarted:hover,
-.buttonStarted:focus {
+.buttonPrimary:hover,
+.buttonPrimary:focus {
   background-color: var(--color-accent);
   text-decoration: none;
   color: var(--color-black) !important;
diff --git a/src/components/hero-banner/hero-banner.js b/src/components/hero-banner/hero-banner.js
index 190252de..50bde3fe 100644
--- a/src/components/hero-banner/hero-banner.js
+++ b/src/components/hero-banner/hero-banner.js
@@ -12,12 +12,11 @@ export default class HeroBanner extends HTMLElement {
         <p class="${styles.headingSub}">Greenwood is your workbench for the web, embracing web standards from the ground up to empower your stack from front to back.</p>
 
         <div class="${styles.ctaContainer}">
-          <a href="https://stackblitz.com/github/projectevergreen/greenwood-getting-started" class="${styles.buttonBlitz}"  target="_blank">
-            <span>View in Stackblitz</span>
-            <span class="no-show-screen-reader"> (opens in a new window)</span>
+          <a href="/docs/introduction/about/" class="${styles.buttonSecondary}">
+            <span>Learn More</span>
           </a>
           
-          <a href="/guides/getting-started/" class="${styles.buttonStarted}">
+          <a href="/guides/getting-started/" class="${styles.buttonPrimary}">
             <span>Get Started</span>
           </a>
 
diff --git a/src/components/hero-banner/hero-banner.module.css b/src/components/hero-banner/hero-banner.module.css
index 0a1d7c22..cc77fc09 100644
--- a/src/components/hero-banner/hero-banner.module.css
+++ b/src/components/hero-banner/hero-banner.module.css
@@ -30,7 +30,7 @@
   text-align: center;
 }
 
-.buttonBlitz {
+.buttonSecondary {
   display: inline-block;
   border-radius: var(--radius-3);
   background-color: transparent;
@@ -43,7 +43,7 @@
   color: var(--color-black) !important;
 }
 
-.buttonStarted {
+.buttonPrimary {
   display: inline-block;
   border-radius: var(--radius-3);
   padding: var(--size-3);
@@ -56,15 +56,15 @@
   text-decoration: none;
 }
 
-.buttonBlitz:hover,
-.buttonBlitz:focus {
+.buttonSecondary:hover,
+.buttonSecondary:focus {
   background-color: var(--color-secondary);
   color: var(--color-white) !important;
   text-decoration: none;
 }
 
-.buttonStarted:hover,
-.buttonStarted:focus {
+.buttonPrimary:hover,
+.buttonPrimary:focus {
   background-color: var(--color-accent);
   text-decoration: none;
   color: var(--color-black) !important;
@@ -121,8 +121,8 @@
     margin: 0 auto;
   }
 
-  .buttonBlitz,
-  .buttonStarted {
+  .buttonSecondary,
+  .buttonPrimary {
     width: 45%;
   }
 
@@ -153,8 +153,8 @@
     text-align: left;
   }
 
-  .buttonBlitz,
-  .buttonStarted {
+  .buttonSecondary,
+  .buttonPrimary {
     max-width: fit-content;
   }