feat(docs): update & make getting started as first page

docs/astro.config.mjs

@@ -19,8 +19,8 @@ export default defineConfig({
           label: 'Guides',
           items: [
             // Each item here is one entry in the navigation menu.
-            'why',
             'getting-started',
+            'why',
             'exports',
             'usage',
             'examples',

docs/src/content/docs/guides/getting-started.mdx

@@ -3,6 +3,8 @@ title: Getting Started
 slug: getting-started
 ---
 
+import { Aside } from '@astrojs/starlight/components';
+
 **Web Component Base (WCB)** is a zero-dependency, tiny JS base class for creating reactive [custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_custom_elements) easily.
 
 When you extend the WebComponent class for your component, you only have to define the template and properties. Any change in any property value will automatically cause just the component UI to render.
@@ -11,9 +13,11 @@ The result is a reactive UI on property changes.
 
 ## Project Status
 
-It is ready for many simple cases we see people use custom elements for. If you have a cool project built on **WebComponent.io** we'd love to know! :)
+Treat it as an **alpha** product. Most examples are only useful for simple atomic use-cases at the moment. If you have a cool project using **WebComponent.io** we'd love to know! :)
 
-For building advanced interactions, we have an in-progress work on smart diffing to prevent component children being wiped on interaction.
+<Aside type="caution" title="Important">
+For building advanced interactions, there is an in-progress work on smart diffing to prevent component children being wiped on interaction.
+</Aside>
 
 In the mean time, if you have some complex needs, we recommend using the `WebComponent` base class with a more mature rendering approach like `lit-html`... and here's a demo for that: [View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010).
 

docs/src/content/docs/index.mdx

@@ -8,7 +8,7 @@ hero:
   #   file: ../../assets/houston.webp
   actions:
     - text: Get Started
-      link: /why
+      link: /getting-started
       icon: right-arrow
     - text: Play on CodePen
       link: https://codepen.io/ayoayco-the-styleful/pen/PoVegBK?editors=1010