From f4e74474c82ad7ab3c9f8239bf8243d58563880e Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Fri, 24 Nov 2023 11:01:06 +0100
Subject: [PATCH] feat(site): update content with features list

---
 site/src/components/code-block.js |  2 +-
 site/src/pages/index.html         | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/site/src/components/code-block.js b/site/src/components/code-block.js
index 5c50387..88c5640 100644
--- a/site/src/components/code-block.js
+++ b/site/src/components/code-block.js
@@ -31,7 +31,7 @@ class CodeBlockComponent extends HTMLElement {
 
     if (inline) {
       style.display = 'inline';
-      style.padding = '0.3em';
+      style.padding = '0.25em 0.3em';
     }
 
     Object.keys(style).forEach((rule) => {
diff --git a/site/src/pages/index.html b/site/src/pages/index.html
index 3bf4438..f36ad31 100644
--- a/site/src/pages/index.html
+++ b/site/src/pages/index.html
@@ -11,7 +11,7 @@
     <script server:setup>
       const project = {
         name: "WebComponent.io",
-        description: "Write web components in <em>Easy Mode</em>.",
+        description: "A simple reactivity system for web components",
       };
       const author = {
         name: "Ayo Ayco",
@@ -27,8 +27,13 @@
     <main>
       <section style="font-size: larger;">
         <p>
-          Our <a href="https://www.npmjs.com/package/web-component-base">tiny package</a> provides a zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily.
-        </p>
+          By extending our <code-block inline>WebComponent</code-block> base class, you get an easy authoring experience as you would expect in writing your components</p>
+        <ul>
+          <li>a signals-like <code-block inline>props</code-block> API that keeps your property changes and UI in sync</li>
+          <li>sensible life-cycle hooks that you understand and remember</li>
+          <li>extensible templates & renderer (examples in-progress)</li>
+          <li>Bonus: provided out-of-the-box with <a href="https://ayco.io/gh/McFly">McFly</a>, a powerful no-framework framework</li>
+        </ul>
         <call-to-action />
       </section>
       <hr style="margin: 2em 0;" />