Skip to content

feat: DR-7734 Ecosystem page #7717

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
carlagn wants to merge 4 commits into
base: main
Choose a base branch
from
+540 −1
Open

feat: DR-7734 Ecosystem page #7717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
95e834e
Add ecosystem page
carlagn Mar 27, 2026
b6a339e
Update for mobile
carlagn Mar 27, 2026
51d8274
Update typo
carlagn Mar 27, 2026
5d04e8d
Add links
carlagn Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"posthog-js": "catalog:",
"react": "catalog:",
"react-dom": "catalog:",
"react-github-btn": "^1.4.0",
"react-tweet": "catalog:",
"remark-directive": "catalog:",
"tailwind-merge": "catalog:",
Expand Down
108 changes: 108 additions & 0 deletions apps/site/src/app/ecosystem/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import { EcosystemGrid } from "@/components/ecosystem/grid";
import Antigravity from "../../components/homepage/antigravity";
import type { Metadata } from "next";
import {
SITE_HOME_DESCRIPTION,
SITE_HOME_TITLE,
} from "../../lib/blog-metadata";
import { Button } from "@prisma/eclipse";
import { CopyCode } from "@/components/homepage/copy-btn";
import LogoParade from "@prisma-docs/ui/components/logo-parade";
import React from "react";
import { Bento } from "@/components/homepage/bento";
import { CardSection } from "@/components/homepage/card-section/card-section";
import review from "../../data/homepage.json";
import Testimonials from "../../components/homepage/testimonials";

const twoCol = [
{
content: (
<>
<h2 className="text-foreground-neutral stretch-display text-4xl font-black! font-sans-display mt-0 mb-4">
Postgres that <br /> fits your stack.
</h2>
<p className="text-foreground-neutral-weak! text-base">
Works with your existing stack, wherever you deploy.Your choice of
ORM, frameworks, and tools, they all just connect.
</p>
</>
),
imageUrl: null,
imageAlt: null,
mobileImageUrl: null,
mobileImageAlt: null,
logos: null,
useDefaultLogos: true,
visualPosition: "right" as const,
visualType: "logoGrid" as const,
},
{
content: (
<>
<h2 className="text-foreground-neutral stretch-display text-4xl font-black! font-sans-display mt-0 mb-4">
Real Postgres. <br /> Better experience.
</h2>
<p className="text-foreground-neutral-weak! text-base">
The PostgreSQL millions know and trust in production, ready in seconds
with zero configuration. Automatic backups, observability and
compliance.
</p>
</>
),
imageUrl: "/illustrations/homepage/real_ppg",
imageAlt: "Real Postgres",
mobileImageUrl: "/illustrations/homepage/real_ppg_mobile",
mobileImageAlt: "Real PPG mobile",
logos: null,
useDefaultLogos: false,
visualPosition: "left" as const,
visualType: "image" as const,
},
];
export const metadata: Metadata = {
title: SITE_HOME_TITLE,
description: SITE_HOME_DESCRIPTION,
};

