feat: Update index page for docs optimize (#6152)

* Update index page for docs optimize * Update indexData.ts * Update indexData.ts * Update index.module.scss * Update index.module.scss * Update indexData.ts * Update index.module.scss * Update index.module.scss * Update indexData.ts * Update indexData.ts * use dev links for optimize * Fix height for box on index page * Update cardbody * Add missing icons * Update indexData.ts * Update indexData.ts * Update link grid * Update indexData.ts * rename AI * update links * fix broken link --------- Co-authored-by: meletj <[email protected]> Co-authored-by: Julie M <[email protected]>
prisma · Sep 10, 2024 · e500af5 · e500af5
1 parent d91ff77
commit e500af5
Show file tree

Hide file tree

Showing 4 changed files with 209 additions and 87 deletions.
diff --git 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
@@ -1,95 +1,110 @@
 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. <br><br>Combine it with <b>Prisma Studio</b> 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 <b>Prisma Optimize</b> 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 <b>Prisma Accelerate</b>. <br><br>Add <b>Prisma Pulse</b> 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",
       },
     ],
   },
 };
 
 export const ORMCardLinkData = {
   components: {
-    title: "ORM Components",
+    title: "ORM Components and Reference",
     description: "Learn about the building blocks of Prisma ORM.",
     links: [
       {
         url: "/orm/prisma-schema",
         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
@@ -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 {