tecitheme 0.5.2 → 0.6.0

package/dist/components/Figure.svelte

@@ -28,9 +28,7 @@
 
 {#if image}
 <section {id} class="not-prose mb-8 flex justify-center">
-  <figure
-    class="mx-auto w-auto border border-slate-100 bg-white p-2 shadow-lg"
-  >
+  <figure class="mx-auto w-auto border border-slate-100 p-2 shadow-lg">
     <a class="inline-block w-full bg-slate-200 p-1" href={figureLink}>
       <img class="mx-auto w-auto" src={figureImage} alt={title} {title} />
     </a>

package/dist/components/Footer.svelte

@@ -1,4 +1,6 @@
 <script>
+import Button from './Button.svelte'
+
   let d = new Date();
 </script>
 
@@ -168,48 +170,27 @@
           </div>
         </div>
       </div>
-      <div class="mt-8 flex flex-col justify-between md:items-end xl:mt-0">
-        <h3
-          class="text-right text-sm font-bold uppercase tracking-wider text-gray-300"
-        >
+      <div class="mt-8 flex flex-col justify-between space-y-4 md:items-end xl:mt-0">
+        <h3 class="text-right text-sm font-bold uppercase tracking-wider text-gray-300">
           Subscribe to Updates
         </h3>
-        <p
-          class="xxl:text-lg mt-4 text-right text-base leading-6 text-gray-300"
-        >
+        <p class="xxl:text-lg text-right text-base leading-6 text-gray-300">
           Receive information about new software releases, tutorials and major
           announcements.
         </p>
-        <data
-          id="mj-w-res-data"
-          data-token="c59142d82197a4f86bc30e8fa80e1ea8"
-          class="mj-w-data"
-          data-apikey="3aOX"
-          data-w-id="Fbu"
-          data-lang="en_US"
-          data-base="https://app.mailjet.com"
-          data-width="640"
-          data-height="480"
-          data-statics="statics"
+        <Button
+          url="https://www.thunderheadeng.com/subscribe"
+          text="Subscribe"
+          color="teci"
+          justify="right"
         />
-        <div
-          class="mj-w-button mj-w-btn mt-4 w-full md:max-w-xs"
-          data-token="c59142d82197a4f86bc30e8fa80e1ea8"
-        >
-          <div
-            class="mj-w-button-content flex w-full items-center justify-center border border-transparent bg-teci-blue-light px-4 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out hover:bg-teci-blue-dark focus:border-teci-blue-dark focus:outline-none"
-          >
-            Sign Up
-          </div>
-        </div>
       </div>
     </div>
     <div
       class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between"
     >
       <div class="flex space-x-6 md:order-3">
-        <a
-          href="https://www.linkedin.com/company/thunderheadeng"
+        <a href="https://www.linkedin.com/company/thunderheadeng"
           class="text-gray-300 hover:text-gray-300"
         >
           <span class="sr-only">LinkedIn</span>

package/dist/components/Header.svelte

@@ -31,7 +31,7 @@
 
 <svelte:window on:keyup={handleEscape} />
 
-<header id="menu" class="relative bg-white">
+<header id="menu" class="relative">
   <div
     aria-hidden="true"
     class="pointer-events-none absolute inset-0 z-30 shadow"
@@ -58,7 +58,7 @@
               openMenu == "products"
                 ? (openMenu = "")
                 : (openMenu = "products")}
-            class="group inline-flex items-center bg-white text-left text-base font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
+            class="group inline-flex items-center bg-white text-left text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
             aria-expanded={openMenu == "products"}
           >
             <span class:text-gray-900={openMenu == "products"}>Products</span>
@@ -108,7 +108,7 @@
                         <p class="text-base font-medium text-gray-900">
                           PyroSim
                         </p>
-                        <p class="mt-1 text-sm text-gray-500">
+                        <p class="mt-1 text-sm">
                           Analyze fire control and smoke dissipation in various
                           structures for fire protection and safety or
                           investigation.
@@ -138,7 +138,7 @@
                         <p class="text-base font-medium text-gray-900">
                           Pathfinder
                         </p>
-                        <p class="mt-1 text-sm text-gray-500">
+                        <p class="mt-1 text-sm">
                           Understand pedestrian egress and congestion hazards
                           for fire protection and safety or urban planning.
                         </p>
