tecitheme 0.12.1 → 0.13.0

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.
Files changed (7) hide show
  1. package/dist/components/CTATwoColumn.svelte +55 -0
  2. package/dist/components/CTATwoColumn.svelte.d.ts +25 -0
  3. package/dist/components/FeatureAlternatingWithTestimonial.svelte +25 -11
  4. package/dist/index.d.ts +4 -1
  5. package/dist/index.js +10 -2
  6. package/dist/layouts/blocks.svelte +2 -0
  7. package/package.json +1 -1
package/dist/components/CTATwoColumn.svelte ADDED
@@ -0,0 +1,55 @@
1
+ <script>
2
+ import { getColorStyles } from "../utils";
3
+ import Button from "./Button.svelte";
4
+ import Icon from "./Icon.svelte";
5
+
6
+ export let data = {};
7
+
8
+ let {
9
+ heading,
10
+ text,
11
+ bullets,
12
+ color,
13
+ image,
14
+ button
15
+ } = data;
16
+
17
+ let imageUrl = image.url.startsWith("http") ? image.url : `https://files.thunderheadeng.com/www/images/${image.url}?w=600`;
18
+ </script>
19
+
20
+ <div class="{getColorStyles("background", color)} py-16">
21
+ <div class="relative isolate">
22
+ <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
23
+ <div class="mx-auto flex max-w-2xl flex-col gap-16 px-6 py-16 sm:p-8 lg:mx-0 lg:max-w-none lg:flex-row lg:items-center lg:py-20 xl:gap-x-20 xl:px-20">
24
+
25
+ <!-- Image -->
26
+ <img class="h-96 w-full flex-none object-cover shadow-xl lg:aspect-square lg:h-auto lg:max-w-sm" src="{imageUrl}" alt={image.alt}>
27
+
28
+ <div class="w-full flex-auto">
29
+
30
+ <!-- Heading -->
31
+ <h2 class="text-4xl font-semibold tracking-tight text-pretty sm:text-5xl">{heading}</h2>
32
+
33
+ <!-- Text -->
34
+ <p class="mt-6 text-lg/8 text-pretty ">{text}</p>
35
+
36
+ <!-- Bullet Items -->
37
+ <ul role="list" class="mt-10 grid grid-cols-1 gap-x-8 gap-y-3 text-base/7 sm:grid-cols-2">
38
+ {#each bullets as bullet}
39
+ <li class="flex gap-x-4">
40
+ <Icon icon="{bullet.icon ? bullet.icon : 'icon-task_alt'}" classes="text-xl"/>
41
+ {bullet.text}
42
+ </li>
43
+ {/each}
44
+ </ul>
45
+
46
+ <!-- Button -->
47
+ <div class="mt-10 flex">
48
+ <Button url={button.url} text="{button.text} &rarr;" color={button.color} justify={button.justify} fullwidth={button.fullWidth}/>
49
+ </div>
50
+ </div>
51
+
52
+ </div>
53
+ </div>
54
+ </div>
55
+ </div>
package/dist/components/CTATwoColumn.svelte.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ /** @typedef {typeof __propDef.props} CtaTwoColumnProps */
2
+ /** @typedef {typeof __propDef.events} CtaTwoColumnEvents */
3
+ /** @typedef {typeof __propDef.slots} CtaTwoColumnSlots */
4
+ export default class CtaTwoColumn extends SvelteComponent<{
5
+ data?: {};
6
+ }, {
7
+ [evt: string]: CustomEvent<any>;
8
+ }, {}> {
9
+ }
10
+ export type CtaTwoColumnProps = typeof __propDef.props;
11
+ export type CtaTwoColumnEvents = typeof __propDef.events;
12
+ export type CtaTwoColumnSlots = typeof __propDef.slots;
13
+ import { SvelteComponent } from "svelte";
14
+ declare const __propDef: {
15
+ props: {
16
+ data?: {};
17
+ };
18
+ events: {
19
+ [evt: string]: CustomEvent<any>;
20
+ };
21
+ slots: {};
22
+ exports?: {};
23
+ bindings?: string;
24
+ };
25
+ export {};
package/dist/components/FeatureAlternatingWithTestimonial.svelte CHANGED
@@ -27,7 +27,7 @@
27
27
  // Detect if the heading is visible, then trigger animations
28
28
  let scrollTargetVisible = writable(false);
29
29
  onMount(() => {
30
- let scrollTarget = document.getElementById(id + "image");
30
+ let scrollTarget = document.getElementById(id + "text");
31
31
 
32
32
  function updateVisibility() {
33
33
  var rect = scrollTarget.getBoundingClientRect();
@@ -53,15 +53,22 @@
53
53
  <div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
54
54
 
55
55
  <!-- Text -->
56
- <div class="mx-auto max-w-xl px-6 lg:mx-0 lg:max-w-none lg:px-0 lg:py-16 {textPosition == "left" ? "" : "lg-col-start-2"}">
56
+ <div id={id+"text"} class="mx-auto max-w-xl px-6 lg:mx-0 lg:max-w-none lg:px-0 lg:py-16 {textPosition == "left" ? "" : "lg-col-start-2"} relative">
57
+ {#if !$scrollTargetVisible}
58
+ <div
59
+ out:fade={{delay: 0, duration: 500, easing:cubicInOut}}
60
+ class="absolute top-0 bottom-0 w-full bg-gray-200 animate-pulse my-16"
61
+ >
62
+ </div>
63
+ {/if}
57
64
  <div>
58
65
 
59
66
  <!-- Icon -->
60
67
  {#if icon && $scrollTargetVisible}
61
68
  <div
62
69
  class="hidden sm:flex size-16 items-center justify-center sm:shrink-0 flex-shrink-0 {getColorStyles("background", color)} text-3xl"
63
- in:fade={{delay: 200, duration: 500, easing:cubicInOut}}
64
- out:fade={{delay: 200, duration: 500, easing:cubicInOut}}
70
+ in:fade={{delay: 200, duration: 750, easing:cubicInOut}}
71
+ out:fade={{delay: 200, duration: 750, easing:cubicInOut}}
65
72
  >
66
73
  <Icon icon={icon.name} classes={"m-8 " + (icon.classes != undefined ? icon.classes : "")}/>
67
74
  </div>
@@ -71,8 +78,8 @@
71
78
  {#if $scrollTargetVisible}
72
79
  <div
73
80
  class="mt-6"
74
- in:fade={{delay: 200, duration: 500, easing:cubicInOut}}
75
- out:fade={{delay: 200, duration: 500, easing:cubicInOut}}
81
+ in:fade={{delay: 200, duration: 750, easing:cubicInOut}}
82
+ out:fade={{delay: 200, duration: 750, easing:cubicInOut}}
76
83
  >
77
84
  <h2 class="text-3xl font-bold tracking-tight text-gray-900">{heading}</h2>
78
85
  <p class="mt-4 text-lg text-gray-500">{text}</p>
@@ -87,8 +94,8 @@
87
94
  {#if testimonial && $scrollTargetVisible}
88
95
  <div
89
96
  class="mt-8 border-t border-gray-200 pt-6"
90
- in:fly={{ delay: 300, duration: 1250, easing: cubicInOut, x: textPosition == "left" ? '-100%' : '100%' }}
91
- out:fly={{ delay: 300, duration: 1250, easing: cubicInOut, x: textPosition == "left" ? '-100%' : '100%' }}
97
+ in:fly={{ delay: 300, duration: 1750, easing: cubicInOut, x: textPosition == "left" ? '-100%' : '100%' }}
98
+ out:fly={{ delay: 300, duration: 1750, easing: cubicInOut, x: textPosition == "left" ? '-100%' : '100%' }}
92
99
  >
93
100
  <blockquote>
94
101
  <div>
@@ -112,13 +119,20 @@
112
119
 
113
120
 
114
121
  <!-- Image -->
115
- <div id={id + "image"} class="mt-12 sm:mt-16 lg:mt-0 {textPosition == "left" ? "" : "lg:col-start-1"}"
122
+ <div id={id + "image"} class="relative mt-12 sm:mt-16 lg:mt-0 {textPosition == "left" ? "" : "lg:col-start-1"}"
116
123
  >
124
+ {#if !$scrollTargetVisible}
125
+ <div
126
+ out:fly={{ delay: 0, duration: 500, easing: cubicInOut, x: textPosition == "left" ? '-100%' : '+100%' }}
127
+ class="absolute top-0 bottom-0 w-full bg-gray-200 animate-pulse my-16"
128
+ >
129
+ </div>
130
+ {/if}
117
131
  {#if $scrollTargetVisible}
118
132
  <div
119
133
  class="{textPosition == "left" ? "-mr-48 pl-6 md:-mr-16" : "-ml-48 pr-6 md:-ml-16"} lg:relative lg:m-0 lg:h-full lg:px-0"
120
- in:fly={{ delay: 200, duration: 750, easing: cubicInOut, x: textPosition == "left" ? '100%' : '-100%' }}
121
- out:fly={{ delay: 200, duration: 750, easing: cubicInOut, x: textPosition == "left" ? '100%' : '-100%' }}
134
+ in:fly={{ delay: 200, duration: 1250, easing: cubicInOut, x: textPosition == "left" ? '100%' : '-100%' }}
135
+ out:fly={{ delay: 200, duration: 1250, easing: cubicInOut, x: textPosition == "left" ? '100%' : '-100%' }}
122
136
  >
123
137
  <img class="w-full shadow-xl ring-1 ring-black/5 lg:absolute {textPosition == "left" ? "lg:left-0" : "right-0"} lg:h-full lg:w-auto lg:max-w-none" src="https://files.thunderheadeng.com/www/images/{image.url}?fmt=auto" alt={image.alt}>
124
138
  </div>
package/dist/index.d.ts CHANGED
@@ -2,7 +2,7 @@ export * from "./utils.js";
2
2
  export { default as getContent } from "./get-content.js";
3
3
  export { default as Accordion } from "./components/Accordion.svelte";
4
4
  export { default as Banner } from "./components/Banner.svelte";
5
- export { default as Blocks } from "./layouts/blocks.svelte";
5
+ export { default as BentoBox } from "./components/BentoBox.svelte";
6
6
  export { default as Button } from "./components/Button.svelte";
7
7
  export { default as Card } from "./components/Card.svelte";
8
8
  export { default as Carousel } from "./components/Carousel.svelte";
@@ -11,7 +11,9 @@ export { default as ContentTwoColumns } from "./components/ContentTwoColumns.sve
11
11
  export { default as CountrySelector } from "./components/CountrySelector.svelte";
12
12
  export { default as CTA } from "./components/CTA.svelte";
13
13
  export { default as CTASplitImage } from "./components/CTASplitImage.svelte";
14
+ export { default as CTATwoColumn } from "./components/CTATwoColumn.svelte";
14
15
  export { default as DescriptionList } from "./components/DescriptionList.svelte";
16
+ export { default as FeatureAlternatingWithTestimonial } from "./components/FeatureAlternatingWithTestimonial.svelte";
15
17
  export { default as FeatureGrid } from "./components/FeatureGrid.svelte";
16
18
  export { default as FeatureTable } from "./components/FeatureTable.svelte";
17
19
  export { default as Figure } from "./components/Figure.svelte";
@@ -35,3 +37,4 @@ export { default as ThreeColumn } from "./components/ThreeColumn.svelte";
35
37
  export { default as TrialForm } from "./components/TrialForm.svelte";
36
38
  export { default as Video } from "./components/Video.svelte";
37
39
  export { default as Wrap } from "./components/Wrap.svelte";
40
+ export { default as Blocks } from "./layouts/blocks.svelte";
package/dist/index.js CHANGED
@@ -1,8 +1,11 @@
1
+ // Utilities
1
2
  export * from './utils.js';
2
3
  export { default as getContent } from './get-content.js';
4
+
5
+ // Components
3
6
  export { default as Accordion } from './components/Accordion.svelte';
4
7
  export { default as Banner } from './components/Banner.svelte';
5
- export { default as Blocks } from './layouts/blocks.svelte';
8
+ export { default as BentoBox } from './components/BentoBox.svelte';
6
9
  export { default as Button } from './components/Button.svelte';
7
10
  export { default as Card } from './components/Card.svelte';
8
11
  export { default as Carousel } from './components/Carousel.svelte';
@@ -11,7 +14,9 @@ export { default as ContentTwoColumns } from './components/ContentTwoColumns.sve
11
14
  export { default as CountrySelector } from './components/CountrySelector.svelte';
12
15
  export { default as CTA } from './components/CTA.svelte';
13
16
  export { default as CTASplitImage } from './components/CTASplitImage.svelte';
17
+ export { default as CTATwoColumn } from './components/CTATwoColumn.svelte';
14
18
  export { default as DescriptionList } from './components/DescriptionList.svelte';
19
+ export { default as FeatureAlternatingWithTestimonial } from './components/FeatureAlternatingWithTestimonial.svelte';
15
20
  export { default as FeatureGrid } from './components/FeatureGrid.svelte';
16
21
  export { default as FeatureTable } from './components/FeatureTable.svelte';
17
22
  export { default as Figure } from './components/Figure.svelte';
@@ -34,4 +39,7 @@ export { default as Testimonial } from './components/Testimonial.svelte';
34
39
  export { default as ThreeColumn } from './components/ThreeColumn.svelte';
35
40
  export { default as TrialForm } from './components/TrialForm.svelte';
36
41
  export { default as Video } from './components/Video.svelte';
37
- export { default as Wrap } from './components/Wrap.svelte';
42
+ export { default as Wrap } from './components/Wrap.svelte';
43
+
44
+ // Layouts
45
+ export { default as Blocks } from './layouts/blocks.svelte';
package/dist/layouts/blocks.svelte CHANGED
@@ -2,6 +2,7 @@
2
2
  import Accordion from "../components/Accordion.svelte";
3
3
  import BentoBox from "../components/BentoBox.svelte";
4
4
  import CTA from "../components/CTA.svelte";
5
+ import CtaTwoColumn from "../components/CTATwoColumn.svelte";
5
6
  import HeadingCentered from "../components/HeadingCentered.svelte";
6
7
  import MediaFeature from "../components/MediaFeature.svelte";
7
8
  import Modal from "../components/Modal.svelte";
@@ -29,6 +30,7 @@
29
30
  { ref: "accordion", component: Accordion },
30
31
  { ref: "bento", component: BentoBox },
31
32
  { ref: "cta", component: CTA },
33
+ { ref: "cta-two-column", component: CtaTwoColumn },
32
34
  { ref: "heading-centered", component: HeadingCentered },
33
35
  { ref: "media-feature", component: MediaFeature },
34
36
  { ref: "modal", component: Modal },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tecitheme",
3
- "version": "0.12.1",
3
+ "version": "0.13.0",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "dev": "vite dev",