diff --git a/src/css/all.css b/src/css/all.css index fe6f697993..4c09f29c31 100644 --- a/src/css/all.css +++ b/src/css/all.css @@ -761,10 +761,14 @@ content: "\e473"; } -.fa-magnifying-glass-chart:before { +.fa-magnifying-glass-chart::before { content: "\e522"; } +.fa-message-bot::before { + content: "\e3b8"; +} + .fa-chevron-down::before { content: "\f078"; } diff --git a/src/data/indexData.ts b/src/data/indexData.ts index 65106105d5..95732621bf 100644 --- a/src/data/indexData.ts +++ b/src/data/indexData.ts @@ -1,34 +1,44 @@ export const ProductLinkData = { porm: { - title: "Build with Prisma ORM", - icon: "database", + title: "Start building with Prisma ORM", + //eyebrow: "Build", description: - "Open source Node.js and TypeScript ORM with an intuitive data model, automated migrations, type-safety, and auto-completion.", + "Node.js and TypeScript ORM with an intuitive data model, automated migrations, type-safety, and auto-completion.

Combine it with Prisma Studio to explore and manipulate your data.", links: [ { - url: "/getting-started", - title: "Getting started", + url: "/orm", + title: "ORM", }, { - url: "https://github.com/prisma/prisma-examples", - title: "Example projects", - external: true, + url: "/orm/tools/prisma-studio", + title: "Studio", + }, + ], + }, + poptimize: { + title: "Optimize your database queries", + //eyebrow: "Fortify", + description: "Use Prisma Optimize to generate insights and get recommendations to improve your database queries, making your application run faster.", + links: [ + { + url: "/optimize", + title: "Optimize", }, ], }, pdp: { - title: "Grow as your app evolves", - icon: "triangle", + title: "Grow and evolve your application", + //eyebrow: "Grow", description: - "Expand your application capabilities with global database caching, connection pooling, and real-time database subscriptions.", + "Scale your database connections and cache your database results at the edge with Prisma Accelerate.

Add Prisma Pulse to your app to react to database changes with type-safe model subscriptions.", links: [ { url: "/accelerate", - title: "Prisma Accelerate", + title: "Accelerate", }, { url: "/pulse", - title: "Prisma Pulse", + title: "Pulse", }, ], }, @@ -36,7 +46,7 @@ export const ProductLinkData = { export const ORMCardLinkData = { components: { - title: "ORM Components", + title: "ORM Components and Reference", description: "Learn about the building blocks of Prisma ORM.", links: [ { @@ -44,52 +54,57 @@ export const ORMCardLinkData = { title: "Prisma Schema", }, { - url: "/orm/tools/prisma-cli", - title: "Prisma CLI", + url: "/orm/reference/prisma-schema-reference", + title: "Schema reference", }, { url: "/orm/prisma-client", title: "Prisma Client", }, { - url: "/orm/tools/prisma-studio", - title: "Prisma Studio", + url: "/orm/reference/prisma-client-reference", + title: "Client API reference", + }, + { + url: "/orm/tools/prisma-cli", + title: "Prisma CLI", + }, + { + url: "/orm/reference/prisma-cli-reference", + title: "Prisma CLI reference", }, { url: "/orm/prisma-migrate", title: "Prisma Migrate", }, + { + url: "/orm/reference/error-reference", + title: "Error message reference", + }, ], }, reference: { - title: "Reference", - description: "Understand the usage and API surface of our products.", + title: "Platform Reference", + description: "Understand the usage and API surface of our platform products built on top of Prisma ORM.", links: [ - { - url: "/orm/reference/prisma-client-reference", - title: "Client API reference", - }, - { - url: "/orm/reference/prisma-cli-reference", - title: "Prisma CLI reference", - }, - { - url: "/orm/reference/prisma-schema-reference", - title: "Schema reference", - }, { url: "/accelerate/api-reference", title: "Accelerate API reference", }, - { - url: "/orm/reference/error-reference", - title: "Error message reference", - }, + { url: "/pulse/api-reference", title: "Pulse API reference", }, + { + url: "/platform", + title: "Platform", + }, + { + url: "/platform/platform-cli/commands", + title: "Platform CLI commands", + }, ], }, }; @@ -101,13 +116,6 @@ export const ORMGeneralLinkData = [ url: "/orm/prisma-client/queries/crud", icon: "fa-solid fa-arrow-right-arrow-left", }, - { - title: `Prisma ORM in your stack`, - description: - "Use Prisma ORM to build a GraphQL or REST API, or as part of a fullstack application.", - url: "/orm/overview/prisma-in-your-stack", - icon: "fa-solid fa-server", - }, { title: `Adopting Prisma ORM`, description: "Migrate to Prisma ORM from other ORMs.", @@ -122,36 +130,78 @@ export const ORMGeneralLinkData = [ icon: "fa-solid fa-book", }, { - title: `Accelerate`, - description: "Set up connection pooling and global caching in your app with Accelerate.", - url: "/accelerate/getting-started", - icon: "fa-solid fa-bolt", + title: `Platform CLI commands`, + description: + "Learn how to access the Platform using the integrated commands in the Prisma CLI.", + url: "/platform/platform-cli/commands", + icon: "fa-solid fa-terminal", }, +]; + +export const GeneralLinks_Build = [ { - title: `Pulse`, - description: "React to changes in your database with Pulse.", - url: "/pulse/getting-started", - icon: "fa-solid fa-signal-stream", + title: `CRUD`, + description: "How to perform CRUD operations with your generated Prisma Client API. ", + url: "/orm/prisma-client/queries/crud", + icon: "fa-solid fa-arrow-right-arrow-left", + }, + { + title: `Adopting Prisma ORM`, + description: "Migrate to Prisma ORM from other ORMs.", + url: "/orm/more/migrating-to-prisma", + icon: "fa-solid fa-download", + }, + { + title: `Deployment guides`, + description: + "Deploy Node.js applications with Prisma Client to platforms like Vercel, AWS Lambda, Netlify and Heroku.", + url: "/orm/prisma-client/deployment", + icon: "fa-solid fa-book", }, + + +]; + +export const GeneralLinks_Fortify = [ { - title: `Optimize`, - description: "Debug database queries and use recommendations to improve query performance.", + title: `Set up Optimize`, + description: "Start analyzing your queries and generate insights to improve your queries.", url: "/optimize/getting-started", icon: "fa-solid fa-magnifying-glass-chart", }, { - title: `Platform`, - description: - "Explore how to use the Platform to easily manage your projects and collaborate within your team.", - url: "/platform/about", + title: `Recommendations`, + description: "Explore the different recommendations such as indexing issues, excessive data retrieval, and inefficient query patterns.", + url: "/optimize/recommendations", icon: "fa-solid fa-chart-simple", }, { - title: `Platform CLI commands`, - description: - "Learn how to access the Platform using the integrated commands in the Prisma CLI.", - url: "/platform/platform-cli/commands", - icon: "fa-solid fa-terminal", + title: `Prisma AI`, + description: "Understand the recommendations easier by asking our AI follow-up questions.", + url: "/optimize/prisma-ai", + icon: "fa-solid fa-message-bot", + }, +]; + + +export const GeneralLinks_Grow = [ + { + title: `Connection pooling`, + description: "Adjust pool size, configure timeouts, and enable autoscaling to improve performance.", + url: "/accelerate/connection-pooling", + icon: "fa-solid fa-bolt", + }, + { + title: `Database caching`, + description: "How to improve query performance by configuring cache behavior using TTL and SWR.", + url: "/accelerate/caching", + icon: "fa-solid fa-bolt", + }, + { + title: `React to database changes`, + description: "Use Pulse to stream database events to your app in real-time. ", + url: "/pulse/getting-started", + icon: "fa-solid fa-signal-stream", }, ]; diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index 93189be208..adbc9152fe 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -106,12 +106,15 @@ } .homepageTopSection { - padding: 64px 12px; background: #f7fafc; display: flex; flex-wrap: wrap; gap: 40px; background: var(--homepage-header-bg); + padding: 64px 12px; + @media (min-width: 768px) { + padding: 24px 12px 64px; + } } .linkGrid { @@ -121,6 +124,7 @@ width: 100%; flex-wrap: wrap; justify-content: space-between; + height: fit-content; a, button { @@ -148,15 +152,31 @@ .productCardsWrapper { max-width: 1240px; width: 100%; - gap: 40px; + gap: 24px; margin: 0 auto; - display: flex; flex-wrap: wrap; + display: grid; + @media (min-width: 768px) { + grid-template-columns: repeat(3, 1fr); + } +} + +h5.eyebrow { + //styleName: HEADINGS/H5; + font-family: "Barlow"; + font-size: 18px; + font-weight: 700; + line-height: 110%; + margin: 0; + text-transform: uppercase; + color: var(--secondary-font-color); + letter-spacing: 0.1em; + text-align: left; } %productCard { display: grid; - grid-template-rows: auto 1fr auto; + grid-template-rows: auto auto 1fr auto; padding: 32px; width: 100%; border-radius: 8px; @@ -173,11 +193,7 @@ } .body { - margin-bottom: 16px; - } - - @media (min-width: 768px) { - width: calc(50% - 20px); + margin-bottom: 32px; } } @@ -210,17 +226,19 @@ } .ormLinkSectionWrapper { - max-width: 1272px; + max-width: 1240px; + width: 100%; + gap: 24px; margin: 0 auto; - padding: 60px 16px 24px; - - h4 { - color: var(--main-font-color); - margin-bottom: 40px; + flex-wrap: wrap; + display: grid; + @media (min-width: 768px) { + grid-template-columns: repeat(3, 1fr); } - - > div { - display: grid; + .ormLinkCol { + display: flex; + justify-content: space-between; + flex-direction: column; gap: 40px; grid-template-columns: 100%; @@ -272,7 +290,7 @@ } .icon { - background: #f7fafc; + background: #fff; } &:hover { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2abeb69fb3..43638bfcb5 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -12,6 +12,9 @@ import { ORMGeneralLinkData, ORMCardLinkData, ProductLinkData, + GeneralLinks_Build, + GeneralLinks_Fortify, + GeneralLinks_Grow, } from "@site/src/data/indexData"; import styles from "./index.module.scss"; @@ -45,14 +48,14 @@ function HomepageProductCards() {
{Object.keys(ProductLinkData).map((e: keyof typeof ProductLinkData) => { const cardHeader = ( + <> +
{ProductLinkData[e].eyebrow}
-
- -
{ProductLinkData[e].title} + ); - const cardBody =
{ProductLinkData[e].description}
; + const cardBody =
; const cardLinks = ProductLinkData[e].links.map((link) => ( {link.title} {link.external ? <>↗ : <>→} @@ -68,6 +71,53 @@ function HomepageProductCards() { ); })}
+
+
+ {GeneralLinks_Build.map((link, index) => ( + +
+ +
+
+
+ {link.title} → +
+

{link.description}

+
+ + ))} +
+
+ {GeneralLinks_Fortify.map((link, index) => ( + +
+ +
+
+
+ {link.title} → +
+

{link.description}

+
+ + ))} +
+
+ {GeneralLinks_Grow.map((link, index) => ( + +
+ +
+
+
+ {link.title} → +
+

{link.description}

+
+ + ))} +
+
); } @@ -217,7 +267,7 @@ export default function Home(): JSX.Element {
- + {/* */}