feat: DR-7734 Ecosystem page

apps/site/package.json

@@ -26,6 +26,7 @@
     "react": "catalog:",
     "react-dom": "catalog:",
     "react-intersection-observer": "^10.0.3",
+    "react-github-btn": "^1.4.0",
     "react-tweet": "catalog:",
     "remark-directive": "catalog:",
     "shiki": "3.22.0",

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

@@ -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://pris.ly/submit-your-package"
+              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>
+          </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>
+  );
+}

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

@@ -0,0 +1,91 @@
+"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"
+                    key={box.name}
+                  >
+                    <Card 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>
+    </>
+  );
+};