From e3d6b2783c5a6e47882eddc14c069fac02c793ab Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ramon.aycojr@gmail.com>
Date: Thu, 28 Dec 2023 11:26:16 +0100
Subject: [PATCH] feat(site): zero js scenario (#44)

---
 site/src/components/my-footer.html |  4 +--
 site/src/pages/index.html          | 58 ++++++++++++++++++++++--------
 2 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/site/src/components/my-footer.html b/site/src/components/my-footer.html
index 08b91ac..d1604c3 100644
--- a/site/src/components/my-footer.html
+++ b/site/src/components/my-footer.html
@@ -1,3 +1,3 @@
-<footer style="text-align: right; font-style: italic; padding:0.5em 1em 1em;">
-    <slot />
+<footer style="text-align: center; font-style: italic; padding: 0.5em 1em 1em">
+  <slot />
 </footer>
diff --git a/site/src/pages/index.html b/site/src/pages/index.html
index bb5d923..39f80e8 100644
--- a/site/src/pages/index.html
+++ b/site/src/pages/index.html
@@ -16,12 +16,26 @@
       const author = {
         name: "Ayo Ayco",
         url: "https://ayco.io",
+        year: "2023",
       };
     </script>
     <style>
+      @counter-style publish-icons {
+        system: cyclic;
+        symbols: "️✅";
+        suffix: " ";
+      }
       main {
         font-size: large;
 
+        & section ul {
+          list-style: publish-icons;
+
+          & li {
+            margin-bottom: 0.5em;
+          }
+        }
+
         & section.jumbo {
           & .hero-statement {
             font-size: 2em;
@@ -44,7 +58,29 @@
         </p>
         <call-to-action></call-to-action>
         <div>
-          <feature-set features="{{ features }}"></feature-set>
+          <feature-set>
+            <h2>Features</h2>
+            <ul>
+              <li>
+                A robust API for synchronizing your component's UI and
+                properties
+              </li>
+              <li>
+                ~1 kB base class (minified, compressed) with versatile utilities
+              </li>
+              <li>
+                Sensible life-cycle hooks that you understand and remember
+              </li>
+              <li>
+                Use the built-in JSX-like syntax or bring your own custom
+                templating
+              </li>
+              <li>
+                Attach 'side effects' that gets triggered on property value
+                changes
+              </li>
+            </ul>
+          </feature-set>
         </div>
       </section>
       <section>
@@ -70,7 +106,7 @@
         </p>
         <code-block language="js">
           <pre>
-import { WebComponent, html } from &quot;https://unpkg.com/web-component-base@2.0.0/index.js&quot;;
+import { WebComponent, html } from &quot;https://esm.sh/web-component-base&quot;;
 
 export class Counter extends WebComponent {
   static props = {
@@ -91,19 +127,11 @@ customElements.define(&quot;my-counter&quot;, Counter);</pre
       </section>
     </main>
     <my-footer>
-      <span
-        >This site is built with
-        <a href="https://github.com/ayoayco/McFly">McFly</a>, the no-framework
-        framework; </span
-      ><br />
-      <span
-        >✨ Star on
-        <a href="https://github.com/ayoayco/web-component-base">GitHub</a> to
-        support; </span
-      ><br />
-      <span>
-        A project by <a href="{{ author.url }}">{{ author.name }}</a>
-      </span>
+      <small>
+        Released under the
+        <a href="https://opensource.org/licenses/MIT">MIT License</a>. Copyright
+        &copy; {{author.year}} <a href="{{ author.url }}">{{ author.name }}</a>
+      </small>
     </my-footer>
   </body>
 </html>