From 75f0c0cabd1c0405ef2b8355cdfd1679f28c6de8 Mon Sep 17 00:00:00 2001
From: Dan Barr <6922515+danbarr@users.noreply.github.com>
Date: Fri, 27 Mar 2026 17:51:47 -0400
Subject: [PATCH 1/5] Add Stacklok Enterprise product card to index page
---
src/pages/index.tsx | 21 +++++++++++++++++++++
1 file changed, 21 insertions(+)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ed1b8d10..4622af5f 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -107,6 +107,27 @@ export default function Home(): ReactNode {
security. It's available as a standalone tool or as a
Kubernetes operator, making it versatile for various environments.
+
+ Stacklok Enterprise provides a fully managed, enterprise-grade
+ platform built on ToolHive, with advanced security, compliance, and
+ governance features for organizations deploying MCP servers at
+ scale.
+
Open source MCP servers
From 19127126b033d38ffc95e4f49c91faca11f7e763 Mon Sep 17 00:00:00 2001
From: Dan Barr <6922515+danbarr@users.noreply.github.com>
Date: Fri, 27 Mar 2026 18:17:23 -0400
Subject: [PATCH 2/5] Restyle hero section to match stacklok.com
---
src/css/custom.css | 2 +-
src/pages/index.module.css | 65 +++++++++++++++++++++++----
src/pages/index.tsx | 22 ++++++---
static/img/stacklok-websitehero.webp | Bin 0 -> 310738 bytes
4 files changed, 75 insertions(+), 14 deletions(-)
create mode 100644 static/img/stacklok-websitehero.webp
diff --git a/src/css/custom.css b/src/css/custom.css
index 4d078762..53e66747 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -9,7 +9,7 @@
* work well for content-centric websites.
*/
-@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import './footer.css';
@import './fontawesome.css';
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 4ce0977e..24e52e16 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -9,19 +9,68 @@
*/
.heroBanner {
- padding: 2rem 0;
- text-align: center;
+ padding: 0.75rem 0;
position: relative;
overflow: hidden;
- background-color: var(--stacklok-primary-light) !important;
- background: url('/img/stacklok-pattern-2-transparent.svg') no-repeat center
- center;
- background-size: cover;
- color: var(--stacklok-dusk);
+ background-color: var(--stacklok-primary) !important;
+ color: var(--stacklok-fluorescent);
+}
+
+.heroContainer {
+ display: flex;
+ align-items: center;
+ gap: 3rem;
+}
+
+.heroText {
+ flex: 1;
+ text-align: left;
+}
+
+.heroTitle {
+ font-family: 'Lora', Georgia, serif;
+ font-size: 4.75rem;
+ font-weight: 400;
+ color: var(--stacklok-white);
+}
+
+.heroSubtitle {
+ font-family: 'Inter', system-ui, sans-serif;
+ font-size: 1.25rem;
+ font-weight: 400;
+ color: var(--stacklok-cookie);
+}
+
+.heroImageWrapper {
+ flex: 0 0 auto;
+ width: 42%;
+ max-width: 520px;
+}
+
+.heroImage {
+ width: 100%;
+ height: auto;
+ display: block;
+}
+
+@media (max-width: 768px) {
+ .heroContainer {
+ flex-direction: column;
+ gap: 1.5rem;
+ }
+
+ .heroText {
+ text-align: center;
+ }
+
+ .heroImageWrapper {
+ width: 80%;
+ max-width: 360px;
+ }
}
.buttons {
display: flex;
align-items: center;
- justify-content: center;
+ justify-content: flex-start;
}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4622af5f..d9f69e77 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -17,11 +17,23 @@ function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (