Editorial improvements for #662 (#663)

github-actions[bot] · nearestnabors · claude · web-flow · commit f98911827c9a · 2026-01-17T00:40:02.000Z
* Editorial: Voice and Tone - Changed "you" references to be more direct; Terminology - Corrected "MCP Servers" to "MCP servers"

* Editorial: Structural improvements

* Editorial: Voice and Tone (Use "you" for the reader), Structure (Default Page Structure 10/20/70 format) - Added intro line and restructured opening

* Update app/en/get-started/about-arcade/page.mdx

* Update landing page with marketing feedback and fix MDX errors

- Change hero title to "MCP Runtime for AI agents"
- Rename "Arcade Engine" to "Runtime" and "Authorized Tool Calling" to "Agent Authorization"
- Update Popular Integrations: remove Twitch, Spotify, Figma, Discord, Salesforce; add X, MS Teams, Outlook, HubSpot, Asana
- Add logo rows to QuickStartCards with side gradient fade effect
- Add gradient overlay to Popular Integrations section
- Remove sample app images (outdated logos)
- Center column titles, remove offset from Use Arcade column
- Fix MDX syntax errors in about-arcade and examples pages

Co-Authored-By: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;

* Editorial cleanup: update copy and fix formatting

- Remove editorial comment blocks from MDX files
- Fix indentation on tags props in example cards
- Update intro copy in examples and agent-frameworks pages
- Add newlines at end of files

Co-Authored-By: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;

---------

