From 7a555ebd8c1aed6b63162608b08bb6f3e280f203 Mon Sep 17 00:00:00 2001 From: Carla Goncalves Date: Thu, 24 Oct 2024 15:43:57 +0100 Subject: [PATCH] Update homepage for postgres launch --- src/css/all.css | 8 ++ src/css/theming.css | 37 ++++++- src/data/indexData.ts | 81 +++++++------- src/pages/index.module.scss | 206 ++++++++++++++++++++++++++---------- src/pages/index.tsx | 127 +++++++++------------- 5 files changed, 282 insertions(+), 177 deletions(-) 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 ( -
- {heading} - {body} -
{links}
-
+ link + ? + {heading} + {body} + + + :
+ {heading} + {body} +
{links}
+
+ ); } @@ -48,12 +46,17 @@ function HomepageProductCards() {
{Object.keys(ProductLinkData).map((e: keyof typeof ProductLinkData) => { const cardHeader = ( - <> -
{ProductLinkData[e].eyebrow}
- - {ProductLinkData[e].title} - - +
+
+ +
+
+
{ProductLinkData[e].eyebrow}
+ + {ProductLinkData[e].title} + +
+
); const cardBody = (
); - const cardLinks = ProductLinkData[e].links.map((link) => ( - - {link.title} {link.external ? <>↗ : <>→} - - )); return ( ); })}
-
+
+ ); +} + +function HomepageORMLinksSection() { + return ( +
+ Resources +
{GeneralLinks_Build.map((link, index) => ( -
- -
{link.title} → @@ -95,9 +98,6 @@ function HomepageProductCards() {
{GeneralLinks_Fortify.map((link, index) => ( -
- -
{link.title} → @@ -110,9 +110,6 @@ function HomepageProductCards() {
{GeneralLinks_Grow.map((link, index) => ( -
- -
{link.title} → @@ -123,31 +120,7 @@ function HomepageProductCards() { ))}
-
- ); -} - -function HomepageORMLinksSection() { - return ( -
- - Resources - -
- {ORMGeneralLinkData.map((link, index) => ( - -
- -
-
-
- {link.title} → -
-

{link.description}

-
- - ))} -
+
); } @@ -185,7 +158,7 @@ function HomepageORMCards() { function HomepageDatabasesSection() { return (
- + Databases
@@ -224,7 +197,7 @@ function HomepageCommunitySection() {
- + Join our Community

@@ -272,8 +245,8 @@ export default function Home(): JSX.Element {

- {/* */} - + +