fix: content changes for getting started page

Author: ankur-arch

content/100-getting-started/index.mdx

@@ -3,7 +3,6 @@ title: 'Get Started'
 metaTitle: 'Get started with Prisma'
 metaDescription: 'Build data-driven applications with ease using Prisma ORM, add connection pooling or global caching with Prisma Accelerate.'
 hide_title: true
-tocDepth: 1
 sidebar_position: 0
 sidebar_class_name: firstTitle
 pagination_next: 'getting-started/quickstart-sqlite'
@@ -21,79 +20,52 @@ import {
   SignalStream,
   PrismaPostgres,
   SquareLogo,
+  QuickstartLinkCard
 } from '@site/src/components/GettingStarted';
 
 
+<BoxTitle>Getting started</BoxTitle>
 
-<BorderBox>
-
-<BoxTitle>Get started</BoxTitle>
+<List>
 
-Welcome 👋
+<BorderBox>
 
-Explore our products that make it easy to build and scale data-driven applications:
+[**Prisma ORM**](/orm/overview/introduction/what-is-prisma) is an open-source ORM that provides fast, type-safe access to Postgres, MySQL, SQLite, and more databases, and runs smoothly across Node.js, Bun, and Deno.
 
-[**<Database />Prisma ORM**](/orm/overview/introduction/what-is-prisma) is a next-generation Node.js and TypeScript ORM that unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.
+```terminal
+npx prisma init --db
+```
+</BorderBox >
+      
 
-[**<PrismaPostgres />Prisma Postgres**](/postgres) is a managed PostgreSQL service that gives you an _always-on_ database with _pay-as-you-go_ pricing.
+<BorderBox>
 
-[**<Inspect />Prisma Optimize**](/optimize/) helps you analyze queries, generate insights, and provides recommendations to make your database queries faster.
+[**Prisma Postgres**](/postgres) is our managed PostgreSQL service with automatic scaling, AI integrations, and a simple API and GUI for database management.
 
-[**<Bolt />Prisma Accelerate**](/accelerate) is a global database cache with scalable connection pooling to make your queries fast.
+```terminal
+npx create-db
+```
+</BorderBox >
+      
+</List>
 
-</BorderBox>
+<br/>
 
+<QuickstartLinkCard
+    title="Quickstart →"
+    highlight="#16A394"
+    link="/getting-started/quickstart-prismaPostgres"
+>
 
-## <Database color="#5A67D8" width="21" height="24" /> Prisma ORM
+The fastest way to set up **Prisma ORM** with a ready-to-use **Prisma Postgres** database.
 
-Add Prisma ORM to your application in a few minutes to start modeling your data, run schema migrations and query your database.
+</QuickstartLinkCard>
 
-### The easiest way to get started with Prisma
+## <PrismaPostgres color="#16A394" width="21" height="24" /> Already have your own database?
 
-_Explore all Prisma products at once._
+The fastest way to set Prisma ORM up with a ready-to-use database.
 
-  <LinkCard
-    icon="fa-solid fa-rabbit-running"
-    title="Prisma Starter Template"
-    desc="Create a new database, model your data, run migrations, and send queries in this comprehensive 5 minute tutorial."
-    link="/getting-started/quickstart-prismaPostgres"
-  />
-
-### Explore quickly with a SQLite database
-
-_These options don't require you to have your own database running._
-
-<Grid>
-  <LinkCard
-    icon="fa-solid fa-rabbit-running"
-    title="Quickstart"
-    desc="Set up Prisma ORM from scratch with a SQLite database in 5 minutes."
-    link="/getting-started/quickstart-sqlite"
-  />
-  <LinkCard
-    icon="fa-brands fa-github"
-    title="Examples"
-    desc="Explore our ready-to-run examples with your favorite frameworks and libraries."
-    link="https://github.com/prisma/prisma-examples/"
-  />
-</Grid>
-
-### Choose an option to get started with your own database
-
-_Select one of these options if you want to connect Prisma ORM to your own database._
-
-<TabbedContent>
-  <TabItem value="New database">
-    <p>
-      Set up Prisma ORM <b>from scratch</b> with your favorite database and
-      learn basic workflows like data modeling, querying, and migrations.
-    </p>
-    <List>
-      <SquareLogo
-        url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-prismaPostgres"
-        image={'/img/technologies/prismaPostgres.svg'}
-        tech="Prisma Postgres"
-      />
+<List>
       <SquareLogo
         url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-postgresql"
         image={'/img/technologies/postgresqlsimple.svg'}
@@ -125,91 +97,5 @@ _Select one of these options if you want to connect Prisma ORM to your own datab
         image={'/img/technologies/mongodbsimple.svg'}
         tech="Mongo DB"
       />
