diff --git a/.firebaserc b/.firebaserc
index 97d37bd..4b940bf 100644
--- a/.firebaserc
+++ b/.firebaserc
@@ -3,9 +3,6 @@
   "targets": {
     "docs-and-blog": {
       "hosting": {
-        "docs": [
-          "gumnut-docs"
-        ],
         "blog": [
           "gumnut-blog"
         ]
@@ -13,4 +10,4 @@
     }
   },
   "etags": {}
-}
\ No newline at end of file
+}
diff --git a/docs/.vitepress/case-studies.data.mts b/docs/.vitepress/case-studies.data.mts
new file mode 100644
index 0000000..b847817
--- /dev/null
+++ b/docs/.vitepress/case-studies.data.mts
@@ -0,0 +1,19 @@
+import { createContentLoader } from "vitepress";
+
+export default createContentLoader("case-studies/**/*.md", {
+  excerpt: true,
+  transform(raw) {
+    return raw
+      .map(({ url, frontmatter, excerpt }) => ({
+        title: frontmatter.title,
+        url,
+        excerpt,
+        date: frontmatter.date,
+        tags: frontmatter.tags || [],
+        author: frontmatter.author,
+        description: frontmatter.description,
+        image: frontmatter.image,
+      }))
+      .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+  },
+});
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index d4729e9..2513b97 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,25 +1,62 @@
 import { defineConfig } from "vitepress";
+import { getFeed } from "./getFeed";
+import { createContentLoader } from "vitepress";
+import implicitFigures from "markdown-it-implicit-figures";
+
+// Helper function to parse dates consistently
+function parseDate(dateStr: any): Date {
+  if (!dateStr) {
+    return new Date(0); // Return a very old date if no date is provided
+  }
+  if (typeof dateStr !== "string") {
+    return new Date(dateStr); // Try to parse whatever we got
+  }
+  // If the date string is already in ISO format, use it directly
+  if (dateStr.includes("T")) {
+    return new Date(dateStr);
+  }
+  // Otherwise, assume it's in YYYY-MM-DD format and add time
+  return new Date(`${dateStr}T00:00:00.000Z`);
+}
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: "Docs",
-  description: "Documentation for Gumnut - the modern textbox",
+  title: "Gumnut 🦩",
+  description: "Modern SaaS for teams",
+  ignoreDeadLinks: true,
   cleanUrls: true,
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
+    siteTitle: false,
+    externalLinkIcon: false,
     logo: {
       light: "/logo/light.svg",
       dark: "/logo/dark.svg",
       alt: "Gumnut Logo",
     },
