From 64a1045101a53547a4046a24a5b265108908925b Mon Sep 17 00:00:00 2001
From: Pavol Hejny <me@pavolhejny.com>
Date: Tue, 28 Nov 2023 12:53:29 +0100
Subject: [PATCH 01/15] Branch custom-html-components


From 8de14331d888558894375a7d2d44f543bc981cd4 Mon Sep 17 00:00:00 2001
From: Pavol Hejny <me@pavolhejny.com>
Date: Tue, 28 Nov 2023 13:29:48 +0100
Subject: [PATCH 02/15] Define custom element <call-to-action/>

---
 promptbook/write-website-content-cs.ptbk.md   | 15 +++++++-
 promptbook/write-website-content.ptbk.md      |  3 ++
 .../WallpaperContent/WallpaperContent.tsx     | 34 +++++++++++++++++++
 src/styles/globals.css                        | 17 ++++++++++
 4 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/promptbook/write-website-content-cs.ptbk.md b/promptbook/write-website-content-cs.ptbk.md
index a2859a8f0..412a20d81 100644
--- a/promptbook/write-website-content-cs.ptbk.md
+++ b/promptbook/write-website-content-cs.ptbk.md
@@ -1,9 +1,13 @@
 # 🌍 Vytvoření obsahu webové stránky
 
