Skip to content

Commit ad8526e

Browse files
jonathanhefnerjonathanhefner
authored
Merge pull request modelcontextprotocol#1479 from jonathanhefner/landing-page-layout-tweaks
Landing page layout tweaks
2 parents 0ff4a9b + 1bff612 commit ad8526e

File tree

2 files changed

+200
-430
lines changed

2 files changed

+200
-430
lines changed

‎docs/about/index.mdx‎

Lines changed: 69 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -5,101 +5,80 @@ mode: "custom"
55
---
66

77
<div className="landing-page">
8-
<div className="hero-section">
9-
<div className="intro-video-section">
10-
<div className="intro-content-wrapper">
11-
<div className="intro-content left-aligned">
12-
<h2 className="intro-title">
13-
Connect your AI applications to the world
14-
</h2>
15-
<p className="intro-description">
16-
AI-enabled tools are powerful, but they're often limited to the
17-
information you manually provide or require bespoke integrations.
18-
</p>
19-
<p className="intro-description">
20-
Whether it's reading files from your computer, searching through an
21-
internal or external knowledge base, or updating tasks in an project
22-
management tool, MCP provides a secure, standardized, *simple* way
23-
to give AI systems the context they need.
24-
</p>
25-
</div>
26-
<div className="intro-logo">
27-
<img src="/mcp.png" alt="MCP Logo" />
28-
</div>
29-
</div>
8+
<section className="intro-video-section">
9+
<div className="intro-logo">
10+
<img src="/mcp.png" alt="MCP Logo" />
3011
</div>
31-
<div className="how-section">
32-
<h2 className="section-title">How it works</h2>
33-
<div className="steps-container">
34-
<div className="step-item">
35-
<div className="step-content">
36-
<h3>
37-
<span className="step-number">1</span> Choose MCP servers
38-
</h3>
39-
<p>
40-
Pick from pre-built servers for popular tools like GitHub, Google
41-
Drive, Slack and hundreds of others. Combine multiple servers for
42-
complete workflows, or easily build your own for custom
43-
integrations.
44-
</p>
45-
</div>
46-
</div>
47-
<div className="step-connector"></div>
48-
<div className="step-item">
49-
<div className="step-content">
50-
<h3>
51-
<span className="step-number">2</span> Connect your AI application
52-
</h3>
53-
<p>
54-
Configure your AI application (like Claude, VS Code, or ChatGPT)
55-
to connect to your MCP servers. The application can now see
56-
available tools, resources and prompts from all connected servers.
57-
</p>
58-
</div>
59-
</div>
60-
<div className="step-connector"></div>
61-
<div className="step-item">
62-
<div className="step-content">
63-
<h3>
64-
<span className="step-number">3</span> Work with context
65-
</h3>
66-
<p>
67-
Your AI-powered application can now access real data, execute
68-
actions, and provide more helpful responses based on your actual
69-
context.
70-
</p>
71-
</div>
72-
</div>
73-
</div>
12+
<div className="intro-content">
13+
<h2 className="intro-title">Connect your AI applications to the world</h2>
14+
<p className="intro-description">
15+
AI-enabled tools are powerful, but they're often limited to the
16+
information you manually provide or require bespoke integrations.
17+
</p>
18+
<p className="intro-description">
19+
Whether it's reading files from your computer, searching through an
20+
internal or external knowledge base, or updating tasks in an project
21+
management tool, MCP provides a secure, standardized, *simple* way to
22+
give AI systems the context they need.
23+
</p>
7424
</div>
75-
<div className="ecosystem-section">
76-
<h2 className="section-title">Join a growing ecosystem</h2>
77-
<div className="stats-container">
78-
<div className="stats-grid">
79-
<a href="/docs/sdk" target="_blank" className="stat-card">
80-
<div className="stat-number">10</div>
81-
<div className="stat-label">Official SDKs</div>
82-
</a>
83-
<a
84-
href="https://github.com/modelcontextprotocol/servers?tab=readme-ov-file#%EF%B8%8F-official-integrations"
85-
target="_blank"
86-
rel="noopener noreferrer"
87-
className="stat-card"
88-
>
89-
<div className="stat-number">1000+</div>
90-
<div className="stat-label">Available Servers</div>
91-
</a>
92-
<a href="/clients" target="_blank" className="stat-card">
93-
<div className="stat-number">80+</div>
94-
<div className="stat-label">Compatible Clients</div>
95-
</a>
96-
</div>
25+
</section>
26+
<section className="how-section">
27+
<h2 className="section-title">How it works</h2>
28+
<div className="steps-container">
29+
<div className="step-number">1</div>
30+
<div className="step-content">
31+
<h3>Choose MCP servers</h3>
32+
<p>
33+
Pick from pre-built servers for popular tools like GitHub, Google
34+
Drive, Slack and hundreds of others. Combine multiple servers for
35+
complete workflows, or easily build your own for custom integrations.
36+
</p>
37+
</div>
38+
<div className="step-number">2</div>
39+
<div className="step-content">
40+
<h3>Connect your AI application</h3>
41+
<p>
42+
Configure your AI application (like Claude, VS Code, or ChatGPT) to
43+
connect to your MCP servers. The application can now see available
44+
tools, resources and prompts from all connected servers.
45+
</p>
9746
</div>
47+
<div className="step-number">3</div>
48+
<div className="step-content">
49+
<h3>Work with context</h3>
50+
<p>
51+
Your AI-powered application can now access real data, execute actions,
52+
and provide more helpful responses based on your actual context.
53+
</p>
54+
</div>
55+
</div>
56+
</section>
57+
<section className="ecosystem-section">
58+
<h2 className="section-title">Join a growing ecosystem</h2>
59+
<div className="stats-grid">
60+
<a href="/docs/sdk" target="_blank" className="stat-card">
61+
<div className="stat-number">10</div>
62+
<div className="stat-label">Official SDKs</div>
63+
</a>
64+
<a href="/clients" target="_blank" className="stat-card">
65+
<div className="stat-number">80+</div>
66+
<div className="stat-label">Compatible Clients</div>
67+
</a>
68+
<a
69+
href="https://github.com/modelcontextprotocol/servers?tab=readme-ov-file#%EF%B8%8F-official-integrations"
70+
target="_blank"
71+
rel="noopener noreferrer"
72+
className="stat-card"
73+
>
74+
<div className="stat-number">1000+</div>
75+
<div className="stat-label">Available Servers</div>
76+
</a>
9877
</div>
99-
</div>
100-
<div className="cta-buttons">
78+
</section>
79+
<section className="cta-buttons">
10180
<a href="/docs/getting-started/intro" className="cta-primary">
10281
Get Started
10382
</a>
104-
</div>
83+
</section>
10584
</div>

0 commit comments

Comments
 (0)