export default function SiteHome() {
return (
<main className="flex-1 w-full z-1 bg-background-default">
<div className="hero -mt-24 flex items-end justify-center px-4 relative">
<div className="absolute inset-0 z-0 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
<div className="content pt-31 relative z-2 my-12 flex flex-col gap-8">
<h1 className="text-6xl [font-variation-settings:'wght'_900,'wdth'_125] mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-200 mx-auto">
Prisma Ecosystem
</h1>
<p className="text-center text-foreground-neutral max-w-2xl mx-auto">
Explore the wide variety of tools created by our amazing community.
</p>
<div className="flex flex-col md:flex-row gap-4 items-center justify-center">
<Button
variant="orm"
href="https://console.prisma.io/sign-up?utm_source=website&utm_medium=index&utm_campaign=cta"
size="3xl"
target="_blank"
rel="noopener noreferrer"
className="font-sans-display! font-[650]"
>
<span>Submit your package</span>
<i className="fa-regular fa-envelope ml-2" />
</Button>
Comment on lines +80 to +90
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

CTA mismatch — button says "Submit your package" but links to sign-up.

The button text implies users can submit their package, but the href points to console.prisma.io/sign-up. This is confusing UX. If this is intentional (sign up first, then submit), consider clarifying the flow or linking to a proper submission form/instructions.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/site/src/app/ecosystem/page.tsx` around lines 80 - 90, The CTA label
"Submit your package" on the Button (look for the Button component with inner
span "Submit your package" and href attribute) doesn't match the href which
points to "console.prisma.io/sign-up"; update either the destination or the
copy: either change href to the actual package submission URL/guide (if you have
an ecosystem submission form) or change the button text to a signup-focused
label like "Sign up" (and adjust aria-label if present) so the Button's href and
visible text (and intent) match. Ensure the Button's target and rel attributes
remain for external links and keep the existing className and icon.

</div>
</div>
</div>
<div className="my-12 px-4">
<div className="py-12 flex flex-col gap-6 max-w-[1200px] mx-auto">
<h2 className="text-foreground-neutral stretch-display text-center text-4xl font-black! font-sans-display my-0">
Dedicated ORM support options
</h2>
<p className="text-center text-foreground-neutral max-w-xl mx-auto">
Focus on core competencies of your team, rather than building and
managing complex infrastructure components.
</p>
<EcosystemGrid />
</div>
</div>
</main>
);
}
93 changes: 93 additions & 0 deletions apps/site/src/components/ecosystem/grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
"use client";
import { useState } from "react";
import { Button, Card, Badge } from "@prisma/eclipse";
import ecosystem from "../../data/ecosystem.json";
import { cn } from "@/lib/cn";

import GitHubButton from "react-github-btn";
export const EcosystemGrid = () => {
const filters = ["generator", "middleware", "other", "show-all"];
const [activeFilter, setActiveFilter] = useState("show-all");
return (
<>
<div className="flex gap-4 items-center justify-start mx-auto flex-col md:flex-row">
<div className="text-foreground-neutral font-black text-lg uppercase font-sans-display">
Filter by:
</div>
<div className="flex gap-4 items-center justify-start ">
{filters.map((filter) => (
<Button
variant={
activeFilter === filter ? "orm-reverse" : "default-stronger"
}
size="lg"
className="capitalize"
onClick={() => setActiveFilter(filter)}
key={filter}
>
<span>{filter.replace("-", " ")}</span>
</Button>
))}
</div>
</div>
<div>
{filters.slice(0, -1).map((filter) => (
<div
className={cn(
"flex flex-col gap-12 my-12",
activeFilter !== filter &&
activeFilter !== "show-all" &&
"hidden",
)}
>
<h3 className="text-foreground-neutral font-sans-display text-3xl stretch-display my-0 font-bold capitalize">
{filter.replace("-", " ")}
</h3>
<div className="grid lg:grid-cols-3! md:grid-cols-2 gap-4">
{ecosystem.list
.filter((box) => box.type === filter)
.map((box) => (
<a
href={box.npmUrl}
target="_blank"
className="contents"
rel="noopener noreferrer"
>
<Card
key={box.name}
className="grid grid-rows-[auto_1fr_auto]"
>
<h3 className="text-foreground-neutral font-sans-display text-xl stretch-display my-0 font-bold line-clamp-2 hover:line-clamp-none">
{box.name}
</h3>
<p className="text-foreground-neutral font-sans-display text-sm line-clamp-3">
{box.description}
</p>
<div className="flex gap-2 justify-between items-center">
<Badge
className="w-fit"
color="orm"
size="lg"
label={box.type}
></Badge>

<div className="relative after:content-[''] after:absolute after:w-full after:h-full after:z-[10000] after:left-0 after:top-0">
<GitHubButton
href={`https://github.com/${box.githubRepo}`}
data-color-scheme="no-preference: light; light: light; dark: dark;"
data-icon="octicon-star"
data-show-count="true"
aria-label="Star prisma/prisma on GitHub"
/>
</div>
</div>
</Card>
</a>
))}
</div>
</div>
))}
</div>
</>
);
};
Loading
Loading