Update homepage content

Author: rjewett459

docs/intro.md

@@ -2,46 +2,9 @@
 sidebar_position: 1
 ---
 
-# Tutorial Intro
+# Welcome to SPID Protocol
 
-Let's discover **Docusaurus in less than 5 minutes**.
+This is your SPID Protocol documentation.  
+Feel free to update this page or add more!
 
-## Getting Started
-
-Get started by **creating a new site**.
-
-Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
-
-### What you'll need
-
-- [Node.js](https://nodejs.org/en/download/) version 18.0 or above:
-  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
-
-## Generate a new site
-
-Generate a new Docusaurus site using the **classic template**.
-
-The classic template will automatically be added to your project after you run the command:
-
-```bash
-npm init docusaurus@latest my-website classic
-```
-
-You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
-
-The command also installs all necessary dependencies you need to run Docusaurus.
-
-## Start your site
-
-Run the development server:
-
-```bash
-cd my-website
-npm run start
-```
-
-The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
-
-The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
-
-Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
+Learn more: [https://spidprotocol.org](https://spidprotocol.org)

docusaurus.config.js

@@ -1,22 +1,25 @@
-// docusaurus.config.js
+const lightCodeTheme = require('prism-react-renderer/themes/github');
+const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+
 module.exports = {
   title: 'SPID Protocol',
   tagline: 'Smart Packets. Structured Answers. Voice-Ready.',
-  url: 'https://SPID-Protocol-project.github.io', // GitHub org/user URL
-  baseUrl: '/spidprotocol-docs/',                // GitHub repo name with slashes
+  url: 'https://SPID-Protocol-project.github.io',
+  baseUrl: '/spidprotocol-docs/',
   organizationName: 'SPID-Protocol-project',
   projectName: 'spidprotocol-docs',
   deploymentBranch: 'gh-pages',
   trailingSlash: false,
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
+
   presets: [
     [
       'classic',
       {
         docs: {
-          routeBasePath: '/',
+          routeBasePath: '/docs',
           sidebarPath: require.resolve('./sidebars.js'),
         },
         blog: false,
@@ -26,4 +29,36 @@ module.exports = {
       },
     ],
   ],
+
+  themeConfig: {
+    navbar: {
+      title: 'SPID Protocol',
+      logo: {
+        alt: 'SPID Protocol Logo',
+        src: 'img/logo.svg',
+      },
+      items: [
+        {
+          type: 'doc',
+          docId: 'intro',
+          position: 'left',
+          label: 'Docs',
+        },
+        {
+          href: 'https://github.com/SPID-Protocol-project/spidprotocol-docs',
+          label: 'GitHub',
+          position: 'right',
+        },
+        {
+          type: 'search',
+          position: 'right',
+        },
+      ],
+      style: 'dark',
+    },
+    prism: {
+      theme: lightCodeTheme,
+      darkTheme: darkCodeTheme,
+    },
+  },
 };

package-lock.json

@@ -18,7 +18,7 @@
     "@docusaurus/preset-classic": "3.7.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
-    "prism-react-renderer": "^2.3.0",
+    "prism-react-renderer": "^1.3.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package.json

@@ -1,42 +1,46 @@
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import React from 'react';
 import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-
-import Heading from '@theme/Heading';
 import styles from './index.module.css';
 
-function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
-  return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <Heading as="h1" className="hero__title">
-          {siteConfig.title}
-        </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
-          </Link>
-        </div>
-      </div>
-    </header>
-  );
-}
-
 export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
+      title="SPID Protocol"
+      description="Smart Packets. Structured Answers. Voice-Ready.">
+      <header className={styles.hero}>
+        <div className={styles.container}>
+          <h1 className={styles.title}>SPID Protocol</h1>
+          <p className={styles.tagline}>Smart Packets. Structured Answers. Voice-Ready.</p>
+        </div>
+      </header>
+      <main className={styles.main}>
+        <section className={styles.section}>
+          <h2>🔍 What is SPID?</h2>
+          <p>
+            SPID is a resolution and retrieval protocol for AI agents, apps, and users to access structured,
+            voice-ready content units called Smart Packets — complete with transcripts, metadata, intents, and CTAs.
+          </p>
+        </section>
+        <section className={styles.section}>
+          <h2>🚀 Why It Matters</h2>
+          <p>
+            SPID replaces guesswork and scraping with resolution. For example:<br />
+            <code>spid://acme/widget123</code> → instantly retrieves the structured packet.
+          </p>
+        </section>
+        <section className={styles.section}>
+          <h2>📦 Key Components</h2>
+          <ul>
+            <li><strong>Smart Packet Format</strong> — Self-contained, structured answers</li>
+            <li><strong>SPID URIs</strong> — Globally unique addresses</li>
+            <li><strong>SPID Directory</strong> — Central resolution service</li>
+            <li><strong>PulseIDs</strong> — Async inboxes for agents and people</li>
+          </ul>
+        </section>
+        <section className={styles.section}>
+          <h2>💬 Get Involved</h2>
+          <p>Email us at <a href="mailto:hello@voicemate.id">hello@voicemate.id</a> or visit <a href="https://spid.directory">spid.directory</a>.</p>
+        </section>
       </main>
     </Layout>
   );

src/pages/index.js

@@ -1,23 +1,35 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-.heroBanner {
-  padding: 4rem 0;
+.hero {
+  background-color: #000;
+  color: #fff;
+  padding: 4rem 1rem;
   text-align: center;
-  position: relative;
-  overflow: hidden;
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.title {
+  font-size: 3rem;
+  font-weight: 700;
+}
+
+.tagline {
+  font-size: 1.25rem;
+  margin-top: 1rem;
+}
+
+.main {
+  padding: 2rem 1rem;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.section {
+  margin-bottom: 2.5rem;
 }
 
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.section h2 {
+  margin-bottom: 0.75rem;
 }