Skip to content

Commit a914027

Browse files
EricGustinEricGustin
authored
Fix: Align homepage grid card height (#818)
1 parent 6df35ac commit a914027

2 files changed

Lines changed: 113 additions & 108 deletions

File tree

‎app/_components/quick-start-card.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ export function QuickStartCard({
143143

144144
return (
145145
<motion.div
146+
className="h-full"
146147
whileHover={{
147148
scale: 1.02,
148149
boxShadow: "0 0 20px 0 rgba(238, 23, 94, 0.1)",

‎app/en/home/landing-page.tsx‎

Lines changed: 112 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -310,115 +310,119 @@ export function LandingPage() {
310310
{/* Choose Your Path Section */}
311311
<section className="py-16">
312312
<div className="container mx-auto px-4">
313-
<div className="mx-auto grid max-w-4xl grid-cols-1 gap-8 min-[1062px]:grid-cols-2">
314-
{/* Get Tools Column */}
315-
<div>
316-
<h2 className="mb-6 text-center font-bold text-2xl text-gray-900 tracking-tight md:text-3xl dark:text-white">
317-
Get Tools
318-
</h2>
319-
<div className="space-y-4">
320-
<QuickStartCard
321-
description="Browse 100+ ready-to-use integrations for Gmail, Slack, GitHub, and more."
322-
href={INTEGRATIONS_PAGE_HREF}
323-
icon={Puzzle}
324-
logos={[
325-
{ src: "/images/icons/gmail.png", alt: "Gmail" },
326-
{ src: "/images/icons/slack.png", alt: "Slack" },
327-
{
328-
src: "/images/icons/github.png",
329-
alt: "GitHub",
330-
invertInLight: true,
331-
},
332-
{
333-
src: "/images/icons/google_sheets.svg",
334-
alt: "Google Sheets",
335-
},
336-
{ src: "/images/icons/jira.svg", alt: "Jira" },
337-
{ src: "/images/icons/notion.png", alt: "Notion" },
338-
{ src: "/images/icons/linear.svg", alt: "Linear" },
339-
{ src: "/images/icons/hubspot.png", alt: "HubSpot" },
340-
{ src: "/images/icons/stripe.svg", alt: "Stripe" },
341-
{
342-
src: "/images/icons/google_drive.png",
343-
alt: "Google Drive",
344-
},
345-
{ src: "/images/icons/dropbox.png", alt: "Dropbox" },
346-
{
347-
src: "/images/icons/confluence.svg",
348-
alt: "Confluence",
349-
invertInDark: true,
350-
},
351-
{ src: "/images/icons/reddit.png", alt: "Reddit" },
352-
]}
353-
title="Pre-built Integrations"
354-
/>
355-
<QuickStartCard
356-
description="Create your own MCP servers and custom tools with our SDK."
357-
href="/guides/create-tools/tool-basics/build-mcp-server"
358-
icon={Wrench}
359-
title="Build Custom Tools"
360-
/>
361-
</div>
313+
<div className="mx-auto grid max-w-4xl grid-cols-1 gap-4 min-[1062px]:grid-cols-2 min-[1062px]:gap-x-8">
314+
{/* Get Tools header — desktop: col 1 row 1; mobile: flows before its cards */}
315+
<h2 className="mb-2 text-center font-bold text-2xl text-gray-900 tracking-tight md:text-3xl dark:text-white min-[1062px]:col-start-1 min-[1062px]:row-start-1">
316+
Get Tools
317+
</h2>
318+
{/* Pre-built Integrations — desktop: col 1 row 2 */}
319+
<div className="min-[1062px]:col-start-1 min-[1062px]:row-start-2">
320+
<QuickStartCard
321+
description="Browse 100+ ready-to-use integrations for Gmail, Slack, GitHub, and more."
322+
href={INTEGRATIONS_PAGE_HREF}
323+
icon={Puzzle}
324+
logos={[
325+
{ src: "/images/icons/gmail.png", alt: "Gmail" },
326+
{ src: "/images/icons/slack.png", alt: "Slack" },
327+
{
328+
src: "/images/icons/github.png",
329+
alt: "GitHub",
330+
invertInLight: true,
331+
},
332+
{
333+
src: "/images/icons/google_sheets.svg",
334+
alt: "Google Sheets",
335+
},
336+
{ src: "/images/icons/jira.svg", alt: "Jira" },
337+
{ src: "/images/icons/notion.png", alt: "Notion" },
338+
{ src: "/images/icons/linear.svg", alt: "Linear" },
339+
{ src: "/images/icons/hubspot.png", alt: "HubSpot" },
340+
{ src: "/images/icons/stripe.svg", alt: "Stripe" },
341+
{
342+
src: "/images/icons/google_drive.png",
343+
alt: "Google Drive",
344+
},
345+
{ src: "/images/icons/dropbox.png", alt: "Dropbox" },
346+
{
347+
src: "/images/icons/confluence.svg",
348+
alt: "Confluence",
349+
invertInDark: true,
350+
},
351+
{ src: "/images/icons/reddit.png", alt: "Reddit" },
352+
]}
353+
title="Pre-built Integrations"
354+
/>
362355
</div>
363-
{/* Use Tools Column */}
364-
<div>
365-
<h2 className="mb-6 text-center font-bold text-2xl text-gray-900 tracking-tight md:text-3xl dark:text-white">
366-
Use Arcade
367-
</h2>
368-
<div className="space-y-4">
369-
<QuickStartCard
370-
description="Add tools to Cursor, VS Code, Claude Desktop, or any MCP client."
371-
href="/get-started/mcp-clients"
372-
icon={Monitor}
373-
logos={[
374-
{
375-
src: "/images/icons/cursor.png",
376-
alt: "Cursor",
377-
invertInLight: true,
378-
},
379-
{ src: "/images/icons/vscode.svg", alt: "VS Code" },
380-
{
381-
src: "/images/icons/claude.png",
382-
alt: "Claude Desktop",
383-
invertInLight: true,
384-
},
385-
]}
386-
title="Connect to Your IDE"
387-
/>
388-
<QuickStartCard
389-
description="Integrate with LangChain, OpenAI Agents, CrewAI, Vercel AI, and more."
390-
href="/get-started/agent-frameworks"
391-
icon={Code}
392-
logos={[
393-
{
394-
src: "/images/icons/langchain.svg",
395-
alt: "LangChain",
396-
invertInDark: true,
397-
},
398-
{ src: "/images/icons/openai.png", alt: "OpenAI" },
399-
{
400-
src: "https://avatars.githubusercontent.com/u/170677839?s=200&v=4",
401-
alt: "CrewAI",
402-
},
403-
{
404-
src: "/images/icons/vercel.svg",
405-
alt: "Vercel AI",
406-
invertInDark: true,
407-
},
408-
{ src: "/images/icons/google.png", alt: "Google ADK" },
409-
{
410-
src: "/images/icons/mastra.svg",
411-
alt: "Mastra",
412-
invertInDark: true,
413-
},
414-
{
415-
src: "https://avatars.githubusercontent.com/u/72518640?s=200&v=4",
416-
alt: "TanStack AI",
417-
},
418-
]}
419-
title="Power Your Agent"
420-
/>
421-
</div>
356+
{/* Build Custom Tools — desktop: col 1 row 3 */}
357+
<div className="min-[1062px]:col-start-1 min-[1062px]:row-start-3">
358+
<QuickStartCard
359+
description="Create your own MCP servers and custom tools with our SDK."
360+
href="/guides/create-tools/tool-basics/build-mcp-server"
361+
icon={Wrench}
362+
title="Build Custom Tools"
363+
/>
364+
</div>
365+
{/* Use Arcade header — desktop: col 2 row 1; mobile: flows before its cards */}
366+
<h2 className="mb-2 text-center font-bold text-2xl text-gray-900 tracking-tight md:text-3xl dark:text-white min-[1062px]:col-start-2 min-[1062px]:row-start-1">
367+
Use Arcade
368+
</h2>
369+
{/* Connect to Your IDE — desktop: col 2 row 2 */}
370+
<div className="min-[1062px]:col-start-2 min-[1062px]:row-start-2">
371+
<QuickStartCard
372+
description="Add tools to Cursor, VS Code, Claude Desktop, or any MCP client."
373+
href="/get-started/mcp-clients"
374+
icon={Monitor}
375+
logos={[
376+
{
377+
src: "/images/icons/cursor.png",
378+
alt: "Cursor",
379+
invertInLight: true,
380+
},
381+
{ src: "/images/icons/vscode.svg", alt: "VS Code" },
382+
{
383+
src: "/images/icons/claude.png",
384+
alt: "Claude Desktop",
385+
invertInLight: true,
386+
},
387+
]}
388+
title="Connect to Your IDE"
389+
/>
390+
</div>
391+
{/* Power Your Agent — desktop: col 2 row 3 */}
392+
<div className="min-[1062px]:col-start-2 min-[1062px]:row-start-3">
393+
<QuickStartCard
394+
description="Integrate with LangChain, OpenAI Agents, CrewAI, Vercel AI, and more."
395+
href="/get-started/agent-frameworks"
396+
icon={Code}
397+
logos={[
398+
{
399+
src: "/images/icons/langchain.svg",
400+
alt: "LangChain",
401+
invertInDark: true,
402+
},
403+
{ src: "/images/icons/openai.png", alt: "OpenAI" },
404+
{
405+
src: "https://avatars.githubusercontent.com/u/170677839?s=200&v=4",
406+
alt: "CrewAI",
407+
},
408+
{
409+
src: "/images/icons/vercel.svg",
410+
alt: "Vercel AI",
411+
invertInDark: true,
412+
},
413+
{ src: "/images/icons/google.png", alt: "Google ADK" },
414+
{
415+
src: "/images/icons/mastra.svg",
416+
alt: "Mastra",
417+
invertInDark: true,
418+
},
419+
{
420+
src: "https://avatars.githubusercontent.com/u/72518640?s=200&v=4",
421+
alt: "TanStack AI",
422+
},
423+
]}
424+
title="Power Your Agent"
425+
/>
422426
</div>
423427
</div>
424428
</div>

0 commit comments

Comments
 (0)