diff --git a/config.ts b/config.ts
deleted file mode 100644
index 39b0a30e2a..0000000000
--- a/config.ts
+++ /dev/null
@@ -1,180 +0,0 @@
-const siteConfigData = {
-  homepage: {
-    SummaryLinkData: {
-      gettingStarted: 'getting-started',
-      readyToRun: 'https://github.com/prisma/prisma-examples',
-      slack: 'https://slack.prisma.io/',
-      discord: 'https://pris.ly/discord',
-      git: 'https://github.com/prisma',
-      buttons: [
-        {
-          text: 'Getting started',
-          url: 'getting-started',
-          special: true,
-          icon: 'DoubleArrow',
-        },
-        {
-          text: 'Example projects',
-          url: 'https://github.com/prisma/prisma-examples',
-          special: false,
-          icon: null,
-        },
-      ],
-    }, 
-    ORMPlatformLinkData: {
-      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',
-          },
-        ],
-      },
-    },
-    GeneralLinkData: [
-      {
-        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',
-      },
-    ],
-    CommunityLinksData: [
-      // {
-      //   id: 'slack',
-      //   title: 'Slack',
-      //   description: 'Engage with a vibrant community of developers and companies adopting Prisma',
-      //   icon: 'fa-brands fa-slack',
-      //   link: 'https://slack.prisma.io/',
-      //   linkText: 'Join our channel',
-      // },
-      {
-        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',
-      },
-    ],
-    CardLinks: {
-      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 default siteConfigData
diff --git a/src/components/HomepageFeatures/Community.tsx b/src/components/HomepageFeatures/Community.tsx
new file mode 100644
index 0000000000..421fa71687
--- /dev/null
+++ b/src/components/HomepageFeatures/Community.tsx
@@ -0,0 +1,171 @@
+import styled from "styled-components"
+import ShadowCard from "../shadow-card"
+import { Icon } from "../Icon"
+import * as theme from "../../css/primitives"
+
+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',
+  },
+]
+
+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%;
+`
+
+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;
+}
+`
+const CommunitySection = styled.div`
+  background: var(--community-bgd-color);
+  > div {
+    padding: 80px 16px;
+    margin: 0 auto;
+    max-width: 1272px;
+    text-align: left;
+    a {
+      text-decoration: none;
+    }
+    .section-hero {
+      ${H3} {
+        margin-top: 0;
+        margin-bottom: 24px;
+        color: var(--primary-font-color);
+      }
+      p {
+        color: var(--secondary-font-color);
+        margin-bottom: 60px;
+        margin-top: 0;
+      }
+    }
+
+    .community-link-wrapper {
+      display: grid;
+      gap: 16px;
+      text-align: left;
+      grid-template-columns: 24px 1fr;
+      height: 100%;
+      text-decoration: none;
+      > div {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        gap: 16px;
+      }
+      h4 {
+        margin-bottom: 6px;
+        margin-top: 0;
+        line-height: 110%;
+        font-size: 24px;
+        font-weight: 700;
+        font-family: 'Barlow';
+        color: var(--primary-font-color);
+      }
+      ${Body} {
+        color: var(--secondary-font-color);
+        margin: 0;
+      }
+      .link {
+        color: var(--indigo-link-color);
+        font-family: 'Inter';
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 88%; /* 15.84px */
+      }
+    }
+  }
+`
+
+const CommunityLinksRow = styled.div`
+  display: grid;
+  gap: 24px;
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+  @media only screen and (min-width: 768px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-rows: none;
+  }
+  @media only screen and (min-width: 940px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-rows: none;
+  }
+  i {
+    margin-top: 4px;
+  } 
+`
+
+export default function ORMCards(): JSX.Element {
+    return (
+        <CommunitySection>
+            <div>
+                <div className="section-hero">
+                    <H3>Join our Community</H3>
+                    <p>
+                    We have multiple channels where you can get help from members of our community as well
+                    as the Prisma team.
+                    </p>
+                </div>
+                <CommunityLinksRow>
+                    {CommunityLinksData.map((comm: any) => (
+                    <ShadowCard key={comm.id}>
+                        <a
+                        className="community-link-wrapper content"
+                        href={comm.link}
+                        rel="noreferrer"
+                        target="_blank"
+                        >
+                        <Icon icon={comm.icon} color={theme.colors.indigo[600]} size="22px" />
+                        <div>
+                            <div>
+                            <h4>{comm.title}</h4>
+                            <Body>{comm.description}</Body>
+                            </div>
+                            <div className="link">
+                            <span>{comm.linkText}</span>
+                            <span> &#8599;</span>
+                            </div>
+                        </div>
+                        </a>
+                    </ShadowCard>
+                    ))}
+                </CommunityLinksRow>
+            </div>
+        </CommunitySection>
+    )
+}
\ No newline at end of file
diff --git a/src/components/HomepageFeatures/Databases.tsx b/src/components/HomepageFeatures/Databases.tsx
new file mode 100644
index 0000000000..eaaf1d0741
--- /dev/null
+++ b/src/components/HomepageFeatures/Databases.tsx
@@ -0,0 +1,179 @@
+import styled from "styled-components"
+import Link from "@docusaurus/Link";
+
+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',
+  },
+]
+
+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;
+`
+
+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%;
+`
+
+const DatabasesSection = styled.div`
+  max-width: 1272px;
+  margin: 0 auto;
+  padding: 40px 16px;
+  @media (min-width: 768px) {
+    padding: 24px 16px 108px;
+  }
+  ${H4} {
+    margin-bottom: 24px;
+  }
+  ${Body} {
+    color: var(--secondary-font-color);
+    margin-bottom: 40px;
+  }
+`
+const DatabaseGrid = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 24px;
+  @media only screen and (min-width: 1024px) {
+    display: grid;
+    column-gap: 44px;
+    grid-template-columns: repeat(4, 1fr);
+  }
+  @media (min-width: 940px) and (max-width: 1024px) {
+    display: grid;
+    column-gap: 44px;
+    grid-template-columns: repeat(3, 1fr);
+  }
+  a {
+    text-decoration: none;
+    color: unset;
+  }
+  .entry {
+    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;
+    &::after {
+      content: '';
+      position: absolute;
+      border-radius: 8px;
+      inset: 0;
+      border: 1px solid var(--grid-border-color);
+      background-color: transparent;
+      cursor: pointer;
+    }
+
+    &:hover {
+      background-color: var(--main-bgd-color);
+      &::after {
+        border: 2px solid #5a67d8;
+      }
+    }
+    @media only screen and (min-width: 940px) {
+      padding: 0 24px;
+    }
+    img {
+      margin: auto 0;
+      max-height: 36px;
+    }
+    span {
+      color: var(--main-font-color);
+      text-transform: capitalize;
+      font-family: 'Inter';
+      font-weight: 600;
+      font-size: 24px;
+      line-height: 1;
+    }
+  }
+`
+export default function ORMCards(): JSX.Element {
+    return (
+        <DatabasesSection>
+            <H4>Databases</H4>
+            <Body>
+            Prisma ORM works seamlessly across most popular databases and service providers. <br /> Refer
+            to our Database features matrix for information about supported features and types for
+            each database.
+            </Body>
+            <DatabaseGrid>
+                {DatabaseData.map((e: any) => (
+                    <Link to={e.url}>
+                    <div className="entry light">
+                        <img src={`/img/technologies/${e.icon}.svg`} {...{style: {
+                          height: `100%`,
+                          width: e.icon === "sqlite" ? `55px` : `auto`,
+                          marginRight: e.icon === "sqlite" ? `-30px` : 0,
+                        }}}/>
+                        <span>{e.title}</span>
+                    </div>
+                    </Link>
+                ))}
+            </DatabaseGrid>
+        </DatabasesSection>
+    )
+}
\ No newline at end of file
diff --git a/src/components/HomepageFeatures/ORMCards.tsx b/src/components/HomepageFeatures/ORMCards.tsx
new file mode 100644
index 0000000000..1a836b8596
--- /dev/null
+++ b/src/components/HomepageFeatures/ORMCards.tsx
@@ -0,0 +1,161 @@
+import styled from "styled-components"
+import { ProductCard } from "./ProductCards"
+import Link from "@docusaurus/Link"
+
+const CardLinks = {
+  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',
+    },
+  ],
+}
+
+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;
+`
+
+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;
+  }
+`
+
+const ORMCardsSection = styled.div`
+  max-width: 1262px;
+  margin: 0 auto;
+  padding: 40px 11px;
+`
+
+const ORMCardsWrapper = styled.div`
+  gap: 40px;
+  display: flex;
+  flex-direction: column;
+  @media (min-width: 768px) {
+    flex-direction: row;
+  }
+`
+
+const ORMProductCard = styled(ProductCard)`
+  padding: 40px;
+  background: var(--orm-card-bg);
+  grid-template-rows: auto auto 1fr;
+  ${H4} {
+    margin-bottom: 8px;
+  }
+  > 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 */
+  }
+  ${LinkGrid} {
+    gap: 12px;
+    a {
+      min-width: calc(50% - 8px);
+      width: fit-content;
+      white-space: nowrap;
+    }
+  }
+`
+export default function ORMCards(): JSX.Element {
+    return (
+        <ORMCardsSection>
+            <ORMCardsWrapper>
+                <ORMProductCard color="indigo" style={{ padding: '40px' }}>
+                    <H4>Components</H4>
+                    <p>
+                    Open source Node.js and TypeScript ORM with an intuitive data model, automated
+                    migrations, type-safety, and auto-completion.
+                    </p>
+                    <div>
+                    <LinkGrid>
+                        {CardLinks.components.map((card: any) => (
+                        <Link to={card.url}>{card.title} &#8594;</Link>
+                        ))}
+                    </LinkGrid>
+                    </div>
+                </ORMProductCard>
+
+                <ORMProductCard color="indigo" style={{ padding: '40px' }}>
+                    <H4>Reference</H4>
+                    <p>
+                    Open source Node.js and TypeScript ORM with an intuitive data model, automated
+                    migrations, type-safety, and auto-completion.
+                    </p>
+                    <div>
+                    <LinkGrid>
+                        {CardLinks.reference.map((card: any) => (
+                        <Link to={card.url}>{card.title} &#8594;</Link>
+                        ))}
+                    </LinkGrid>
+                    </div>
+                </ORMProductCard>
+            </ORMCardsWrapper>
+        </ORMCardsSection>
+    )
+}
\ No newline at end of file
diff --git a/src/components/HomepageFeatures/PrismaORM.tsx b/src/components/HomepageFeatures/PrismaORM.tsx
new file mode 100644
index 0000000000..44822d9e28
--- /dev/null
+++ b/src/components/HomepageFeatures/PrismaORM.tsx
@@ -0,0 +1,145 @@
+import Link from "@docusaurus/Link"
+import styled from "styled-components"
+import { Icon } from "../Icon"
+
+const GeneralLinkData = [
+  {
+    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',
+  },
+]
+
+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);
+`
+
+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;
+`
+const PrismaORMSectionWrapper = styled.div`
+  max-width: 1272px;
+  margin: 0 auto;
+  padding: 60px 16px 24px;
+  h4 {
+    color: var(--main-font-color);
+    margin-bottom: 40px;
+  }
+`
+const ORMLinkContainer = styled.div`
+  display: grid;
+  gap: 40px;
+  grid-template-columns: 100%;
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+`
+
+const ORMLinkWrapper = styled(Link)`
+  display: flex !important;
+  gap: 24px;
+  text-decoration: none;
+
+  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';
+    > span {
+      font-family: 'Inter';
+    }
+  }
+  > div:last-of-type {
+    display: inline-block;
+  }
+  ${IconWrapper} {
+    background: var(--icon-wrapper-bg);
+  }
+  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 */
+  }
+  &:hover h5 {
+    text-decoration: underline;
+  }
+`
+
+export default function PrismaORM(): JSX.Element {
+    return (
+      <PrismaORMSectionWrapper>
+        <H4>Prisma ORM</H4>
+        <ORMLinkContainer>
+          {GeneralLinkData.map((generalLink: any, index: number) => (
+            <ORMLinkWrapper key={index} to={generalLink.url}>
+              <IconWrapper>
+                <Icon icon={generalLink.icon} color="inherit" size="22px" className="light" />
+              </IconWrapper>
+              <div>
+                <h5>
+                  {generalLink.title} <span>&#8594;</span>
+                </h5>
+                <p>{generalLink.description}</p>
+              </div>
+            </ORMLinkWrapper>
+          ))}
+        </ORMLinkContainer>
+      </PrismaORMSectionWrapper>
+    )
+}
\ No newline at end of file
diff --git a/src/components/HomepageFeatures/ProductCards.tsx b/src/components/HomepageFeatures/ProductCards.tsx
new file mode 100644
index 0000000000..0f60be6259
--- /dev/null
+++ b/src/components/HomepageFeatures/ProductCards.tsx
@@ -0,0 +1,166 @@
+import Link from "@docusaurus/Link";
+import styled from "styled-components";
+import { Icon } from "../Icon";
+
+const ORMPlatformLinkData = {
+  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',
+      },
+    ],
+  },
+}
+
+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;
+  }
+`
+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);
+`
+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%;
+`
+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;
+}
+`
+const ProductCardsWrapper = styled.div`
+  max-width: 1240px;
+  width: 100%;
+  gap: 40px;
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+`
+export const ProductCard = styled.div<{ color?: string }>`
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  padding: 32px;
+  width: 100%;
+  border-radius: 8px;
+  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);
+  a,
+  button {
+    color: var(--${(props) => (props.color === 'teal' ? 'teal' : 'indigo')}-link-color);
+  }
+  @media (min-width: 768px) {
+    width: calc(50% - 20px);
+  }
+  ${H3} {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin: 0 0 24px 0;
+  }
+  ${Body} {
+    margin-bottom: 16px;
+  }
+  ${IconWrapper} {
+    background: ${(props) => (props.color === 'teal' ? '#16A394' : '#5A67D8')};
+  }
+`
+
+export default function ProductCards(): JSX.Element {
+    return (
+        <ProductCardsWrapper>
+        {Object.keys(ORMPlatformLinkData).map((e: string) => (
+          <ProductCard color={e === 'porm' ? 'indigo' : 'teal'}>
+            <H3>
+              <IconWrapper>
+                <Icon
+                  icon={`fa-solid fa-${ORMPlatformLinkData[e].icon}`}
+                  size="22px"
+                  color="white"
+                />
+              </IconWrapper>
+              {ORMPlatformLinkData[e].title}
+            </H3>
+            <Body>{ORMPlatformLinkData[e].description}</Body>
+            <LinkGrid>
+              {ORMPlatformLinkData[e].links.map((e: any) => (
+                <Link to={e.url}>
+                  {e.title} {e.external ? <>&#8599;</> : <>&#8594;</>}
+                </Link>
+              ))}
+            </LinkGrid>
+          </ProductCard>
+        ))}
+        </ProductCardsWrapper>
+    );
+  }
+
+
diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
deleted file mode 100644
index 50a9e6f4c7..0000000000
--- a/src/components/HomepageFeatures/index.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import clsx from 'clsx';
-import Heading from '@theme/Heading';
-import styles from './styles.module.css';
-
-type FeatureItem = {
-  title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
-  description: JSX.Element;
-};
-
-const FeatureList: FeatureItem[] = [
-  {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-    description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
-      </>
-    ),
-  },
-  {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
-    description: (
-      <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
-      </>
-    ),
-  },
-  {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
-    description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
-      </>
-    ),
-  },
-];
-
-function Feature({title, Svg, description}: FeatureItem) {
-  return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <Heading as="h3">{title}</Heading>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
-}
-
-export default function HomepageFeatures(): JSX.Element {
-  return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
deleted file mode 100644
index b248eb2e5d..0000000000
--- a/src/components/HomepageFeatures/styles.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
-}
-
-.featureSvg {
-  height: 200px;
-  width: 200px;
-}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2c054f26b7..c76d1af4b6 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,14 +1,14 @@
-import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 
 import styled from 'styled-components';
-import * as theme from "../css/primitives"
-import siteConfigData from "../../config"
-import { Icon } from '../components/Icon';
-import ShadowCard from '../components/shadow-card';
+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';
 
-const IconWrapper = styled.div`
+export const IconWrapper = styled.div`
 width: 64px;
 height: 64px;
 flex-shrink: 0;
@@ -19,7 +19,7 @@ justify-content: center;
 color: var(--icon-svg-color);
 `
 
