From b21d634e703d71609cd8b7e63e7b35149e3007dd Mon Sep 17 00:00:00 2001
From: Jennifer Hasegawa <5481259+jhaaaa@users.noreply.github.com>
Date: Fri, 13 Sep 2024 18:32:46 -0700
Subject: [PATCH] add floating inbox

---
 docs/pages/chat-widget/chat-widget.md | 12 ++++-----
 docs/pages/get-started/examples.mdx   | 36 ---------------------------
 docs/pages/index.mdx                  | 28 +++++++++++++--------
 docs/styles.css                       |  2 +-
 vocs.config.tsx                       |  9 ++-----
 5 files changed, 26 insertions(+), 61 deletions(-)

diff --git a/docs/pages/chat-widget/chat-widget.md b/docs/pages/chat-widget/chat-widget.md
index 612d7d4..79b84c3 100644
--- a/docs/pages/chat-widget/chat-widget.md
+++ b/docs/pages/chat-widget/chat-widget.md
@@ -1,12 +1,12 @@
 ---
-description: "Embed a "floating inbox" chat widget built with XMTP on your website"
+description: "Embed a floating inbox chat widget built with XMTP on your website"
 ---
 
-# Embed a chat widget built with XMTP on your website
+# Embed a floating inbox chat widget built with XMTP
 
-You can embed a "floating inbox" chat widget built with XMTP on your website. 
+You can embed a "floating inbox" chat widget built with XMTP on your website.
 