Co-authored-by: github-actions[bot] &lt;41898282+github-actions[bot]@users.noreply.github.com&gt;
Co-authored-by: RL "Nearest" Nabors &lt;236306+nearestnabors@users.noreply.github.com&gt;
Co-authored-by: Rachel Lee Nabors &lt;nearestnabors@users.noreply.github.com&gt;
Co-authored-by: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/app/_components/quick-start-card.tsx b/app/_components/quick-start-card.tsx
@@ -61,28 +61,39 @@ export function QuickStartCard({
           {description}
         </p>
         {logos && logos.length > 0 && (
-          <div className="mt-4 flex items-center justify-center gap-4 px-2">
-            {logos.map((logo) => {
-              const getInvertClass = () => {
-                if (logo.invertInLight) {
-                  return "invert dark:invert-0";
-                }
-                if (logo.invertInDark) {
-                  return "dark:invert";
-                }
-                return "";
-              };
-              return (
-                <img
-                  alt={logo.alt}
-                  className={`h-7 w-7 object-contain ${getInvertClass()}`}
-                  height={28}
-                  key={logo.src}
-                  src={logo.src}
-                  width={28}
-                />
-              );
-            })}
+          <div className="relative mt-4 overflow-hidden">
+            <div className="flex items-center justify-center gap-4 px-6">
+              {logos.map((logo) => {
+                const getInvertClass = () => {
+                  if (logo.invertInLight) {
+                    return "invert dark:invert-0";
+                  }
+                  if (logo.invertInDark) {
+                    return "dark:invert";
+                  }
+                  return "";
+                };
+                return (
+                  <img
+                    alt={logo.alt}
+                    className={`h-7 w-7 object-contain ${getInvertClass()}`}
+                    height={28}
+                    key={logo.src}
+                    src={logo.src}
+                    width={28}
+                  />
+                );
+              })}
+            </div>
+            {/* Side gradients */}
+            <div
+              aria-hidden="true"
+              className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-linear-to-r from-white to-transparent dark:from-[rgb(17,17,17)]"
+            />
+            <div
+              aria-hidden="true"
+              className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-linear-to-l from-white to-transparent dark:from-[rgb(17,17,17)]"
+            />
           </div>
         )}
         {code && (
diff --git a/app/en/get-started/about-arcade/page.mdx b/app/en/get-started/about-arcade/page.mdx
@@ -3,24 +3,25 @@ title: "How Arcade helps with Agent Authorization"
 description: "Learn how Arcade helps with auth and tool calling"
 ---
 
+
 import { Tabs } from "nextra/components";
 
 # About Arcade
 
-Applications that use models to perform tasks (_agentic applications_) commonly require access to sensitive data and services. Authentication complexities often hinder AI from performing tasks that require user-specific information, like what emails you recently received or what's coming up on your calendar.
+Applications that use models to perform tasks (_agentic applications_) commonly require access to sensitive data and services. Authentication complexities often hinder AI from performing tasks that require user-specific information, like what emails were recently received or what's coming up on a calendar.
 
-To retrieve this information, agentic applications need to be able to authenticate and authorize access to external services you use like Gmail or Google Calendar.
+To retrieve this information, agentic applications need to be able to authenticate and authorize access to external services like Gmail or Google Calendar.
 
-Authenticating to retrieve information, however, is not the only challenge. Agentic applications also need to authenticate to **act** on your behalf - like sending an email or updating your calendar.
+Authenticating to retrieve information, however, is not the only challenge. Agentic applications also need to authenticate to **act** on behalf of users - like sending an email or updating a calendar.
 
 Without auth, AI agents are severely limited in what they can do.
 
 ## How Arcade solves this
 
-Arcade provides an authorization system that handles OAuth 2.0, API keys, and user tokens needed by AI agents to access external services through tools. This means your AI agents can now act on behalf of users securely and privately.
+Arcade provides an authorization system that handles OAuth 2.0, API keys, and user tokens needed by AI agents to access external services through tools. This means AI agents can now act on behalf of users securely and privately.
 
 <picture>
-  <source srcSet="/images/overview-dark.png" media="(prefers-color-scheme: dark)" />
+  <source srcSet="/images/overview-dark.png" media="(prefers-color-scheme: dark)"></source>
   <img src="/images/overview-light.png" alt="Arcade architecture overview" />
 </picture>
 
@@ -32,15 +33,15 @@ With Arcade, developers can now create agents that can _act as the end users of
 
 ## Auth permissions and scopes
 
-Each tool in Arcade's MCP Servers has a set of required permissions - or, more commonly referred to in OAuth 2.0, **scopes**. For example, the [`Gmail.SendEmail`](/resources/integrations/productivity/gmail#gmailsendemail) tool requires the [`https://www.googleapis.com/auth/gmail.send`](https://developers.google.com/identity/protocols/oauth2/scopes#gmail) scope.
+Each tool in Arcade's MCP servers has a set of required permissions - or, more commonly referred to in OAuth 2.0, **scopes**. For example, the [`Gmail.SendEmail`](/resources/integrations/productivity/gmail#gmailsendemail) tool requires the [`https://www.googleapis.com/auth/gmail.send`](https://developers.google.com/identity/protocols/oauth2/scopes#gmail) scope.
 
 A scope is what the user has authorized someone else (in this case, the AI agent) to do on their behalf. In any OAuth 2.0-compatible service, each kind of action requires a different set of permissions. This gives the user fine-grained control over what data third-party services can access and what actions they can take in their accounts.
 
 When an agent calls a tool, if the user has not granted the required permissions, Arcade Engine will automatically prompt the user to authorize the tool and coordinate the OAuth 2.0 flow with the service provider.
 
 ## How to implement OAuth 2.0-authorized tool calling
 
-To learn how Arcade authorizes actions (tools) through OAuth 2.0 and how to implement your own auth flow, check out [Authorized Tool Calling](/guides/tool-calling/custom-apps/auth-tool-calling).
+To learn how Arcade authorizes actions (tools) through OAuth 2.0 and how to implement auth flow, check out [Authorized Tool Calling](/guides/tool-calling/custom-apps/auth-tool-calling).
 
 ## Tools that don't require authorization
 
@@ -78,4 +79,4 @@ console.log(response.output.value);
 ```
 
 </Tabs.Tab>
-</Tabs>
+</Tabs>
diff --git a/app/en/guides/agent-frameworks/page.mdx b/app/en/guides/agent-frameworks/page.mdx
@@ -1,12 +1,13 @@
+```mdx
 import { PlatformCard } from "@/app/_components/platform-card";
 import { Tabs } from "nextra/components";
 
-{/* Editorial: Structure - Added intro line explaining what readers will learn; Voice and tone - Removed marketing language "seamlessly" and "making it straightforward" */}
-
 # Arcade with Agent Frameworks and MCP Clients
 
 Arcade integrates with agent frameworks and MCP clients to add tool-calling capabilities to your AI applications.
 
+These guides are for developers building AI applications who need to connect Arcade tools to their agent frameworks or MCP clients. These guides show you how to authenticate with Arcade, load tools, and execute them within your chosen framework. Each guide provides code examples and configuration steps to get you started quickly.
+
 ## Agent Frameworks
 
 <Tabs items={["Python", "JavaScript"]} storageKey="preferredLanguage">
@@ -71,4 +72,4 @@ Arcade integrates with agent frameworks and MCP clients to add tool-calling capa
     </div>
   </Tabs.Tab>
 </Tabs>
-```
+```
diff --git a/app/en/home/landing-page.tsx b/app/en/home/landing-page.tsx
@@ -68,9 +68,9 @@ const POPULAR_INTEGRATIONS_ROW1 = [
     href: "/resources/integrations/productivity/google-slides",
   },
   {
-    name: "Salesforce",
-    icon: "/images/icons/salesforce.png",
-    href: "/resources/integrations/sales/salesforce",
+    name: "HubSpot",
+    icon: "/images/icons/hubspot.png",
+    href: "/resources/integrations/crm/hubspot",
   },
   {
     name: "Linear",
@@ -93,19 +93,19 @@ const POPULAR_INTEGRATIONS_ROW2 = [
     invertInLight: true,
   },
   {
-    name: "Discord",
-    icon: "/images/icons/discord.png",
-    href: "/resources/integrations/social-communication/discord",
+    name: "X",
+    icon: "/images/icons/twitter.png",
+    href: "/resources/integrations/social-communication/x",
   },
   {
-    name: "Spotify",
-    icon: "/images/icons/spotify.png",
-    href: "/resources/integrations/entertainment/spotify",
+    name: "MS Teams",
+    icon: "/images/icons/ms_teams.png",
+    href: "/resources/integrations/social-communication/microsoft-teams",
   },
   {
-    name: "Figma",
-    icon: "/images/icons/figma.svg",
-    href: "/resources/integrations/development/figma",
+    name: "Outlook",
+    icon: "/images/icons/outlook_mail.png",
+    href: "/resources/integrations/productivity/outlook-mail",
   },
   {
     name: "Stripe",
@@ -118,9 +118,9 @@ const POPULAR_INTEGRATIONS_ROW2 = [
     href: "/resources/integrations/productivity/notion",
   },
   {
-    name: "Twitch",
-    icon: "/images/icons/twitch.png",
-    href: "/resources/integrations/entertainment/twitch",
+    name: "Asana",
+    icon: "/images/icons/asana.svg",
+    href: "/resources/integrations/productivity/asana",
   },
   {
     name: "Reddit",
@@ -199,7 +199,7 @@ export function LandingPage() {
   };
 
   return (
-    <div>
+    <div className="relative">
       {/* Hero Section */}
       <section className="relative isolate px-6 lg:px-8">
         <div
@@ -222,7 +222,7 @@ export function LandingPage() {
               initial={{ opacity: 0, y: 20 }}
               transition={{ duration: ANIMATION_DURATION }}
             >
-              Authorized tools for AI agents that get things done.
+              MCP Runtime for AI agents that get things done.
             </motion.h1>
             <motion.p
               animate={{ opacity: 1, y: 0 }}
@@ -290,14 +290,43 @@ export function LandingPage() {
           <div className="mx-auto grid max-w-4xl grid-cols-1 gap-8 min-[1062px]:grid-cols-2">
             {/* Get Tools Column */}
             <div>
-              <h2 className="mb-6 text-center font-bold text-2xl text-gray-900 tracking-tight md:text-3xl min-[1062px]:text-left dark:text-white">
+              <h2 className="mb-6 text-center font-bold text-2xl text-gray-900 tracking-tight md:text-3xl dark:text-white">
                 Get Tools
               </h2>
               <div className="space-y-4">
                 <QuickStartCard
-                  description="Browse 100+ ready-to-use integrations for Gmail, Slack, GitHub, Salesforce, and more."
+                  description="Browse 100+ ready-to-use integrations for Gmail, Slack, GitHub, and more."
                   href="/resources/integrations"
                   icon={Puzzle}
+                  logos={[
+                    { src: "/images/icons/gmail.png", alt: "Gmail" },
+                    { src: "/images/icons/slack.png", alt: "Slack" },
+                    {
+                      src: "/images/icons/github.png",
+                      alt: "GitHub",
+                      invertInLight: true,
+                    },
+                    {
+                      src: "/images/icons/google_sheets.svg",
+                      alt: "Google Sheets",
+                    },
+                    { src: "/images/icons/jira.svg", alt: "Jira" },
+                    { src: "/images/icons/notion.png", alt: "Notion" },
+                    { src: "/images/icons/linear.svg", alt: "Linear" },
+                    { src: "/images/icons/hubspot.png", alt: "HubSpot" },
+                    { src: "/images/icons/stripe.svg", alt: "Stripe" },
+                    {
+                      src: "/images/icons/google_drive.png",
+                      alt: "Google Drive",
+                    },
+                    { src: "/images/icons/dropbox.png", alt: "Dropbox" },
+                    {
+                      src: "/images/icons/confluence.svg",
+                      alt: "Confluence",
+                      invertInDark: true,
+                    },
+                    { src: "/images/icons/reddit.png", alt: "Reddit" },
+                  ]}
                   title="Pre-built Integrations"
                 />
                 <QuickStartCard
@@ -309,8 +338,8 @@ export function LandingPage() {
               </div>
             </div>
             {/* Use Tools Column */}
-            <div className="min-[1062px]:mt-[100px]">
-              <h2 className="mb-6 text-center font-bold text-2xl text-gray-900 tracking-tight md:text-3xl min-[1062px]:text-left dark:text-white">
+            <div>
+              <h2 className="mb-6 text-center font-bold text-2xl text-gray-900 tracking-tight md:text-3xl dark:text-white">
                 Use Arcade
               </h2>
               <div className="space-y-4">
@@ -337,6 +366,29 @@ export function LandingPage() {
                   description="Integrate with LangChain, OpenAI Agents, CrewAI, Vercel AI, and more."
                   href="/guides/agent-frameworks"
                   icon={Code}
+                  logos={[
+                    {
+                      src: "/images/icons/langchain.svg",
+                      alt: "LangChain",
+                      invertInDark: true,
+                    },
+                    { src: "/images/icons/openai.png", alt: "OpenAI" },
+                    {
+                      src: "https://avatars.githubusercontent.com/u/170677839?s=200&v=4",
+                      alt: "CrewAI",
+                    },
+                    {
+                      src: "/images/icons/vercel.svg",
+                      alt: "Vercel AI",
+                      invertInDark: true,
+                    },
+                    { src: "/images/icons/google.png", alt: "Google ADK" },
+                    {
+                      src: "/images/icons/mastra.svg",
+                      alt: "Mastra",
+                      invertInDark: true,
+                    },
+                  ]}
                   title="Power Your Agent"
                 />
               </div>
@@ -346,7 +398,7 @@ export function LandingPage() {
       </section>
 
       {/* Popular Integrations Section */}
-      <section className="bg-gray-50/50 py-16 dark:bg-gray-900/30">
+      <section className="relative bg-gray-50/50 py-16 dark:bg-gray-900/30">
         <div className="container mx-auto px-4">
           <div className="mb-10 flex flex-col items-center text-center min-[1062px]:flex-row min-[1062px]:items-end min-[1062px]:justify-between min-[1062px]:text-left">
             <div>
@@ -395,7 +447,7 @@ export function LandingPage() {
                       width={32}
                     />
                   </div>
-                  <span className="text-center font-medium text-gray-900 text-sm dark:text-white">
+                  <span className="break-keep text-center font-medium text-gray-900 text-sm dark:text-white">
                     {integration.name}
                   </span>
                 </Link>
@@ -421,14 +473,19 @@ export function LandingPage() {
                       width={32}
                     />
                   </div>
-                  <span className="text-center font-medium text-gray-900 text-sm dark:text-white">
+                  <span className="break-keep text-center font-medium text-gray-900 text-sm dark:text-white">
                     {integration.name}
                   </span>
                 </Link>
               ))}
             </div>
           </div>
         </div>
+        {/* Gradient overlay */}
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-x-0 bottom-0 h-[200px] bg-linear-to-t from-white to-transparent dark:from-[#0a0a0a]"
+        />
       </section>
 
       {/* Framework Compatibility Section */}
@@ -463,7 +520,7 @@ export function LandingPage() {
                     width={40}
                   />
                 </div>
-                <span className="text-center font-medium text-gray-900 text-sm dark:text-white">
+                <span className="break-keep text-center font-medium text-gray-900 text-sm dark:text-white">
                   {framework.name}
                 </span>
               </Link>
@@ -488,7 +545,7 @@ export function LandingPage() {
               description="Your MCP server and agentic tool provider. Manages authentication, tool registration, and execution."
               href="/get-started/about-arcade"
               icon={Cog}
-              title="Arcade Engine"
+              title="Runtime"
             />
             <QuickStartCard
               description="Catalog of pre-built tools and integrations. Browse 100+ ready-to-use MCP servers."
@@ -500,7 +557,7 @@ export function LandingPage() {
               description="Let agents act on behalf of users. Handle OAuth, API keys, and tokens for tools like Gmail and Google Drive."
               href="/guides/tool-calling/custom-apps/auth-tool-calling"
               icon={Shield}
-              title="Authorized Tool Calling"
+              title="Agent Authorization"
             />
           </div>
         </div>
@@ -540,19 +597,16 @@ export function LandingPage() {
               blank
               description="A chatbot that can help you with your daily tasks."
               href="https://chat.arcade.dev/"
-              image="/images/sample-apps/arcade-chat.png"
               title="Arcade Chat"
             />
             <SampleAppCard
               description="A bot for Slack that can act on your behalf."
               href="https://github.com/ArcadeAI/ArcadeSlackAgent"
-              image="/images/logo/arcade.png"
               title="Archer"
             />
             <SampleAppCard
               description="A Slack bot that extracts and summarizes YouTube transcripts."
               href="https://github.com/dforwardfeed/slack-AIpodcast-summaries"
-              image="/images/sample-apps/slack-aipodcast-summaries.jpg"
               title="YouTube Podcast Summarizer"
             />
           </div>
diff --git a/app/en/resources/examples/page.mdx b/app/en/resources/examples/page.mdx
