tecitheme 0.0.3 → 0.0.7

package/components/ThreeColumn.svelte

@@ -0,0 +1,73 @@
+<script>
+	//Based on:
+	//https://tailwindui.com/components/marketing/sections/feature-sections#component-c683653471044e6ffc32739e199dfbf2
+	//https://tailwindui.com/components/marketing/sections/team-sections#component-0efa5ebc92e2aa72bc2332fcf5578869
+  //Allows icons from https://fonts.google.com/icons?selected=Material+Icons by name in the format 'icon-XXXX'.
+
+	import Icon from './Icon.svelte';
+
+	export let title = 'A better way to do things.';
+
+	export let data = [
+		{
+			icon: 'pyrosim',
+			image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/09/company_pyrosim.jpg',
+			heading: 'Product 1',
+			subheading: 'Nutshell',
+			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis quam ultrices, vestibulum lacus nec, interdum est. Ut.',
+			linkURL: '/product'
+		},
+		{
+			icon: '',
+			image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/08/company_pathfinder.png',
+			heading: 'Product 2',
+			subheading: 'No Icon',
+			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis quam ultrices, vestibulum lacus nec, interdum est. Ut.',
+			linkURL: '/product'
+		},
+		{
+			icon: 'icon-auto_stories',
+			image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/08/company_petrasim.png',
+			heading: 'Google Icon, No Subtitle or Text',
+			subheading: '',
+			text: '',
+			linkURL: '/product'
+		}
+	];
+</script>
+
+<!-- This example requires Tailwind CSS v2.0+ -->
+<div class="pb-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">
+            {#if col.image}
+						<div class="w-full aspect-square bg-slate-100">
+							<img class="w-full aspect-square object-cover shadow-md border border-gray-200" src={col.image} alt="" />
+						</div>
+            {/if}
+						<div class="flex flex-row items-start space-x-4">
+              {#if col.icon}
+              <Icon classes="h-12 w-auto" icon={col.icon} />
+              {/if}
+							<div class="leading-none font-medium flex flex-col">
+								<h3 class="text-2xl leading-none">{col.heading}</h3>
+                {#if col.subheading}
+								<p class="text-teci-blue-dark leading-6">{col.subheading}</p>
+                {/if}
+							</div>
+						</div>
+            {#if col.text}
+            <div class="text-lg">
+							<p class="text-gray-500">{col.text}</p>
+						</div>
+            {/if}
+					</div>
+				</a>
+			</div>
+		{/each}
+	</dl>
+</div>

package/components/ThreeColumn.svelte.d.ts

@@ -0,0 +1,39 @@
+/** @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;
+        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;
+            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 pb-12">
+	<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/components/YT.svelte

@@ -0,0 +1,14 @@
+<script>
+  export let v
+</script>
+
+<section class="w-full aspect-video border bg-black border-gray-200 shadow-md mb-12">
+  <iframe
+  src="https://www.youtube-nocookie.com/embed/{v}?rel=0&modestbranding=1"
+  title="YouTube Video ID {v}"
+  class="w-full aspect-video"
+  frameborder="0"
+  allow="accelerometer; clipboard-write; encrypted-media; gyroscope"
+  allowfullscreen
+/>
+</section>

package/components/YT.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  YtProps */
+/** @typedef {typeof __propDef.events}  YtEvents */
+/** @typedef {typeof __propDef.slots}  YtSlots */
+export default class Yt extends SvelteComponentTyped<{
+    v: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type YtProps = typeof __propDef.props;
+export type YtEvents = typeof __propDef.events;
+export type YtSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        v: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/layouts/blocks.svelte

@@ -0,0 +1,31 @@
+<script>
+    import SectionHeaderCentered from '../components/SectionHeaderCentered.svelte';
+    import ThreeColumn from '../components/ThreeColumn.svelte';
+    import NewsGrid from '../components/NewsGrid.svelte';
+    import YT from '../components/YT.svelte';
+    import CTA from '../components/CTA.svelte';
+
+    export let title
+    export let page_sections
+    export let posts
+</script>
+
+<svelte:head>
+  <title>{title} | Thunderhead Engineering</title>
+</svelte:head>
+
+{#each page_sections as section}
+  {#if section.block == "heading-centered"}
+    <SectionHeaderCentered bind:data={section} />
+  {:else if section.block == "three-column"}
+    <ThreeColumn bind:data={section.cards} />
+  {:else if section.block == "news-grid"}
+    <NewsGrid bind:data={section} bind:posts={posts} />
+  {:else if section.block == "video"}
+    <YT bind:v={section.v} />
+  {:else if section.block == "cta-center"}
+    <CTA bind:data={section} />
+  {:else if section.block == "content"}
+    <div class="content prose"><slot/></div>
+  {/if}
+{/each}

package/layouts/blocks.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  BlocksProps */
+/** @typedef {typeof __propDef.events}  BlocksEvents */
+/** @typedef {typeof __propDef.slots}  BlocksSlots */
+export default class Blocks extends SvelteComponentTyped<{
+    title: any;
+    page_sections: any;
+    posts: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type BlocksProps = typeof __propDef.props;
+export type BlocksEvents = typeof __propDef.events;
+export type BlocksSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: any;
+        page_sections: any;
+        posts: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/layouts/news.svelte

@@ -0,0 +1,14 @@
+<script>
+    export let title;
+    export let date;
+</script>
+
+<svelte:head>
+  <title>{title} | Thunderhead Engineering</title>
+</svelte:head>
+
+<div class="prose lg:prose-lg">
+  <h1>{title}</h1>
+  <p>Published on {date}</p>
+  <slot/>
+</div>

package/layouts/news.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  NewsProps */
+/** @typedef {typeof __propDef.events}  NewsEvents */
+/** @typedef {typeof __propDef.slots}  NewsSlots */
+export default class News extends SvelteComponentTyped<{
+    title: any;
+    date: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type NewsProps = typeof __propDef.props;
+export type NewsEvents = typeof __propDef.events;
+export type NewsSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: any;
+        date: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};