tecitheme 0.3.3 → 0.3.4

package/src/lib/components/CountrySelector.svelte

@@ -0,0 +1,167 @@
+<script>
+  import Modal from '$lib/components/Modal.svelte';
+
+  export let resellerModal = true;
+  export let selection = 'sel';
+  export let allowContinue = false;
+
+  let modal;
+  let modalData;
+  let resellerIndex = -1;
+  
+  let resellerArray = [
+    ['BE', 'NL', 'LU'],
+    ['CN', 'HK'],
+    ['CZ', 'SK'],
+    ['EG', 'JO', 'LB', 'OM', 'QA', 'SA', 'AE'],
+    ['FR'],
+    ['DE', 'CH', 'AT', 'LI'],
+    ['GR','CY'],
+    ['IN', 'BD', 'LK', 'CM', 'BT', 'MM'],
+    ['IT', 'HU'],
+    ['JP'],
+    ['KR'],
+    ['PL', 'UA'],
+    ['RU', 'AM', 'AZ', 'BY', 'GE', 'KZ', 'KG', 'MD', 'TJ', 'TM', 'UZ'],
+    ['RO'],
+    ['SG', 'MY', 'ID', 'VN'],
+    ['ES'],
+  ];
+
+  let resellerLinks = [
+    'belgium-netherlands-and-luxembourg',
+    'china-and-hong-kong',
+    'czech-republic-and-slovak-republic',
+    'egypt-jordan-lebanon-oman-qatar-saudi-arabia-united-arab-emirates',
+    'france-and-french-language-customers-in-other-regions',
+    'germany-switzerland-austria-and-liechtenstein',
+    'greece-cyprus',
+    'india-bangladesh-sri-lanka-nepal-bhutan-myanmar',
+    'italy-hungary',
+    'japan',
+    'korea',
+    'poland-ukraine',
+    'russia-and-cis',
+    'romania',
+    'singapore-malaysia-indonesia-and-vietnam',
+    'spain',
+  ];
+
+  function isReseller() {
+    resellerIndex = resellerArray.findIndex((arr) => arr.includes(selection));
+    return resellerIndex > -1;
+  }
+
+  function handleSelection() {
+    if (resellerModal) {
+      if (selection != 'sel' && !isReseller()) {
+        allowContinue = true;
+      } else if (selection != 'sel' && isReseller()) {
+        modal.show();
+        allowContinue = false;
+      } else {
+        allowContinue = false;
+      }
+    }
+  }
+
+  $:modalData = {
+    modalContent: `<h2 class="text-lg leading-6 font-medium text-gray-900">Reseller Required</h2><div class="mt-2 px-7 py-3"><p class="text-sm text-gray-500">Thunderhead cannot sell to you directly, you must use the authorized reseller for your region.</p></div><div class="items-center px-4 py-3"><a href="https://www.thunderheadeng.com/partners#${resellerLinks[resellerIndex]}" id="ok-btn" class="px-4 py-2 bg-teci-blue-light text-white text-base font-medium w-full shadow-sm hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Reseller Contact Information</a></div>`,
+  };
+</script>
+
+<select
+  name="card_country"
+  bind:value="{selection}"
+  on:change="{handleSelection}"
+>
+  <option value="sel">Select Your Country</option>
+  <option value="AI">Anguilla</option>
+  <option value="AR">Argentina</option>
+  <option value="AM">Armenia</option>
+  <option value="AU">Australia</option>
+  <option value="AT">Austria</option>
+  <option value="AZ">Azerbaijan</option>
+  <option value="BD">Bangladesh</option>
+  <option value="BY">Belarus</option>
+  <option value="BE">Belgium</option>
+  <option value="BR">Brazil</option>
+  <option value="CA">Canada</option>
+  <option value="CL">Chile</option>
+  <option value="HR">Croatia</option>
+  <option value="CN">China</option>
+  <option value="CR">Costa Rica</option>
+  <option value="CY">Cyprus</option>
+  <option value="CZ">Czech Republic</option>
+  <option value="DK">Denmark</option>
+  <option value="DO">Dominican Republic</option>
+  <option value="EC">Ecuador</option>
+  <option value="EG">Egypt</option>
+  <option value="EE">Estonia</option>
+  <option value="FO">Faroe Islands</option>
+  <option value="FI">Finland</option>
+  <option value="FR">France</option>
+  <option value="GE">Georgia</option>
+  <option value="DE">Germany</option>
+  <option value="GR">Greece</option>
+  <option value="HK">Hong Kong</option>
+  <option value="HU">Hungary</option>
+  <option value="IS">Iceland</option>
+  <option value="IN">India</option>
+  <option value="ID">Indonesia</option>
+  <option value="IE">Ireland</option>
+  <option value="IL">Israel</option>
+  <option value="IT">Italy</option>
+  <option value="JM">Jamaica</option>
+  <option value="JP">Japan</option>
+  <option value="JO">Jordan</option>
+  <option value="KZ">Kazakhstan</option>
+  <option value="KW">Kuwait</option>
+  <option value="KG">Kyrgyzstan</option>
+  <option value="LV">Latvia</option>
+  <option value="LB">Lebanon</option>
+  <option value="LT">Lithuania</option>
+  <option value="LU">Luxembourg</option>
+  <option value="MY">Malaysia</option>
+  <option value="MT">Malta</option>
+  <option value="MX">Mexico</option>
+  <option value="MD">Moldova</option>
+  <option value="MM">Myanmar</option>
+  <option value="CM">Nepal</option>
+  <option value="NL">Netherlands</option>
+  <option value="NZ">New Zealand</option>
+  <option value="NO">Norway</option>
+  <option value="OM">Oman</option>
+  <option value="PE">Peru</option>
+  <option value="PH">Philippines</option>
+  <option value="PL">Poland</option>
+  <option value="PT">Portugal</option>
+  <option value="QA">Qatar</option>
+  <option value="RO">Romania</option>
+  <option value="RU">Russia</option>
+  <option value="SA">Saudi Arabia</option>
+  <option value="SG">Singapore</option>
+  <option value="SK">Slovakia</option>
+  <option value="SI">Slovenia</option>
+  <option value="ZA">South Africa</option>
+  <option value="KR">South Korea</option>
+  <option value="ES">Spain</option>
+  <option value="LK">Sri Lanka</option>
+  <option value="SE">Sweden</option>
+  <option value="CH">Switzerland</option>
+  <option value="TW">Taiwan</option>
+  <option value="TJ">Tajikistan</option>
+  <option value="TH">Thailand</option>
+  <option value="TR">Turkey</option>
+  <option value="TM">Turkmenistan</option>
+  <option value="UA">Ukraine</option>
+  <option value="AE">United Arab Emirates</option>
+  <option value="GB">United Kingdom</option>
+  <option value="US">United States</option>
+  <option value="UY">Uruguay</option>
+  <option value="UZ">Uzbekistan</option>
+  <option value="VE">Venezuela</option>
+  <option value="VN">Viet Nam</option>
+</select>
+
+<Modal bind:this="{modal}" bind:data="{modalData}" />