-const H4 = styled.h4`
+export const H4 = styled.h4`
   font-family: 'Barlow';
   margin: 0;
   font-size: 24px;
@@ -58,49 +58,8 @@ const TopSection = styled.div`
   gap: 40px;
   background: var(--homepage-header-bg);
 `
-const ProductCardsWrapper = styled.div`
-  max-width: 1240px;
-  width: 100%;
-  gap: 40px;
-  margin: 0 auto;
-  display: flex;
-  flex-wrap: wrap;
-`
 
-const ProductCard = styled.div<{ color?: string }>`
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  padding: 32px;
-  width: 100%;
-  border-radius: 8px;
-  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);
-  a,
-  button {
-    color: var(--${(props) => (props.color === 'teal' ? 'teal' : 'indigo')}-link-color);
-  }
-  @media (min-width: 768px) {
-    width: calc(50% - 20px);
-  }
-  ${H3} {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    margin: 0 0 24px 0;
-  }
-  ${Body} {
-    margin-bottom: 16px;
-  }
-  ${IconWrapper} {
-    background: ${(props) => (props.color === 'teal' ? '#16A394' : '#5A67D8')};
-  }
-`
-
-const LinkGrid = styled.div`
+export const LinkGrid = styled.div`
   display: flex;
   max-width: 338px;
   gap: 16px;
