From b26dfc85df13d9dd707fb67101d07e44bfeaa9e6 Mon Sep 17 00:00:00 2001
From: carlagn <goncalves@prisma.io>
Date: Fri, 24 May 2024 15:29:41 +0200
Subject: [PATCH] feat: WEB-408 Update getting-started index (#6029)

* Update getting-started landing

* update examples link

* Update getting started index

* final copy edits

* revert custom

---------

Co-authored-by: Julie M <70962362+meletj@users.noreply.github.com>
---
 content/100-getting-started/index.mdx | 32 ++++++++++++++++++++-------
 src/css/all.css                       |  2 +-
 src/css/custom.css                    |  2 +-
 src/css/gettingStarted.module.scss    |  2 +-
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/content/100-getting-started/index.mdx b/content/100-getting-started/index.mdx
index 9e22b4048b..e68c7301ca 100644
--- a/content/100-getting-started/index.mdx
+++ b/content/100-getting-started/index.mdx
@@ -33,9 +33,9 @@ Explore our products that make it easy to build and scale data-driven applicatio
 
 [**<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.
 
-[**<Bolt />Prisma Accelerate**](/accelerate/what-is-accelerate) is a global database cache with scalable connection pooling.
+[**<Bolt />Prisma Accelerate**](/accelerate/what-is-accelerate) is a global database cache with scalable connection pooling to make your queries fast.
 
-[**<SignalStream />Prisma Pulse**](/pulse/what-is-pulse) allows you to build reactive, real-time applications in a type-safe manner.
+[**<SignalStream />Prisma Pulse**](/pulse/what-is-pulse) allows you to react to database changes with type-safe model subscriptions.
 
 </BorderBox>
 
@@ -93,11 +93,12 @@ _Select one of these options if you want to connect Prisma ORM to your own datab
       <SquareLogo
         url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-planetscale"
         image={'/img/technologies/planetscale.svg'}
+        imageDark={'/img/technologies/planetscaledark.svg'}
         tech="PlanetScale"
       />
       <SquareLogo
         url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-cockroachdb"
-        image={'/img/technologies/cockroachdbgradient.svg'}
+        image={'/img/technologies/cockroachdbdark.svg'}
         tech="Cockroach DB"
       />
       <SquareLogo
@@ -130,12 +131,13 @@ _Select one of these options if you want to connect Prisma ORM to your own datab
       />
       <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/cockroachdbgradient.svg'}
+        image={'/img/technologies/cockroachdbdark.svg'}
         tech="Cockroach DB"
       />
       <SquareLogo
@@ -149,7 +151,7 @@ _Select one of these options if you want to connect Prisma ORM to your own datab
 
 ## <Bolt color="#16A394" width="21" height="24" /> Prisma Accelerate
 
-Make your app faster by scaling your database connections and caching database results at the edge with Prisma Accelerate.
+Make your database queries faster by scaling your database connections and caching database results at the edge with Prisma Accelerate.
 
 <Grid>
   <LinkCard
@@ -160,11 +162,19 @@ Make your app faster by scaling your database connections and caching database r
   />
   <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/"
-  />
-</Grid>
+/>
 
 ## <SignalStream color="#16A394" width="27" height="24" /> Prisma Pulse
 
@@ -174,7 +184,13 @@ Build real-time applications by subscribing to data changes in your database usi
   <LinkCard
     icon="fa-solid fa-arrow-right"
     title="Get started"
-    desc="Add Pulse to your app to subscribe to real-time updates from your database."
+    desc="Add Pulse to your app to react to database changes with type-safe model subscriptions."
     link="/pulse/getting-started"
   />
+  <LinkCard
+    icon="fa-brands fa-github"
+    title="Examples"
+    desc="Explore our ready-to-run examples using Pulse."
+    link="https://github.com/prisma/prisma-examples?tab=readme-ov-file#prisma-pulse"
+  />
 </Grid>
diff --git a/src/css/all.css b/src/css/all.css
index a552f676da..293ad9f1e9 100644
--- a/src/css/all.css
+++ b/src/css/all.css
@@ -972,7 +972,7 @@
   font-weight: 400;
 }
 
-:root,
+:root, 
 :host {
   --fa-style-family-brands: "Font Awesome 6 Brands";
   --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
diff --git a/src/css/custom.css b/src/css/custom.css
index 9a3b9122e6..7813e8c708 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -42,7 +42,7 @@ main {
   }
   main {
     padding-left: 32px;
-    padding-top: 0;
+    padding-top: 0 ;
   }
 }
 .theme-back-to-top-button {
diff --git a/src/css/gettingStarted.module.scss b/src/css/gettingStarted.module.scss
index 20c3928de3..ecf3660b99 100644
--- a/src/css/gettingStarted.module.scss
+++ b/src/css/gettingStarted.module.scss
@@ -202,4 +202,4 @@
     justify-content: flex-start;
     flex-wrap: wrap;
   }
-}
\ No newline at end of file
+}