package/src/lib/components/FeatureGrid.svelte

@@ -0,0 +1,40 @@
+<script>
+  export let data
+</script>
+
+<section>
+  <div class="sm:text-center">
+    {#if data.preheading}
+    <p class="mb-2 text-lg font-semibold leading-8 
+      {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : "text-teci-blue-dark"))}
+    ">
+        {data.preheading}
+    </p>
+    {/if}
+    <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+      {data.heading}
+    </h2>
+    {#if data.subheading}
+      <p class="mx-auto mt-6 max-w-2xl text-lg leading-8 text-gray-600">
+        {data.subheading}
+      </p>
+    {/if}
+  </div>
+  <div class="mt-12 max-w-lg sm:mx-auto md:max-w-none">
+    <div class="grid grid-cols-1 gap-y-8 md:grid-cols-2 md:gap-x-12">
+      {#each data.blocks as block}
+        <div class="relative flex flex-row gap-6">
+          <div class="hidden sm:flex h-12 w-12 items-center justify-center text-white sm:shrink-0 flex-shrink-0 
+          {(data.color == "pyrosim" ? "bg-pyrosim" : (data.color == "pathfinder" ? "bg-pathfinder" : "bg-teci-blue-dark"))}
+          ">
+            <Icon classes="w-auto" icon={block.icon} />
+          </div>
+          <div class="sm:min-w-0 sm:flex-1">
+            <p class="text-lg font-semibold leading-8 text-gray-900">{block.heading}</p>
+            <p class="mt-2 text-base leading-7 text-gray-600">{block.body}</p>
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+</section>

package/src/lib/components/Figure.svelte

@@ -0,0 +1,37 @@
+<script>
+  export let image;
+  export let title;
+  export let caption;
+  export let link;
+
+  let figureImage;
+  let figureLink;
+
+  if (image.startsWith("http")) {
+    figureImage = image;
+    figureLink = link ? link : image;
+  } else if (image.includes("gif")) {
+    figureImage = "https://teci-files.imgix.net/www/images/" + image;
+    figureLink = link ? link : "https://teci-files.imgix.net/www/images/" + image;
+  } else {
+    figureImage = "https://teci-files.imgix.net/www/images/" +
+      image +
+      "?auto=compress&auto=format";
+    figureLink = link ? link : "https://teci-files.imgix.net/www/images/" + image;
+  }
+</script>
+
+{#if image}
+  <section class="not-prose mb-8 flex justify-center">
+    <figure
+      class="mx-auto w-auto border border-slate-100 bg-white 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>
+      {#if caption}
+        <figcaption class="p-2 text-center">{@html caption}</figcaption>
+      {/if}
+    </figure>
+  </section>
+{/if}

package/src/lib/components/Footer.svelte

@@ -0,0 +1,270 @@
+<script>
+  let d = new Date();
+</script>
+
+<footer id="bottom" class="bg-gray-800" aria-labelledby="footerHeading">
+  <h2 id="footerHeading" class="sr-only">Footer</h2>
+  <div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+    <div class="xl:grid xl:grid-cols-3 xl:gap-8">
+      <div class="grid grid-cols-2 gap-8 xl:col-span-2">
+        <div class="md:grid md:grid-cols-2 md:gap-8">
+          <div>
+            <h3
+              class="text-sm font-bold uppercase tracking-wider text-gray-300"
+            >
+              Products
+            </h3>
+            <ul class="mt-4 space-y-4">
+              <li>
+                <a
+                  href="https://www.thunderheadeng.com/pyrosim/"
+                  class="text-base text-gray-100 hover:text-white"
+                >
+                  PyroSim
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://www.thunderheadeng.com/pathfinder/"
+                  class="text-base text-gray-100 hover:text-white"
+                >
+                  Pathfinder
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://www.thunderheadeng.com/petrasim/"
+                  class="text-base text-gray-100 hover:text-white"
+                >
+                  PetraSim
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://www.thunderheadeng.com/other"
+                  class="text-base text-gray-100 hover:text-white"
+                >
+                  Other Tools
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="mt-12 md:mt-0">
+            <h3
+              class="text-sm font-bold uppercase tracking-wider text-gray-300"
+            >
+              Support
+            </h3>
+            <ul class="mt-4 space-y-4">
+              <li>
+                <a
+                  href="https://support.thunderheadeng.com/docs/"
+                  class="text-base text-gray-100 hover:text-white"
+                >
+                  Documentation
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://support.thunderheadeng.com/tutorials/"
+                  class="text-base text-gray-100 hover:text-white"
+                >
+                  Tutorials
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://support.thunderheadeng.com/release-notes/"
+                  class="text-base text-gray-100 hover:text-white"
+                >
+                  Release Notes
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://support.thunderheadeng.com/answers/"
+                  class="text-base text-gray-100 hover:text-white"
+                >
+                  FAQs
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="md:grid md:grid-cols-2 md:gap-8">
+          <div>
+            <h3
+              class="text-sm font-bold uppercase tracking-wider text-gray-300"
+            >
+              Events
+            </h3>
+            <ul class="mt-4 space-y-4">
+              <li>
+                <a
+                  href="https://www.thunderheadeng.com/training/"
+                  class="text-base text-gray-100 hover:text-white"
+                >
+                  Calendar
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://www.femtc.com/"
+                  class="text-base text-gray-100 hover:text-white"
+                >
+                  FEMTC
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://www.thunderheadeng.com/training/"
+                  class="text-base text-gray-100 hover:text-white"
+                >
+                  Training
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="mt-12 md:mt-0">
+            <h3
+              class="text-sm font-bold uppercase tracking-wider text-gray-300"
+            >
+              Company
+            </h3>
+            <ul class="mt-4 space-y-4">
+              <li>
+                <a
+                  href="https://www.thunderheadeng.com/about/"
+                  class="text-base text-gray-100 hover:text-white"
+                >
+                  About
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://www.thunderheadeng.com/news/"
+                  class="text-base text-gray-100 hover:text-white"
+                >
+                  News
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://www.thunderheadeng.com/job-openings/"
+                  class="text-base text-gray-100 hover:text-white"
+                >
+                  Jobs
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://www.thunderheadeng.com/partners"
+                  class="text-base text-gray-100 hover:text-white"
+                >
+                  Partners
+                </a>
+              </li>
+            </ul>
+          </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"
+        >
+          Subscribe to Updates
+        </h3>
+        <p
+          class="xxl:text-lg mt-4 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"
+        />
+        <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"
+          class="text-gray-300 hover:text-gray-300"
+        >
+          <span class="sr-only">LinkedIn</span>
+          <svg
+            class="h-6 w-6"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
+            />
+          </svg>
+        </a>
+
+        <a
+          href="https://www.facebook.com/thunderheadeng"
+          class="text-gray-300 hover:text-gray-300"
+        >
+          <span class="sr-only">Facebook</span>
+          <svg
+            class="h-6 w-6"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </a>
+
+        <a
+          href="https://twitter.com/thunderheadeng"
+          class="text-gray-300 hover:text-gray-300"
+        >
+          <span class="sr-only">Twitter</span>
+          <svg
+            class="h-6 w-6"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path
+              d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"
+            />
+          </svg>
+        </a>
+      </div>
+      <p class="mt-8 text-sm text-gray-300 md:order-1 md:mt-0">
+        &copy; 1998 - {d.getFullYear()} Thunderhead Engineering, All rights reserved.
+      </p>
+    </div>
+  </div>
+</footer>