Skip to content

Commit 1bff612

Browse files
jonathanhefnerjonathanhefner
committed
Clean up margins and spacing on landing page
This commit changes the margins and spacing on the landing page to be more uniform. This commit also simplifies the markdown of the landing page and removes some unused styles.
1 parent 6883315 commit 1bff612

File tree

2 files changed

+92
-141
lines changed

2 files changed

+92
-141
lines changed

‎docs/about/index.mdx‎

Lines changed: 69 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -5,88 +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-logo">
12-
<img src="/mcp.png" alt="MCP Logo" />
13-
</div>
14-
<div className="intro-content">
15-
<h2 className="intro-title">
16-
Connect your AI applications to the world
17-
</h2>
18-
<p className="intro-description">
19-
AI-enabled tools are powerful, but they're often limited to the
20-
information you manually provide or require bespoke integrations.
21-
</p>
22-
<p className="intro-description">
23-
Whether it's reading files from your computer, searching through an
24-
internal or external knowledge base, or updating tasks in an project
25-
management tool, MCP provides a secure, standardized, *simple* way
26-
to give AI systems the context they need.
27-
</p>
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-number">1</div>
35-
<div className="step-content">
36-
<h3>Choose MCP servers</h3>
37-
<p>
38-
Pick from pre-built servers for popular tools like GitHub, Google
39-
Drive, Slack and hundreds of others. Combine multiple servers for
40-
complete workflows, or easily build your own for custom
41-
integrations.
42-
</p>
43-
</div>
44-
<div className="step-number">2</div>
45-
<div className="step-content">
46-
<h3>Connect your AI application</h3>
47-
<p>
48-
Configure your AI application (like Claude, VS Code, or ChatGPT) to
49-
connect to your MCP servers. The application can now see available
50-
tools, resources and prompts from all connected servers.
51-
</p>
52-
</div>
53-
<div className="step-number">3</div>
54-
<div className="step-content">
55-
<h3>Work with context</h3>
56-
<p>
57-
Your AI-powered application can now access real data, execute
58-
actions, and provide more helpful responses based on your actual
59-
context.
60-
</p>
61-
</div>
62-
</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>
6324
</div>
64-
<div className="ecosystem-section">
65-
<h2 className="section-title">Join a growing ecosystem</h2>
66-
<div className="stats-grid">
67-
<a href="/docs/sdk" target="_blank" className="stat-card">
68-
<div className="stat-number">10</div>
69-
<div className="stat-label">Official SDKs</div>
70-
</a>
71-
<a href="/clients" target="_blank" className="stat-card">
72-
<div className="stat-number">80+</div>
73-
<div className="stat-label">Compatible Clients</div>
74-
</a>
75-
<a
76-
href="https://github.com/modelcontextprotocol/servers?tab=readme-ov-file#%EF%B8%8F-official-integrations"
77-
target="_blank"
78-
rel="noopener noreferrer"
79-
className="stat-card"
80-
>
81-
<div className="stat-number">1000+</div>
82-
<div className="stat-label">Available Servers</div>
83-
</a>
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>
8446
</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>
8577
</div>
86-
</div>
87-
<div className="cta-buttons">
78+
</section>
79+
<section className="cta-buttons">
8880
<a href="/docs/getting-started/intro" className="cta-primary">
8981
Get Started
9082
</a>
91-
</div>
83+
</section>
9284
</div>

‎docs/style.css‎