@@ -127,457 +86,21 @@ const LinkGrid = styled.div`
   }
 `
 
-const PrismaORMSection = styled.div`
-  max-width: 1272px;
-  margin: 0 auto;
-  padding: 60px 16px 24px;
-  h4 {
-    color: var(--main-font-color);
-    margin-bottom: 40px;
-  }
-`
-const ORMLinkContainer = styled.div`
-  display: grid;
-  gap: 40px;
-  grid-template-columns: 100%;
-  @media (min-width: 768px) {
-    grid-template-columns: 1fr 1fr;
-  }
-`
-
-const ORMLinkWrapper = styled(Link)`
-  display: flex !important;
-  gap: 24px;
-  text-decoration: none;
-
-  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';
-    > span {
-      font-family: 'Inter';
-    }
-  }
-  > div:last-of-type {
-    display: inline-block;
-  }
-  ${IconWrapper} {
-    background: var(--icon-wrapper-bg);
-  }
-  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 */
-  }
-  &:hover h5 {
-    text-decoration: underline;
-  }
-`
-
-const ORMCardsSection = styled.div`
-  max-width: 1262px;
-  margin: 0 auto;
-  padding: 40px 11px;
-`
-
-const ORMCardsWrapper = styled.div`
-  gap: 40px;
-  display: flex;
-  flex-direction: column;
-  @media (min-width: 768px) {
-    flex-direction: row;
-  }
-`
-
-const ORMProductCard = styled(ProductCard)`
-  padding: 40px;
-  background: var(--orm-card-bg);
-  grid-template-rows: auto auto 1fr;
-  ${H4} {
-    margin-bottom: 8px;
-  }
-  > 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 */
-  }
-  ${LinkGrid} {
-    gap: 12px;
-    a {
-      min-width: calc(50% - 8px);
-      width: fit-content;
-      white-space: nowrap;
-    }
-  }
-`
-const DatabasesSection = styled.div`
-  max-width: 1272px;
-  margin: 0 auto;
-  padding: 40px 16px;
-  @media (min-width: 768px) {
-    padding: 24px 16px 108px;
-  }
-  ${H4} {
-    margin-bottom: 24px;
-  }
-  ${Body} {
-    color: var(--secondary-font-color);
-    margin-bottom: 40px;
-  }
-`
-
-const DatabaseGrid = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  gap: 24px;
-  @media only screen and (min-width: 1024px) {
-    display: grid;
-    column-gap: 44px;
-    grid-template-columns: repeat(4, 1fr);
-  }
-  @media (min-width: 940px) and (max-width: 1024px) {
-    display: grid;
-    column-gap: 44px;
-    grid-template-columns: repeat(3, 1fr);
-  }
-  a {
-    text-decoration: none;
-    color: unset;
-  }
-  .entry {
-    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;
-    &::after {
-      content: '';
-      position: absolute;
-      border-radius: 8px;
-      inset: 0;
-      border: 1px solid var(--grid-border-color);
-      background-color: transparent;
-      cursor: pointer;
-    }
-
-    &:hover {
-      background-color: var(--main-bgd-color);
-      &::after {
-        border: 2px solid #5a67d8;
-      }
-    }
-    @media only screen and (min-width: 940px) {
-      padding: 0 24px;
-    }
-    img {
-      max-height: 36px;
-      margin: auto 0;
-    }
-    span {
-      color: var(--main-font-color);
-      text-transform: capitalize;
-      font-family: 'Inter';
-      font-weight: 600;
-      font-size: 24px;
-      line-height: 1;
-    }
-  }
-`
-
-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',
-  },
-]
-
-const CommunitySection = styled.div`
-  background: var(--community-bgd-color);
-  > div {
-    padding: 80px 16px;
-    margin: 0 auto;
-    max-width: 1272px;
-    text-align: left;
-    a {
-      text-decoration: none;
-    }
-    .section-hero {
-      ${H3} {
-        margin-top: 0;
-        margin-bottom: 24px;
-        color: var(--primary-font-color);
-      }
-      p {
-        color: var(--secondary-font-color);
-        margin-bottom: 60px;
-        margin-top: 0;
-      }
-    }
-
-    .community-link-wrapper {
-      display: grid;
-      gap: 16px;
-      text-align: left;
-      grid-template-columns: 24px 1fr;
-      height: 100%;
-      text-decoration: none;
-      > div {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        gap: 16px;
-      }
-      h4 {
-        margin-bottom: 6px;
-        margin-top: 0;
-        line-height: 110%;
-        font-size: 24px;
-        font-weight: 700;
-        font-family: 'Barlow';
-        color: var(--primary-font-color);
-      }
-      ${Body} {
-        color: var(--secondary-font-color);
-        margin: 0;
-      }
-      .link {
-        color: var(--indigo-link-color);
-        font-family: 'Inter';
-        font-size: 18px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 88%; /* 15.84px */
-      }
-    }
-  }
-`
-
-const CommunityLinksRow = styled.div`
-  display: grid;
-  gap: 24px;
-  grid-template-rows: repeat(3, minmax(0, 1fr));
-  @media only screen and (min-width: 768px) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    grid-template-rows: none;
-  }
-  @media only screen and (min-width: 940px) {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    grid-template-rows: none;
-  }
-  i {
-    margin-top: 4px;
-  } 
-`
 
 export default function Home(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
-  const { ORMPlatformLinkData, GeneralLinkData, CardLinks, CommunityLinksData } = siteConfigData.homepage
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
       description="Description will go into a meta tag in <head />">
       <main>
         <TopSection>
-          <ProductCardsWrapper>
-            {Object.keys(ORMPlatformLinkData).map((e: string) => (
-              <ProductCard color={e === 'porm' ? 'indigo' : 'teal'}>
-                <H3>
-                  <IconWrapper>
-                    <Icon
-                      icon={`fa-solid fa-${ORMPlatformLinkData[e].icon}`}
-                      size="22px"
-                      color="white"
-                    />
-                  </IconWrapper>
-                  {ORMPlatformLinkData[e].title}
-                </H3>
-                <Body>{ORMPlatformLinkData[e].description}</Body>
-                <LinkGrid>
-                  {ORMPlatformLinkData[e].links.map((e: any) => (
-                    <Link to={e.url}>
-                      {e.title} {e.external ? <>&#8599;</> : <>&#8594;</>}
-                    </Link>
-                  ))}
-                </LinkGrid>
-              </ProductCard>
-            ))}
-          </ProductCardsWrapper>
+          <ProductCards />
         </TopSection>
-        <PrismaORMSection>
-          <H4>Prisma ORM</H4>
-          <ORMLinkContainer>
-            {GeneralLinkData.map((generalLink: any, index: number) => (
-              <ORMLinkWrapper key={index} to={generalLink.url}>
-                <IconWrapper>
-                  <Icon icon={generalLink.icon} color="inherit" size="22px" className="light" />
-                </IconWrapper>
-                <div>
-                  <h5>
-                    {generalLink.title} <span>&#8594;</span>
-                  </h5>
-                  <p>{generalLink.description}</p>
-                </div>
-              </ORMLinkWrapper>
-            ))}
-          </ORMLinkContainer>
-        </PrismaORMSection>
-        <ORMCardsSection>
-          <ORMCardsWrapper>
-            <ORMProductCard color="indigo" style={{ padding: '40px' }}>
-              <H4>Components</H4>
-              <p>
-                Open source Node.js and TypeScript ORM with an intuitive data model, automated
-                migrations, type-safety, and auto-completion.
-              </p>
-              <div>
-                <LinkGrid>
-                  {CardLinks.components.map((card: any) => (
-                    <Link to={card.url}>{card.title} &#8594;</Link>
-                  ))}
-                </LinkGrid>
-              </div>
-            </ORMProductCard>
-
-            <ORMProductCard color="indigo" style={{ padding: '40px' }}>
-              <H4>Reference</H4>
-              <p>
-                Open source Node.js and TypeScript ORM with an intuitive data model, automated
-                migrations, type-safety, and auto-completion.
-              </p>
-              <div>
-                <LinkGrid>
-                  {CardLinks.reference.map((card: any) => (
-                    <Link to={card.url}>{card.title} &#8594;</Link>
-                  ))}
-                </LinkGrid>
-              </div>
-            </ORMProductCard>
-          </ORMCardsWrapper>
-        </ORMCardsSection>
-        <DatabasesSection>
-          <H4>Databases</H4>
-          <Body>
-            Prisma ORM works seamlessly across most popular databases and service providers. <br /> Refer
-            to our Database features matrix for information about supported features and types for
-            each database.
-          </Body>
-          <DatabaseGrid>
-            {DatabaseData.map((e: any) => (
-              <Link to={e.url}>
-                <div className="entry light">
-                  <img src={`/img/technologies/${e.icon}.svg`} {...{style: {
-                    height: `100%`,
-                    width: e.icon === "sqlite" ? `55px` : `auto`,
-                    marginRight: e.icon === "sqlite" ? `-30px` : 0,
-                  }}}/>
-                  <span>{e.title}</span>
-                </div>
-              </Link>
-            ))}
-          </DatabaseGrid>
-        </DatabasesSection>
-      <CommunitySection>
-        <div>
-          <div className="section-hero">
-            <H3>Join our Community</H3>
-            <p>
-              We have multiple channels where you can get help from members of our community as well
-              as the Prisma team.
-            </p>
-          </div>
-          <CommunityLinksRow>
-            {CommunityLinksData.map((comm: any) => (
-              <ShadowCard key={comm.id}>
-                <a
-                  className="community-link-wrapper content"
-                  href={comm.link}
-                  rel="noreferrer"
-                  target="_blank"
-                >
-                  <Icon icon={comm.icon} color={theme.colors.indigo[600]} size="22px" />
-                  <div>
-                    <div>
-                      <h4>{comm.title}</h4>
-                      <Body>{comm.description}</Body>
-                    </div>
-                    <div className="link">
-                      <span>{comm.linkText}</span>
-                      <span> &#8599;</span>
-                    </div>
-                  </div>
-                </a>
-              </ShadowCard>
-            ))}
-          </CommunityLinksRow>
-        </div>
-      </CommunitySection>
-        {/* <HomepageFeatures /> */}
+        <PrismaORM />
+        <ORMCards />
+        <Databases />
+        <Community />
       </main>
     </Layout>
   );