-    // nav: [{ text: "Support", link: "mailto:hello@gumnut.dev" }],
+    nav: [
+      { text: "Pricing", link: "/pricing" },
+      {
+        text: "Resources",
+        items: [
+          { text: "Blog", link: "/blog" },
+          { text: "Questions Hub", link: "/questions" },
+        ],
+      },
+      { text: "Case Studies", link: "/case-studies" },
+      { text: "Docs", link: "/docs" },
+      { text: "Login", link: "https://dashboard.gumnut.dev" },
+      { text: "Book a demo", link: "https://calendly.com/owen-gumnut/30min" },
+    ],
     socialLinks: [
-      { icon: "discord", link: "https://discord.gg/yu3u87AUNR" },
-      { icon: "github", link: "https://github.com/gumnutdev" },
       {
         icon: "linkedin",
         link: "https://www.linkedin.com/company/gumnut-dev/",
       },
+      {
+        icon: "discord",
+        link: "https://discord.gg/yu3u87AUNR",
+      },
     ],
     sidebar: [
       {
@@ -28,33 +65,33 @@ export default defineConfig({
           {
             text: "Get Started",
             items: [
-              { text: "Introduction", link: "/introduction" },
-              { text: "Quick Start", link: "/quickstart" },
-              { text: "Walkthrough", link: "/walkthrough" },
+              { text: "Introduction", link: "/docs/" },
+              { text: "Quick Start", link: "/docs/quickstart" },
+              { text: "Walkthrough", link: "/docs/walkthrough" },
             ],
           },
           {
             text: "Guides",
             items: [
-              { text: "Authentication", link: "/guides/authentication" },
-              { text: "Hackathon", link: "/guides/hackathon" },
-              { text: "Agent", link: "/guides/agent" },
+              { text: "Authentication", link: "/docs/guides/authentication" },
+              { text: "Hackathon", link: "/docs/guides/hackathon" },
+              { text: "Agent", link: "/docs/guides/agent" },
             ],
           },
           {
             text: "Frameworks",
             items: [
-              { text: "React", link: "/components/react" },
-              { text: "Vue", link: "/components/vue" },
+              { text: "React", link: "/docs/components/react" },
+              { text: "Vue", link: "/docs/components/vue" },
             ],
           },
           {
             text: "Components",
             items: [
-              { text: "Gumnut Data", link: "/components/gumnut-data" },
-              { text: "Gumnut Focus", link: "/components/gumnut-focus" },
-              { text: "Gumnut Status", link: "/components/gumnut-status" },
-              { text: "Gumnut Text", link: "/components/gumnut-text" },
+              { text: "Gumnut Data", link: "/docs/components/gumnut-data" },
+              { text: "Gumnut Focus", link: "/docs/components/gumnut-focus" },
+              { text: "Gumnut Status", link: "/docs/components/gumnut-status" },
+              { text: "Gumnut Text", link: "/docs/components/gumnut-text" },
             ],
           },
         ],
@@ -65,20 +102,25 @@ export default defineConfig({
           {
             text: "API Documentation",
             items: [
-              { text: "Gumnut API", link: "/api-reference/gumnut-api" },
-              { text: "Gumnut Doc", link: "/api-reference/gumnut-doc" },
-              { text: "Gumnut Node", link: "/api-reference/gumnut-node" },
+              { text: "Gumnut API", link: "/docs/api-reference/gumnut-api" },
+              { text: "Gumnut Doc", link: "/docs/api-reference/gumnut-doc" },
+              { text: "Gumnut Node", link: "/docs/api-reference/gumnut-node" },
             ],
           },
         ],
       },
     ],
-    footer: {
-      copyright: "Copyright © 2025 Gumnut Dev Pty Ltd",
+  },
+  markdown: {
+    config: (md) => {
+      md.use(implicitFigures, {
+        figcaption: true,
+        copyAttrs: "^class$",
+      });
     },
   },
   head: [
-    ["link", { rel: "icon", href: "/logo/favicon.ico" }],
+    ["link", { rel: "icon", href: "/images/favicon.ico" }],
     [
       "script",
       {
@@ -88,4 +130,48 @@ export default defineConfig({
       },
     ],
   ],
+  vite: {
+    css: {
+      devSourcemap: true,
+    },
+  },
+  async transformPageData(pageData) {
+    if (pageData.relativePath.startsWith("articles/")) {
+      if (pageData.frontmatter.image) {
+        pageData.frontmatter.class = "has-header-image";
+      }
+    }
+
+    if (pageData.relativePath.startsWith("case-studies/")) {
+      if (pageData.frontmatter.image) {
+        pageData.frontmatter.class = "has-header-image";
+      }
+    }
+  },
+  async buildEnd() {
+    // Create content loader for blog posts for RSS feed
+    const postsLoader = createContentLoader("articles/*.md", {
+      includeSrc: true,
+      render: true,
+      excerpt: true,
+      transform(rawData) {
+        return rawData
+          .sort((a, b) => {
+            const dateA = parseDate(a.frontmatter.date);
+            const dateB = parseDate(b.frontmatter.date);
+            return dateB.getTime() - dateA.getTime();
+          })
+          .map((page) => {
+            return {
+              url: page.url,
+              frontmatter: page.frontmatter,
+              excerpt: page.excerpt,
+            };
+          });
+      },
+    });
+
+    const posts = await postsLoader.load();
+    await getFeed(posts);
+  },
 });
diff --git a/docs/.vitepress/getFeed.ts b/docs/.vitepress/getFeed.ts
new file mode 100644
index 0000000..0c62473
--- /dev/null
+++ b/docs/.vitepress/getFeed.ts
@@ -0,0 +1,63 @@
+import { Feed } from "feed";
+import { fileURLToPath } from "url";
+import { dirname, resolve } from "path";
+import fs from "fs";
+
+// Define the post type to match VitePress ContentData
+interface Post {
+  url: string;
+  frontmatter: Record<string, any>;
+}
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export async function getFeed(posts: Post[]) {
+  const feed = new Feed({
+    title: "The Collaborative Textbox",
+    description: "Building Gumnut - the modern textbox",
+    id: "https://blog.gumnut.dev/",
+    link: "https://blog.gumnut.dev/",
+    language: "en",
+    image: "https://blog.gumnut.dev/logo/dark.svg",
+    favicon: "https://blog.gumnut.dev/logo/dark.svg",
+    copyright: `Copyright © ${new Date().getFullYear()} Gumnut`,
+    updated: new Date(),
+    generator: "VitePress",
+    feedLinks: {
+      rss2: "https://blog.gumnut.dev/rss.xml",
+    },
+  });
+
+  // Add posts to feed
+  for (const post of posts) {
+    feed.addItem({
+      title: post.frontmatter.title || "Untitled",
+      id: post.url,
+      link: `https://blog.gumnut.dev${post.url}`,
+      description: post.frontmatter.description || "",
+      content: post.frontmatter.description || "",
+      author: [
+        {
+          name: post.frontmatter.author || "Gumnut Team",
+        },
+      ],
+      date: new Date(post.frontmatter.date || Date.now()),
+    });
+  }
+
+  // Ensure the dist directory exists
+  const distDir = resolve(__dirname, "dist");
+  if (!fs.existsSync(distDir)) {
+    fs.mkdirSync(distDir, { recursive: true });
+  }
+
+  // Write feed to file
+  fs.writeFileSync(resolve(distDir, "rss.xml"), feed.rss2());
+
+  // Write posts data to a JSON file for the Vue component
+  fs.writeFileSync(
+    resolve(distDir, "posts.json"),
+    JSON.stringify(posts, null, 2)
+  );
+}
diff --git a/docs/.vitepress/posts.data.mts b/docs/.vitepress/posts.data.mts
new file mode 100644
index 0000000..1446590
--- /dev/null
+++ b/docs/.vitepress/posts.data.mts
@@ -0,0 +1,19 @@
+import { createContentLoader } from "vitepress";
+
+export default createContentLoader("articles/**/*.md", {
+  excerpt: true,
+  transform(raw) {
+    return raw
+      .map(({ url, frontmatter, excerpt }) => ({
+        title: frontmatter.title,
+        url,
+        excerpt,
+        date: frontmatter.date,
+        tags: frontmatter.tags || [],
+        author: frontmatter.author,
+        description: frontmatter.description,
+        image: frontmatter.image,
+      }))
+      .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+  },
+});
diff --git a/docs/.vitepress/theme/MyLayout.vue b/docs/.vitepress/theme/MyLayout.vue
new file mode 100644
index 0000000..2da2b78
--- /dev/null
+++ b/docs/.vitepress/theme/MyLayout.vue
@@ -0,0 +1,34 @@
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+import SiteFooter from './components/SiteFooter.vue'
+import BlogHeader from './components/BlogHeader.vue'
+import { useData } from 'vitepress/client'
+import { computed } from 'vue'
+
+const { Layout } = DefaultTheme
+const { page } = useData()
+
+// Check if this is an individual blog post (articles directory) and not a listing page
+const isBlogPost = computed(() => 
+  page.value?.relativePath?.startsWith('articles/') && 
+  page.value?.relativePath?.includes('.md') &&
+  !page.value?.relativePath?.endsWith('index.md')
+)
+
+// Check if this is a docs page (docs directory)
+const isDocsPage = computed(() => 
+  page.value?.relativePath?.startsWith('docs/') ||
+  (page.value?.url && page.value.url.startsWith('/docs/'))
+)
+</script>
+
+<template>
+  <Layout>
+    <template #doc-before>
+      <BlogHeader v-if="isBlogPost" />
+    </template>
+    <template #layout-bottom>
+      <SiteFooter v-if="!isDocsPage" />
+    </template>
+  </Layout>
+</template> 
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/BlogHeader.vue b/docs/.vitepress/theme/components/BlogHeader.vue
new file mode 100644
index 0000000..7f560ee
--- /dev/null
+++ b/docs/.vitepress/theme/components/BlogHeader.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useData } from 'vitepress/client'
+import { defineComponent } from 'vue'
+
+interface PageData {
+  frontmatter: {
+    image?: string
+    title?: string
+  }
+}
+
+const { page } = useData()
+
+defineComponent({
+  name: 'BlogHeader'
+})
+</script>
+
+<template>
+  <div v-if="page?.frontmatter?.image" class="blog-header-image">
+    <img :src="page.frontmatter.image" :alt="page.frontmatter.title" />
+  </div>
+</template>
+
+<style scoped>
+.blog-header-image {
+  width: 100%;
+  max-height: 400px;
+  overflow: hidden;
+  margin-bottom: 2rem;
+  border-radius: 8px;
+}
+
+.blog-header-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style> 
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/BlogPosts.vue b/docs/.vitepress/theme/components/BlogPosts.vue
new file mode 100644
index 0000000..19d5317
--- /dev/null
+++ b/docs/.vitepress/theme/components/BlogPosts.vue
@@ -0,0 +1,215 @@
+<template>
+  <div class="blog-posts">
+    <div v-if="posts.length === 0" class="no-posts">
+      <p>No posts found. Check back soon for new articles!</p>
+    </div>
+    
+    <article v-for="post in posts" :key="post.url" class="blog-post">
+      <a :href="post.url" class="post-card" :aria-label="`Read article: ${post.title}`">
+        <div v-if="post.image" class="post-image">
+          <img :src="post.image" :alt="post.title" />
+        </div>
+        
+        <div class="post-content">
+          <header class="post-header">
+            <h2 class="post-title">{{ post.title }}</h2>
+            <div class="post-meta">
+              <time v-if="post.date" :datetime="post.date" class="post-date">
+                {{ new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) }}
+              </time>
+              <span v-if="post.author" class="post-author">by {{ post.author }}</span>
+            </div>
+          </header>
+          
+          <div v-if="post.description || post.excerpt" class="post-excerpt">
+            <p>{{ post.description || post.excerpt }}</p>
+          </div>
+          
+          <div v-if="post.tags && post.tags.length > 0" class="post-tags">
+            <span v-for="tag in post.tags" :key="tag" class="tag">{{ tag }}</span>
+          </div>
+        </div>
+      </a>
+    </article>
+  </div>
+</template>
+
+<script setup>
+import { data as posts } from '../../posts.data.mts'
+</script>
+
+<style scoped>
+.blog-posts {
+  max-width: 1600px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+  padding: 1rem;
+}
+
+.no-posts {
+  text-align: center;
+  padding: 2rem;
+  color: var(--vp-c-text-2);
+  grid-column: 1 / -1;
+}
+
+.blog-post {
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-top: none;
+  border-bottom: none;
+}
+
+.post-card {
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: var(--vp-c-text-1);
+  text-decoration: none;
+}
+
+.post-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.post-card:link,
+.post-card:visited,
+.post-card:hover,
+.post-card:focus,
+.post-card:active {
+  color: var(--vp-c-text-1);
+  text-decoration: none;
+}
+
+.post-image {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  background: var(--vp-c-bg-soft);
+}
+
+.post-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.2s ease;
+}
+
+.post-card:hover .post-image img {
+  transform: scale(1.05);
+}
+
+/* Change heading color on hover/focus of the whole card */
+.post-card:hover .post-title,
+.post-card:focus-visible .post-title {
+  color: var(--vp-c-brand-1);
+}
+
+.post-content {
+  padding: 1.5rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.post-header {
+  margin-bottom: 1rem;
+  border: none;
+  border-top: none;
+  border-bottom: none;
+}
+
+.post-title {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.3;
+  border: none;
+  border-top: none;
+  border-bottom: none;
+  color: var(--vp-c-text-1);
+}
+
+/* removed legacy link-specific title styles */
+
+.post-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  flex-wrap: wrap;
+  border: none;
+  border-top: none;
+  border-bottom: none;
+}
+
+.post-date {
+  color: var(--vp-c-text-2);
+}
+
+.post-author {
+  color: var(--vp-c-text-2);
+}
+
+.post-excerpt {
+  margin: 1rem 0;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  flex: 1;
+}
+
+.post-excerpt p {
+  margin: 0;
+  font-size: 0.9rem;
+}
+
+.post-tags {
+  margin-top: auto;
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.tag {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+  padding: 0.25rem 0.75rem;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+/* Tablet layout */
+@media (max-width: 1024px) {
+  .blog-posts {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+  }
+}
+
+/* Mobile layout */
+@media (max-width: 768px) {
+  .blog-posts {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+    padding: 0.5rem;
+  }
+  
+  .post-content {
+    padding: 1rem;
+  }
+  
+  .post-image {
+    height: 180px;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/CaseStudies.vue b/docs/.vitepress/theme/components/CaseStudies.vue
new file mode 100644
index 0000000..24e0562
--- /dev/null
+++ b/docs/.vitepress/theme/components/CaseStudies.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="case-studies">
+    <div v-if="caseStudies.length === 0" class="no-case-studies">
+      <p>No case studies found. Check back soon for new case studies!</p>
+    </div>
+    
+    <article v-for="study in caseStudies" :key="study.url" class="case-study">
+      <a :href="study.url" class="study-card" :aria-label="`Read case study: ${study.title}`">
+        <div v-if="study.image" class="study-image">
+          <img :src="study.image" :alt="study.title" />
+        </div>
+        
+        <div class="study-content">
+          <header class="study-header">
+            <h2 class="study-title">{{ study.title }}</h2>
+          </header>
+          
+          <div v-if="study.description || study.excerpt" class="study-excerpt">
+            <p>{{ study.description || study.excerpt }}</p>
+          </div>
+          
+          <div v-if="study.tags && study.tags.length > 0" class="study-tags">
+            <span v-for="tag in study.tags" :key="tag" class="tag">{{ tag }}</span>
+          </div>
+        </div>
+      </a>
+    </article>
+  </div>
+</template>
+
+<script setup>
+import { data as caseStudies } from '../../case-studies.data.mts'
+</script>
+
+<style scoped>
+.case-studies {
+  max-width: 1600px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
+  padding: 1rem;
+}
+
+.no-case-studies {
+  text-align: center;
+  padding: 2rem;
+  color: var(--vp-c-text-2);
+  grid-column: 1 / -1;
+}
+
+.case-study {
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-top: none;
+  border-bottom: none;
+}
+
+.study-card {
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--vp-c-divider);
+  color: inherit;
+  text-decoration: none;
+}
+
+.study-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.study-card:visited {
+  color: inherit;
+}
+
+.study-card:hover,
+.study-card:focus {
+  text-decoration: none;
+}
+
+.study-image {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: var(--vp-c-bg-soft);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.study-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+
+.study-content {
+  padding: 1.5rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.study-header {
+  margin-bottom: 1rem;
+  border: none;
+  border-top: none;
+  border-bottom: none;
+}
+
+.study-title {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.3;
+  border: none;
+  border-top: none;
+  border-bottom: none;
+}
+
+/* retain default title styling without link overrides */
+
+.study-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  flex-wrap: wrap;
+  border: none;
+  border-top: none;
+  border-bottom: none;
+}
+
+.study-date {
+  color: var(--vp-c-text-2);
+}
+
+.study-author {
+  color: var(--vp-c-text-2);
+}
+
+.study-excerpt {
+  margin: 1rem 0;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.study-excerpt p {
+  margin: 0;
+  font-size: 0.9rem;
+  flex: 1;
+}
+
+.study-tags {
+  margin-top: auto;
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.tag {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+  padding: 0.25rem 0.75rem;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+/* Tablet layout */
+@media (max-width: 1024px) {
+  .case-studies {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+  }
+}
+
+/* Mobile layout */
+@media (max-width: 768px) {
+  .case-studies {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+    padding: 0.5rem;
+  }
+  
+  .study-content {
+    padding: 1rem;
+  }
+  
+  .study-image {
+    aspect-ratio: 2 / 1;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/CaseStudiesSection.vue b/docs/.vitepress/theme/components/CaseStudiesSection.vue
new file mode 100644
index 0000000..2735536
--- /dev/null
+++ b/docs/.vitepress/theme/components/CaseStudiesSection.vue
@@ -0,0 +1,121 @@
+<template>
+  <section class="case-studies-section">
+    <div class="container">
+      <div class="case-studies-grid">
+        <a href="/case-studies/social-media-management" class="case-study-card" aria-label="Read case study: Social Media Management">
+          <div class="case-study-header">
+            <h3>Social Media Management</h3>
+          </div>
+          <p>How Gumnut supercharges social media management</p>
+          <span class="read-more">Read Case Study →</span>
+        </a>
+        <a href="/case-studies/grant-software" class="case-study-card" aria-label="Read case study: Grant Application SaaS">
+          <div class="case-study-header">
+            <h3>Grant Application SaaS</h3>
+          </div>
+          <p>How Gumnut makes Grant applications instantly multiplayer</p>
+          <span class="read-more">Read Case Study →</span>
+        </a>
+        <a href="/case-studies/insurance" class="case-study-card" aria-label="Read case study: Insurance">
+          <div class="case-study-header">
+            <h3>Insurance</h3>
+          </div>
+          <p>How Gumnut transformed customer support for an insurance company</p>
+          <span class="read-more">Read Case Study →</span>
+        </a>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.case-studies-section {
+  padding: 4rem 0;
+  width: 100vw;
+  margin-left: calc(-50vw + 50%);
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  text-align: center;
+}
+
+.case-studies-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+@media (max-width: 768px) {
+  .case-studies-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.case-study-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 2rem;
+  text-align: left;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  color: var(--vp-c-text-1);
+  text-decoration: none;
+  display: block;
+}
+
+.case-study-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+}
+
+.case-study-card:link,
+.case-study-card:visited,
+.case-study-card:hover,
+.case-study-card:focus,
+.case-study-card:active {
+  color: var(--vp-c-text-1);
+  text-decoration: none;
+}
+
+.case-study-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.case-study-header h3 {
+  font-size: 1.5rem;
+  color: var(--vp-c-text-1);
+  margin: 0;
+}
+
+.industry {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+  padding: 0.25rem 0.75rem;
+  border-radius: 20px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.case-study-card p {
+  color: var(--vp-c-text-2);
+  margin-bottom: 1.5rem;
+  line-height: 1.6;
+}
+
+.read-more {
+  color: var(--vp-c-brand-1);
+  font-weight: 600;
+  transition: color 0.2s ease;
+}
+
+.case-study-card:hover .read-more {
+  color: var(--vp-c-brand-2);
+}
+</style> 
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/DemoSection.vue b/docs/.vitepress/theme/components/DemoSection.vue
new file mode 100644
index 0000000..870545f
--- /dev/null
+++ b/docs/.vitepress/theme/components/DemoSection.vue
@@ -0,0 +1,226 @@
+<template>
+  <section class="demo-section">
+    <div class="demo-container">
+      <!-- Demo video or interactive demo will go here -->
+      <div class="demo-placeholder" id="demo-content">
+        <p id="demo-text" style="display: none;">Create demo: Build collaborative forms and documents</p>
+        
+        <!-- Support video (visible by default) -->
+        <div id="support-video" class="demo-video">
+          <video 
+            id="demo-video"
+            controls
+            style="width: 100%; height: 100%; border-radius: 8px;">
+            <source src="/website/video/support-demo.mp4" type="video/mp4">
+            <track 
+              kind="subtitles" 
+              src="/website/video/support-demo.vtt" 
+              srclang="en" 
+              label="English">
+            Your browser does not support the video tag.
+          </video>
+        </div>
+      </div>
+      
+      <!-- Demo buttons 
+      <div class="demo-buttons">
+        <button class="demo-btn active" onclick="switchDemo('support', this)">
+          <span class="btn-title">Support</span>
+        </button>
+        <button class="demo-btn" onclick="switchDemo('create', this)">
+          <span class="btn-title">Create</span>
+        </button>
+        <button class="demo-btn" onclick="switchDemo('configure', this)">
+          <span class="btn-title">Configure</span>
+        </button>
+      </div>
+      -->
+    </div>
+  </section>
+</template>
+
+<script>
+// Make function globally available
+if (typeof window !== 'undefined') {
+  
+  // Function to pause video
+  function pauseVideo() {
+    const video = document.getElementById('demo-video');
+    if (video) {
+      video.pause();
+    }
+  }
+  
+  // Initialize demo on page load
+  function initializeDemo() {
+    const demoText = document.getElementById('demo-text');
+    const supportVideo = document.getElementById('support-video');
+    
+    if (demoText && supportVideo) {
+      // Ensure video is visible and text is hidden
+      demoText.style.display = 'none';
+      supportVideo.style.display = 'block';
+    }
+  }
+  
+  // Pause video when tab loses focus
+  document.addEventListener('visibilitychange', function() {
+    if (document.hidden) {
+      pauseVideo();
+    }
+  });
+  
+  // Pause video when window loses focus
+  window.addEventListener('blur', function() {
+    pauseVideo();
+  });
+  
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeDemo);
+  } else {
+    initializeDemo();
+  }
+  
+  // Also initialize after a short delay to ensure everything is loaded
+  setTimeout(initializeDemo, 500);
+  
+  window.switchDemo = function(demoType, button) {
+    // Pause video when switching demos
+    pauseVideo();
+    
+    // Remove active class from all buttons
+    document.querySelectorAll('.demo-btn').forEach(btn => {
+      btn.classList.remove('active')
+    })
+    
+    // Add active class to clicked button
+    button.classList.add('active')
+    
+    // Get elements
+    const demoText = document.getElementById('demo-text')
+    const supportVideo = document.getElementById('support-video')
+    
+    // Hide video by default
+    supportVideo.style.display = 'none'
+    demoText.style.display = 'block'
+    
+    // Update demo content
+    switch (demoType) {
+      case 'create':
+        demoText.textContent = 'Create demo: Build collaborative forms and documents'
+        break
+      case 'configure':
+        demoText.textContent = 'Configure demo: Set up workflows and integrations'
+        break
+      case 'support':
+        demoText.style.display = 'none'
+        supportVideo.style.display = 'block'
+        break
+      default:
+        demoText.textContent = 'Demo video/interactive demo'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-section {
+  padding: 4rem 0;
+  position: relative;
+  overflow: hidden;
+  width: 100vw;
+  margin-left: calc(-50vw + 50%);
+}
+
+.demo-container {
+  max-width: 800px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+  padding: 0 2rem;
+}
+
+.demo-placeholder {
+  background: var(--vp-c-bg);
+  border: 2px dashed var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 2rem;
+  color: var(--vp-c-text-2);
+  font-size: 1.1rem;
+  text-align: center;
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2rem;
+}
+
+.demo-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.demo-btn {
+  background: rgba(255, 255, 255, 0.03) !important;
+  backdrop-filter: blur(5px) !important;
+  -webkit-backdrop-filter: blur(5px) !important;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem 1.5rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: center;
+  flex: 1;
+  min-width: 150px;
+  max-width: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 1;
+}
+
+.demo-btn:hover {
+  background: rgba(255, 255, 255, 0.05) !important;
+  border-color: var(--vp-c-brand-1);
+  transform: translateY(-2px);
+}
+
+.demo-btn.active {
+  background: var(--vp-c-brand-soft) !important;
+  border-color: var(--vp-c-brand-1);
+  color: var(--vp-c-brand-1);
+}
+
+.btn-title {
+  font-weight: 600;
+  font-size: 1.1rem;
+  color: var(--vp-c-text-1);
+  text-align: center;
+}
+
+.demo-btn.active .btn-title {
+  color: var(--vp-c-brand-1);
+}
+
+.demo-video {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.demo-video video {
+  border-radius: 8px;
+  max-width: 100%;
+  max-height: 100%;
+}
+</style> 
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/FeaturesDetailSection.vue b/docs/.vitepress/theme/components/FeaturesDetailSection.vue
new file mode 100644
index 0000000..8765490
--- /dev/null
+++ b/docs/.vitepress/theme/components/FeaturesDetailSection.vue
@@ -0,0 +1,359 @@
+<template>
+  <section class="features-detail-section">
+    <div class="container">
+      <div class="feature-detail-grid">
+        <div class="feature-detail">
+          <div class="feature-content">
+            <h3>Cursors and Focus Indicators</h3>
+            <p>See exactly where your teammates are working with live cursor positions and selections. Never lose context during collaborative sessions.</p>
+            <ul>
+              <li>Live cursor positions</li>
+              <li>Selection highlighting</li>
+              <li>User presence indicators</li>
+            </ul>
+          </div>
+          <div class="feature-visual">
+            <img src="/website/cursors-focus.png" alt="Cursors and Focus Indicators" class="feature-image" />
+          </div>
+        </div>
+        
+        <div class="feature-detail">
+          <div class="feature-content">
+            <h3>Diagrams and Rich Text</h3>
+            <p>Create collaborative diagrams and rich text documents like Figma. Perfect for flowcharts, mind maps, and detailed documentation.</p>
+            <ul>
+              <li>Interactive flowcharts</li>
+              <li>Rich text editing</li>
+            </ul>
+          </div>
+          <div class="feature-visual">
+            <!-- Feature visualization will go here -->
+          </div>
+        </div>
+        
+        <div class="feature-detail">
+          <div class="feature-content">
+            <h3>Works with Every Stack</h3>
+            <p>Seamlessly integrate with your existing tech stack. From React to Vue, Angular to vanilla JS - we've got you covered.</p>
+            <ul>
+              <li>Framework agnostic</li>
+              <li>Easy integration</li>
+            </ul>
+          </div>
+          <div class="feature-visual">
+            <div class="stack-logos">
+              <a href="/docs/components/react" target="_blank" rel="noopener">
+                <img src="/website/React-light.svg" alt="React" class="logo react react-light" />
+                <img src="/website/React-dark.svg" alt="React" class="logo react react-dark" />
+              </a>
+              <a href="/docs/components/vue" target="_blank" rel="noopener">
+                <img src="/website/Vue.svg" alt="Vue" class="logo vue" />
+              </a>
+              <a href="/docs/walkthrough" target="_blank" rel="noopener">
+                <img src="/website/JavaScript.svg" alt="JavaScript" class="logo js" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.features-detail-section {
+  padding: 4rem 0;
+  width: 100vw;
+  margin-left: calc(-50vw + 50%);
+  position: relative;
+  overflow: hidden;
+}
+
+.features-detail-section::before {
+  content: '';
+  position: absolute;
+  top: 15%;
+  right: -8%;
+  width: 75%;
+  height: 4px;
+  background: linear-gradient(90deg, transparent 0%, var(--vp-c-brand-1) 20%, var(--vp-c-brand-1) 80%, transparent 100%);
+  opacity: 0.4;
+  transform: rotate(-12deg);
+  z-index: 0;
+}
+
+.features-detail-section::after {
+  content: '';
+  position: absolute;
+  bottom: 25%;
+  left: -3%;
+  width: 65%;
+  height: 3px;
+  background: linear-gradient(90deg, transparent 0%, var(--vp-c-brand-2) 20%, var(--vp-c-brand-2) 80%, transparent 100%);
+  opacity: 0.35;
+  transform: rotate(18deg);
+  z-index: 0;
+}
+
+.features-detail-section .container::before {
+  content: '';
+  position: absolute;
+  top: 60%;
+  left: 40%;
+  width: 40%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent 0%, var(--vp-c-brand-3) 30%, var(--vp-c-brand-3) 70%, transparent 100%);
+  opacity: 0.3;
+  transform: rotate(-8deg);
+  z-index: 0;
+}
+
+.features-detail-section .container::after {
+  content: '';
+  position: absolute;
+  top: 80%;
+  right: 15%;
+  width: 35%;
+  height: 5px;
+  background: linear-gradient(90deg, transparent 0%, var(--vp-c-brand-1) 25%, var(--vp-c-brand-1) 75%, transparent 100%);
+  opacity: 0.25;
+  transform: rotate(22deg);
+  z-index: 0;
+}
+
+.features-detail-section .container .feature-detail::before {
+  content: '';
+  position: absolute;
+  top: 45%;
+  left: 5%;
+  width: 30%;
+  height: 3px;
+  background: linear-gradient(90deg, transparent 0%, var(--vp-c-brand-2) 15%, var(--vp-c-brand-2) 85%, transparent 100%);
+  opacity: 0.2;
+  transform: rotate(-5deg);
+  z-index: 0;
+}
+
+.features-detail-section .container .feature-detail::after {
+  content: '';
+  position: absolute;
+  top: 70%;
+  right: 8%;
+  width: 25%;
+  height: 4px;
+  background: linear-gradient(90deg, transparent 0%, var(--vp-c-brand-3) 20%, var(--vp-c-brand-3) 80%, transparent 100%);
+  opacity: 0.18;
+  transform: rotate(15deg);
+  z-index: 0;
+}
+
+.features-detail-section .container .feature-detail:nth-child(2)::before {
+  content: '';
+  position: absolute;
+  top: 35%;
+  right: 12%;
+  width: 28%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent 0%, var(--vp-c-brand-1) 25%, var(--vp-c-brand-1) 75%, transparent 100%);
+  opacity: 0.22;
+  transform: rotate(-18deg);
+  z-index: 0;
+}
+
+.features-detail-section .container .feature-detail:nth-child(3)::after {
+  content: '';
+  position: absolute;
+  top: 55%;
+  left: 15%;
+  width: 32%;
+  height: 3px;
+  background: linear-gradient(90deg, transparent 0%, var(--vp-c-brand-2) 10%, var(--vp-c-brand-2) 90%, transparent 100%);
+  opacity: 0.2;
+  transform: rotate(12deg);
+  z-index: 0;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+h2 {
+  font-size: 2.5rem;
+  margin-bottom: 3rem;
+  color: var(--vp-c-text-1);
+  text-align: center;
+  border-top: none;
+}
+
+h2::before {
+  display: none;
+}
+
+.feature-detail-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 4rem;
+}
+
+.feature-detail {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  align-items: center;
+}
+
+.feature-detail:nth-child(even) {
+  direction: rtl;
+}
+
+.feature-detail:nth-child(even) .feature-content {
+  direction: ltr;
+}
+
+.feature-content h3 {
+  font-size: 1.8rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 1rem;
+}
+
+.feature-content p {
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin-bottom: 1.5rem;
+  font-size: 1.1rem;
+}
+
+.feature-content ul {
+  list-style: none;
+  padding: 0;
+}
+
+.feature-content li {
+  padding: 0.5rem 0;
+  color: var(--vp-c-text-1);
+  position: relative;
+  padding-left: 1.5rem;
+}
+
+.feature-content li::before {
+  content: "✓";
+  position: absolute;
+  left: 0;
+  color: var(--vp-c-brand-1);
+  font-weight: bold;
+}
+
+.feature-visual {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--vp-c-text-2);
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  padding: 2px;
+  box-sizing: border-box;
+}
+
+.feature-visual > img {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: inherit;
+}
+
+/* Make the screenshot fill the frame without distortion (may crop slightly) */
+.feature-visual .feature-image {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.stack-logos {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  gap: 1rem;
+  width: 100%;
+  padding: 0 1rem;
+}
+
+.stack-logos .logo {
+  height: 80px;
+  width: auto;
+  flex-shrink: 0;
+  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
+  cursor: pointer;
+}
+
+.stack-logos .logo:hover {
+  transform: translateY(-2px) scale(1.06);
+  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
+}
+
+.dark .stack-logos .logo:hover {
+  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
+}
+
+.stack-logos .logo:active {
+  transform: translateY(0) scale(0.98);
+}
+
+/* Default to light React logo */
+.stack-logos .react-dark {
+  display: none;
+}
+
+/* In dark mode, show dark React and hide light */
+:deep(.dark) .feature-visual .react-light {
+  display: none;
+}
+
+:deep(.dark) .feature-visual .react-dark {
+  display: inline-block;
+}
+
+.feature-content {
+  border: 0 !important;
+  background: rgba(255, 255, 255, 0.03) !important;
+  backdrop-filter: blur(5px) !important;
+  -webkit-backdrop-filter: blur(5px) !important;
+  border-radius: 8px !important;
+  padding: 2rem !important;
+  position: relative !important;
+  z-index: 1 !important;
+}
+
+.feature-detail .feature-content {
+  border: 0 !important;
+  background: rgba(255, 255, 255, 0.03) !important;
+  backdrop-filter: blur(5px) !important;
+  -webkit-backdrop-filter: blur(5px) !important;
+  border-radius: 8px !important;
+  padding: 2rem !important;
+  position: relative !important;
+  z-index: 1 !important;
+}
+
+@media (max-width: 768px) {
+  .feature-detail {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+  
+  .feature-detail:nth-child(even) {
+    direction: ltr;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/FeaturesOverviewSection.vue b/docs/.vitepress/theme/components/FeaturesOverviewSection.vue
new file mode 100644
index 0000000..30c34bc
--- /dev/null
+++ b/docs/.vitepress/theme/components/FeaturesOverviewSection.vue
@@ -0,0 +1,127 @@
+<template>
+  <section class="features-overview-section">
+    <div class="container">
+      <div class="features-grid">
+        <div class="feature-card">
+          <div class="feature-icon">
+            <img src="/website/rtc-icon.png" alt="real-time collaboration" class="feature-icon-img">
+          </div>
+          <p><strong>Real-time <span class="primary-color">collaboration</span></strong></p>
+          <p><strong>work together!—not against each other</strong></p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon">
+            <img src="/website/history-icon.png" alt="version history" class="feature-icon-img">
+          </div>
+          <p><strong>Complete <span class="primary-color">version history</span> every time you commit</strong></p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon">
+            <img src="/website/ai-agent-icon.png" alt="AI agents" class="feature-icon-img">
+          </div>
+          <p><strong>Drop-in <span class="primary-color">AI agents</span> which understand your forms and context to work with you</strong></p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon">
+            <img src="/website/attribution-icon.png" alt="character-level attribution" class="feature-icon-img">
+          </div>
+          <p><strong>Chracter-level attribution to see <span class="primary-color">exactly</span> who typed what</strong></p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.features-overview-section {
+  padding: 4rem 0;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  text-align: center;
+}
+
+h2 {
+  font-size: 2.5rem;
+  margin-bottom: 3rem;
+  color: var(--vp-c-text-1);
+  border-top: none;
+}
+
+h2::before {
+  display: none;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+@media (max-width: 1024px) {
+  .features-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.feature-card {
+  background: rgba(255, 255, 255, 0.03) !important;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 2rem;
+  text-align: center;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  position: relative;
+  z-index: 1;
+}
+
+.feature-card:hover {
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+}
+
+/* Dark mode hover effect */
+.dark .feature-card:hover {
+  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
+}
+
+.feature-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.feature-icon-img {
+  width: 5rem; /* Adjust as needed to match the font-size of the icon */
+  height: 5rem; /* Adjust as needed to match the font-size of the icon */
+  display: block;
+  margin: 0 auto;
+  object-fit: contain;
+}
+
+.primary-color {
+  color: var(--vp-c-brand-1);
+}
+
+.feature-card h3 {
+  font-size: 1.3rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 1rem;
+}
+
+.feature-card p {
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin: 0;
+}
+</style> 
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/RecentPosts.vue b/docs/.vitepress/theme/components/RecentPosts.vue
new file mode 100644
index 0000000..5a1665c
--- /dev/null
+++ b/docs/.vitepress/theme/components/RecentPosts.vue
@@ -0,0 +1,110 @@
+<script setup>
+import { data as allPosts } from '../../posts.data.mts'
+
+// Get the 6 most recent posts
+const posts = allPosts.slice(0, 6)
+
+function formatDate(dateString) {
+  if (!dateString) return '';
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-US', { 
+    year: 'numeric', 
+    month: 'long', 
+    day: 'numeric' 
+  });
+}
+</script>
+
+<template>
+  <div class="recent-posts">
+    <h2>Recent Blog Posts</h2>
+    
+    <div v-if="posts.length > 0" class="posts-grid">
+      <div v-for="post in posts" :key="post.url" class="post-card">
+        <a :href="post.url" class="post-link">
+          <div class="post-content">
+            <h3>{{ post.title || 'Untitled' }}</h3>
+            <div class="post-meta">
+              <span v-if="post.date" class="date">{{ formatDate(post.date) }}</span>
+              <span v-if="post.author" class="author">by {{ post.author }}</span>
+            </div>
+            <p v-if="post.description" class="description">{{ post.description }}</p>
+          </div>
+        </a>
+      </div>
+    </div>
+    
+    <p v-else>No posts found. Check back soon for new articles!</p>
+  </div>
+</template>
+
+<style scoped>
+.recent-posts {
+  margin: 2rem 0;
+}
+
+.posts-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
+  margin-top: 1rem;
+}
+
+.post-card {
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  overflow: hidden;
+  transition: transform 0.2s ease;
+}
+
+.post-card:hover {
+  transform: translateY(-2px);
+}
+
+.post-link {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+  height: 100%;
+  padding: 1.5rem;
+}
+
+.post-content h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.post-meta {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.5rem;
+}
+
+.post-meta .date {
+  margin-right: 1rem;
+}
+
+.post-meta .author {
+  color: var(--vp-c-text-2);
+}
+
+.description {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+}
+
+@media (max-width: 768px) {
+  .posts-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  
+  .post-link {
+    padding: 1rem;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/SiteFooter.vue b/docs/.vitepress/theme/components/SiteFooter.vue
new file mode 100644
index 0000000..a770823
--- /dev/null
+++ b/docs/.vitepress/theme/components/SiteFooter.vue
@@ -0,0 +1,138 @@
+<template>
+  <footer class="site-footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h4>Gumnut</h4>
+          <p>Modern SaaS for teams</p>
+          <div class="social-links">
+            <a href="https://linkedin.com/company/gumnut-dev" target="_blank" aria-label="LinkedIn">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+              </svg>
+            </a>
+            <a href="https://discord.gg/yu3u87AUNR" target="_blank" aria-label="Discord">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
+              </svg>
+            </a>
+          </div>
+        </div>
+        
+        <div class="footer-section">
+          <h4>Product</h4>
+          <ul>
+            <li><a href="/pricing">Pricing</a></li>
+            <li><a href="/docs/">API Docs</a></li>
+            <li><a href="/case-studies">Case Studies</a></li>
+            <li><a href="/blog">Blog</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h4>Investment / just saying hi</h4>
+          <ul>
+            <li><a href="mailto:support@gumnut.dev">hello@gumnut.dev</a></li>
+            <li><a href="https://calendly.com/owen-gumnut/30min">Book a Call</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2025 Gumnut Dev Pty Ltd. All rights reserved.</p>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.site-footer {
+  background: var(--vp-c-bg-soft);
+  border-top: 1px solid var(--vp-c-divider);
+  padding: 3rem 0 1rem;
+  margin-top: 4rem;
+  position: relative;
+  z-index: 100;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+.footer-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.footer-section h4 {
+  color: var(--vp-c-text-1);
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+}
+
+.footer-section p {
+  color: var(--vp-c-text-2);
+  margin-bottom: 1rem;
+  line-height: 1.6;
+}
+
+.footer-section ul {
+  list-style: none;
+  padding: 0;
+}
+
+.footer-section li {
+  margin-bottom: 0.5rem;
+}
+
+.footer-section a {
+  color: var(--vp-c-text-2);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.footer-section a:hover {
+  color: var(--vp-c-brand-1);
+}
+
+.social-links {
+  display: flex;
+  gap: 1rem;
+}
+
+.social-links a {
+  color: var(--vp-c-text-2);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.social-links a:hover {
+  color: var(--vp-c-brand-1);
+}
+
+.footer-bottom {
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 1rem;
+  text-align: center;
+}
+
+.footer-bottom p {
+  color: var(--vp-c-text-2);
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .footer-content {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+  
+  .social-links {
+    justify-content: center;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/SocialProofSection.vue b/docs/.vitepress/theme/components/SocialProofSection.vue
new file mode 100644
index 0000000..f67a421
--- /dev/null
+++ b/docs/.vitepress/theme/components/SocialProofSection.vue
@@ -0,0 +1,128 @@
+<template>
+  <section class="social-proof-section">
+    <div class="container">
+      <div class="quote-container">
+        <div class="quote-glow"></div>
+        <blockquote class="quote">
+          "Gumnut transformed our app to be a workplace for teams. It was so easy to use and a no-brainer to integrate."
+        </blockquote>
+        <div class="quote-author">
+          <div class="author-info">
+            <div class="author-avatar">
+              <img src="/website/jacky-koh.jpeg" alt="Jacky Koh" />
+            </div>
+            <div class="author-details">
+              <strong>Jacky Koh</strong>
+              <span>CEO, Relevance AI</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.social-proof-section {
+  padding: 4rem 0;
+  position: relative;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  text-align: center;
+}
+
+.quote-container {
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: center;
+  position: relative;
+}
+
+.quote-glow {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 300px;
+  height: 200px;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(99, 102, 241, 0.15) 0%,
+    rgba(99, 102, 241, 0.1) 30%,
+    rgba(99, 102, 241, 0.05) 60%,
+    transparent 100%
+  );
+  border-radius: 50%;
+  filter: blur(40px);
+  z-index: -1;
+  opacity: 0.8;
+}
+
+.quote {
+  font-size: 1.5rem;
+  line-height: 1.6;
+  color: var(--vp-c-text-1);
+  margin-bottom: 2rem;
+  font-style: italic;
+  quotes: none;
+  border-left: none;
+  padding-left: 0;
+  margin-left: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.quote::before,
+.quote::after {
+  content: none;
+}
+
+.quote-author {
+  margin-top: 2rem;
+  position: relative;
+  z-index: 1;
+}
+
+.author-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.author-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.author-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.author-details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+}
+
+.author-details strong {
+  color: var(--vp-c-text-1);
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.author-details span {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+</style> 
\ No newline at end of file
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 16a7749..2a55db6 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -19,12 +19,6 @@
 
   /* Additional tip color */
   --color-tip: #22863a;
-
-  --vp-c-brand: #646cff;
-  --vp-c-brand-light: #747bff;
-  --vp-c-brand-lighter: #9499ff;
-  --vp-c-brand-dark: #535bf2;
-  --vp-c-brand-darker: #454ce1;
 }
 
 .VPButton.brand {
@@ -44,3 +38,103 @@
   margin: 0.5rem 0;
   font-weight: 400;
 }
+
+/* Consistent page layout for pricing and questions pages */
+.pricing-page,
+.questions-page {
+  max-width: 1200px !important;
+  margin: 0 auto !important;
+  padding: 1rem !important;
+}
+
+/* Override VitePress default content width constraints */
+.VPDoc .content-container {
+  max-width: none !important;
+}
+
+.VPDoc .content {
+  max-width: none !important;
+}
+
+/* Force wider layout for blog and case studies pages */
+.blog-posts,
+.case-studies {
+  max-width: 1600px !important;
+  width: 100% !important;
+}
+
+/* Align headings with content for pricing and questions pages */
+.VPDoc .content h1 {
+  margin-left: 1rem !important;
+  padding-left: 0 !important;
+}
+
+/* Align h1 headings with content for blog and case studies pages */
+.blog-posts h1,
+.case-studies h1,
+.VPDoc .content h1 {
+  margin-left: 0 !important;
+  padding-left: 0 !important;
+}
+
+/* Hide external link arrows */
+.VPNavBarMenuLink .icon,
+.VPNavBarMenuLink .external-link-icon,
+.VPNavBarMenuLink::after {
+  display: none !important;
+}
+
+/* Style the Book a demo navigation link */
+.VPNav
+  .VPNavBar
+  .container
+  .content
+  .VPNavBarMenu
+  .VPNavBarMenuLink[href*="calendly.com"] {
+  background: var(--vp-c-brand-1);
+  color: white !important;
+  border-radius: 4px;
+  padding: 4px 8px;
+  margin-left: 8px;
+  height: auto !important;
+  line-height: 1.2;
+  display: inline-block;
+  align-self: center;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.VPNav
+  .VPNavBar
+  .container
+  .content
+  .VPNavBarMenu
+  .VPNavBarMenuLink[href*="calendly.com"]:hover {
+  background: var(--vp-c-brand-2);
+  color: white !important;
+}
+
+/* Direct tagline styling */
+.tagline {
+  font-size: 1.2rem !important;
+}
+
+/* Make tip block links more visible */
+.custom-block.tip a {
+  color: #4ade80 !important;
+}
+
+.custom-block.tip a:hover {
+  color: #22c55e !important;
+}
+
+/* Navbar Logo Styling */
+.VPNav .VPNavBar .container .title .logo {
+  height: 32px !important;
+  width: auto !important;
+}
+
+.VPNav .VPNavBar .container .title .logo img {
+  height: 32px !important;
+  width: auto !important;
+}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index c495bc1..a7752dc 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,4 +1,38 @@
 import DefaultTheme from "vitepress/theme";
+import "./style.css";
 import "./custom.css";
+// @ts-ignore
+import MyLayout from "./MyLayout.vue";
+// @ts-ignore
+import BlogPosts from "./components/BlogPosts.vue";
+// @ts-ignore
+import CaseStudies from "./components/CaseStudies.vue";
+// @ts-ignore
+import BlogHeader from "./components/BlogHeader.vue";
+import { inBrowser } from "vitepress";
 
-export default DefaultTheme;
+export default {
+  extends: DefaultTheme,
+  Layout: MyLayout as any,
+  enhanceApp({ app }: { app: any }) {
+    // Register the BlogPosts component
+    app.component("BlogPosts", BlogPosts);
+    // Register the CaseStudies component
+    app.component("CaseStudies", CaseStudies);
+    // Register the BlogHeader component
+    app.component("BlogHeader", BlogHeader);
+
+    if (inBrowser) {
+      import("../usePostHog").then(({ usePostHog }) => {
+        const { posthog } = usePostHog();
+
+        // Track page views
+        window.addEventListener("load", () => {
+          posthog.capture("$pageview", {
+            $current_url: window.location.href,
+          });
+        });
+      });
+    }
+  },
+};
diff --git a/docs/.vitepress/theme/posts.data.ts b/docs/.vitepress/theme/posts.data.ts
new file mode 100644
index 0000000..028a7b6
--- /dev/null
+++ b/docs/.vitepress/theme/posts.data.ts
@@ -0,0 +1,17 @@
+import { createContentLoader } from "vitepress";
+
+// This file is used by the theme to provide post data to components
+export default {
+  watch: ["articles/*.md"],
+  load(watchedFiles) {
+    return watchedFiles.map((file) => {
+      // This is a simplified version - in a real implementation,
+      // you would parse the frontmatter and content here
+      return {
+        url: file.replace(/^articles\//, "/").replace(/\.md$/, ".html"),
+        frontmatter: {},
+        excerpt: "",
+      };
+    });
+  },
+};
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
new file mode 100644
index 0000000..07f7e30
--- /dev/null
+++ b/docs/.vitepress/theme/style.css
@@ -0,0 +1,346 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attached to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: #da509a;
+  --vp-c-brand-2: #c0488a;
+  --vp-c-brand-3: #a63f75;
+  --vp-c-brand-soft: rgba(218, 80, 154, 0.15);
+
+  --vp-c-tip-1: var(--vp-c-green-1);
+  --vp-c-tip-2: var(--vp-c-green-2);
+  --vp-c-tip-3: var(--vp-c-green-3);
+  --vp-c-tip-soft: var(--vp-c-green-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+
+  /* Make text-2 brighter */
+  --vp-c-text-2: #9ca3af;
+}
+
+/* Light mode */
+:root {
+  --vp-c-text-2: #6b7280;
+}
+
+/* Dark mode */
+.dark {
+  --vp-c-text-2: #9ca3af;
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: #da509a;
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: #c0488a;
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: #da509a;
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    var(--vp-c-brand-1) 30%,
+    #ffe4e1
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    rgba(218, 80, 154, 0.15) 50%,
+    rgba(192, 72, 138, 0.15) 50%
+  );
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-tip-3);
+  --vp-custom-block-tip-code-bg: var(--vp-c-tip-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+
+/**
+ * Component: Figures
+ * -------------------------------------------------------------------------- */
+
+figure img {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+}
+
+figure figcaption {
+  text-align: center;
+  font-size: 0.9em;
+  color: var(--vp-c-text-2);
+  margin-top: 0.5em;
+}
+
+.has-header-image .vp-doc {
+  padding-top: 0;
+}
+
+.has-header-image .vp-doc > :first-child {
+  margin-top: 0;
+}
+
+.has-header-image .vp-doc > :first-child img {
+  width: 100%;
+  max-height: 400px;
+  object-fit: cover;
+  margin-bottom: 2rem;
+}
+
+/**
+ * Component: Pricing Page
+ * -------------------------------------------------------------------------- */
+
+.pricing-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(280px, 1fr));
+  gap: 2rem;
+  margin: 2rem 0;
+  align-items: stretch;
+  width: 100%;
+}
+
+.pricing-card {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 2rem;
+  background: var(--vp-c-bg);
+  position: relative;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  height: 100%;
+  width: 100%;
+  min-width: 0;
+  transition: box-shadow 0.2s ease;
+}
+
+.tier-label {
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--vp-c-brand-1);
+  color: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  z-index: 1;
+}
+
+.pricing-card.featured {
+  border-color: var(--vp-c-brand-1);
+  box-shadow: 0 4px 12px rgba(218, 80, 154, 0.15);
+}
+
+.pricing-header {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  margin-bottom: 2rem;
+}
+
+.pricing-header h3 {
+  margin: 0;
+  margin-bottom: -0.25rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.tier-description {
+  margin: 0;
+  margin-top: -0.25rem;
+}
+
+.pricing-features {
+  flex: 1;
+  margin-bottom: 2rem;
+}
+
+.pricing-features ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.pricing-features li {
+  padding: 0.5rem 0;
+}
+
+.pricing-features li::before {
+  content: "✓";
+  color: var(--vp-c-brand-1);
+  font-weight: bold;
+  margin-right: 0.5rem;
+}
+
+.pricing-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.pricing-icon img {
+  width: 96px;
+  height: 96px;
+  object-fit: contain;
+}
+
+.pricing-action {
+  margin-top: auto;
+  text-align: center;
+}
+
+.pricing-action .btn {
+  display: inline-block;
+  padding: 0.75rem 2rem;
+  border-radius: 6px;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.pricing-action .btn-primary {
+  background-color: var(--vp-c-brand-1);
+  color: white;
+  border: 1px solid var(--vp-c-brand-1);
+}
+
+.pricing-action .btn-outline {
+  background-color: transparent;
+  color: var(--vp-c-brand-1);
+  border: 1px solid var(--vp-c-brand-1);
+}
+
+.price {
+  margin: 0;
+  text-align: center;
+}
+
+.price .amount {
+  font-size: 3rem;
+  font-weight: 700;
+  color: var(--vp-c-brand-1);
+}
+
+.price .period {
+  font-size: 1rem;
+  color: var(--vp-c-text-2);
+}
+
+/* Responsive design for pricing grid */
+@media (max-width: 1024px) {
+  .pricing-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .pricing-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .pricing-card.featured {
+    transform: none;
+  }
+
+  .amount {
+    font-size: 2.5rem;
+  }
+}
diff --git a/docs/.vitepress/theme/tsconfig.json b/docs/.vitepress/theme/tsconfig.json
new file mode 100644
index 0000000..0f77465
--- /dev/null
+++ b/docs/.vitepress/theme/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "types": ["vitepress/client", "vue"],
+    "strict": true,
+    "skipLibCheck": true
+  }
+}
diff --git a/docs/.vitepress/usePostHog.ts b/docs/.vitepress/usePostHog.ts
new file mode 100644
index 0000000..af98224
--- /dev/null
+++ b/docs/.vitepress/usePostHog.ts
@@ -0,0 +1,11 @@
+import posthog from "posthog-js";
+
+export function usePostHog() {
+  posthog.init("phc_rUFVVeEW91VmDXwiB5gp93dHBljkFjC16I3WvZcw8ub", {
+    api_host: "https://us.i.posthog.com",
+  });
+
+  return {
+    posthog,
+  };
+}
diff --git a/docs/articles/article-1.md b/docs/articles/article-1.md
new file mode 100644
index 0000000..515499f
--- /dev/null
+++ b/docs/articles/article-1.md
@@ -0,0 +1,14 @@
+---
+title: Hello World
+date: 2025-04-09
+description: Welcome to the Gumnut blog
+sidebar: false
+prev: false
+next: false
+---
+
+# Welcome to the Gumnut Blog
+
+We created this blog to document some hopefully useful tangents we've come across while building Gumnut.
+
+Maybe it'll stay like this, but this works for now.
diff --git a/docs/articles/future-of-work-ai.md b/docs/articles/future-of-work-ai.md
new file mode 100644
index 0000000..22f947e
--- /dev/null
+++ b/docs/articles/future-of-work-ai.md
@@ -0,0 +1,54 @@
+---
+title: Beyond the helpdesk - AI human collaboration frontiers
+description: Solving the interface of human/ai collaboration in modern applications
+date: 2025-06-13
+sidebar: false
+prev: false
+next: false
+---
+
+# Beyond the helpdesk - AI human collaboration frontiers
+
+I recently read [this article in Enterprise Times](https://www.enterprisetimes.co.uk/2025/06/12/human-workers-and-ai-agents-collaboration-the-key-says-zahra-bahrololoumi-at-salesforce-world-tour-in-london/) about how human/ai collaboration is key. I've been thinking about this topic for a while, and it's really cool to see how enterprises are actively working on this, to make the user experience and productivity amazing, and AI can do a lot to improve that.
+
+## 🎤 World tour 💃
+
+The article does focus on the [Salesforce World Tour](https://www.salesforce.com/uk/events/london/) which was recently in London, and I didn't know that it was a rock-concert-like _actual_ world tour. But it definitely is, they're even coming to Australia in a [couple of weeks](https://www.salesforce.com/au/events/) 🤘
+
+Salesforce's impressive statistic is Agentforce-resolving 84% of customer support queries with minimal human intervention-is a testament to the strides made in AI-driven automation. Only 2% required human intervention. Honestly these numbners are really impressive. But it represents just the initial phase of AI's potential in the enterprise.
+
+The transition to AI-first operations is not just a trend (lol, genius). According to the [Digital Enterprise 2025](https://community.nasscom.in/communities/digital-transformation/digital-enterprise-2025-advancing-ai-first-enterprise) report by Nasscom and Avasant, 27% of companies have AI in production or at scale, with another 31% at the proof-of-concept stage. Furthermore, 74% of enterprises expect AI spending to increase in 2025, underscoring the growing emphasis on AI integration in enterprises.
+
+The thing that I think is missing from these kinds of presentations/reports (sorry enterprise, I promise I don't hate you), is _what does that actually look like tomorrow?_
+
+Is it really just answering emails and customer support requests? I don't think anyone thinks that, but what does the future of human and AI collaboration look and feel like moving forward?
+
+This is where the startup space can provide a bit of a window into that future.
+
+## 🚀 The future
+
+I think a good company to look at is [Relevance AI](https://relevanceai.com/) in this space.
+
+Relevance lets companies create a whole "AI workforce" (literally), each agent can spawn a series of sub-agents (in their new product Workforce). You can construct a whole network of agents to perform a tasks.
+
+![Relevance AI workforce](https://cdn.prod.website-files.com/636cad09a1159553a45e8ba1/67c105469bd221272da70758_workforce-builder-hero.png)
+
+The reason you do this, is, just like humans, agents are much more effective when you can absract larger tasks into smaller, manageble pieces, and have a dedicated agent to just do that thing.
+
+Most of the applications I've seen so far are in sales research, answering emails/queries. But it's actually configurable to the extent that you can imaging _any_ application involving AI to be done autonomously. Including any external tools callable via MCP, by agents inside Relevance.
+
+## 🤸 The human part
+
+But there thing that's missing in that, is _where is the human interaction?_ What does Human/AI interaction look like?
+
+Right now, it's in interfaces like _Cursor_ - you have a chat window, you type and it does stuff.
+
+![Cursor interface (I did write this article in Cursor)](/public/images/cursor-interface.png)
+
+Companies like [Gumnut](https://gumnut.dev) (disclosure: my company, but you are on my blog...) are interesting in that - we have a real-time collaboration platforms where AI can type alongside you as a co-pilot. Think Google Docs, but the colleagues you're typing with are AI agents typing alongside you.
+
+We'll see what [Liveblocks](https://www.linkedin.com/posts/steven-fabre-5510bb38_nothing-meaningful-is-built-alone-that-activity-7338946791880511490-FYQL)) is cooking in this space too in the coming weeks.
+
+There are lots of _interface_ questions as to the best way to interact with AI agents as you type alongside them. Is it just another Cursor-like chatbot like [TipTap](http://tiptap.dev/product/ai-agent) have? Or something else?
+
+We'll have a lot more to say on this soon 👀, but if you want to try it yourself (and you're in Sydney), come to our [hackathon](https://gumnut.dev/hack) on July 2nd and see what you can come up with!
diff --git a/docs/articles/new-indian-express-ai-adoption.md b/docs/articles/new-indian-express-ai-adoption.md
new file mode 100644
index 0000000..c1620c0
--- /dev/null
+++ b/docs/articles/new-indian-express-ai-adoption.md
@@ -0,0 +1,47 @@
+---
+title: Data on Enterprise AI adoption
+description: AI agent adoption in enterprises
+date: 2025-06-02
+author: "Owen Brasier"
+sidebar: false
+prev: false
+next: false
+---
+
+# AI agent adoption in enterprise
+
+I read an interesting article on the adoption of AI agents in the [New Indian Express](https://www.newindianexpress.com/xplore/2025/May/31/from-experimentation-to-deployment-it-firms-now-focus-on-ai-agents-2), and how they are being adopted in enterprise.
+
+::: info QUOTE
+Currently, 27% of enterprises report having AI agents in production or at scale, while 31% are at the proof-of-concept (PoC) stage, and another 30% plan to initiate PoCs or scale deployments in CY2025. Enterprises are expected to spend 3-4X more on AI agents in CY2025 as a result of synchronous AI systems
+:::
+
+The figures come from [this report](https://community.nasscom.in/communities/digital-transformation/digital-enterprise-2025-advancing-ai-first-enterprise) from Nasscom. The report is quite interesting in that it covers _what is being spent_ on AI by enterprises.
+
+Here is the graph that illustrates these figures:
+
+![AI agent adoption CY2024: [source](https://community.nasscom.in/communities/digital-transformation/digital-enterprise-2025-advancing-ai-first-enterprise)](/public/images/ai-agent-deployment-nasscom.png)
+
+## What it covers
+
+The article and report certainly highlights the adoption of AI agents increasing across enterprises in 2025. I don't think that comes as a shock to... anyone. It does give an interesting sector breakdown:
+
+![Sector adoption of AI agents CY2025: [source](https://community.nasscom.in/communities/digital-transformation/digital-enterprise-2025-advancing-ai-first-enterprise)](/public/images/ai-adoption-sector-nasscom.png)
+
+I'm surprised regualted industries like banking and healthcare feature so highly, honestly. Maybe manufacturing is already so heavily automated that AI doesn't really make that much of a difference to automation processes?
+
+## What it misses
+
+What I'd really love to see is _how_ AI agents are being deployed/utilised across sectors. Are enterprises building them in-house? Are they migrating to AI workforces like [Relevance AI](https://relevance.ai/) to automate tasks? Or just using something like [Lyzr](http://lyzr.ai/) to deploy multi-agents systems?
+
+Or are they just automating processes by using ChatGPT/Gemini/_insert provider here_ to automate writing emails like everyone else?
+
+Maybe that's a little facetious, the [New Indian Express](https://www.newindianexpress.com/xplore/2025/May/31/from-experimentation-to-deployment-it-firms-now-focus-on-ai-agents-2) does say:
+
+::: info QUOTE
+Leveraging advanced machine learning and cognitive architecture, the agents are equipped with powerful capabilities such as data extraction to transform raw inputs into actionable insights and multimodal functionality to handle diverse data types effectively
+:::
+
+Although helping deal with messy data doesn't sound to me like they're mass replacing data scientists with AI, more like the processes are more streamlined. Though aren't we all doing that?
+
+I really think that the enterprises to _really_ jump on embedded AI into their systems processes will be able to move fast. The thing is though, is that startups move faster, so I think we're living in a very interesting time.
diff --git a/docs/articles/using-ai-to-clone-sites.md b/docs/articles/using-ai-to-clone-sites.md
new file mode 100644
index 0000000..1aaa39f
--- /dev/null
+++ b/docs/articles/using-ai-to-clone-sites.md
@@ -0,0 +1,211 @@
+---
+title: Using AI to clone sites
+description: How Gumnut uses AI to convert screenshots into interactive web pages
+date: 2025-04-15
+sidebar: false
+prev: false
+next: false
+---
+
+# Using AI to clone sites
+
+At [Gumnut](https://gumnut.dev), we have built the modern textbox, helping old-school HTML forms grow up.
+
+::: info
+Gumnut adds real-time collaboration, version control and attribution anywhere. Improving productivity, quality and compliance with data.
+:::
+
+But we wanted to build a tool that can _show_ you what it looks like, to get the vibe of the thing - as we're creating a new type of editor! So rather than having you write code, you could just give it a go.
+
+So we built our demo page, sorry for the cheesy copy.
+
+![Demo Site Screenshot](/images/demo-site-screenshot.png)
+
+## How it works
+
+Hopefully this is an example of a Good Use of AI™. The workflow should be:
+
+!["The journey"](/images/workflow-1.png)
+
+We're using Google's stack so our architecture is a couple of steps over Firebase and friends:
+
+![Process to create the demo](/images/workflow-2.png)
+
+## Screenshot to HTML
+
+Uploading the screenshot is pretty straightforward JS.
+
+```js
+// Generate a unique site ID
+const siteId = generateUniqueId();
+const imageURL = await getDataURL(currentFile);
+
+const functionData = {
+  email: email,
+  screenshotURL: imageURL,
+  siteId: siteId,
+};
+
+const result = await generateWebsiteFunction(functionData);
+// redirect viewer to iframe
+window.location.href = `viewer.html?id=${siteId}`;
+```
+
+So that's pretty straightforward. We pass a URL and siteID to Firebase to process it. So how does `generateWebsiteFunction` work?
+
+In simple terms, we send the image to Gemini using the `gemini-2.0-flash` model (it's fast and pretty good). To do that, we get a `base64` image and the `content-type`, and then use `@google/generative-ai` library to send to Gemini.
+
+::: tip
+I tried this with Claude 3.7 and it worked fine, but `gemini` was faster so we went with that. On really big sites Claude was a bit painfully slow.
+:::
+
+We get the `content-type` from the image, and the
+
+```js
+const matches = screenshotUrl.match(/^data:([A-Za-z-+/]+);base64,(.+)$/);
+if (!matches) {
+  throw new Error("Invalid data URL format");
+}
+contentType = matches[1];
+const base64Data = matches[2];
+imageBuffer = Buffer.from(base64Data, "base64");
+```
+
+### Initial prompt
+
+```js
+const initialPrompt = `You are an expert CSS and HTML developer.
+
+Analyze this screenshot and generate HTML/CSS code that recreates EXACTLY what is shown in the uploaded image.Faithfully recreate the UI shown in the screenshot, treating it as a completely separate design.
+
+Pay close attention to background color, text color, font size, font family, padding, margin, border, etc.Match the colors, layout, and text content exactly as shown in the screenshot.Make sure the text color inside the textareas is readable, and the text is not too small.
+
+If you detect any images, replace them with a placeholder, or use an emoji to replace them. There should be no images in the final output.
+
+Return ONLY the complete HTML with inline CSS. No additional JavaScript. No explanation. No markdown formatting.
+
+Your response should start with <!DOCTYPE html> and include everything needed for a standalone page.`;
+```
+
+It's pretty intense, but it works well enough. You have to treat the AI like a toddler (in basically all circumstances), and just like a toddler it will go rogue given any excuse.
+
+It can be called by a simple snippet:
+
+```js
+import { GoogleGenerativeAI } from "@google/generative-ai";
+const genAI = new GoogleGenerativeAI(apiKey);
+const model = genAI.getGenerativeModel("gemini-2.0-flash");
+const initialResult = await model.generateContent([
+  {
+    inlineData: {
+      data: base64Screenshot,
+      mimeType: contentType,
+    },
+  },
+  initialPrompt,
+]);
+```
+
+We run it again anyway, since `Gemini` is quite fast, and the improved results make it worth producing it twice.
+
+```js
+const verificationPrompt = `Compare the original screenshot with the HTML implementation I provided.
+Identify any visual differences, missing elements, or styling inconsistencies.
+
+Then generate an improved HTML version that better matches the original screenshot.
+Focus on fixing:
+1. Missing or incorrect text content
+2. Color mismatches (background, text, borders)
+3. Layout and spacing issues
+4. Font sizes and styles
+5. Missing UI elements
+Pay specific attention to colors, and make sure writing color has good contrast with the background color. Replace all images with an emoji or a placeholder.
+
+Return ONLY the improved HTML. No explanation needed.`;
+const verificationResult = await model.generateContent([
+  {
+    inlineData: {
+      data: base64Screenshot,
+      mimeType: contentType,
+    },
+  },
+  "Here is the first HTML attempt:",
+  generatedHtml,
+  verificationPrompt,
+]);
+```
+
+Even with this extra step, sometimes the output is far off the original, but it's still good enough for most things we throw at it.
+
+## Upgrading the input to use Gumnut
+
+Once we have the HTML downloaded, we need to upgrade all the `<input>` and `<textarea>` to `<gumnut-text>` , so we can, like... show you the whole point of why we built this thing anyway.
+
+```js
+// upgrade all inputs
+const cands = parsedDoc.querySelectorAll("select,input,textarea");
+for (let i = 0; i < cands.length; ++i) {
+  const s = cands[i];
+  const wrap = parsedDoc.createElement("span");
+  s.replaceWith(wrap);
+
+  let element;
+  if (
+    s.nodeName === "TEXTAREA" ||
+    (s.nodeName === "INPUT" &&
+      (!s.type || ["text", "email", "tel", "url", "number"].includes(s.type)))
+  ) {
+    element = parsedDoc.createElement("gumnut-text");
+
+    if (s.nodeName === "textarea") {
+      element.setAttribute("multiline", "");
+      element.setAttribute("resize", "auto");
+    }
+  } else {
+    element = parsedDoc.createElement("gumnut-data");
+    element.append(s);
+  }
+
+  // always provide name (or fallback name)
+  element.setAttribute("name", s.getAttribute("name") || `field-other-${i}`);
+
+  // move these to new holder
+  ["placeholder", "id", "class"].forEach((name) => {
+    if (s.hasAttribute(name)) {
+      element.setAttribute(name, s.getAttribute(name));
+      s.removeAttribute(name);
+    }
+  });
+
+  const f = parsedDoc.createElement("gumnut-focus");
+  f.setAttribute("name", element.getAttribute("name"));
+
+  wrap.append(element, f);
+}
+```
+
+That does the job. We create both a `gumnut-text` (for full collaborative text) or `gumnut-data` (for "last-person-wins" behaviour, e.g., for checkboxes and the like) along with a `gumnut-focus` element which automatically shows the "heads" of who's editing something.
+
+Gumnut also provides React and other framework components, which we suspect the majority of our clients will use! But under the hood, they're all powered by Web Components.
+
+## Making it slightly less cursed on mobile
+
+Gumnut is a collaborative editor, so to actually _see_ the collaboration, you need two tabs. Or two people. Or some kind of quantum split-screen.
+
+Which is not great on mobile.
+
+So I hacked in a little "open second tab" button that loads a second iframe in the same view. Now you can fake collaboration with yourself, directly on your phone.
+
+I also synced the scrollbars between each `iframe`—originally it want meant for mobile, but it turns out desktop feels less weird this way too, and it means I don't have to add more rules. I prefer doing less work, so that's how it ended up.
+
+## Try it yourself
+
+You take a screenshot. I turn it into a haunted version of your UI where every input is how it want meant to be.
+
+You didn't ask for it. But here it is:
+
+👉 [https://demo.gumnut.dev](https://demo.gumnut.dev/)
+
+::: info
+If you're a bit scared of AI, the demo also has a few pre-built examples of where Gumnut might be useful. But we hope you'll try out your private, behind-login forms and see what adding Gumnut to them might feel like.
+:::
diff --git a/docs/articles/working-with-ai.md b/docs/articles/working-with-ai.md
new file mode 100644
index 0000000..fc7e900
--- /dev/null
+++ b/docs/articles/working-with-ai.md
@@ -0,0 +1,45 @@
+---
+title: Working with AI
+description: Investigating how we can work with AI inside SaaS applications
+date: 2025-05-28
+author: "Owen Brasier"
+sidebar: false
+prev: false
+next: false
+---
+
+# Working _with_ AI
+
+At [Gumnut](https://gumnut.dev), we have built the modern textbox, adding real-time collaboration to forms. The idea that we want users to be able to work _with_ not _against_ each other in your SaaS.
+
+But why not apply the same principle to AI?
+
+Most AI consists of some "chat" or input that you type into, and it inserts over your textarea/has some output that you have to wait for. The UX can feel a bit clunky, sometimes the AI is really slow, sometimes it doesn't get _your context_.
+
+Gumnut is in a great space to explore this problem. Since we have this real-time collaborative tool, it's an ideal vessel to explore adding AI agents _typing alongside you_. So an agent can type in the same textbox as you, fill in a form for you, including pressing any checkbox, moving sliders. All you need to do is give it an _outcome_ and _context_ and the LLMs are amazing at figuring out the rest.
+
+So feasibly if your application has a form to fill in, you could create an agent that enables users to specify the outcome, and you provide the context necessary for the agent to fill it in. It's so cool!
+
+# Why stop at one?
+
+This led us to the idea there are lots of applications for different _types of agents_. For example, having a passive "spelling and grammar" agent that sits in the background and automatically corrects users spelling and grammar mistakes, should they choose to enable it.
+
+Here's a quick demo we hacked together for this:
+
+<video width="320" height="240" controls>
+  <source src="https://gumnut.dev/assets/demo-multi-DsdOMSR4.mp4" type="video/mp4">
+</video>
+
+What about a "snapshot agent" that notices, "hey you just made a large change, I took a snapshot from a few seconds ago incase you need it"
+
+Or even a translation agent, that translates real-time as you type.
+
+Do you have any ideas?
+
+# Come and try it for yourself
+
+We don't pretend to have the ideal UX for this problem, but we'd love to explore it with you!
+
+We're running a hackathon at [Relevance AI](https://relevance.ai/) on the 2nd of July, please come if you're in Sydney and see what kinds of agents you want to make! Click the image below to RSVP!
+
+[![RSVP here](/public/images/gumnut-hackathon-static.png)](https://gumnut.dev/hack)
diff --git a/docs/blog.md b/docs/blog.md
new file mode 100644
index 0000000..8bc9c67
--- /dev/null
+++ b/docs/blog.md
@@ -0,0 +1,10 @@
+---
+title: Blog
+sidebar: false
+prev: false
+next: false
+---
+
+# Articles
+
+<BlogPosts />
diff --git a/docs/case-studies.md b/docs/case-studies.md
new file mode 100644
index 0000000..5219e87
--- /dev/null
+++ b/docs/case-studies.md
@@ -0,0 +1,10 @@
+---
+title: Case Studies
+sidebar: false
+prev: false
+next: false
+---
+
+# Case Studies
+
+<CaseStudies />
diff --git a/docs/case-studies/grant-software.md b/docs/case-studies/grant-software.md
new file mode 100644
index 0000000..4bb48e2
--- /dev/null
+++ b/docs/case-studies/grant-software.md
@@ -0,0 +1,18 @@
+---
+title: "Grant application software"
+description: "Grant forms became a breeze"
+date: 2025-07-15
+author: "Owen Brasier"
+image: /images/grant-flamingo.webp
+sidebar: false
+prev: false
+next: false
+---
+
+# Case Study: Gumnut meets Grant application software
+
+A large grant application SaaS platform in Australia and New Zealand wanted to enable multiple users to apply for grants simultaneously in real-time. Grants applications can be long, complicated and require expert knowledge from many stakeholders. Previously this was solved by answering the questions in google docs and copying the questions and answers into the platform, which was a frustrating experience for all. Gumnut enabled all of their application fields, including dropdown, sliders and text inputs to have real-time collaboration for their grant applications. This increased the average session duration by over 35% as users could use the platform seamlessly to complete applications.
+
+Gumnut hosts its own real-time collaboration infrastructure which could be embedded into the grant form builder in hours for testing, and was deployed to production in a matter of days. The ability to seamlessly switch between versions of the applications is a feature often used by users and ensures no data is ever lost.
+
+The beauty of this partnership was the speed of execution and the immediate benefits to users. Gumnut slotted in and upgraded their platform seamlessly, showed what is possible by making grants a collaborative workspace.
diff --git a/docs/case-studies/insurance.md b/docs/case-studies/insurance.md
new file mode 100644
index 0000000..94ff94d
--- /dev/null
+++ b/docs/case-studies/insurance.md
@@ -0,0 +1,18 @@
+---
+title: "Insurance"
+description: "Support and AI for insurance"
+date: 2025-07-15
+author: "Owen Brasier"
+image: /images/insurance-flamingo.webp
+sidebar: false
+prev: false
+next: false
+---
+
+# Case Study: Social Media Management meets Gumnut
+
+A major insurance firm needed a better way for support teams to collaborate with customers on complex forms. These forms are critical to the business, being used for everything from claims to policy updates, but were traditionally filled out in isolation by support staff or clients. This often led to missing context, back-and-forth follow-ups, and delays in processing. They wanted a solution that would let support teams and clients work together in real time, inside the form itself.
+
+Gumnut enabled real-time collaboration across these high-value forms, allowing support agents and clients to co-author submissions live. This reduced the need for back-and-forth emails, improved accuracy, and gave teams full visibility into what was being written and when. Integrated AI agents also helped validate form inputs and suggest missing information, reducing intervention time and streamlining processing.
+
+Great service happens when support teams and customers can work together. By enabling real-time collaboration across a suite of insurance forms, Gumnut helped transform the firm’s workflows from sequential to shared. The result is faster service, fewer delays, and a clearer sense of shared ownership—making the process feel more human, more transparent, and more aligned.
diff --git a/docs/case-studies/internal-mail-tool.md b/docs/case-studies/internal-mail-tool.md
new file mode 100644
index 0000000..bbbbc15
--- /dev/null
+++ b/docs/case-studies/internal-mail-tool.md
@@ -0,0 +1,16 @@
+---
+title: "Internal mailing tool"
+description: "How Gumnut transforms an internal mail tool of a major tech company"
+date: 2024-01-15
+author: "Owen Brasier"
+image: /images/email.webp
+sidebar: false
+prev: false
+next: false
+---
+
+A major tech company was exploring ways to improve how internal teams collaborate on drafting and reviewing emails. Their internal email tool was used across departments for everything from project updates to leadership comms. But the process often felt disjointed—content lived in separate docs, feedback was scattered, and aligning on tone or structure was time-consuming. They wanted a more fluid, collaborative way to write together inside their existing workflow.
+
+Gumnut was integrated directly into their internal email drafting tool, enabling real-time co-authoring by multiple contributors. Teams could brainstorm, write, and refine emails live—seeing each other’s changes as they happened. Gumnut’s AI agents provided inline support to help apply the company’s internal style guide automatically, suggesting adjustments to tone, structure, and clarity as the team worked. The result was faster collaboration, more consistent communication, and less time lost in formatting and back-and-forth.
+
+What made this partnership stand out was the shift from isolated editing to shared creation. By enabling real-time collaboration within their internal tools, Gumnut helped transform writing from a fragmented process into a seamless team effort. It created space for creativity, alignment, and shared ownership—making internal communication more effective, more consistent, and more collaborative.
diff --git a/docs/case-studies/social-media-management.md b/docs/case-studies/social-media-management.md
new file mode 100644
index 0000000..55a013a
--- /dev/null
+++ b/docs/case-studies/social-media-management.md
@@ -0,0 +1,35 @@
+---
+title: "Social Media Management"
+description: "How Gumnut supercharged a social media management company"
+date: 2025-07-15
+author: "Owen Brasier"
+image: /images/social-juggler.webp
+sidebar: false
+prev: false
+next: false
+---
+
+# Case Study: Social Media Management meets Gumnut
+
+A major social media management platform was looking to transform how teams collaborated on creating and publishing social content. There was no clear process for managing and reviewing posts, version histories were unclear, and there was no audit trail present on who authored what. They needed a solution that enabled teams to collaborate in real time, clearly track authorship, and easily compare minor wording changes of different versions.
+
+Gumnut integrated real-time collaboration directly into the social media management workflow. Teams can co-create posts live, seeing instant edits, feedback and suggestions. Gumnut’s built-in audit trails provided clarity by tracking exactly who authored each post, down to the character, and facilitated version control enables easy reverts to a previous version.
+
+<div style="width: 70%; margin: 2rem auto; text-align: center;">
+  <video 
+    src="/images/smm-demo.mp4" 
+    autoplay 
+    muted 
+    loop 
+    playsinline 
+    style="max-width: 100%; border-radius: 12px;"
+    poster="/images/social-juggler.webp"
+  >
+    Your browser does not support the video tag.
+  </video>
+  <div style="margin-top: 1.2rem; font-size: 1.1rem; color: var(--vp-c-text-2);">
+    Social Media Management in Gumnut
+  </div>
+</div>
+
+The real magic of this partnership was in bringing transparency and clarity into the creative process. Instead of guessing who made what changes or struggling to revert errors, teams could focus purely on creativity, knowing exactly how and why content evolved. Collaboration became seamless, auditing effortless, and the end result: social content that felt authentic, aligned, and confidently team-owned.
diff --git a/docs/api-examples.md b/docs/docs/api-examples.md
similarity index 100%
rename from docs/api-examples.md
rename to docs/docs/api-examples.md
diff --git a/docs/api-reference/gumnut-api.md b/docs/docs/api-reference/gumnut-api.md
similarity index 100%
rename from docs/api-reference/gumnut-api.md
rename to docs/docs/api-reference/gumnut-api.md
diff --git a/docs/api-reference/gumnut-doc.md b/docs/docs/api-reference/gumnut-doc.md
similarity index 100%
rename from docs/api-reference/gumnut-doc.md
rename to docs/docs/api-reference/gumnut-doc.md
diff --git a/docs/api-reference/gumnut-node.md b/docs/docs/api-reference/gumnut-node.md
similarity index 100%
rename from docs/api-reference/gumnut-node.md
rename to docs/docs/api-reference/gumnut-node.md
diff --git a/docs/components/gumnut-data.md b/docs/docs/components/gumnut-data.md
similarity index 100%
rename from docs/components/gumnut-data.md
rename to docs/docs/components/gumnut-data.md
diff --git a/docs/components/gumnut-focus.md b/docs/docs/components/gumnut-focus.md
similarity index 100%
rename from docs/components/gumnut-focus.md
rename to docs/docs/components/gumnut-focus.md
diff --git a/docs/components/gumnut-status.md b/docs/docs/components/gumnut-status.md
similarity index 100%
rename from docs/components/gumnut-status.md
rename to docs/docs/components/gumnut-status.md
diff --git a/docs/components/gumnut-text.md b/docs/docs/components/gumnut-text.md
similarity index 100%
rename from docs/components/gumnut-text.md
rename to docs/docs/components/gumnut-text.md
diff --git a/docs/components/react.md b/docs/docs/components/react.md
similarity index 100%
rename from docs/components/react.md
rename to docs/docs/components/react.md
diff --git a/docs/components/vue.md b/docs/docs/components/vue.md
similarity index 100%
rename from docs/components/vue.md
rename to docs/docs/components/vue.md
diff --git a/docs/guides/agent.md b/docs/docs/guides/agent.md
similarity index 100%
rename from docs/guides/agent.md
rename to docs/docs/guides/agent.md
diff --git a/docs/guides/authentication.md b/docs/docs/guides/authentication.md
similarity index 100%
rename from docs/guides/authentication.md
rename to docs/docs/guides/authentication.md
diff --git a/docs/guides/hackathon.md b/docs/docs/guides/hackathon.md
similarity index 100%
rename from docs/guides/hackathon.md
rename to docs/docs/guides/hackathon.md
diff --git a/docs/introduction.md b/docs/docs/index.md
similarity index 79%
rename from docs/introduction.md
rename to docs/docs/index.md
index 7e0e708..3fd1954 100644
--- a/docs/introduction.md
+++ b/docs/docs/index.md
@@ -15,6 +15,6 @@ It'll often reflect a database row.
 :::
 
 Ready to get started?
-The [Quick Start](quickstart) demonstrates the basics of integrating Gumnut, head to the [Walkthrough](/walkthrough) for a step-by-step example.
+The [Quick Start](quickstart) demonstrates the basics of integrating Gumnut, head to the [Walkthrough](walkthrough) for a step-by-step example.
 
-You can also head right over to the docs on our [React API](/components/react).
+You can also head right over to the docs on our [React API](components/react).
diff --git a/docs/markdown-examples.md b/docs/docs/markdown-examples.md
similarity index 100%
rename from docs/markdown-examples.md
rename to docs/docs/markdown-examples.md
diff --git a/docs/quickstart.md b/docs/docs/quickstart.md
similarity index 100%
rename from docs/quickstart.md
rename to docs/docs/quickstart.md
diff --git a/docs/walkthrough.md b/docs/docs/walkthrough.md
similarity index 100%
rename from docs/walkthrough.md
rename to docs/docs/walkthrough.md
diff --git a/docs/index.md b/docs/index.md
index f852d9e..9e478c1 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -3,28 +3,31 @@
 layout: home
 
 hero:
-  name: "Gumnut"
-  text: "The modern textbox"
-  tagline: "Add real-time collaboration anywhere"
+  name: "Modern SaaS"
+  text: "for teams"
+  tagline: Your app is multi-user, make it <em>multiplayer</em>.<br>Turn your product into a real-time workspace with live co-editing, version history, audit trails, and AI agents—in minutes.
+  image:
+    src: ./images/hero.svg
+    alt: Gumnut
   actions:
     - theme: brand
-      text: Get Started
-      link: /introduction
+      text: 📄 API Docs
+      link: /docs/
     - theme: alt
-      text: Sign up
-      link: https://gumnut.dev
-
-features:
-  - icon: ⚡️
-    title: Real-time Collaboration
-    details: Simultaneous editing, change attribution, and version history
-  - icon: 🔒
-    title: Full revision history
-    details: Get full version history of all documents out of the box
-  - icon: 🚀
-    title: Easy Integration
-    details: Quick integration with React, Vue or pure JS
-  - icon: 🛠️
-    title: Complete document attribution
-    details: Know exactly who-typed-what for audit and compliance purposes
+      text: 🧑‍💻 Book a call
+      link: https://calendly.com/owen-gumnut/30min
 ---
+
+<script setup>
+import DemoSection from './.vitepress/theme/components/DemoSection.vue'
+import SocialProofSection from './.vitepress/theme/components/SocialProofSection.vue'
+import CaseStudiesSection from './.vitepress/theme/components/CaseStudiesSection.vue'
+import FeaturesOverviewSection from './.vitepress/theme/components/FeaturesOverviewSection.vue'
+import FeaturesDetailSection from './.vitepress/theme/components/FeaturesDetailSection.vue'
+</script>
+
+<DemoSection />
+<FeaturesOverviewSection />
+<!-- <SocialProofSection /> -->
+<CaseStudiesSection />
+<FeaturesDetailSection />
diff --git a/docs/pricing.md b/docs/pricing.md
new file mode 100644
index 0000000..d07eb9b
--- /dev/null
+++ b/docs/pricing.md
@@ -0,0 +1,102 @@
+---
+title: Pricing
+outline: false
+aside: false
+sidebar: false
+prev: false
+next: false
+---
+
+# Pricing
+
+Flexible pricing for modern teams.
+
+<div class="pricing-page">
+
+<div class="pricing-grid">
+  <div class="pricing-card">
+    <div class="tier-label">Free</div>
+    <div class="pricing-header">
+      <div class="pricing-icon">
+        <img src="/website/free-icon.png" alt="Free tier icon" />
+      </div>
+      <h3>Featherweight</h3>
+      <p class="tier-description small">For testing and local development</p>
+      <div class="price">
+        <span class="amount">$0</span>
+        <span class="period">/month</span>
+      </div>
+    </div>
+    <div class="pricing-features">
+      <ul>
+        <li>Development key</li>
+        <li>5 connections</li>
+        <li>20 documents</li>
+      </ul>
+    </div>
+    <div class="pricing-action">
+      <a href="#" class="btn btn-primary">Get Started</a>
+    </div>
+  </div>
+
+  <div class="pricing-card">
+    <div class="tier-label">Pro</div>
+    <div class="pricing-header">
+      <div class="pricing-icon">
+        <img src="/website/production-icon.png" alt="Production tier icon" />
+      </div>
+      <h3>Flamboyant</h3>
+      <p class="tier-description small">Pricing based on usage and size</p>
+      <div class="price">
+        <span class="amount">$100</span>
+        <span class="period">/month</span>
+      </div>
+    </div>
+    <div class="pricing-features">
+      <ul>
+        <li>Production key</li>
+        <li>Up to 10 collaborators</li>
+        <li>Pay for what you use</li>
+        <li>Version history</li>
+        <li>Priority support</li>
+      </ul>
+    </div>
+    <div class="pricing-action">
+      <a href="#" class="btn btn-primary">Get Started</a>
+    </div>
+  </div>
+
+  <div class="pricing-card">
+    <div class="tier-label">Enterprise</div>
+    <div class="pricing-header">
+      <div class="pricing-icon">
+        <img src="/website/enterprise-icon.png" alt="Enterprise tier icon" />
+      </div>
+      <h3>Flock Leader</h3>
+      <p class="tier-description small">Chief Flamingo Officer</p>
+      <div class="price">
+        <span class="amount">Custom</span>
+        <span class="period">/month</span>
+      </div>
+    </div>
+    <div class="pricing-features">
+      <ul>
+        <li>Unlimited collaborators</li>
+        <li>Volume discount</li>
+        <li>Choose region</li>
+        <li>Custom deployment</li>
+        <li>Dedicated support</li>
+        <li>99.9% SLA uptime</li>
+      </ul>
+    </div>
+    <div class="pricing-action">
+      <a href="#" class="btn btn-primary">Contact Sales</a>
+    </div>
+  </div>
+</div>
+
+## Need Help?
+
+If you have questions about pricing or need help choosing the right plan, [send an email](mailto:hello@gumnut.dev) or join our [Discord community](https://discord.gg/yu3u87AUNR).
+
+</div>
diff --git a/docs/public/images/ai-adoption-sector-nasscom.png b/docs/public/images/ai-adoption-sector-nasscom.png
new file mode 100644
index 0000000..c342c0d
Binary files /dev/null and b/docs/public/images/ai-adoption-sector-nasscom.png differ
diff --git a/docs/public/images/ai-agent-deployment-nasscom.png b/docs/public/images/ai-agent-deployment-nasscom.png
new file mode 100644
index 0000000..b6ac0f8
Binary files /dev/null and b/docs/public/images/ai-agent-deployment-nasscom.png differ
diff --git a/docs/public/images/cursor-interface.png b/docs/public/images/cursor-interface.png
new file mode 100644
index 0000000..feb680d
Binary files /dev/null and b/docs/public/images/cursor-interface.png differ
diff --git a/docs/public/images/demo-site-screenshot.png b/docs/public/images/demo-site-screenshot.png
new file mode 100644
index 0000000..f4cf1c3
Binary files /dev/null and b/docs/public/images/demo-site-screenshot.png differ
diff --git a/docs/public/images/email.webp b/docs/public/images/email.webp
new file mode 100644
index 0000000..76e6944
Binary files /dev/null and b/docs/public/images/email.webp differ
diff --git a/docs/public/images/favicon.ico b/docs/public/images/favicon.ico
new file mode 100644
index 0000000..41d3c28
Binary files /dev/null and b/docs/public/images/favicon.ico differ
diff --git a/docs/public/images/grant-flamingo.webp b/docs/public/images/grant-flamingo.webp
new file mode 100644
index 0000000..79746e6
Binary files /dev/null and b/docs/public/images/grant-flamingo.webp differ
diff --git a/docs/public/images/gumnut-hackathon-static.png b/docs/public/images/gumnut-hackathon-static.png
new file mode 100644
index 0000000..5d091b0
Binary files /dev/null and b/docs/public/images/gumnut-hackathon-static.png differ
diff --git a/docs/public/images/hero.svg b/docs/public/images/hero.svg
new file mode 100644
index 0000000..fc3f21e
--- /dev/null
+++ b/docs/public/images/hero.svg
@@ -0,0 +1,495 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="41.421806mm"
+   height="77.81195mm"
+   viewBox="0 0 20.710903 38.905975"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2377">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-59.675804,-450.45011)"
+         id="path2377" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2379">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-56.052599,-477.33811)"
+         id="path2379" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2381">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-71.789002,-480.44211)"
+         id="path2381" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2383">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-71.789002,-480.44211)"
+         id="path2383" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2389">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-38.574403,-429.29911)"
+         id="path2389" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2391">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-93.897802,-443.57761)"
+         id="path2391" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2393">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-77.085599,-463.70221)"
+         id="path2393" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2395">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-80.7609,-513.88511)"
+         id="path2395" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2397">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-79.346204,-515.41631)"
+         id="path2397" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2399">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-70.497104,-516.55822)"
+         id="path2399" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2401">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-83.310502,-481.11931)"
+         id="path2401" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2403">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-72.493904,-511.32371)"
+         id="path2403" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2405">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-62.151202,-518.46641)"
+         id="path2405" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2407">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-64.530104,-518.65661)"
+         id="path2407" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2409">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-83.209402,-481.05301)"
+         id="path2409" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2411">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-79.827599,-426.55201)"
+         id="path2411" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2413">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-74.383799,-438.48441)"
+         id="path2413" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2415">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-86.4825,-428.38161)"
+         id="path2415" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2417">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-56.084099,-476.83711)"
+         id="path2417" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2419">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-55.444701,-476.95761)"
+         id="path2419" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2421">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-68.075302,-443.93241)"
+         id="path2421" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2423">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-67.875899,-478.02681)"
+         id="path2423" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2425">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-81.4443,-462.15721)"
+         id="path2425" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2427">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-66.468104,-442.18761)"
+         id="path2427" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2429">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-66.468104,-442.18761)"
+         id="path2429" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2431">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-80.879302,-515.79761)"
+         id="path2431" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2433">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-63.600404,-523.09681)"
+         id="path2433" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2435">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-75.467699,-516.34871)"
+         id="path2435" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2437">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-94.155802,-445.34371)"
+         id="path2437" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2439">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-83.4183,-464.33071)"
+         id="path2439" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2441">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-82.812105,-458.69631)"
+         id="path2441" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2443">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-51.871799,-453.19611)"
+         id="path2443" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2445">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-59.675804,-450.45011)"
+         id="path2445" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2447">
+      <path
+         d="M 0,841.89 H 595.276 V 0 H 0 Z"
+         transform="translate(-59.874404,-450.45011)"
+         id="path2447" />
+    </clipPath>
+  </defs>
+  <g
+     id="layer1"
+     transform="translate(-83.343749,-114.56459)">
+    <path
+       id="path2376"
+       d="m 0,0 c -6.358,-0.145 -3.846,-6.073 -3.846,-6.073 0,0 4.386,1.18 6.493,0.794"
+       style="fill:#ef9fb8;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,90.885455,141.86163)"
+       clip-path="url(#clipPath2377)" />
+    <path
+       id="path2378"
+       d="m 0,0 c 0,0 -2.288,-1.164 -3.317,-3.736 -1.012,-2.528 -2.448,-9.662 -2.772,-12.495 -0.069,-0.601 0.401,-1.122 1.005,-1.122 H 6.025 l -7.161,-3.833 10.139,-3.307 c 0,0 11.071,1.012 3.056,3.812"
+       style="fill:none;stroke:#706f6f;stroke-width:0.991;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.35277776,0,0,-0.35277776,89.607269,132.37614)"
+       clip-path="url(#clipPath2379)" />
+    <path
+       id="path2380"
+       d="m 0,0 c 4.224,-0.846 8.721,-4.828 11.008,-6.53 0.485,-0.361 0.544,-1.061 0.13,-1.501 l -4.334,-5.369 6.675,-0.2 -6.274,-8.519 c 0,0 0.04,-2.425 -3.602,0.994 -3.641,3.418 -10.266,21.238 -10.266,21.238 0,0 3.32,0.487 6.663,-0.113"
+       style="fill:#181716;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,95.158722,131.28112)"
+       clip-path="url(#clipPath2381)" />
+    <path
+       id="path2382"
+       d="m 0,0 c 4.224,-0.846 8.721,-4.828 11.008,-6.53 0.485,-0.361 0.544,-1.061 0.13,-1.501 l -4.334,-5.369 6.675,-0.2 -6.274,-8.519 c 0,0 0.04,-2.425 -3.602,0.994 -3.641,3.418 -10.266,21.238 -10.266,21.238 0,0 3.32,0.487 6.663,-0.113 z"
+       style="fill:none;stroke:#706f6f;stroke-width:0.991;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.35277776,0,0,-0.35277776,95.158722,131.28112)"
+       clip-path="url(#clipPath2383)" />
+    <path
+       id="path2388"
+       d="M 0,0 C 0,0 3.463,24.543 17.54,23.897 27.216,23.453 35.079,18.342 35.079,11.49 35.079,4.637 27.499,0.245 17.812,0.245 8.125,0.245 0,0 0,0"
+       style="fill:#d84a8b;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,83.44135,149.32323)"
+       clip-path="url(#clipPath2389)" />
+    <path
+       id="path2390"
+       d="M 0,0 C 0,-8.105 -8.726,-14.676 -19.491,-14.676 -30.255,-14.676 -38.982,0 -38.982,0 c 0,0 8.727,14.676 19.491,14.676 C -8.726,14.676 0,8.105 0,0"
+       style="fill:#ef9fb8;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,102.95822,144.28609)"
+       clip-path="url(#clipPath2391)" />
+    <path
+       id="path2392"
+       d="m 0,0 c -15.876,14.383 -21.623,50.433 -7.907,41.02 2.54,-1.743 11.612,-4.26 13.4,2.541 0.976,3.715 -1.309,4.545 -0.974,8.104 C 4.865,55.35 0.764,60.856 -7.077,62.917 -39.381,71.41 -26.46,25.785 -16.01,0 c -7.429,0 -16.107,-7.551 -16.107,-20.211 0,-12.66 14.406,-20.416 25.17,-20.416 10.765,0 19.491,9.141 19.491,20.416 C 12.544,-11.5 3.677,-3.331 0,0"
+       style="fill:#e94d94;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,97.027244,137.18658)"
+       clip-path="url(#clipPath2393)" />
+    <path
+       id="path2394"
+       d="m 0,0 c -0.565,-2.345 -2.31,-3.89 -3.897,-3.452 -1.587,0.439 -2.416,2.694 -1.851,5.039 0.565,2.344 2.31,3.89 3.897,3.452 C -0.264,4.6 0.565,2.345 0,0"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#e94d94;stroke-width:0.631;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.35277776,0,0,-0.35277776,98.323808,119.48317)"
+       clip-path="url(#clipPath2395)" />
+    <path
+       id="path2396"
+       d="m 0,0 c -0.259,-1.052 -1.117,-1.733 -1.917,-1.523 -0.799,0.211 -1.237,1.234 -0.978,2.286 0.259,1.051 1.117,1.733 1.917,1.523 C -0.179,2.075 0.259,1.052 0,0"
+       style="fill:#393134;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,97.824735,118.943)"
+       clip-path="url(#clipPath2397)" />
+    <path
+       id="path2398"
+       d="m 0,0 c 0,0 -4.427,0.987 -5.442,-2.873 6.494,-9.412 5.765,-19.198 19.603,-22.836 6.424,-1.689 -3.084,-9.273 -1.348,-9.73 1.672,-0.44 11.555,14.944 11.801,23.899 0.083,2.985 -3.036,5.867 -5.046,6.395 C 15.367,-4.04 13.459,-5.198 9.589,-4.181 6.052,-3.251 0,0 0,0"
+       style="fill:#f8e3eb;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,94.702969,118.54016)"
+       clip-path="url(#clipPath2399)" />
+    <path
+       id="path2400"
+       d="M 0,0 C -2.174,0.572 1.77,4.704 1.348,9.73 1.097,12.71 1.764,29.901 7.467,28.401 14.929,26.439 14.764,13.72 9.567,7.569 4.371,1.419 1.313,-0.345 0,0"
+       style="fill:#393134;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,99.223251,131.04222)"
+       clip-path="url(#clipPath2401)" />
+    <path
+       id="path2402"
+       d="m 0,0 c 16.856,-4.432 20.054,-19.45 10.395,-29.993 0.09,-0.082 0.121,-0.096 0.223,-0.142 9.758,9.418 7.671,25.857 -10.39,30.605 C -0.37,0.628 -0.285,0.075 0,0"
+       style="fill:#cf086e;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,95.407396,120.38678)"
+       clip-path="url(#clipPath2403)" />
+    <path
+       id="path2404"
+       d="M 0,0 C -0.431,-2.373 1.072,-4.562 3.357,-4.888 5.641,-5.214 7.843,-3.555 8.274,-1.182 8.704,1.192 7.202,3.38 4.917,3.706 2.632,4.033 0.431,2.373 0,0"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#e94d94;stroke-width:0.747;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.35277776,0,0,-0.35277776,91.75872,117.86699)"
+       clip-path="url(#clipPath2405)" />
+    <path
+       id="path2406"
+       d="m 0,0 c -0.196,-1.065 0.285,-2.018 1.076,-2.128 0.79,-0.109 1.59,0.665 1.786,1.731 C 3.058,0.668 2.577,1.621 1.786,1.73 0.996,1.84 0.196,1.065 0,0"
+       style="fill:#393134;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,92.597944,117.79989)"
+       clip-path="url(#clipPath2407)" />
+    <path
+       id="path2408"
+       d="M 0,0 C 0.004,0.004 0.008,0.008 0.012,0.012 0.073,-0.016 0.124,-0.05 0.198,-0.069 1.511,-0.415 4.569,1.349 9.766,7.5 c 3.921,4.641 4.975,13.022 2.05,17.699 -0.681,2.45 -3.164,4.579 -4.863,5.026 -3.406,0.896 -5.305,0.304 -7.965,0.59 -0.335,0.922 -0.632,1.917 -0.496,3.364 0.347,3.685 -3.755,9.191 -11.595,11.252 -32.304,8.493 -19.366,-36.997 -8.916,-62.781 -6.368,0 -13.432,-6.287 -15.384,-15.844 -4.194,-3.531 -7.117,-18.56 -7.117,-18.56 0,0 6.347,1.469 14.666,-0.558 4.988,-3.649 11.414,-5.666 16.898,-5.666 6.643,0 12.506,3.483 16.024,8.798 4.699,2.68 7.735,6.925 7.735,11.705 0,5.4 -3.876,10.115 -9.645,12.664 -3.053,3.882 -9.277,5.746 -10.514,6.867 -2.646,7.572 -3.532,8.6 -5.795,12.94 -8.348,16.011 -9.384,35.813 1.217,28.538 0.23,-0.158 0.514,-0.322 0.841,-0.485 C -10.383,17.156 -7.6,12.066 1.546,9.661 1.933,5.055 -1.334,1.208 -0.211,0.156 -0.215,0.151 -0.219,0.146 -0.223,0.142 -0.133,0.06 -0.102,0.046 0,0 Z"
+       style="fill:none;stroke:#d2076f;stroke-width:0.614;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.35277776,0,0,-0.35277776,99.187585,131.06561)"
+       clip-path="url(#clipPath2409)" />
+    <path
+       id="path2410"
+       d="m 0,0 -4.824,38.349 c 0,0 -1.91,-2.397 -5.079,-2.837 -5.726,-0.796 -8.577,0.432 -8.577,0.432 L -17.016,0"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,97.99456,150.29235)"
+       clip-path="url(#clipPath2411)" />
+    <path
+       id="path2412"
+       d="m 0,0 -4.51,-5.9 -3.515,-14.546 c -4.105,0.122 -13.107,-0.685 -16.402,3.664 -1.349,1.781 0.533,6.762 0.533,9.365 -3.323,3.283 -5.522,7.478 -5.522,12.423 0,12.666 8.674,20.215 16.112,20.215 L -3.04,12.646 Z"
+       style="fill:#181716;fill-opacity:1;fill-rule:nonzero;stroke:#706f6f;stroke-width:0.991;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.35277776,0,0,-0.35277776,96.074109,146.08286)"
+       clip-path="url(#clipPath2413)" />
+    <path
+       id="path2414"
+       d="m 0,0 c 0,-1.596 0.336,-5.643 -0.38,-6.877 -2.145,-3.703 -7.605,-3.132 -10.797,-3.436 l 0.52,14.959 1.879,5.647 5.498,2.114 C 0.399,9.084 3.151,23.823 3.151,15.108 3.151,9.606 3.384,3.678 0,0"
+       style="fill:#181716;fill-opacity:1;fill-rule:nonzero;stroke:#706f6f;stroke-width:0.991;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.35277776,0,0,-0.35277776,100.34226,149.64691)"
+       clip-path="url(#clipPath2415)" />
+    <path
+       id="path2416"
+       d="M 0,0 C 1.106,-3.371 21.491,-18.976 16.887,-36.663 15.682,-41.291 3.131,-15.921 1.095,-12.264 -0.669,-9.098 -0.532,-5.448 -2.72,-3.182 -1.655,-1.148 -0.502,-0.387 0,0"
+       style="fill:#181716;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,89.618381,132.55288)"
+       clip-path="url(#clipPath2417)" />
+    <path
+       id="path2418"
+       d="m 0,0 c -0.396,-0.299 -0.9,-0.429 -2.709,-3.355 -1.432,-2.317 -2.448,-9.663 -2.772,-12.496 -0.069,-0.6 0.401,-1.122 1.005,-1.122 H 6.633 l -7.161,-3.832 10.139,-3.308 c 0,0 4.521,-1.594 7.969,-8.76"
+       style="fill:#181716;fill-opacity:1;fill-rule:nonzero;stroke:#706f6f;stroke-width:0.991;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.35277776,0,0,-0.35277776,89.392816,132.51037)"
+       clip-path="url(#clipPath2419)" />
+    <path
+       id="path2420"
+       d="m 0,0 c -4.633,9.982 -11.996,5.527 -11.996,5.527 0,0 2.224,-3.447 2.798,-10.112"
+       style="fill:#ef9fb8;fill-opacity:1;fill-rule:nonzero;stroke:#d2076f;stroke-width:0.614;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.35277776,0,0,-0.35277776,93.848611,144.16093)"
+       clip-path="url(#clipPath2421)" />
+    <path
+       id="path2422"
+       d="m 0,0 c 0,0 7.396,-15.296 6.967,-34.283 -0.054,-2.399 11.151,-7.155 14.551,-0.404 1.688,3.353 -6.818,15.205 -6.818,15.205 l -1.616,1.589 -7.542,9.171 z"
+       style="fill:#181716;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,93.778266,132.13318)"
+       clip-path="url(#clipPath2423)" />
+    <path
+       id="path2424"
+       d="M 0,0 C -4.847,-6.376 -4.623,-11.707 -4.905,-17.975"
+       style="fill:none;stroke:#706f6f;stroke-width:0.991;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.35277776,0,0,-0.35277776,98.564896,137.73162)"
+       clip-path="url(#clipPath2425)" />
+    <path
+       id="path2426"
+       d="m 0,0 c 1.042,-8.038 -0.653,-8.425 4.505,-9.353 3.191,-0.626 3.106,0.068 6.329,0.404 5.034,0.524 6.994,-4.337 6.994,-4.337 0,0 -1.752,16.023 -7.757,15.099 C 5.961,1.181 4.316,1.39 -0.18,1.39 c -9.312,0 0,0 0.18,-1.39"
+       style="fill:#ef9fb8;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,93.281628,144.77646)"
+       clip-path="url(#clipPath2427)" />
+    <path
+       id="path2428"
+       d="m 0,0 c 1.042,-8.038 -0.653,-8.425 4.505,-9.353 3.191,-0.626 3.106,0.068 6.329,0.404 5.034,0.524 6.994,-4.337 6.994,-4.337 0,0 -1.752,16.023 -7.757,15.099 C 5.961,1.181 4.316,1.39 -0.18,1.39 c -9.312,0 0,0 0.18,-1.39 z"
+       style="fill:none;stroke:#d2076f;stroke-width:0.614;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.35277776,0,0,-0.35277776,93.281628,144.77646)"
+       clip-path="url(#clipPath2429)" />
+    <path
+       id="path2430"
+       d="M 0,0 -6.35,0.747 -5.482,4.05 -0.346,2.699 Z"
+       style="fill:#e94d94;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,98.365578,118.80848)"
+       clip-path="url(#clipPath2431)" />
+    <path
+       id="path2432"
+       d="m 0,0 c 0.66,0.049 1.339,0.106 1.991,-0.04 0.572,-0.129 1.088,-0.407 1.565,-0.74 0.955,-0.666 1.75,-1.54 2.758,-2.134 0.575,-0.338 1.203,-0.567 1.872,-0.603 0.305,-0.017 0.304,0.458 0,0.474 C 6.982,-2.978 5.989,-2.175 5.111,-1.425 4.255,-0.694 3.366,0.087 2.253,0.384 1.517,0.58 0.751,0.531 0,0.474 -0.303,0.452 -0.305,-0.023 0,0"
+       style="fill:#d2076f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,92.269967,116.23349)"
+       clip-path="url(#clipPath2433)" />
+    <path
+       id="path2434"
+       d="M 0,0 C 0.704,-0.268 1.493,-0.295 2.237,-0.318 2.972,-0.34 3.733,-0.312 4.454,-0.435 4.617,-0.463 4.779,-0.499 4.935,-0.555 5.014,-0.583 5.021,-0.585 5.1,-0.627 5.13,-0.643 5.159,-0.66 5.188,-0.679 5.2,-0.687 5.212,-0.695 5.224,-0.703 c 0.041,-0.029 -0.022,0.019 0.02,-0.016 0.098,-0.082 0.239,-0.096 0.335,0 0.085,0.084 0.099,0.253 0,0.336 C 5.079,0.032 4.353,0.077 3.732,0.112 2.923,0.158 2.11,0.133 1.302,0.21 0.903,0.247 0.502,0.314 0.126,0.457 0.006,0.503 -0.134,0.407 -0.166,0.292 -0.202,0.158 -0.12,0.046 0,0"
+       style="fill:#d2076f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(0.35277776,0,0,-0.35277776,96.456485,118.61407)"
+       clip-path="url(#clipPath2435)" />
+    <path
+       id="path2436"
+       d="M 0,0 C 0.147,-1.492 0.198,-3.338 0,-3.882"
+       style="fill:#ef9fb8;fill-opacity:1;fill-rule:nonzero;stroke:#d2076f;stroke-width:0.991;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.35277776,0,0,-0.35277776,103.04923,143.66305)"
+       clip-path="url(#clipPath2437)" />
+    <path
+       id="path2438"
+       d="m 0,0 c 0,0 -3.7,-3.724 -2.94,-4.105 4.078,-1.939 2.334,-1.529 2.334,-1.529"
+       style="fill:none;stroke:#706f6f;stroke-width:0.991;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.35277776,0,0,-0.35277776,99.26128,136.96486)"
+       clip-path="url(#clipPath2439)" />
+    <path
+       id="path2440"
+       d="m 0,0 c 5.514,-0.058 19.794,-14.514 7.156,-24.599 -4.127,-3.293 -18.917,-1.666 -20.094,-1.513 2.722,5.917 -4.778,0.444 -3.18,2.914 5.569,0 15.496,7.558 18.238,9.476 C 5.748,-11.183 4.09,-6.65 0,0"
+       style="fill:#181716;fill-opacity:1;fill-rule:nonzero;stroke:#706f6f;stroke-width:0.991;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.35277776,0,0,-0.35277776,99.047428,138.95255)"
+       clip-path="url(#clipPath2441)" />
+    <path
+       id="path2442"
+       d="m 0,0 c -5.514,-0.058 -3.291,-12.992 3.045,-19.098 3.801,-3.664 16.333,2.968 19.085,4.402 0.889,2.114 0.524,4.728 -1.166,5.508 -5.569,0 -10.142,-0.952 -12.884,0.966 C 4.452,-5.683 6.68,0.07 0,0"
+       style="fill:#181716;fill-opacity:1;fill-rule:nonzero;stroke:#706f6f;stroke-width:0.991;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.35277776,0,0,-0.35277776,88.132376,140.8929)"
+       clip-path="url(#clipPath2443)" />
+    <path
+       id="path2444"
+       d="m 0,0 c -6.358,-0.145 -3.846,-6.073 -3.846,-6.073 0,0 4.386,1.18 6.493,0.794"
+       style="fill:#ef9fb8;fill-opacity:1;fill-rule:nonzero;stroke:#d2076f;stroke-width:0.614;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.35277776,0,0,-0.35277776,90.885455,141.86163)"
+       clip-path="url(#clipPath2445)" />
+    <path
+       id="path2446"
+       d="m 0,0 c -6.84,-0.089 -4.045,-6.073 -4.045,-6.073 0,0 4.386,1.18 6.493,0.794"
+       style="fill:none;stroke:#d2076f;stroke-width:0.614;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.35277776,0,0,-0.35277776,90.955517,141.86163)"
+       clip-path="url(#clipPath2447)" />
+  </g>
+</svg>
diff --git a/docs/public/images/insurance-flamingo.webp b/docs/public/images/insurance-flamingo.webp
new file mode 100644
index 0000000..93ed982
Binary files /dev/null and b/docs/public/images/insurance-flamingo.webp differ
diff --git a/docs/public/images/smm-demo.mp4 b/docs/public/images/smm-demo.mp4
new file mode 100644
index 0000000..ce17dd1
Binary files /dev/null and b/docs/public/images/smm-demo.mp4 differ
diff --git a/docs/public/images/social-juggler.png b/docs/public/images/social-juggler.png
new file mode 100644
index 0000000..d89cf8a
Binary files /dev/null and b/docs/public/images/social-juggler.png differ
diff --git a/docs/public/images/social-juggler.webp b/docs/public/images/social-juggler.webp
new file mode 100644
index 0000000..f806a8f
Binary files /dev/null and b/docs/public/images/social-juggler.webp differ
diff --git a/docs/public/images/workflow-1.png b/docs/public/images/workflow-1.png
new file mode 100644
index 0000000..8e72377
Binary files /dev/null and b/docs/public/images/workflow-1.png differ
diff --git a/docs/public/images/workflow-2.png b/docs/public/images/workflow-2.png
new file mode 100644
index 0000000..e2b5386
Binary files /dev/null and b/docs/public/images/workflow-2.png differ
diff --git a/docs/public/website/JavaScript.svg b/docs/public/website/JavaScript.svg
new file mode 100644
index 0000000..1f203d3
--- /dev/null
+++ b/docs/public/website/JavaScript.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 1052 1052"><path fill="#f0db4f" d="M0 0h1052v1052H0z"/><path d="M965.9 801.1c-7.7-48-39-88.3-131.7-125.9-32.2-14.8-68.1-25.399-78.8-49.8-3.8-14.2-4.3-22.2-1.9-30.8 6.9-27.9 40.2-36.6 66.6-28.6 17 5.7 33.1 18.801 42.8 39.7 45.4-29.399 45.3-29.2 77-49.399-11.6-18-17.8-26.301-25.4-34-27.3-30.5-64.5-46.2-124-45-10.3 1.3-20.699 2.699-31 4-29.699 7.5-58 23.1-74.6 44-49.8 56.5-35.6 155.399 25 196.1 59.7 44.8 147.4 55 158.6 96.9 10.9 51.3-37.699 67.899-86 62-35.6-7.4-55.399-25.5-76.8-58.4-39.399 22.8-39.399 22.8-79.899 46.1 9.6 21 19.699 30.5 35.8 48.7 76.2 77.3 266.899 73.5 301.1-43.5 1.399-4.001 10.6-30.801 3.199-72.101zm-394-317.6h-98.4c0 85-.399 169.4-.399 254.4 0 54.1 2.8 103.7-6 118.9-14.4 29.899-51.7 26.2-68.7 20.399-17.3-8.5-26.1-20.6-36.3-37.699-2.8-4.9-4.9-8.7-5.601-9-26.699 16.3-53.3 32.699-80 49 13.301 27.3 32.9 51 58 66.399 37.5 22.5 87.9 29.4 140.601 17.3 34.3-10 63.899-30.699 79.399-62.199 22.4-41.3 17.6-91.3 17.4-146.6.5-90.2 0-180.4 0-270.9z" fill="#323330"/></svg>
\ No newline at end of file
diff --git a/docs/public/website/React-dark.svg b/docs/public/website/React-dark.svg
new file mode 100644
index 0000000..ac4a120
--- /dev/null
+++ b/docs/public/website/React-dark.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="569px" height="512px" viewBox="0 0 569 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(-227, -256)" fill="#58C4DC" fill-rule="nonzero">
+            <g transform="translate(227, 256)">
+                <path d="M285.5,201 C255.400481,201 231,225.400481 231,255.5 C231,285.599519 255.400481,310 285.5,310 C315.599519,310 340,285.599519 340,255.5 C340,225.400481 315.599519,201 285.5,201" id="react_dark-Path"></path>
+                <path d="M568.959856,255.99437 C568.959856,213.207656 529.337802,175.68144 466.251623,150.985214 C467.094645,145.423543 467.85738,139.922107 468.399323,134.521063 C474.621631,73.0415145 459.808523,28.6686204 426.709856,9.5541429 C389.677085,-11.8291748 337.36955,3.69129898 284.479928,46.0162134 C231.590306,3.69129898 179.282771,-11.8291748 142.25,9.5541429 C109.151333,28.6686204 94.3382249,73.0415145 100.560533,134.521063 C101.102476,139.922107 101.845139,145.443621 102.708233,151.02537 C97.4493791,153.033193 92.2908847,155.161486 87.3331099,157.39017 C31.0111824,182.708821 0,217.765415 0,255.99437 C0,298.781084 39.6220545,336.307301 102.708233,361.003527 C101.845139,366.565197 101.102476,372.066633 100.560533,377.467678 C94.3382249,438.947226 109.151333,483.32012 142.25,502.434597 C153.629683,508.887578 166.52439,512.186771 179.603923,511.991836 C210.956328,511.991836 247.567589,495.487529 284.479928,465.972527 C321.372196,495.487529 358.003528,511.991836 389.396077,511.991836 C402.475265,512.183856 415.36922,508.884856 426.75,502.434597 C459.848667,483.32012 474.661775,438.947226 468.439467,377.467678 C467.897524,372.066633 467.134789,366.565197 466.291767,361.003527 C529.377946,336.347457 569,298.761006 569,255.99437 M389.155214,27.1025182 C397.565154,26.899606 405.877839,28.9368502 413.241569,33.0055186 C436.223966,46.2772304 446.540955,82.2775015 441.522965,131.770345 C441.181741,135.143488 440.780302,138.556788 440.298575,141.990165 C414.066922,134.08804 387.205771,128.452154 360.010724,125.144528 C343.525021,103.224055 325.192524,82.7564475 305.214266,63.9661533 C336.586743,39.7116483 366.032313,27.1025182 389.135142,27.1025182 M378.356498,310.205598 C368.204912,327.830733 357.150626,344.919965 345.237759,361.405091 C325.045049,363.479997 304.758818,364.51205 284.459856,364.497299 C264.167589,364.51136 243.888075,363.479308 223.702025,361.405091 C211.820914,344.919381 200.80007,327.83006 190.683646,310.205598 C180.532593,292.629285 171.306974,274.534187 163.044553,255.99437 C171.306974,237.454554 180.532593,219.359455 190.683646,201.783142 C200.784121,184.229367 211.770999,167.201087 223.601665,150.764353 C243.824636,148.63809 264.145559,147.579168 284.479928,147.591877 C304.772146,147.579725 325.051559,148.611772 345.237759,150.68404 C357.109048,167.14607 368.136094,184.201112 378.27621,201.783142 C388.419418,219.363718 397.644825,237.458403 405.915303,255.99437 C397.644825,274.530337 388.419418,292.625022 378.27621,310.205598 M419.724813,290.127366 C426.09516,307.503536 431.324985,325.277083 435.380944,343.334682 C417.779633,348.823635 399.836793,353.149774 381.668372,356.285142 C388.573127,345.871232 395.263781,335.035679 401.740334,323.778483 C408.143291,312.655143 414.144807,301.431411 419.805101,290.207679 M246.363271,390.377981 C258.848032,391.140954 271.593728,391.582675 284.5,391.582675 C297.406272,391.582675 310.232256,391.140954 322.737089,390.377981 C310.880643,404.583418 298.10766,417.997563 284.5,430.534446 C270.921643,417.999548 258.18192,404.585125 246.363271,390.377981 Z M187.311556,356.244986 C169.137286,353.123646 151.187726,348.810918 133.578912,343.334682 C137.618549,325.305649 142.828222,307.559058 149.174827,290.207679 C154.754833,301.431411 160.736278,312.655143 167.239594,323.778483 C173.74291,334.901824 180.467017,345.864539 187.311556,356.285142 M149.174827,221.760984 C142.850954,204.473938 137.654787,186.794745 133.619056,168.834762 C151.18418,163.352378 169.085653,159.013101 187.211197,155.844146 C180.346585,166.224592 173.622478,176.986525 167.139234,188.210257 C160.65599,199.433989 154.734761,210.517173 149.074467,221.760984 M322.616657,121.590681 C310.131896,120.827708 297.3862,120.385987 284.379568,120.385987 C271.479987,120.385987 258.767744,120.787552 246.242839,121.590681 C258.061488,107.383537 270.801211,93.9691137 284.379568,81.4342157 C297.99241,93.9658277 310.765727,107.380324 322.616657,121.590681 Z M401.70019,188.210257 C395.196875,176.939676 388.472767,166.09743 381.527868,155.68352 C399.744224,158.819049 417.734224,163.151949 435.380944,168.654058 C431.331963,186.680673 426.122466,204.426664 419.785029,221.781062 C414.205023,210.55733 408.203506,199.333598 401.720262,188.230335 M127.517179,131.790423 C122.438973,82.3176579 132.816178,46.2973086 155.778503,33.0255968 C163.144699,28.9632474 171.455651,26.9264282 179.864858,27.1225964 C202.967687,27.1225964 232.413257,39.7317265 263.785734,63.9862316 C243.794133,82.7898734 225.448298,103.270812 208.949132,125.204763 C181.761691,128.528025 154.90355,134.14313 128.661281,141.990165 C128.199626,138.556788 127.778115,135.163566 127.456963,131.790423 M98.4529773,182.106474 C101.54406,180.767925 104.695358,179.429376 107.906872,178.090828 C114.220532,204.735668 122.781793,230.7969 133.498624,255.99437 C122.761529,281.241316 114.193296,307.357063 107.8868,334.058539 C56.7434387,313.076786 27.0971497,284.003505 27.0971497,255.99437 C27.0971497,229.450947 53.1907013,202.526037 98.4529773,182.106474 Z M155.778503,478.963143 C132.816178,465.691432 122.438973,429.671082 127.517179,380.198317 C127.838331,376.825174 128.259842,373.431953 128.721497,369.978497 C154.953686,377.878517 181.814655,383.514365 209.009348,386.824134 C225.500295,408.752719 243.832321,429.233234 263.805806,448.042665 C220.069,481.834331 180.105722,492.97775 155.838719,478.963143 M441.502893,380.198317 C446.520883,429.691161 436.203894,465.691432 413.221497,478.963143 C388.974566,493.017906 348.991216,481.834331 305.274481,448.042665 C325.241364,429.232737 343.566681,408.752215 360.050868,386.824134 C387.245915,383.516508 414.107066,377.880622 440.338719,369.978497 C440.820446,373.431953 441.221885,376.825174 441.563109,380.198317 M461.193488,334.018382 C454.869166,307.332523 446.294494,281.231049 435.561592,255.99437 C446.289797,230.744081 454.857778,204.629101 461.173416,177.930202 C512.216417,198.911955 541.942994,227.985236 541.942994,255.99437 C541.942994,284.003505 512.296705,313.076786 461.153344,334.058539" id="react_dark-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/docs/public/website/React-light.svg b/docs/public/website/React-light.svg
new file mode 100644
index 0000000..40969eb
--- /dev/null
+++ b/docs/public/website/React-light.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="569px" height="512px" viewBox="0 0 569 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g fill="none" fill-rule="evenodd">
+        <g fill="#087EA4" fill-rule="nonzero">
+            <path d="M285.5,201 C255.400481,201 231,225.400481 231,255.5 C231,285.599519 255.400481,310 285.5,310 C315.599519,310 340,285.599519 340,255.5 C340,225.400481 315.599519,201 285.5,201" id="react_light-Path"></path>
+            <path d="M568.959856,255.99437 C568.959856,213.207656 529.337802,175.68144 466.251623,150.985214 C467.094645,145.423543 467.85738,139.922107 468.399323,134.521063 C474.621631,73.0415145 459.808523,28.6686204 426.709856,9.5541429 C389.677085,-11.8291748 337.36955,3.69129898 284.479928,46.0162134 C231.590306,3.69129898 179.282771,-11.8291748 142.25,9.5541429 C109.151333,28.6686204 94.3382249,73.0415145 100.560533,134.521063 C101.102476,139.922107 101.845139,145.443621 102.708233,151.02537 C97.4493791,153.033193 92.2908847,155.161486 87.3331099,157.39017 C31.0111824,182.708821 0,217.765415 0,255.99437 C0,298.781084 39.6220545,336.307301 102.708233,361.003527 C101.845139,366.565197 101.102476,372.066633 100.560533,377.467678 C94.3382249,438.947226 109.151333,483.32012 142.25,502.434597 C153.629683,508.887578 166.52439,512.186771 179.603923,511.991836 C210.956328,511.991836 247.567589,495.487529 284.479928,465.972527 C321.372196,495.487529 358.003528,511.991836 389.396077,511.991836 C402.475265,512.183856 415.36922,508.884856 426.75,502.434597 C459.848667,483.32012 474.661775,438.947226 468.439467,377.467678 C467.897524,372.066633 467.134789,366.565197 466.291767,361.003527 C529.377946,336.347457 569,298.761006 569,255.99437 M389.155214,27.1025182 C397.565154,26.899606 405.877839,28.9368502 413.241569,33.0055186 C436.223966,46.2772304 446.540955,82.2775015 441.522965,131.770345 C441.181741,135.143488 440.780302,138.556788 440.298575,141.990165 C414.066922,134.08804 387.205771,128.452154 360.010724,125.144528 C343.525021,103.224055 325.192524,82.7564475 305.214266,63.9661533 C336.586743,39.7116483 366.032313,27.1025182 389.135142,27.1025182 M378.356498,310.205598 C368.204912,327.830733 357.150626,344.919965 345.237759,361.405091 C325.045049,363.479997 304.758818,364.51205 284.459856,364.497299 C264.167589,364.51136 243.888075,363.479308 223.702025,361.405091 C211.820914,344.919381 200.80007,327.83006 190.683646,310.205598 C180.532593,292.629285 171.306974,274.534187 163.044553,255.99437 C171.306974,237.454554 180.532593,219.359455 190.683646,201.783142 C200.784121,184.229367 211.770999,167.201087 223.601665,150.764353 C243.824636,148.63809 264.145559,147.579168 284.479928,147.591877 C304.772146,147.579725 325.051559,148.611772 345.237759,150.68404 C357.109048,167.14607 368.136094,184.201112 378.27621,201.783142 C388.419418,219.363718 397.644825,237.458403 405.915303,255.99437 C397.644825,274.530337 388.419418,292.625022 378.27621,310.205598 M419.724813,290.127366 C426.09516,307.503536 431.324985,325.277083 435.380944,343.334682 C417.779633,348.823635 399.836793,353.149774 381.668372,356.285142 C388.573127,345.871232 395.263781,335.035679 401.740334,323.778483 C408.143291,312.655143 414.144807,301.431411 419.805101,290.207679 M246.363271,390.377981 C258.848032,391.140954 271.593728,391.582675 284.5,391.582675 C297.406272,391.582675 310.232256,391.140954 322.737089,390.377981 C310.880643,404.583418 298.10766,417.997563 284.5,430.534446 C270.921643,417.999548 258.18192,404.585125 246.363271,390.377981 Z M187.311556,356.244986 C169.137286,353.123646 151.187726,348.810918 133.578912,343.334682 C137.618549,325.305649 142.828222,307.559058 149.174827,290.207679 C154.754833,301.431411 160.736278,312.655143 167.239594,323.778483 C173.74291,334.901824 180.467017,345.864539 187.311556,356.285142 M149.174827,221.760984 C142.850954,204.473938 137.654787,186.794745 133.619056,168.834762 C151.18418,163.352378 169.085653,159.013101 187.211197,155.844146 C180.346585,166.224592 173.622478,176.986525 167.139234,188.210257 C160.65599,199.433989 154.734761,210.517173 149.074467,221.760984 M322.616657,121.590681 C310.131896,120.827708 297.3862,120.385987 284.379568,120.385987 C271.479987,120.385987 258.767744,120.787552 246.242839,121.590681 C258.061488,107.383537 270.801211,93.9691137 284.379568,81.4342157 C297.99241,93.9658277 310.765727,107.380324 322.616657,121.590681 Z M401.70019,188.210257 C395.196875,176.939676 388.472767,166.09743 381.527868,155.68352 C399.744224,158.819049 417.734224,163.151949 435.380944,168.654058 C431.331963,186.680673 426.122466,204.426664 419.785029,221.781062 C414.205023,210.55733 408.203506,199.333598 401.720262,188.230335 M127.517179,131.790423 C122.438973,82.3176579 132.816178,46.2973086 155.778503,33.0255968 C163.144699,28.9632474 171.455651,26.9264282 179.864858,27.1225964 C202.967687,27.1225964 232.413257,39.7317265 263.785734,63.9862316 C243.794133,82.7898734 225.448298,103.270812 208.949132,125.204763 C181.761691,128.528025 154.90355,134.14313 128.661281,141.990165 C128.199626,138.556788 127.778115,135.163566 127.456963,131.790423 M98.4529773,182.106474 C101.54406,180.767925 104.695358,179.429376 107.906872,178.090828 C114.220532,204.735668 122.781793,230.7969 133.498624,255.99437 C122.761529,281.241316 114.193296,307.357063 107.8868,334.058539 C56.7434387,313.076786 27.0971497,284.003505 27.0971497,255.99437 C27.0971497,229.450947 53.1907013,202.526037 98.4529773,182.106474 Z M155.778503,478.963143 C132.816178,465.691432 122.438973,429.671082 127.517179,380.198317 C127.838331,376.825174 128.259842,373.431953 128.721497,369.978497 C154.953686,377.878517 181.814655,383.514365 209.009348,386.824134 C225.500295,408.752719 243.832321,429.233234 263.805806,448.042665 C220.069,481.834331 180.105722,492.97775 155.838719,478.963143 M441.502893,380.198317 C446.520883,429.691161 436.203894,465.691432 413.221497,478.963143 C388.974566,493.017906 348.991216,481.834331 305.274481,448.042665 C325.241364,429.232737 343.566681,408.752215 360.050868,386.824134 C387.245915,383.516508 414.107066,377.880622 440.338719,369.978497 C440.820446,373.431953 441.221885,376.825174 441.563109,380.198317 M461.193488,334.018382 C454.869166,307.332523 446.294494,281.231049 435.561592,255.99437 C446.289797,230.744081 454.857778,204.629101 461.173416,177.930202 C512.216417,198.911955 541.942994,227.985236 541.942994,255.99437 C541.942994,284.003505 512.296705,313.076786 461.153344,334.058539" id="react_light-Shape"></path>
+        </g>
+    </g>
+</svg>
diff --git a/docs/public/website/Vue.svg b/docs/public/website/Vue.svg
new file mode 100644
index 0000000..c06c98e
--- /dev/null
+++ b/docs/public/website/Vue.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 256 221" width="256" height="221" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M204.8 0H256L128 220.8 0 0h97.92L128 51.2 157.44 0h47.36Z" fill="#41B883"/><path d="m0 0 128 220.8L256 0h-51.2L128 132.48 50.56 0H0Z" fill="#41B883"/><path d="M50.56 0 128 133.12 204.8 0h-47.36L128 51.2 97.92 0H50.56Z" fill="#35495E"/></svg>
\ No newline at end of file
diff --git a/docs/public/website/ai-agent-icon.png b/docs/public/website/ai-agent-icon.png
new file mode 100644
index 0000000..839042f
Binary files /dev/null and b/docs/public/website/ai-agent-icon.png differ
diff --git a/docs/public/website/attribution-icon.png b/docs/public/website/attribution-icon.png
new file mode 100644
index 0000000..5756b00
Binary files /dev/null and b/docs/public/website/attribution-icon.png differ
diff --git a/docs/public/website/cursors-focus.png b/docs/public/website/cursors-focus.png
new file mode 100644
index 0000000..5b23c4e
Binary files /dev/null and b/docs/public/website/cursors-focus.png differ
diff --git a/docs/public/website/enterprise-icon.png b/docs/public/website/enterprise-icon.png
new file mode 100644
index 0000000..6c14362
Binary files /dev/null and b/docs/public/website/enterprise-icon.png differ
diff --git a/docs/public/website/free-icon.png b/docs/public/website/free-icon.png
new file mode 100644
index 0000000..e8c9332
Binary files /dev/null and b/docs/public/website/free-icon.png differ
diff --git a/docs/public/website/history-icon.png b/docs/public/website/history-icon.png
new file mode 100644
index 0000000..a2ddc73
Binary files /dev/null and b/docs/public/website/history-icon.png differ
diff --git a/docs/public/website/jacky-koh.jpeg b/docs/public/website/jacky-koh.jpeg
new file mode 100644
index 0000000..45378eb
Binary files /dev/null and b/docs/public/website/jacky-koh.jpeg differ
diff --git a/docs/public/website/production-icon.png b/docs/public/website/production-icon.png
new file mode 100644
index 0000000..04a5bb3
Binary files /dev/null and b/docs/public/website/production-icon.png differ
diff --git a/docs/public/website/rtc-icon.png b/docs/public/website/rtc-icon.png
new file mode 100644
index 0000000..0743873
Binary files /dev/null and b/docs/public/website/rtc-icon.png differ
diff --git a/docs/public/website/video/support-demo.mp4 b/docs/public/website/video/support-demo.mp4
new file mode 100644
index 0000000..3a0c486
Binary files /dev/null and b/docs/public/website/video/support-demo.mp4 differ
diff --git a/docs/public/website/video/support-demo.vtt b/docs/public/website/video/support-demo.vtt
new file mode 100644
index 0000000..c97850e
--- /dev/null
+++ b/docs/public/website/video/support-demo.vtt
@@ -0,0 +1,65 @@
+WEBVTT
+
+00:00:00.880 --> 00:00:06.879
+ We made this for an insurance company where they wanted to use Gumnut to improve their support
+
+00:00:06.879 --> 00:00:13.279
+ processes to support customers filling in a long complicated form. So this is a long health
+
+00:00:13.279 --> 00:00:25.160
+ insurance form and like everything in Gumnut it's multi-user so if I open another tab and see the same fields you'll see the other users connected to this
+
+00:00:25.160 --> 00:00:33.000
+ form and this form has conditionals across the tabs so you'll see that
+
+00:00:33.000 --> 00:00:37.460
+ different sub options are rendered across multiple tabs depending on which
+
+00:00:37.460 --> 00:00:41.000
+ user fills them in and of course all the other fields could be filled in on any
+
+00:00:41.000 --> 00:00:46.320
+ on any page but the thing that we added for them
+
+00:00:46.320 --> 00:00:48.659
+ is there's some support features.
+
+00:00:48.659 --> 00:00:51.979
+ And so on their admin page,
+
+00:00:54.659 --> 00:00:57.659
+ these are the same fields, but in a different UI.
+
+00:01:00.600 --> 00:01:02.780
+ And so what they've got on the right-hand side
+
+00:01:02.780 --> 00:01:05.000
+ is the support page, on the left hand side is the field.
+
+00:01:05.000 --> 00:01:10.000
+ So when the support user opens the tab, you'll see them join.
+
+00:01:10.000 --> 00:01:15.000
+ But we added some features to them, which was sometimes these fields are long and complicated,
+
+00:01:15.000 --> 00:01:22.000
+ and finding a user inside their system is actually quite not necessarily easy.
+
+00:01:22.000 --> 00:01:28.000
+ So we added a jump to user button so they can jump to the user or even follow the user around.
+
+00:01:28.000 --> 00:01:33.299
+ So as they navigate the field, they can fill in all of the questions
+
+00:01:33.299 --> 00:01:39.200
+ over the phone with the customer and make sure they get all of the information that's correct.
+
+00:01:40.400 --> 00:01:44.900
+ Either of them can type it in so they can type in the correct numbers
+
+00:01:44.900 --> 00:01:47.219
+ and that the support staff can type it in so they can type in the correct numbers and that the support staff can type it in for them
+
+00:01:47.219 --> 00:01:52.680
+ And they can collaborate to ensure the customer has a great experience using their product
+
diff --git a/docs/questions.md b/docs/questions.md
new file mode 100644
index 0000000..d0172b4
--- /dev/null
+++ b/docs/questions.md
@@ -0,0 +1,183 @@
+---
+title: Questions Hub
+outline: false
+aside: false
+sidebar: false
+prev: false
+next: false
+---
+
+# Questions Hub
+
+Find answers to common questions about Gumnut and collaborative editing.
+
+<div class="questions-page">
+
+## Frequently Asked Questions
+
+<div class="faq-container">
+  <div class="faq-item">
+    <button class="faq-question" @click="toggleFaq($event)">
+      How does Gumnut integrate with my SaaS?
+      <span class="faq-icon">+</span>
+    </button>
+    <div class="faq-answer" ref="answer1">
+      <p>Gumnut hosts a 'global session' for each of your document which is joined behind-the-scenes via WebSocket.</p>
+      <p>Add a React or similar library to your front-end, which acts a bit like React Hook Form but with collaborative superpowers. Your backend needs to provide a signed JWT, signed such that Gumnut can verify the end-user and they can join the session.</p>
+    </div>
+  </div>
+
+  <div class="faq-item">
+    <button class="faq-question" @click="toggleFaq($event)">
+      What happens to my data?
+      <span class="faq-icon">+</span>
+    </button>
+    <div class="faq-answer" ref="answer2">
+      <p>Gumnut holds your data during a global session, and stores long-term snapshots over time to keep your audit trail ready. This is stored on AWS in a region of your choice (if Enterprise, wherever your data is hosted).</p>
+      <p>Gumnut can also be self-hosted, connect to a database platform you provide for long-term storage, and even be fully-encrypted so even Gumnut cannot see it.</p>
+    </div>
+  </div>
+
+  <div class="faq-item">
+    <button class="faq-question" @click="toggleFaq($event)">
+      How do you differ from other collaborative platforms?
+      <span class="faq-icon">+</span>
+    </button>
+    <div class="faq-answer" ref="answer3">
+      <p>Gumnut has a novel primitive; we host an edit session until your users commit. Other comparable platforms provide generic "collaborative rooms" that are not designed for the completion step of editing HTML forms.</p>
+      <p>We go to where your technology is: you don't need to change your database, stack or swap to rich-text editors. Your site is brand-new? Great. Your site is a 10-yr old multi-page app using jQuery? We support you too.</p>
+    </div>
+  </div>
+</div>
+
+<div class="questions-cta">
+
+## Still Have Questions?
+
+If you can't find the answer you're looking for, [contact our support team](mailto:support@gumnut.dev) or join our [Discord community](https://discord.gg/yu3u87AUNR).
+
+</div>
+
+</div>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const answer1 = ref(null)
+const answer2 = ref(null)
+const answer3 = ref(null)
+
+function toggleFaq(event) {
+  const button = event.currentTarget
+  const answer = button.nextElementSibling
+  const icon = button.querySelector('.faq-icon')
+  
+  if (answer.style.display === 'block') {
+    answer.style.display = 'none'
+    icon.textContent = '+'
+    button.classList.remove('active')
+  } else {
+    answer.style.display = 'block'
+    icon.textContent = '−'
+    button.classList.add('active')
+  }
+}
+</script>
+
+<style>
+.questions-page {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.faq-container {
+  margin: 2rem 0;
+}
+
+.faq-item {
+  margin-bottom: 1rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.faq-question {
+  width: 100%;
+  padding: 1.5rem;
+  background: var(--vp-c-bg);
+  border: none;
+  text-align: left;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: background-color 0.2s ease;
+}
+
+.faq-question:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+.faq-question.active {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-brand);
+}
+
+.faq-icon {
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: var(--vp-c-brand);
+  transition: transform 0.2s ease;
+}
+
+.faq-answer {
+  display: none;
+  padding: 0 1.5rem 1.5rem;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+}
+
+.faq-answer p {
+  margin-bottom: 1rem;
+}
+
+.faq-answer p:last-child {
+  margin-bottom: 0;
+}
+
+.questions-cta {
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 2rem 0;
+  text-align: center;
+}
+
+.questions-cta h2 {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+  color: var(--vp-c-text-1);
+}
+
+.questions-cta p {
+  color: var(--vp-c-text-2);
+}
+
+.questions-cta a {
+  color: var(--vp-c-brand-1);
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.questions-cta a:hover {
+  color: var(--vp-c-brand-2);
+}
+</style>
diff --git a/firebase.json b/firebase.json
index 02d309a..539a3c6 100644
--- a/firebase.json
+++ b/firebase.json
@@ -1,19 +1,8 @@
 {
   "hosting": [
-    {
-      "target": "docs",
-      "public": "docs/.vitepress/dist",
-      "ignore": [],
-      "rewrites": [
-        {
-          "source": "**",
-          "destination": "/index.html"
-        }
-      ]
-    },
     {
       "target": "blog",
-      "public": "blog/.vitepress/dist",
+      "public": "docs/.vitepress/dist",
       "ignore": [],
       "cleanUrls": true,
       "trailingSlash": false,
@@ -38,6 +27,14 @@
           "source": "/articles/**",
           "destination": "/articles/**"
         },
+        {
+          "source": "/case-studies/**",
+          "destination": "/case-studies/**"
+        },
+        {
+          "source": "/docs/**",
+          "destination": "/docs/**"
+        },
         {
           "source": "/",
           "destination": "/index.html"
diff --git a/package.json b/package.json
index 9e18b9e..3b8e497 100644
--- a/package.json
+++ b/package.json
@@ -7,14 +7,10 @@
     "vue": "^3.5.13"
   },
   "scripts": {
-    "build": "node --run docs:build blog:build",
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs",
-    "blog:dev": "vitepress dev blog",
-    "blog:build": "vitepress build blog",
-    "blog:preview": "vitepress build blog && vitepress preview blog",
-    "blog:deploy": "vitepress build blog && firebase deploy --only hosting:blog"
+    "build": "vitepress build docs",
+    "dev": "vitepress dev docs",
+    "preview": "vitepress preview docs",
+    "deploy": "vitepress build docs && firebase deploy --only hosting:blog"
   },
   "dependencies": {
     "markdown-it-implicit-figures": "^0.12.0",