tecitheme 0.10.12 → 0.11.0

package/dist/components/CTA.svelte

@@ -1,11 +1,7 @@
 <script>
-  import { getColorStyles } from '../utils'
+  import { getColorStyles, makeIdString } from '../utils'
   export let data = {};
-  let id
-
-  if (data.name) {
-    id = encodeURIComponent(data.name).toLowerCase()
-  }
+  let id = makeIdString(data.name);
 </script>
 
 <section {id} class="{data.bgColor?'p-8':''} {getColorStyles('background', data.bgColor)}

package/dist/components/CTASplitImage.svelte

@@ -1,17 +1,13 @@
 <script>
-  import { getColorStyles } from '../utils'
+  import { getColorStyles, makeIdString } from '../utils'
   import Button from './Button.svelte'
   export let data = {};
-  let id
-
-  if (data.name) {
-    id = encodeURIComponent(data.name).toLowerCase()
-  }
+  let id = makeIdString(data.name);
 </script>
 
 <section {id} class="relative {getColorStyles('background', data.color)}">
   <div class="h-56 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/2">
-    <img class="h-full w-full object-cover" src="https://teci.imgix.net/www/images/{data.image}?w=608&fit=clip&auto=compress&auto=format" alt="Image for {data.preheading}">
+    <img class="h-full w-full object-cover" src="https://files.thunderheadeng.com/www/images/{data.image}?w=608&fit=clip&auto=compress&auto=format" alt="Image for {data.preheading}">
   </div>
   <div class="relative mx-auto max-w-7xl py-12 px-6 lg:px-8 lg:py-16">
     <div class="md:ml-auto md:w-1/2 md:pl-10">

package/dist/components/Card.svelte

