diff --git a/docusaurus.config.ts b/docusaurus.config.ts index d4a66130..8b7a203e 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -290,16 +290,16 @@ const config: Config = { to: 'toolhive/reference/crd-spec', }, { - label: 'ToolHive Registry schema', - to: 'toolhive/reference/registry-schema-toolhive', + label: 'ToolHive Registry Server API', + to: 'toolhive/reference/registry-api', }, { - label: 'Upstream Registry schema', - to: 'toolhive/reference/registry-schema-upstream', + label: 'ToolHive registry schema', + to: 'toolhive/reference/registry-schema-toolhive', }, { - label: 'ToolHive Registry API', - to: 'toolhive/reference/registry-api', + label: 'Upstream registry schema', + to: 'toolhive/reference/registry-schema-upstream', }, ], }, @@ -315,19 +315,19 @@ const config: Config = { }, { href: 'https://github.com/stacklok', - className: 'fa-brands fa-github fa-lg', + className: 'navbar-icon-link fa-brands fa-github fa-lg', position: 'right', 'aria-label': 'Stacklok on GitHub', }, { href: 'https://discord.gg/stacklok', - className: 'fa-brands fa-discord fa-lg', + className: 'navbar-icon-link fa-brands fa-discord fa-lg', position: 'right', 'aria-label': 'Join Stacklok on Discord', }, { href: 'https://youtube.com/@stacklok', - className: 'fa-brands fa-youtube fa-lg', + className: 'navbar-icon-link fa-brands fa-youtube fa-lg', position: 'right', 'aria-label': 'Stacklok on YouTube', }, diff --git a/src/css/custom.css b/src/css/custom.css index 4d078762..323f0aa9 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'; @@ -53,10 +53,10 @@ --ifm-footer-color: var(--stacklok-fluorescent); --ifm-footer-background-color: var(--stacklok-primary); --ifm-navbar-color: var(--stacklok-fluorescent); - --ifm-navbar-link-color: var(--stacklok-fluorescent); - --ifm-navbar-link-hover-color: var(--stacklok-primary-light); + --ifm-navbar-link-color: var(--stacklok-primary-light); + --ifm-navbar-link-hover-color: var(--stacklok-white); --ifm-navbar-background-color: var(--stacklok-primary); - --ifm-navbar-height: 6rem; + --ifm-navbar-height: 4.75rem; --ifm-navbar-padding-horizontal: 2rem; /* Sidebar and menus */ @@ -140,22 +140,45 @@ thead th { } /* Navbar links */ +.navbar__link { + font-size: 0.8125rem; + font-weight: 500; + letter-spacing: 1.69px; + text-transform: uppercase; +} + +.navbar-icon-link { + font-size: 1.25rem; + letter-spacing: normal; + text-transform: none; +} + .navbar__link--active { color: var(--stacklok-fluorescent); } .navbar__link--active:hover { - color: var(--stacklok-primary-light); + color: var(--stacklok-white); +} + +/* Navbar logo */ +.navbar__logo { + display: flex; + align-items: center; +} + +.navbar__logo img { + height: 22px; } /* Targets the theme switch button in the navbar */ .theme-layout-navbar-right .clean-btn { - color: var(--ifm-navbar-link-color); + color: var(--stacklok-primary-light); } .theme-layout-navbar-right .clean-btn:hover { background: rgba(0, 0, 0, 0); - color: var(--ifm-navbar-link-hover-color); + color: var(--stacklok-white); } /* Lighter color for sidebar menu child links */ 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 ed1b8d10..545aac98 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -17,11 +17,23 @@ function HomepageHeader() { const { siteConfig } = useDocusaurusContext(); return (
-
- - {siteConfig.title} - -

{siteConfig.tagline}

+
+
+ + {siteConfig.title} + +

{siteConfig.tagline}

+
+
+ +
); @@ -107,6 +119,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

diff --git a/static/img/stacklok-websitehero.webp b/static/img/stacklok-websitehero.webp new file mode 100644 index 00000000..f3b67fe3 Binary files /dev/null and b/static/img/stacklok-websitehero.webp differ