Lines changed: 23 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -210,44 +210,26 @@ body:has(#schema-reference) {
210210
/* Custom landing page styles */
211211
.landing-page {
212212
min-height: 100vh;
213-
background: #ffffff;
214-
color: #111827;
215-
overflow-x: hidden;
216-
position: relative;
217-
218-
--highlight-color: #6366f1;
219-
}
220-
221-
.hero-section {
222-
position: relative;
223-
z-index: 1;
224213
display: flex;
225214
flex-direction: column;
226215
align-items: center;
227-
padding: 6rem 2rem;
228-
}
229216

230-
.hero-title {
231-
margin-bottom: 2rem;
232-
display: flex;
233-
align-items: center;
234-
justify-content: center;
235-
}
217+
padding: 2rem;
218+
@media (min-width: 720px) {
219+
padding: 6rem;
220+
max-width: calc(1200px + 6rem);
221+
margin: 0 auto;
222+
}
236223

237-
.hero-logo {
238-
height: 8rem;
239-
width: auto;
240-
}
224+
& > section + section {
225+
margin-top: 4rem;
226+
}
241227

242-
.hero-subtitle {
243-
font-size: 1.5rem;
244-
color: #6b7280;
245-
margin-bottom: 4rem;
246-
max-width: 700px;
247-
line-height: 1.7;
228+
background: #ffffff;
229+
color: #111827;
230+
--highlight-color: #6366f1;
248231
}
249232

250-
251233
.play-button {
252234
width: 100px;
253235
height: 100px;
@@ -377,29 +359,10 @@ body:has(#schema-reference) {
377359
color: #111827;
378360
}
379361

380-
.section-description {
381-
font-size: 1.125rem;
382-
color: #6b7280;
383-
line-height: 1.8;
384-
max-width: 800px;
385-
margin: 0 auto 1.5rem;
386-
text-align: center;
387-
}
388-
389362
/* Intro video section */
390363
.intro-video-section {
391-
display: flex;
392-
flex-direction: column;
393-
align-items: center;
394-
max-width: 1200px;
395-
margin: 0 auto;
396-
padding: 4rem 2rem 6rem;
397-
width: 100%;
398-
}
399-
400-
.intro-content-wrapper {
401364
display: grid;
402-
gap: 4rem;
365+
gap: 2rem;
403366

404367
.intro-logo img {
405368
width: 10rem;
@@ -408,24 +371,30 @@ body:has(#schema-reference) {
408371

409372
.intro-content {
410373
.intro-title {
374+
width: fit-content;
375+
margin: 0 auto;
376+
margin-bottom: 1.5rem;
411377
font-size: 2.5rem;
412378
font-weight: 700;
413-
margin-bottom: 1.5rem;
414-
color: #111827;
415379
line-height: 1.2;
380+
color: #111827;
416381
}
417382

418383
.intro-description {
384+
margin-bottom: 1.5rem;
419385
font-size: 1.125rem;
420-
color: #6b7280;
421386
line-height: 1.8;
422-
margin-bottom: 1.5rem;
387+
color: #6b7280;
423388
}
424389
}
425390

426391
@media (min-width: 1080px) {
427392
grid-template-columns: 1fr 4fr;
428393

394+
.intro-content .intro-title {
395+
width: 100%;
396+
}
397+
429398
.intro-logo img {
430399
width: 100%;
431400
}
@@ -506,8 +475,6 @@ body:has(#schema-reference) {
506475

507476
/* How it works section */
508477
.steps-container {
509-
margin: 3rem 0;
510-
511478
display: grid;
512479
grid-template-columns: 2.5rem auto;
513480
max-width: 800px;
@@ -551,7 +518,6 @@ body:has(#schema-reference) {
551518

552519
/* Stats section */
553520
.ecosystem-section {
554-
margin: 4rem auto;
555521
max-width: 800px;
556522

557523
.stats-grid {
@@ -607,7 +573,6 @@ body:has(#schema-reference) {
607573
.cta-buttons {
608574
display: flex;
609575
justify-content: center;
610-
margin-bottom: 6rem;
611576

612577
.cta-primary {
613578
padding: 1rem 2.5rem;
@@ -629,12 +594,6 @@ body:has(#schema-reference) {
629594
}
630595

631596
@media (max-width: 768px) {
632-
.hero-title {
633-
font-size: 3rem;
634-
}
635-
.hero-subtitle {
636-
font-size: 1.2rem;
637-
}
638597
.features-grid {
639598
grid-template-columns: 1fr;
640599
}

0 commit comments

Comments
 (0)