@@ -167,7 +167,7 @@
                         <p class="text-base font-medium text-gray-900">
                           PetraSim
                         </p>
-                        <p class="mt-1 text-sm text-gray-500">
+                        <p class="mt-1 text-sm">
                           Model nonisothermal multiphase flow and transport in
                           fractured and porous media for environmental
                           engineering.
@@ -269,7 +269,7 @@
             type="button"
             on:click={() =>
               openMenu == "support" ? (openMenu = "") : (openMenu = "support")}
-            class="group inline-flex items-center bg-white text-base font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
+            class="group inline-flex items-center bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
             aria-expanded={openMenu == "support"}
           >
             <span class:text-gray-900={openMenu == "support"}>Support</span>
@@ -325,7 +325,7 @@
                     <p class="text-base font-medium text-gray-900">
                       Documentation
                     </p>
-                    <p class="mt-1 text-sm text-gray-500">
+                    <p class="mt-1 text-sm">
                       Manuals and Reference Documents for all products
                     </p>
                   </div>
@@ -351,7 +351,7 @@
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">Tutorials</p>
-                    <p class="mt-1 text-sm text-gray-500">
+                    <p class="mt-1 text-sm">
                       Getting Started, Applications and Feature Demos
                     </p>
                   </div>
@@ -379,7 +379,7 @@
                     <p class="text-base font-medium text-gray-900">
                       Release Notes
                     </p>
-                    <p class="mt-1 text-sm text-gray-500">
+                    <p class="mt-1 text-sm">
                       Detailed changes each product release
                     </p>
                   </div>
@@ -405,7 +405,7 @@
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">FAQs</p>
-                    <p class="mt-1 text-sm text-gray-500">
+                    <p class="mt-1 text-sm">
                       Frequently Asked Questions (FAQs) and Answers
                     </p>
                   </div>
@@ -472,7 +472,7 @@
             type="button"
             on:click={() =>
               openMenu == "events" ? (openMenu = "") : (openMenu = "events")}
-            class="group inline-flex items-center bg-white text-base font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
+            class="group inline-flex items-center bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
             aria-expanded={openMenu == "events"}
           >
             <span class:text-gray-900={openMenu == "events"}>Events</span>
@@ -526,7 +526,7 @@
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">Calendar</p>
-                    <p class="mt-1 text-sm text-gray-500">
+                    <p class="mt-1 text-sm">
                       See upcoming events schedule.
                     </p>
                   </div>
@@ -552,7 +552,7 @@
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">FEMTC</p>
-                    <p class="mt-1 text-sm text-gray-500">
+                    <p class="mt-1 text-sm">
                       Fire and Evacuation Modeling Technical Conference
                     </p>
                   </div>
@@ -578,7 +578,7 @@
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">Training</p>
-                    <p class="mt-1 text-sm text-gray-500">
+                    <p class="mt-1 text-sm">
                       Both Online and In-person training options.
                     </p>
                   </div>
@@ -644,7 +644,7 @@
             type="button"
             on:click={() =>
               openMenu == "company" ? (openMenu = "") : (openMenu = "company")}
-            class="group inline-flex items-center bg-white text-base font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
+            class="group inline-flex items-center bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
             aria-expanded={openMenu == "company"}
           >
             <span class:text-gray-900={openMenu == "company"}>Company</span>
@@ -698,7 +698,7 @@
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">About</p>
-                    <p class="mt-1 text-sm text-gray-500">
+                    <p class="mt-1 text-sm">
                       Learn more about Thunderhead Engineering
                     </p>
                   </div>
@@ -724,7 +724,7 @@
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">News</p>
-                    <p class="mt-1 text-sm text-gray-500">
+                    <p class="mt-1 text-sm">
                       Announcements for our products and services
                     </p>
                   </div>
@@ -750,7 +750,7 @@
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">Jobs</p>
-                    <p class="mt-1 text-sm text-gray-500">
+                    <p class="mt-1 text-sm">
                       Become a part of the Thunderhead team
                     </p>
                   </div>
@@ -776,7 +776,7 @@
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">Partners</p>
-                    <p class="mt-1 text-sm text-gray-500">
+                    <p class="mt-1 text-sm">
                       International reseller and distributor network
                     </p>
                   </div>
