tecitheme 0.0.4 → 0.0.5

package/README.md

@@ -4,4 +4,4 @@ SvelteKit Design System for Thunderhead web properties.
 
 NPM package available at: https://www.npmjs.com/package/tecitheme
 
-See the hosted site in this project for documentation and component details.
+See https://tecitheme.netlify.app/ for demo, documentation and component details.

package/components/CountrySelector.svelte

@@ -3,8 +3,10 @@
     import Modal from "./Modal.svelte";
 
     export let resellerModal = true;
-    let modal;
     export let selection = 'sel';
+    export let allowContinue = false;
+
+    let modal;
     let resellerIndex = -1;
     let resellerArray = [
         ["BE", "NL", "LU"],
@@ -24,8 +26,6 @@
         ["ES"]
     ]
     
-    export let allowContinue = false;
-
     function isReseller() {
         resellerIndex = resellerArray.findIndex(arr => arr.includes(selection))
         return resellerIndex > -1

package/components/Header.svelte

@@ -1,5 +1,5 @@
 <script>
-    import IconTE from "../Logos/TECi_icon_250.svelte";
+    import Icon from "./Icon.svelte";
 </script>
 
 <header>
@@ -7,11 +7,11 @@
     <div class="absolute inset-0 shadow z-30 pointer-events-none" aria-hidden="true"></div>
     <div class="relative">
       <div class="max-w-7xl mx-auto flex justify-between items-center px-4 py-5 md:space-x-6 sm:px-6 sm:py-4 lg:px-8 md:justify-start lg:space-x-10">
-        <!-- Nav IconTE Linked to WWW Homepage -->
+        <!-- Nav Icon Linked to WWW Homepage -->
         <div class="flex-shrink-0">
           <a href="https://www.thunderheadeng.com" class="flex">
             <span class="sr-only">Thunderhead Engineering</span>
-            <IconTE classes="h-10 w-auto"/>
+            <Icon classes="h-10 w-auto" />
           </a>
         </div>
   
@@ -50,7 +50,7 @@
                   <a href="https://www.thunderheadeng.com/pyrosim/" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50">
                     <div class="flex md:h-full lg:flex-col">
                       <div class="flex-shrink-0">
-                        <img class="h-12 w-auto" src="https://files.thunderheadeng.com/www/images/pyrosim_icon.svg" alt="PyroSim" />
+                        <Icon classes="h-12 w-auto" icon="pyrosim" />
                       </div>
                       <div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
                         <div>
@@ -71,7 +71,7 @@
                   <a href="https://www.thunderheadeng.com/pathfinder/" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50">
                     <div class="flex md:h-full lg:flex-col">
                       <div class="flex-shrink-0">
-                        <img class="h-12 w-auto" src="https://files.thunderheadeng.com/www/images/pathfinder_icon.svg" alt="Pathfinder" />
+                        <Icon classes="h-12 w-auto" icon="pathfinder" />
                       </div>
                       <div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
                         <div>
@@ -92,7 +92,7 @@
                   <a href="https://www.thunderheadeng.com/petrasim/" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50">
                     <div class="flex md:h-full lg:flex-col">
                       <div class="flex-shrink-0">
-                        <img class="h-12 w-auto" src="https://files.thunderheadeng.com/www/images/petrasim_icon.svg" alt="PetraSim" />
+                        <Icon classes="h-12 w-auto" icon='petrasim' />
                       </div>
                       <div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
                         <div>

package/components/Icon.svelte

@@ -0,0 +1,45 @@
+<script>
+	export let icon;
+	export let classes;
+</script>
+
+{#if icon == 'pyrosim'}
+	<img
+		class={classes}
+		src="https://files.thunderheadeng.com/www/images/pyrosim_icon.svg"
+		alt="PyroSim"
+        title="PyroSim Icon"
+	/>
+{:else if icon == 'pathfinder'}
+	<img
+		class={classes}
+		src="https://files.thunderheadeng.com/www/images/pathfinder_icon.svg"
+		alt="Pathfinder"
+        title="Pathfinder Icon"
+	/>
+{:else if icon == 'petrasim'}
+	<img
+		class={classes}
+		src="https://files.thunderheadeng.com/www/images/petrasim_icon.svg"
+		alt="PetraSim"
+        title="PetraSim Icon"
+	/>
+{:else}
+	<svg class={classes} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
+		<path
+			style="fill:#0c3879;fill-rule:evenodd;stroke:none"
+			d="M88.113 220.536h97.672v97.672H88.113z"
+			transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
+		/>
+		<path
+			style="fill:#fff;fill-rule:evenodd;stroke:none"
+			d="M145.864 260.176h22.042c2.792 0 4.883.835 6.559 2.651 1.532 1.673 2.232 3.764 2.232 6.278 0 2.37-.7 4.464-2.232 6.277-1.676 1.675-3.767 2.651-6.559 2.651h-22.042v-17.857m0 23.159h22.042c2.792 0 4.883.838 6.559 2.65 1.532 1.674 2.232 3.768 2.232 6.278 0 2.373-.7 4.464-2.232 6.278-1.676 1.675-3.767 2.65-6.559 2.65h-22.042v-17.856"
+			transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
+		/>
+		<path
+			style="fill:#fff;fill-rule:evenodd;stroke:none"
+			d="M132.471 301.192c-5.861 0-8.79-3.07-8.79-8.929l-.138-37.389-20.648-.14c-7.116-1.254-10.185-9.626-5.165-15.206 1.535-1.535 3.63-2.373 6.14-2.651h26.926l1.675.14h35.435c2.792 0 4.883.836 6.559 2.649 1.532 1.675 2.232 3.767 2.232 6.28 0 2.37-.7 4.464-2.232 6.277-1.676 1.673-3.767 2.651-6.559 2.651H141.26V301.192h-8.788"
+			transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
+		/>
+	</svg>
+{/if}

package/components/Icon.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  IconProps */
+/** @typedef {typeof __propDef.events}  IconEvents */
+/** @typedef {typeof __propDef.slots}  IconSlots */
+export default class Icon extends SvelteComponentTyped<{
+    icon: any;
+    classes: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconProps = typeof __propDef.props;
+export type IconEvents = typeof __propDef.events;
+export type IconSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        icon: any;
+        classes: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/SectionHeaderCentered.svelte

@@ -0,0 +1,24 @@
+<script>
+    //Based on: https://tailwindui.com/components/marketing/sections/header#component-2c3b25e7b9e4490edd7b6950692c0a11
+	
+    export let data = {
+		toptext: 'Small Top Text ',
+		title: 'Big Title Text',
+		subtitle: 'Subtitle Text'
+	};
+</script>
+
+<!-- This example requires Tailwind CSS v2.0+ -->
+<div class="text-center">
+{#if data.toptext}
+    <h2 class="text-base font-semibold text-indigo-600 tracking-wide uppercase">
+    {data.toptext}
+    </h2>
+{/if}
+<p class="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
+    {data.title}
+</p>
+<p class="max-w-xl mt-5 mx-auto text-xl text-gray-500">
+    {data.subtitle}
+</p>
+</div>

package/components/SectionHeaderCentered.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  SectionHeaderCenteredProps */
+/** @typedef {typeof __propDef.events}  SectionHeaderCenteredEvents */
+/** @typedef {typeof __propDef.slots}  SectionHeaderCenteredSlots */
+export default class SectionHeaderCentered extends SvelteComponentTyped<{
+    data?: {
+        toptext: string;
+        title: string;
+        subtitle: string;
+    };
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SectionHeaderCenteredProps = typeof __propDef.props;
+export type SectionHeaderCenteredEvents = typeof __propDef.events;
+export type SectionHeaderCenteredSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        data?: {
+            toptext: string;
+            title: string;
+            subtitle: string;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/ThreeColumn.svelte

@@ -0,0 +1,67 @@
+<script>
+	//Based on:
+	//https://tailwindui.com/components/marketing/sections/feature-sections#component-c683653471044e6ffc32739e199dfbf2
+	//https://tailwindui.com/components/marketing/sections/team-sections#component-0efa5ebc92e2aa72bc2332fcf5578869
+
+	import Icon from './Icon.svelte';
+
+	export let title = 'A better way to send money.';
+
+	export let data = [
+		{
+			icon: 'pyrosim',
+			image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/09/company_pyrosim.jpg',
+			heading: 'PyroSim',
+			subheading: 'Fire & Smoke',
+			text: 'Analyze fire control and smoke dissipation in various structures for fire protection and safety or investigation.',
+			linkText: 'Learn More »',
+			linkURL: '/pyrosim'
+		},
+		{
+			icon: 'pathfinder',
+			image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/08/company_pathfinder.png',
+			heading: 'Pathfinder',
+			subheading: 'Evacuation',
+			text: 'Understand pedestrian egress and congestion hazards for fire protection and safety or urban planning.',
+			linkText: 'Learn More »',
+			linkURL: '/pathfinder'
+		},
+		{
+			icon: 'petrasim',
+			image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/08/company_petrasim.png',
+			heading: 'PetraSim',
+			subheading: 'Subsurface Flow',
+			text: 'Model nonisothermal multiphase flow and transport in fractured and porous media for environmental engineering.',
+			linkText: 'Learn More »',
+			linkURL: '/petrasim'
+		}
+	];
+</script>
+
+<!-- This example requires Tailwind CSS v2.0+ -->
+<div class="py-12 bg-white mx-auto">
+	<h2 class="sr-only">{title}</h2>
+	<dl class="space-y-10 sm:grid sm:grid-cols-2 sm:gap-8 sm:space-y-0 lg:grid-cols-3">
+		{#each data as col}
+			<div>
+				<a href={col.linkURL}>
+					<div class="space-y-4">
+						<div class="aspect-w-3 aspect-h-2">
+							<img class="object-cover shadow-lg rounded-lg" src={col.image} alt="" />
+						</div>
+						<div class="flex flex-row items-center space-x-4">
+							<Icon classes="h-12 w-auto" icon={col.icon} />
+							<div class="leading-6 font-medium">
+								<h3 class="text-2xl">{col.heading}</h3>
+								<p class="text-teci-blue-dark">{col.subheading}</p>
+							</div>
+						</div>
+						<div class="text-lg">
+							<p class="text-gray-500">{col.text}</p>
+						</div>
+					</div>
+				</a>
+			</div>
+		{/each}
+	</dl>
+</div>

package/components/ThreeColumn.svelte.d.ts

@@ -0,0 +1,41 @@
+/** @typedef {typeof __propDef.props}  ThreeColumnProps */
+/** @typedef {typeof __propDef.events}  ThreeColumnEvents */
+/** @typedef {typeof __propDef.slots}  ThreeColumnSlots */
+export default class ThreeColumn extends SvelteComponentTyped<{
+    data?: {
+        icon: string;
+        image: string;
+        heading: string;
+        subheading: string;
+        text: string;
+        linkText: string;
+        linkURL: string;
+    }[];
+    title?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ThreeColumnProps = typeof __propDef.props;
+export type ThreeColumnEvents = typeof __propDef.events;
+export type ThreeColumnSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        data?: {
+            icon: string;
+            image: string;
+            heading: string;
+            subheading: string;
+            text: string;
+            linkText: string;
+            linkURL: string;
+        }[];
+        title?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/TrialForm.svelte

@@ -1,5 +1,5 @@
 <script >import CountrySelector from './CountrySelector.svelte';
-import IconTE from '../Logos/TECi_icon_250.svelte';
+import Icon from './Icon.svelte';
 import { onMount } from 'svelte';
 import { scrollTo, validateEmail } from '../utils.js';
 import { variables } from '../variables';
@@ -59,164 +59,190 @@ const submitForm = async () => {
 };
 </script>
 
-<form id="trial-request" on:submit|preventDefault={submitForm}>
-	<div class=" border shadow overflow-hidden">
-		{#if message}
-			<div class="px-4 py-5 bg-white sm:p-6 prose">
+<div class="prose">
+	<h2>30-day Trial Request</h2>
+</div>
+<div class="mt-10 sm:mt-0">
+	<div class="md:grid md:grid-cols-3 md:gap-6 mt-8">
+		<div class="md:col-span-1">
+			<div class=" prose px-4 sm:px-0">
 				<p>
-					Thank you <strong>{message.name}</strong> for requesting a trial of {#if message.product == 1}PyroSim{:else if message.product == 2}Pathfinder{:else if message.product == 3}PyroSim
-						and Pathfinder{/if}!<br />
-					You will receive an email to <strong>{message.email}</strong> with your activation key{#if message.product == 3}s{/if}
-					in a few moments.
+					Please complete the form and click "Send Request". <b>All fields are required.</b>
 				</p>
-				{#if message.product == 1}
-					<h3>PyroSim</h3>
-					<p>
-						To download the most recent version visit the <a
-							href="https://support.thunderheadeng.com/pyrosim/">PyroSim Support</a
-						> page.
-					</p>
-				{:else if message.product == 2}
-					<h3>Pathfinder</h3>
-					<p>
-						To download the most recent version visit the <a
-							href="https://support.thunderheadeng.com/pathfinder/">Pathfinder Support</a
-						> page.
-					</p>
-				{:else if message.product == 3}
-					<h3>PyroSim</h3>
-					<p>
-						To download the most recent version visit the <a
-							href="https://support.thunderheadeng.com/pyrosim/">PyroSim Support</a
-						> page.
-					</p>
-					<h3>Pathfinder</h3>
-					<p>
-						To download the most recent version visit the <a
-							href="https://support.thunderheadeng.com/pathfinder/">Pathfinder Support</a
-						> page.
-					</p>
-				{/if}
-				<h3>Need Help?</h3>
+				<p>Within a few minutes, you will receive an email message containing a download link.</p>
 				<p>
-					Please email <a href="mailto:support@thunderheadeng.com">support@thunderheadeng.com</a> if
-					you have any questions.
+					If you need assistance, please send an email to <a href="mailto:sales@thunderheadeng.com">sales</a>.
 				</p>
 			</div>
-		{:else if error}
-			<p>There was an error: {error}</p>
-		{:else if waiting}
-			<div id="waiting" class="p-12 mx-auto">
-				<p class="text-center pb-8 font-bold">Waiting for Trial Approval...</p>
-				<IconTE classes="h-24 w-24 mx-auto animate-pulse" />
-			</div>
-		{:else}
-			<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
-				<fieldset>
-					<div>
-						<legend class="text-lg font-bold text-gray-900"> Personal Information </legend>
-					</div>
-					<div class="flex flex-row align-middle items-center pt-4">
-						<label for="name" class="whitespace-nowrap pr-2 block font-medium text-gray-700">
-							Full Name:
-						</label>
-						<input
-							id="name"
-							type="text"
-							name="name"
-							bind:value={name}
-							class="w-full p-1 border-0 border-b-2 border-gray-500"
-						/>
-					</div>
-					<div class="flex flex-row align-middle items-center pt-4">
-						<label for="email" class="pr-2 block font-medium text-gray-700"> Email: </label>
-						<input
-							id="email"
-							type="text"
-							name="email"
-							bind:value={email}
-							class="w-full p-1 border-0 border-b-2 border-gray-500"
-						/>
-					</div>
-					<div class="flex flex-row align-middle items-center pt-4">
-						<label for="country" class="pr-2 block font-medium text-gray-700"> Country: </label>
-						<input id="country" type="hidden" name="country" value={country} />
-						<CountrySelector bind:selection={country} bind:resellerModal />
-					</div>
-				</fieldset>
-				<fieldset>
-					<div>
-						<legend class="text-lg font-bold text-gray-900"> What would you like to try? </legend>
-					</div>
-					<div class="mt-4 space-y-4">
-						<div class="flex items-center">
-							<input
-								id="pyrosim"
-								name="product"
-								type="radio"
-								value={1}
-								bind:group={product}
-								class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
-							/>
-							<label for="pyrosim" class="ml-3 block text-sm font-medium text-gray-700">
-								PyroSim
-							</label>
+		</div>
+		<div class="mt-5 md:mt-0 md:col-span-2">
+			<form id="trial-request" on:submit|preventDefault={submitForm}>
+				<div class="border shadow overflow-hidden">
+					{#if message}
+						<div class="px-4 py-5 bg-white sm:p-6 prose">
+							<p>
+								Thank you <strong>{message.name}</strong> for requesting a trial of {#if message.product == 1}PyroSim{:else if message.product == 2}Pathfinder{:else if message.product == 3}PyroSim
+									and Pathfinder{/if}!<br />
+								You will receive an email to <strong>{message.email}</strong> with your activation
+								key{#if message.product == 3}s{/if}
+								in a few moments.
+							</p>
+							{#if message.product == 1}
+								<h3>PyroSim</h3>
+								<p>
+									To download the most recent version visit the <a
+										href="https://support.thunderheadeng.com/pyrosim/">PyroSim Support</a
+									> page.
+								</p>
+							{:else if message.product == 2}
+								<h3>Pathfinder</h3>
+								<p>
+									To download the most recent version visit the <a
+										href="https://support.thunderheadeng.com/pathfinder/">Pathfinder Support</a
+									> page.
+								</p>
+							{:else if message.product == 3}
+								<h3>PyroSim</h3>
+								<p>
+									To download the most recent version visit the <a
+										href="https://support.thunderheadeng.com/pyrosim/">PyroSim Support</a
+									> page.
+								</p>
+								<h3>Pathfinder</h3>
+								<p>
+									To download the most recent version visit the <a
+										href="https://support.thunderheadeng.com/pathfinder/">Pathfinder Support</a
+									> page.
+								</p>
+							{/if}
+							<h3>Need Help?</h3>
+							<p>
+								Please email <a href="mailto:support@thunderheadeng.com"
+									>support@thunderheadeng.com</a
+								> if you have any questions.
+							</p>
 						</div>
-						<div class="flex items-center">
-							<input
-								id="pathfinder"
-								name="product"
-								type="radio"
-								value={2}
-								bind:group={product}
-								class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
-							/>
-							<label for="pathfinder" class="ml-3 block text-sm font-medium text-gray-700">
-								Pathfinder
-							</label>
+					{:else if error}
+						<p>There was an error: {error}</p>
+					{:else if waiting}
+						<div id="waiting" class="p-12 mx-auto">
+							<p class="text-center pb-8 font-bold">Waiting for Trial Approval...</p>
+							<Icon classes="h-24 w-24 mx-auto animate-pulse" />
 						</div>
-						<div class="flex items-center">
+					{:else}
+						<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
+							<fieldset>
+								<div>
+									<legend class="text-lg font-bold text-gray-900"> Personal Information </legend>
+								</div>
+								<div class="flex flex-row align-middle items-center pt-4">
+									<label for="name" class="whitespace-nowrap pr-2 block font-medium text-gray-700">
+										Full Name:
+									</label>
+									<input
+										id="name"
+										type="text"
+										name="name"
+										bind:value={name}
+										class="w-full p-1 border-0 border-b-2 border-gray-500"
+									/>
+								</div>
+								<div class="flex flex-row align-middle items-center pt-4">
+									<label for="email" class="pr-2 block font-medium text-gray-700"> Email: </label>
+									<input
+										id="email"
+										type="text"
+										name="email"
+										bind:value={email}
+										class="w-full p-1 border-0 border-b-2 border-gray-500"
+									/>
+								</div>
+								<div class="flex flex-row align-middle items-center pt-4">
+									<label for="country" class="pr-2 block font-medium text-gray-700">
+										Country:
+									</label>
+									<input id="country" type="hidden" name="country" value={country} />
+									<CountrySelector bind:selection={country} bind:resellerModal />
+								</div>
+							</fieldset>
+							<fieldset>
+								<div>
+									<legend class="text-lg font-bold text-gray-900">
+										What would you like to try?
+									</legend>
+								</div>
+								<div class="mt-4 space-y-4">
+									<div class="flex items-center">
+										<input
+											id="pyrosim"
+											name="product"
+											type="radio"
+											value={1}
+											bind:group={product}
+											class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
+										/>
+										<label for="pyrosim" class="ml-3 block text-sm font-medium text-gray-700">
+											PyroSim
+										</label>
+									</div>
+									<div class="flex items-center">
+										<input
+											id="pathfinder"
+											name="product"
+											type="radio"
+											value={2}
+											bind:group={product}
+											class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
+										/>
+										<label for="pathfinder" class="ml-3 block text-sm font-medium text-gray-700">
+											Pathfinder
+										</label>
+									</div>
+									<div class="flex items-center">
+										<input
+											id="pyropath"
+											name="product"
+											type="radio"
+											value={3}
+											bind:group={product}
+											class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
+										/>
+										<label for="pyropath" class="ml-3 block text-sm font-medium text-gray-700">
+											PyroSim and Pathfinder
+										</label>
+									</div>
+								</div>
+							</fieldset>
 							<input
-								id="pyropath"
-								name="product"
-								type="radio"
-								value={3}
-								bind:group={product}
-								class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
+								class="confident"
+								id="answer"
+								type="text"
+								name="answer"
+								bind:value={answer}
+								placeholder="Correct answers only..."
 							/>
-							<label for="pyropath" class="ml-3 block text-sm font-medium text-gray-700">
-								PyroSim and Pathfinder
-							</label>
 						</div>
-					</div>
-				</fieldset>
-				<input
-					class="confident"
-					id="answer"
-					type="text"
-					name="answer"
-					bind:value={answer}
-					placeholder="Correct answers only..."
-				/>
-			</div>
-			<div class="px-4 py-3 text-right sm:px-6">
-				<button
-					type="submit"
-					disabled={!valid}
-					class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium text-white {valid ===
-					true
-						? 'bg-teci-blue-light hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
-						: 'bg-gray-300 cursor-not-allowed'}"
-				>
-					Send Request
-				</button>
-				{#if answer}
-					<p>Something is wrong with the form, please email support@thunderheadeng.com.</p>
-				{/if}
-			</div>
-		{/if}
+						<div class="px-4 py-3 text-right sm:px-6">
+							<button
+								type="submit"
+								disabled={!valid}
+								class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium text-white {valid ===
+								true
+									? 'bg-teci-blue-light hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
+									: 'bg-gray-300 cursor-not-allowed'}"
+							>
+								Send Request
+							</button>
+							{#if answer}
+								<p>Something is wrong with the form, please email support@thunderheadeng.com.</p>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			</form>
+		</div>
 	</div>
-</form>
+</div>
 
 <style >
 	.confident {

package/package.json

@@ -1,33 +1,34 @@
 {
   "name": "tecitheme",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "svelte": true,
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
+    "@sveltejs/adapter-netlify": "^1.0.0-next.44",
     "@sveltejs/kit": "next",
     "@tailwindcss/forms": "^0.4.0",
-    "@tailwindcss/typography": "^0.5.0",
+    "@tailwindcss/typography": "^0.5.1",
     "@types/cookie": "^0.4.1",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
     "autoprefixer": "^10.4.2",
-    "dotenv": "^14.3.0",
+    "dotenv": "^16.0.0",
     "encoding": "^0.1.13",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.4.0",
-    "mdsvex": "^0.9.8",
-    "postcss": "^8.4.5",
+    "mdsvex": "^0.10.5",
+    "postcss": "^8.4.6",
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.6.0",
     "stream": "^0.0.2",
-    "svelte": "^3.46.2",
-    "svelte-check": "^2.3.0",
+    "svelte": "^3.46.3",
+    "svelte-check": "^2.4.2",
     "svelte-cubed": "^0.2.1",
     "svelte-preprocess": "^4.10.2",
-    "svelte2tsx": "^0.4.14",
-    "tailwindcss": "^3.0.16",
-    "three": "^0.136.0",
+    "svelte2tsx": "^0.5.2",
+    "tailwindcss": "^3.0.18",
+    "three": "^0.137.5",
     "tslib": "^2.3.1",
     "typescript": "^4.5.5",
     "vite": "^2.7.13"
@@ -40,13 +41,15 @@
   },
   "exports": {
     "./package.json": "./package.json",
-    "./Logos/TECi_icon_250.svelte": "./Logos/TECi_icon_250.svelte",
-    "./Logos/TECi_logo.svelte": "./Logos/TECi_logo.svelte",
+    "./assets/TECi_logo.svelte": "./assets/TECi_logo.svelte",
     "./components/Banner.svelte": "./components/Banner.svelte",
     "./components/CountrySelector.svelte": "./components/CountrySelector.svelte",
     "./components/Footer.svelte": "./components/Footer.svelte",
     "./components/Header.svelte": "./components/Header.svelte",
+    "./components/Icon.svelte": "./components/Icon.svelte",
     "./components/Modal.svelte": "./components/Modal.svelte",
+    "./components/SectionHeaderCentered.svelte": "./components/SectionHeaderCentered.svelte",
+    "./components/ThreeColumn.svelte": "./components/ThreeColumn.svelte",
     "./components/TrialForm.svelte": "./components/TrialForm.svelte",
     "./demodata": "./demodata.js",
     "./req_utils": "./req_utils.js",

package/Logos/TECi_icon_250.svelte

@@ -1,21 +0,0 @@
-<script>
-    export let classes = ""
-</script>
-
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250" class={classes}>
-    <path
-        style="fill:#0c3879;fill-rule:evenodd;stroke:none"
-        d="M88.113 220.536h97.672v97.672H88.113z"
-        transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)">
-    </path>
-    <path
-        style="fill:#fff;fill-rule:evenodd;stroke:none"
-        d="M145.864 260.176h22.042c2.792 0 4.883.835 6.559 2.651 1.532 1.673 2.232 3.764 2.232 6.278 0 2.37-.7 4.464-2.232 6.277-1.676 1.675-3.767 2.651-6.559 2.651h-22.042v-17.857m0 23.159h22.042c2.792 0 4.883.838 6.559 2.65 1.532 1.674 2.232 3.768 2.232 6.278 0 2.373-.7 4.464-2.232 6.278-1.676 1.675-3.767 2.65-6.559 2.65h-22.042v-17.856"
-        transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)">
-    </path>
-    <path
-        style="fill:#fff;fill-rule:evenodd;stroke:none"
-        d="M132.471 301.192c-5.861 0-8.79-3.07-8.79-8.929l-.138-37.389-20.648-.14c-7.116-1.254-10.185-9.626-5.165-15.206 1.535-1.535 3.63-2.373 6.14-2.651h26.926l1.675.14h35.435c2.792 0 4.883.836 6.559 2.649 1.532 1.675 2.232 3.767 2.232 6.28 0 2.37-.7 4.464-2.232 6.277-1.676 1.673-3.767 2.651-6.559 2.651H141.26V301.192h-8.788"
-        transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)">
-    </path>
-</svg>

package/Logos/TECi_icon_250.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  TeCiIcon_250Props */
-/** @typedef {typeof __propDef.events}  TeCiIcon_250Events */
-/** @typedef {typeof __propDef.slots}  TeCiIcon_250Slots */
-export default class TeCiIcon_250 extends SvelteComponentTyped<{
-    classes?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TeCiIcon_250Props = typeof __propDef.props;
-export type TeCiIcon_250Events = typeof __propDef.events;
-export type TeCiIcon_250Slots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        classes?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};