-
-
Refer - to our Database features matrix for information about supported features and types for - each database. - -
- {DatabaseData.map((e: any) => (
-
-
-
- )
-}
\ No newline at end of file
+ return (
+
+
Refer + to our Database features matrix for information about supported features and types for + each database. + +
+ {DatabaseData.map((e: any) => (
+
+
+
+ )
+}
diff --git a/src/components/HomepageFeatures/ORMCards.tsx b/src/components/HomepageFeatures/ORMCards.tsx
index 1a836b8596..07b42128b1 100644
--- a/src/components/HomepageFeatures/ORMCards.tsx
+++ b/src/components/HomepageFeatures/ORMCards.tsx
@@ -123,39 +123,23 @@ const ORMProductCard = styled(ProductCard)`
}
`
export default function ORMCards(): JSX.Element {
- return (
-
-
-
-
-
-
-
-
-
- )
-}
\ No newline at end of file
+ return (
+
+
+ {Object.keys(CardLinks).map((e) => (
+
+
+ ))}
+
+
+ )
+}
diff --git a/src/components/HomepageFeatures/PrismaORM.tsx b/src/components/HomepageFeatures/PrismaORM.tsx
index 44822d9e28..29cd6ffba5 100644
--- a/src/components/HomepageFeatures/PrismaORM.tsx
+++ b/src/components/HomepageFeatures/PrismaORM.tsx
@@ -122,24 +122,24 @@ const ORMLinkWrapper = styled(Link)`
`
export default function PrismaORM(): JSX.Element {
- return (
-
-
- {GeneralLinkData.map((generalLink: any, index: number) => (
-
-
-
-
- ))}
-
-
- )
-}
\ No newline at end of file
+ return (
+
+
+ {GeneralLinkData.map((generalLink: any, index: number) => (
+
+
+
+
+ ))}
+
+
+ )
+}
diff --git a/src/data/indexData.ts b/src/data/indexData.ts
new file mode 100644
index 0000000000..7c9caf3077
--- /dev/null
+++ b/src/data/indexData.ts
@@ -0,0 +1,199 @@
+export const ProductLinkData = {
+ porm: {
+ title: 'Build with Prisma ORM',
+ icon: 'database',
+ description:
+ 'Open source Node.js and TypeScript ORM with an intuitive data model, automated migrations, type-safety, and auto-completion.',
+ links: [
+ {
+ url: 'getting-started',
+ title: 'Getting started',
+ },
+ {
+ url: 'https://github.com/prisma/prisma-examples',
+ title: 'Example projects',
+ external: true,
+ },
+ ],
+ },
+ pdp: {
+ title: 'Grow as your app evolves',
+ icon: 'triangle',
+ description:
+ 'Expand your application capabilities with global database caching, connection pooling and real-time database events.',
+ links: [
+ {
+ url: 'accelerate',
+ title: 'Prisma Accelerate',
+ },
+ {
+ url: 'pulse',
+ title: 'Prisma Pulse',
+ },
+ ],
+ },
+}
+
+export const ORMCardLinkData = {
+ components: [
+ {
+ url: 'orm/prisma-schema',
+ title: 'Prisma Schema',
+ },
+ {
+ url: 'orm/tools/prisma-cli',
+ title: 'Prisma CLI',
+ },
+ {
+ url: 'orm/prisma-client',
+ title: 'Prisma Client',
+ },
+ {
+ url: 'orm/tools/prisma-studio',
+ title: 'Prisma Studio',
+ },
+ {
+ url: 'orm/prisma-migrate',
+ title: 'Prisma Migrate',
+ },
+ ],
+ reference: [
+ {
+ url: 'orm/reference/prisma-client-reference',
+ title: 'Prisma Client API reference',
+ },
+ {
+ url: 'orm/reference/prisma-schema-reference',
+ title: 'Prisma schema reference',
+ },
+ {
+ url: 'orm/reference/error-reference',
+ title: 'Error message reference',
+ },
+ {
+ url: 'orm/reference/prisma-cli-reference',
+ title: 'Prisma CLI reference',
+ },
+ ],
+}
+
+export const ORMGeneralLinkData = [
+ {
+ title: `What is Prisma ORM`,
+ description: 'An overview of what Prisma ORM is and how it works.',
+ url: 'orm/overview/introduction/what-is-prisma',
+ icon: 'fa-regular fa-question',
+ },
+ {
+ 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: `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: `Preview features`,
+ description: 'Available preview features and how to enable them.',
+ url: 'orm/reference/preview-features',
+ icon: 'fa-solid fa-eye',
+ },
+ {
+ 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 DatabaseData = [
+ {
+ title: 'PostgreSQL',
+ icon: "postgresqlsimple",
+ darkIcon: "postgresqldark",
+ url: 'orm/overview/databases/postgresql',
+ },
+ {
+ title: 'MySQL',
+ icon: "mysqlsimple",
+ darkIcon: "mysqlsimple",
+ url: 'orm/overview/databases/mysql',
+ },
+ {
+ title: 'SQL Server',
+ icon: "sqlserver",
+ darkIcon: "sqlserver",
+ url: 'orm/overview/databases/sql-server',
+ },
+ {
+ title: 'SQLite',
+ icon: "sqlite",
+ darkIcon: "sqlite",
+ url: 'orm/overview/databases/sqlite',
+ },
+ {
+ title: 'MongoDB',
+ icon: "mongodbsimple",
+ darkIcon: "mongodbsimple",
+ url: 'orm/overview/databases/mongodb',
+ },
+ {
+ title: 'CockroachDB',
+ icon: "cockroachdb",
+ darkIcon: "cockroachdbdark",
+ url: 'orm/overview/databases/cockroachdb',
+ },
+ {
+ title: 'Planetscale',
+ icon: "planetscale",
+ darkIcon: "planetscaledark",
+ url: 'orm/overview/databases/planetscale',
+ },
+ {
+ title: 'MariaDB',
+ icon: "mariadb",
+ darkIcon: "mariadbdark",
+ url: 'orm/overview/databases/mysql',
+ },
+]
+
+export const CommunityLinksData = [
+ {
+ id: 'discord',
+ title: 'Discord',
+ description:
+ 'Chat in real-time, hang out, and share ideas with community members and our team.',
+ icon: 'fa-brands fa-discord',
+ link: 'https://pris.ly/discord',
+ linkText: 'Join our server',
+ },
+ {
+ id: 'github',
+ title: 'GitHub',
+ description:
+ 'Browse the Prisma ORM source code, send feedback, or join the discussion on GitHub.',
+ icon: 'fa-brands fa-github',
+ link: 'https://github.com/prisma',
+ linkText: 'Contribute in GitHub',
+ },
+ {
+ id: 'X',
+ title: 'X',
+ description: 'Stay up-to-date, join the discussion, and connect with the community on X.',
+ icon: 'fa-brands fa-x-twitter',
+ link: 'https://twitter.com/prisma',
+ linkText: 'Follow us on X',
+ },
+]
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 9f71a5da77..5f43a91857 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -3,21 +3,512 @@
* and scoped locally.
*/
-.heroBanner {
- padding: 4rem 0;
- text-align: center;
+.icon {
+ width: 64px;
+ height: 64px;
+ flex-shrink: 0;
+ border-radius: 8px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--icon-svg-color);
+}
+
+.h3 {
+ font-family: 'Barlow', sans-serif;
+ font-weight: bold;
+ font-size: 28px;
+ letter-spacing: -0.02em;
+ line-height: 110%;
+}
+
+.h4 {
+ font-family: 'Barlow';
+ margin: 0;
+ font-size: 24px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 110%;
+ /* 26.4px */
+ letter-spacing: -0.48px;
+}
+
+.body {
+ font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+ 'Segoe UI Symbol', 'Noto Color Emoji';
+ font-weight: normal;
+ font-size: 18px;
+ letter-spacing: 0em;
+ line-height: 140%;
+}
+
+.homepageTopSection {
+ padding: 64px 12px;
+ background: #f7fafc;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 40px;
+ background: var(--homepage-header-bg);
+}
+
+.linkGrid {
+ display: flex;
+ max-width: 338px;
+ gap: 16px;
+ width: 100%;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+
+.linkGrid a,
+.linkGrid button {
+ min-width: calc(50% - 8px);
+ white-space: nowrap;
+ font-family: 'Inter';
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 100%;
+ /* 16px */
+ letter-spacing: -0.32px;
+ text-decoration: none;
+}
+
+.linkGrid a &:hover,
+.linkGrid button &:hover {
+ text-decoration: underline;
+}
+
+.linkGrid svg {
+ display: none;
+}
+
+.productCardsWrapper {
+ max-width: 1240px;
+ width: 100%;
+ gap: 40px;
+ margin: 0 auto;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.productCardIndigo {
+ display: grid;
+ grid-template-rows: auto 1fr auto;
+ padding: 32px;
+ width: 100%;
+ border-radius: 8px;
+ background: var(--indigo-card-bg);
+ /* background: var(--${(p) => p.color === 'teal' ? 'teal' : 'indigo'}-card-bg); */
+ 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);
+
+}
+
+.productCardTeal {
+ display: grid;
+ grid-template-rows: auto 1fr auto;
+ padding: 32px;
+ width: 100%;
+ border-radius: 8px;
+ background: var(--teal-card-bg);
+ /* background: var(--${(p) => p.color === 'teal' ? 'teal' : 'indigo'}-card-bg); */
+ 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);
+
+}
+
+.productCard a,
+.productCardIndigo a,
+.productCard button,
+.productCardIndigo button {
+ color: var(--indigo-link-color)
+}
+
+.productCardTeal a,
+.productCardTeal button {
+ color: var(--teal-link-color)
+}
+
+.productCard h3,
+.productCardIndigo h3,
+.productCardTeal h3 {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin: 0 0 24px 0;
+}
+
+.productCard .body,
+.productCardIndigo .body,
+.productCardTeal .body {
+ margin-bottom: 16px;
+}
+
+.productCard .icon,
+.productCardIndigo .icon {
+ background: var(--indigo-600)
+}
+
+.productCardTeal .icon {
+ background: var(--teal-link-color)
+}
+
+.ormLinkSectionWrapper {
+ max-width: 1272px;
+ margin: 0 auto;
+ padding: 60px 16px 24px;
+}
+
+.ormLinkSectionWrapper h4 {
+ color: var(--main-font-color);
+ margin-bottom: 40px;
+}
+
+.ormLinkSectionWrapper>div {
+ display: grid;
+ gap: 40px;
+ grid-template-columns: 100%;
+}
+
+.ormLinkWrapper {
+ display: flex !important;
+ gap: 24px;
+ text-decoration: none;
+}
+
+.ormLinkWrapper h5 {
+ display: inline-block;
+ color: var(--main-font-color);
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 100%;
+ /* 18px */
+ margin: 0 0 10px 0;
+ letter-spacing: -0.36px;
+ font-family: 'Barlow';
+}
+
+.ormLinkWrapper h5>span {
+ font-family: 'Inter';
+}
+
+.ormLinkWrapper>div:last-of-type {
+ display: inline-block;
+}
+
+.ormLinkWrapper .icon {
+ background: var(--icon-wrapper-bg);
+}
+
+.ormLinkWrapper p {
+ color: var(--secondary-font-color);
+ text-overflow: ellipsis;
+ font-family: 'Inter';
+ margin: 0;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 140%;
+ /* 22.4px */
+}
+
+.ormLinkWrapper &:hover h5 {
+ text-decoration: underline;
+}
+
+.ormCardsSection {
+ max-width: 1262px;
+ margin: 0 auto;
+ padding: 40px 11px;
+}
+
+.ormCardsWrapper {
+ gap: 40px;
+ display: flex;
+ flex-direction: column;
+}
+
+.ormCardsWrapper .productCardIndigo {
+ padding: 40px;
+ background: var(--orm-card-bg);
+ grid-template-rows: auto auto 1fr;
+}
+
+.ormCardsWrapper h4 {
+ margin-bottom: 8px;
+}
+
+.ormCardsWrapper .productCard>p {
+ color: var(--secondary-font-color);
+ margin: 0 0 24px 0;
+ font-family: 'Inter';
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 140%;
+ /* 22.4px */
+}
+
+.ormCardsWrapper .linkGrid {
+ gap: 12px;
+}
+
+.ormCardsWrapper .linkGrid a {
+ min-width: calc(50% - 8px);
+ width: fit-content;
+ white-space: nowrap;
+}
+
+.databasesSection {
+ max-width: 1272px;
+ margin: 0 auto;
+ padding: 40px 16px;
+}
+
+.databasesSection h4 {
+ margin-bottom: 24px;
+}
+
+.databasesSection .body {
+ color: var(--secondary-font-color);
+ margin-bottom: 40px;
+}
+
+.databaseGrid {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ gap: 24px;
+}
+
+.databaseGrid a {
+ text-decoration: none;
+ color: unset;
+}
+
+.databaseEntry {
+ height: 84px;
+ display: flex;
+ align-items: center;
+ justify-content: start;
+ gap: 16px;
+ flex-basis: 21%;
+ border-radius: 8px;
+ padding: 25px 24px;
+ background-color: var(--orm-card-bg);
position: relative;
+ cursor: pointer;
+}
+
+.databaseEntry::after {
+ content: '';
+ position: absolute;
+ border-radius: 8px;
+ inset: 0;
+ border: 1px solid var(--grid-border-color);
+ background-color: transparent;
+ cursor: pointer;
+}
+
+.databaseEntry:hover {
+ background-color: var(--main-bgd-color);
+}
+
+.databaseEntry:hover::after {
+ border: 2px solid #5a67d8;
+}
+
+.databaseEntry img {
+ margin: auto 0;
+ max-height: 36px;
+}
+
+.databaseEntry span {
+ color: var(--main-font-color);
+ text-transform: capitalize;
+ font-family: 'Inter';
+ font-weight: 600;
+ font-size: 24px;
+ line-height: 1;
+}
+
+.communityLinksSection {
+ background: var(--community-bgd-color);
+}
+
+.communityLinksSection>div {
+ padding: 80px 16px;
+ margin: 0 auto;
+ max-width: 1272px;
+ text-align: left;
+}
+
+.communityLinksSection>div a {
+ text-decoration: none;
+}
+
+.communityLinksSection .sectionHero h3 {
+ margin-top: 0;
+ margin-bottom: 24px;
+ color: var(--primary-font-color);
+}
+
+.communityLinksSection .sectionHero p {
+ color: var(--secondary-font-color);
+ margin-bottom: 60px;
+ margin-top: 0;
+}
+
+.communityLinkWrapper {
+ display: grid;
+ gap: 16px;
+ text-align: left;
+ grid-template-columns: 24px 1fr;
+ height: 100%;
+ text-decoration: none;
+}
+
+.communityLinkWrapper>div {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 16px;
+}
+
+.communityLinkWrapper h4 {
+ margin-bottom: 6px;
+ margin-top: 0;
+ line-height: 110%;
+ font-size: 24px;
+ font-weight: 700;
+ font-family: 'Barlow';
+ color: var(--primary-font-color);
+}
+
+.communityLinkWrapper .body {
+ color: var(--secondary-font-color);
+ margin: 0;
+}
+
+.communityLinkWrapper .link {
+ color: var(--indigo-link-color);
+ font-family: 'Inter';
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 88%;
+ /* 15.84px */
+}
+
+.communityLinksRow {
+ display: grid;
+ gap: 24px;
+ grid-template-rows: repeat(3, minmax(0, 1fr));
+}
+
+.communityLinksRow i {
+ margin-top: 4px;
+ color: var(--indigo-600);
+}
+
+.communityLinkCard {
+ box-shadow: 0px 5px 3px rgba(23, 43, 77, 0.04), 0px 8px 5px rgba(23, 43, 77, 0.08);
+ background: var(--shadow-card-bg);
+ border-radius: 8px;
overflow: hidden;
+ width: 100%;
+ cursor: pointer;
+ max-width: 100%;
+ margin: 0;
+ transition: transform 100ms ease;
+}
+
+.communityLinkCard:hover {
+ transform: scale(1.02);
}
-@media screen and (max-width: 996px) {
- .heroBanner {
- padding: 2rem;
+.communityLinkCard .content {
+ padding: 32px 24px;
+ text-align: left;
+}
+
+.communityLinkCard .content p {
+ color: #4a5568;
+}
+
+.communityLinkCard .content a {
+ text-decoration: none;
+}
+
+.communityLinkCard .content:hover .link>span:first-of-type {
+ text-decoration: underline;
+}
+
+@media (min-width: 768px) {
+
+ .productCard,
+ .productCardIndigo,
+ .productCardTeal {
+ width: calc(50% - 20px);
+ }
+
+ .ormLinkSectionWrapper>div {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ .ormCardsWrapper {
+ flex-direction: row;
+ }
+
+ .ormDatabasesSection {
+ padding: 24px 16px 108px;
}
+
}
-.buttons {
- display: flex;
- align-items: center;
- justify-content: center;
+@media only screen and (min-width: 768px) {
+ .communityLinksRow {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ grid-template-rows: none;
+ }
+}
+
+@media (min-width: 940px) {
+ .h3 {
+ font-size: 36px;
+ }
+}
+
+@media only screen and (min-width: 940px) {
+ .databaseEntry {
+ padding: 0 24px;
+ }
+
+ .communityLinksRow {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ grid-template-rows: none;
+ }
+}
+
+@media only screen and (min-width: 1024px) {
+ .databaseGrid {
+ display: grid;
+ column-gap: 44px;
+ grid-template-columns: repeat(4, 1fr);
+ }
+
}
+
+@media (min-width: 940px) and (max-width: 1024px) {
+ .databaseGrid {
+ display: grid;
+ column-gap: 44px;
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+}
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index cc09ca459e..dbe4387a7a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,106 +1,183 @@
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Link from '@docusaurus/Link';
+
import Layout from '@theme/Layout';
+import Heading from '@theme/Heading';
-import styled from 'styled-components';
-import ProductCards from '../components/HomepageFeatures/ProductCards';
-import PrismaORM from '../components/HomepageFeatures/PrismaORM';
-import ORMCards from '../components/HomepageFeatures/ORMCards';
-import Databases from '../components/HomepageFeatures/Databases';
-import Community from '../components/HomepageFeatures/Community';
+import { Icon } from '@site/src/components/Icon';
+import {
+ CommunityLinksData,
+ DatabaseData,
+ ORMGeneralLinkData,
+ ORMCardLinkData,
+ ProductLinkData
+} from '@site/src/data/indexData';
-export const IconWrapper = styled.div`
-width: 64px;
-height: 64px;
-flex-shrink: 0;
-border-radius: 8px;
-display: inline-flex;
-align-items: center;
-justify-content: center;
-color: var(--icon-svg-color);
-`
+import styles from './index.module.css';
-export const H4 = styled.h4`
- font-family: 'Barlow';
- margin: 0;
- font-size: 24px;
- font-style: normal;
- font-weight: 700;
- line-height: 110%; /* 26.4px */
- letter-spacing: -0.48px;
-`
-export const H3 = styled.h3`
-font-family: 'Barlow', sans-serif;
-font-weight: bold;
-font-size: 28px;
-letter-spacing: -0.02em;
-line-height: 110%;
-@media (min-width: 940px) {
- font-size: 36px;
+function HomepageCard({
+ className, heading, body, links
+}: {
+ className: string, heading: JSX.Element, body: JSX.Element, links: JSX.Element[]
+}): JSX.Element {
+ return (
+
+ title={title}
+ description="Get started with Prisma in the official documentation, and learn more about all Prisma's features with reference documentation, guides, and more.">
-
-
-
);
diff --git a/src/theme/MDXComponents.tsx b/src/theme/MDXComponents.tsx
index 11385736ea..760065ddf5 100644
--- a/src/theme/MDXComponents.tsx
+++ b/src/theme/MDXComponents.tsx
@@ -8,8 +8,8 @@ import Admonition from '@theme/Admonition';
import TabbedContent from '@theme/Tabs'; // Tabs renamed to TabbedContent for backwards compat
import TabItem from '@theme/TabItem';
import Link from '@docusaurus/Link';
-import CollapseBox from '../components/collapsible';
-import TopSection from '../components/topSection';
+import CollapseBox from '@site/src/components/collapsible';
+import TopSection from '@site/src/components/topSection';
import { useLocation } from '@docusaurus/router';
// TODO: do we want to fix this?
@@ -28,7 +28,7 @@ const TopBlock: React.FC = ({ children, langSwitcher, d
{children}
- )
+ )
}
// TODO: we should fix this
-
+
- )
-}
\ No newline at end of file
+
+
+ ))}
+
+
+
+ )
+}
diff --git a/src/components/HomepageFeatures/Databases.tsx b/src/components/HomepageFeatures/Databases.tsx
index eaaf1d0741..5abdb4449c 100644
--- a/src/components/HomepageFeatures/Databases.tsx
+++ b/src/components/HomepageFeatures/Databases.tsx
@@ -152,28 +152,30 @@ const DatabaseGrid = styled.div`
}
`
export default function ORMCards(): JSX.Element {
- return (
- Join our Community
-- We have multiple channels where you can get help from members of our community as well - as the Prisma team. -
+ return ( +
+
+ {CommunityLinksData.map((comm: any) => (
+
+
+
- {CommunityLinksData.map((comm: any) => (
-
-
-
- ))}
-
-
-
+
+ Join our Community
++ We have multiple channels where you can get help from members of our community as well + as the Prisma team. +
+
+
-
+
+ {comm.title}
+ {comm.description} +
+ {comm.linkText}
+ ↗
+
-
-
-
-
- {comm.title}
- {comm.description} -
- {comm.linkText}
- ↗
-
- Databases
- - Prisma ORM works seamlessly across most popular databases and service providers.Refer - to our Database features matrix for information about supported features and types for - each database. - -
- 
- {e.title}
-
-
- ))}
-
- {e.title}
- Databases
+ + Prisma ORM works seamlessly across most popular databases and service providers.Refer + to our Database features matrix for information about supported features and types for + each database. + +
+
+ {e.title}
+
+
+ ))}
+
+ {e.title}
+ Components
-- Open source Node.js and TypeScript ORM with an intuitive data model, automated - migrations, type-safety, and auto-completion. -
-
-
- {CardLinks.components.map((card: any) => (
- {card.title} →
- ))}
-
-
- Reference
-- Open source Node.js and TypeScript ORM with an intuitive data model, automated - migrations, type-safety, and auto-completion. -
-
-
- {CardLinks.reference.map((card: any) => (
- {card.title} →
- ))}
-
-
- {e[0].toUpperCase() + e.substring(1).toLowerCase()}
+Open source Node.js and TypeScript ORM with an intuitive data model, automated migrations, type-safety, and auto-completion.
+
+
+ {CardLinks[e].map((card) => (
+ {card.title} →
+ ))}
+
+
+ Prisma ORM
-
-
- - {generalLink.title} → -
-{generalLink.description}
-Prisma ORM
+
+
+ + {generalLink.title} → +
+{generalLink.description}
+
+ {heading}
+ {body}
+
+ )
}
-`
-export const Body = styled.div`
-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
- 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
- 'Segoe UI Symbol', 'Noto Color Emoji';
-font-weight: normal;
-font-size: 18px;
-letter-spacing: 0em;
-line-height: 140%;
-`
+function HomepageProductCards() {
+ return (
+
+ {links}
+
+
+
+ )
+}
-const TopSection = styled.div`
- padding: 64px 12px;
- background: #f7fafc;
- display: flex;
- flex-wrap: wrap;
- gap: 40px;
- background: var(--homepage-header-bg);
-`
+function HomepageORMLinksSection() {
+ return (
+
+ {Object.keys(ProductLinkData).map((e: keyof typeof ProductLinkData) => {
+ const cardHeader =
+
+ const cardBody =
+
+
+ {ProductLinkData[e].title}
+ {ProductLinkData[e].description}
+ const cardLinks = ProductLinkData[e].links.map((link) => (
+
+ {link.title} {link.external ? <>↗ : <>→}
+
+ ))
+ return
+ Prisma ORM
+
+ )
+}
-export const LinkGrid = styled.div`
- display: flex;
- max-width: 338px;
- gap: 16px;
- width: 100%;
- flex-wrap: wrap;
- justify-content: space-between;
- a,
- button {
- min-width: calc(50% - 8px);
- white-space: nowrap;
- font-family: 'Inter';
- font-size: 16px;
- font-style: normal;
- font-weight: 600;
- line-height: 100%; /* 16px */
- letter-spacing: -0.32px;
- text-decoration: none;
- &:hover {
- text-decoration: underline;
- }
- }
- svg {
- display: none;
- }
-`
+function HomepageORMCards() {
+ return (
+
+ {ORMGeneralLinkData.map((link, index) => (
+
+
+
+
+
+
+
+ ))}
+ {link.title} →
+{link.description}
+
+
+ )
+}
+
+function HomepageDatabasesSection() {
+ return (
+
+ {Object.keys(ORMCardLinkData).map((e) => {
+ const cardHeader = {e[0].toUpperCase() + e.substring(1).toLowerCase()} ;
+ const cardBody =
+ Open source Node.js and TypeScript ORM with an intuitive data model, automated migrations, type-safety, and auto-completion.
+ const links = ORMCardLinkData[e].map((card) => ({card.title} →)) + return
+ Databases
+
+ )
+}
+function HomepageCommunitySection() {
+ return (
+
+ Prisma ORM works seamlessly across most popular databases and service providers.
+ Refer to our Database features matrix for information about supported features and types for each database. +
+ + Refer to our Database features matrix for information about supported features and types for each database. +
+ {DatabaseData.map((e) => (
+
+
+
+
+ {e.title}
+
+
+ ))}
+
+ {e.title}
+
+
+ )
+}
export default function Home(): JSX.Element {
- const {siteConfig} = useDocusaurusContext();
+ const {
+ siteConfig: { title },
+ } = useDocusaurusContext();
return (
+
+
+ Join our Community
+
+ We have multiple channels where you can get help from members of our community as well as the Prisma team.
+
+ {CommunityLinksData.map((communityInfo) => (
+
+
+
+
+ ))}
+
+
+
+
+
+ {communityInfo.title}
+{communityInfo.description}
+
+ {communityInfo.linkText}
+ ↗
+
+