+ {card.title} +
++ {card.description} +
+diff --git a/apps/blog/README.md b/apps/blog/README.md
index 2b93e20c24..de73654394 100644
--- a/apps/blog/README.md
+++ b/apps/blog/README.md
@@ -20,7 +20,7 @@ Runs on **http://localhost:3002** (site is 3000, docs is 3001, eclipse is 3003).
## Structure
- `content/blog/` — MDX blog posts
-- `src/` — App shell, layout, search, and MDX components (TweetEmbed, Youtube, Quote, etc.)
+- `src/` — App shell, layout, search, and MDX components (TweetEmbed, Quote, etc.)
- Uses [Fumadocs](https://fumadocs.dev) for the blog framework
- Uses `@prisma/eclipse` for UI components
diff --git a/apps/blog/src/mdx-components.tsx b/apps/blog/src/mdx-components.tsx
index 1bb14be60c..b430bb1ca6 100644
--- a/apps/blog/src/mdx-components.tsx
+++ b/apps/blog/src/mdx-components.tsx
@@ -24,8 +24,8 @@ import {
Steps,
Step,
} from "@prisma/eclipse";
+import { Youtube } from "@prisma-docs/ui/components/youtube";
import { TweetEmbedComp } from "@/components/TweetEmbed";
-import { Youtube } from "@/components/Youtube";
import { Meetup, MeetupList } from "@/components/Meetup";
import { Employee } from "@/components/Employee";
import { withBlogBasePath, withBlogBasePathForImageSrc } from "@/lib/url";
diff --git a/apps/docs/src/components/youtube.tsx b/apps/docs/src/components/youtube.tsx
deleted file mode 100644
index 2dfe027053..0000000000
--- a/apps/docs/src/components/youtube.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-type YoutubeProps = {
- videoId: string;
- title?: string;
-};
-
-export const Youtube = ({ videoId, title = "YouTube video player" }: YoutubeProps) => {
- return (
-
- );
-};
diff --git a/apps/docs/src/mdx-components.tsx b/apps/docs/src/mdx-components.tsx
index e728a24053..ae586a68f9 100644
--- a/apps/docs/src/mdx-components.tsx
+++ b/apps/docs/src/mdx-components.tsx
@@ -1,6 +1,6 @@
import defaultMdxComponents from "fumadocs-ui/mdx";
+import { Youtube } from "@prisma-docs/ui/components/youtube";
import { APIPage } from "@/components/api-page";
-import { Youtube } from "@/components/youtube";
import { withDocsBasePath } from "@/lib/urls";
import type { MDXComponents } from "mdx/types";
diff --git a/apps/site/public/illustrations/studio/embed.svg b/apps/site/public/illustrations/studio/embed.svg
new file mode 100644
index 0000000000..5e8b66fb4e
--- /dev/null
+++ b/apps/site/public/illustrations/studio/embed.svg
@@ -0,0 +1,709 @@
+
diff --git a/apps/site/public/illustrations/studio/explore.svg b/apps/site/public/illustrations/studio/explore.svg
new file mode 100644
index 0000000000..0ac46cb48c
--- /dev/null
+++ b/apps/site/public/illustrations/studio/explore.svg
@@ -0,0 +1,164 @@
+
diff --git a/apps/site/public/illustrations/studio/filter.svg b/apps/site/public/illustrations/studio/filter.svg
new file mode 100644
index 0000000000..d31380921d
--- /dev/null
+++ b/apps/site/public/illustrations/studio/filter.svg
@@ -0,0 +1,103 @@
+
diff --git a/apps/site/public/illustrations/studio/hero.svg b/apps/site/public/illustrations/studio/hero.svg
new file mode 100644
index 0000000000..ee95f9b0a8
--- /dev/null
+++ b/apps/site/public/illustrations/studio/hero.svg
@@ -0,0 +1,329 @@
+
diff --git a/apps/site/public/illustrations/studio/laptop.svg b/apps/site/public/illustrations/studio/laptop.svg
new file mode 100644
index 0000000000..b02e1624b8
--- /dev/null
+++ b/apps/site/public/illustrations/studio/laptop.svg
@@ -0,0 +1,132 @@
+
diff --git a/apps/site/public/illustrations/studio/tabs.svg b/apps/site/public/illustrations/studio/tabs.svg
new file mode 100644
index 0000000000..c3c690753e
--- /dev/null
+++ b/apps/site/public/illustrations/studio/tabs.svg
@@ -0,0 +1,53 @@
+
diff --git a/apps/site/public/og/og-studio.png b/apps/site/public/og/og-studio.png
new file mode 100644
index 0000000000..542372c530
Binary files /dev/null and b/apps/site/public/og/og-studio.png differ
diff --git a/apps/site/src/app/studio/page.tsx b/apps/site/src/app/studio/page.tsx
new file mode 100644
index 0000000000..b99ef2c2e3
--- /dev/null
+++ b/apps/site/src/app/studio/page.tsx
@@ -0,0 +1,373 @@
+import type { Metadata } from "next";
+import { Button } from "@prisma/eclipse";
+import Image from "next/image";
+import { CopyCode } from "@/components/homepage/copy-btn";
+import { Youtube } from "@prisma-docs/ui/components/youtube";
+
+const CONSOLE_URL =
+ "https://console.prisma.io/login?utm_source=website&utm_medium=studio&utm_campaign=cta";
+const STUDIO_DOCS_URL = "https://www.prisma.io/docs/studio";
+const TRY_STUDIO_COMMAND = `npx try-prisma@latest --template orm/starter \\
+&& cd hello-prisma \\
+&& npx prisma studio`;
+
+const featureCards = [
+ {
+ icon: "fa-regular fa-code-branch",
+ title: "Instant Access to Your Database",
+ description:
+ "Connect to your Prisma Postgres database or bring your own in seconds. Prisma Studio now lives right in the Prisma Data Platform.",
+ },
+ {
+ icon: "fa-regular fa-wand-magic-sparkles",
+ title: "Zero Setup Required",
+ description:
+ "Skip installation and dive straight into your data. Your entire team can access and collaborate instantly.",
+ },
+ {
+ icon: "fa-regular fa-people-line",
+ title: "Real-Time Collaboration",
+ description:
+ "Work together on the same database in real time. No local setup, no configuration, just seamless teamwork.",
+ },
+] as const;
+
+const featureRows = [
+ {
+ eyebrow: "Runs anywhere",
+ title: "Local or collaborative",
+ description:
+ "Access your database anywhere. Work locally for rapid development or use Console for team collaboration. Switch seamlessly between solo and team workflows.",
+ imageSrc: "/illustrations/studio/laptop.svg",
+ imageAlt:
+ "Prisma Studio interface showing local and collaborative workflows",
+ imageWidth: 522,
+ imageHeight: 295,
+ },
+ {
+ eyebrow: "Data exploration",
+ title: "Understand your data",
+ description:
+ "Browse your database visually with powerful filters and search. Spot patterns instantly and get insights for debugging or schema changes, no SQL needed.",
+ imageSrc: "/illustrations/studio/explore.svg",
+ imageAlt:
+ "Prisma Studio data exploration interface with highlighted filters",
+ imageWidth: 546,
+ imageHeight: 275,
+ },
+ {
+ eyebrow: "Advanced filtering",
+ title: "Power through complexity",
+ description:
+ "Visualize complex data relationships with clickable model navigation. See your database architecture unfold naturally, helping teams understand how everything connects.",
+ imageSrc: "/illustrations/studio/filter.svg",
+ imageAlt: "Prisma Studio advanced filtering interface",
+ imageWidth: 571,
+ imageHeight: 235,
+ },
+ {
+ eyebrow: "Multiple tabs",
+ title: "Switch contexts instantly",
+ description:
+ "Find exactly what you need with powerful, precise filtering. Combine filters and operators to quickly surface insights from complex data.",
+ imageSrc: "/illustrations/studio/tabs.svg",
+ imageAlt: "Prisma Studio with multiple tabs open",
+ imageWidth: 561,
+ imageHeight: 215,
+ },
+ {
+ eyebrow: "Amazing data editing UX",
+ title: "Embed in your own apps",
+ description:
+ "When using Prisma Postgres, you can integrate Studio directly in your own applications to provide a polished data editing experience to your users.",
+ imageSrc: "/illustrations/studio/embed.svg",
+ imageAlt: "Embedded Prisma Studio experience inside an app",
+ imageWidth: 582,
+ imageHeight: 224,
+ },
+] as const;
+
+export const metadata: Metadata = {
+ title: "Studio | Prisma",
+ description:
+ "Explore and understand your data with Prisma Studio. Browse, filter, edit, and collaborate on your database in Prisma Console or locally.",
+ alternates: {
+ canonical: "https://www.prisma.io/studio",
+ },
+ openGraph: {
+ title: "Studio | Prisma",
+ description:
+ "Explore and understand your data with Prisma Studio. Browse, filter, edit, and collaborate on your database in Prisma Console or locally.",
+ url: "https://www.prisma.io/studio",
+ images: [
+ {
+ url: "/og/og-studio.png",
+ width: 1200,
+ height: 630,
+ alt: "Prisma Studio Open Graph image",
+ },
+ ],
+ },
+ twitter: {
+ card: "summary_large_image",
+ title: "Studio | Prisma",
+ description:
+ "Explore and understand your data with Prisma Studio. Browse, filter, edit, and collaborate on your database in Prisma Console or locally.",
+ images: ["/og/og-studio.png"],
+ },
+};
+
+export default function StudioPage() {
+ return (
+
+
+ Prisma Studio
+
+ The ultimate tool for exploring and editing data in your Prisma
+ project. Work locally or team up inside the Prisma Console.
+
+ {card.description}
+
+ Access Prisma Studio on your local machine during development,
+ or in the Platform Console to collaborate on data with your
+ team.
+
+ Take Studio for a spin with a local pre-seeded database and
+ example project.
+
+ Explore and
+
+
+ understand your data
+
+ {card.title}
+
+
+ See how Studio works
+
+
+ Try it out!
+
+
+
+ {TRY_STUDIO_COMMAND}
+
+ {description} +
++ {children} +
+ ); +} diff --git a/apps/site/src/components/homepage/copy-btn.tsx b/apps/site/src/components/homepage/copy-btn.tsx index 9218f769bf..aac4e011ef 100644 --- a/apps/site/src/components/homepage/copy-btn.tsx +++ b/apps/site/src/components/homepage/copy-btn.tsx @@ -11,9 +11,13 @@ import { useState } from "react"; export const CopyCode = ({ children, text, + buttonSize = "3xl", + buttonClassName = "font-sans-display! font-normal! text-base! font-mono!", }: { children: React.ReactNode; text: string; + buttonSize?: React.ComponentProps