-    </List>
-  </TabItem>
-  <TabItem value="Existing database">
-    <p>
-      Get started with Prisma ORM and your <b>existing database</b> by
-      introspecting your database schema and learn how to query your database.
-    </p>
-    <List>
-      <SquareLogo
-        url="/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-postgresql"
-        image={'/img/technologies/postgresqlsimple.svg'}
-        tech="Postgres SQL"
-      />
-      <SquareLogo
-        url="/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-mysql"
-        image={'/img/technologies/mysqlsimple.svg'}
-        tech="MySQL"
-      />
-      <SquareLogo
-        url="/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-sqlserver"
-        image={'/img/technologies/sqlserver.svg'}
-        tech="SQL Server"
-      />
-      <SquareLogo
-        url="/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-planetscale"
-        imageDark={'/img/technologies/planetscaledark.svg'}
-        image={'/img/technologies/planetscale.svg'}
-        tech="PlanetScale"
-      />
-      <SquareLogo
-        url="/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-cockroachdb"
-        image={'/img/technologies/cockroachdbdark.svg'}
-        tech="Cockroach DB"
-      />
-      <SquareLogo
-        url="/getting-started/setup-prisma/add-to-existing-project/mongodb-typescript-mongodb"
-        image={'/img/technologies/mongodbsimple.svg'}
-        tech="Mongo DB"
-      />
-    </List>
-  </TabItem>
-</TabbedContent>
-
-## <Bolt color="#16A394" width="21" height="24" /> Prisma Accelerate
-
-Make your database queries faster by scaling your database connections and caching database results at the edge with Prisma Accelerate.
-
-<Grid>
-  <LinkCard
-    icon="fa-solid fa-arrow-right"
-    title="Get started"
-    desc="Add Accelerate to your app to use global database caching & connection pooling."
-    link="/accelerate/getting-started"
-  />
-  <LinkCard
-    icon="fa-brands fa-github"
-    title="Examples"
-    desc="Explore our ready-to-run examples using Accelerate."
-    link="https://github.com/prisma/prisma-examples?tab=readme-ov-file#prisma-accelerate"
-  />
-</Grid>
-<br/>
-<LinkCard
-    highlight
-    icon="fa-solid fa-bolt"
-    title="Speed Test"
-    desc="Run the speed test to see how Prisma Accelerate can make your app faster."
-    link="https://accelerate-speed-test.prisma.io/"
-/>
-
-## <Inspect color="#16A394" width="27" height="24" /> Prisma Optimize
-
-Make your database queries faster by using the insights and recommendations generated by Prisma Optimize.
-
-<Grid>
-  <LinkCard
-    icon="fa-solid fa-arrow-right"
-    title="Get started"
-    desc="Add Optimize to your app to gather useful insights and receive recommendations to improve query performance."
-    link="/optimize/getting-started"
-  />
-  <LinkCard
-    icon="fa-brands fa-github"
-    title="Examples"
-    desc="Explore our ready-to-run examples using Prisma Optimize."
-    link="https://github.com/prisma/prisma-examples?tab=readme-ov-file#prisma-optimize"
-  />
-</Grid>
+</List>
+

src/components/GettingStarted/index.tsx

@@ -106,7 +106,7 @@ export const Grid = ({ children, ...props }) => (
   </div>
 );
 
