Update homepage and styles

Author: rjewett459

docs/intro.md

@@ -1,10 +1,35 @@
----
-sidebar_position: 1
----
+import React from 'react';
+import Layout from '@theme/Layout';
+import styles from './index.module.css';
 
-# Welcome to SPID Protocol
+export default function Home() {
+  return (
+    <Layout title="SPID Protocol" description="Smart Packets. Structured Answers. Voice-Ready.">
+      <main className="container margin-vert--lg">
+        <div className="row">
+          <div className="col col--8 col--offset-2">
+            <h1>SPID Protocol</h1>
+            <p className="hero__subtitle">Smart Packets. Structured Answers. Voice-Ready.</p>
 
-This is your SPID Protocol documentation.  
-Feel free to update this page or add more!
+            <h2>What is SPID?</h2>
+            <p>SPID is a resolution and retrieval protocol for AI agents, apps, and users...</p>
 
-Learn more: [https://spidprotocol.org](https://spidprotocol.org)
+            <h2>Why It Matters</h2>
+            <p><code>spid://acme/widget123</code> → Instantly retrieves the structured packet</p>
+
+            <h2>Key Components</h2>
+            <ul>
+              <li><strong>Smart Packet Format</strong></li>
+              <li><strong>SPID URIs</strong></li>
+              <li><strong>SPID Directory</strong></li>
+              <li><strong>PulseIDs</strong></li>
+            </ul>
+
+            <h2>Get Involved</h2>
+            <p>Email: <a href="mailto:hello@voicemate.id">hello@voicemate.id</a></p>
+          </div>
+        </div>
+      </main>
+    </Layout>
+  );
+}

docusaurus.config.js

@@ -31,34 +31,44 @@ 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',
+  navbar: {
+    title: 'SPID Protocol',
+    logo: {
+      alt: 'SPID Protocol Logo',
+      src: 'img/logo.svg',
     },
-    prism: {
-      theme: lightCodeTheme,
-      darkTheme: darkCodeTheme,
+    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',
+      },
+    ],
+  },
+  colorMode: {
+    defaultMode: 'dark',
+    disableSwitch: false,
+    respectPrefersColorScheme: true,
+  },
+  prism: {
+    theme: require('prism-react-renderer/themes/github'),
+    darkTheme: require('prism-react-renderer/themes/dracula'),
+  },
+  docs: {
+    sidebar: {
+      hideable: true,
+      autoCollapseCategories: true,
     },
   },
+},
 };