@@ -11,10 +11,10 @@ import Button from './Button.svelte'
 
   if (data.image) {
     if (data.image.includes("gif")) {
-      backgroundImage = "https://teci.imgix.net/www/images/" + data.image;
+      backgroundImage = "https://files.thunderheadeng.com/www/images/" + data.image;
     } else {
       backgroundImage =
-        "https://teci.imgix.net/www/images/" +
+        "https://files.thunderheadeng.com/www/images/" +
         data.image +
         "?w=698&h=392&fit=crop&auto=compress&auto=format";
     }

package/dist/components/ContentTwoColumns.svelte

@@ -1,11 +1,7 @@
 <script>
-  import { getColorStyles } from '../utils'
+  import { getColorStyles, makeIdString } from '../utils'
   export let data = {};
-  let id
-
-  if (data.name) {
-    id = encodeURIComponent(data.name).toLowerCase()
-  }
+  let id = makeIdString(data.name);
 </script>
 
 <section {id} class="overflow-hidden mx-auto max-w-max lg:max-w-7xl">

package/dist/components/FeatureGrid.svelte

@@ -1,13 +1,9 @@
 <script>
 import Icon from './Icon.svelte'
 
-  import { getColorStyles } from '../utils'
+  import { getColorStyles, makeIdString } from '../utils'
   export let data = {};
-  let id
-
-  if (data.name) {
-    id = encodeURIComponent(data.name).toLowerCase()
-  }
+  let id = makeIdString(data.name);
 </script>
 
 <section {id} class="overflow-hidden mx-auto max-w-max lg:max-w-7xl">

package/dist/components/FeatureTable.svelte

@@ -0,0 +1,402 @@
+<script>
+  import { getColorStyles, makeIdString } from "../utils";
+    import { writable } from "svelte/store";
+
+  export let data = {};
+  let id = makeIdString(data.name);
+
+  //Restructure feature table data for HTML. This is a bit confusing, but it does work. Example data structure below.
+  /**
+   * {
+   *    selectorSection: {
+   *      columns: [
+   *        {
+   *          name: text
+   *          flavorText: text
+   *          highlightOption: boolean
+   *        }
+   *      ],
+   *      categories: {
+   *        categoryName: { 
+   *          name: text
+   *          features: {
+   *            featureName: {
+   *              name: text,
+   *              helpText: text,
+   *              order: int, //desktop only
+   *              values: {
+   *                columnName: {
+   *                  value: text/boolean
+   *                  mobileOrder: int
+   *              }
+   *              }
+   *            }
+   *          }
+   *        }
+   *      }
+   *    }
+   * }
+  */
+  let tables = {};
+  data.selectorSections.forEach(section => {
+    if (section.options) 
+    {
+      tables[section.name] = {columns: [], categories: []}; //Initialize key for the section object
+
+      section.options.forEach(option => {
+
+        tables[section.name]["columns"].push({name: option.name, flavorText: option.flavorText, highlightOption: option.highlightOption});
+
+        if (option.features) {
+          option.features.forEach(category => { 
+
+            // Big 'ole ternary to retrieve or initialize category data
+            let catData = tables[section.name]["categories"][category.name] 
+            ? tables[section.name]["categories"][category.name] 
+            : {name: category.name, features: {}};
+
+            category.features.forEach((feature, index) => {
+
+              // Another ternary to retrieve or initialize existing feature (row) data, inside the category
+              let featureData = catData["features"][feature.name]
+              ? catData["features"][feature.name] 
+              : {name: feature.name, values: {}, order: index};
+
+              //This will overwrite if feature help text is duplicated, but this should be fine
+              if (feature.helpText) featureData["helpText"] = feature.helpText;
+
+              //Key values by the column name
+              featureData.values[option.name] = {value: feature.value, mobileOrder: index};
+
+              //Store feature data
+              catData["features"][feature.name] = featureData;
+            });
+
+            //Store category data
+            tables[section.name]["categories"][category.name] = catData;
+
+          });
+        }
+      });
+
+    }
+  });
+
+  let selectedButton = writable({});
+  let selectedTable = writable({});
+
+  //Initialize data stores
+  if (data.selectorSections) {
+    selectedButton.update(val => data.selectorSections[0]);
+    selectedTable.update(val => tables[$selectedButton.name]);
+  }
+
+  //Update table store when new button is selected
+  selectedButton.subscribe(val => selectedTable.update(table => tables[val.name]))
+
+  /**
+   * 
+   * @param features An object of features, as defined in the table above
+   * @param columnName If specified, filters feature such that the values parameter must have a value specified for the given columnName
+   */
+  function sortFeaturesByOrder(features, columnName) {
+
+    if (columnName != undefined)
+    {
+      let filteredFeatures = Object.values(features).filter(feature => feature.values[columnName] != undefined);
+
+      let sortedFeatures = filteredFeatures.sort((feature1, feature2) => {
+        if (feature1.values[columnName].mobileOrder < feature2.values[columnName].mobileOrder) return -1
+        else if (feature1.values[columnName].mobileOrder === feature2.values[columnName].mobileOrder) return 0
+        else return 1
+      });
+
+      return sortedFeatures;
+    }
+    else 
+    {
+      return Object.values(features).sort((feature1, feature2) => {
+        if (feature1.order < feature2.order) return -1
+        else if (feature1.order === feature2.order) return 0
+        else return 1
+      });
+    }
+  }
+
+</script>
+
+<div id={id} class="bg-white">
+  <main>
+    <!-- Pricing Section -->
+    <div class="isolate overflow-hidden">
+      <div class="flow-root bg-gradient-to-b {getColorStyles("gradient-dark", data.product)} py-16 sm:pt-32 lg:pb-0">
+        <div class="mx-auto max-w-7xl px-6 lg:px-8">
+
+          <!-- Title, Text, and Buttons -->
+          {#if data.hero}
+            <div class="relative z-10">
+              <!-- Title -->
+              {#if data.hero.title}
+                <h1 class="mx-auto max-w-4xl text-center text-5xl font-bold tracking-tight text-white break-words hyphens-auto">{data.hero.title}</h1>
+              {/if}
+              <!-- Hero Text -->
+              {#if data.hero.text}
+                <p class="mx-auto mt-4 max-w-2xl text-center text-lg leading-8 text-white">{data.hero.text}</p>  
+              {/if}
+
+              <!-- Buttons -->
+              <div class="mt-16 flex justify-center">
+                <fieldset class="flex flex-row space-x-1 bg-white/5 text-center text-xs font-semibold leading-5 text-white">
+                  <legend class="sr-only">Payment frequency</legend>
+
+                  {#each data.selectorSections as btn}
+                    <button class="{$selectedButton === btn ? getColorStyles("background", data.product) : "bg-transparent"} px-4 py-2" on:click={selectedButton.update(val => btn)}>
+                      {btn.name}
+                    </button>
+                  {/each}
+
+                </fieldset>
+              </div>
+            </div>
+          {/if}
+
+          <!-- Option Cards -->
+          <div class="relative mx-auto mt-10 flex flex-col space-y-8 lg:space-y-0 lg:space-x-4 lg:flex-row">
+
+            <div class="hidden lg:absolute lg:inset-x-px lg:bottom-0 lg:top-4 lg:block" aria-hidden="true"></div>
+
+            {#if $selectedButton.options}
+              {#each $selectedButton.options as card}
+                
+                <div class="relative ring-1 ring-white/30 lg:pb-14 {card.highlightOption ? getColorStyles("background", data.product) : "bg-white"} w-full shadow-lg">
+                  <div class="p-8 lg:pt-12 xl:p-10 xl:pt-14">
+
+                    <!-- Card Title -->
+                    <h2 id={makeIdString(card.name)} class="text-sm font-semibold leading-6 {card.highlightOption ? "text-white" : "text-black"}">{card.name}</h2>
+
+                    <!-- Price / Freqeuency -->
+                    <div class="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between lg:flex-col lg:items-stretch">
+                      <div class="mt-2 flex items-center gap-x-4">
+                        <!-- Price -->
+                        <p class="text-4xl font-bold tracking-tight {card.highlightOption ? "text-white" : "text-black"}">{card.price}</p>
+                        <div class="text-sm leading-5">
+                          <p class="{card.highlightOption ? "text-white" : "text-black"}">USD</p>
+                          
+                          {#if card.frequencyText}
+                            <p class="{card.highlightOption ? "text-white" : "text-black"}">{card.frequencyText}</p>
+                          {/if}
+                        </div>
+                      </div>
+
+                      <!-- Call to Action -->
+                      {#if card.cta}
+                        <a href={card.cta.href} class="py-2 lg:px-3 sm:px-12 text-center text-sm font-semibold leading-6 {getColorStyles("button", card.highlightOption ? "white" : data.product)}">{card.cta.text}</a>
+                      {/if}
+                    </div>
+                    
+                    <!-- Highlighted Features -->
+                    {#if card.highlightedFeatures}
+                      <div class="mt-8 flow-root sm:mt-10">
+                        <ul role="list" class="-my-2 divide-y border-t text-sm leading-6 lg:border-t-0  {card.highlightOption ? "text-white divide-white/50 border-white/50" : "text-black divide-black/50 border-black/50"}">
+
+                          {#each card.highlightedFeatures as feature}
+                            <li class="flex gap-x-3 py-2">
+                              <svg class="h-6 w-5 flex-none {card.highlightOption ? "text-white" : "text-gray-500"}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                              </svg>
+                              {feature}
+                            </li>
+                          {/each}
+                        </ul>
+                      </div>
+                    {/if}
+                  </div>
+                </div>
+
+              {/each}
+            {/if}
+          </div>
+        </div>
+      </div>
+
+      <!-- Desktop Feature Comparison Tables -->
+      <div class="hidden lg:flex flex-col mx-auto w-full items-center lg:py-20 lg:px-8">
+        {#each Object.values($selectedTable.categories) as category, categoryIndex}
+
+          <!-- Table heading -->
+          <div class="flex flex-row space-x-8 w-full items-end {categoryIndex === 0 ? "border-t" : ""}">
+            
+            <!-- Category Name -->
+            <h4 class="text-sm font-semibold leading-6 text-gray-900 w-full pt-10">{category.name}</h4>
+
+            <!-- Headers, if the first category in the list -->
+            {#each $selectedTable.columns as column}
+              <div class="-mt-px border-t-2 w-full border-transparent py-8 {column.highlightOption && categoryIndex === 0 ? getColorStyles("border", data.product) : ""}">
+                  {#if categoryIndex === 0}
+                    <h3 class="text-sm font-semibold leading-6 text-gray-900 {column.highlightOption ? getColorStyles("text", data.product) : ""}">{column.name}</h3>
+                    {#if column.flavorText}
+                      <p class="mt-1 text-sm leading-6 text-gray-600">{column.flavorText}</p>
+                    {/if}
+                  {/if}
+              </div>
+            {/each}
+          </div>
+
+          <!-- Table -->
+          <div class="relative flex flex-col w-full pt-8 shadow-lg">
+              {#each sortFeaturesByOrder(category.features) as feature, featureIndex}
+                <div class="w-full flex flex-row items-center justify-center {featureIndex !== Object.values(category.features).length - 1 ? "border-b" : ""} space-x-8">
+                  <!-- Row Header -->
+                  <div class="flex flex-row w-full py-3 pl-4 text-left text-sm font-normal leading-6 text-gray-900 items-center space-x-2">
+                    <p>{feature.name}</p>
+
+                    <!-- Info Icon and Text -->
+                    {#if feature.helpText}
+                      <span class="relative group">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+                        </svg> 
+                        <div class="absolute hidden group-hover:block bg-white border shadow-lg p-2 w-48 z-10 text-center left-1/2 -translate-x-1/2">
+                          <p>{feature.helpText}</p>
+                        </div>                       
+                      </span>
+                    {/if}
+                  </div>
+
+                  <!-- Row Values -->
+                  {#each $selectedTable.columns as column}
+                      <p class="w-full h-full px-4 py-3 text-center
+                      {column.highlightOption ? "font-bold " + getColorStyles("text", data.product) : ""}
+                      ">
+
+                        {#if feature.values[column.name] != undefined}
+                          <!-- Check mark -->
+                          {#if feature.values[column.name].value === true}
+                            <svg class="mx-auto h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                            </svg>
+                            <span class="sr-only">Yes</span>
+
+                          <!-- X Mark -->
+                          {:else if feature.values[column.name].value === false}
+                            <svg class="mx-auto h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                              <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+                            </svg>
+                            <span class="sr-only">No</span>
+
+                          <!-- Text -->
+                          {:else if feature.values[column.name].value}
+                            {feature.values[column.name].value}
+                          {/if}
+                        {/if}
+                      </p>
+                  {/each}
+                </div>
+              {/each}
+
+              <!-- Dummy div for background rings around features -->
+              <div class="pointer-events-none absolute flex flex-row before:block w-full h-full space-x-8 top-0 pt-8" aria-hidden="true">
+                  <div class="w-full"></div>
+                  {#each $selectedTable.columns as column}
+                    <div class="w-full ring-gray-900/10 {column.highlightOption ? getColorStyles("ring", data.product) + " ring-2" : "ring-1"}"></div>
+                  {/each}
+              </div>
+
+            </div>
+        {/each}
+      </div>
+
+      <!-- Mobile Feature Comparison Tables -->
+      <div class="lg:hidden flex flex-col mx-auto w-full px-8 pt-14">
+
+        {#each $selectedTable.columns as column}
+          <!-- Mobile table headings  -->
+          <div class="flex flex-row">
+            <div class="flex flex-col w-full border-t py-8 {column.highlightOption ? getColorStyles("border", data.product) : ""}">
+              <h3 class="text-sm font-semibold leading-6 text-gray-900 {column.highlightOption ? getColorStyles("text", data.product) : ""}">
+                {column.name}
+              </h3>
+              {#if column.flavorText}
+                <p>{column.flavorText}</p>
+              {/if}
+            </div>
+            <div class="border-t w-full" />
+          </div>
+
+          <!-- Mobile tables -->
+          <div class="flex flex-col w-full pb-14 space-y-8">
+            {#each Object.values($selectedTable.categories) as category}
+              <div class="relative flex flex-col space-y-8">
+                
+                <h4 class="text-sm font-semibold leading-6 text-gray-900 w-full">{category.name}</h4>
+
+                <!-- Tables -->
+                <div class="flex flex-col w-full shadow-lg">
+
+                  {#each sortFeaturesByOrder(category.features, column.name) as feature, featureIndex }
+                    <!-- Row -->
+                    <div class="w-full flex flex-row items-center justify-center {featureIndex !== Object.values(category.features).filter(obj => obj.values[column.name] != undefined).length - 1 ? "border-b" : ""} space-x-8">
+
+                      <!-- Row Header -->
+                      <div class="flex flex-row w-full text-left text-sm font-normal leading-6 text-gray-900 items-center space-x-2 pl-4">
+                        <p>{feature.name}</p>
+
+                        <!-- Info Icon and Text -->
+                        {#if feature.helpText}
+                          <span class="relative group">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                              <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+                            </svg> 
+                            <div class="absolute hidden group-hover:block bg-white border shadow-lg p-2 w-48 z-10 text-center left-1/2 -translate-x-1/2">
+                              <p>{feature.helpText}</p>
+                            </div>                       
+                          </span>
+                        {/if}
+                      </div>
+
+                      <!-- Row Values -->
+                      <p class="w-full h-full px-4 py-3 text-center
+                      {column.highlightOption ? "font-bold " + getColorStyles("text", data.product) : ""}
+                      ">
+
+                        <!-- Check mark -->
+                        {#if feature.values[column.name].value === true}
+                          <svg class="mx-auto h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                          </svg>
+                          <span class="sr-only">Yes</span>
+
+                        <!-- X Mark -->
+                        {:else if feature.values[column.name].value === false}
+                          <svg class="mx-auto h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+                          </svg>
+                          <span class="sr-only">No</span>
+
+                        <!-- Text -->
+                        {:else}
+                          {feature.values[column.name].value}
+                        {/if}
+                      </p>
+
+                    </div>
+                  {/each}
+
+                </div>
+
+                <!-- Dummy div for background rings around features -->
+                <div class="pointer-events-none absolute flex flex-row before:block w-full h-full space-x-8 top-0 pt-8 pb-8" aria-hidden="true">
+                    <div class="w-full"></div>
+                    <div class="w-full ring-gray-900/10 {column.highlightOption ? getColorStyles("ring", data.product) + " ring-2" : "ring-1"}"></div>
+                </div>
+
+              </div>
+            {/each}
+          </div>
+        {/each}
+      </div>
+    
+    </div>
+  </main>
+
+</div>

package/dist/components/FeatureTable.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  FeatureTableProps */
+/** @typedef {typeof __propDef.events}  FeatureTableEvents */
+/** @typedef {typeof __propDef.slots}  FeatureTableSlots */
+export default class FeatureTable extends SvelteComponent<{
+    data?: {};
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FeatureTableProps = typeof __propDef.props;
+export type FeatureTableEvents = typeof __propDef.events;
+export type FeatureTableSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        data?: {};
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/Figure.svelte

@@ -1,4 +1,6 @@
 <script>
+    import { makeIdString } from "../utils";
+
   export let image = undefined;
   export let title = undefined;
   export let caption = undefined;
@@ -6,23 +8,19 @@
 
   let figureImage;
   let figureLink;
-  let id
-
-  if (title) {
-    id = encodeURIComponent(title).toLowerCase()
-  }
+  let id = makeIdString(title);
 
   if (image.startsWith("http")) {
     figureImage = image;
     figureLink = link ? link : image;
   } else if (image.includes("gif")) {
-    figureImage = "https://teci.imgix.net/www/images/" + image;
-    figureLink = link ? link : "https://teci.imgix.net/www/images/" + image;
+    figureImage = "https://files.thunderheadeng.com/www/images/" + image;
+    figureLink = link ? link : "https://files.thunderheadeng.com/www/images/" + image;
   } else {
-    figureImage = "https://teci.imgix.net/www/images/" +
+    figureImage = "https://files.thunderheadeng.com/www/images/" +
       image +
       "?auto=compress&auto=format";
-    figureLink = link ? link : "https://teci.imgix.net/www/images/" + image;
+    figureLink = link ? link : "https://files.thunderheadeng.com/www/images/" + image;
   }
 </script>
 

package/dist/components/HeadingCentered.svelte

@@ -1,12 +1,9 @@
 <script>
   //Based on: https://tailwindui.com/components/marketing/sections/header#component-2c3b25e7b9e4490edd7b6950692c0a11
   import Icon from "./Icon.svelte";
+    import { makeIdString } from "../utils";
   export let data = {};
-  let id
-
-  if (data.name) {
-    id = encodeURIComponent(data.name).toLowerCase()
-  }
+  let id = makeIdString(data.name);
 </script>
 
 <!-- This example requires Tailwind CSS v2.0+ -->

package/dist/components/Hero.svelte

@@ -1,13 +1,9 @@
 <script>
 import Icon from './Icon.svelte'
 
-  import { getColorStyles } from '../utils'
+  import { getColorStyles, makeIdString } from '../utils'
   export let data = {};
-  let id
-
-  if (data.name) {
-    id = encodeURIComponent(data.name).toLowerCase()
-  }
+  let id = makeIdString(data.name);
 </script>
 
 <section {id} class="relative">
@@ -69,11 +65,11 @@ import Icon from './Icon.svelte'
     </div>
     <div class="relative hidden md:block md:col-span-4 lg:col-span-5 xl:col-span-6">
       {#if data.video}
-      <video src="https://teci.imgix.net/www/videos/{data.video}" autoplay="true" loop muted 
+      <video src="https://files.thunderheadeng.com/www/videos/{data.video}" autoplay="true" loop muted 
         class="absolute object-cover h-full w-full">
       </video>
       {:else if data.image}
-        <img src="https://teci.imgix.net/www/images/{data.image}?fmt=auto" alt={data.heading}
+        <img src="https://files.thunderheadeng.com/www/images/{data.image}?fmt=auto" alt={data.heading}
         class="absolute object-cover h-full w-full"
         >
       {/if}

package/dist/components/Icon.svelte

@@ -1,20 +1,18 @@
 <script>
+    import { makeIdString } from "../utils";
+
   // Allows icons from https://fonts.google.com/icons?selected=Material+Icons by name in the format 'icon-XXXX'.
   export let icon = undefined;
   export let classes = undefined;
 
-  let id;
-
-  if (icon) {
-    id = encodeURIComponent(icon).toLowerCase()
-  }
+  let id = makeIdString(icon);
 </script>
 
 {#if icon == "pyrosim"}
   <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://teci.imgix.net/www/images/pyrosim_icon.svg"
+      src="https://files.thunderheadeng.com/www/images/pyrosim_icon.svg"
       alt="PyroSim"
       title="PyroSim Icon"
     />
@@ -23,7 +21,7 @@
   <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://teci.imgix.net/www/images/pyrosim-results_icon.svg"
+      src="https://files.thunderheadeng.com/www/images/pyrosim-results_icon.svg"
       alt="PyroSim Results"
       title="PyroSim Results Icon"
     />
@@ -32,7 +30,7 @@
   <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://teci.imgix.net/www/images/pyrosim_logo.svg"
+      src="https://files.thunderheadeng.com/www/images/pyrosim_logo.svg"
       alt="PyroSim Logo"
       title="PyroSim Logo"
     />
@@ -41,7 +39,7 @@
   <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://teci.imgix.net/www/images/pathfinder_icon.svg"
+      src="https://files.thunderheadeng.com/www/images/pathfinder_icon.svg"
       alt="Pathfinder"
       title="Pathfinder Icon"
     />
@@ -50,7 +48,7 @@
   <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://teci.imgix.net/www/images/pathfinder-results_icon.svg"
+      src="https://files.thunderheadeng.com/www/images/pathfinder-results_icon.svg"
       alt="Pathfinder Results"
       title="Pathfinder Results Icon"
     />
@@ -59,7 +57,7 @@
   <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://teci.imgix.net/www/images/pathfinder_logo.svg"
+      src="https://files.thunderheadeng.com/www/images/pathfinder_logo.svg"
       alt="Pathfinder Logo"
       title="Pathfinder Logo"
     />
@@ -68,7 +66,7 @@
   <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://teci.imgix.net/www/images/ventus_icon.svg"
+      src="https://files.thunderheadeng.com/www/images/ventus_icon.svg"
       alt="Ventus"
       title="Ventus Icon"
     />
@@ -77,7 +75,7 @@
   <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://teci.imgix.net/www/images/ventus_logo.svg"
+      src="https://files.thunderheadeng.com/www/images/ventus_logo.svg"
       alt="Ventus Logo"
       title="Ventus Logo"
     />
@@ -86,7 +84,7 @@
   <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://teci.imgix.net/www/images/petrasim_icon.svg"
+      src="https://files.thunderheadeng.com/www/images/petrasim_icon.svg"
       alt="PetraSim"
       title="PetraSim Icon"
     />
@@ -95,7 +93,7 @@
   <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://teci.imgix.net/www/images/petrasim_logo.svg"
+      src="https://files.thunderheadeng.com/www/images/petrasim_logo.svg"
       alt="PetraSim Logo"
       title="PetraSim Logo"
     />
@@ -104,7 +102,7 @@
   <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://teci.imgix.net/www/images/teci_logo.svg"
+      src="https://files.thunderheadeng.com/www/images/teci_logo.svg"
       alt="Thunderhead Logo"
       title="Thunderhead Logo"
     />

package/dist/components/MediaFeature.svelte

@@ -1,34 +1,30 @@
 <script>
 import Video from './Video.svelte'
 
-  import { getColorStyles } from '../utils'
+  import { getColorStyles, makeIdString } from '../utils'
   export let data = {};
 
   let figureImage;
   let figureLink;
-  let id
-
-  if (data.name) {
-    id = encodeURIComponent(data.name).toLowerCase()
-  }
+  let id = makeIdString(data.name);
 
   if (data.image) {
     if (data.image.startsWith("http")) {
       figureImage = data.image;
       figureLink = data.link ? data.link : data.image;
     } else if (data.image.includes("gif")) {
-      figureImage = "https://teci.imgix.net/www/images/" + data.image;
+      figureImage = "https://files.thunderheadeng.com/www/images/" + data.image;
       figureLink = data.link
         ? data.link
-        : "https://teci.imgix.net/www/images/" + data.image;
+        : "https://files.thunderheadeng.com/www/images/" + data.image;
     } else {
       figureImage =
-        "https://teci.imgix.net/www/images/" +
+        "https://files.thunderheadeng.com/www/images/" +
         data.image +
         "?w=576&ar=16:9&fit=crop&auto=compress&auto=format";
       figureLink = data.link
         ? data.link
-        : "https://teci.imgix.net/www/images/" + data.image;
+        : "https://files.thunderheadeng.com/www/images/" + data.image;
     }
   }
 </script>

package/dist/components/NewsGrid.svelte

@@ -4,6 +4,7 @@ import Button from './Button.svelte'
   import { page } from '$app/stores';
   import { paginate, PaginationNav } from "svelte-paginate";
   import Icon from "./Icon.svelte";
+    import { makeIdString } from '../utils';
 
   export let data = {};
 
@@ -16,11 +17,7 @@ import Button from './Button.svelte'
   let showArrows = (data.showArrows?data.showArrows:false);
   let rangeLimit = (data.rangeLimit?data.rangeLimit:1)
   let showPagination = (data.showPagination?data.showPagination:false);
-  let id
-
-  if (data.name) {
-    id = encodeURIComponent(data.name).toLowerCase()
-  }
+  let id = makeIdString(data.name);
 
   if (postLimit > 0) {
     posts = posts.slice(0, postLimit);

package/dist/components/PageNav.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getColorStyles } from "../utils";
+  import { getColorStyles, makeIdString } from "../utils";
   import { fade, slide } from "svelte/transition";
   import { cubicIn, cubicOut } from "svelte/easing";
   import Icon from "./Icon.svelte";
@@ -7,10 +7,7 @@
   export let data = {};
   let {logo, logo_mobile, logo_link_url, logo_alt_text, ctas, dropdowns, links} = data;
 
-  let id;
-  if (data.name) {
-    id = encodeURIComponent(data.name).toLowerCase()
-  }
+  let id = makeIdString(data.name);
 
   let openDropdown = "";
   export function clickOutside(node) {

package/dist/components/PartnersList.svelte

@@ -6,6 +6,7 @@
   import slugify from "slugify";
   import { writable } from "svelte/store";
   import { onMount } from "svelte";
+    import { makeIdString } from "../utils";
 
   export let data;
   let {name, product} = data;
@@ -22,10 +23,7 @@
   let regionSelector = {};
   regions.forEach(region => regionSelector[region] = false);
 
-  let id;
-  if (name) {
-    id = encodeURIComponent(name).toLowerCase()
-  }
+  let id = makeIdString(name);
 
   //Filter the list of partners again using new information
   function refresh() {

package/dist/components/PricingTable.svelte

@@ -1,12 +1,8 @@
 <script>
-  import { getColorStyles } from '../utils'
+  import { getColorStyles, makeIdString } from '../utils'
   export let data = {};
   let toggleID = data.groups[0].id
-  let id
-
-  if (data.name) {
-    id = encodeURIComponent(data.name).toLowerCase()
-  }
+  let id = makeIdString(data.name);
 
   function toggleSelection(group_id) {
     toggleID = group_id

package/dist/components/SidebarContent.svelte

@@ -1,16 +1,12 @@
 <script>
   import { onMount } from "svelte";
-  import { buildToC } from "../utils.js";
+  import { buildToC, makeIdString } from "../utils.js";
 
   export let data = {};
   export let title = undefined;
   export let date = undefined;
   export let lastmod = undefined;
-  let id
-
-  if (data.name) {
-    id = encodeURIComponent(data.name).toLowerCase()
-  }
+  let id = makeIdString(data.name);
 
   let formattedDate =
     date != undefined

package/dist/components/Stats.svelte

@@ -1,11 +1,7 @@
 <script>
-  import { getColorStyles } from '../utils'
+  import { getColorStyles, makeIdString } from '../utils'
   export let data = {};
-  let id
-
-  if (data.name) {
-    id = encodeURIComponent(data.name).toLowerCase()
-  }
+  let id = makeIdString(data.name);
 </script>
 
 <section {id} class="bg-gray-50">
@@ -32,7 +28,7 @@
           </dl>
         </div>
         <figure>
-          <img class="w-full" alt="{(data.imageAltText?data.imageAltText:data.heading)}" src="https://teci.imgix.net/www/images/{data.image}?w=1152&fit=crop&auto=compress&auto=format">
+          <img class="w-full" alt="{(data.imageAltText?data.imageAltText:data.heading)}" src="https://files.thunderheadeng.com/www/images/{data.image}?w=1152&fit=crop&auto=compress&auto=format">
         </figure>
       </div>
     </div>

package/dist/components/Testimonial.svelte

@@ -2,7 +2,7 @@
 import Button from './Button.svelte'
 import Icon from './Icon.svelte'
 
-  import { getColorStyles } from '../utils'
+  import { getColorStyles, makeIdString } from '../utils'
   import { slide } from 'svelte/transition';
   import { quintInOut } from 'svelte/easing';
   import { onMount } from 'svelte'
@@ -13,11 +13,7 @@ import Icon from './Icon.svelte'
   let interval = 12000;
   let auto = true;
   let slideInterval;
-  let id;
-
-  if (data.name) {
-    id = encodeURIComponent(data.name).toLowerCase()
-  }
+  let id = makeIdString(data.name);
 
   onMount(() => {
     setSlideAutomation();
@@ -89,7 +85,7 @@ import Icon from './Icon.svelte'
           <div class="hidden lg:block lg:flex-shrink-0">
             <img
               class="h-64 w-64 rounded-full xl:h-80 xl:w-80"
-              src="https://teci.imgix.net/www/images/{quote.image}?w=320&fit=facearea,crop&facepad=3&monochrome=9B9B9B&auto=compress&auto=format"
+              src="https://files.thunderheadeng.com/www/images/{quote.image}?w=320&fit=facearea,crop&facepad=3&monochrome=9B9B9B&auto=compress&auto=format"
               alt="Image of {quote.fullname}"
               title="{quote.fullname}"
             />
@@ -129,7 +125,7 @@ import Icon from './Icon.svelte'
                     <div class="flex-shrink-0 lg:hidden">
                       <img
                         class="h-12 w-12 rounded-full"
-                        src="https://teci.imgix.net/www/images/{quote.image}?w=48&fit=clip&monochrome=9B9B9B&auto=compress&auto=format"
+                        src="https://files.thunderheadeng.com/www/images/{quote.image}?w=48&fit=clip&monochrome=9B9B9B&auto=compress&auto=format"
                         alt="Thumbnail Image of {quote.fullname}"
                       />
                     </div>

package/dist/components/ThreeColumn.svelte

@@ -1,11 +1,8 @@
 <script>
   import Card from "./Card.svelte";
+  import { makeIdString } from "../utils";
   export let data = {};
-  let id
-
-  if (data.name) {
-    id = encodeURIComponent(data.name).toLowerCase()
-  }
+  let id = makeIdString(data.name);
 </script>
 
 <section {id} class="mx-auto w-full">

package/dist/components/Video.svelte

@@ -47,7 +47,7 @@
   if (v) {
     if (v.includes("mp4")) {
       youtube = false;
-      videoURL = `https://teci.imgix.net/www/videos/${v}`;
+      videoURL = `https://files.thunderheadeng.com/www/videos/${v}`;
     } else {
       youtube = true;
       videoID = v;
@@ -55,7 +55,7 @@
   } else if (data.v) {
     if (data.v.includes("mp4")) {
       youtube = false;
-      videoURL = `https://teci.imgix.net/www/videos/${data.v}`;
+      videoURL = `https://files.thunderheadeng.com/www/videos/${data.v}`;
     } else {
       youtube = true;
       videoID = data.v;
@@ -66,9 +66,9 @@
   };
 
   if (thumbnail) {
-    thumb = `https://teci.imgix.net/www/images/${thumbnail}?w=1214&fit=clip&auto=compress&auto=format`;
+    thumb = `https://files.thunderheadeng.com/www/images/${thumbnail}?w=1214&fit=clip&auto=compress&auto=format`;
   } else if (data.thumbnail) {
-    thumb = `https://teci.imgix.net/www/images/${data.thumbnail}?w=1214&fit=clip&auto=compress&auto=format`;
+    thumb = `https://files.thunderheadeng.com/www/images/${data.thumbnail}?w=1214&fit=clip&auto=compress&auto=format`;
   } else if (videoID) {
     if (youtube) {
       thumb = `https://i.ytimg.com/vi/${videoID}/maxresdefault.jpg`;

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { default as CountrySelector } from "./components/CountrySelector.svelte"
 export { default as CTA } from "./components/CTA.svelte";
 export { default as CTASplitImage } from "./components/CTASplitImage.svelte";
 export { default as FeatureGrid } from "./components/FeatureGrid.svelte";
+export { default as FeatureTable } from "./components/FeatureTable.svelte";
 export { default as Figure } from "./components/Figure.svelte";
 export { default as Footer } from "./components/Footer.svelte";
 export { default as Header } from "./components/Header.svelte";

package/dist/index.js

@@ -11,6 +11,7 @@ export { default as CountrySelector } from './components/CountrySelector.svelte'
 export { default as CTA } from './components/CTA.svelte';
 export { default as CTASplitImage } from './components/CTASplitImage.svelte';
 export { default as FeatureGrid } from './components/FeatureGrid.svelte';
+export { default as FeatureTable } from './components/FeatureTable.svelte';
 export { default as Figure } from './components/Figure.svelte';
 export { default as Footer } from './components/Footer.svelte';
 export { default as Header } from './components/Header.svelte';

package/dist/layouts/blocks.svelte

@@ -11,6 +11,7 @@
   import Video from "../components/Video.svelte";
   import Hero from "../components/Hero.svelte";
   import FeatureGrid from "../components/FeatureGrid.svelte";
+  import FeatureTable from "../components/FeatureTable.svelte";
   import LogoCloud from "../components/LogoCloud.svelte";
   import CTASplitImage from "../components/CTASplitImage.svelte";
   import ContentTwoColumns from "../components/ContentTwoColumns.svelte";
@@ -33,6 +34,7 @@
     { ref: "video", component: Video },
     { ref: "hero", component: Hero },
     { ref: "feature-grid", component: FeatureGrid },
+    { ref: "feature-table", component: FeatureTable },
     { ref: "logo-cloud", component: LogoCloud },
     { ref: "cta-split-image", component: CTASplitImage },
     { ref: "content-two-columns", component: ContentTwoColumns },
@@ -58,9 +60,9 @@
   let featuredImage;
 
   if (image) {
-    featuredImage = "https://teci.imgix.net/www/images/" + image + "?w=1200&h=627&fit=crop&auto=compress&auto=format";
+    featuredImage = "https://files.thunderheadeng.com/www/images/" + image + "?w=1200&h=627&fit=crop&auto=compress&auto=format";
   } else {
-    featuredImage = "https://teci.imgix.net/www/images/teci_icon_250.png";
+    featuredImage = "https://files.thunderheadeng.com/www/images/teci_icon_250.png";
   }
 
   let pageNav = page_sections ? page_sections.filter(sect => sect.fieldGroup === "pageNav")[0] : undefined;

package/dist/utils.d.ts

@@ -3,3 +3,4 @@ export function getColorStyles(type: any, color: any): string;
 export function validateEmail(email: any): boolean;
 export function slugFromPath(path: any): void;
 export function buildToC(): boolean;
+export function makeIdString(text: any): string;

package/dist/utils.js

@@ -67,6 +67,139 @@ export function getColorStyles(type, color){
             break;
         }
         break;
+      case 'border':
+        switch (color) {
+          case 'pyrosim':
+            classes = "border-pyrosim"
+            break;
+          case 'pathfinder':
+            classes = "border-pathfinder"
+            break;
+          case 'ventus':
+            classes = "border-ventus"
+            break;
+          case 'teci':
+            classes = "border-teci-blue-light"
+            break;
+          default:
+            classes = "border-white"
+            break;
+        }
+        break;
+      case 'border-t':
+        switch (color) {
+          case 'pyrosim':
+            classes = "border-t-pyrosim"
+            break;
+          case 'pathfinder':
+            classes = "border-t-pathfinder"
+            break;
+          case 'ventus':
+            classes = "border-t-ventus"
+            break;
+          case 'teci':
+            classes = "border-t-teci-blue-light"
+            break;
+          default:
+            classes = "border-t-white"
+            break;
+        }
+        break;
+      case 'border-b':
+        switch (color) {
+          case 'pyrosim':
+            classes = "border-b-pyrosim"
+            break;
+          case 'pathfinder':
+            classes = "border-b-pathfinder"
+            break;
+          case 'ventus':
+            classes = "border-b-ventus"
+            break;
+          case 'teci':
+            classes = "border-b-teci-blue-light"
+            break;
+          default:
+            classes = "border-b-white"
+            break;
+        }
+        break;
+      case 'border-x':
+        switch (color) {
+          case 'pyrosim':
+            classes = "border-x-pyrosim"
+            break;
+          case 'pathfinder':
+            classes = "border-x-pathfinder"
+            break;
+          case 'ventus':
+            classes = "border-x-ventus"
+            break;
+          case 'teci':
+            classes = "border-x-teci-blue-light"
+            break;
+          default:
+            classes = "border-x-white"
+            break;
+        }
+        break;
+      case 'gradient':
+        switch (color) {
+          case 'pyrosim':
+            classes = "from-pyrosim to-white"
+            break;
+          case 'pathfinder':
+            classes = "from-pathfinder to-white"
+            break;
+          case 'ventus':
+            classes = "from-ventus to-white"
+            break;
+          case 'teci':
+            classes = "from-teci-blue-light to-white"
+            break;
+          default:
+            classes = "bg-white"
+            break;
+        }
+        break;
+      case 'gradient-dark':
+        switch (color) {
+          case 'pyrosim':
+            classes = "from-pyrosim-dark to-white"
+            break;
+          case 'pathfinder':
+            classes = "from-pathfinder-dark to-white"
+            break;
+          case 'ventus':
+            classes = "from-ventus-dark to-white"
+            break;
+          case 'teci':
+            classes = "from-teci-blue-dark to-white"
+            break;
+          default:
+            classes = "bg-white"
+            break;
+        }
+        break;
+      case 'ring':
+        switch (color) {
+          case 'pyrosim':
+            classes = "ring-pyrosim"
+            break;
+          case 'pathfinder':
+            classes = "ring-pathfinder"
+            break;
+          case 'ventus':
+            classes = "ring-ventus"
+            break;
+          case 'teci':
+            classes = "ring-teci-blue-light"
+            break;
+          default:
+            classes = "ring-white"
+            break;
+        }
+        break;
     default:
       break;
   }
@@ -160,3 +293,11 @@ export function buildToC() {
     return true;
   }
 }
+
+// Takes a string and transforms it to something usable as an anchor tag in HTML
+export function makeIdString(text) {
+  if (text) {
+    return encodeURIComponent(text).toLowerCase();
+  }
+  return null; //Null because most of our components use a null id as a default
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecitheme",
-  "version": "0.10.12",
+  "version": "0.11.0",
   "license": "MIT",
   "scripts": {
     "dev": "vite dev",