From 564637ff4d47a439d2a032e3564aa74bd852f7b3 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Thu, 18 Aug 2022 08:27:39 -0500
Subject: [PATCH] Update Realtime.tsx

---
 apps/www/pages/realtime/Realtime.tsx | 52 ++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/apps/www/pages/realtime/Realtime.tsx b/apps/www/pages/realtime/Realtime.tsx
index e1781b65f28..15a0075a174 100644
--- a/apps/www/pages/realtime/Realtime.tsx
+++ b/apps/www/pages/realtime/Realtime.tsx
@@ -42,41 +42,63 @@ const exampleApps = [
   {
     img: 'toast-messages.svg',
     title: 'Toast messages',
-    description: 'sadcsdas sad asds dsdas asdas as',
+    description: 'Listen to changes in the database and show users a toast message.',
   },
   {
     img: 'live-avatars.svg',
     title: 'Live avatars',
-    description: 'sadcsdas sad asds dsdas asdas as',
+    description: 'Share the status of users across multiple clients.',
   },
   {
     img: 'live-cursors.svg',
     title: 'Live cursors',
-    description: 'sadcsdas sad asds dsdas asdas as',
+    description: 'Share the position and status of multiple cursors across multiple clients.',
   },
   {
     img: 'leaderboard.svg',
     title: 'Leaderboards',
     description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.',
+      'Listen to changes in your database regarding the scores of your users and display them live.',
   },
   {
     img: 'stock-market.svg',
     title: 'Live charts',
     description:
-      'Keep charts updated in realtime. Supabase can detect changes in your database and then update the client immediately.',
+      'Keep charts updated in relatime by listening to changes in the database rather than polling at intervals.',
+  },
+  {
+    img: 'in-app-chat.svg',
+    title: 'In app chat',
+    description: 'Listen to changes in the database to display up to date text messages.',
   },
-  { img: 'in-app-chat.svg', title: 'In app chat', description: 'sadcsdas sad asds dsdas asdas as' },
   {
     img: 'text-editor.svg',
-    title: 'Shared code editor editor',
-    description: 'sadcsdas sad asds dsdas asdas as',
+    title: 'Shared text editor',
+    description: 'Users can colloborate with text documents or even code editors.',
   },
 
-  { img: 'whiteboard.svg', title: 'Shared whiteboard', description: 'bbb' },
-  { img: 'location.svg', title: 'Location', description: 'bbb' },
-  { img: 'multiplayer-game.svg', title: 'Multiplayer games', description: 'bbb' },
-  { img: 'form-presence.svg', title: 'Form presence', description: 'bbb' },
+  {
+    img: 'whiteboard.svg',
+    title: 'Shared whiteboard',
+    description:
+      'Allow users to collaorate on a shared whiteboard, sharing positions and states of any kind of object in realtime.',
+  },
+  {
+    img: 'location.svg',
+    title: 'Location',
+    description: 'Listen to changes in the database regarding the position of a moving coordinate.',
+  },
+  {
+    img: 'multiplayer-game.svg',
+    title: 'Multiplayer games',
+    description:
+      "Keep track of how long a player has been playing, who's turn it is and even share to other clients what the pllayer is doing.",
+  },
+  {
+    img: 'form-presence.svg',
+    title: 'Form presence',
+    description: 'Display the active selection of different users throughout an interactive form.',
+  },
 ]
 
 function RealtimePage() {
@@ -255,9 +277,9 @@ function RealtimePage() {
                     src={`/images/realtime/example-apps/light/${example.img}`}
                     alt={example.title}
                   />
-                  <div>
-                    <h3 className="text-scale-1200 text-xl">{example.title}</h3>
-                    <p className="text-scale-1100 text-sm">{example.description}</p>
+                  <div className="prose">
+                    <h4 className="">{example.title}</h4>
+                    <p className="text-sm">{example.description}</p>
                   </div>
                 </div>
               )