From 141b3fc8508568514e9f3f0534b29bab26542e15 Mon Sep 17 00:00:00 2001
From: Jennifer Hasegawa <5481259+jhaaaa@users.noreply.github.com>
Date: Tue, 10 Sep 2024 14:54:44 -0700
Subject: [PATCH] try new homepage

---
 docs/components/CustomHomePage.tsx            |  77 +++++++++
 docs/pages/{index.md => get-started/intro.md} |   2 +-
 docs/pages/index.mdx                          |  50 ++++++
 docs/styles.css                               | 151 ++++++++++++++++++
 vocs.config.tsx                               |  84 +++++-----
 5 files changed, 317 insertions(+), 47 deletions(-)
 create mode 100644 docs/components/CustomHomePage.tsx
 rename docs/pages/{index.md => get-started/intro.md} (99%)
 create mode 100644 docs/pages/index.mdx

diff --git a/docs/components/CustomHomePage.tsx b/docs/components/CustomHomePage.tsx
new file mode 100644
index 0000000..0e02561
--- /dev/null
+++ b/docs/components/CustomHomePage.tsx
@@ -0,0 +1,77 @@
+import React from 'react'
+
+const Root: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className="custom-homepage">{children}</div>
+);
+
+const Headline: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <h1 className="custom-homepage-headline">
+      {React.Children.map(children, child => {
+        if (React.isValidElement(child) && child.type === 'p') {
+          return React.cloneElement(child, {
+            className: `custom-homepage-headline-text ${child.props.className || ''}`.trim()
+          });
+        }
+        return <span className="custom-homepage-headline-text">{child}</span>;
+      })}
+    </h1>
+  );
+};
+
+const Subhead: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <div className="custom-homepage-subhead">
+      {React.Children.map(children, child => {
+        if (React.isValidElement(child) && child.type === 'p') {
+          return React.cloneElement(child, {
+            className: `custom-homepage-subhead-text ${child.props.className || ''}`.trim()
+          });
+        }
+        return <span className="custom-homepage-subhead-text">{child}</span>;
+      })}
+    </div>
+  );
+};
+
+const TileGrid: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className="custom-homepage-grid">{children}</div>
+);
+
+interface TileProps {
+    href: string;
+    title: string;
+    description: string;
+    icon?: string;
+    isExternal?: boolean;
+  }
+  
+  const ExternalLinkIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="custom-homepage-tile-external-icon">
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+      <polyline points="15 3 21 3 21 9"></polyline>
+      <line x1="10" y1="14" x2="21" y2="3"></line>
+    </svg>
+  );
+  
+  const Tile: React.FC<TileProps> = ({ href, title, description, icon, isExternal }) => (
+    <a 
+      href={href} 
+      className={`custom-homepage-tile ${isExternal ? 'custom-homepage-tile-external' : ''}`}
+      target={isExternal ? "_blank" : undefined}
+      rel={isExternal ? "noopener noreferrer" : undefined}
+    >
+      {icon && <span className="custom-homepage-tile-icon">{icon}</span>}
+      <h2 className="custom-homepage-tile-title">{title}</h2>
+      <p className="custom-homepage-tile-description">{description}</p>
+      {isExternal && <img src="/.vocs/icons/arrow-diagonal.svg" alt="" className="custom-homepage-tile-external-icon" />}
+    </a>
+  );
+  
+export const CustomHomePage = {
+  Root,
+  Headline,
+  Subhead,
+  TileGrid,
+  Tile,
+};
\ No newline at end of file
diff --git a/docs/pages/index.md b/docs/pages/get-started/intro.md
similarity index 99%
rename from docs/pages/index.md
rename to docs/pages/get-started/intro.md
index 35308f3..8c3010e 100644
--- a/docs/pages/index.md
+++ b/docs/pages/get-started/intro.md
@@ -2,7 +2,7 @@
 description: "XMTP is an open protocol, network, and standards for secure, private web3 messaging."
 ---
 
-# Build with XMTP
+# Introduction to XMTP
 
 XMTP (Extensible Message Transport Protocol) is an open protocol, network, and standards for secure, private web3 messaging.
 
diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
new file mode 100644
index 0000000..1aa0055
--- /dev/null
+++ b/docs/pages/index.mdx
@@ -0,0 +1,50 @@
+import { CustomHomePage } from '../components/CustomHomePage'
+
+<CustomHomePage.Root>
+  <CustomHomePage.Headline>
+   Build with XMTP
+  </CustomHomePage.Headline>
+  <CustomHomePage.Subhead>
+     A secure and resilient communications protocol—for the next phase of the internet
+  </CustomHomePage.Subhead>
+  <CustomHomePage.TileGrid>
+    <CustomHomePage.Tile
+      href="/get-started/intro"
+      title="Introduction to XMTP"
+      description="Get a quick intro to XMTP, including FAQ and how try an XMTP app"
+      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
+      href="/consent/subscribe"
+      title="Broadcast notifications"
+      description="Build subscriber lists and broadcast notifications to them"
+      icon="🔔"
+    />
+    <CustomHomePage.Tile
+      href="/get-started/developer-quickstart"
+      title="Build chat inboxes"
+      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="🤖"
+      isExternal={true}
+    />
+    <CustomHomePage.Tile
+      href="/protocol/xmtp-versions"
+      title="Learn protocol concepts"
+      description="Dive deeper into XMTP by learning about key protocol concepts"
+      icon="🧠"
+    />
+  </CustomHomePage.TileGrid>
+</CustomHomePage.Root>
\ No newline at end of file
diff --git a/docs/styles.css b/docs/styles.css
index 9038d68..2495c29 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -1,3 +1,5 @@
+/* Custom code tab styles */
+
 ul.TabbedList {
   display: flex;
   flex-direction: column;
@@ -22,3 +24,152 @@ ul.TabbedList .vocs_Paragraph {
 small + ul.TabbedList {
   margin-top: 1rem;
 }
+
+/* Custom Homepage text styles */
+
+.custom-homepage {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.custom-homepage-headline {
+  margin-bottom: 1rem;
+  text-align: left;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 1.2;
+}
+
+.custom-homepage-headline-text {
+  font-size: 2.5rem;
+  font-weight: bold;
+  display: inline-block;
+}
+
+.custom-homepage-headline * {
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+/* For smaller screens */
+@media (max-width: 768px) {
+  .custom-homepage-headline-text {
+    font-size: 2rem;
+    line-height: 1.3;
+  }
+}
+
+.custom-homepage-subhead {
+  margin-bottom: 1rem;
+  text-align: left;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.custom-homepage-subhead-text {
+  font-size: 1.25rem;
+  line-height: 1.5;
+  display: inline-block;
+}
+
+.custom-homepage-subhead * {
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+/* For smaller screens */
+@media (max-width: 768px) {
+  .custom-homepage-subhead-text {
+    font-size: 1.1rem;
+  }
+}
+
+/* Custom Homepage tiles */
+
+.custom-homepage-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+.custom-homepage-tile {
+  background-color: var(--vocs-color-bg-soft);
+  border: 1px solid var(--vocs-color-border);
+  border-radius: 8px;
+  padding: 1.5rem;
+  text-decoration: none;
+  color: var(--vocs-color-text);
+  transition: all 0.3s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.custom-homepage-tile:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border-color: var(--vocs-color-primary);
+}
+
+.custom-homepage-tile-icon {
+  font-size: 1.5rem;
+  display: block;
+  margin-bottom: 0.75rem;
+}
+
+:root {
+  --tile-external-icon-color: rgba(76, 76, 76, 0.7); /* Default color for light mode */
+}
+
+.dark {
+  --tile-external-icon-color: rgba(207, 207, 207, 0.7); /* Use the text color in dark mode */
+}
+
+.custom-homepage-tile-external-icon {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  opacity: 0.7;
+  transition: opacity 0.3s ease, filter 0.3s ease;
+  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
+}
+
+.dark .custom-homepage-tile-external-icon {
+  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
+}
+
+.custom-homepage-tile:hover .custom-homepage-tile-external-icon {
+  opacity: 1;
+}
+
+.custom-homepage-tile-title {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.custom-homepage-tile-description {
+  font-size: 0.9rem;
+  color: var(--vocs-color-text-soft);
+  line-height: 1.5; /* Added this line to reduce line height */
+  margin: 0; /* Added to remove any default margins */
+}
+
+/* Dark mode adjustments */
+.dark .custom-homepage-tile {
+  background-color: rgba(255, 255, 255, 0.01); /* Slightly lighter than the background */
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 1px 3px rgba(255, 255, 255, 0.05);
+}
+
+.dark .custom-homepage-tile:hover {
+  transform: translateY(-5px);
+  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 b6be750..582e66f 100644
--- a/vocs.config.tsx
+++ b/vocs.config.tsx
@@ -28,10 +28,6 @@ export default defineConfig({
   },
   iconUrl: "/x-mark-blue.png",
   topNav: [
-    {
-      text: "Converse app",
-      link: "https://github.com/ephemeraHQ/converse-app",
-    },
     { text: "XMTP.org", link: "https://xmtp.org/" },
   ],
   ogImageUrl: {
@@ -51,16 +47,12 @@ export default defineConfig({
   ],
   sidebar: [
     {
-      text: "Introduction",
-      collapsed: false,
+      text: "Overview",
+      collapsed: true,
       items: [
         {
           text: "Intro to XMTP",
-          link: "/",
-        },
-        {
-          text: "ETHOnline 2024",
-          link: "/get-started/awesome",
+          link: "/get-started/intro",
         },
         {
           text: "FAQ",
@@ -69,8 +61,8 @@ export default defineConfig({
       ],
     },
     {
-      text: "Integrate messaging",
-      collapsed: false,
+      text: "Broadcast notifications",
+      collapsed: true,
       items: [
         {
           text: "Enable subscriptions",
@@ -87,36 +79,8 @@ export default defineConfig({
       ]
     },
     {
-      text: "Build mini-apps",
-      collapsed: false,
-      items: [
-        {
-          text: "Build mini-apps with MessageKit",
-          link: "https://message-kit.vercel.app/",
-        },
-        {
-          text: "Display Open Frames",
-          collapsed: false,
-          items: [
-            {
-              text: "Get started with Open Frames",
-              link: "/open-frames/open-frames",
-            },
-            {
-              text: "Display transactional Open Frames",
-              link: "/open-frames/transactional-open-frames",
-            },
-            {
-              text: "Display subscription Open Frames",
-              link: "/open-frames/subscription-open-frames",
-            },
-          ],
-        },
-      ]
-    },
-    {
-      text: "Build an inbox app",
-      collapsed: false,
+      text: "Build chat inboxes",
+      collapsed: true,
       items: [
         {
           text: "Get started",
@@ -136,7 +100,7 @@ export default defineConfig({
             },
           ],
         },
-    {
+        {
           text: "Create a client",
           link: "/dms/client",
         },
@@ -258,6 +222,24 @@ export default defineConfig({
             },
           ],
         },
+        {
+          text: "Display Open Frames",
+          collapsed: false,
+          items: [
+            {
+              text: "Get started with Open Frames",
+              link: "/open-frames/open-frames",
+            },
+            {
+              text: "Display transactional Open Frames",
+              link: "/open-frames/transactional-open-frames",
+            },
+            {
+              text: "Display subscription Open Frames",
+              link: "/open-frames/subscription-open-frames",
+            },
+          ],
+        },
         {
           text: "Performance & UX",
           collapsed: false,
@@ -295,8 +277,18 @@ export default defineConfig({
       ]
     },
     {
-      text: "Protocol concepts",
-      collapsed: false,
+      text: "Build chat bots",
+      collapsed: true,
+      items: [
+        {
+          text: "Build chat bots with MessageKit",
+          link: "https://message-kit.vercel.app/",
+        },
+      ]
+    },
+    {
+      text: "Learn protocol concepts",
+      collapsed: true,
       items: [
         {
           text: "XMTP versions",