diff --git a/src/css/all.css b/src/css/all.css
index 4c09f29c31..8ebab9fea4 100644
--- 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
index 413c315fc5..70b9c84b5e 100644
--- 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,6 +311,7 @@ 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;
@@ -304,6 +319,7 @@ html[data-theme="dark"] {
--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
index 74922a8d3c..41fc50e6c0 100644
--- 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.
Combine it with Prisma Studio 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 Prisma Optimize 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 Prisma Accelerate.
Add Prisma Pulse 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: [
{
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 28dc31aefc..0218477ba3 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -6,7 +6,7 @@
.mainHome {
padding: 0;
@media (max-width: 996px) {
- margin-top: 32px;
+ margin-top: 68px;
}
}
@@ -59,6 +59,19 @@
color: #2d3748;
}
+.h2 {
+ //styleName: HEADINGS/H2;
+ font-family: "Barlow", sans-serif;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 52.8px;
+ letter-spacing: -0.02em;
+ text-align: left;
+ @media (min-width: 940px) {
+ font-size: 48px;
+ }
+}
+
.h3 {
font-family: "Barlow", sans-serif;
font-weight: bold;
@@ -106,14 +119,28 @@
}
.homepageTopSection {
- background: #f7fafc;
display: flex;
gap: 40px;
background: var(--homepage-header-bg);
- padding: 64px 12px;
+ padding: 40px 19px;
flex-direction: column;
@media (min-width: 768px) {
- padding: 24px 12px 64px;
+ padding: 48px 12px 0;
+ }
+ .productCardIndigo, .productCardTeal {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 24px;
+ @media (min-width: 768px) {
+ display: block;
+ }
+ .body {
+ display: none;
+ @media (min-width: 768px) {
+ display: block;
+ }
+ }
}
}
@@ -159,6 +186,23 @@
@media (min-width: 768px) {
grid-template-columns: repeat(3, 1fr);
}
+ .cardHeader {
+ display: flex;
+ gap: 24px;
+ align-items: center;
+ h5.eyebrow {
+ margin-bottom: 8px;
+ }
+ .iconWrapper {
+ width: 64px;
+ height: 64px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 10.5px;
+ flex-shrink: 0;
+ }
+ }
}
h5.eyebrow {
@@ -169,84 +213,119 @@ h5.eyebrow {
line-height: 110%;
margin: 0;
text-transform: uppercase;
- color: var(--secondary-font-color);
+ color: var(--terciary-font-color);
letter-spacing: 0.1em;
text-align: left;
}
%productCard {
- display: grid;
- grid-template-rows: auto auto 1fr auto;
- padding: 32px;
+ padding: 24px;
width: 100%;
border-radius: 8px;
- box-shadow:
- 0px 18px 42px 0px rgba(23, 43, 77, 0.08),
- 0px 4px 26px 0px rgba(23, 43, 77, 0.05),
- 0px 0px 46px 0px rgba(23, 43, 77, 0.01);
-
- h3 {
- display: flex;
- align-items: center;
- gap: 16px;
- margin: 0 0 24px 0;
+ box-shadow: 0px 5px 3px 0px #172B4D14, 0px 3px 2px 0px #172B4D0A;
+ background: var(--card-bg);
+ transition: all 200ms ease-in-out;
+ h4 {
+ margin: 0;
+ font-size: 20px;
}
-
.body {
- margin-bottom: 32px;
+ margin-top: 20px;
+ }
+ &:hover {
+ box-shadow: 0px 18px 42px 0px #172B4D14,
+ 0px 4px 26px 0px #172B4D0D
+ 0px 0px 46px 0px #172B4D03;
}
}
.productCardIndigo {
@extend %productCard;
- background: var(--indigo-card-bg);
+ outline: 1px solid var(--indigo-600);
+ &:hover {
+ outline: 2px solid var(--indigo-600);
+ }
a,
button {
color: var(--indigo-link-color);
}
- .icon {
+ .icon, .iconWrapper {
background: var(--indigo-600);
}
}
.productCardTeal {
@extend %productCard;
- background: var(--teal-card-bg);
+ outline: 1px solid var(--teal-600);
+ &:hover {
+ outline: 2px solid var(--teal-700);
+ }
a,
button {
color: var(--teal-link-color);
}
- .icon {
- background: var(--teal-link-color);
+ .icon, .iconWrapper {
+ background: var(--teal-600);
+ }
+}
+
+.mobileArrow {
+ color: var(--terciary-font-color);
+ display: inline-block;
+ @media (min-width: 768px) {
+ display: none;
}
}
.ormLinkSectionWrapper {
- max-width: 1240px;
width: 100%;
- gap: 24px;
margin: 0 auto;
- flex-wrap: wrap;
- display: grid;
+ max-width: 1268px;
+ padding: 40px 14px;
@media (min-width: 768px) {
- grid-template-columns: repeat(3, 1fr);
+ padding: 32px 14px 64px;
}
- .ormLinkCol {
+ h2.h2 {
+ margin-bottom: 16px;
+ line-height: 39.6px;
+ font-size: 36px;
+ margin-top: 0;
display: flex;
- justify-content: space-between;
- flex-direction: column;
- gap: 40px;
- grid-template-columns: 100%;
-
+ align-items: center;
+ justify-content: center;
+ height: 58px;
+ @media (min-width: 768px) {
+ margin-bottom: 32px;
+ justify-content: flex-start;
+ }
+ }
+ .ormLinkGrid {
+ gap: 24px;
+ flex-wrap: wrap;
+ display: grid;
+ background: var(--card-bg);
+ padding: 32px;
+ border-radius: 24px;
@media (min-width: 768px) {
- grid-template-columns: 1fr 1fr;
- grid-gap: 40px;
- grid-auto-flow: column;
- grid-template-rows: repeat(5, auto);
+ grid-template-columns: repeat(3, 1fr);
+ }
+ .ormLinkCol {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ gap: 40px;
+ grid-template-columns: 100%;
+
+ @media (min-width: 768px) {
+ grid-template-columns: 1fr 1fr;
+ grid-gap: 40px;
+ grid-auto-flow: column;
+ grid-template-rows: repeat(5, auto);
+ }
}
}
}
@@ -258,7 +337,7 @@ h5.eyebrow {
h5 {
display: inline-block;
- color: var(--main-font-color);
+ color: var(--ifm-link-color);
font-size: 18px;
font-style: normal;
font-weight: 700;
@@ -303,7 +382,7 @@ h5.eyebrow {
.ormCardsSection {
max-width: 1262px;
margin: 0 auto;
- padding: 40px 11px;
+ padding: 32px 0 0;
}
.ormCardsWrapper {
@@ -311,18 +390,22 @@ h5.eyebrow {
display: flex;
flex-direction: column;
- h4 {
+ h4.h4 {
margin-bottom: 8px;
+ margin-top: 0;
}
.productCardIndigo {
- padding: 40px;
+ padding: 32px 24px;
background: var(--orm-card-bg);
grid-template-rows: auto auto 1fr;
+ outline: none;
+ box-shadow: none;
+ background: var(--card-bg);
- > p {
+ .body {
color: var(--secondary-font-color);
- margin: 0 0 24px 0;
+ margin: 0 0 16px 0;
font-family: "Inter";
font-size: 16px;
font-style: normal;
@@ -338,9 +421,8 @@ h5.eyebrow {
}
.linkGrid {
- gap: 12px;
max-width: 599px;
-
+ gap: 12px;
a {
min-width: calc(50% - 8px);
width: fit-content;
@@ -354,9 +436,19 @@ h5.eyebrow {
}
.databasesSection {
- max-width: 1272px;
+ max-width: 1268px;
margin: 0 auto;
- padding: 40px 16px;
+ padding: 40px 14px;
+
+ h2.h2 {
+ margin-top: 0;
+ line-height: 39.6px;
+ font-size: 36px;
+ margin-bottom: 24px;
+ display: flex;
+ align-items: center;
+ height: 58px;
+ }
h4 {
margin-bottom: 24px;
@@ -368,7 +460,7 @@ h5.eyebrow {
}
@media (min-width: 768px) {
- padding: 24px 16px 108px;
+ padding: 60px 12px;
}
}
@@ -430,19 +522,23 @@ h5.eyebrow {
background: var(--community-bgd-color);
> div {
- padding: 80px 16px;
margin: 0 auto;
- max-width: 1272px;
+ max-width: 1268px;
text-align: left;
-
+ padding: 40px 14px;
+ @media (min-width: 768px) {
+ padding: 80px 14px;
+ }
a {
text-decoration: none;
}
}
.sectionHero {
- h3 {
+ h2.h2 {
margin-top: 0;
+ font-size: 36px;
+ line-height: 39.6px;
margin-bottom: 24px;
color: var(--primary-font-color);
}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 092f37302c..6351b5da5f 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,44 +1,42 @@
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import Link from "@docusaurus/Link";
import Head from "@docusaurus/Head";
-
-import Layout from "@theme/Layout";
-import Heading from "@theme/Heading";
-
-import { Icon } from "@site/src/components/Icon";
-import {
- CommunityLinksData,
- DatabaseData,
- ORMGeneralLinkData,
- ORMCardLinkData,
- ProductLinkData,
- GeneralLinks_Build,
- GeneralLinks_Fortify,
- GeneralLinks_Grow,
-} from "@site/src/data/indexData";
-
-import styles from "./index.module.scss";
+import Link from "@docusaurus/Link";
import useBaseUrl from "@docusaurus/useBaseUrl";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { Icon } from "@site/src/components/Icon";
+import { CommunityLinksData, DatabaseData, GeneralLinks_Build, GeneralLinks_Fortify, GeneralLinks_Grow, ORMCardLinkData, ORMGeneralLinkData, ProductLinkData } from "@site/src/data/indexData";
+import Heading from "@theme/Heading";
+import Layout from "@theme/Layout";
import clsx from "clsx";
+
import DarkImg from "../theme/DarkImg";
+import styles from "./index.module.scss";
function HomepageCard({
className,
heading,
body,
+ link,
links,
}: {
className: string;
heading: JSX.Element;
body: JSX.Element;
- links: JSX.Element[];
+ links?: JSX.Element;
+ link?: string;
}): JSX.Element {
return (
-
{link.description}
-
@@ -272,8 +245,8 @@ export default function Home(): JSX.Element {