From 5805e1f29d8f21dd7e0dd38a18b2fcb15b47283e Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Thu, 2 Apr 2026 10:48:13 +0200
Subject: [PATCH 1/2] chore(homepage): add some shine

---
 src/pages/index.tsx         |  4 ++--
 src/pages/styles.module.css | 41 ++++++++++++++++++++++++-------------
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d655ee912f..2a9024a9b6 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -103,7 +103,7 @@ const Home: React.FC = () => {
           </p>
           <div className={styles.buttons}>
             <Link className={styles.getStarted} to="docs/intro">
-              Get started
+              Get Started
             </Link>
             <GitHubStarButton owner="microsoft" repo={siteConfig.customFields.repositoryName as string} />
           </div>
@@ -189,7 +189,7 @@ const Home: React.FC = () => {
         </FeatureSection>
 
         {/* Tooling */}
-        <FeatureSection title="Powerful tooling">
+        <FeatureSection title="Powerful tooling" reversed>
           <div className="row">
             <div className="col col--4">
               <h4><a href="docs/codegen">Test generator</a></h4>
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
index 61f9fd1f75..a2fb24d602 100644
--- a/src/pages/styles.module.css
+++ b/src/pages/styles.module.css
@@ -5,14 +5,25 @@
  * and scoped locally.
  */
 
+/* Hero */
 .heroBanner {
-  background-color: #2b3137;
+  background: linear-gradient(170deg, #1a1d23 0%, #2b3137 40%, #1e2b1f 100%);
   padding: 5rem 0;
   text-align: left;
   position: relative;
   overflow: hidden;
   color: white;
 }
+.heroBanner::before {
+  content: '';
+  position: absolute;
+  top: -40%;
+  right: -10%;
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(69, 186, 75, 0.08) 0%, transparent 70%);
+  pointer-events: none;
+}
 .heroTitle {
   font-size: 60px;
 }
@@ -25,6 +36,12 @@
 .heroSubtitle a {
   color: #fff;
   text-decoration: underline;
+  text-decoration-color: rgba(255, 255, 255, 0.4);
+  text-underline-offset: 2px;
+  transition: text-decoration-color 0.2s;
+}
+.heroSubtitle a:hover {
+  text-decoration-color: #fff;
 }
 .highlight {
   color: #45ba4b;
@@ -46,25 +63,23 @@
   padding: 1rem 0;
   display: flex;
   align-items: center;
-  text-transform: uppercase;
   flex-wrap: wrap;
   gap: 20px;
 }
 
 .getStarted {
-  border: 2px solid #45ba4b;
+  background: linear-gradient(135deg, #45ba4b 0%, #3da843 100%);
   line-height: 1em;
   text-decoration: none !important;
-  text-transform: uppercase;
   border-radius: 8px;
   color: #fff;
-  font-size: 20px;
-  font-weight: 700;
-  padding: 14px 20px;
+  font-size: 16px;
+  font-weight: 00;
+  padding: 14px 26px;
   white-space: nowrap;
+  transition: all 0.2s ease;
 }
 .getStarted:hover {
-  background: #45ba4b;
   color: #2b3137;
 }
 
@@ -82,7 +97,6 @@
 }
 .pathCard p {
   color: var(--ifm-color-emphasis-700);
-  min-height: 4.5em;
   flex-grow: 1;
 }
 .installCode {
@@ -104,10 +118,10 @@
   padding: 3rem 0;
 }
 .featureSectionAlt {
-  background: #f8fbfe;
+  background: var(--ifm-color-emphasis-100);
 }
 html[data-theme='dark'] .featureSectionAlt {
-  background: #1e2124;
+  background: rgba(255, 255, 255, 0.03);
 }
 .featureSectionTitle {
   text-align: center;
@@ -140,11 +154,10 @@ html[data-theme='dark'] .featureSectionAlt {
 
 /* Logos */
 .logosSection {
-  background: #f8fbfe;
+  border-top: 1px solid var(--ifm-color-emphasis-200);
 }
 html[data-theme='dark'] .logosSection {
-  background: #2b3137;
-  color: white;
+  border-color: rgba(255, 255, 255, 0.06);
 }
 
 .logosColumn {

From d1e140875923c49c65f2c13d01a1a70f9249ec68 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Thu, 2 Apr 2026 15:23:44 +0200
Subject: [PATCH 2/2] dont capitalise Get Started

---
 src/pages/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2a9024a9b6..a35e1a47b1 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -103,7 +103,7 @@ const Home: React.FC = () => {
           </p>
           <div className={styles.buttons}>
             <Link className={styles.getStarted} to="docs/intro">
-              Get Started
+              Get started
             </Link>
             <GitHubStarButton owner="microsoft" repo={siteConfig.customFields.repositoryName as string} />
           </div>