Add Enterprise card and restyle index page to match stacklok.com

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',
         },

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

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;
 }

src/pages/index.tsx

@@ -17,11 +17,23 @@ function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className='container'>
-        <Heading as='h1' className='hero__title'>
-          {siteConfig.title}
-        </Heading>
-        <p className='hero__subtitle'>{siteConfig.tagline}</p>
+      <div className={clsx('container', styles.heroContainer)}>
+        <div className={styles.heroText}>
+          <Heading as='h1' className={styles.heroTitle}>
+            {siteConfig.title}
+          </Heading>
+          <p className={styles.heroSubtitle}>{siteConfig.tagline}</p>
+        </div>
+        <div className={styles.heroImageWrapper}>
+          <img
+            src='/img/stacklok-websitehero.webp'
+            alt=''
+            aria-hidden='true'
+            className={styles.heroImage}
+            width={2560}
+            height={1763}
+          />
+        </div>
       </div>
     </header>
   );
@@ -107,6 +119,27 @@ export default function Home(): ReactNode {
             security. It&apos;s available as a standalone tool or as a
             Kubernetes operator, making it versatile for various environments.
           </ProductCard>
+          <ProductCard
+            contentType='logo'
+            href='/toolhive/enterprise'
+            logo='/img/logos/stacklok-default-black.svg'
+            logoDark='/img/logos/stacklok-default-white.svg'
+            logoAlt='Stacklok logo'
+            logoTitle='Stacklok logo'
+            linkText='Learn more'
+            icon={{
+              src: '/img/logos/stacklok-symbol-black.svg',
+              srcDark: '/img/logos/stacklok-symbol-white.svg',
+              alt: 'Stacklok symbol',
+              width: '120px',
+              style: { marginLeft: '1.5rem' },
+            }}
+          >
+            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.
+          </ProductCard>
         </ProductGrid>
 
         <h1 className='text--center'>Open source MCP servers</h1>