Update homepage for postgres launch

prisma · Oct 24, 2024 · 7a555eb · 7a555eb
1 parent 0480f23
commit 7a555eb
Show file tree

Hide file tree

Showing 5 changed files with 282 additions and 177 deletions.
diff --git a/src/css/all.css b/src/css/all.css
@@ -949,6 +949,14 @@
   content: "\f0e7";
 }
 
+.fa-chart-pyramid::before {
+  content: "\e0e6";
+}
+
+.fa-table::before {
+  content: "\f0ce";
+}
+
 .sr-only,
 .fa-sr-only {
   position: absolute;

diff --git a/src/css/theming.css b/src/css/theming.css
@@ -60,12 +60,14 @@
   --main-font-color: #2d3748;
   --primary-font-color: var(--gray-800);
   --secondary-font-color: #4a5568;
+  --terciary-font-color: #718096;
   --icon-svg-color: #5a67d8;
   --icon-wrapper-bg: rgb(235, 244, 255);
   --teal-link-color: #16a394;
   --indigo-link-color: #5a67d8;
   --teal-card-bg: linear-gradient(102deg, #fff 6.22%, #e8fffd 87.23%);
   --indigo-card-bg: linear-gradient(102deg, #fff 6.22%, #f4f5ff 87.23%);
+  --card-bg: #F7FAFC;
   --orm-card-bg: #fff;
   --grid-border-color: #cbd5e0;
   --community-bgd-color: var(--gray-100);
@@ -125,7 +127,7 @@
   color: var(--main-font-color);
   background-color: var(--white-color);
 
-  --homepage-header-bg: rgb(247, 250, 252);
+  --homepage-header-bg: #fff;
   --menu-link-code: #4a5568;
   /* Colors */
   --indigo-100: #ebf4ff;
@@ -148,6 +150,16 @@
   --gray-900: #1a202c;
   --gray-1000: #090a15;
 
+  --teal-100: #D9F9F6;
+  --teal-200: #B7F4EE;
+  --teal-300: #92EFE6;
+  --teal-400: #71E8DF;
+  --teal-500: #04C8BB;
+  --teal-600: #16A394;
+  --teal-700: #187367;
+  --teal-800: #154F47;
+  --teal-900: #154F47;
+
   @media (max-width: 996px) {
     --ifm-menu-link-sublist-icon: url("/icons/chevron-up-solid.svg");
     --ifm-navbar-padding-horizontal: 0;
@@ -190,12 +202,14 @@ html[data-theme="dark"] {
   --main-font-color: #e2e8f0;
   --primary-font-color: rgb(247, 250, 252);
   --secondary-font-color: rgb(203, 213, 224);
+  --terciary-font-color: #A0AEC0;
   --icon-wrapper-bg: rgb(90, 103, 216);
   --icon-svg-color: #f7fafc;
   --teal-link-color: #71e8df;
   --indigo-link-color: #7f9cf5;
   --teal-card-bg: linear-gradient(128deg, #090a15 31.75%, #0d3a38 112.39%);
   --indigo-card-bg: linear-gradient(128deg, #090a15 31.75%, #181a48 112.39%);
+  --card-bg: #1A202C;
   --orm-card-bg: var(--gray-900);
   --grid-border-color: var(--gray-700);
   --community-bgd-color: var(--gray-900);
@@ -250,7 +264,7 @@ html[data-theme="dark"] {
   --grey-color: #3d556b;
   --grey-bg-color: #8fa6b2;
   --dark-color: rgb(12, 52, 75);
-  --homepage-header-bg: var(--gray-900);
+  --homepage-header-bg: var(--gray-1000);
   --menu-link-code: #e2e8f0;
 }
 
@@ -297,13 +311,15 @@ html[data-theme="dark"] {
     --ifm-card-background-color: white;
     --main-font-color: #2d3748;
     --secondary-font-color: #4a5568;
+    --terciary-font-color: #718096;
     --primary-font-color: var(--gray-800);
     --icon-wrapper-bg: rgb(235, 244, 255);
     --icon-svg-color: #5a67d8;
     --teal-link-color: #16a394;
     --indigo-link-color: #5a67d8;
     --teal-card-bg: linear-gradient(102deg, #fff 6.22%, #e8fffd 87.23%);
     --indigo-card-bg: linear-gradient(102deg, #fff 6.22%, #f4f5ff 87.23%);
+    --card-bg: #F7FAFC;
     --orm-card-bg: #fff;
     --grid-border-color: #cbd5e0;
     --community-bgd-color: var(--gray-100);
@@ -363,7 +379,7 @@ html[data-theme="dark"] {
     word-wrap: break-word;
     color: var(--main-font-color);
     background-color: var(--white-color);
-    --homepage-header-bg: rgb(247, 250, 252);
+    --homepage-header-bg: #fff;
     --menu-link-code: #4a5568;
     /* Colors */
     --indigo-100: #ebf4ff;
@@ -385,6 +401,17 @@ html[data-theme="dark"] {
     --gray-800: #2d3748;
     --gray-900: #1a202c;
     --gray-1000: #090a15;
+
+
+    --teal-100: #D9F9F6;
+    --teal-200: #B7F4EE;
+    --teal-300: #92EFE6;
+    --teal-400: #71E8DF;
+    --teal-500: #04C8BB;
+    --teal-600: #16A394;
+    --teal-700: #187367;
+    --teal-800: #154F47;
+    --teal-900: #154F47;
   }
 
   :root[data-theme="dark"] {
@@ -414,12 +441,14 @@ html[data-theme="dark"] {
     --main-font-color: #e2e8f0;
     --primary-font-color: rgb(247, 250, 252);
     --secondary-font-color: rgb(203, 213, 224);
+    --terciary-font-color: #A0AEC0;
     --icon-wrapper-bg: rgb(90, 103, 216);
     --icon-svg-color: #f7fafc;
     --teal-link-color: #71e8df;
     --indigo-link-color: #7f9cf5;
     --teal-card-bg: linear-gradient(128deg, #090a15 31.75%, #0d3a38 112.39%);
     --indigo-card-bg: linear-gradient(128deg, #090a15 31.75%, #181a48 112.39%);
+    --card-bg: #1A202C;
     --orm-card-bg: var(--gray-900);
     --grid-border-color: var(--gray-700);
     --community-bgd-color: var(--gray-900);
@@ -476,7 +505,7 @@ html[data-theme="dark"] {
     --grey-bg-color: #8fa6b2;
     --dark-color: rgb(12, 52, 75);
 
-    --homepage-header-bg: var(--gray-900);
+    --homepage-header-bg: var(--gray-1000);
     --menu-link-code: #e2e8f0;
   }
 }

diff --git a/src/data/indexData.ts b/src/data/indexData.ts
@@ -1,53 +1,52 @@
 export const ProductLinkData = {
-  porm: {
-    title: "Start building with Prisma ORM",
-    //eyebrow: "Build",
+  i_orm: {
+    title: "Talk to your database, easily",
+    eyebrow: "ORM",
     description:
-      "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: "/orm",
-        title: "ORM",
-      },
-      {
-        url: "/orm/tools/prisma-studio",
-        title: "Studio",
-      },
-    ],
+      "Open source Node.js and TypeScript ORM with an intuitive data model, automated migrations, type-safety, and auto-completion.",
+    link:  "/orm",
+    icon: "fa-regular fa-database"
   },
-  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",
-      },
-    ],
+  i_postgres: {
+    title: "Managed Postgres for global workloads",
+    eyebrow: "Postgres",
+    description: "Interact with your data in a simple tabular interface with full CRUD capabilities, filtering, sorting, and safe editing directly in the model cells.",
+    link: "/",
+    icon: "fa-regular fa-chart-pyramid"
   },
-  pdp: {
-    title: "Grow and evolve your application",
-    //eyebrow: "Grow",
-    description:
-      "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: "Accelerate",
-      },
-      {
-        url: "/pulse",
-        title: "Pulse",
-      },
-    ],
+  i_studio: {
+    title: "Explore and manipulate your data",
+    eyebrow: "Studio",
+    description: "Interact with your data in a simple tabular interface with full CRUD capabilities, filtering, sorting, and safe editing directly in the model cells.",
+    link: "/studio",
+    icon: "fa-regular fa-table"
+  },
+  t_optimize: {
+    title: "AI-driven insights",
+    eyebrow: "Optimize",
+    description: "Analyze your queries and get recommedations to improve your database queries, making your app run faster.",
+    link: "/optimize",
+    icon: "fa-regular fa-magnifying-glass-chart"
+  },
+  t_accelerate: {
+    title: "Connection pooling & caching",
+    eyebrow: "Accelerate",
+    description: "A fully managed global connection pool and caching layer for your existing database, enabling query-level cache policies.",
+    link: "/accelerate",
+    icon: "fa-regular fa-bolt"
   },
+  t_pulse: {
+    title: "Real-time db events",
+    eyebrow: "Pulse",
+    description: "Distribute change events to your application at scale, enabling database changes to trigger events and actions in real-time.",
+    link: "/pulse",
+    icon: "fa-regular fa-signal-stream"
+  }
 };
 
 export const ORMCardLinkData = {
   components: {
-    title: "ORM Components and Reference",
+    title: "ORM Components",
     description: "Learn about the building blocks of Prisma ORM.",
     links: [
       {