Mateo/dev 42 revamp calling tools in your custom apps quickstart (#591)

* initial stabs at new quickstart

* reworked the main quickstart with a workflow featuring 2 toolkits and scope elevation

* upgrade nextjs version

* fix lock file

* Update app/en/home/_meta.tsx

Co-authored-by: vfanelle <vfanelle@gmail.com>

* Update app/en/home/quickstart/page.mdx

Co-authored-by: vfanelle <vfanelle@gmail.com>

* Update app/en/home/quickstart/page.mdx

Co-authored-by: vfanelle <vfanelle@gmail.com>

* Update app/en/home/quickstart/page.mdx

Co-authored-by: vfanelle <vfanelle@gmail.com>

* Update app/en/home/quickstart/page.mdx

Co-authored-by: vfanelle <vfanelle@gmail.com>

* Update app/en/home/quickstart/page.mdx

Co-authored-by: vfanelle <vfanelle@gmail.com>

* Update app/en/home/quickstart/page.mdx

Co-authored-by: vfanelle <vfanelle@gmail.com>

* Update app/en/home/quickstart/page.mdx

Co-authored-by: vfanelle <vfanelle@gmail.com>

* removes top margin on nested uls in outcomes box

* addressed Valerie's comments

* make pnpm happy

---------

Co-authored-by: vfanelle <vfanelle@gmail.com>
Co-authored-by: Rachel Lee Nabors <nearestnabors@users.noreply.github.com>

Author: 3 people

app/_components/guide-overview.tsx

@@ -30,7 +30,7 @@ export function GuideOverview({ children, className }: GuideOverviewProps) {
   return (
     <div
       className={cn(
-        "my-6 rounded-lg border border-border bg-card p-6",
+        "guide-overview my-6 rounded-lg border border-border bg-card p-6",
         className
       )}
     >

app/en/home/_meta.tsx

@@ -40,7 +40,7 @@ export const meta: MetaRecord = {
     title: "Using Arcade",
   },
   quickstart: {
-    title: "Hosted Tools Quickstart",
+    title: "Calling tools in your agent",
   },
   "mcp-gateway-quickstart": {
     title: "Call a tool in your IDE/MCP Client",