@xenterprises/nuxt-x-marketing 0.0.21 → 0.0.23
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/.playground/app.config.ts +3 -0
- package/app/components/X/Footer/XLegal/index.vue +43 -44
- package/app/components/X/Footer/index.vue +90 -91
- package/app/components/X/Header/Nav/index.vue +47 -42
- package/app/components/X/Marketing/Sections/EmailSubscription/index.vue +108 -108
- package/package.json +1 -1
|
@@ -1,47 +1,46 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
2
|
+
<footer
|
|
3
|
+
class="bg-gray-900 text-gray-400 text-xs relative overflow-visible pt-2"
|
|
4
|
+
>
|
|
5
|
+
<a href="https://x.enterprises" target="_blank">
|
|
6
|
+
<img
|
|
7
|
+
src="https://cdn.x.enterprises/logo-x.png"
|
|
8
|
+
alt="X Enterprises"
|
|
9
|
+
class="h-6 w-6 mx-auto -mt-4 relative z-10"
|
|
10
|
+
/>
|
|
11
|
+
</a>
|
|
12
|
+
<main
|
|
13
|
+
class="flex flex-row justify-between items-center px-6 pt-3 pb-5 max-w-screen-2xl mx-auto"
|
|
14
|
+
>
|
|
15
|
+
<div class="pb-4 md:pb-0 text-center md:text-left">
|
|
16
|
+
Copyright ©2016-{{ new Date().getFullYear() }} X Enterprises, LLC.
|
|
17
|
+
All Rights Reserved.
|
|
18
|
+
</div>
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
20
|
+
<div class="text-center md:text-right flex gap-4">
|
|
21
|
+
<a
|
|
22
|
+
href="https://x.enterprises/legal/terms"
|
|
23
|
+
class="hover:underline"
|
|
24
|
+
target="_blank"
|
|
25
|
+
>
|
|
26
|
+
Terms of Service
|
|
27
|
+
</a>
|
|
28
|
+
<a
|
|
29
|
+
href="https://x.enterprises/legal/privacy-policy"
|
|
30
|
+
class="ml-4 hover:underline"
|
|
31
|
+
target="_blank"
|
|
32
|
+
>
|
|
33
|
+
Privacy Policy
|
|
34
|
+
</a>
|
|
35
|
+
<a
|
|
36
|
+
href="https://x.enterprises/legal/cookie-policy"
|
|
37
|
+
class="ml-4 hover:underline"
|
|
38
|
+
target="_blank"
|
|
39
|
+
>
|
|
40
|
+
Cookie Policy
|
|
41
|
+
</a>
|
|
42
|
+
</div>
|
|
43
|
+
</main>
|
|
44
|
+
</footer>
|
|
45
45
|
</template>
|
|
46
|
-
<script setup>
|
|
47
|
-
</script>
|
|
46
|
+
<script setup></script>
|
|
@@ -1,96 +1,95 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
</div>
|
|
2
|
+
<div>
|
|
3
|
+
<XMarketingSectionsEmailSubscription
|
|
4
|
+
:organizationId="
|
|
5
|
+
appConfig?.xMarketing?.config?.emailMarketingNewsletters?.organizationId
|
|
6
|
+
"
|
|
7
|
+
v-if="
|
|
8
|
+
appConfig?.xMarketing?.config?.emailMarketingNewsletters?.organizationId
|
|
9
|
+
"
|
|
10
|
+
/>
|
|
11
|
+
<section
|
|
12
|
+
class="relative pt-24 overflow-hidden"
|
|
13
|
+
:class="footer?.bg?.color ? footer?.bg?.color : 'bg-gray-900'"
|
|
14
|
+
>
|
|
15
|
+
<img
|
|
16
|
+
class="absolute left-1/2 bottom-0 h-full transform -translate-x-1/2"
|
|
17
|
+
:src="footer?.bg?.img?.src"
|
|
18
|
+
:alt="footer?.bg?.img?.alt"
|
|
19
|
+
v-if="footer?.bg?.img?.src"
|
|
20
|
+
/>
|
|
21
|
+
<div
|
|
22
|
+
class="relative z-10 container mx-auto max-w-screen-2xl px-4 md:px-8"
|
|
23
|
+
>
|
|
24
|
+
<div class="pb-24">
|
|
25
|
+
<div
|
|
26
|
+
class="flex flex-col lg:flex-row lg:justify-between gap-8 lg:gap-12"
|
|
27
|
+
>
|
|
28
|
+
<div class="shrink-0 lg:max-w-xl">
|
|
29
|
+
<a class="mb-8 inline-block" href="/">
|
|
30
|
+
<img
|
|
31
|
+
:src="footer?.logo?.src"
|
|
32
|
+
:alt="footer?.logo?.alt"
|
|
33
|
+
class="h-6"
|
|
34
|
+
/>
|
|
35
|
+
</a>
|
|
36
|
+
<p
|
|
37
|
+
class="mb-8 text-gray-400 font-medium leading-relaxed max-w-lg mx-auto lg:mx-0"
|
|
38
|
+
>
|
|
39
|
+
{{ footer?.body }}
|
|
40
|
+
</p>
|
|
41
|
+
<div class="flex flex-row flex-wrap gap-2 justify-start">
|
|
42
|
+
<div
|
|
43
|
+
class="w-auto"
|
|
44
|
+
v-for="(social, index) in footer?.socials"
|
|
45
|
+
:key="index"
|
|
46
|
+
>
|
|
47
|
+
<UButton
|
|
48
|
+
:to="social.url"
|
|
49
|
+
:icon="social?.icon"
|
|
50
|
+
:alt="social?.name"
|
|
51
|
+
color="gray"
|
|
52
|
+
square
|
|
53
|
+
target="_blank"
|
|
54
|
+
variant="ghost"
|
|
55
|
+
>
|
|
56
|
+
</UButton>
|
|
57
|
+
</div>
|
|
58
|
+
<UColorModeButton />
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
<div
|
|
62
|
+
class="flex flex-col sm:flex-row gap-8 lg:gap-12 lg:justify-end"
|
|
63
|
+
>
|
|
64
|
+
<div
|
|
65
|
+
class="text-left sm:text-right"
|
|
66
|
+
v-for="(column, index) in footer.columns"
|
|
67
|
+
:key="index"
|
|
68
|
+
>
|
|
69
|
+
<h3
|
|
70
|
+
class="mb-6 text-sm text-gray-500 uppercase font-semibold leading-normal tracking-wide"
|
|
71
|
+
>
|
|
72
|
+
{{ column?.headerLabel }}
|
|
73
|
+
</h3>
|
|
74
|
+
<ul class="space-y-4">
|
|
75
|
+
<li v-for="link in column?.links" :key="link?.label">
|
|
76
|
+
<nuxt-link
|
|
77
|
+
:to="link?.to"
|
|
78
|
+
:target="link?.target ? link?.target : '_self'"
|
|
79
|
+
class="text-white hover:text-gray-300 font-medium leading-relaxed transition-colors"
|
|
80
|
+
>{{ link?.label }}</nuxt-link
|
|
81
|
+
>
|
|
82
|
+
</li>
|
|
83
|
+
</ul>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
</section>
|
|
90
|
+
</div>
|
|
92
91
|
</template>
|
|
93
92
|
<script setup>
|
|
94
93
|
const appConfig = useAppConfig();
|
|
95
94
|
const footer = appConfig?.xMarketing?.footer;
|
|
96
|
-
</script>
|
|
95
|
+
</script>
|
|
@@ -1,48 +1,53 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
2
|
+
<UHeader>
|
|
3
|
+
<template #title>
|
|
4
|
+
<nuxt-link to="/" v-if="header?.logo?.src">
|
|
5
|
+
<UColorModeImage
|
|
6
|
+
:light="header?.logo?.src"
|
|
7
|
+
:dark="
|
|
8
|
+
header?.logo?.srcDark ? header?.logo?.srcDark : header?.logo?.src
|
|
9
|
+
"
|
|
10
|
+
:alt="header?.logo?.alt"
|
|
11
|
+
class="h-8"
|
|
12
|
+
/>
|
|
13
|
+
</nuxt-link>
|
|
14
|
+
<span v-else>{{ header?.logo?.alt }}</span>
|
|
15
|
+
</template>
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
<span v-for="(button, index) in header?.nav?.buttons" :key="index"
|
|
19
|
-
><UButton
|
|
20
|
-
class="hidden md:flex md:items-center md:justify-center py-2"
|
|
21
|
-
:to="button?.to"
|
|
22
|
-
:icon="button?.icon ? button?.icon : null"
|
|
23
|
-
:target="button?.target ? button?.target : '_self'"
|
|
24
|
-
:color="button?.color ? button?.color : 'primary'"
|
|
25
|
-
:variant="button?.variant ? button?.variant : 'solid'"
|
|
26
|
-
>{{ button?.label }}</UButton
|
|
27
|
-
></span
|
|
28
|
-
>
|
|
29
|
-
</template>
|
|
17
|
+
<UNavigationMenu :items="links" />
|
|
30
18
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
19
|
+
<template #right>
|
|
20
|
+
<span v-for="(button, index) in header?.nav?.buttons" :key="index"
|
|
21
|
+
><UButton
|
|
22
|
+
class="hidden md:flex md:items-center md:justify-center py-2"
|
|
23
|
+
:to="button?.to"
|
|
24
|
+
:icon="button?.icon ? button?.icon : null"
|
|
25
|
+
:target="button?.target ? button?.target : '_self'"
|
|
26
|
+
:color="button?.color ? button?.color : 'primary'"
|
|
27
|
+
:variant="button?.variant ? button?.variant : 'solid'"
|
|
28
|
+
>{{ button?.label }}</UButton
|
|
29
|
+
></span
|
|
30
|
+
>
|
|
31
|
+
</template>
|
|
32
|
+
|
|
33
|
+
<template #body>
|
|
34
|
+
<UNavigationMenu orientation="vertical" :items="links" class="-mx-2.5" />
|
|
35
|
+
<div class="mt-5 space-y-2">
|
|
36
|
+
<UButton
|
|
37
|
+
v-for="(button, index) in header?.nav?.buttons"
|
|
38
|
+
:key="index"
|
|
39
|
+
class="w-full justify-center"
|
|
40
|
+
:to="button?.to"
|
|
41
|
+
:icon="button?.icon ? button?.icon : null"
|
|
42
|
+
:target="button?.target ? button?.target : '_self'"
|
|
43
|
+
:color="button?.color ? button?.color : 'primary'"
|
|
44
|
+
:variant="button?.variant ? button?.variant : 'solid'"
|
|
45
|
+
>
|
|
46
|
+
{{ button?.label }}
|
|
47
|
+
</UButton>
|
|
48
|
+
</div>
|
|
49
|
+
</template>
|
|
50
|
+
</UHeader>
|
|
46
51
|
</template>
|
|
47
52
|
|
|
48
53
|
<script setup>
|
|
@@ -1,129 +1,129 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
2
|
+
<div class="py-24">
|
|
3
|
+
<main class="container mx-auto">
|
|
4
|
+
<section
|
|
5
|
+
class="py-24 rounded-3xl border-primary border max-w-screen-2xl"
|
|
6
|
+
:class="cardClass"
|
|
7
|
+
:style="cardStyle"
|
|
8
|
+
>
|
|
9
|
+
<div
|
|
10
|
+
class="flex flex-col items-center justify-center"
|
|
11
|
+
v-if="!submitted"
|
|
12
|
+
>
|
|
13
|
+
<h2 class="text-4xl font-bold text-center text-primary">
|
|
14
|
+
{{ heading }}
|
|
15
|
+
</h2>
|
|
16
|
+
<p class="mt-4 text-center text-gray-800 dark:text-gray-100">
|
|
17
|
+
{{ subheading }}
|
|
18
|
+
</p>
|
|
19
|
+
<UForm
|
|
20
|
+
class="mt-8 flex flex-col items-center justify-center w-full max-w-lg"
|
|
21
|
+
:schema="schema"
|
|
22
|
+
:state="state"
|
|
23
|
+
@submit="onSubmit"
|
|
24
|
+
>
|
|
25
|
+
<div class="w-full text-center">
|
|
26
|
+
<UFormField label="" name="email" class="w-full">
|
|
27
|
+
<UInput
|
|
28
|
+
padded
|
|
29
|
+
placeholder="Enter your email"
|
|
30
|
+
icon="i-heroicons-envelope"
|
|
31
|
+
size="xl"
|
|
32
|
+
class="w-full flex-1"
|
|
33
|
+
v-model="state.email"
|
|
34
|
+
:loading="loading"
|
|
35
|
+
:disabled="disabled"
|
|
36
|
+
/>
|
|
37
|
+
</UFormField>
|
|
38
|
+
<UButton
|
|
39
|
+
type="submit"
|
|
40
|
+
size="xl"
|
|
41
|
+
class="mt-6"
|
|
42
|
+
:label="submitLabel"
|
|
43
|
+
/>
|
|
44
|
+
</div>
|
|
45
|
+
</UForm>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="text-center text-2xl" v-else>
|
|
48
|
+
<div class="text-3xl font-bold">Done!</div>
|
|
49
|
+
You have successfully subscribed.
|
|
50
|
+
</div>
|
|
51
|
+
</section>
|
|
52
|
+
</main>
|
|
53
|
+
</div>
|
|
54
54
|
</template>
|
|
55
55
|
<script setup>
|
|
56
56
|
import { z } from "zod";
|
|
57
57
|
const toast = useToast();
|
|
58
58
|
const props = defineProps({
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
59
|
+
heading: {
|
|
60
|
+
type: String,
|
|
61
|
+
default: "Stay Up To Date",
|
|
62
|
+
},
|
|
63
|
+
subheading: {
|
|
64
|
+
type: String,
|
|
65
|
+
default: "Stay up to date with our latest news and product announcements.",
|
|
66
|
+
},
|
|
67
|
+
submitLabel: {
|
|
68
|
+
type: String,
|
|
69
|
+
default: "Subscribe",
|
|
70
|
+
},
|
|
71
|
+
cardClass: {
|
|
72
|
+
type: String,
|
|
73
|
+
default: `bg-fit bg-center bg-no-repeat bg-primary/5`,
|
|
74
|
+
},
|
|
75
|
+
cardStyle: {
|
|
76
|
+
type: String,
|
|
77
|
+
default: `background-image: url('https://cdn.x.enterprises/bg-subscription-poof2.webp');`,
|
|
78
|
+
},
|
|
79
|
+
organizationId: {
|
|
80
|
+
type: String,
|
|
81
|
+
required: true,
|
|
82
|
+
},
|
|
83
|
+
endpoint: {
|
|
84
|
+
type: String,
|
|
85
|
+
default: "https://api.emailmarketingnewsletters.com",
|
|
86
|
+
},
|
|
87
87
|
});
|
|
88
88
|
|
|
89
89
|
const schema = z.object({
|
|
90
|
-
|
|
90
|
+
email: z.string().email("Invalid email"),
|
|
91
91
|
});
|
|
92
92
|
|
|
93
93
|
// type Schema = z.output<typeof schema>;
|
|
94
94
|
|
|
95
95
|
const state = reactive({
|
|
96
|
-
|
|
96
|
+
email: undefined,
|
|
97
97
|
});
|
|
98
98
|
|
|
99
99
|
async function onSubmit(event) {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
100
|
+
loading.value = true;
|
|
101
|
+
disabled.value = true;
|
|
102
|
+
try {
|
|
103
|
+
await $fetch(`${props.endpoint}/public/subscriptions/subscribe`, {
|
|
104
|
+
method: "POST",
|
|
105
|
+
body: JSON.stringify({
|
|
106
|
+
email: state.email,
|
|
107
|
+
organizationId: props.organizationId,
|
|
108
|
+
}),
|
|
109
|
+
});
|
|
110
|
+
submitted.value = true;
|
|
111
|
+
toast.add({
|
|
112
|
+
icon: "i-heroicons-check-badge",
|
|
113
|
+
title: "You have successfully subscribed to our newsletter.",
|
|
114
|
+
});
|
|
115
|
+
} catch (error) {
|
|
116
|
+
console.log(error);
|
|
117
|
+
toast.add({
|
|
118
|
+
icon: "i-heroicons-exclamation-circle-solid",
|
|
119
|
+
title: `An error occurred or you've already subscribed.`,
|
|
120
|
+
});
|
|
121
|
+
} finally {
|
|
122
|
+
loading.value = false;
|
|
123
|
+
disabled.value = false;
|
|
124
|
+
}
|
|
125
125
|
}
|
|
126
126
|
const loading = ref(false);
|
|
127
127
|
const disabled = ref(false);
|
|
128
128
|
const submitted = ref(false);
|
|
129
|
-
</script>
|
|
129
|
+
</script>
|