feat(docs): add why page

docs/astro.config.mjs

@@ -17,6 +17,7 @@ export default defineConfig({
           items: [
             // Each item here is one entry in the navigation menu.
             { label: 'Getting Started', slug: 'guides' },
+            { label: 'Why?', slug: 'why' },
           ],
         },
         {

docs/src/content/docs/guides/why.md

@@ -0,0 +1,12 @@
+---
+title: Why use this base class?
+slug: 'why'
+---
+
+Often times, when simple websites need a quick custom element, the best way is still to create one extending from `HTMLElement`. However, it can quickly reach a point where writing the code from scratch can seem confusing and hard to maintain especially when compared to other projects with more advanced setups.
+
+Also, when coming from frameworks with an easy declarative coding experience (using templates), the default imperative way (e.g., creating instances of elements, manually attaching event handlers, and other DOM manipulations) is a frequent pain point we see.
+
+This project aims to address these with virtually zero tooling required and thin abstractions from vanilla custom element APIs – giving you only the bare minimum code to be productive.
+
+It works on current-day browsers without needing compilers, transpilers, or polyfills.

docs/src/content/docs/index.mdx

@@ -7,30 +7,29 @@ hero:
   # image:
   #   file: ../../assets/houston.webp
   actions:
-    - text: Example Guide
+    - text: Get Started
-      link: /guides/example/
+      link: /guides/
       icon: right-arrow
-    - text: Read the Starlight docs
+    - text: Play on CodePen
-      link: https://starlight.astro.build
+      link: https://codepen.io/ayoayco-the-styleful/pen/PoVegBK?editors=1010
       icon: external
       variant: minimal
 ---
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
 
-## Next steps
-
 <CardGrid stagger>
-	<Card title="Update content" icon="pencil">
+	<Card title="Reactive." icon="rocket">
-		Edit `src/content/docs/index.mdx` to see this page change.
+		A robust API for synchronizing your component's UI and properties
 	</Card>
-	<Card title="Add new content" icon="add-document">
+	<Card title="Tiny." icon="add-document">
-		Add Markdown or MDX files to `src/content/docs` to create new pages.
+		~1 kB base class (minified, compressed) with versatile utilities
 	</Card>
-	<Card title="Configure your site" icon="setting">
+	<Card title="Easy" icon="heart">
-		Edit your `sidebar` and other config in `astro.config.mjs`.
+		Sensible life-cycle hooks that you understand and remember
 	</Card>
-	<Card title="Read the docs" icon="open-book">
+	<Card title="Familiar" icon="open-book">
-		Learn more in [the Starlight Docs](https://starlight.astro.build/).
+		Use the built-in JSX-like syntax or bring your own custom templating
 	</Card>
 </CardGrid>
+