tecitheme 0.0.6 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Banner.svelte +2 -2
- package/components/CTA.svelte +30 -0
- package/components/CTA.svelte.d.ts +37 -0
- package/components/Header.svelte +19 -19
- package/components/Icon.svelte +7 -0
- package/components/Modal.svelte +2 -2
- package/components/NewsGrid.svelte +50 -58
- package/components/SectionHeaderCentered.svelte +20 -18
- package/components/ThreeColumn.svelte +32 -26
- package/components/ThreeColumn.svelte.d.ts +0 -2
- package/components/YT.svelte +7 -5
- package/layouts/blocks.svelte +10 -4
- package/package.json +2 -1
package/components/Banner.svelte
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
{#if showCTA}
|
|
28
28
|
<!-- CTA Button -->
|
|
29
29
|
<div class="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
|
|
30
|
-
<div class="
|
|
30
|
+
<div class="shadow-sm">
|
|
31
31
|
<a href={ctaLink}
|
|
32
32
|
class="flex items-center justify-center px-4 py-2 border shadow-md border-transparent text-sm leading-5 font-medium text-teci-blue-light bg-white hover:text-white hover:bg-teci-blue-dark focus:outline-none focus:shadow-outline transition ease-in-out duration-150"
|
|
33
33
|
aria-label="Button to {ctaText}"
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
<!-- Hide Banner Button -->
|
|
42
42
|
<div class="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
|
|
43
43
|
<button x-on:click="toggle" type="button"
|
|
44
|
-
class="-mr-1 flex p-2
|
|
44
|
+
class="-mr-1 flex p-2 hover:bg-teci-blue-dark focus:outline-none focus:bg-teci-blue-dark sm:-mr-2 transition ease-in-out duration-150"
|
|
45
45
|
aria-label="Dismiss"
|
|
46
46
|
title="Dismiss Banner"
|
|
47
47
|
>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let data = {
|
|
3
|
+
title: 'Ready to dive in?',
|
|
4
|
+
subtitle: 'Start your free trial today.',
|
|
5
|
+
links: [
|
|
6
|
+
{
|
|
7
|
+
linkText: 'Get Started',
|
|
8
|
+
linkURL: '/product'
|
|
9
|
+
}
|
|
10
|
+
]
|
|
11
|
+
}
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
15
|
+
<section class="bg-white mb-12">
|
|
16
|
+
<div class="mx-auto text-center px-4 sm:px-6 lg:px-8">
|
|
17
|
+
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
|
18
|
+
<span class="block">{data.title}</span>
|
|
19
|
+
</h2>
|
|
20
|
+
<div class="mt-8 flex justify-center">
|
|
21
|
+
{#each data.links as link}
|
|
22
|
+
<div class="inline-flex shadow">
|
|
23
|
+
<a href={link.linkURL} class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium text-white bg-teci-blue-light hover:bg-teci-blue-dark">{link.linkText}</a>
|
|
24
|
+
</div>
|
|
25
|
+
{:else}
|
|
26
|
+
<br>
|
|
27
|
+
{/each}
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</section>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} CtaProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} CtaEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} CtaSlots */
|
|
4
|
+
export default class Cta extends SvelteComponentTyped<{
|
|
5
|
+
data?: {
|
|
6
|
+
title: string;
|
|
7
|
+
subtitle: string;
|
|
8
|
+
links: {
|
|
9
|
+
linkText: string;
|
|
10
|
+
linkURL: string;
|
|
11
|
+
}[];
|
|
12
|
+
};
|
|
13
|
+
}, {
|
|
14
|
+
[evt: string]: CustomEvent<any>;
|
|
15
|
+
}, {}> {
|
|
16
|
+
}
|
|
17
|
+
export type CtaProps = typeof __propDef.props;
|
|
18
|
+
export type CtaEvents = typeof __propDef.events;
|
|
19
|
+
export type CtaSlots = typeof __propDef.slots;
|
|
20
|
+
import { SvelteComponentTyped } from "svelte";
|
|
21
|
+
declare const __propDef: {
|
|
22
|
+
props: {
|
|
23
|
+
data?: {
|
|
24
|
+
title: string;
|
|
25
|
+
subtitle: string;
|
|
26
|
+
links: {
|
|
27
|
+
linkText: string;
|
|
28
|
+
linkURL: string;
|
|
29
|
+
}[];
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
events: {
|
|
33
|
+
[evt: string]: CustomEvent<any>;
|
|
34
|
+
};
|
|
35
|
+
slots: {};
|
|
36
|
+
};
|
|
37
|
+
export {};
|
package/components/Header.svelte
CHANGED
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
x-transition:leave-end="opacity-0 -translate-y-1"
|
|
47
47
|
class="absolute z-10 top-full inset-x-0 transform shadow-lg bg-white" style="display: none;">
|
|
48
48
|
<div
|
|
49
|
-
class="max-w-7xl mx-auto grid gap-y-
|
|
50
|
-
<a href="https://www.thunderheadeng.com/pyrosim/" class="-m-3 p-3 flex flex-col justify-between
|
|
49
|
+
class="max-w-7xl mx-auto grid gap-y-8 px-4 py-8 sm:grid-cols-2 sm:gap-8 sm:px-6 lg:grid-cols-3 lg:px-8">
|
|
50
|
+
<a href="https://www.thunderheadeng.com/pyrosim/" class="-m-3 p-3 flex flex-col justify-between hover:bg-gray-50">
|
|
51
51
|
<div class="flex md:h-full lg:flex-col">
|
|
52
52
|
<div class="flex-shrink-0">
|
|
53
53
|
<Icon classes="h-12 w-auto" icon="pyrosim" />
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
</div>
|
|
69
69
|
</a>
|
|
70
70
|
|
|
71
|
-
<a href="https://www.thunderheadeng.com/pathfinder/" class="-m-3 p-3 flex flex-col justify-between
|
|
71
|
+
<a href="https://www.thunderheadeng.com/pathfinder/" class="-m-3 p-3 flex flex-col justify-between hover:bg-gray-50">
|
|
72
72
|
<div class="flex md:h-full lg:flex-col">
|
|
73
73
|
<div class="flex-shrink-0">
|
|
74
74
|
<Icon classes="h-12 w-auto" icon="pathfinder" />
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
</div>
|
|
90
90
|
</a>
|
|
91
91
|
|
|
92
|
-
<a href="https://www.thunderheadeng.com/petrasim/" class="-m-3 p-3 flex flex-col justify-between
|
|
92
|
+
<a href="https://www.thunderheadeng.com/petrasim/" class="-m-3 p-3 flex flex-col justify-between hover:bg-gray-50">
|
|
93
93
|
<div class="flex md:h-full lg:flex-col">
|
|
94
94
|
<div class="flex-shrink-0">
|
|
95
95
|
<Icon classes="h-12 w-auto" icon='petrasim' />
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
</div>
|
|
111
111
|
</a>
|
|
112
112
|
<!--
|
|
113
|
-
<a href="#" class="-m-3 p-3 flex flex-col justify-between
|
|
113
|
+
<a href="#" class="-m-3 p-3 flex flex-col justify-between hover:bg-gray-50">
|
|
114
114
|
<div class="flex md:h-full lg:flex-col">
|
|
115
115
|
<div class="flex-shrink-0">
|
|
116
116
|
<span
|
|
@@ -220,10 +220,10 @@
|
|
|
220
220
|
x-transition:leave-end="opacity-0 -translate-y-1"
|
|
221
221
|
class="absolute z-40 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0"
|
|
222
222
|
style="display: none;">
|
|
223
|
-
<div class="
|
|
223
|
+
<div class="shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
|
|
224
224
|
<div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
|
|
225
225
|
<a href="https://support.thunderheadeng.com/docs/"
|
|
226
|
-
class="-m-3 p-3 flex items-start
|
|
226
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
227
227
|
<!-- Heroicon name: outline/book-open -->
|
|
228
228
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-teci-blue-light" fill="none"
|
|
229
229
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -241,7 +241,7 @@
|
|
|
241
241
|
</a>
|
|
242
242
|
|
|
243
243
|
<a href="https://support.thunderheadeng.com/tutorials/"
|
|
244
|
-
class="-m-3 p-3 flex items-start
|
|
244
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
245
245
|
<!-- Heroicon name: outline/library -->
|
|
246
246
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-teci-blue-light"
|
|
247
247
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -259,7 +259,7 @@
|
|
|
259
259
|
</a>
|
|
260
260
|
|
|
261
261
|
<a href="https://support.thunderheadeng.com/release-notes/"
|
|
262
|
-
class="-m-3 p-3 flex items-start
|
|
262
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
263
263
|
<!-- Heroicon name: outline/document-text -->
|
|
264
264
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-teci-blue-light"
|
|
265
265
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -277,7 +277,7 @@
|
|
|
277
277
|
</a>
|
|
278
278
|
|
|
279
279
|
<a href="https://support.thunderheadeng.com/answers/"
|
|
280
|
-
class="-m-3 p-3 flex items-start
|
|
280
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
281
281
|
<!-- Heroicon name: outline/cursor-click -->
|
|
282
282
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-teci-blue-light"
|
|
283
283
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -353,10 +353,10 @@
|
|
|
353
353
|
x-transition:leave-end="opacity-0 -translate-y-1"
|
|
354
354
|
class="absolute z-40 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0"
|
|
355
355
|
style="display: none;">
|
|
356
|
-
<div class="
|
|
356
|
+
<div class="shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
|
|
357
357
|
<div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
|
|
358
358
|
<a href="https://www.thunderheadeng.com/training/"
|
|
359
|
-
class="-m-3 p-3 flex items-start
|
|
359
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
360
360
|
<!-- Heroicon name: outline/calendar -->
|
|
361
361
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-teci-blue-light" fill="none"
|
|
362
362
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -374,7 +374,7 @@
|
|
|
374
374
|
</a>
|
|
375
375
|
|
|
376
376
|
<a href="https://www.femtc.com/"
|
|
377
|
-
class="-m-3 p-3 flex items-start
|
|
377
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
378
378
|
<!-- Heroicon name: outline/presentation-chart-line -->
|
|
379
379
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-teci-blue-light"
|
|
380
380
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -392,7 +392,7 @@
|
|
|
392
392
|
</a>
|
|
393
393
|
|
|
394
394
|
<a href="https://www.thunderheadeng.com/training/"
|
|
395
|
-
class="-m-3 p-3 flex items-start
|
|
395
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
396
396
|
<!-- Heroicon name: outline/cursor-click -->
|
|
397
397
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-teci-blue-light"
|
|
398
398
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -478,10 +478,10 @@
|
|
|
478
478
|
x-transition:leave-end="opacity-0 -translate-y-1"
|
|
479
479
|
class="absolute z-40 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0"
|
|
480
480
|
style="display: none;">
|
|
481
|
-
<div class="
|
|
481
|
+
<div class="shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
|
|
482
482
|
<div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
|
|
483
483
|
<a href="https://www.thunderheadeng.com/about/"
|
|
484
|
-
class="-m-3 p-3 flex items-start
|
|
484
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
485
485
|
<!-- Heroicon name: outline/information-circle -->
|
|
486
486
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-teci-blue-light" fill="none"
|
|
487
487
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -499,7 +499,7 @@
|
|
|
499
499
|
</a>
|
|
500
500
|
|
|
501
501
|
<a href="https://www.thunderheadeng.com/news/"
|
|
502
|
-
class="-m-3 p-3 flex items-start
|
|
502
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
503
503
|
<!-- Heroicon name: outline/speakerphone -->
|
|
504
504
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-teci-blue-light"
|
|
505
505
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -517,7 +517,7 @@
|
|
|
517
517
|
</a>
|
|
518
518
|
|
|
519
519
|
<a href="https://www.thunderheadeng.com/job-openings/"
|
|
520
|
-
class="-m-3 p-3 flex items-start
|
|
520
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
521
521
|
<!-- Heroicon name: outline/briefcase -->
|
|
522
522
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-teci-blue-light"
|
|
523
523
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -535,7 +535,7 @@
|
|
|
535
535
|
</a>
|
|
536
536
|
|
|
537
537
|
<a href="https://www.thunderheadeng.com/pyrosim/pyrosim-licensing/#distributors"
|
|
538
|
-
class="-m-3 p-3 flex items-start
|
|
538
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
539
539
|
<!-- Heroicon name: outline/globe-alt -->
|
|
540
540
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-teci-blue-light"
|
|
541
541
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
package/components/Icon.svelte
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
<script>
|
|
2
|
+
// Allows icons from https://fonts.google.com/icons?selected=Material+Icons by name in the format 'icon-XXXX'.
|
|
2
3
|
export let icon;
|
|
3
4
|
export let classes;
|
|
4
5
|
</script>
|
|
5
6
|
|
|
7
|
+
<div>
|
|
6
8
|
{#if icon == 'pyrosim'}
|
|
7
9
|
<img
|
|
8
10
|
class={classes}
|
|
@@ -24,6 +26,10 @@
|
|
|
24
26
|
alt="PetraSim"
|
|
25
27
|
title="PetraSim Icon"
|
|
26
28
|
/>
|
|
29
|
+
{:else if icon?.startsWith("icon-")}
|
|
30
|
+
<div class="{classes} w-12 bg-teci-blue-dark flex flex-col justify-center items-center">
|
|
31
|
+
<span class="material-icons block text-4xl text-white">{icon?.slice(5)}</span>
|
|
32
|
+
</div>
|
|
27
33
|
{:else}
|
|
28
34
|
<svg class={classes} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
|
|
29
35
|
<path
|
|
@@ -43,3 +49,4 @@
|
|
|
43
49
|
/>
|
|
44
50
|
</svg>
|
|
45
51
|
{/if}
|
|
52
|
+
</div>
|
package/components/Modal.svelte
CHANGED
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
|
|
18
18
|
{#if shown}
|
|
19
19
|
<div class="fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full">
|
|
20
|
-
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg
|
|
21
|
-
<button type="button" on:click={hide} class="absolute top-0 right-0 bg-white
|
|
20
|
+
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg bg-white">
|
|
21
|
+
<button type="button" on:click={hide} class="absolute top-0 right-0 bg-white p-1 mr-2 mt-2 inline-flex items-center justify-center text-teci-blue-light hover:text-white hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teci-blue-dark">
|
|
22
22
|
<span class="sr-only">Close menu</span>
|
|
23
23
|
<!-- Heroicon name: outline/x -->
|
|
24
24
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
@@ -3,65 +3,57 @@
|
|
|
3
3
|
export let posts;
|
|
4
4
|
</script>
|
|
5
5
|
|
|
6
|
-
<div class="relative
|
|
6
|
+
<div class="relative mx-auto w-full divide-y-2 divide-gray-200 pb-12">
|
|
7
7
|
<div>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
>
|
|
14
|
-
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<button
|
|
34
|
-
type="button"
|
|
35
|
-
class="w-full bg-indigo-600 px-4 py-2 border border-transparent rounded-md flex items-center justify-center text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:w-auto sm:inline-flex"
|
|
36
|
-
>Notify me</button
|
|
37
|
-
>
|
|
38
|
-
</div>
|
|
39
|
-
</form>
|
|
40
|
-
</div>
|
|
8
|
+
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
|
9
|
+
{data.title}
|
|
10
|
+
</h2>
|
|
11
|
+
<div class="mt-3 sm:mt-4 lg:grid lg:grid-cols-2 lg:items-center lg:gap-5">
|
|
12
|
+
<p class="text-xl text-gray-500">{data.subtitle}</p>
|
|
13
|
+
<form class="mt-6 flex flex-col sm:flex-row lg:mt-0 lg:justify-end">
|
|
14
|
+
<div>
|
|
15
|
+
<label for="email-address" class="sr-only">Email address</label>
|
|
16
|
+
<input
|
|
17
|
+
id="email-address"
|
|
18
|
+
name="email-address"
|
|
19
|
+
type="email"
|
|
20
|
+
autocomplete="email"
|
|
21
|
+
required
|
|
22
|
+
class="w-full appearance-none border-b-2 border-b-gray-800 bg-white px-4 py-2 text-base text-gray-900 placeholder-gray-500 focus:border-teci-blue-light focus:outline-none focus:ring-teci-blue-light lg:max-w-xs"
|
|
23
|
+
placeholder="Enter your email"
|
|
24
|
+
/>
|
|
25
|
+
</div>
|
|
26
|
+
<div
|
|
27
|
+
class="mt-2 flex w-full flex-shrink-0 shadow-sm sm:mt-0 sm:ml-3 sm:inline-flex sm:w-auto"
|
|
28
|
+
>
|
|
29
|
+
<button type="button" class="btn">Subscribe</button>
|
|
30
|
+
</div>
|
|
31
|
+
</form>
|
|
32
|
+
</div>
|
|
41
33
|
</div>
|
|
42
|
-
<div class="mt-6
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
34
|
+
<div class="mt-6 grid gap-16 pt-10 lg:grid-cols-2 lg:gap-x-5 lg:gap-y-12">
|
|
35
|
+
{#each posts as post}
|
|
36
|
+
<div>
|
|
37
|
+
<p class="text-sm text-gray-500">
|
|
38
|
+
<time datetime={post.meta.date}>{post.meta.date}</time>
|
|
39
|
+
</p>
|
|
40
|
+
<a href={post.path} class="mt-2 block">
|
|
41
|
+
<p class="text-xl font-semibold text-gray-900">
|
|
42
|
+
{post.meta.title}
|
|
43
|
+
</p>
|
|
44
|
+
<p class="mt-3 text-base text-gray-500">
|
|
45
|
+
{post.meta.summary}
|
|
46
|
+
</p>
|
|
47
|
+
</a>
|
|
48
|
+
<div class="mt-3">
|
|
49
|
+
<a
|
|
50
|
+
href={post.path}
|
|
51
|
+
class="text-base font-semibold text-teci-blue-light hover:text-teci-blue-dark"
|
|
52
|
+
>
|
|
53
|
+
Read full story
|
|
54
|
+
</a>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
{/each}
|
|
66
58
|
</div>
|
|
67
59
|
</div>
|
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
//Based on: https://tailwindui.com/components/marketing/sections/header#component-2c3b25e7b9e4490edd7b6950692c0a11
|
|
3
|
+
|
|
4
|
+
export let data = {
|
|
5
|
+
toptext: 'Small Top Text ',
|
|
6
|
+
title: 'Big Title Text',
|
|
7
|
+
subtitle: 'Subtitle Text - Fairly long to see where the text wraps for this element, because who knows where things will end up.'
|
|
8
|
+
};
|
|
9
9
|
</script>
|
|
10
10
|
|
|
11
11
|
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
12
12
|
<div class="text-center pb-12">
|
|
13
|
-
{#if data.toptext}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
{/if}
|
|
18
|
-
<p class="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
|
|
19
|
-
|
|
20
|
-
</p>
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
13
|
+
{#if data.toptext}
|
|
14
|
+
<h2 class="text-base font-semibold text-teci-blue-dark tracking-wide uppercase">
|
|
15
|
+
{data.toptext}
|
|
16
|
+
</h2>
|
|
17
|
+
{/if}
|
|
18
|
+
<p class="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
|
|
19
|
+
{data.title}
|
|
20
|
+
</p>
|
|
21
|
+
{#if data.subtitle}
|
|
22
|
+
<p class="max-w-4xl mt-5 mx-auto text-xl text-gray-500">
|
|
23
|
+
{data.subtitle}
|
|
24
|
+
</p>
|
|
25
|
+
{/if}
|
|
24
26
|
</div>
|
|
@@ -2,38 +2,36 @@
|
|
|
2
2
|
//Based on:
|
|
3
3
|
//https://tailwindui.com/components/marketing/sections/feature-sections#component-c683653471044e6ffc32739e199dfbf2
|
|
4
4
|
//https://tailwindui.com/components/marketing/sections/team-sections#component-0efa5ebc92e2aa72bc2332fcf5578869
|
|
5
|
+
//Allows icons from https://fonts.google.com/icons?selected=Material+Icons by name in the format 'icon-XXXX'.
|
|
5
6
|
|
|
6
7
|
import Icon from './Icon.svelte';
|
|
7
8
|
|
|
8
|
-
export let title = 'A better way to
|
|
9
|
+
export let title = 'A better way to do things.';
|
|
9
10
|
|
|
10
11
|
export let data = [
|
|
11
12
|
{
|
|
12
13
|
icon: 'pyrosim',
|
|
13
14
|
image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/09/company_pyrosim.jpg',
|
|
14
|
-
heading: '
|
|
15
|
-
subheading: '
|
|
16
|
-
text: '
|
|
17
|
-
|
|
18
|
-
linkURL: '/pyrosim'
|
|
15
|
+
heading: 'Product 1',
|
|
16
|
+
subheading: 'Nutshell',
|
|
17
|
+
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis quam ultrices, vestibulum lacus nec, interdum est. Ut.',
|
|
18
|
+
linkURL: '/product'
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
|
-
icon: '
|
|
21
|
+
icon: '',
|
|
22
22
|
image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/08/company_pathfinder.png',
|
|
23
|
-
heading: '
|
|
24
|
-
subheading: '
|
|
25
|
-
text: '
|
|
26
|
-
|
|
27
|
-
linkURL: '/pathfinder'
|
|
23
|
+
heading: 'Product 2',
|
|
24
|
+
subheading: 'No Icon',
|
|
25
|
+
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis quam ultrices, vestibulum lacus nec, interdum est. Ut.',
|
|
26
|
+
linkURL: '/product'
|
|
28
27
|
},
|
|
29
28
|
{
|
|
30
|
-
icon: '
|
|
29
|
+
icon: 'icon-auto_stories',
|
|
31
30
|
image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/08/company_petrasim.png',
|
|
32
|
-
heading: '
|
|
33
|
-
subheading: '
|
|
34
|
-
text: '
|
|
35
|
-
|
|
36
|
-
linkURL: '/petrasim'
|
|
31
|
+
heading: 'Google Icon, No Subtitle or Text',
|
|
32
|
+
subheading: '',
|
|
33
|
+
text: '',
|
|
34
|
+
linkURL: '/product'
|
|
37
35
|
}
|
|
38
36
|
];
|
|
39
37
|
</script>
|
|
@@ -46,19 +44,27 @@
|
|
|
46
44
|
<div>
|
|
47
45
|
<a href={col.linkURL}>
|
|
48
46
|
<div class="space-y-4">
|
|
49
|
-
|
|
50
|
-
|
|
47
|
+
{#if col.image}
|
|
48
|
+
<div class="w-full aspect-square bg-slate-100">
|
|
49
|
+
<img class="w-full aspect-square object-cover shadow-md border border-gray-200" src={col.image} alt="" />
|
|
51
50
|
</div>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
51
|
+
{/if}
|
|
52
|
+
<div class="flex flex-row items-start space-x-4">
|
|
53
|
+
{#if col.icon}
|
|
54
|
+
<Icon classes="h-12 w-auto" icon={col.icon} />
|
|
55
|
+
{/if}
|
|
56
|
+
<div class="leading-none font-medium flex flex-col">
|
|
57
|
+
<h3 class="text-2xl leading-none">{col.heading}</h3>
|
|
58
|
+
{#if col.subheading}
|
|
59
|
+
<p class="text-teci-blue-dark leading-6">{col.subheading}</p>
|
|
60
|
+
{/if}
|
|
57
61
|
</div>
|
|
58
62
|
</div>
|
|
59
|
-
|
|
63
|
+
{#if col.text}
|
|
64
|
+
<div class="text-lg">
|
|
60
65
|
<p class="text-gray-500">{col.text}</p>
|
|
61
66
|
</div>
|
|
67
|
+
{/if}
|
|
62
68
|
</div>
|
|
63
69
|
</a>
|
|
64
70
|
</div>
|
|
@@ -8,7 +8,6 @@ export default class ThreeColumn extends SvelteComponentTyped<{
|
|
|
8
8
|
heading: string;
|
|
9
9
|
subheading: string;
|
|
10
10
|
text: string;
|
|
11
|
-
linkText: string;
|
|
12
11
|
linkURL: string;
|
|
13
12
|
}[];
|
|
14
13
|
title?: string;
|
|
@@ -28,7 +27,6 @@ declare const __propDef: {
|
|
|
28
27
|
heading: string;
|
|
29
28
|
subheading: string;
|
|
30
29
|
text: string;
|
|
31
|
-
linkText: string;
|
|
32
30
|
linkURL: string;
|
|
33
31
|
}[];
|
|
34
32
|
title?: string;
|
package/components/YT.svelte
CHANGED
|
@@ -2,11 +2,13 @@
|
|
|
2
2
|
export let v
|
|
3
3
|
</script>
|
|
4
4
|
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
src="https://www.youtube-nocookie.com/embed/{v}"
|
|
8
|
-
title="YouTube
|
|
5
|
+
<section class="w-full aspect-video border bg-black border-gray-200 shadow-md mb-12">
|
|
6
|
+
<iframe
|
|
7
|
+
src="https://www.youtube-nocookie.com/embed/{v}?rel=0&modestbranding=1"
|
|
8
|
+
title="YouTube Video ID {v}"
|
|
9
|
+
class="w-full aspect-video"
|
|
9
10
|
frameborder="0"
|
|
10
|
-
allow="accelerometer;
|
|
11
|
+
allow="accelerometer; clipboard-write; encrypted-media; gyroscope"
|
|
11
12
|
allowfullscreen
|
|
12
13
|
/>
|
|
14
|
+
</section>
|
package/layouts/blocks.svelte
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import SectionHeaderCentered from '
|
|
3
|
-
import ThreeColumn from '
|
|
4
|
-
import NewsGrid from '
|
|
2
|
+
import SectionHeaderCentered from '../components/SectionHeaderCentered.svelte';
|
|
3
|
+
import ThreeColumn from '../components/ThreeColumn.svelte';
|
|
4
|
+
import NewsGrid from '../components/NewsGrid.svelte';
|
|
5
|
+
import YT from '../components/YT.svelte';
|
|
6
|
+
import CTA from '../components/CTA.svelte';
|
|
5
7
|
|
|
6
8
|
export let title
|
|
7
9
|
export let page_sections
|
|
@@ -9,7 +11,7 @@
|
|
|
9
11
|
</script>
|
|
10
12
|
|
|
11
13
|
<svelte:head>
|
|
12
|
-
<title>{title}</title>
|
|
14
|
+
<title>{title} | Thunderhead Engineering</title>
|
|
13
15
|
</svelte:head>
|
|
14
16
|
|
|
15
17
|
{#each page_sections as section}
|
|
@@ -19,6 +21,10 @@
|
|
|
19
21
|
<ThreeColumn bind:data={section.cards} />
|
|
20
22
|
{:else if section.block == "news-grid"}
|
|
21
23
|
<NewsGrid bind:data={section} bind:posts={posts} />
|
|
24
|
+
{:else if section.block == "video"}
|
|
25
|
+
<YT bind:v={section.v} />
|
|
26
|
+
{:else if section.block == "cta-center"}
|
|
27
|
+
<CTA bind:data={section} />
|
|
22
28
|
{:else if section.block == "content"}
|
|
23
29
|
<div class="content prose"><slot/></div>
|
|
24
30
|
{/if}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tecitheme",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"svelte": true,
|
|
5
5
|
"devDependencies": {
|
|
6
6
|
"@sveltejs/adapter-auto": "next",
|
|
@@ -44,6 +44,7 @@
|
|
|
44
44
|
"./package.json": "./package.json",
|
|
45
45
|
"./assets/TECi_logo.svelte": "./assets/TECi_logo.svelte",
|
|
46
46
|
"./components/Banner.svelte": "./components/Banner.svelte",
|
|
47
|
+
"./components/CTA.svelte": "./components/CTA.svelte",
|
|
47
48
|
"./components/CountrySelector.svelte": "./components/CountrySelector.svelte",
|
|
48
49
|
"./components/Figure.svelte": "./components/Figure.svelte",
|
|
49
50
|
"./components/Footer.svelte": "./components/Footer.svelte",
|