@xenterprises/nuxt-x-marketing 1.0.0 → 1.0.1
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/pages/blog/detail.vue +341 -249
- package/.playground/pages/notifications/social-proof-toast.vue +330 -70
- package/app/assets/css/x-marketing.css +1 -0
- package/app/components/X/Mark/Blog/Detail.vue +169 -222
- package/app/components/X/Mark/CodeBlock/index.vue +69 -0
- package/app/components/X/Mark/SocialProof/Toast.vue +61 -16
- package/nuxt.config.ts +12 -3
- package/package.json +4 -2
- package/.claude/settings.local.json +0 -22
- package/.playground/package-lock.json +0 -6
|
@@ -1,51 +1,204 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="min-h-screen">
|
|
3
|
-
<div
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
<div
|
|
4
|
+
class="bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 px-8 py-6"
|
|
5
|
+
>
|
|
6
|
+
<h1 class="text-2xl font-bold text-neutral-900 dark:text-white">
|
|
7
|
+
Social Proof Toast
|
|
8
|
+
</h1>
|
|
9
|
+
<p class="mt-2 text-neutral-600 dark:text-neutral-400">
|
|
10
|
+
Automated notifications showing recent customer activity.
|
|
11
|
+
</p>
|
|
6
12
|
</div>
|
|
7
13
|
|
|
8
14
|
<div class="p-8 space-y-12">
|
|
9
15
|
<!-- Demo -->
|
|
10
16
|
<section>
|
|
11
17
|
<h2 class="text-lg font-semibold mb-4">Live Demo</h2>
|
|
12
|
-
<p class="text-sm text-neutral-500 mb-4">
|
|
18
|
+
<p class="text-sm text-neutral-500 mb-4">
|
|
19
|
+
The social proof notifications will cycle through automatically.
|
|
20
|
+
Select placement, type, and click Start Demo.
|
|
21
|
+
</p>
|
|
13
22
|
<div class="flex flex-wrap items-center gap-3">
|
|
14
23
|
<UButton @click="startDemo">Start Demo</UButton>
|
|
15
|
-
<UButton color="neutral" variant="outline" @click="stopDemo"
|
|
24
|
+
<UButton color="neutral" variant="outline" @click="stopDemo"
|
|
25
|
+
>Stop Demo</UButton
|
|
26
|
+
>
|
|
16
27
|
<div class="flex items-center gap-2 ml-4">
|
|
17
28
|
<span class="text-sm text-neutral-500">Placement:</span>
|
|
18
29
|
<UButtonGroup>
|
|
19
|
-
<UButton
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
30
|
+
<UButton
|
|
31
|
+
size="sm"
|
|
32
|
+
:variant="demoPlacement === 'bottomLeft' ? 'solid' : 'outline'"
|
|
33
|
+
@click="demoPlacement = 'bottomLeft'"
|
|
34
|
+
>Bottom Left</UButton
|
|
35
|
+
>
|
|
36
|
+
<UButton
|
|
37
|
+
size="sm"
|
|
38
|
+
:variant="demoPlacement === 'bottomRight' ? 'solid' : 'outline'"
|
|
39
|
+
@click="demoPlacement = 'bottomRight'"
|
|
40
|
+
>Bottom Right</UButton
|
|
41
|
+
>
|
|
42
|
+
<UButton
|
|
43
|
+
size="sm"
|
|
44
|
+
:variant="demoPlacement === 'topLeft' ? 'solid' : 'outline'"
|
|
45
|
+
@click="demoPlacement = 'topLeft'"
|
|
46
|
+
>Top Left</UButton
|
|
47
|
+
>
|
|
48
|
+
<UButton
|
|
49
|
+
size="sm"
|
|
50
|
+
:variant="demoPlacement === 'topRight' ? 'solid' : 'outline'"
|
|
51
|
+
@click="demoPlacement = 'topRight'"
|
|
52
|
+
>Top Right</UButton
|
|
53
|
+
>
|
|
54
|
+
</UButtonGroup>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="flex items-center gap-2 ml-4">
|
|
57
|
+
<span class="text-sm text-neutral-500">Type:</span>
|
|
58
|
+
<UButtonGroup>
|
|
59
|
+
<UButton
|
|
60
|
+
size="sm"
|
|
61
|
+
:variant="demoType === 'success' ? 'solid' : 'outline'"
|
|
62
|
+
@click="demoType = 'success'"
|
|
63
|
+
>Success</UButton
|
|
64
|
+
>
|
|
65
|
+
<UButton
|
|
66
|
+
size="sm"
|
|
67
|
+
:variant="demoType === 'error' ? 'solid' : 'outline'"
|
|
68
|
+
@click="demoType = 'error'"
|
|
69
|
+
>Error</UButton
|
|
70
|
+
>
|
|
71
|
+
<UButton
|
|
72
|
+
size="sm"
|
|
73
|
+
:variant="demoType === 'warning' ? 'solid' : 'outline'"
|
|
74
|
+
@click="demoType = 'warning'"
|
|
75
|
+
>Warning</UButton
|
|
76
|
+
>
|
|
77
|
+
<UButton
|
|
78
|
+
size="sm"
|
|
79
|
+
:variant="demoType === 'info' ? 'solid' : 'outline'"
|
|
80
|
+
@click="demoType = 'info'"
|
|
81
|
+
>Info</UButton
|
|
82
|
+
>
|
|
23
83
|
</UButtonGroup>
|
|
24
84
|
</div>
|
|
25
85
|
</div>
|
|
26
86
|
</section>
|
|
27
87
|
|
|
28
|
-
<!--
|
|
88
|
+
<!-- Type Examples -->
|
|
29
89
|
<section>
|
|
30
|
-
<h2 class="text-lg font-semibold mb-4">
|
|
31
|
-
<div class="
|
|
32
|
-
|
|
33
|
-
<div class="bg-
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
90
|
+
<h2 class="text-lg font-semibold mb-4">Toast Types</h2>
|
|
91
|
+
<div class="grid md:grid-cols-2 gap-4">
|
|
92
|
+
<!-- Success -->
|
|
93
|
+
<div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-6">
|
|
94
|
+
<h3 class="font-medium mb-4 text-green-600 dark:text-green-400">
|
|
95
|
+
Success
|
|
96
|
+
</h3>
|
|
97
|
+
<div
|
|
98
|
+
class="bg-white dark:bg-neutral-900 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-4 flex items-center gap-3"
|
|
99
|
+
>
|
|
100
|
+
<img
|
|
101
|
+
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
|
|
102
|
+
alt="Customer"
|
|
103
|
+
class="w-10 h-10 rounded-full object-cover"
|
|
104
|
+
/>
|
|
105
|
+
<div class="flex-1">
|
|
106
|
+
<p class="text-sm text-neutral-900 dark:text-white">
|
|
107
|
+
<span class="font-medium">Sarah M.</span>
|
|
108
|
+
just purchased Pro Plan
|
|
109
|
+
</p>
|
|
110
|
+
<p class="text-xs text-neutral-500 mt-0.5">2 minutes ago</p>
|
|
111
|
+
</div>
|
|
112
|
+
<UIcon
|
|
113
|
+
name="i-lucide-badge-check"
|
|
114
|
+
class="w-5 h-5 text-green-500 flex-shrink-0"
|
|
115
|
+
/>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<!-- Error -->
|
|
120
|
+
<div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-6">
|
|
121
|
+
<h3 class="font-medium mb-4 text-red-600 dark:text-red-400">
|
|
122
|
+
Error
|
|
123
|
+
</h3>
|
|
124
|
+
<div
|
|
125
|
+
class="bg-white dark:bg-neutral-900 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-4 flex items-center gap-3"
|
|
126
|
+
>
|
|
127
|
+
<div
|
|
128
|
+
class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center"
|
|
129
|
+
>
|
|
130
|
+
<span class="text-primary-600 dark:text-primary-400 font-medium"
|
|
131
|
+
>J</span
|
|
132
|
+
>
|
|
133
|
+
</div>
|
|
134
|
+
<div class="flex-1">
|
|
135
|
+
<p class="text-sm text-neutral-900 dark:text-white">
|
|
136
|
+
<span class="font-medium">John D.</span>
|
|
137
|
+
payment failed
|
|
138
|
+
</p>
|
|
139
|
+
<p class="text-xs text-neutral-500 mt-0.5">5 minutes ago</p>
|
|
140
|
+
</div>
|
|
141
|
+
<UIcon
|
|
142
|
+
name="i-lucide-x-circle"
|
|
143
|
+
class="w-5 h-5 text-red-500 flex-shrink-0"
|
|
144
|
+
/>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
<!-- Warning -->
|
|
149
|
+
<div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-6">
|
|
150
|
+
<h3 class="font-medium mb-4 text-yellow-600 dark:text-yellow-400">
|
|
151
|
+
Warning
|
|
152
|
+
</h3>
|
|
153
|
+
<div
|
|
154
|
+
class="bg-white dark:bg-neutral-900 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-4 flex items-center gap-3"
|
|
155
|
+
>
|
|
156
|
+
<div
|
|
157
|
+
class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center"
|
|
158
|
+
>
|
|
159
|
+
<span class="text-primary-600 dark:text-primary-400 font-medium"
|
|
160
|
+
>E</span
|
|
161
|
+
>
|
|
162
|
+
</div>
|
|
163
|
+
<div class="flex-1">
|
|
164
|
+
<p class="text-sm text-neutral-900 dark:text-white">
|
|
165
|
+
<span class="font-medium">Emily R.</span>
|
|
166
|
+
subscription expiring soon
|
|
167
|
+
</p>
|
|
168
|
+
<p class="text-xs text-neutral-500 mt-0.5">10 minutes ago</p>
|
|
169
|
+
</div>
|
|
170
|
+
<UIcon
|
|
171
|
+
name="i-lucide-alert-triangle"
|
|
172
|
+
class="w-5 h-5 text-yellow-500 flex-shrink-0"
|
|
173
|
+
/>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
|
|
177
|
+
<!-- Info -->
|
|
178
|
+
<div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-6">
|
|
179
|
+
<h3 class="font-medium mb-4 text-blue-600 dark:text-blue-400">
|
|
180
|
+
Info
|
|
181
|
+
</h3>
|
|
182
|
+
<div
|
|
183
|
+
class="bg-white dark:bg-neutral-900 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-4 flex items-center gap-3"
|
|
184
|
+
>
|
|
185
|
+
<img
|
|
186
|
+
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"
|
|
187
|
+
alt="Customer"
|
|
188
|
+
class="w-10 h-10 rounded-full object-cover"
|
|
189
|
+
/>
|
|
190
|
+
<div class="flex-1">
|
|
191
|
+
<p class="text-sm text-neutral-900 dark:text-white">
|
|
192
|
+
<span class="font-medium">James W.</span>
|
|
193
|
+
viewed pricing page
|
|
194
|
+
</p>
|
|
195
|
+
<p class="text-xs text-neutral-500 mt-0.5">1 minute ago</p>
|
|
196
|
+
</div>
|
|
197
|
+
<UIcon
|
|
198
|
+
name="i-lucide-info"
|
|
199
|
+
class="w-5 h-5 text-blue-500 flex-shrink-0"
|
|
200
|
+
/>
|
|
47
201
|
</div>
|
|
48
|
-
<UIcon name="i-lucide-badge-check" class="w-5 h-5 text-green-500" />
|
|
49
202
|
</div>
|
|
50
203
|
</div>
|
|
51
204
|
</section>
|
|
@@ -56,7 +209,9 @@
|
|
|
56
209
|
<div class="grid md:grid-cols-3 gap-4">
|
|
57
210
|
<div class="p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800">
|
|
58
211
|
<h3 class="font-medium mb-1">Initial Delay</h3>
|
|
59
|
-
<p class="text-sm text-neutral-500">
|
|
212
|
+
<p class="text-sm text-neutral-500">
|
|
213
|
+
Wait before first notification
|
|
214
|
+
</p>
|
|
60
215
|
<p class="mt-2 font-mono text-sm">5000ms (5 seconds)</p>
|
|
61
216
|
</div>
|
|
62
217
|
<div class="p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800">
|
|
@@ -85,19 +240,62 @@
|
|
|
85
240
|
</tr>
|
|
86
241
|
</thead>
|
|
87
242
|
<tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
|
|
88
|
-
<tr
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
243
|
+
<tr>
|
|
244
|
+
<td class="py-3 px-4 font-mono text-xs">notifications</td>
|
|
245
|
+
<td class="py-3 px-4">Array</td>
|
|
246
|
+
<td class="py-3 px-4">required</td>
|
|
247
|
+
<td class="py-3 px-4">Array of notification objects</td>
|
|
248
|
+
</tr>
|
|
249
|
+
<tr>
|
|
250
|
+
<td class="py-3 px-4 font-mono text-xs">interval</td>
|
|
251
|
+
<td class="py-3 px-4">Number</td>
|
|
252
|
+
<td class="py-3 px-4">4000</td>
|
|
253
|
+
<td class="py-3 px-4">Time between notifications (ms)</td>
|
|
254
|
+
</tr>
|
|
255
|
+
<tr>
|
|
256
|
+
<td class="py-3 px-4 font-mono text-xs">initialDelay</td>
|
|
257
|
+
<td class="py-3 px-4">Number</td>
|
|
258
|
+
<td class="py-3 px-4">5000</td>
|
|
259
|
+
<td class="py-3 px-4">Delay before first notification (ms)</td>
|
|
260
|
+
</tr>
|
|
261
|
+
<tr>
|
|
262
|
+
<td class="py-3 px-4 font-mono text-xs">displayDuration</td>
|
|
263
|
+
<td class="py-3 px-4">Number</td>
|
|
264
|
+
<td class="py-3 px-4">3000</td>
|
|
265
|
+
<td class="py-3 px-4">How long each notification shows (ms)</td>
|
|
266
|
+
</tr>
|
|
267
|
+
<tr>
|
|
268
|
+
<td class="py-3 px-4 font-mono text-xs">placement</td>
|
|
269
|
+
<td class="py-3 px-4">String</td>
|
|
270
|
+
<td class="py-3 px-4">topRight</td>
|
|
271
|
+
<td class="py-3 px-4">
|
|
272
|
+
topLeft, topRight, bottomLeft, bottomRight
|
|
273
|
+
</td>
|
|
274
|
+
</tr>
|
|
275
|
+
<tr>
|
|
276
|
+
<td class="py-3 px-4 font-mono text-xs">type</td>
|
|
277
|
+
<td class="py-3 px-4">String</td>
|
|
278
|
+
<td class="py-3 px-4">success</td>
|
|
279
|
+
<td class="py-3 px-4">success, error, warning, info</td>
|
|
280
|
+
</tr>
|
|
281
|
+
<tr>
|
|
282
|
+
<td class="py-3 px-4 font-mono text-xs">showIcon</td>
|
|
283
|
+
<td class="py-3 px-4">Boolean</td>
|
|
284
|
+
<td class="py-3 px-4">true</td>
|
|
285
|
+
<td class="py-3 px-4">Whether to show the status icon</td>
|
|
286
|
+
</tr>
|
|
93
287
|
</tbody>
|
|
94
288
|
</table>
|
|
95
289
|
</section>
|
|
96
290
|
|
|
97
291
|
<!-- Notification Structure -->
|
|
98
292
|
<section>
|
|
99
|
-
<h2 class="text-lg font-semibold mb-4">
|
|
100
|
-
|
|
293
|
+
<h2 class="text-lg font-semibold mb-4">
|
|
294
|
+
Notification Object Structure
|
|
295
|
+
</h2>
|
|
296
|
+
<pre
|
|
297
|
+
class="bg-neutral-100 dark:bg-neutral-800 p-4 rounded-lg text-sm overflow-x-auto"
|
|
298
|
+
><code>notifications: [
|
|
101
299
|
{
|
|
102
300
|
name: 'Sarah M.', // Customer name (required)
|
|
103
301
|
action: 'just purchased Pro Plan', // Action text (required)
|
|
@@ -112,7 +310,11 @@
|
|
|
112
310
|
<section>
|
|
113
311
|
<h2 class="text-lg font-semibold mb-4">Sample Notifications</h2>
|
|
114
312
|
<div class="grid md:grid-cols-2 gap-4">
|
|
115
|
-
<div
|
|
313
|
+
<div
|
|
314
|
+
v-for="notification in notifications"
|
|
315
|
+
:key="notification.name"
|
|
316
|
+
class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700 flex items-center gap-3"
|
|
317
|
+
>
|
|
116
318
|
<img
|
|
117
319
|
v-if="notification.avatar"
|
|
118
320
|
:src="notification.avatar"
|
|
@@ -143,19 +345,34 @@
|
|
|
143
345
|
<h2 class="text-lg font-semibold mb-4">Usage Tips</h2>
|
|
144
346
|
<ul class="space-y-3 text-neutral-600 dark:text-neutral-400">
|
|
145
347
|
<li class="flex gap-2">
|
|
146
|
-
<UIcon
|
|
147
|
-
|
|
348
|
+
<UIcon
|
|
349
|
+
name="i-lucide-lightbulb"
|
|
350
|
+
class="w-5 h-5 text-yellow-500 flex-shrink-0"
|
|
351
|
+
/>
|
|
352
|
+
<span
|
|
353
|
+
>Use real customer data or realistic fake data for
|
|
354
|
+
authenticity</span
|
|
355
|
+
>
|
|
148
356
|
</li>
|
|
149
357
|
<li class="flex gap-2">
|
|
150
|
-
<UIcon
|
|
358
|
+
<UIcon
|
|
359
|
+
name="i-lucide-lightbulb"
|
|
360
|
+
class="w-5 h-5 text-yellow-500 flex-shrink-0"
|
|
361
|
+
/>
|
|
151
362
|
<span>Keep action text short and focused on conversions</span>
|
|
152
363
|
</li>
|
|
153
364
|
<li class="flex gap-2">
|
|
154
|
-
<UIcon
|
|
365
|
+
<UIcon
|
|
366
|
+
name="i-lucide-lightbulb"
|
|
367
|
+
class="w-5 h-5 text-yellow-500 flex-shrink-0"
|
|
368
|
+
/>
|
|
155
369
|
<span>Use recent-sounding times ("2 minutes ago") for urgency</span>
|
|
156
370
|
</li>
|
|
157
371
|
<li class="flex gap-2">
|
|
158
|
-
<UIcon
|
|
372
|
+
<UIcon
|
|
373
|
+
name="i-lucide-lightbulb"
|
|
374
|
+
class="w-5 h-5 text-yellow-500 flex-shrink-0"
|
|
375
|
+
/>
|
|
159
376
|
<span>Include diverse customer names and avatars</span>
|
|
160
377
|
</li>
|
|
161
378
|
</ul>
|
|
@@ -166,6 +383,12 @@
|
|
|
166
383
|
<h2 class="text-lg font-semibold mb-4">Code Example</h2>
|
|
167
384
|
<CodeExample title="Social Proof Toast Usage" :code="codeExample" />
|
|
168
385
|
</section>
|
|
386
|
+
|
|
387
|
+
<!-- Type Examples Code -->
|
|
388
|
+
<section>
|
|
389
|
+
<h2 class="text-lg font-semibold mb-4">Type Examples</h2>
|
|
390
|
+
<CodeExample title="Different Toast Types" :code="typeExamplesCode" />
|
|
391
|
+
</section>
|
|
169
392
|
</div>
|
|
170
393
|
|
|
171
394
|
<!-- Actual Component -->
|
|
@@ -176,6 +399,7 @@
|
|
|
176
399
|
:initial-delay="1000"
|
|
177
400
|
:display-duration="3000"
|
|
178
401
|
:placement="demoPlacement"
|
|
402
|
+
:type="demoType"
|
|
179
403
|
/>
|
|
180
404
|
</div>
|
|
181
405
|
</template>
|
|
@@ -186,6 +410,7 @@ const codeExample = `<XMarkSocialProofToast
|
|
|
186
410
|
:interval="4000"
|
|
187
411
|
:initial-delay="5000"
|
|
188
412
|
:display-duration="3000"
|
|
413
|
+
type="success"
|
|
189
414
|
/>
|
|
190
415
|
|
|
191
416
|
<script setup>
|
|
@@ -208,48 +433,83 @@ const notifications = [
|
|
|
208
433
|
time: '8 minutes ago'
|
|
209
434
|
}
|
|
210
435
|
]
|
|
211
|
-
<\/script
|
|
436
|
+
<\/script>`;
|
|
437
|
+
|
|
438
|
+
const typeExamplesCode = `<!-- Success (default) -->
|
|
439
|
+
<XMarkSocialProofToast
|
|
440
|
+
:notifications="notifications"
|
|
441
|
+
type="success"
|
|
442
|
+
/>
|
|
443
|
+
|
|
444
|
+
<!-- Error -->
|
|
445
|
+
<XMarkSocialProofToast
|
|
446
|
+
:notifications="notifications"
|
|
447
|
+
type="error"
|
|
448
|
+
/>
|
|
449
|
+
|
|
450
|
+
<!-- Warning -->
|
|
451
|
+
<XMarkSocialProofToast
|
|
452
|
+
:notifications="notifications"
|
|
453
|
+
type="warning"
|
|
454
|
+
/>
|
|
212
455
|
|
|
213
|
-
|
|
214
|
-
|
|
456
|
+
<!-- Info -->
|
|
457
|
+
<XMarkSocialProofToast
|
|
458
|
+
:notifications="notifications"
|
|
459
|
+
type="info"
|
|
460
|
+
/>
|
|
461
|
+
|
|
462
|
+
<!-- Hide icon -->
|
|
463
|
+
<XMarkSocialProofToast
|
|
464
|
+
:notifications="notifications"
|
|
465
|
+
:show-icon="false"
|
|
466
|
+
/>`;
|
|
467
|
+
|
|
468
|
+
const demoActive = ref(false);
|
|
469
|
+
const demoPlacement = ref("bottomLeft");
|
|
470
|
+
const demoType = ref("success");
|
|
215
471
|
|
|
216
472
|
const notifications = [
|
|
217
473
|
{
|
|
218
|
-
name:
|
|
219
|
-
action:
|
|
220
|
-
time:
|
|
221
|
-
avatar:
|
|
474
|
+
name: "Sarah M.",
|
|
475
|
+
action: "just purchased Pro Plan",
|
|
476
|
+
time: "2 minutes ago",
|
|
477
|
+
avatar:
|
|
478
|
+
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop",
|
|
222
479
|
},
|
|
223
480
|
{
|
|
224
|
-
name:
|
|
225
|
-
action:
|
|
226
|
-
time:
|
|
227
|
-
avatar:
|
|
481
|
+
name: "James W.",
|
|
482
|
+
action: "signed up for a free trial",
|
|
483
|
+
time: "5 minutes ago",
|
|
484
|
+
avatar:
|
|
485
|
+
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop",
|
|
228
486
|
},
|
|
229
487
|
{
|
|
230
|
-
name:
|
|
231
|
-
action:
|
|
232
|
-
time:
|
|
233
|
-
avatar:
|
|
488
|
+
name: "Emily R.",
|
|
489
|
+
action: "upgraded to Enterprise",
|
|
490
|
+
time: "8 minutes ago",
|
|
491
|
+
avatar:
|
|
492
|
+
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop",
|
|
234
493
|
},
|
|
235
494
|
{
|
|
236
|
-
name:
|
|
237
|
-
action:
|
|
238
|
-
time:
|
|
495
|
+
name: "Michael T.",
|
|
496
|
+
action: "just made a purchase",
|
|
497
|
+
time: "12 minutes ago",
|
|
239
498
|
},
|
|
240
499
|
{
|
|
241
|
-
name:
|
|
242
|
-
action:
|
|
243
|
-
time:
|
|
244
|
-
avatar:
|
|
245
|
-
|
|
246
|
-
|
|
500
|
+
name: "Lisa K.",
|
|
501
|
+
action: "joined the newsletter",
|
|
502
|
+
time: "15 minutes ago",
|
|
503
|
+
avatar:
|
|
504
|
+
"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop",
|
|
505
|
+
},
|
|
506
|
+
];
|
|
247
507
|
|
|
248
508
|
const startDemo = () => {
|
|
249
|
-
demoActive.value = true
|
|
250
|
-
}
|
|
509
|
+
demoActive.value = true;
|
|
510
|
+
};
|
|
251
511
|
|
|
252
512
|
const stopDemo = () => {
|
|
253
|
-
demoActive.value = false
|
|
254
|
-
}
|
|
513
|
+
demoActive.value = false;
|
|
514
|
+
};
|
|
255
515
|
</script>
|