-You can use one of these floating inbox quickstart exmaple apps to get started:
+You can use one of these floating inbox quickstart example apps to get started:
 
 - [For JavaScript](https://github.com/xmtp/xmtp-quickstart-reactjs) 
 
@@ -14,6 +14,6 @@ You can use one of these floating inbox quickstart exmaple apps to get started:
 
 - [With Next.js hooks](https://github.com/xmtp/xmtp-quickstart-hooks-next)
 
-For exmaple, here's a screenshot of the floating inbox chat widget built with the JavaScript quickstart app. You can also try out the [JavaScript quickstart app](https://xmtp-quickstart-reactjs.vercel.app/).
+For example, here's a screenshot of the floating inbox chat widget built with the JavaScript quickstart app. You can also try out the [JavaScript quickstart app](https://xmtp-quickstart-reactjs.vercel.app/).
 
-![Screenshot of the floating inbox chat widget](./chat-widget-screenshot.png)
+![Screenshot of the floating inbox chat widget](https://raw.githubusercontent.com/xmtp/docs-xmtp-org/main/docs/pages/img/floating-inbox.png)
diff --git a/docs/pages/get-started/examples.mdx b/docs/pages/get-started/examples.mdx
index bfe504a..58c13c6 100644
--- a/docs/pages/get-started/examples.mdx
+++ b/docs/pages/get-started/examples.mdx
@@ -62,15 +62,6 @@ Here are some quickstarts and example apps to help you get started with building
         A Repl of a full flow for sending and streaming messages in JavaScript
       </small>
     </li>
-    <li>
-      <a
-        className="vocs_Anchor vocs_Link vocs_Link_accent_underlined vocs_ExternalLink plausible-event-name=Quickstart"
-        href="https://github.com/xmtp/xmtp-quickstart-reactjs"
-      >
-        Floating inbox quickstart app
-      </a>
-      <small>Use it to help you build your own app with XMTP.</small>
-    </li>
     <li>
       <a
         className="vocs_Anchor vocs_Link vocs_Link_accent_underlined vocs_ExternalLink plausible-event-name=Quickstart"
@@ -97,33 +88,6 @@ Here are some quickstarts and example apps to help you get started with building
 
 <div data-title="React">
   <ul className="TabbedList">
-    <li>
-      <a
-        className="vocs_Anchor vocs_Link vocs_Link_accent_underlined vocs_ExternalLink plausible-event-name=Quickstart"
-        href="https://github.com/xmtp/xmtp-quickstart-hooks"
-      >
-        Floating inbox quickstart app with React hooks
-      </a>
-      <small>Use it to help you build your own app with XMTP</small>
-    </li>
-    <li>
-      <a
-        className="vocs_Anchor vocs_Link vocs_Link_accent_underlined vocs_ExternalLink plausible-event-name=Quickstart"
-        href="https://github.com/xmtp/xmtp-quickstart-reactjs-next"
-      >
-        Floating inbox quickstart app with Next.js
-      </a>
-      <small>Use it to help you build your own app with XMTP.</small>
-    </li>
-    <li>
-      <a
-        className="vocs_Anchor vocs_Link vocs_Link_accent_underlined vocs_ExternalLink plausible-event-name=Quickstart"
-        href="https://github.com/xmtp/xmtp-quickstart-hooks-next"
-      >
-        Floating inbox quickstart app with Next.js hooks
-      </a>
-      <small>Use it to help you build your own app with XMTP.</small>
-    </li>
     <li>
       <a
         className="vocs_Anchor vocs_Link vocs_Link_accent_underlined vocs_ExternalLink plausible-event-name=Example"
diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
index 1aa0055..56ee52e 100644
--- a/docs/pages/index.mdx
+++ b/docs/pages/index.mdx
@@ -5,7 +5,7 @@ import { CustomHomePage } from '../components/CustomHomePage'
    Build with XMTP
   </CustomHomePage.Headline>
   <CustomHomePage.Subhead>
-     A secure and resilient communications protocol—for the next phase of the internet
+     A secure & resilient communication protocol—for the next phase of the internet
   </CustomHomePage.Subhead>
   <CustomHomePage.TileGrid>
     <CustomHomePage.Tile
@@ -15,12 +15,18 @@ import { CustomHomePage } from '../components/CustomHomePage'
       icon="📚"
     />
     <CustomHomePage.Tile
-      href="https://github.com/ephemeraHQ/converse-app"
-      title="Explore Converse"
-      description="Explore open source code for Converse apps built with XMTP"
-      icon="👩🏽‍💻"
+      href="https://message-kit.vercel.app/"
+      title="Build chat bots"
+      description="Build bots that can send messages in XMTP chats"
+      icon="🤖"
       isExternal={true}
     />
+    <CustomHomePage.Tile
+      href="/chat-widget/chat-widget"
+      title="Embed a floating inbox"
+      description="Embed a floating inbox chat widget on your website"
+      icon="🎈"
+    />
     <CustomHomePage.Tile
       href="/consent/subscribe"
       title="Broadcast notifications"
@@ -33,11 +39,11 @@ import { CustomHomePage } from '../components/CustomHomePage'
       description="Build standalone chat inbox apps for mobile and web"
       icon="📥"
     />
-    <CustomHomePage.Tile
-      href="https://message-kit.vercel.app/"
-      title="Build chat bots"
-      description="Build bots that can send messages in XMTP chats"
-      icon="🤖"
+        <CustomHomePage.Tile
+      href="https://github.com/ephemeraHQ/converse-app"
+      title="Explore Converse"
+      description="Explore open source code for Converse apps built with XMTP"
+      icon="👩🏽‍💻"
       isExternal={true}
     />
     <CustomHomePage.Tile
@@ -47,4 +53,4 @@ import { CustomHomePage } from '../components/CustomHomePage'
       icon="🧠"
     />
   </CustomHomePage.TileGrid>
-</CustomHomePage.Root>
\ No newline at end of file
+</CustomHomePage.Root>
diff --git a/docs/styles.css b/docs/styles.css
index 6a21ccc..2495c29 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -172,4 +172,4 @@ small + ul.TabbedList {
   background-color: rgba(255, 255, 255, 0.01); /* Slightly lighter on hover */
   box-shadow: 0 4px 12px rgba(255, 255, 255, 0.02);
   border-color: var(--vocs-color-primary);
-}
+}
\ No newline at end of file
diff --git a/vocs.config.tsx b/vocs.config.tsx
index 97b3b80..00853ef 100644
--- a/vocs.config.tsx
+++ b/vocs.config.tsx
@@ -67,13 +67,8 @@ export default defineConfig({
     },
     {
       text: "Embed a chat widget",
-      collapsed: true,
-      items: [
-        {
-          text: "Developer quickstart",
-          link: "/get-started/developer-quickstart",
-        },
-      ],
+      link: "/chat-widget/chat-widget",
+      items: [], // Add this line
     },
     {
       text: "Broadcast notifications",