feat: restructure project and update documentation

src/docs/guide/getting-started.md

@@ -0,0 +1,76 @@
+# Getting Started
+
+**SigPro** is a lightweight, atomic reactive engine designed to build modern web interfaces with zero overhead. It focuses on high performance through fine-grained reactivity.
+
+## 1. Installation
+
+You can install SigPro via your favorite package manager:
+
+::: code-group
+```bash [npm]
+npm install SigPro
+````
+
+```bash [pnpm]
+pnpm add SigPro
+```
+
+```bash [yarn]
+yarn add SigPro
+```
+```bash [bun]
+bun add SigPro
+```
+:::
+
+## 2\. Basic Usage
+
+The core of SigPro is the `$` function, which creates reactive state (Signals) and computed effects.
+
+Create a `main.js` file and try this:
+
+```javascript
+import { $ } from 'SigPro';
+
+// 1. Create a reactive signal
+const $name = $("World");
+
+// 2. Define a reactive component
+const App = () => div({ class: 'container' }, [
+  h1(["Hello, ", $name, "!"]),
+  
+  input({ 
+    type: 'text', 
+    $value: $name, // Two-way binding
+    placeholder: 'Enter your name...' 
+  }),
+  
+  button({ 
+    onclick: () => $name("SigPro") 
+  }, "Set to SigPro")
+]);
+
+// 3. Mount the application
+$.mount(App, '#app');
+```
+
+## 3\. How it Works
+
+SigPro doesn't use a Virtual DOM. Instead, it creates real DOM nodes and binds them directly to your data:
+
+1.  **Signals**: `$(value)` creates a getter/setter function.
+2.  **Reactivity**: When you pass a signal or a function to a DOM element, SigPro automatically creates a subscription.
+3.  **Fine-Grained Updates**: Only the specific text node or attribute linked to the signal updates when the value changes.
+
+## 4\. Global Tags
+
+By default, SigPro exports common HTML tags to the global scope (`window`) when initialized. This allows you to write clean, declarative UI without importing every single tag:
+
+```javascript
+// Instead of $.html('div', ...), just use:
+div([
+  h1("Clean Syntax"),
+  p("No more boilerplate.")
+]);
+```
+