Move Chat React UI Component getting started guide to own section on index pageg

Author: GregHolmes

src/components/Layout/mdx/tiles.tsx

@@ -32,7 +32,7 @@ const Tile = ({ title, description, image, link = '/docs' }: TileProps) => {
 
 export const Tiles = ({ children }: { children: TileProps[] }) => {
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pb-40">
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
       {children
         .filter((item) => item.title && item.description)
         .map((item: TileProps) => (

src/pages/docs/chat/connect.mdx

@@ -209,3 +209,72 @@ subscription.unsubscribe()
 <If lang="javascript,swift,kotlin">
 The discontinuity handler is accessible via the <If lang="javascript">[Room](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-js.Room.html#onDiscontinuity)</If><If lang="swift">[Room](https://sdk.ably.com/builds/ably/ably-chat-swift/main/AblyChat/documentation/ablychat/room)</If><If lang="kotlin">[Room](https://sdk.ably.com/builds/ably/ably-chat-kotlin/main/dokka/chat-android/com.ably.chat/-room/index.html)</If> object.
 </If>
+
+## Logging <a id="logging"/>
+
+Set the `logHandler` and `logLevel` properties when [instantiating a client](#instantiate) to configure your log handler:
+
+<Code>
+```javascript
+const ably = new Ably.Realtime({ key: '{{API_KEY}}', clientId: '<clientId>'});
+const chatClient = new ChatClient(ably, {logHandler: logWriteFunc, logLevel: 'debug' });
+```
+
+```react
+import * as Ably from 'ably';
+import { LogLevel } from '@ably/chat';
+import { ChatClientProvider } from '@ably/chat/react';
+
+const ably = new Ably.Realtime({ key: '{{API_KEY}}', clientId: '<clientId>'});
+const chatClient = new ChatClient(ably, {logHandler: logWriteFunc, logLevel: 'debug' });
+
+const App = => {
+  return (
+    <ChatClientProvider client={chatClient}>
+      <RestOfYourApp />
+    </ChatClientProvider>
+  );
+};
+```
+
+```swift
+let realtimeOptions = ARTClientOptions()
+realtimeOptions.key = "{{API_KEY}}"
+realtimeOptions.clientId = "<clientId>"
+let realtime = ARTRealtime(options: realtimeOptions)
+let clientOptions = ChatClientOptions(logHandler: SomeLogHandler(), logLevel: .debug)
+return DefaultChatClient(realtime: realtime, clientOptions: clientOptions)
+```
+
+```kotlin
+val realtimeClient = AblyRealtime(
+    ClientOptions().apply {
+        key = "{{API_KEY}}"
+        clientId = "<clientId>"
+    },
+)
+val chatClient = ChatClient(realtimeClient) {
+  logHandler = CustomLogHandler() // Implements com.ably.chat.LogHandler interface
+  logLevel = LogLevel.Debug
+}
+```
+</Code>
+
+<If lang="javascript,react">
+The `logHandler` property is your own function that will be called for each line of log output generated by the Chat SDK.
+</If>
+
+<If lang="swift,kotlin">
+The `logHandler` property is your custom `LogHandler` implementation that will be called for each line of log output generated by the Chat SDK.
+</If>
+
+The `logLevel` sets the verbosity of logs that will be output by the SDK. The following log levels are available to set:
+
+| Level | Description |
+| ----- | ----------- |
+| trace | Something routine and expected has occurred. This level will provide logs for the vast majority of operations and function calls. |
+| debug | Development information, messages that are useful when trying to debug library behavior, but superfluous to normal operation. |
+| info | Informational messages. Operationally significant to the library but not out of the ordinary. |
+| warn | Anything that is not immediately an error, but could cause unexpected behavior in the future. For example, passing an invalid value to an option. Indicates that some action should be taken to prevent future errors. |
+| error | A given operation has failed and cannot be automatically recovered. The error may threaten the continuity of operation. |
+| silent | No logging will be performed. |

src/pages/docs/chat/getting-started/index.mdx

@@ -8,7 +8,9 @@ redirect_from:
 
 Get started with Ably Chat by choosing your language or framework.
 
-You'll learn the basics, such as how to connect to Ably, send and receive messages, and manage the status of users with presence. You'll also be introduced to the Ably CLI and your Ably dashboard to interact with, and manage your apps.
+You'll learn the essentials of building realtime chat applications, including how to create and manage chat rooms, send and edit messages, implement typing indicators, track user presence, retrieve message history, and send ephemeral reactions. You'll also discover how to use the Ably CLI for testing chat functionality and manage your chat applications through your Ably dashboard.
+
+## Getting started guides
 
 These are your first steps towards building a Chat application that can effortlessly scale to serve millions of users.
 
@@ -52,3 +54,18 @@ These are your first steps towards building a Chat application that can effortle
   },
 ]}
 </Tiles>
+
+## React components
+
+Get started with pre-built React components that provide complete chat functionality out-of-the-box, allowing you to quickly integrate chat features into your applications.
+
+<Tiles>
+{[
+  {
+    title: 'React UI components',
+    description: 'Start building Chat applications with Ably\'s React UI Components',
+    image: 'icon-tech-react',
+    link: '/docs/chat/getting-started/react-ui-components'
+  },
+]}
+</Tiles>