Skip to content

Commit ea2ff40

Browse files
author
carla
authored
feat: DR-7734 Ecosystem page (#7717)
* Add ecosystem page * Update for mobile * Update typo * Add links * Update link * Update badgeprops color * update json
1 parent edd46fa commit ea2ff40

6 files changed

Lines changed: 544 additions & 2 deletions

File tree

‎apps/site/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"react": "catalog:",
2727
"react-dom": "catalog:",
2828
"react-intersection-observer": "^10.0.3",
29+
"react-github-btn": "^1.4.0",
2930
"react-tweet": "catalog:",
3031
"remark-directive": "catalog:",
3132
"shiki": "3.22.0",

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

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { EcosystemGrid } from "@/components/ecosystem/grid";
2+
import Antigravity from "../../components/homepage/antigravity";
3+
import type { Metadata } from "next";
4+
import {
5+
SITE_HOME_DESCRIPTION,
6+
SITE_HOME_TITLE,
7+
} from "../../lib/blog-metadata";
8+
import { Button } from "@prisma/eclipse";
9+
import { CopyCode } from "@/components/homepage/copy-btn";
10+
import LogoParade from "@prisma-docs/ui/components/logo-parade";
11+
import React from "react";
12+
import { Bento } from "@/components/homepage/bento";
13+
import { CardSection } from "@/components/homepage/card-section/card-section";
14+
import review from "../../data/homepage.json";
15+
import Testimonials from "../../components/homepage/testimonials";
16+
17+
const twoCol = [
18+
{
19+
content: (
20+
<>
21+
<h2 className="text-foreground-neutral stretch-display text-4xl font-black! font-sans-display mt-0 mb-4">
22+
Postgres that <br /> fits your stack.
23+
</h2>
24+
<p className="text-foreground-neutral-weak! text-base">
25+
Works with your existing stack, wherever you deploy.Your choice of
26+
ORM, frameworks, and tools, they all just connect.
27+
</p>
28+
</>
29+
),
30+
imageUrl: null,
31+
imageAlt: null,
32+
mobileImageUrl: null,
33+
mobileImageAlt: null,
34+
logos: null,
35+
useDefaultLogos: true,
36+
visualPosition: "right" as const,
37+
visualType: "logoGrid" as const,
38+
},
39+
{
40+
content: (
41+
<>
42+
<h2 className="text-foreground-neutral stretch-display text-4xl font-black! font-sans-display mt-0 mb-4">
43+
Real Postgres. <br /> Better experience.
44+
</h2>
45+
<p className="text-foreground-neutral-weak! text-base">
46+
The PostgreSQL millions know and trust in production, ready in seconds
47+
with zero configuration. Automatic backups, observability and
48+
compliance.
49+
</p>
50+
</>
51+
),
52+
imageUrl: "/illustrations/homepage/real_ppg",
53+
imageAlt: "Real Postgres",
54+
mobileImageUrl: "/illustrations/homepage/real_ppg_mobile",
55+
mobileImageAlt: "Real PPG mobile",
56+
logos: null,
57+
useDefaultLogos: false,
58+
visualPosition: "left" as const,
59+
visualType: "image" as const,
60+
},
61+
];
62+
export const metadata: Metadata = {
63+
title: SITE_HOME_TITLE,
64+
description: SITE_HOME_DESCRIPTION,
65+
};
66+
67+
export default function SiteHome() {
68+
return (
69+
<main className="flex-1 w-full z-1 bg-background-default">
70+
<div className="hero -mt-24 flex items-end justify-center px-4 relative">
71+
<div className="absolute inset-0 z-0 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
72+
<div className="content pt-31 relative z-2 my-12 flex flex-col gap-8">
73+
<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">
74+
Prisma Ecosystem
75+
</h1>
76+
<p className="text-center text-foreground-neutral max-w-2xl mx-auto">
77+
Explore the wide variety of tools created by our amazing community.
78+
</p>
79+
<div className="flex flex-col md:flex-row gap-4 items-center justify-center">
80+
<Button
81+
variant="orm"
82+
href="https://pris.ly/submit-your-package"
83+
size="3xl"
84+
target="_blank"
85+
rel="noopener noreferrer"
86+
className="font-sans-display! font-[650]"
87+
>
88+
<span>Submit your package</span>
89+
<i className="fa-regular fa-envelope ml-2" />
90+
</Button>
91+
</div>
92+
</div>
93+
</div>
94+
<div className="my-12 px-4">
95+
<div className="py-12 flex flex-col gap-6 max-w-[1200px] mx-auto">
96+
<h2 className="text-foreground-neutral stretch-display text-center text-4xl font-black! font-sans-display my-0">
97+
Dedicated ORM support options
98+
</h2>
99+
<p className="text-center text-foreground-neutral max-w-xl mx-auto">
100+
Focus on core competencies of your team, rather than building and
101+
managing complex infrastructure components.
102+
</p>
103+
<EcosystemGrid />
104+
</div>
105+
</div>
106+
</main>
107+
);
108+
}

‎apps/site/src/components/ecosystem/grid.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
"use client";
2+
import { useState } from "react";
3+
import { Button, Card, Badge } from "@prisma/eclipse";
4+
import ecosystem from "../../data/ecosystem.json";
5+
import { cn } from "@/lib/cn";
6+
7+
import GitHubButton from "react-github-btn";
8+
export const EcosystemGrid = () => {
9+
const filters = ["generator", "middleware", "other", "show-all"];
10+
const [activeFilter, setActiveFilter] = useState("show-all");
11+
return (
12+
<>
13+
<div className="flex gap-4 items-center justify-start mx-auto flex-col md:flex-row">
14+
<div className="text-foreground-neutral font-black text-lg uppercase font-sans-display">
15+
Filter by:
16+
</div>
17+
<div className="flex gap-4 items-center justify-start ">
18+
{filters.map((filter) => (
19+
<Button
20+
variant={
21+
activeFilter === filter ? "orm-reverse" : "default-stronger"
22+
}
23+
size="lg"
24+
className="capitalize"
25+
onClick={() => setActiveFilter(filter)}
26+
key={filter}
27+
>
28+
<span>{filter.replace("-", " ")}</span>
29+
</Button>
30+
))}
31+
</div>
32+
</div>
33+
<div>
34+
{filters.slice(0, -1).map((filter) => (
35+
<div
36+
className={cn(
37+
"flex flex-col gap-12 my-12",
38+
activeFilter !== filter &&
39+
activeFilter !== "show-all" &&
40+
"hidden",
41+
)}
42+
>
43+
<h3 className="text-foreground-neutral font-sans-display text-3xl stretch-display my-0 font-bold capitalize">
44+
{filter.replace("-", " ")}
45+
</h3>
46+
<div className="grid lg:grid-cols-3! md:grid-cols-2 gap-4">
47+
{ecosystem.list
48+
.filter((box) => box.type === filter)
49+
.map((box) => (
50+
<a
51+
href={box.npmUrl}
52+
target="_blank"
53+
className="contents"
54+
rel="noopener noreferrer"
55+
key={box.name}
56+
>
57+
<Card className="grid grid-rows-[auto_1fr_auto]">
58+
<h3 className="text-foreground-neutral font-sans-display text-xl stretch-display my-0 font-bold line-clamp-2 hover:line-clamp-none">
59+
{box.name}
60+
</h3>
61+
<p className="text-foreground-neutral font-sans-display text-sm line-clamp-3">
62+
{box.description}
63+
</p>
64+
<div className="flex gap-2 justify-between items-center">
65+
<Badge
66+
className="w-fit"
67+
color="orm"
68+
size="lg"
69+
label={box.type}
70+
></Badge>
71+
72+
<div className="relative after:content-[''] after:absolute after:w-full after:h-full after:z-[10000] after:left-0 after:top-0">
73+
<GitHubButton
74+
href={`https://github.com/${box.githubRepo}`}
75+
data-color-scheme="no-preference: light; light: light; dark: dark;"
76+
data-icon="octicon-star"
77+
data-show-count="true"
78+
aria-label="Star prisma/prisma on GitHub"
79+
/>
80+
</div>
81+
</div>
82+
</Card>
83+
</a>
84+
))}
85+
</div>
86+
</div>
87+
))}
88+
</div>
89+
</>
90+
);
91+
};

0 commit comments

Comments
 (0)