+<!-- TODO: !!! Use custom html components -->
+<!-- TODO: !!! [🧠] How to propperly update ptbk version -->
+<!-- TODO: !!! Expect that <call-to-action/> will be used -->
+
 Instrukce pro vytvoření obsahu webové stránky za pomocí [🌠 Prompt template pipelines](https://github.com/webgptorg/promptbook).
 
 -   PTBK URL https://ptbk.webgpt.com/cs/write-website-content.ptbk.md@v0.1.0
--   PTBK version 0.0.1
+-   PTBK version 0.0.2
 -   Use chat
 <!-- TODO: [🌚]> -   Use GPT-3.5 -->
 -   Input param `{idea}` Obecná idea webu _v Češtině_
@@ -320,6 +324,15 @@ Zadání webu od zákazníka:
 -   Použijte klíčová slova, avšak ta mají být přirozeně v textu
 -   Jedná se o kompletní obsah stránky, tedy nezapomeňte na všechny důležité informace a prvky, co by měla stránka obsahovat
 -   Použijte nadpisy, odrážky, formátování textu
+-   Použijte speciální komponenty, viz níže
+
+## Komponenty
+
+### Call to action
+
+\`\`\`markdown
+<call-to-action href="/buy">🛒 Koupit</call-to-action>
+\`\`\`
 
 ## Klíčová slova:
 
diff --git a/promptbook/write-website-content.ptbk.md b/promptbook/write-website-content.ptbk.md
index 998be7cc9..9781ead5e 100644
--- a/promptbook/write-website-content.ptbk.md
+++ b/promptbook/write-website-content.ptbk.md
@@ -1,5 +1,8 @@
 # 🌍 Creating website content
 
+<!-- TODO: !!! Use custom html components -->
+<!-- TODO: !!! [🧠] How to propperly update ptbk version -->
+
 Instructions for creating web page content using [🌠 Prompt template pipelines](https://github.com/webgptorg/promptbook).
 
 -   PTBK URL https://ptbk.webgpt.com/cs/write-website-content.ptbk.md@v0.1.0
diff --git a/src/components/WallpaperContent/WallpaperContent.tsx b/src/components/WallpaperContent/WallpaperContent.tsx
index c2e2772cd..6609cff30 100644
--- a/src/components/WallpaperContent/WallpaperContent.tsx
+++ b/src/components/WallpaperContent/WallpaperContent.tsx
@@ -12,6 +12,7 @@ import { Content } from '../Content/Content';
 import { MaxdownContent } from '../Content/Maxdown/MaxdownContent';
 import { ExportCommentedBlock } from '../ExportComment/ExportCommentedBlock';
 import { addFontToContent } from '../ImportFonts/addFontToContent';
+import { InlineScript } from '../InlineScript/InlineScript';
 import { Section } from '../Section/Section';
 import { getPageContent } from './getPageContent';
 import styles from './WallpaperContent.module.css';
@@ -121,6 +122,39 @@ export function WallpaperContentSection() {
                     <MaxdownContent {...{ content, isEditable, onMaxdownChange }} />
                 </ExportCommentedBlock>
             </AiComponentsRoot>
+
+            <InlineScript
+                id="call-to-action"
+                // TODO: !!! Make/change some system like <AiComponentsRoot/> for custom html components
+            >
+                {`
+
+                    class CallToAction extends HTMLAnchorElement {
+                        constructor() {
+                            super();
+                        }
+
+                        connectedCallback() {
+
+                            // TODO: !!! This must work
+                            console.info('Connected to <call-to-action/> component');
+
+
+
+                            this.addEventListener('click', () => {
+
+                                // TODO: !!! This must work
+                                console.info('Clicked on <call-to-action/> component');
+                            });
+                        }
+                    }
+
+
+                    console.info('🌟 Defining <call-to-action/> component');
+                    customElements.define('call-to-action', CallToAction, { extends: 'a' });
+            
+                `}
+            </InlineScript>
         </Section>
     );
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b3f84f1cb..6a24aee71 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -38,6 +38,23 @@ a.button {
     text-decoration: none !important;
 }
 
+call-to-action {
+    /*
+    TODO: !!! This should be part of component OR better organized
+    TODO: Always align <call-to-action/> to the middle
+    */
+    border: solid 1px rgba(var(--palette-1-triplet), 0.8);
+    background-color: rgba(var(--palette-2-triplet), 0.8);
+    color: rgba(var(--palette-1-triplet), 0.8);
+    border-radius: 6px;
+    padding: 7px 18px;
+    margin: 10px;
+    cursor: pointer;
+    display: inline-block;
+    text-decoration: none;
+    transition: all 0.2s ease-in-out;
+}
+
 .emoji {
     display: inline !important;
     width: 1.8em;

From eef164a664876cbc5a3c16bd6a51917d2db3f29d Mon Sep 17 00:00:00 2001
From: Pavol Hejny <me@pavolhejny.com>
Date: Tue, 28 Nov 2023 13:41:07 +0100
Subject: [PATCH 03/15] Sandbox for custom components

---
 other/custom-elements/TODO.txt                |  2 +
 .../samples/call-to-action.html               | 47 +++++++++++++++++++
 .../WallpaperContent/WallpaperContent.tsx     |  3 ++
 3 files changed, 52 insertions(+)
 create mode 100644 other/custom-elements/TODO.txt
 create mode 100644 other/custom-elements/samples/call-to-action.html

diff --git a/other/custom-elements/TODO.txt b/other/custom-elements/TODO.txt
new file mode 100644
index 000000000..bd9a4b67a
--- /dev/null
+++ b/other/custom-elements/TODO.txt
@@ -0,0 +1,2 @@
+TODO: !!! [🧠] `Custom elements` vs `Custom components` vs `Custom html elements` vs `Custom html components` vs `WebGPT components`
+TODO: !!! Move this folder to src/?/
\ No newline at end of file
diff --git a/other/custom-elements/samples/call-to-action.html b/other/custom-elements/samples/call-to-action.html
new file mode 100644
index 000000000..334294569
--- /dev/null
+++ b/other/custom-elements/samples/call-to-action.html
@@ -0,0 +1,47 @@
+<call-to-action href="?buy=0">Buy 0</call-to-action>
+
+<script>
+    // TODO: !!! DRY
+    class CallToAction extends HTMLAnchorElement {
+        constructor() {
+            super();
+
+            console.info('!!! CallToAction.constructor');
+        }
+
+        connectedCallback() {
+            // TODO: !!! This must work
+            console.info('Connected to <call-to-action/> component');
+
+            this.addEventListener('click', () => {
+                // TODO: !!! This must work
+                console.info('Clicked on <call-to-action/> component');
+            });
+        }
+    }
+
+    console.info('🌟 Defining <call-to-action/> component');
+    customElements.define('call-to-action', CallToAction, { extends: 'a' });
+</script>
+<style>
+    /*
+    TODO: !!! DRY
+    */
+    call-to-action {
+        /*
+        TODO: !!! This should be part of component OR better organized
+        */
+        border: solid 1px red;
+        background-color: rgb(69 209 34);
+        color: #2d2200;
+        border-radius: 6px;
+        padding: 7px 18px;
+        margin: 10px;
+        cursor: pointer;
+        display: inline-block;
+        text-decoration: none;
+        transition: all 0.2s ease-in-out;
+    }
+</style>
+
+<call-to-action href="?buy=1">Buy 1</call-to-action>
diff --git a/src/components/WallpaperContent/WallpaperContent.tsx b/src/components/WallpaperContent/WallpaperContent.tsx
index 6609cff30..e491ec0cf 100644
--- a/src/components/WallpaperContent/WallpaperContent.tsx
+++ b/src/components/WallpaperContent/WallpaperContent.tsx
@@ -132,6 +132,9 @@ export function WallpaperContentSection() {
                     class CallToAction extends HTMLAnchorElement {
                         constructor() {
                             super();
+
+        
+                            console.info('!!! CallToAction.constructor');
                         }
 
                         connectedCallback() {

From ff478c37d8471659617f4b4dd1daaa530f475f28 Mon Sep 17 00:00:00 2001
From: Pavol Hejny <me@pavolhejny.com>
Date: Tue, 28 Nov 2023 23:04:33 +0100
Subject: [PATCH 04/15] Using shadow root in <call-to-action/>

---
 .../samples/call-to-action.html               | 52 ++++++++------
 .../samples/pricing-table.html                | 68 +++++++++++++++++++
 2 files changed, 101 insertions(+), 19 deletions(-)
 create mode 100644 other/custom-elements/samples/pricing-table.html

diff --git a/other/custom-elements/samples/call-to-action.html b/other/custom-elements/samples/call-to-action.html
index 334294569..859b45e7a 100644
--- a/other/custom-elements/samples/call-to-action.html
+++ b/other/custom-elements/samples/call-to-action.html
@@ -1,8 +1,8 @@
-<call-to-action href="?buy=0">Buy 0</call-to-action>
+ddd <call-to-action href="?buy=0">Buy 0</call-to-action> sss
 
 <script>
     // TODO: !!! DRY
-    class CallToAction extends HTMLAnchorElement {
+    class CallToAction extends HTMLElement {
         constructor() {
             super();
 
@@ -13,35 +13,49 @@
             // TODO: !!! This must work
             console.info('Connected to <call-to-action/> component');
 
-            this.addEventListener('click', () => {
+            const shadow = this.attachShadow({ mode: 'open' });
+
+            const linkElement = document.createElement('a');
+            linkElement.setAttribute('href', this.getAttribute('href'));
+            linkElement.innerHTML = this.innerHTML;
+            linkElement.addEventListener('click', (event) => {
+                event.preventDefault();
+
                 // TODO: !!! This must work
-                console.info('Clicked on <call-to-action/> component');
+                console.info('Clicked on <call-to-action/> linkElement component');
             });
+
+            const styleElement = document.createElement('style');
+            styleElement.textContent = `
+
+                a {
+                    border: solid 1px red;
+                    background-color: rgb(69 209 34);
+                    color: #2d2200;
+                    border-radius: 6px;
+                    padding: 7px 18px;
+                    margin: 10px;
+                    cursor: pointer;
+                    display: inline-block;
+                    text-decoration: none;
+                    transition: all 0.2s ease-in-out;
+                }
+              
+            `;
+
+            shadow.appendChild(linkElement);
+            shadow.appendChild(styleElement);
         }
     }
 
     console.info('🌟 Defining <call-to-action/> component');
-    customElements.define('call-to-action', CallToAction, { extends: 'a' });
+    customElements.define('call-to-action', CallToAction);
 </script>
 <style>
     /*
     TODO: !!! DRY
     */
     call-to-action {
-        /*
-        TODO: !!! This should be part of component OR better organized
-        */
         border: solid 1px red;
-        background-color: rgb(69 209 34);
-        color: #2d2200;
-        border-radius: 6px;
-        padding: 7px 18px;
-        margin: 10px;
-        cursor: pointer;
-        display: inline-block;
-        text-decoration: none;
-        transition: all 0.2s ease-in-out;
     }
 </style>
-
-<call-to-action href="?buy=1">Buy 1</call-to-action>
diff --git a/other/custom-elements/samples/pricing-table.html b/other/custom-elements/samples/pricing-table.html
new file mode 100644
index 000000000..0ce832ae2
--- /dev/null
+++ b/other/custom-elements/samples/pricing-table.html
@@ -0,0 +1,68 @@
+<pricing-table>
+    <pricing-plan label="Personal" price="$10">
+        <pricing-feature>Feature 1</pricing-feature>
+        <pricing-feature>Feature 2</pricing-feature>
+        <pricing-feature>Feature 3</pricing-feature>
+        <pricing-feature>Feature 4</pricing-feature>
+    </pricing-plan>
+    <pricing-plan label="Small Team" price="$20">
+        <pricing-feature>Feature 1</pricing-feature>
+        <pricing-feature>Feature 2</pricing-feature>
+        <pricing-feature>Feature 3</pricing-feature>
+        <pricing-feature>Feature 4</pricing-feature>
+    </pricing-plan>
+    <pricing-plan label="Enterprise" price="$40">
+        <pricing-feature>Feature 1</pricing-feature>
+        <pricing-feature>Feature 2</pricing-feature>
+        <pricing-feature>Feature 3</pricing-feature>
+        <pricing-feature>Feature 4</pricing-feature>
+    </pricing-plan>
+</pricing-table>
+
+<script>
+    // TODO: !!! DRY
+    class PricingPlan extends HTMLElement {
+        constructor() {
+            super();
+
+            console.info('!!! CallToAction.constructor');
+        }
+
+        connectedCallback() {
+            // TODO: !!! This must work
+            console.info('Connected to <pricing-plan/> component');
+
+            this.addEventListener('click', () => {
+                // TODO: !!! This must work
+                console.info('Clicked on <pricing-plan/> component');
+            });
+        }
+    }
+
+    console.info('🌟 Defining <pricing-plan/> component');
+    customElements.define('pricing-plan', PricingPlan);
+</script>
+<style>
+    /*
+    TODO: !!! DRY
+    */
+    pricing-table {
+        display: flex;
+    }
+
+    pricing-plan {
+        border: solid 1px red;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        border-radius: 15px;
+    }
+
+    pricing-feature {
+        border: solid 1px red;
+
+        padding: 10px;
+    }
+</style>

From 41362adc0f40fe08eee04ec91cda87c5b284be3e Mon Sep 17 00:00:00 2001
From: Pavol Hejny <me@pavolhejny.com>
Date: Wed, 29 Nov 2023 09:48:07 +0100
Subject: [PATCH 05/15] Pricing table

---
 other/custom-elements/samples/pricing-table.html | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/other/custom-elements/samples/pricing-table.html b/other/custom-elements/samples/pricing-table.html
index 0ce832ae2..a3679235b 100644
--- a/other/custom-elements/samples/pricing-table.html
+++ b/other/custom-elements/samples/pricing-table.html
@@ -1,17 +1,23 @@
 <pricing-table>
-    <pricing-plan label="Personal" price="$10">
+    <pricing-plan label="Free" price="$40" suppressed>
         <pricing-feature>Feature 1</pricing-feature>
         <pricing-feature>Feature 2</pricing-feature>
         <pricing-feature>Feature 3</pricing-feature>
         <pricing-feature>Feature 4</pricing-feature>
     </pricing-plan>
-    <pricing-plan label="Small Team" price="$20">
+    <pricing-plan label="Basic" price="197,- Kč / měsíc">
         <pricing-feature>Feature 1</pricing-feature>
         <pricing-feature>Feature 2</pricing-feature>
         <pricing-feature>Feature 3</pricing-feature>
         <pricing-feature>Feature 4</pricing-feature>
     </pricing-plan>
-    <pricing-plan label="Enterprise" price="$40">
+    <pricing-plan label="Advanced" price="500,- Kč / měsíc">
+        <pricing-feature>Feature 1</pricing-feature>
+        <pricing-feature>Feature 2</pricing-feature>
+        <pricing-feature>Feature 3</pricing-feature>
+        <pricing-feature>Feature 4</pricing-feature>
+    </pricing-plan>
+    <pricing-plan label="Enterprise" price="1500,- Kč / měsíc">
         <pricing-feature>Feature 1</pricing-feature>
         <pricing-feature>Feature 2</pricing-feature>
         <pricing-feature>Feature 3</pricing-feature>

From a336efca7358735e4d0a249c365358b3ff90f7af Mon Sep 17 00:00:00 2001
From: Pavol Hejny <me@pavolhejny.com>
Date: Wed, 29 Nov 2023 16:08:09 +0100
Subject: [PATCH 06/15] NON working PricingTable

---
 .../samples/pricing-table.html                |   4 +
 .../custom-elements/samples/pricing-table.js  | 125 ++++++++++++++++++
 2 files changed, 129 insertions(+)
 create mode 100644 other/custom-elements/samples/pricing-table.js

diff --git a/other/custom-elements/samples/pricing-table.html b/other/custom-elements/samples/pricing-table.html
index a3679235b..c51c0e37f 100644
--- a/other/custom-elements/samples/pricing-table.html
+++ b/other/custom-elements/samples/pricing-table.html
@@ -1,3 +1,5 @@
+<script src="./pricing-table.js"></script>
+
 <pricing-table>
     <pricing-plan label="Free" price="$40" suppressed>
         <pricing-feature>Feature 1</pricing-feature>
@@ -25,6 +27,7 @@
     </pricing-plan>
 </pricing-table>
 
+<!--
 <script>
     // TODO: !!! DRY
     class PricingPlan extends HTMLElement {
@@ -72,3 +75,4 @@
         padding: 10px;
     }
 </style>
+-->
diff --git a/other/custom-elements/samples/pricing-table.js b/other/custom-elements/samples/pricing-table.js
new file mode 100644
index 000000000..d8ccfa6ff
--- /dev/null
+++ b/other/custom-elements/samples/pricing-table.js
@@ -0,0 +1,125 @@
+  // Define the PricingTable class
+  class PricingTable extends HTMLElement {
+    constructor() {
+      super();
+
+      // Create a shadow DOM
+      const shadow = this.attachShadow({mode: 'open'});
+
+      // Create a container for the pricing plans
+      const container = document.createElement('div');
+      container.setAttribute('class', 'pricing-container');
+
+      // Append the container to the shadow DOM
+      shadow.appendChild(container);
+    }
+  }
+
+  // Define the PricingPlan class
+  class PricingPlan extends HTMLElement {
+    constructor() {
+      super();
+
+      // Create a shadow DOM
+      const shadow = this.attachShadow({mode: 'open'});
+
+      // Create a container for the pricing plan
+      const container = document.createElement('div');
+      container.setAttribute('class', 'pricing-plan');
+
+      // Get the label and price attributes
+      const label = this.getAttribute('label');
+      const price = this.getAttribute('price');
+      const suppressed = this.hasAttribute('suppressed');
+
+      // Create the HTML for the pricing plan
+      container.innerHTML = `
+        <div class="plan-header">
+          <h2>${label}</h2>
+          <p>${price}</p>
+        </div>
+        <div class="plan-features">
+          <slot></slot>
+        </div>
+      `;
+
+      // Add a suppressed class if the plan is suppressed
+      if (suppressed) {
+        container.classList.add('suppressed');
+      }
+
+      // Append the container to the shadow DOM
+      shadow.appendChild(container);
+    }
+  }
+
+  // Define the PricingFeature class
+  class PricingFeature extends HTMLElement {
+    constructor() {
+      super();
+
+      // Create a shadow DOM
+      const shadow = this.attachShadow({mode: 'open'});
+
+      // Create a container for the pricing feature
+      const container = document.createElement('div');
+      container.setAttribute('class', 'pricing-feature');
+
+      // Set the content of the container to the text content of the feature
+      container.textContent = this.textContent;
+
+      // Append the container to the shadow DOM
+      shadow.appendChild(container);
+    }
+  }
+
+  // Define the styles for the custom elements
+  const styles = `
+    .pricing-container {
+      display: flex;
+      justify-content: space-around;
+      margin: 20px;
+    }
+
+    .pricing-plan {
+      border: 1px solid #ccc;
+      border-radius: 8px;
+      padding: 20px;
+      text-align: center;
+      flex: 1;
+    }
+
+    .suppressed {
+      opacity: 0.5;
+    }
+
+    .plan-header {
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 10px;
+      margin-bottom: 10px;
+    }
+
+    .plan-header h2 {
+      margin: 0;
+    }
+
+    .plan-features {
+      text-align: left;
+    }
+
+    .pricing-feature {
+      margin: 5px 0;
+    }
+  `;
+
+  // Create a style element and set the styles
+  const style = document.createElement('style');
+  style.textContent = styles;
+
+  // Register the custom elements
+  customElements.define('pricing-table', PricingTable);
+  customElements.define('pricing-plan', PricingPlan);
+  customElements.define('pricing-feature', PricingFeature);
+
+  // Append the style element to the document head
+  document.head.appendChild(style);
\ No newline at end of file

From 5c471156393a0a3f01e277f90af9b11153d64cbf Mon Sep 17 00:00:00 2001
From: Pavol Hejny <me@pavolhejny.com>
Date: Thu, 30 Nov 2023 09:29:56 +0100
Subject: [PATCH 07/15] Pricing table as code

---
 .../custom-elements/samples/pricing-table.md  | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 other/custom-elements/samples/pricing-table.md

diff --git a/other/custom-elements/samples/pricing-table.md b/other/custom-elements/samples/pricing-table.md
new file mode 100644
index 000000000..b78f50fb4
--- /dev/null
+++ b/other/custom-elements/samples/pricing-table.md
@@ -0,0 +1,27 @@
+# Some cool product
+
+## Pricing as code
+
+<pricing-table>
+    ### Free
+
+    -   Feature 1
+    -   Feature 2
+    -   Feature 3
+    -   Feature 4
+
+    #### Basic
+
+    -   197,- Kč / měsíc
+    -   Feature 1
+    -   Feature 2
+
+    #### Advanced
+
+    -   500,- Kč / měsíc
+
+    #### Enterprise
+
+    -   1500,- Kč / měsíc
+
+</pricing-table>

From b766f7edbb6c475d3192ce835743f0a1283f564d Mon Sep 17 00:00:00 2001
From: Pavol Hejny <me@pavolhejny.com>
Date: Thu, 30 Nov 2023 09:32:39 +0100
Subject: [PATCH 08/15] Variants of pricing table

---
 .../custom-elements/samples/pricing-table.md  | 54 ++++++++++++++++++-
 1 file changed, 53 insertions(+), 1 deletion(-)

diff --git a/other/custom-elements/samples/pricing-table.md b/other/custom-elements/samples/pricing-table.md
index b78f50fb4..a70b06912 100644
--- a/other/custom-elements/samples/pricing-table.md
+++ b/other/custom-elements/samples/pricing-table.md
@@ -1,6 +1,6 @@
 # Some cool product
 
-## Pricing as code
+## Pricing as <pricing-table>
 
 <pricing-table>
     ### Free
@@ -25,3 +25,55 @@
     -   1500,- Kč / měsíc
 
 </pricing-table>
+
+## Pricing as <div is="pricing-table">
+
+<div is="pricing-table">
+
+# Free
+
+-   Feature 1
+-   Feature 2
+-   Feature 3
+-   Feature 4
+
+## Basic
+
+-   197,- Kč / měsíc
+-   Feature 1
+-   Feature 2
+
+## Advanced
+
+-   500,- Kč / měsíc
+
+## Enterprise
+
+-   1500,- Kč / měsíc
+
+</div>
+
+## Pricing as block
+
+```markdown
+# Free
+
+-   Feature 1
+-   Feature 2
+-   Feature 3
+-   Feature 4
+
+## Basic
+
+-   197,- Kč / měsíc
+-   Feature 1
+-   Feature 2
+
+## Advanced
+
+-   500,- Kč / měsíc
+
+## Enterprise
+
+-   1500,- Kč / měsíc
+```

From 5fa511245d1fd0395e096b321e49f8ee07c60fe5 Mon Sep 17 00:00:00 2001
From: Pavol Hejny <me@pavolhejny.com>
Date: Sun, 10 Dec 2023 16:54:08 +0100
Subject: [PATCH 09/15] Moving files

---
 other/{custom-elements => webgpt-components}/TODO.txt          | 3 ++-
 .../call-to-action}/call-to-action.html                        | 0
 .../pricing-table}/pricing-table.html                          | 0
 .../pricing-table}/pricing-table.js                            | 0
 .../pricing-table}/pricing-table.md                            | 0
 5 files changed, 2 insertions(+), 1 deletion(-)
 rename other/{custom-elements => webgpt-components}/TODO.txt (65%)
 rename other/{custom-elements/samples => webgpt-components/call-to-action}/call-to-action.html (100%)
 rename other/{custom-elements/samples => webgpt-components/pricing-table}/pricing-table.html (100%)
 rename other/{custom-elements/samples => webgpt-components/pricing-table}/pricing-table.js (100%)
 rename other/{custom-elements/samples => webgpt-components/pricing-table}/pricing-table.md (100%)

diff --git a/other/custom-elements/TODO.txt b/other/webgpt-components/TODO.txt
similarity index 65%
rename from other/custom-elements/TODO.txt
rename to other/webgpt-components/TODO.txt
index bd9a4b67a..166099490 100644
--- a/other/custom-elements/TODO.txt
+++ b/other/webgpt-components/TODO.txt
@@ -1,2 +1,3 @@
 TODO: !!! [🧠] `Custom elements` vs `Custom components` vs `Custom html elements` vs `Custom html components` vs `WebGPT components`
-TODO: !!! Move this folder to src/?/
\ No newline at end of file
+TODO: !!! Move this folder to src/?/
+TODO: !!! People webgpt component
\ No newline at end of file
diff --git a/other/custom-elements/samples/call-to-action.html b/other/webgpt-components/call-to-action/call-to-action.html
similarity index 100%
rename from other/custom-elements/samples/call-to-action.html
rename to other/webgpt-components/call-to-action/call-to-action.html
diff --git a/other/custom-elements/samples/pricing-table.html b/other/webgpt-components/pricing-table/pricing-table.html
similarity index 100%
rename from other/custom-elements/samples/pricing-table.html
rename to other/webgpt-components/pricing-table/pricing-table.html
diff --git a/other/custom-elements/samples/pricing-table.js b/other/webgpt-components/pricing-table/pricing-table.js
similarity index 100%
rename from other/custom-elements/samples/pricing-table.js
rename to other/webgpt-components/pricing-table/pricing-table.js
diff --git a/other/custom-elements/samples/pricing-table.md b/other/webgpt-components/pricing-table/pricing-table.md
similarity index 100%
rename from other/custom-elements/samples/pricing-table.md
rename to other/webgpt-components/pricing-table/pricing-table.md

From 8a463d3cbcbbe241be9d2b993b52673ee610830e Mon Sep 17 00:00:00 2001
From: Pavol Hejny <me@pavolhejny.com>
Date: Sun, 10 Dec 2023 16:58:47 +0100
Subject: [PATCH 10/15] Pricing table

---
 .../pricing-table/pricing-table.css           | 19 +++++
 .../pricing-table/pricing-table.html          | 72 +++++++++++++------
 2 files changed, 71 insertions(+), 20 deletions(-)
 create mode 100644 other/webgpt-components/pricing-table/pricing-table.css

diff --git a/other/webgpt-components/pricing-table/pricing-table.css b/other/webgpt-components/pricing-table/pricing-table.css
new file mode 100644
index 000000000..b4827db9a
--- /dev/null
+++ b/other/webgpt-components/pricing-table/pricing-table.css
@@ -0,0 +1,19 @@
+pricing-table {
+  display: flex;
+}
+
+pricing-plan {
+  border: solid 1px red;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  border-radius: 15px;
+}
+
+pricing-feature {
+  border: solid 1px red;
+
+  padding: 10px;
+}
\ No newline at end of file
diff --git a/other/webgpt-components/pricing-table/pricing-table.html b/other/webgpt-components/pricing-table/pricing-table.html
index c51c0e37f..145876f32 100644
--- a/other/webgpt-components/pricing-table/pricing-table.html
+++ b/other/webgpt-components/pricing-table/pricing-table.html
@@ -1,29 +1,61 @@
 <script src="./pricing-table.js"></script>
+<link rel="stylesheet" href="./pricing-table.css" />
 
 <pricing-table>
-    <pricing-plan label="Free" price="$40" suppressed>
-        <pricing-feature>Feature 1</pricing-feature>
-        <pricing-feature>Feature 2</pricing-feature>
-        <pricing-feature>Feature 3</pricing-feature>
-        <pricing-feature>Feature 4</pricing-feature>
+    <pricing-plan label="Free" suppressed>
+        <pricing-price>Zadarmo / navždy</pricing-price>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
     </pricing-plan>
-    <pricing-plan label="Basic" price="197,- Kč / měsíc">
-        <pricing-feature>Feature 1</pricing-feature>
-        <pricing-feature>Feature 2</pricing-feature>
-        <pricing-feature>Feature 3</pricing-feature>
-        <pricing-feature>Feature 4</pricing-feature>
+    <pricing-plan label="Základní">
+        <pricing-price>49,- Kč / web / měsíc</pricing-price>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
     </pricing-plan>
-    <pricing-plan label="Advanced" price="500,- Kč / měsíc">
-        <pricing-feature>Feature 1</pricing-feature>
-        <pricing-feature>Feature 2</pricing-feature>
-        <pricing-feature>Feature 3</pricing-feature>
-        <pricing-feature>Feature 4</pricing-feature>
+    <pricing-plan label="Standard" featured>
+        <pricing-price>159,- Kč / web / měsíc</pricing-price>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
     </pricing-plan>
-    <pricing-plan label="Enterprise" price="1500,- Kč / měsíc">
-        <pricing-feature>Feature 1</pricing-feature>
-        <pricing-feature>Feature 2</pricing-feature>
-        <pricing-feature>Feature 3</pricing-feature>
-        <pricing-feature>Feature 4</pricing-feature>
+    <pricing-plan label="Profesionální">
+        <pricing-price>599,- Kč / web / měsíc</pricing-price>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+    </pricing-plan>
+    <pricing-plan label="Tvůrce" price="$40" suppressed>
+        <pricing-price>699,- Kč / měsíc</pricing-price>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
+        <pricing-feature></pricing-feature>
     </pricing-plan>
 </pricing-table>
 

From b01dfad6a4c4bbf188be9e7a3c565e1f09aa2210 Mon Sep 17 00:00:00 2001
From: Pavol Hejny <me@pavolhejny.com>
Date: Sun, 10 Dec 2023 17:07:04 +0100
Subject: [PATCH 11/15] Working on webgpt-components pricing table

---
 other/webgpt-components/TODO.txt              |   3 +
 .../pricing-table/pricing-table.css           |  19 ---
 .../pricing-table/pricing-table.html          |  15 +-
 .../pricing-table/pricing-table.js            | 135 +++---------------
 .../pricing-table/pricing-table.module.css    |  23 +++
 5 files changed, 61 insertions(+), 134 deletions(-)
 delete mode 100644 other/webgpt-components/pricing-table/pricing-table.css
 create mode 100644 other/webgpt-components/pricing-table/pricing-table.module.css

diff --git a/other/webgpt-components/TODO.txt b/other/webgpt-components/TODO.txt
index 166099490..38fdf78a1 100644
--- a/other/webgpt-components/TODO.txt
+++ b/other/webgpt-components/TODO.txt
@@ -1,3 +1,6 @@
+
+TODO: !!! Index all webgpt components
+TODO: !!! Use webgpt components in export
 TODO: !!! [🧠] `Custom elements` vs `Custom components` vs `Custom html elements` vs `Custom html components` vs `WebGPT components`
 TODO: !!! Move this folder to src/?/
 TODO: !!! People webgpt component
\ No newline at end of file
diff --git a/other/webgpt-components/pricing-table/pricing-table.css b/other/webgpt-components/pricing-table/pricing-table.css
deleted file mode 100644
index b4827db9a..000000000
--- a/other/webgpt-components/pricing-table/pricing-table.css
+++ /dev/null
@@ -1,19 +0,0 @@
-pricing-table {
-  display: flex;
-}
-
-pricing-plan {
-  border: solid 1px red;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  border-radius: 15px;
-}
-
-pricing-feature {
-  border: solid 1px red;
-
-  padding: 10px;
-}
\ No newline at end of file
diff --git a/other/webgpt-components/pricing-table/pricing-table.html b/other/webgpt-components/pricing-table/pricing-table.html
index 145876f32..75f9529c8 100644
--- a/other/webgpt-components/pricing-table/pricing-table.html
+++ b/other/webgpt-components/pricing-table/pricing-table.html
@@ -1,5 +1,5 @@
 <script src="./pricing-table.js"></script>
-<link rel="stylesheet" href="./pricing-table.css" />
+<link rel="stylesheet" href="./pricing-table.module.css" />
 
 <pricing-table>
     <pricing-plan label="Free" suppressed>
@@ -59,6 +59,19 @@
     </pricing-plan>
 </pricing-table>
 
+<!-- TODO: !!! This should error in console + remove after-->
+<pricing-plan label="Free" suppressed>
+    <pricing-price>Zadarmo / navždy</pricing-price>
+    <pricing-feature></pricing-feature>
+    <pricing-feature></pricing-feature>
+    <pricing-feature></pricing-feature>
+    <pricing-feature></pricing-feature>
+    <pricing-feature></pricing-feature>
+    <pricing-feature></pricing-feature>
+    <pricing-feature></pricing-feature>
+    <pricing-feature></pricing-feature>
+</pricing-plan>
+
 <!--
 <script>
     // TODO: !!! DRY
diff --git a/other/webgpt-components/pricing-table/pricing-table.js b/other/webgpt-components/pricing-table/pricing-table.js
index d8ccfa6ff..6785d346f 100644
--- a/other/webgpt-components/pricing-table/pricing-table.js
+++ b/other/webgpt-components/pricing-table/pricing-table.js
@@ -1,125 +1,32 @@
-  // Define the PricingTable class
-  class PricingTable extends HTMLElement {
+class PricingTable extends HTMLElement {
     constructor() {
-      super();
-
-      // Create a shadow DOM
-      const shadow = this.attachShadow({mode: 'open'});
-
-      // Create a container for the pricing plans
-      const container = document.createElement('div');
-      container.setAttribute('class', 'pricing-container');
-
-      // Append the container to the shadow DOM
-      shadow.appendChild(container);
+        super();
+        // TODO: Check that in root
     }
-  }
+}
 
-  // Define the PricingPlan class
-  class PricingPlan extends HTMLElement {
+class PricingPlan extends HTMLElement {
     constructor() {
-      super();
-
-      // Create a shadow DOM
-      const shadow = this.attachShadow({mode: 'open'});
-
-      // Create a container for the pricing plan
-      const container = document.createElement('div');
-      container.setAttribute('class', 'pricing-plan');
-
-      // Get the label and price attributes
-      const label = this.getAttribute('label');
-      const price = this.getAttribute('price');
-      const suppressed = this.hasAttribute('suppressed');
-
-      // Create the HTML for the pricing plan
-      container.innerHTML = `
-        <div class="plan-header">
-          <h2>${label}</h2>
-          <p>${price}</p>
-        </div>
-        <div class="plan-features">
-          <slot></slot>
-        </div>
-      `;
-
-      // Add a suppressed class if the plan is suppressed
-      if (suppressed) {
-        container.classList.add('suppressed');
-      }
-
-      // Append the container to the shadow DOM
-      shadow.appendChild(container);
+        super();
+        // TODO: Check that direct parent is <pricing-table/>
     }
-  }
+}
 
-  // Define the PricingFeature class
-  class PricingFeature extends HTMLElement {
+class PricingPrice extends HTMLElement {
     constructor() {
-      super();
-
-      // Create a shadow DOM
-      const shadow = this.attachShadow({mode: 'open'});
-
-      // Create a container for the pricing feature
-      const container = document.createElement('div');
-      container.setAttribute('class', 'pricing-feature');
-
-      // Set the content of the container to the text content of the feature
-      container.textContent = this.textContent;
-
-      // Append the container to the shadow DOM
-      shadow.appendChild(container);
-    }
-  }
-
-  // Define the styles for the custom elements
-  const styles = `
-    .pricing-container {
-      display: flex;
-      justify-content: space-around;
-      margin: 20px;
-    }
-
-    .pricing-plan {
-      border: 1px solid #ccc;
-      border-radius: 8px;
-      padding: 20px;
-      text-align: center;
-      flex: 1;
-    }
-
-    .suppressed {
-      opacity: 0.5;
-    }
-
-    .plan-header {
-      border-bottom: 1px solid #ccc;
-      padding-bottom: 10px;
-      margin-bottom: 10px;
+        super();
+        // TODO: Check that direct parent is <pricing-plan/>
     }
+}
 
