Update homepage

developer-tools/dashboard/index.md

@@ -9,7 +9,7 @@ import Banner from '@site/src/components/Banner'
 
 # Infura dashboard documentation
 
-The Infura dashboard provides users with a comprehensive overview and control of their blockchain infrastructure. It serves
+The Infura dashboard provides developers with a comprehensive overview and control of their blockchain infrastructure. It serves
 as a central hub for managing API keys and access, monitoring usage, and accessing account and billing information.
 
 <Banner>

docusaurus.config.js

@@ -190,6 +190,11 @@ const config = {
             label: "What's new?",
             position: "right",
           },
+          {
+            href: "https://support.metamask.io/",
+            label: "User support",
+            position: "right",
+          },
           /* Language drop down
           {
             type: "localeDropdown",
@@ -273,6 +278,10 @@ const config = {
                 label: "Contribute to the docs",
                 href: "https://github.com/MetaMask/metamask-docs/blob/main/CONTRIBUTING.md",
               },
+              {
+                label: "MetaMask user support",
+                href: "https://support.metamask.io/",
+              },
             ],
           },
           {

snaps/index.mdx

@@ -176,3 +176,7 @@ MetaMask Snaps team and community on [GitHub discussions](https://github.com/Met
 and the **mm-snaps-dev** channel on [Consensys Discord](https://discord.gg/consensys).
 
 See the full list of [Snaps resources](learn/resources.md) for more information.
+
+:::info MetaMask user support
+If you need MetaMask user support, visit the [MetaMask Help Center](https://support.metamask.io/).
+:::

src/components/Card.tsx

@@ -11,7 +11,7 @@ export type CardItem = {
 
 export default function Card({ title, link, description }: CardItem) {
   return (
-    <div className="col col--4 margin-top--sm margin-bottom--md">
+    <div className="col col--6 margin-bottom--lg">
       <Link className={clsx(styles.root, "card")} href={link}>
         <div className="card__header"><h3>{title}</h3></div>
         <div className="card__body">{description}</div>

src/components/CardSection.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import Card, { type CardItem } from "@site/src/components/Card";
+
+const CardList: CardItem[] = [
+  {
+    title: "Wallet",
+    link: "/wallet",
+    description: (<>
+      Integrate your dapp with MetaMask using the Wallet API. You can interact with your users&apos; Ethereum accounts from multiple dapp platforms.
+    </>),
+  },
+  {
+    title: "Snaps",
+    link: "/snaps",
+    description: (<>
+      Extend the functionality of MetaMask using Snaps. You can create a Snap to add support for custom networks, account types, APIs, and more.
+    </>),
+  },
+  {
+    title: "Services",
+    link: "/services",
+    description: (<>
+      Power your dapp or Snap using services provided by MetaMask and Infura. This includes APIs aimed at optimizing essential development tasks.
+    </>),
+  },
+  {
+    title: "Infura dashboard",
+    link: "/developer-tools/dashboard",
+    description: (<>
+      Use the Infura dashboard as a central hub for managing your Infura API keys, monitoring usage, and accessing account and billing information.
+    </>),
+  },
+];
+
+export default function CardSection(): JSX.Element {
+  return (
+    <section className="container margin-top--sm margin-bottom--lg">
+      <div className="row">
+        {CardList.map((props, idx) => (<Card key={idx} {...props} />))}
+      </div>
+    </section>
+  );
+}

src/pages/index.tsx

@@ -3,8 +3,7 @@ import clsx from "clsx";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
-import WalletSection from "@site/src/components/WalletSection";
-import SnapsSection from "@site/src/components/SnapsSection";
+import CardSection from "@site/src/components/CardSection";
 import styles from "./index.module.css";
 
 function HomepageHeader() {
@@ -51,8 +50,7 @@ export default function Home(): JSX.Element {
       title={"Home"}>
       <HomepageHeader />
       <main>
-        <WalletSection />
-        <SnapsSection />
+        <CardSection />
         <DevBanner />
       </main>
     </Layout>

wallet/index.mdx

@@ -72,3 +72,7 @@ If you're new to integrating dapps with MetaMask, check out the following topics
 
 If you have questions about integrating your dapp with MetaMask, you can interact with the MetaMask
 team and community on the MetaMask channels on [Consensys Discord](https://discord.gg/consensys).
+
+:::info MetaMask user support
+If you need MetaMask user support, visit the [MetaMask Help Center](https://support.metamask.io/).
+:::