From c606857f4d6b52400324d41f9402938729d2f869 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sat, 16 Dec 2023 10:26:25 +0100
Subject: [PATCH] feat(site): initial feature-set component

---
 site/src/components/awesome-header.html |  1 -
 site/src/components/feature-set.js      | 85 +++++++++++++++++++++++++
 site/src/components/my-head.html        |  2 +-
 site/src/pages/index.html               | 70 ++++----------------
 4 files changed, 100 insertions(+), 58 deletions(-)
 create mode 100644 site/src/components/feature-set.js

diff --git a/site/src/components/awesome-header.html b/site/src/components/awesome-header.html
index a9edb6a..d0f82b4 100644
--- a/site/src/components/awesome-header.html
+++ b/site/src/components/awesome-header.html
@@ -1,6 +1,5 @@
 <header class="my-header">
   <h1><slot /></h1>
-  <slot name="description" />
 </header>
 
 <style>
diff --git a/site/src/components/feature-set.js b/site/src/components/feature-set.js
new file mode 100644
index 0000000..694af40
--- /dev/null
+++ b/site/src/components/feature-set.js
@@ -0,0 +1,85 @@
+class FeatureSet extends WebComponent {
+  #features = [
+    {
+      icon: "️🔄",
+      title: "Reactive.",
+      description:
+        "A robust API for synchronizing your component's UI and property values",
+    },
+    {
+      icon: "😌",
+      title: "Easy.",
+      description: "Sensible life-cycle hooks that you understand and remember",
+      url: "",
+    },
+    {
+      icon: "️💡",
+      title: "Familiar.",
+      description:
+        "Use the built-in JSX-like syntax or bring your own custom templating syntax",
+      url: "https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010",
+    },
+    {
+      icon: "️🛜",
+      title: "Powerful.",
+      description:
+        "Attach 'side effects' that gets triggered on property value changes",
+      url: "",
+    },
+  ];
+
+  /**
+   * @type {Array<HTMLArticleElement>}
+   */
+  get articleEl() {
+    return this.querySelectorAll("article");
+  }
+
+  afterViewInit() {
+    /**
+     * @type {Partial<CSSStyleDeclaration>}
+     */
+    const articleStyles = {
+      border: "1px solid #ccc",
+      borderRadius: "5px",
+      padding: "30px",
+      marginBottom: "1em",
+    };
+    Object.keys(articleStyles).forEach((rule) =>
+      this.articleEl.forEach((el) => (el.style[rule] = articleStyles[rule]))
+    );
+
+    /**
+     * @type {Partial<CSSStyleDeclaration>}
+     */
+    const ftrStyles = {
+      maxWidth: "800px",
+      margin: "0 auto",
+      padding: "30px",
+      gap: "1em",
+    };
+    const featureWrapper = this.querySelector(".feature-wrapper");
+    Object.keys(ftrStyles).forEach(
+      (rule) => (featureWrapper.style[rule] = ftrStyles[rule])
+    );
+  }
+
+  get template() {
+    return html`
+      <div class="feature-wrapper">
+        ${this.#features.map(
+          (feature) => html`
+            <article>
+              <h3 style="margin-bottom: 1em" class="feature-title">
+                <span>${feature.icon}</span> ${feature.title}
+              </h3>
+              <p style="margin:0" class="feature-description">
+                ${feature.description}
+              </p>
+            </article>
+          `
+        )}
+      </div>
+    `;
+  }
+}
diff --git a/site/src/components/my-head.html b/site/src/components/my-head.html
index d07d7af..9088356 100644
--- a/site/src/components/my-head.html
+++ b/site/src/components/my-head.html
@@ -28,7 +28,7 @@
     }
     body {
       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-      max-width: 40em;
+      max-width: 1000px;
       margin: 0 auto;
       padding: 1em;
     }
diff --git a/site/src/pages/index.html b/site/src/pages/index.html
index ae0c3ae..2245c97 100644
--- a/site/src/pages/index.html
+++ b/site/src/pages/index.html
@@ -19,79 +19,37 @@
       };
     </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;
+            text-align: center;
           }
         }
-        & hr {
-          margin: 2em 0;
-        }
-
-        & section p:not(blockquote *):first-of-type::first-letter {
-          font-weight: bold;
-          font-size: 2rem;
-          line-height: 1rem;
-          float: left;
-          color: var(--color-primary);
-        }
       }
     </style>
   </my-head>
   <body>
     <awesome-header>
       <span>{{ project.name }}</span>
-      <span slot="description">{{ project.description }}</span>
     </awesome-header>
     <main>
-      <section>
-        <p>
-          Get the easy authoring experience you have come to love and build
-          standard custom elements with zero bundlers, transpilers or polyfills.
+      <section class="jumbo">
+        <p class="hero-statement">
+          The simple reactivity system for web components
         </p>
-        <ul>
-          <li>
-            A robust <code-block inline>props</code-block> API that synchronizes
-            your components' property values and HTML attributes
-          </li>
-          <li>Sensible life-cycle hooks that you understand and remember</li>
-          <li>
-            Use a custom templating syntax you are already familiar with, like
-            <code-block inline>lit-html</code-block> (<a
-              href="https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010"
-              target="_blank"
-              >example</a
-            >)
-          </li>
-          <li>
-            Built-in minimal <code-block inline>html</code-block> function for
-            tagged templates powered by Preact's tiny (450 Bytes)
-            <code-block inline>htm/mini</code-block>
-          </li>
-          <li>
-            Attach "side effects" that gets triggered on property value changes
-            with <code-block inline>attachEffect</code-block> (<a
-              href="https://codepen.io/ayoayco-the-styleful/pen/ExrdWPv?editors=1011"
-              target="_blank"
-              >example</a
-            >)
-          </li>
-        </ul>
+        <!-- <p>
+          Get the easy authoring experience you have come to love and build
+        </p> -->
         <call-to-action></call-to-action>
+        <div>
+          <feature-set features="{{ features }}"></feature-set>
+        </div>
       </section>
-      <hr />
       <section>
-        <p>Why use this base class?</p>
+        <h2>Why use this base class?</h2>
         <p>
           Writing Web Components directly from
           <code-block inline>HTMLElement</code-block> can seem confusing and