-    .plan-header h2 {
-      margin: 0;
-    }
-
-    .plan-features {
-      text-align: left;
-    }
-
-    .pricing-feature {
-      margin: 5px 0;
+class PricingFeature extends HTMLElement {
+    constructor() {
+        super();
+        // TODO: Check that direct parent is <pricing-plan/>
     }
-  `;
-
-  // Create a style element and set the styles
-  const style = document.createElement('style');
-  style.textContent = styles;
-
-  // Register the custom elements
-  customElements.define('pricing-table', PricingTable);
-  customElements.define('pricing-plan', PricingPlan);
-  customElements.define('pricing-feature', PricingFeature);
+}
 
-  // Append the style element to the document head
-  document.head.appendChild(style);
\ No newline at end of file
+customElements.define('pricing-table', PricingTable);
+customElements.define('pricing-plan', PricingPlan);
+customElements.define('pricing-price', PricingPrice);
+customElements.define('pricing-feature', PricingFeature);
diff --git a/other/webgpt-components/pricing-table/pricing-table.module.css b/other/webgpt-components/pricing-table/pricing-table.module.css
new file mode 100644
index 000000000..3cf9117b6
--- /dev/null
+++ b/other/webgpt-components/pricing-table/pricing-table.module.css
@@ -0,0 +1,23 @@
+pricing-table {
+    display: flex;
+}
+
+pricing-plan {
+    border: solid 1px red;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    border-radius: 15px;
+}
+
+pricing-feature {
+    border: solid 1px red;
+
+    padding: 10px;
+}
+
+/*
+TODO: !!! Design
+*/

From 1dfb8722d97e7bcc70e58d8e6571929157d12c69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pavol=20Hejn=C3=BD?= <me@pavolhejny.com>
Date: Sun, 10 Dec 2023 18:06:14 +0100
Subject: [PATCH 12/15] Update pricing-table.html

---
 .../pricing-table/pricing-table.html          | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/other/webgpt-components/pricing-table/pricing-table.html b/other/webgpt-components/pricing-table/pricing-table.html
index 75f9529c8..6ceeb2ba5 100644
--- a/other/webgpt-components/pricing-table/pricing-table.html
+++ b/other/webgpt-components/pricing-table/pricing-table.html
@@ -4,8 +4,8 @@
 <pricing-table>
     <pricing-plan label="Free" suppressed>
         <pricing-price>Zadarmo / navždy</pricing-price>
-        <pricing-feature></pricing-feature>
-        <pricing-feature></pricing-feature>
+        <pricing-feature>WebGPT značka </pricing-feature>
+        <pricing-feature>Naše reklama [1]</pricing-feature>
         <pricing-feature></pricing-feature>
         <pricing-feature></pricing-feature>
         <pricing-feature></pricing-feature>
@@ -15,31 +15,31 @@
     </pricing-plan>
     <pricing-plan label="Základní">
         <pricing-price>49,- Kč / web / měsíc</pricing-price>
-        <pricing-feature></pricing-feature>
-        <pricing-feature></pricing-feature>
-        <pricing-feature></pricing-feature>
-        <pricing-feature></pricing-feature>
-        <pricing-feature></pricing-feature>
+        <pricing-feature>1 stránka </pricing-feature>
+        <pricing-feature>1 jazyk </pricing-feature>
+        <pricing-feature>30 změn za měsíc</pricing-feature>
+        <pricing-feature>Hosting na naší doméně / Možnost zakoupení domény </pricing-feature>
+        <pricing-feature>Základní komponenty</pricing-feature>
         <pricing-feature></pricing-feature>
         <pricing-feature></pricing-feature>
         <pricing-feature></pricing-feature>
     </pricing-plan>
     <pricing-plan label="Standard" featured>
         <pricing-price>159,- Kč / web / měsíc</pricing-price>
-        <pricing-feature></pricing-feature>
-        <pricing-feature></pricing-feature>
-        <pricing-feature></pricing-feature>
-        <pricing-feature></pricing-feature>
-        <pricing-feature></pricing-feature>
-        <pricing-feature></pricing-feature>
+        <pricing-feature>.cz doména v ceně </pricing-feature>
+        <pricing-feature>10 stránek </pricing-feature>
+        <pricing-feature>1000 změn za měsíc </pricing-feature>
+        <pricing-feature>2 jazykové verze </pricing-feature>
+        <pricing-feature> kontrola SEO </pricing-feature>
+        <pricing-feature> kontrola přístupnosti </pricing-feature>
         <pricing-feature></pricing-feature>
         <pricing-feature></pricing-feature>
     </pricing-plan>
     <pricing-plan label="Profesionální">
         <pricing-price>599,- Kč / web / měsíc</pricing-price>
-        <pricing-feature></pricing-feature>
-        <pricing-feature></pricing-feature>
-        <pricing-feature></pricing-feature>
+        <pricing-feature> podpora po telefonu </pricing-feature>
+        <pricing-feature> možnost navrhovat vlastní komponenty </pricing-feature>
+        <pricing-feature> automatická aktualizace na základě sociálních sítí </pricing-feature>
         <pricing-feature></pricing-feature>
         <pricing-feature></pricing-feature>
         <pricing-feature></pricing-feature>

From 739190534190260bc5dd38ce70dc9ce2c3eb087c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pavol=20Hejn=C3=BD?= <me@pavolhejny.com>
Date: Sun, 10 Dec 2023 18:07:57 +0100
Subject: [PATCH 13/15] Update pricing-table.html

---
 other/webgpt-components/pricing-table/pricing-table.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/other/webgpt-components/pricing-table/pricing-table.html b/other/webgpt-components/pricing-table/pricing-table.html
index 6ceeb2ba5..be51319ae 100644
--- a/other/webgpt-components/pricing-table/pricing-table.html
+++ b/other/webgpt-components/pricing-table/pricing-table.html
@@ -40,8 +40,8 @@
         <pricing-feature> podpora po telefonu </pricing-feature>
         <pricing-feature> možnost navrhovat vlastní komponenty </pricing-feature>
         <pricing-feature> automatická aktualizace na základě sociálních sítí </pricing-feature>
-        <pricing-feature></pricing-feature>
-        <pricing-feature></pricing-feature>
+        <pricing-feature> plný přístup k podkladovým materiálům </pricing-feature>
+        <pricing-feature> prémiové komponenty </pricing-feature>
         <pricing-feature></pricing-feature>
         <pricing-feature></pricing-feature>
         <pricing-feature></pricing-feature>

From 865ef10d65c1e8e276aa0017b2f010bb0a551498 Mon Sep 17 00:00:00 2001
From: Pavol Hejny <me@pavolhejny.com>
Date: Sun, 10 Dec 2023 19:09:57 +0100
Subject: [PATCH 14/15] WebgptElement

---
 .../pricing-table/pricing-table.html          |  8 ++++-
 .../pricing-table/pricing-table.js            | 32 +++++++++++++++----
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/other/webgpt-components/pricing-table/pricing-table.html b/other/webgpt-components/pricing-table/pricing-table.html
index be51319ae..4e4e17eb6 100644
--- a/other/webgpt-components/pricing-table/pricing-table.html
+++ b/other/webgpt-components/pricing-table/pricing-table.html
@@ -69,9 +69,15 @@
     <pricing-feature></pricing-feature>
     <pricing-feature></pricing-feature>
     <pricing-feature></pricing-feature>
-    <pricing-feature></pricing-feature>
+    <div>
+        <pricing-feature></pricing-feature>
+    </div>
 </pricing-plan>
 
+<pricing-price>Zadarmo / navždy</pricing-price>
+
+<pricing-feature></pricing-feature>
+
 <!--
 <script>
     // TODO: !!! DRY
diff --git a/other/webgpt-components/pricing-table/pricing-table.js b/other/webgpt-components/pricing-table/pricing-table.js
index 6785d346f..92d18c70a 100644
--- a/other/webgpt-components/pricing-table/pricing-table.js
+++ b/other/webgpt-components/pricing-table/pricing-table.js
@@ -1,28 +1,46 @@
-class PricingTable extends HTMLElement {
+class WebgptElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    assertsToBeDirectChildOf(parentTagName) {
+        // Note: Need to be in timeout to this.parentElement to be defined
+        setTimeout(() => {
+            if (this.parentElement.tagName.toLowerCase() !== parentTagName) {
+                console.error(
+                    `<${this.tagName.toLowerCase()}/> must be a direct child of <${parentTagName}/>, but it is child of <${this.parentElement.tagName.toLowerCase()}/>`,
+                    this,
+                );
+            }
+        }, 1);
+    }
+}
+
+class PricingTable extends WebgptElement {
     constructor() {
         super();
         // TODO: Check that in root
     }
 }
 
-class PricingPlan extends HTMLElement {
+class PricingPlan extends WebgptElement {
     constructor() {
         super();
-        // TODO: Check that direct parent is <pricing-table/>
+        this.assertsToBeDirectChildOf('pricing-table');
     }
 }
 
-class PricingPrice extends HTMLElement {
+class PricingPrice extends WebgptElement {
     constructor() {
         super();
-        // TODO: Check that direct parent is <pricing-plan/>
+        this.assertsToBeDirectChildOf('pricing-plan');
     }
 }
 
-class PricingFeature extends HTMLElement {
+class PricingFeature extends WebgptElement {
     constructor() {
         super();
-        // TODO: Check that direct parent is <pricing-plan/>
+        this.assertsToBeDirectChildOf('pricing-plan');
     }
 }
 

From 8b35d2cbfdf4419d661d59034b489d868b087967 Mon Sep 17 00:00:00 2001
From: Pavol Hejny <me@pavolhejny.com>
Date: Sun, 10 Dec 2023 19:14:40 +0100
Subject: [PATCH 15/15] Organization

---
 other/webgpt-components/README.md     | 8 ++++++++
 public/icons/openmoji/README.md       | 2 +-
 src/components/AiComponents/README.md | 2 +-
 src/components/AiComponents/TODO.txt  | 2 +-
 4 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 other/webgpt-components/README.md

diff --git a/other/webgpt-components/README.md b/other/webgpt-components/README.md
new file mode 100644
index 000000000..f4039ccd1
--- /dev/null
+++ b/other/webgpt-components/README.md
@@ -0,0 +1,8 @@
+# 🍱 WebGPT components
+
+Custom elements for WebGPT used in the dynamic next page and also rendered into static export.
+
+## Terminology
+
+-   **Component** is is comprehensive set of elements that are used together, Often it is a single element, for example `<call-to-action>` or `<pricing-table>`
+-   **Element** is custom element extended from `WebgptElement` for example `<pricing-plan>`
diff --git a/public/icons/openmoji/README.md b/public/icons/openmoji/README.md
index c2590c9e7..eb5967551 100644
--- a/public/icons/openmoji/README.md
+++ b/public/icons/openmoji/README.md
@@ -1,4 +1,4 @@
-# 🍱 Emojis
+# 😉 Emojis
 
 1. Go to https://openmoji.org/library/#search=love to search emoji and find the code
 2. Switch to non-color version
diff --git a/src/components/AiComponents/README.md b/src/components/AiComponents/README.md
index 7b2cdd450..89d3b2229 100644
--- a/src/components/AiComponents/README.md
+++ b/src/components/AiComponents/README.md
@@ -1,4 +1,4 @@
-🖼 AI Components
+# 🖼 AI Components
 
 Theese are components that are used in dynamic next page and also rendered into static export
 
diff --git a/src/components/AiComponents/TODO.txt b/src/components/AiComponents/TODO.txt
index 5cac25277..47296a751 100644
--- a/src/components/AiComponents/TODO.txt
+++ b/src/components/AiComponents/TODO.txt
@@ -1 +1 @@
-TODO: [👨‍🦲] AI Components are deprecated, use custom html components instead
\ No newline at end of file
+TODO: [👨‍🦲] AI Components are deprecated, use webgpt components instead
\ No newline at end of file