@@ -839,7 +839,7 @@
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6 flex-shrink-0 text-gray-500 md:h-8 md:w-8"
+              class="h-6 w-6 flex-shrink-0 md:h-8 md:w-8"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -860,7 +860,7 @@
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6 flex-shrink-0 text-gray-500 md:h-8 md:w-8"
+              class="h-6 w-6 flex-shrink-0 md:h-8 md:w-8"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"

package/dist/components/Hero.svelte

@@ -1,6 +1,7 @@
 <script>
 import Icon from './Icon.svelte'
 
+  import { getColorStyles } from '../utils'
   export let data
   let id
 
@@ -9,7 +10,7 @@ import Icon from './Icon.svelte'
   }
 </script>
 
-<section {id} class="relative bg-white">
+<section {id} class="relative">
   <div class="mx-auto max-w-7xl md:grid md:grid-cols-12 md:gap-x-8 md:px-0">
     <div class="pt-0 pb-0 md:col-span-8 lg:col-span-7 xl:col-span-6">
       <div class="mx-auto">
@@ -24,15 +25,15 @@ import Icon from './Icon.svelte'
         {#if data.banner_text}
         <div class="mt-6 sm:mt-8 lg:mt-4 inline-flex space-x-6">
           <a href={data.banner_url}>
-            <span class="rounded-full bg-gray-300/10 px-3 py-1 text-sm font-semibold leading-6 {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : (data.color == "ventus" ? "text-ventus" : "text-teci-blue-dark")))} ring-1 ring-inset {(data.color == "pyrosim" ? "ring-pyrosim/20" : (data.color == "pathfinder" ? "ring-pathfinder/20" : (data.color == "ventus" ? "ring-ventus/20" : "ring-teci-blue-dark/20")))}">
+            <span class="rounded-full bg-gray-300/10 border px-3 py-1 text-sm font-semibold leading-6 {getColorStyles('text', data.color)}">
               {data.banner_text}
             </span>
           </a>
           <a href={data.banner_link_url}>
-            <span class="inline-flex items-center space-x-1 text-sm font-medium leading-6 text-gray-400">
+            <span class="inline-flex items-center space-x-1 text-sm font-medium leading-6 text-gray-500">
               <span>{data.banner_link_text}</span>
               <!-- Heroicon name: mini/chevron-right -->
-              <svg class="h-5 w-5 {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : (data.color == "ventus" ? "text-ventus" : "text-teci-blue-dark")))}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <svg class="h-5 w-5 {getColorStyles('text', data.color)}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                 <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
               </svg>
             </span>
@@ -40,27 +41,25 @@ import Icon from './Icon.svelte'
         </div>
         {/if}
         <h2 class="mt-10 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">{data.tagline}</h2>
-        <p class="mt-6 text-lg leading-8 text-gray-600">{data.text}</p>
+        <p class="mt-6 text-lg leading-8">{data.text}</p>
         {#if data.ctas}
           <div class="mt-10 flex gap-x-8 sm:justify-left">
             {#each data.ctas as cta}
-              <a href={cta.url} class="inline-block px-4 py-1.5 text-base font-semibold leading-7 shadow-sm ring-1 ring-gray-900/10 hover:ring-gray-900/20 hover:bg-teci-blue-dark
-              {(cta.color == "pyrosim" ? "bg-pyrosim text-white" : (cta.color == "pathfinder" ? "bg-pathfinder text-white" : (cta.color == "ventus" ? "bg-ventus text-white" : (cta.color == "white" ? "bg-white text-gray-600 hover:text-white" : "bg-teci-blue-dark text-white"))))}
-              ">
+              <a href={cta.url} class="inline-block btn {getColorStyles('button', cta.color)}">
                 {cta.text}
-                <span class="hidden sm:inline {(cta.color == "white" ? "text-gray-600" : "text-white")}" aria-hidden="true">&rarr;</span>
+                <span class="hidden sm:inline" aria-hidden="true">&rarr;</span>
               </a>
             {/each}
           </div>
         {/if}
         <div class="mt-16">
-          <section class="{(data.color == "pyrosim" ? "bg-pyrosim" : (data.color == "pathfinder" ? "bg-pathfinder" : (data.color == "ventus" ? "bg-ventus" : "bg-teci-blue-dark")))}">
+          <section class="{getColorStyles('background', data.color)}">
             <div class="text-center mx-auto max-w-4xl py-10 px-6 sm:py-10 lg:px-8">
               <h2 class="text-3xl font-bold tracking-tight text-white sm:text-2xl">
                 <span class="block">{@html data.heading}</span>
               </h2>
               <p class="mt-4 text-lg leading-6 text-gray-200">{@html data.body}</p>
-              <a href={data.cta_url} class="mt-8 inline-flex w-full items-center justify-center border border-transparent bg-white px-5 py-3 text-base font-medium text-gray-900 hover:bg-indigo-50 sm:w-auto">
+              <a href={data.cta_url} class="mt-8 inline-block btn {getColorStyles('button', data.cta_color)}">
                 {@html data.cta}
               </a>
             </div>

package/dist/components/LogoCloud.svelte

@@ -1,6 +1,6 @@
 <div class="bg-white">
   <div class="mx-auto max-w-7xl py-12 px-6 lg:py-16 lg:px-8">
-    <p class="text-center text-lg font-semibold text-gray-600">Trusted by fire protection experts all over the world</p>
+    <p class="text-center text-lg font-semibold">Trusted by fire protection experts all over the world</p>
     <div class="mt-6 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-8">
       <div class="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
         <img class="max-h-12" src="https://tailwindui.com/img/logos/transistor-logo-gray-400.svg" alt="Workcation">

package/dist/components/MediaFeature.svelte

@@ -1,6 +1,7 @@
 <script>
 import Video from './Video.svelte'
 
+  import { getColorStyles } from '../utils'
   export let data;
 
   let figureImage;
@@ -66,7 +67,9 @@ import Video from './Video.svelte'
     </div>
     {#if data.ctaText}
       <div class="mt-4 text-right md:text-left">
-        <a class="btn inline-block" href={data.ctaURL}>{data.ctaText}</a>
+        <a class="btn {getColorStyles('button', data.ctaColor)}" href={data.ctaURL}>
+          {data.ctaText}
+        </a>
       </div>
     {/if}
   </div>

package/dist/components/Modal.svelte

@@ -1,4 +1,5 @@
 <script>
+  import Button from "./Button.svelte";
   export let data;
   let shown = false;
 
@@ -27,7 +28,7 @@
       <p>{data.text}</p>
     {/if}
     {#if data.buttonText}
-      <button on:click={show} class="btn">{data.buttonText}</button>
+      <Button on:click={show} action=true text={data.buttonText} color={data.buttonColor} justify='left' />
     {/if}
   </div>
 {/if}

package/dist/components/NewsGrid.svelte

@@ -1,4 +1,6 @@
 <script>
+import Button from './Button.svelte'
+
   import { page } from '$app/stores';
   import { paginate, PaginationNav } from "svelte-paginate";
   import Icon from "./Icon.svelte";
@@ -66,23 +68,12 @@
       <p class="text-xl text-gray-500">{data.subtitle}</p>
     </div>
     <div class="w-32">
-      <data
-        id="mj-w-res-data"
-        data-token="f594659941689957f270ca278a80dc7d"
-        class="mj-w-data"
-        data-apikey="3aOX"
-        data-w-id="Fbu"
-        data-lang="en_US"
-        data-base="https://app.mailjet.com"
-        data-width="640"
-        data-height="480"
-        data-statics="statics"
-      />
-      <button
-        class="flex w-full items-center justify-center border border-transparent bg-teci-blue-light px-4 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out hover:bg-teci-blue-dark focus:border-teci-blue-dark focus:outline-none"
-        data-token="f594659941689957f270ca278a80dc7d"
-        onclick="mjOpenPopin(event, this)">Subscribe</button
-      >
+      <Button
+          url="https://www.thunderheadeng.com/subscribe"
+          text="Subscribe"
+          color="teci"
+          justify="right"
+        />
     </div>
   </div>
   {#if items.length > 0}
@@ -173,8 +164,12 @@
     {/if}
     {#if !showPagination}
       <div class="mt-8 w-full">
-        <a class="btn float-right" href="/news" rel="external">All News Posts</a
-        >
+        <Button
+          url="/news"
+          text="All News Posts"
+          color="teci"
+          justify="right"
+        />
       </div>
     {/if}
     {#if !postLimit}

package/dist/components/PricingTable.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { getColorStyles } from '../utils'
   export let data
   let toggleID = data.groups[0].id
   let id
@@ -47,7 +48,7 @@
                   <span class="text-base font-medium text-gray-500">{option.divisor}</span>  
                 {/if}
               </p>
-              <a href={option.cta_url} class="mt-8 block w-full border {(option.cta_color == "pyrosim" ? "border-pyrosim bg-pyrosim" : (data.color == "pathfinder" ? "border-pathfinder bg-pathfinder" : (data.color == "ventus" ? "border-ventus bg-ventus" : "border-teci-blue-dark bg-teci-blue-dark")))} py-2 text-center text-sm font-semibold text-white hover:bg-teci-blue-dark">{option.cta_label}</a>
+              <a href={option.cta_url} class="btn mt-8 block w-full border py-2 text-center text-sm font-semibold {getColorStyles('button', data.color)}">{option.cta_label}</a>
             </div>
             <div class="px-6 pt-6 pb-8">
               <h3 class="text-sm font-medium text-gray-900">{option.features_text}</h3>
@@ -58,7 +59,7 @@
                     <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" 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="text-sm text-gray-500">{feature.text}</span>
+                    <span class="text-sm {getColorStyles('text', data.color)}">{feature.text}</span>
                   </li>
                 {/each}
               </ul>
@@ -83,11 +84,9 @@
     {#if data.footer.ctas}
     <div class="flex gap-x-8 py-2 sm:justify-center">
       {#each data.footer.ctas as cta}
-        <a href={cta.url} class="inline-block whitespace-nowrap px-4 py-1.5 text-base font-semibold leading-7 shadow-sm ring-1 ring-gray-900/10 hover:ring-gray-900/20 hover:bg-teci-blue-dark
-        {(cta.color == "pyrosim" ? "bg-pyrosim text-white" : (cta.color == "pathfinder" ? "bg-pathfinder text-white" : (cta.color == "ventus" ? "bg-ventus text-white" : (cta.color == "white" ? "bg-white text-gray-600 hover:text-white" : "bg-teci-blue-dark text-white"))))}
-        ">
+        <a href={cta.url} class="btn {getColorStyles('button', cta.color)}">
           {cta.text}
-          <span class="hidden sm:inline {(cta.color == "white" ? "text-gray-600" : "text-white")}" aria-hidden="true">&rarr;</span>
+          <span class="hidden sm:inline" aria-hidden="true">&rarr;</span>
         </a>
       {/each}
     </div>

package/dist/components/Stats.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { getColorStyles } from '../utils'
   export let data
   let id
 
@@ -25,7 +26,7 @@
             {#each data.stats as stat, i}
             <div id="stat-{i}" class="flex flex-col border-b border-gray-100 p-6 text-center sm:border-0 sm:border-r sm:border-l">
               <dt class="order-2 mt-2 text-lg font-medium leading-6 text-gray-500">{stat.label}</dt>
-              <dd class="order-1 text-5xl font-bold tracking-tight {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : (data.color == "ventus" ? "text-ventus" : "text-teci-blue-dark")))}">{stat.value}</dd>
+              <dd class="order-1 text-5xl font-bold tracking-tight {getColorStyles('text', data.color)}">{stat.value}</dd>
             </div>
             {/each}
           </dl>

package/dist/components/Testimonial.svelte

@@ -1,6 +1,7 @@
 <script>
 import Icon from './Icon.svelte'
 
+  import { getColorStyles } from '../utils'
   import { slide } from 'svelte/transition';
   import { onMount } from 'svelte'
 
@@ -78,7 +79,7 @@ import Icon from './Icon.svelte'
             y="0"
             width="4"
             height="4"
-            class="text-gray-200"
+            class="{getColorStyles('text', data.color)} opacity-20"
             fill="currentColor"></rect>
         </pattern>
       </defs>
@@ -146,7 +147,7 @@ import Icon from './Icon.svelte'
                       {quote.fullname}
                     </div>
                     <div
-                      class="text-base font-medium {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : (data.color == "ventus" ? "text-ventus" : "text-teci-blue-dark")))}"
+                      class="text-base font-medium {getColorStyles('text', data.color)}"
                     >
                       {quote.fulltitle}
                     </div>

package/dist/layouts/blocks.svelte

@@ -10,10 +10,9 @@
   import TrialForm from "../components/TrialForm.svelte";
   import Video from "../components/Video.svelte";
   import Hero from "../components/Hero.svelte";
-  import CTABranded from "../components/CTABranded.svelte";
   import FeatureGrid from "../components/FeatureGrid.svelte";
   import LogoCloud from "../components/LogoCloud.svelte";
-  import CtaSplitImage from "../components/CTASplitImage.svelte";
+  import CTASplitImage from "../components/CTASplitImage.svelte";
   import ContentTwoColumns from "../components/ContentTwoColumns.svelte";
   import PricingTable from "../components/PricingTable.svelte";
   import Stats from "../components/Stats.svelte";
@@ -21,7 +20,7 @@
 
   let blocks = [
     { ref: "accordion", component: Accordion},
-    { ref: "cta-center", component: CTA },
+    { ref: "cta", component: CTA },
     { ref: "heading-centered", component: HeadingCentered },
     { ref: "media-feature", component: MediaFeature },
     { ref: "modal", component: Modal },
@@ -31,10 +30,9 @@
     { ref: "trial-form", component: TrialForm },
     { ref: "video", component: Video },
     { ref: "hero", component: Hero },
-    { ref: "cta-branded", component: CTABranded },
     { ref: "feature-grid", component: FeatureGrid },
     { ref: "logo-cloud", component: LogoCloud },
-    { ref: "cta-split-image", component: CtaSplitImage },
+    { ref: "cta-split-image", component: CTASplitImage },
     { ref: "content-two-columns", component: ContentTwoColumns },
     { ref: "pricing-table", component: PricingTable },
     { ref: "stats", component: Stats },

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
 export function scrollTo(anchor: any): void;
+export function getColorStyles(type: any, color: any): string;
 export function validateEmail(email: any): boolean;
 export function slugFromPath(path: any): void;
 export function buildToC(): boolean;

package/dist/utils.js

@@ -4,6 +4,75 @@ export function scrollTo(anchor) {
   });
 }
 
+export function getColorStyles(type, color){
+  let classes = ""
+  switch (type) {
+    case 'text':
+      switch (color) {
+        case 'pyrosim':
+          classes = "text-pyrosim"
+          break;
+        case 'pathfinder':
+          classes = "text-pathfinder"
+          break;
+        case 'ventus':
+          classes = "text-ventus"
+          break;
+        case 'gray':
+          classes = "text-gray-300"
+          break;
+        case 'white':
+          classes = "text-white"
+          break;
+        default:
+          classes = "text-teci-blue-dark"
+          break;
+      }
+      break;
+    case 'button':
+      switch (color) {
+        case 'pyrosim':
+          classes = "bg-pyrosim hover:bg-pyrosim-dark text-white focus:ring-teci-blue-light border-pyrosim-dark"
+          break;
+        case 'pathfinder':
+          classes = "bg-pathfinder hover:bg-pathfinder-dark text-white focus:ring-teci-blue-light border-pathfinder-dark"
+          break;
+        case 'ventus':
+          classes = "bg-ventus hover:bg-ventus-dark text-white focus:ring-teci-blue-light border-ventus-dark"
+          break;
+        case 'white':
+          classes = "bg-white text-gray-600 hover:bg-gray-200 focus:ring-teci-blue-light border-gray-200"
+          break;
+        default:
+          classes = "bg-teci-blue-light hover:bg-teci-blue-dark text-white focus:ring-teci-blue-light border-teci-blue-dark"
+          break;
+      }
+      break;
+      case 'background':
+        switch (color) {
+          case 'pyrosim':
+            classes = "bg-pyrosim text-white"
+            break;
+          case 'pathfinder':
+            classes = "bg-pathfinder text-white"
+            break;
+          case 'ventus':
+            classes = "bg-ventus text-white"
+            break;
+          case 'teci':
+            classes = "bg-teci-blue-light text-white"
+            break;
+          default:
+            classes = "bg-white"
+            break;
+        }
+        break;
+    default:
+      break;
+  }
+  return classes;
+}
+
 export function validateEmail(email) {
   const re =
     /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;