Front matter updates

src/components/Card.module.scss

@@ -165,3 +165,24 @@ html[data-theme='dark'] {
     transition: color calc(var(--motion) * var(--motion-speed)) $gentle-ease;
   }
 }
+
+.header {
+  margin-bottom: 2rem;
+
+  h2 {
+    font-size: 1.8rem;
+    font-weight: 600;
+    margin: 0;
+    color: var(--color-text-heading);
+  }
+
+  p {
+    font-size: 1rem;
+    font-weight: 400;
+    margin: 0.5rem 0 0;
+    max-width: 640px;
+    color: var(--color-text-paragraph);
+  }
+}
+
+

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,22 @@ 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']}>
+          {/* header placed inside the grid-wrapper for column alignment */}
+          {(title || description) && (
+            <div className={styles['grid-col-center']}>
+              <div className={styles.header}>
+                {title && <h2>{title}</h2>}
+                {description && <p>{description}</p>}
+              </div>
+            </div>
+          )}
+
           <div className={styles['grid-col-center']}>
             <ul
-              className={styles['grid']}
+              className={styles.grid}
               style={
                 colorPalette
                   ? ({
@@ -34,16 +50,15 @@ 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}
-                  />
-                ))}
+              {cards.map(({ title, description, href }, index) => (
+                <Card
+                  key={index}
+                  title={title}
+                  description={description}
+                  href={href}
+                  theme={theme}
+                />
+              ))}
             </ul>
           </div>
         </div>

src/components/SectionIntro/SectionIntro.module.scss

@@ -0,0 +1,51 @@
+
+.wrapper {
+  position: relative;
+  padding: 2rem 0 0;
+  overflow: hidden;
+
+  @include bp(tablet) {
+    padding-top: 3rem;
+  }
+
+  @include bp(desktop) {
+    padding: 4rem 0 0;
+  }
+}
+
+.grid-wrapper {
+  @include bp('tablet') {
+    @include grid;
+  }
+}
+
+.grid-col-center {
+  position: relative;
+
+  @include bp('tablet') {
+    @include grid-column-span(8);
+  }
+
+  @include bp('desktop') {
+    @include grid-column-span(14);
+    @include grid-column-start(2);
+  }
+}
+
+.header {
+  margin-bottom: 2rem;
+
+  h2 {
+    font-size: 1.8rem;
+    font-weight: 600;
+    margin: 0;
+    color: var(--color-text-heading);
+  }
+
+  p {
+    font-size: 1.8rem;
+    font-weight: bold;
+    margin: 0.5rem 0 0;
+    color: var(--color-text-paragraph);
+  }
+}

src/components/SectionIntro/SectionIntro.tsx

@@ -0,0 +1,18 @@
+import clsx from 'clsx'
+import styles from './SectionIntro.module.scss'
+
+export default function SectionIntro({ description }: { description: string }) {
+  return (
+    <section className={styles.wrapper}>
+      <div className="container">
+        <div className={styles['grid-wrapper']}>
+          <div className={styles['grid-col-center']}>
+             <div className={styles.header}>
+               <p>{description}</p>
+             </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

src/pages/index.tsx

@@ -2,54 +2,83 @@ import Layout from '@theme/Layout'
 import Hero from '@site/src/components/Hero/Hero'
 import CardSection from '@site/src/components/CardSection'
 import CallToAction from '@site/src/components/CallToAction/CallToAction'
+import SectionIntro from '@site/src/components/SectionIntro/SectionIntro'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext()
+
   return (
-    <Layout title={'Home'}>
+    <Layout title="Home">
       <Hero
         title={siteConfig.title}
-        description={"Build with the world's leading self-custodial crypto wallet."}
+        description="Build with the world's leading self-custodial crypto wallet."
       />
+      <SectionIntro description="What do you want to build with MetaMask? Whether you're integrating with the extension, embedding smart wallets, or scaling with powerful infrastructure—choose a path below to get started." />
+
       <CardSection
+        title="External wallet integration"
+        description="Integrate your dapp with the MetaMask browser extension or mobile app. Ideal for users who want full control over their keys and transactions."
         colorPalette="purple"
         cards={[
           {
             title: 'SDK',
             description:
               'Use MetaMask SDK to build onchain dapps. Authenticate users, handle transactions, and interact with contracts across the MetaMask extension and MetaMask Mobile.',
             href: '/sdk',
-            theme: '',
           },
           {
             title: 'Wallet API',
             description:
               "Use the Wallet API to integrate your dapp with MetaMask. Connect to the MetaMask browser extension and interact with your users' accounts.",
             href: '/wallet',
-            theme: '',
           },
+        ]}
+      />
+
+      <CardSection
+        title="Embedded wallet integration"
+        description="Enable embedded wallets and smart accounts directly within your dapp. Ideal for seamless onboarding, custom permission controls, and mobile-first, or first-time user experiences."
+        colorPalette="purple"
+        cards={[
           {
-            title: 'Snaps',
+            title: 'Delegation Toolkit',
             description:
-              'Create a custom Snap to extend the functionality of MetaMask. Add support for custom networks, accounts types, and APIs.',
-            href: '/snaps',
-            theme: '',
+              'Integrate MetaMask smart accounts into your dapps. Delegate permissions such as spending limits or time-based access, to other accounts.',
+            href: '/gator',
           },
+          {
+            title: 'Embedded Wallets SDK',
+            description:
+              'Use the Embedded Wallets SDK to onboard power users and first-time users in seconds via social logins, passkeys, or by integrating your own authentication providers.',
+            href: 'https://web3auth.io/docs/',
+          },
+        ]}
+      />
+
+      <CardSection
+        title="Infrastructure & extensibility"
+        description="Build scalable dapps and extend MetaMask's capabilities with developer tools, hosted infrastructure, and customizable Snaps."
+        colorPalette="purple"
+        cards={[
           {
             title: 'Services',
             description:
               'Use services provided by MetaMask and Infura to optimize essential development tasks and scale your dapp or Snap.',
             href: '/services',
-            theme: '',
+          },
+          {
+            title: 'Snaps',
+            description:
+              'Create a custom Snap to extend the functionality of MetaMask. Add support for custom networks, accounts types, and APIs.',
+            href: '/snaps',
           },
         ]}
       />
+
       <CallToAction
-        title={'Contribute to MetaMask on GitHub'}
-        description={
-          'Join the MetaMask developer community and learn how to contribute to the MetaMask project itself.'
-        }
+        title="Contribute to MetaMask on GitHub"
+        description="Join the MetaMask developer community and learn how to contribute to the MetaMask project itself."
         button={{
           label: 'Contribute',
           href: 'https://github.com/metamask',