Skip to content

Commit 9fefd4e

Browse files
mhartingtonmhartington
committed
feat(site): mcp page refinment
1 parent 2ac36f3 commit 9fefd4e

4 files changed

Lines changed: 166 additions & 174 deletions

File tree

‎apps/site/src/app/(index)/page.tsx‎

Lines changed: 120 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export const metadata: Metadata = {
6666
export default function SiteHome() {
6767
return (
6868
<main className="flex-1 w-full z-1 bg-background-default">
69-
<div className="hero h-123 -mt-24 flex items-end justify-center px-4">
69+
<section className="hero h-123 -mt-24 flex items-end justify-center px-4">
7070
<div className="w-screen h-123 absolute inset-0">
7171
<Antigravity
7272
count={300}
@@ -116,132 +116,134 @@ export default function SiteHome() {
116116
</CopyCode>
117117
</div>
118118
</div>
119-
</div>
120-
<div className="logo-parade"></div>
121-
<div>
122-
<div className="my-12">
123-
<Bento
124-
bentoSection={{
125-
boxes: [
126-
{
127-
title: "MCP Server",
128-
subtitle: "Use AI to configure and manage databases.",
129-
imageUrl: "/illustrations/homepage/mcp",
130-
imageAlt: "MCP server",
131-
icon: "fa-light fa-cloud-arrow-up",
132-
link: "/mcp",
133-
},
134-
{
135-
title: "Manage databases",
136-
subtitle:
137-
"Create, manage and explore databases directly in your IDE.",
138-
imageUrl: "/illustrations/homepage/ide",
139-
imageAlt: "IDE",
140-
icon: "fa-light fa-screwdriver-wrench",
141-
link: "https://marketplace.visualstudio.com/items?itemName=Prisma.prisma",
142-
},
143-
{
144-
title: "Type-safety",
145-
subtitle: "Code faster with auto-completion and type safety.",
146-
imageUrl: "/illustrations/homepage/typesafe",
147-
imageAlt: "Type-safe queries",
148-
icon: "fa-light fa-message-text",
149-
link: "https://prisma.io/docs/orm/prisma-client/type-safety",
150-
},
151-
{
152-
title: "Work collaboratively",
153-
subtitle: "Manage projects and databases with your team.",
154-
imageUrl: "/illustrations/homepage/collaborative",
155-
imageAlt: "Collaborative work",
156-
icon: "fa-light fa-screen-users",
157-
link: "https://console.prisma.io",
158-
},
159-
{
160-
title: "Browse your data",
161-
subtitle:
162-
"Explore, filter, and edit your data with an interface.",
163-
imageUrl: "/illustrations/homepage/data",
164-
imageAlt: "Data browsing",
165-
icon: "fa-light fa-magnifying-glass-arrow-right",
166-
link: "/studio",
167-
},
168-
],
169-
}}
170-
/>
171-
</div>
172-
</div>
173-
<div className="w-screen ">
174-
<div className="my-12">
175-
<CardSection cardSection={twoCol} />
176-
</div>
177-
</div>
178-
<div>
179-
<div className="my-12 bg-[linear-gradient(180deg,var(--color-background-default)-177.75%,var(--color-background-ppg-str)100%)] shadow-[0_1px_2px_0_rgba(0,0,0,0.04)] p-12">
180-
<div className="web-cta flex gap-3 md:gap-12 items-center mx-auto w-fit lg:p-4 flex-col md:flex-row">
181-
<h3 className="text-2xl text-foreground-neutral font-sans-display font-bold text-center md:text-left">
182-
Build anything.
183-
<br />
184-
Deploy instantly.
185-
</h3>
186-
<div className="content flex flex-col lg:flex-row gap-3 lg:gap-12 items-center md:items-start lg:items-center">
187-
<p className="max-w-94 w-full text-center md:text-left text-foreground-neutral-weak text-md">
188-
Give your users instant production-ready Postgres, create
189-
databases, add a built-in data browser, and personalize it.
190-
</p>
191-
<Button variant="ppg" size="2xl">
192-
<span>Explore Pricing</span>
193-
<i className="fa-regular fa-arrow-right ml-2" />
194-
</Button>
195-
</div>
119+
</section>
120+
121+
<section className="my-12">
122+
<Bento
123+
bentoSection={{
124+
boxes: [
125+
{
126+
title: "MCP Server",
127+
subtitle: "Use AI to configure and manage databases.",
128+
imageUrl: "/illustrations/homepage/mcp",
129+
imageAlt: "MCP server",
130+
icon: "fa-light fa-cloud-arrow-up",
131+
link: "/mcp",
132+
},
133+
{
134+
title: "Manage databases",
135+
subtitle:
136+
"Create, manage and explore databases directly in your IDE.",
137+
imageUrl: "/illustrations/homepage/ide",
138+
imageAlt: "IDE",
139+
icon: "fa-light fa-screwdriver-wrench",
140+
link: "https://marketplace.visualstudio.com/items?itemName=Prisma.prisma",
141+
},
142+
{
143+
title: "Type-safety",
144+
subtitle: "Code faster with auto-completion and type safety.",
145+
imageUrl: "/illustrations/homepage/typesafe",
146+
imageAlt: "Type-safe queries",
147+
icon: "fa-light fa-message-text",
148+
link: "https://prisma.io/docs/orm/prisma-client/type-safety",
149+
},
150+
{
151+
title: "Work collaboratively",
152+
subtitle: "Manage projects and databases with your team.",
153+
imageUrl: "/illustrations/homepage/collaborative",
154+
imageAlt: "Collaborative work",
155+
icon: "fa-light fa-screen-users",
156+
link: "https://console.prisma.io",
157+
},
158+
{
159+
title: "Browse your data",
160+
subtitle:
161+
"Explore, filter, and edit your data with an interface.",
162+
imageUrl: "/illustrations/homepage/data",
163+
imageAlt: "Data browsing",
164+
icon: "fa-light fa-magnifying-glass-arrow-right",
165+
link: "/studio",
166+
},
167+
],
168+
}}
169+
/>
170+
</section>
171+
172+
{/* Card Sections */}
173+
<section className="w-screen my-12">
174+
<CardSection cardSection={twoCol} />
175+
</section>
176+
177+
{/* Pricing CTA Section */}
178+
<section className="my-12 bg-[linear-gradient(180deg,var(--color-background-default)-177.75%,var(--color-background-ppg-str)100%)] p-12 shadow-[0_1px_2px_0_rgba(0,0,0,0.04)]">
179+
<div className="web-cta mx-auto flex w-fit flex-col items-center gap-3 md:flex-row md:gap-12 lg:p-4">
180+
<h3 className="text-2xl text-center font-sans-display font-bold text-foreground-neutral md:text-left">
181+
Build anything.
182+
<br />
183+
Deploy instantly.
184+
</h3>
185+
<div className="content flex flex-col items-center gap-3 md:items-start lg:flex-row lg:items-center lg:gap-12">
186+
<p className="max-w-94 w-full text-center text-md text-foreground-neutral-weak md:text-left">
187+
Give your users instant production-ready Postgres, create
188+
databases, add a built-in data browser, and personalize it.
189+
</p>
190+
<Button variant="ppg" size="2xl" href="/pricing">
191+
<span>Explore Pricing</span>
192+
<i className="fa-regular fa-arrow-right ml-2" />
193+
</Button>
196194
</div>
197195
</div>
198-
</div>
196+
</section>
197+
198+
{/* Testimonials Section */}
199199
{review?.testimonials?.length > 0 && (
200-
<div>
201-
<div className="my-12">
202-
<div className="px-4 py-10">
203-
<div className="max-w-[1240px] mx-auto">
204-
<h5
205-
className="[&>b]:text-background-ppg-reverse-strong font-sans-display stretch-display text-center text-base mb-12"
206-
dangerouslySetInnerHTML={{ __html: review.title }}
207-
/>
208-
<Testimonials
209-
noShadow
210-
list={review.testimonials}
211-
mask="linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)"
212-
/>
213-
</div>
200+
<section className="my-12">
201+
<div className="px-4 py-10">
202+
<div className="max-w-[1240px] mx-auto">
203+
<h5
204+
className="[&>b]:text-background-ppg-reverse-strong font-sans-display stretch-display text-center text-base mb-12"
205+
dangerouslySetInnerHTML={{ __html: review.title }}
206+
/>
207+
<Testimonials
208+
noShadow
209+
list={review.testimonials}
210+
mask="linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)"
211+
/>
214212
</div>
215213
</div>
216-
</div>
214+
</section>
217215
)}
218-
<div className="bg-[url('/illustrations/homepage/footer_grid.svg')] bg-contain bg-center before:inset-x-30 before:inset-y-[45%] before:absolute relative before:content-[''] before:pointer-events-none before:-z-1 rounded-full before:bg-teal-400 before:blur-[100px]">
219-
<div className="my-12 p-12">
220-
<div className="flex flex-col mx-auto w-fit items-center justify-center gap-8">
221-
<div className="flex flex-col items-center text-center gap-4">
222-
<h2 className="text-3xl text-foreground-neutral font-sans-display stretch-display">
223-
Ready to try Prisma?
224-
</h2>
225-
<p className="text-foreground-neutral-weak">
226-
Deploy a Postgres database instantly.
227-
</p>
228-
</div>
229-
<div className="flex flex-col md:flex-row gap-6">
230-
<Button variant="ppg" size="2xl">
231-
<span>Create your first Database</span>
232-
<i className="fa-regular fa-arrow-right ml-2" />
233-
</Button>
234-
<Button variant="default-stronger" size="2xl" href="/pricing">
235-
<span>Explore Pricing</span>
236-
<i className="fa-regular fa-arrow-right ml-2" />
237-
</Button>
216+
217+
{/* Footer CTA Section */}
218+
<section className="bg-radial from-background-ppg/50 from-0% to-background-default to-70% px-4 py-12">
219+
<div className="mx-auto rounded-2xl bg-[url('/illustrations/homepage/footer_grid.svg')] bg-cover bg-center px-4 py-12">
220+
<div className="p-4 md:p-8">
221+
<div className="mx-auto flex max-w-[580px] flex-col items-center gap-8 text-center">
222+
<div className="flex flex-col items-center gap-4">
223+
<h2 className="text-3xl text-foreground-neutral font-sans-display stretch-display">
224+
Ready to try Prisma?
225+
</h2>
226+
<p className="text-foreground-neutral-weak">
227+
Deploy a Postgres database instantly.
228+
</p>
229+
</div>
230+
<div className="flex flex-col gap-6 md:flex-row">
231+
<Button variant="ppg" size="2xl">
232+
<span>Create your first Database</span>
233+
<i className="fa-regular fa-arrow-right ml-2" />
234+
</Button>
235+
<Button variant="default-stronger" size="2xl" href="/pricing">
236+
<span>Explore Pricing</span>
237+
<i className="fa-regular fa-arrow-right ml-2" />
238+
</Button>
239+
</div>
240+
<h6 className="mb-0! -mt-4 text-xs text-foreground-neutral-weaker">
241+
Free to get started, no credit card needed.
242+
</h6>
238243
</div>
239-
<h6 className="mb-0! -mt-4 text-foreground-neutral-weaker text-xs">
240-
Free to get started, no credit card needed.
241-
</h6>
242244
</div>
243245
</div>
244-
</div>
246+
</section>
245247
</main>
246248
);
247249
}

‎apps/site/src/app/mcp/_components/mcp-cta-section.tsx‎

Lines changed: 44 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,62 +2,52 @@ import { Button } from "@prisma/eclipse";
22

33
export function McpCtaSection({ docsHref }: { docsHref: string }) {
44
return (
5-
<section className="relative isolate overflow-hidden px-4 py-12 md:px-0 [--mcp-cta-glow-outer-start:color-mix(in_srgb,var(--color-foreground-ppg-strong)_14%,transparent)] [--mcp-cta-glow-outer-mid:color-mix(in_srgb,var(--color-foreground-ppg)_10%,transparent)] [--mcp-cta-glow-inner-start:color-mix(in_srgb,var(--color-foreground-ppg)_10%,transparent)] [--mcp-cta-glow-inner-mid:color-mix(in_srgb,var(--color-foreground-ppg)_5%,transparent)] [--mcp-grid-line:color-mix(in_srgb,var(--color-foreground-ppg-strong)_22%,transparent)] dark:[--mcp-cta-glow-outer-start:color-mix(in_srgb,var(--color-foreground-ppg-strong)_16%,transparent)] dark:[--mcp-cta-glow-outer-mid:color-mix(in_srgb,var(--color-background-ppg)_18%,transparent)] dark:[--mcp-grid-line:color-mix(in_srgb,var(--color-foreground-neutral-reverse)_14%,transparent)]">
6-
<div
7-
aria-hidden
8-
className="pointer-events-none absolute left-1/2 top-1/2 h-[280px] w-[min(100%,760px)] -translate-x-1/2 -translate-y-1/2 rounded-full bg-radial-[at_50%_50%] from-(--mcp-cta-glow-outer-start) from-0% via-(--mcp-cta-glow-outer-mid) via-24% to-transparent to-54% dark:from-[var(--mcp-cta-glow-outer-start)] dark:from-0% dark:via-[var(--mcp-cta-glow-outer-mid)] dark:via-30% dark:to-transparent dark:to-58%"
9-
/>
10-
<div
11-
aria-hidden
12-
className="pointer-events-none absolute left-1/2 top-1/2 h-[170px] w-[min(100%,480px)] -translate-x-1/2 -translate-y-1/2 rounded-full bg-radial-[at_50%_50%] from-(--mcp-cta-glow-inner-start) from-0% via-(--mcp-cta-glow-inner-mid) via-24% to-transparent to-52% dark:hidden"
13-
/>
14-
<div className="relative mx-auto flex min-h-77 max-w-360 items-center justify-center overflow-hidden py-12">
15-
<div
16-
className="pointer-events-none absolute left-1/2 top-1/2 h-60 w-[min(100%,720px)] -translate-x-1/2 -translate-y-1/2 bg-[linear-gradient(var(--mcp-grid-line)_1px,transparent_1px),linear-gradient(90deg,var(--mcp-grid-line)_1px,transparent_1px)] bg-position-[20px_20px] bg-size-[40px_40px] mask-[radial-gradient(ellipse_72%_74%_at_50%_50%,#000_16%,rgba(0,0,0,0.95)_46%,rgba(0,0,0,0.4)_76%,transparent_100%)] opacity-100"
17-
aria-hidden
18-
/>
19-
<div className="relative z-1 flex w-full max-w-[495px] flex-col items-center gap-8 rounded-[12px] px-4 py-4 text-center">
20-
<div className="flex flex-col items-center gap-4">
21-
<h3 className="stretch-display font-sans-display text-[30px] leading-10 font-black text-foreground-neutral">
22-
Start Building with AI
23-
</h3>
24-
<p className="max-w-[463px] text-base leading-6 text-foreground-neutral-weak">
25-
Join thousands of developers, and agents, already using Prisma MCP
26-
for faster, more intuitive database workflows.
27-
</p>
28-
</div>
29-
30-
<div className="flex flex-col items-center gap-4">
31-
<div className="flex w-full flex-col items-center justify-center gap-4 min-[720px]:flex-row min-[720px]:gap-6">
32-
<Button
33-
href={docsHref}
34-
variant={"ppg"}
35-
size={"3xl"}
36-
className="gap-3"
37-
>
38-
Add MCP Server
39-
<i
40-
className="fa-regular fa-arrow-right shrink-0 text-[16px]"
41-
aria-hidden
42-
/>
43-
</Button>
44-
<Button
45-
href={docsHref}
46-
variant={"default-stronger"}
47-
size={"3xl"}
48-
className="gap-3"
49-
>
50-
Read Docs
51-
<i
52-
className="fa-regular fa-book-open shrink-0 text-[16px]"
53-
aria-hidden
54-
/>
55-
</Button>
5+
<section className="bg-radial from-background-ppg/50 from-0% to-background-default to-70% px-4 py-12">
6+
<div className="mx-auto max-w-360 rounded-2xl bg-[url('/illustrations/homepage/footer_grid.svg')] bg-cover bg-center px-4 py-12">
7+
<div className="flex min-h-77 items-center justify-center p-4 md:p-8">
8+
<div className="flex w-full max-w-[495px] flex-col items-center gap-8 text-center">
9+
<div className="flex flex-col items-center gap-4">
10+
<h3 className="stretch-display font-sans-display text-[30px] leading-10 font-black text-foreground-neutral">
11+
Start Building with AI
12+
</h3>
13+
<p className="max-w-[463px] text-base leading-6 text-foreground-neutral-weak">
14+
Join thousands of developers, and agents, already using Prisma MCP
15+
for faster, more intuitive database workflows.
16+
</p>
5617
</div>
5718

58-
<p className="text-xs text-foreground-neutral-weaker">
59-
2-minute setup &bull; Works with all MCP tools
60-
</p>
19+
<div className="flex flex-col items-center gap-4">
20+
<div className="flex w-full flex-col items-center justify-center gap-4 min-[720px]:flex-row min-[720px]:gap-6">
21+
<Button
22+
href={docsHref}
23+
variant={"ppg"}
24+
size={"3xl"}
25+
className="gap-3"
26+
>
27+
Add MCP Server
28+
<i
29+
className="fa-regular fa-arrow-right shrink-0 text-[16px]"
30+
aria-hidden
31+
/>
32+
</Button>
33+
<Button
34+
href={docsHref}
35+
variant={"default-stronger"}
36+
size={"3xl"}
37+
className="gap-3"
38+
>
39+
Read Docs
40+
<i
41+
className="fa-regular fa-book-open shrink-0 text-[16px]"
42+
aria-hidden
43+
/>
44+
</Button>
45+
</div>
46+
47+
<p className="text-xs text-foreground-neutral-weaker">
48+
2-minute setup &bull; Works with all MCP tools
49+
</p>
50+
</div>
6151
</div>
6252
</div>
6353
</div>

‎apps/site/src/app/mcp/_components/mcp-hero-section.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function McpHeroSection({
2323
}) {
2424
return (
2525
<section className="relative overflow-hidden px-4 pb-12 pt-12 md:pb-16 md:pt-10">
26-
<div className="relative mx-auto flex w-full max-w-5xl flex-col items-center gap-10 md:gap-16">
26+
<div className="relative mx-auto flex w-full max-w-5xl flex-col items-center gap-10 md:gap-16 my-36">
2727
<div className="flex w-full flex-col items-center gap-8 md:gap-15">
2828
<div className="flex w-full flex-col items-center gap-8 md:gap-10">
2929
<p className="flex items-center justify-center gap-2 stretch-display font-sans-display text-base font-black uppercase tracking-[1.6px] text-foreground-ppg">

‎apps/site/src/app/mcp/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ const capabilities: McpCapability[] = [
132132

133133
export default function McpPage() {
134134
return (
135-
<main className="relative flex flex-col overflow-x-hidden text-foreground-neutral">
135+
<main className="relative flex-1 w-full -mt-24 flex flex-col overflow-x-hidden bg-[linear-gradient(0deg,var(--color-background-default)_95%,var(--color-background-ppg)_100%)] text-foreground-neutral">
136136
<div className="relative z-1 flex flex-col">
137137
<McpHeroSection docsHref={DOCS_MCP} features={heroFeatures} />
138138
<McpVideoSection />

0 commit comments

Comments
 (0)