-export const LinkCard = ({ icon, title, desc, link, highlight }: any) => {
+export const LinkCard = ({ icon, title, desc, link, highlight, }: any) => {
   const linkCardRef = useRef(null);
   return (
     <Link
@@ -123,6 +123,23 @@ export const LinkCard = ({ icon, title, desc, link, highlight }: any) => {
   );
 };
 
+export const QuickstartLinkCard = ({ icon, title, desc, link, highlight, children }: any) => {
+  const linkCardRef = useRef(null);
+  return (
+    <Link
+      to={link}
+      ref={linkCardRef}
+      className={clsx(styles.linkCardWrapper, highlight && styles.linkCardHighlight)}
+    >
+      <div className={styles.title}>
+        {icon && <Icon icon={icon} btn="left" size="18px" />}
+        <h2>{title}</h2>
+      </div>
+      {children ?? <p>{desc}</p>}
+    </Link>
+  );
+};
+
 export const Tab = ({ children, ...props }) => (
   <div {...props} className={styles.tab}>
     {children}

src/pages/index.tsx

@@ -54,7 +54,7 @@ function HomepageHowDoISection() {
   const hiddenCards = how_do_i.slice(3);
 
   const location = useLocation();
-  
+
   return (
     <div className={styles.howDoISection} ref={howRef}>
       <Heading as="h3" className={styles.h3}>
@@ -72,7 +72,7 @@ function HomepageHowDoISection() {
                 {e.tags.map((tag: any) => <Badge variant="primary" key={tag} color="gray" size="sm" label={tag} />)}
               </div>}
               {e.time && <div className={styles.readTime}>
-                <Icon size="24px" color="var(--gray-500)" icon="fa-regular fa-clock" btn="left"/>
+                <Icon size="24px" color="var(--gray-500)" icon="fa-regular fa-clock" btn="left" />
                 <span>{e.time} min. read</span>
               </div>}
             </div>}
@@ -89,7 +89,7 @@ function HomepageHowDoISection() {
                 {e.tags.map((tag: any) => <Badge variant="primary" key={tag} color="gray" size="sm" label={tag} />)}
               </div>}
               {e.time && <div className={styles.readTime}>
-                <Icon size="24px" color="var(--gray-500)" icon="fa-regular fa-clock" btn="left"/>
+                <Icon size="24px" color="var(--gray-500)" icon="fa-regular fa-clock" btn="left" />
                 <span>{e.time} min. read</span>
               </div>}
             </div>}
@@ -100,7 +100,7 @@ function HomepageHowDoISection() {
         className={clsx(styles.seeMore, seeMore && styles.clicked)}
         onClick={() => {
           setSeeMore(!seeMore)
-          howRef.current.scrollIntoView({behavior: "smooth", offset: 80});
+          howRef.current.scrollIntoView({ behavior: "smooth", offset: 80 });
         }}
       >
         <span>See {seeMore ? `less` : `more`}</span>
@@ -110,7 +110,7 @@ function HomepageHowDoISection() {
   );
 }
 
-const CommunityIcon = ({icon, link, label}: any) => {
+const CommunityIcon = ({ icon, link, label }: any) => {
   const [visibleTooltip, setVisibleTooltip] = useState<boolean>(false);
   const iconRef = useRef(null);
 
@@ -161,41 +161,41 @@ function HomepageCommunitySection() {
   );
 }
 
-const TabBox = ({icon, label, description, list, link}: any) => {
+const TabBox = ({ icon, label, description, list, link }: any) => {
   const location = useLocation();
   return (
     <div>
       <div className={styles.tabBox}>
         <div className={styles.content}>
           <div className={styles.heading}>
-            {icon && <Icon className={styles.leftIcon} btn="left" icon={icon} size='inherit' color='var(--teal-600)' /> }
+            {icon && <Icon className={styles.leftIcon} btn="left" icon={icon} size='inherit' color='var(--teal-600)' />}
             <span>{label}</span>
           </div>
-          <p dangerouslySetInnerHTML={{__html: description}}></p>
+          <p dangerouslySetInnerHTML={{ __html: description }}></p>
           <div className={styles.techGrid}>
-            {list && list.length && list.map((l: any, idx: number) => 
+            {list && list.length && list.map((l: any, idx: number) =>
               <SquareLogo
                 className={styles.heroTabs}
                 url={`${l.url}${location.search}`}
                 image={l.image}
                 tech={l.tech}
-                {... l.imageDark && { imageDark: l.imageDark }}
+                {...l.imageDark && { imageDark: l.imageDark }}
               />
             )}
           </div>
         </div>
       </div>
       <Link to={`${link.url}${location.search}`}>
-        <Icon icon={link.icon} size="inherit" color="inherit" btn="left"/>
+        <Icon icon={link.icon} size="inherit" color="inherit" btn="left" />
         <span>{link.label}</span>
-        <Icon icon={"fa-regular fa-arrow-right"} size="inherit" color="inherit" btn="right"/>
+        <Icon icon={"fa-regular fa-arrow-right"} size="inherit" color="inherit" btn="right" />
       </Link>
     </div>
   )
 }
 
 function HomepageHeroSection() {
-  const { colorMode }  = useColorMode();
+  const { colorMode } = useColorMode();
   return (
     <div className={styles.heroWrapper}>
       <div className={styles.hero}>
@@ -216,7 +216,7 @@ function HomepageHeroSection() {
           label="Start with an AI prompt →" color="teal"
         /> */}
         <div className={styles.tabBoxes}>
-          {tabs && tabs.map((tab: any, idx: number) => 
+          {tabs && tabs.map((tab: any, idx: number) =>
             <TabBox {...tab} key={idx} />
           )}
         </div>
@@ -241,9 +241,9 @@ function HomepageGetHelpSection() {
               <h4>{e.title}</h4>
             </div>
             <div className={styles.content}>
-              <p dangerouslySetInnerHTML={{__html: e.description}}/>
+              <p dangerouslySetInnerHTML={{ __html: e.description }} />
               <div className={styles.links}>
-                {e.links.map((link: any) => 
+                {e.links.map((link: any) =>
                   <a href={`${link.link}${location.search}`} className={styles.link}>
                     <Icon icon={link.icon} size="inherit" btn="left" color="inherit" />
                     <span>{link.label}</span>
@@ -272,7 +272,7 @@ export default function Home(): JSX.Element {
         <HomepageHeroSection />
         <HomepageHowDoISection />
         <HomepageProductCards />
-        <HomepageGetHelpSection /> 
+        <HomepageGetHelpSection />
         <HomepageCommunitySection />
       </main>
     </Layout>