High-level navigation enhancements

delegation-toolkit/index.md

@@ -1,13 +1,13 @@
 ---
-title: Introduction to the MetaMask Delegation Toolkit
+title: Delegation Toolkit introduction
 sidebar_label: Introduction
 description: High-level overview of the Delegation Toolkit, its benefits, and where to start in the documentation.
 sidebar_position: 1
 ---
 
 import CardList from "@site/src/components/CardList"
 
-# MetaMask Delegation Toolkit
+# Embed new web3 experiences using the Delegation Toolkit
 
 The MetaMask Delegation Toolkit is a [Viem](https://viem.sh/)-based collection of tools for integrating
 embedded smart contract wallets, known as [MetaMask smart accounts](concepts/smart-accounts.md),

developer-tools/dashboard/index.md

@@ -1,13 +1,14 @@
 ---
 sidebar_label: Introduction
+title: Developer dashboard introduction
 description: Documentation for using the MetaMask Developer dashboard
 sidebar_position: 1
 ---
 
 import CardList from '@site/src/components/CardList'
 import Banner from '@site/src/components/Banner'
 
-# Developer dashboard documentation
+# Introduction
 
 The [MetaMask Developer dashboard](https://developer.metamask.io/) provides developers with a
 comprehensive overview and control of their Infura service.

docusaurus.config.js

@@ -15,6 +15,9 @@ const codeTheme = themes.dracula
 const remarkCodesandbox = require('remark-codesandbox')
 const isProd = process.env.NODE_ENV === 'production'
 const helpDropdown = fs.readFileSync("./src/components/NavDropdown/DeveloperTools.html", "utf-8");
+const connectDropdown = fs.readFileSync("./src/components/NavDropdown/ConnectMetaMask.html", "utf-8");
+const embedDropdown = fs.readFileSync("./src/components/NavDropdown/EmbedMetaMask.html", "utf-8");
+const extendDropdown = fs.readFileSync("./src/components/NavDropdown/ExtendScale.html", "utf-8");
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'MetaMask developer documentation',
@@ -225,33 +228,43 @@ const config = {
         respectPrefersColorScheme: true,
       },
       navbar: {
-        title: ' │ ‎ Documentation',
         logo: {
           alt: 'MetaMask logo',
           src: 'img/metamask-logo.svg',
           srcDark: 'img/metamask-logo-dark.svg',
           width: 150,
         },
+        hideOnScroll: true,
         items: [
           {
-            to: 'sdk',
-            label: 'SDK',
-          },
-          {
-            to: 'wallet',
-            label: 'Wallet API',
-          },
-          {
-            to: 'delegation-toolkit',
-            label: 'Delegation Toolkit',
+            type: 'dropdown',
+            label: 'Connect to MetaMask',
+            items: [
+              {
+                type: "html",
+                value: connectDropdown,
+              },
+            ],
           },
           {
-            to: 'snaps',
-            label: 'Snaps',
+            type: 'dropdown',
+            label: 'Embed MetaMask',
+            items: [
+              {
+                type: "html",
+                value: embedDropdown,
+              },
+            ],
           },
           {
-            to: 'services',
-            label: 'Services',
+            type: 'dropdown',
+            label: 'Extend and scale',
+            items: [
+              {
+                type: "html",
+                value: extendDropdown,
+              },
+            ],
           },
           {
             type: 'dropdown',

sdk/index.md

@@ -1,5 +1,6 @@
 ---
 slug: /
+title: SDK introduction
 description: Introduction page for MetaMask SDK documentation.
 keywords: [connect, MetaMask, SDK, integrate, dapp]
 ---

services/index.md

@@ -1,4 +1,5 @@
 ---
+title: Services introduction
 sidebar_label: Introduction
 sidebar_position: 1
 ---

snaps/index.mdx

@@ -1,5 +1,6 @@
 ---
 sidebar_label: Introduction
+title: Snaps introduction
 description: Introduction page for the MetaMask Snaps documentation.
 ---
 

src/components/CallToAction/CallToAction.module.scss

@@ -1,14 +1,14 @@
 .call-to-action {
   position: relative;
-  padding: 1.5rem 0 6.4rem;
+  padding: 2rem 0 6.4rem;
   overflow: hidden;
 
   @include bp(tablet) {
-    padding-top: 2rem;
+    padding-top: 4rem;
   }
 
   @include bp(desktop) {
-    padding: 3rem 0 8rem;
+    padding: 5rem 0 8rem;
   }
 }
 

src/components/Card.tsx

@@ -15,13 +15,14 @@ export type CardItem = {
   href: string
   description?: string | ReactNode
   theme?: string
+  buttonIcon?: 'arrow-right' | 'external-arrow'
 }
 
-export default function Card({ title, href, description, theme }: CardItem) {
+export default function Card({ title, href, description, theme, buttonIcon = "arrow-right" }: CardItem) {
   const [isHovered, setIsHovered] = useState(false)
 
   return (
-    <li className={clsx(styles['item'], isHovered && styles['active'])}>
+    <div className={clsx(styles['item'], isHovered && styles['active'])}>
       <CutOffCorners size="s">
         <div
           className={styles['holder']}
@@ -49,7 +50,7 @@ export default function Card({ title, href, description, theme }: CardItem) {
                   as="button"
                   label={false}
                   type={theme === 'dark' ? 'secondary' : 'primary'}
-                  icon="arrow-right"
+                  icon={buttonIcon}
                   className={styles['button']}
                   style={
                     theme === 'dark'
@@ -68,6 +69,6 @@ export default function Card({ title, href, description, theme }: CardItem) {
           </Link>
         </div>
       </CutOffCorners>
-    </li>
+    </div>
   )
 }

src/components/CardSection.module.scss

@@ -1,14 +1,14 @@
 .wrapper {
   position: relative;
-  padding: 2rem 0 0;
-  overflow: hidden;
+  padding: 2rem 0 2rem;
+  overflow: visible;
 
   @include bp(tablet) {
-    padding-top: 3rem;
+    padding-top: 3rem 0 3rem;
   }
 
   @include bp(desktop) {
-    padding: 4rem 0 0;
+    padding: 4rem 0 4rem;
   }
 }
 
@@ -35,7 +35,25 @@
   }
 }
 
-.grid {
+.section-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  @include bp('desktop') {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 4rem;
+    align-items: start;
+  }
+}
+
+.content-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.cards-wrapper {
   display: grid;
   grid-template-columns: 1fr;
   gap: 2rem;
@@ -45,8 +63,42 @@
   }
 }
 
-.grid > li {
-  &:last-child {
-    margin-bottom: 1.6rem;
+.card-column {
+  display: flex;
+}
+
+.header {
+  margin-bottom: 0;
+
+  h2 {
+    font-size: 2.4rem;
+    font-weight: 500;
+    margin: 0 0 2rem 0;
+    color: var(--color-text-heading);
+    line-height: 1.2;
+
+    @include bp(tablet) {
+      font-size: 2.8rem;
+    }
+
+    @include bp(desktop) {
+      font-size: 3.2rem;
+    }
+  }
+
+  p {
+    font-size: 1.6rem;
+    font-weight: 400;
+    margin: 0;
+    color: var(--color-text-paragraph);
+    line-height: 1.5;
+
+    @include bp(tablet) {
+      font-size: 1.7rem;
+    }
+
+    @include bp(desktop) {
+      font-size: 1.8rem;
+    }
   }
 }

src/components/CardSection.tsx

@@ -1,17 +1,23 @@
 import clsx from 'clsx'
 import { CSSProperties, JSX, useState, useEffect } from 'react'
 import { useColorMode } from '@docusaurus/theme-common'
-import Heading from '@theme/Heading'
 import Card, { CardItem } from '@site/src/components/Card'
 
 import styles from './CardSection.module.scss'
 
 type CardSectionProps = {
+  title?: string
+  description?: string
   cards: CardItem[]
-  colorPalette: string
+  colorPalette?: string
 }
 
-export default function CardSection({ cards, colorPalette }: CardSectionProps): JSX.Element {
+export default function CardSection({
+  title,
+  description,
+  cards,
+  colorPalette,
+}: CardSectionProps): JSX.Element {
   const { colorMode } = useColorMode()
   const [theme, setTheme] = useState('')
 
@@ -20,12 +26,12 @@ export default function CardSection({ cards, colorPalette }: CardSectionProps):
   }, [colorMode])
 
   return (
-    <section className={styles['wrapper']}>
+    <section className={styles.wrapper}>
       <div className="container">
         <div className={styles['grid-wrapper']}>
           <div className={styles['grid-col-center']}>
-            <ul
-              className={styles['grid']}
+            <div 
+              className={styles['section-grid']}
               style={
                 colorPalette
                   ? ({
@@ -34,17 +40,31 @@ export default function CardSection({ cards, colorPalette }: CardSectionProps):
                   : {}
               }
             >
-              {cards?.length > 0 &&
-                cards.map(({ title, description, href }: CardItem, cardIndex: number) => (
-                  <Card
-                    key={cardIndex}
-                    title={title}
-                    description={description}
-                    href={href}
-                    theme={theme}
-                  />
+              {/* Title and Description Column */}
+              {(title || description) && (
+                <div className={styles['content-column']}>
+                  <div className={styles.header}>
+                    {title && <h2>{title}</h2>}
+                    {description && <p>{description}</p>}
+                  </div>
+                </div>
+              )}
+
+              {/* Cards Columns */}
+              <div className={styles['cards-wrapper']}>
+                {cards.map(({ title, description, href, buttonIcon }, index) => (
+                  <div key={index} className={styles['card-column']}>
+                    <Card
+                      title={title}
+                      description={description}
+                      href={href}
+                      theme={theme}
+                      buttonIcon={buttonIcon}
+                    />
+                  </div>
                 ))}
-            </ul>
+              </div>
+            </div>
           </div>
         </div>
       </div>

src/components/NavDropdown/ConnectMetaMask.html

@@ -0,0 +1,35 @@
+<span class="nav-dropdown-menu">
+  <ul>
+    <li>
+      <a href="/sdk/">
+        <span>
+          <svg class="svg-inline--fa fa-rocket fa-w-16 text-text-alternative group-hover:text-text-default" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 512 512" role="img">
+            <path fill="currentColor" d="M188.9 372l-50.4-50.4c18.6-42.7 61.7-137.7 95.1-187C304.6 30.1 409 24.6 475.7 36.3c11.7 66.7 6.2 171.1-98.4 242c-49.4 33.5-145.5 75.6-188.4 93.7zm-79.9-62.8c-5.2 11.9-2.5 25.7 6.7 34.9l50.7 50.7c9.1 9.1 22.7 11.9 34.5 6.9c6.5-2.7 14.3-6 23-9.8L224 496c0 5.5 2.9 10.7 7.6 13.6s10.6 3.2 15.6 .7l101.5-50.7c21.7-10.8 35.4-33 35.4-57.2l0-90.2c4-2.5 7.7-4.9 11.3-7.3C516.1 222.9 520.1 100.9 506.7 28.1c-2.1-11.6-11.2-20.6-22.8-22.8C411.1-8.1 289.1-4.1 207.2 116.7c-2.4 3.6-4.9 7.3-7.3 11.3l-90.2 0c-24.2 0-46.4 13.7-57.2 35.4L1.7 264.8c-2.5 5-2.2 10.9 .7 15.6s8.1 7.6 13.6 7.6l102.5 0c-3.6 8-6.8 15.2-9.4 21.2zM256 470.1l0-92.5c30.3-13.7 65.4-30.3 96-47l0 71.7c0 12.1-6.8 23.2-17.7 28.6L256 470.1zM109.7 160l71.5 0c-16.9 30.7-34 65.8-48.1 96l-91.2 0L81 177.7c5.4-10.8 16.5-17.7 28.6-17.7zM392 144a24 24 0 1 1 -48 0 24 24 0 1 1 48 0zM368 88a56 56 0 1 0 0 112 56 56 0 1 0 0-112z">
+            </path>
+          </svg>
+        </span>
+        <div>
+          <h2>MetaMask SDK</h2>
+          <p>Seamlessly connect to the MetaMask extension and MetaMask Mobile.</p>
+        </div>
+      </a>
+    </li>
+    <li>
+      <a href="/wallet/">
+        <span>
+          <svg width="800px" height="800px" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="48" height="48" fill="white" fill-opacity="0.01"/>
+            <path d="M18 23.9372V10C18 6.68629 20.6863 4 24 4C27.3137 4 30 6.68629 30 10V12.0057" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
+            <path d="M30 24.0035V38C30 41.3137 27.3137 44 24 44C20.6863 44 18 41.3137 18 38V35.97" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
+            <path d="M24 30H9.98415C6.67919 30 4 27.3137 4 24C4 20.6863 6.67919 18 9.98415 18H11.9886" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
+            <path d="M24 18H37.9888C41.3087 18 44 20.6863 44 24C44 27.3137 41.3087 30 37.9888 30H36.0663" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
+          </svg>
+        </span>
+        <div>
+          <h2>Wallet API</h2>
+          <p>Directly integrate your dapp with the MetaMask extension.</p>
+        </div>
+      </a>
+    </li>
+  </ul>
+</span>

src/components/NavDropdown/DeveloperTools.html

@@ -1,4 +1,4 @@
-<span class="resources-dropdown-menu">
+<span class="nav-dropdown-menu">
   <ul>
     <li>
       <a href="/developer-tools/dashboard/">