Update Decentralizing XMTP product marketing page

src/components/TileGrid/index.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import clsx from 'clsx'
+import styles from './styles.module.css'
+
+function Tile({ icon, title, description }) {
+  return (
+    <div className={styles.tile}>
+      <div className={styles.tileIcon}>
+        {typeof icon === 'string' ? <span className={styles.emoji}>{icon}</span> : icon}
+      </div>
+      <div className={styles.tileContent}>
+        <h3 className={styles.tileTitle}>{title}</h3>
+        <p className={styles.tileDescription}>{description}</p>
+      </div>
+    </div>
+  )
+}
+
+export default function TileGrid({ tiles, columns = 3, className }) {
+  const gridClass = clsx(
+    styles.tileGrid,
+    {
+      [styles.grid2]: columns === 2,
+      [styles.grid3]: columns === 3,
+    },
+    className
+  )
+
+  return (
+    <div className={gridClass}>
+      {tiles.map((tile, idx) => (
+        <Tile key={idx} {...tile} />
+      ))}
+    </div>
+  )
+}
+
+export { Tile }

src/components/TileGrid/styles.module.css

@@ -0,0 +1,87 @@
+.tileGrid {
+  display: grid;
+  gap: 1rem;
+  margin: 1rem 0 2rem 0;
+  width: 100%;
+}
+
+.grid2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* Responsive behavior */
+@media (max-width: 996px) {
+  .grid3 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .grid2,
+  .grid3 {
+    grid-template-columns: 1fr;
+  }
+
+  .tileGrid {
+    gap: 1.5rem;
+  }
+}
+
+.tile {
+  background: var(--ifm-card-background-color, #ffffff);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.tileIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+}
+
+.emoji {
+  font-size: 2rem;
+  line-height: 1;
+}
+
+.tileContent {
+  flex: 1;
+}
+
+.tileTitle {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0 0 1rem 0;
+  color: var(--ifm-heading-color);
+  line-height: 1.3;
+  text-align: center;
+}
+
+.tileDescription {
+  font-size: 0.95rem;
+  line-height: 1.5;
+  color: var(--ifm-color-content);
+  margin: 0;
+  text-align: left;
+}
+
+/* Dark mode support */
+[data-theme='dark'] .tile {
+  background: var(--ifm-card-background-color, #1e1e1e);
+  border-color: var(--ifm-color-emphasis-300);
+}
+
+[data-theme='dark'] .tile:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}

src/css/tailwind.css

@@ -1701,6 +1701,17 @@ pre code {
 
 }
 
+/* Tablet improvements for vision pages */
+@media (min-width: 760px) and (max-width: 996px) {
+  /* Add horizontal margins for tablet viewports */
+  [class*="docPage"] .container,
+  [class*="docItemContainer"],
+  .markdown {
+    padding-left: 2rem !important;
+    padding-right: 2rem !important;
+  }
+}
+
 /*ask ai*/
 .DocSearch {
   /*display: none;*/