@myissue/vue-website-page-builder 3.0.24 → 3.0.26
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/dist/vue-website-page-builder.js +6037 -6003
- package/dist/vue-website-page-builder.umd.cjs +182 -148
- package/package.json +1 -1
- package/src/PageBuilder/PageBuilder.vue +2 -5
- package/src/utils/componentPreviews.ts +143 -65
- package/src/utils/html-elements/component.ts +15 -20
- package/dist/page-builder/2-images-text-top.png +0 -0
- package/dist/page-builder/2-images-text.png +0 -0
- package/dist/page-builder/2-images.png +0 -0
- package/dist/page-builder/3-images-text.png +0 -0
- package/dist/page-builder/3-images.png +0 -0
- package/dist/page-builder/3-vertical-images.png +0 -0
- package/dist/page-builder/4-images-text.png +0 -0
- package/dist/page-builder/6-images.png +0 -0
- package/dist/page-builder/image.png +0 -0
- package/dist/page-builder/placeholder.jpg +0 -0
- package/dist/page-builder/two-vertical-images.png +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@myissue/vue-website-page-builder",
|
|
3
|
-
"version": "v3.0.
|
|
3
|
+
"version": "v3.0.26",
|
|
4
4
|
"description": "🚧 DEVELOPMENT VERSION - Vue.js page builder component with drag & drop functionality. Not ready for production use.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/vue-website-page-builder.umd.cjs",
|
|
@@ -225,7 +225,7 @@ onMounted(async () => {
|
|
|
225
225
|
</script>
|
|
226
226
|
|
|
227
227
|
<template>
|
|
228
|
-
<div>
|
|
228
|
+
<div id="builder-container">
|
|
229
229
|
<SearchComponents
|
|
230
230
|
v-if="showModalAddComponent"
|
|
231
231
|
:show="showModalAddComponent"
|
|
@@ -241,10 +241,7 @@ onMounted(async () => {
|
|
|
241
241
|
<Preview></Preview>
|
|
242
242
|
</PageBuilderPreviewModal>
|
|
243
243
|
|
|
244
|
-
<div
|
|
245
|
-
id="builder-container"
|
|
246
|
-
class="w-full inset-x-0 h-[90vh] z-10 bg-white overflow-x-scroll lg:pt-2 pt-2"
|
|
247
|
-
>
|
|
244
|
+
<div class="w-full inset-x-0 h-[90vh] z-10 bg-white overflow-x-scroll lg:pt-2 pt-2">
|
|
248
245
|
<!-- Save laylout # start -->
|
|
249
246
|
<div class="p-4 m-8 bg-stone-200 rounded-lg">
|
|
250
247
|
<div
|
|
@@ -7,17 +7,65 @@ export interface ComponentPreviewConfig {
|
|
|
7
7
|
description?: string
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
+
// Generate the triangles and circle design scaled to fit within a rectangle
|
|
11
|
+
const generateImageIcon = (x: number, y: number, width: number, height: number): string => {
|
|
12
|
+
// Use uniform scaling based on the smaller dimension to avoid stretching
|
|
13
|
+
const scale = Math.min(width / 70, height / 50) * 0.8 // 0.8 to leave some padding
|
|
14
|
+
|
|
15
|
+
// Center the design within the rectangle
|
|
16
|
+
const centerX = x + width / 2
|
|
17
|
+
const centerY = y + height / 2
|
|
18
|
+
|
|
19
|
+
// Original design dimensions (scaled uniformly)
|
|
20
|
+
const mediumTriangleBase = 25 * scale
|
|
21
|
+
const mediumTriangleHeight = 15 * scale
|
|
22
|
+
const smallTriangleBase = mediumTriangleBase * 0.7 // 30% smaller
|
|
23
|
+
const smallTriangleHeight = mediumTriangleHeight * 0.7
|
|
24
|
+
const circleRadius = 3 * scale
|
|
25
|
+
|
|
26
|
+
// Position triangles side by side, centered
|
|
27
|
+
const totalWidth = mediumTriangleBase + smallTriangleBase + 5 * scale // 5 units spacing
|
|
28
|
+
const startX = centerX - totalWidth / 2
|
|
29
|
+
|
|
30
|
+
// Medium triangle (left)
|
|
31
|
+
const mediumTriangleX = startX + mediumTriangleBase / 2
|
|
32
|
+
const mediumTriangle = `<polygon points="${mediumTriangleX - mediumTriangleBase / 2},${centerY + mediumTriangleHeight / 2} ${mediumTriangleX},${centerY - mediumTriangleHeight / 2} ${mediumTriangleX + mediumTriangleBase / 2},${centerY + mediumTriangleHeight / 2}" fill="#718096"/>`
|
|
33
|
+
|
|
34
|
+
// Small triangle (right)
|
|
35
|
+
const smallTriangleX = startX + mediumTriangleBase + 5 * scale + smallTriangleBase / 2
|
|
36
|
+
const smallTriangle = `<polygon points="${smallTriangleX - smallTriangleBase / 2},${centerY + smallTriangleHeight / 2} ${smallTriangleX},${centerY - smallTriangleHeight / 2} ${smallTriangleX + smallTriangleBase / 2},${centerY + smallTriangleHeight / 2}" fill="#718096"/>`
|
|
37
|
+
|
|
38
|
+
// Circle above small triangle with space
|
|
39
|
+
const circle = `<circle cx="${smallTriangleX}" cy="${centerY - smallTriangleHeight / 2 - circleRadius - 3 * scale}" r="${circleRadius}" fill="#718096"/>`
|
|
40
|
+
|
|
41
|
+
return mediumTriangle + smallTriangle + circle
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// Generate placeholder image data URL from Single Image SVG
|
|
45
|
+
export const getPlaceholderImageDataUrl = (): string => {
|
|
46
|
+
const singleImageSvg = `
|
|
47
|
+
<svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
|
|
48
|
+
<rect x="0" y="0" width="200" height="150" fill="#384152"/>
|
|
49
|
+
<polygon points="60,85 85,55 110,85" fill="#718096"/>
|
|
50
|
+
<polygon points="105,85 117.5,70 130,85" fill="#718096"/>
|
|
51
|
+
<circle cx="117.5" cy="55" r="6" fill="#718096"/>
|
|
52
|
+
</svg>
|
|
53
|
+
`
|
|
54
|
+
|
|
55
|
+
// Convert SVG to data URL
|
|
56
|
+
const encodedSvg = encodeURIComponent(singleImageSvg.trim())
|
|
57
|
+
return `data:image/svg+xml,${encodedSvg}`
|
|
58
|
+
}
|
|
59
|
+
|
|
10
60
|
export const generateComponentPreview = (title: string): string => {
|
|
11
61
|
const previewConfigs: Record<string, ComponentPreviewConfig> = {
|
|
12
62
|
'Single Image': {
|
|
13
63
|
title: 'Single Image',
|
|
14
64
|
svg: `
|
|
15
|
-
<svg viewBox="0 0 200 150"
|
|
16
|
-
<rect x="
|
|
17
|
-
<rect x="40" y="40" width="120" height="70" fill="#
|
|
18
|
-
|
|
19
|
-
<path d="M85 75 L95 65 L110 80 L125 70 L135 85" stroke="#9ca3af" stroke-width="2" fill="none"/>
|
|
20
|
-
<text x="100" y="125" text-anchor="middle" fill="#6b7280" font-size="12">Single Image</text>
|
|
65
|
+
<svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
|
|
66
|
+
<rect x="0" y="0" width="200" height="150" fill="#384152"/>
|
|
67
|
+
<rect x="40" y="40" width="120" height="70" fill="#4a5568"/>
|
|
68
|
+
${generateImageIcon(40, 40, 120, 70)}
|
|
21
69
|
</svg>
|
|
22
70
|
`,
|
|
23
71
|
},
|
|
@@ -25,11 +73,11 @@ export const generateComponentPreview = (title: string): string => {
|
|
|
25
73
|
title: '2 Vertical Images',
|
|
26
74
|
svg: `
|
|
27
75
|
<svg viewBox="0 0 200 150" class="w-full h-full">
|
|
28
|
-
<rect x="
|
|
29
|
-
<rect x="
|
|
30
|
-
<rect x="
|
|
31
|
-
|
|
32
|
-
|
|
76
|
+
<rect x="0" y="0" width="200" height="150" fill="#384152"/>
|
|
77
|
+
<rect x="20" y="20" width="65" height="110" fill="#4a5568"/>
|
|
78
|
+
<rect x="115" y="20" width="65" height="110" fill="#4a5568"/>
|
|
79
|
+
${generateImageIcon(20, 20, 65, 110)}
|
|
80
|
+
${generateImageIcon(115, 20, 65, 110)}
|
|
33
81
|
</svg>
|
|
34
82
|
`,
|
|
35
83
|
},
|
|
@@ -37,11 +85,11 @@ export const generateComponentPreview = (title: string): string => {
|
|
|
37
85
|
title: '2 Images',
|
|
38
86
|
svg: `
|
|
39
87
|
<svg viewBox="0 0 200 150" class="w-full h-full">
|
|
40
|
-
<rect x="
|
|
41
|
-
<rect x="
|
|
42
|
-
<rect x="
|
|
43
|
-
|
|
44
|
-
|
|
88
|
+
<rect x="0" y="0" width="200" height="150" fill="#384152"/>
|
|
89
|
+
<rect x="30" y="40" width="55" height="60" fill="#4a5568"/>
|
|
90
|
+
<rect x="115" y="40" width="55" height="60" fill="#4a5568"/>
|
|
91
|
+
${generateImageIcon(30, 40, 55, 60)}
|
|
92
|
+
${generateImageIcon(115, 40, 55, 60)}
|
|
45
93
|
</svg>
|
|
46
94
|
`,
|
|
47
95
|
},
|
|
@@ -49,10 +97,13 @@ export const generateComponentPreview = (title: string): string => {
|
|
|
49
97
|
title: '3 Images',
|
|
50
98
|
svg: `
|
|
51
99
|
<svg viewBox="0 0 200 150" class="w-full h-full">
|
|
52
|
-
<rect x="
|
|
53
|
-
<rect x="
|
|
54
|
-
<rect x="
|
|
55
|
-
<
|
|
100
|
+
<rect x="0" y="0" width="200" height="150" fill="#384152"/>
|
|
101
|
+
<rect x="20" y="40" width="40" height="45" fill="#4a5568"/>
|
|
102
|
+
<rect x="80" y="40" width="40" height="45" fill="#4a5568"/>
|
|
103
|
+
<rect x="140" y="40" width="40" height="45" fill="#4a5568"/>
|
|
104
|
+
${generateImageIcon(20, 40, 40, 45)}
|
|
105
|
+
${generateImageIcon(80, 40, 40, 45)}
|
|
106
|
+
${generateImageIcon(140, 40, 40, 45)}
|
|
56
107
|
</svg>
|
|
57
108
|
`,
|
|
58
109
|
},
|
|
@@ -60,13 +111,26 @@ export const generateComponentPreview = (title: string): string => {
|
|
|
60
111
|
title: '6 Images Grid',
|
|
61
112
|
svg: `
|
|
62
113
|
<svg viewBox="0 0 200 150" class="w-full h-full">
|
|
63
|
-
<rect x="
|
|
64
|
-
<rect x="
|
|
65
|
-
<rect x="
|
|
66
|
-
<rect x="
|
|
67
|
-
<rect x="
|
|
68
|
-
<rect x="
|
|
69
|
-
<
|
|
114
|
+
<rect x="0" y="0" width="200" height="150" fill="#384151"/>
|
|
115
|
+
<rect x="25" y="25" width="45" height="30" fill="#4a5568"/>
|
|
116
|
+
<rect x="80" y="25" width="45" height="30" fill="#4a5568"/>
|
|
117
|
+
<rect x="135" y="25" width="45" height="30" fill="#4a5568"/>
|
|
118
|
+
<rect x="25" y="65" width="45" height="30" fill="#4a5568"/>
|
|
119
|
+
<rect x="80" y="65" width="45" height="30" fill="#4a5568"/>
|
|
120
|
+
<rect x="135" y="65" width="45" height="30" fill="#4a5568"/>
|
|
121
|
+
<rect x="70" y="25" width="10" height="30" fill="white"/>
|
|
122
|
+
<rect x="125" y="25" width="10" height="30" fill="white"/>
|
|
123
|
+
<rect x="70" y="65" width="10" height="30" fill="white"/>
|
|
124
|
+
<rect x="125" y="65" width="10" height="30" fill="white"/>
|
|
125
|
+
<rect x="25" y="55" width="45" height="10" fill="white"/>
|
|
126
|
+
<rect x="80" y="55" width="45" height="10" fill="white"/>
|
|
127
|
+
<rect x="135" y="55" width="45" height="10" fill="white"/>
|
|
128
|
+
${generateImageIcon(25, 25, 45, 30)}
|
|
129
|
+
${generateImageIcon(80, 25, 45, 30)}
|
|
130
|
+
${generateImageIcon(135, 25, 45, 30)}
|
|
131
|
+
${generateImageIcon(25, 65, 45, 30)}
|
|
132
|
+
${generateImageIcon(80, 65, 45, 30)}
|
|
133
|
+
${generateImageIcon(135, 65, 45, 30)}
|
|
70
134
|
</svg>
|
|
71
135
|
`,
|
|
72
136
|
},
|
|
@@ -74,13 +138,15 @@ export const generateComponentPreview = (title: string): string => {
|
|
|
74
138
|
title: 'Images + Text',
|
|
75
139
|
svg: `
|
|
76
140
|
<svg viewBox="0 0 200 150" class="w-full h-full">
|
|
77
|
-
<rect x="
|
|
78
|
-
<rect x="20" y="
|
|
79
|
-
<rect x="
|
|
80
|
-
<rect x="70" y="
|
|
81
|
-
<rect x="70" y="50" width="
|
|
82
|
-
<rect x="70" y="60" width="
|
|
83
|
-
<
|
|
141
|
+
<rect x="0" y="0" width="200" height="150" fill="#384152"/>
|
|
142
|
+
<rect x="20" y="30" width="35" height="35" fill="#4a5568"/>
|
|
143
|
+
<rect x="20" y="75" width="35" height="35" fill="#4a5568"/>
|
|
144
|
+
<rect x="70" y="35" width="110" height="8" fill="#718096"/>
|
|
145
|
+
<rect x="70" y="50" width="90" height="6" fill="#718096"/>
|
|
146
|
+
<rect x="70" y="60" width="100" height="6" fill="#718096"/>
|
|
147
|
+
<rect x="70" y="70" width="80" height="6" fill="#718096"/>
|
|
148
|
+
${generateImageIcon(20, 30, 35, 35)}
|
|
149
|
+
${generateImageIcon(20, 75, 35, 35)}
|
|
84
150
|
</svg>
|
|
85
151
|
`,
|
|
86
152
|
},
|
|
@@ -88,10 +154,13 @@ export const generateComponentPreview = (title: string): string => {
|
|
|
88
154
|
title: '3 Vertical Images',
|
|
89
155
|
svg: `
|
|
90
156
|
<svg viewBox="0 0 200 150" class="w-full h-full">
|
|
91
|
-
<rect x="
|
|
92
|
-
<rect x="
|
|
93
|
-
<rect x="
|
|
94
|
-
<
|
|
157
|
+
<rect x="0" y="0" width="200" height="150" fill="#384152"/>
|
|
158
|
+
<rect x="25" y="25" width="35" height="70" fill="#4a5568"/>
|
|
159
|
+
<rect x="82" y="25" width="35" height="70" fill="#4a5568"/>
|
|
160
|
+
<rect x="140" y="25" width="35" height="70" fill="#4a5568"/>
|
|
161
|
+
${generateImageIcon(25, 25, 35, 70)}
|
|
162
|
+
${generateImageIcon(82, 25, 35, 70)}
|
|
163
|
+
${generateImageIcon(140, 25, 35, 70)}
|
|
95
164
|
</svg>
|
|
96
165
|
`,
|
|
97
166
|
},
|
|
@@ -99,10 +168,9 @@ export const generateComponentPreview = (title: string): string => {
|
|
|
99
168
|
title: 'Link Button',
|
|
100
169
|
svg: `
|
|
101
170
|
<svg viewBox="0 0 200 150" class="w-full h-full">
|
|
102
|
-
<rect x="
|
|
103
|
-
<
|
|
171
|
+
<rect x="0" y="0" width="200" height="150" fill="#384152"/>
|
|
172
|
+
<rect x="50" y="60" width="100" height="30" fill="#4a5568"/>
|
|
104
173
|
<path d="M75 75 L80 70 M80 70 L80 80 M80 70 L70 70" stroke="white" stroke-width="2" fill="none"/>
|
|
105
|
-
<text x="100" y="110" text-anchor="middle" fill="#6b7280" font-size="10">Link Button</text>
|
|
106
174
|
</svg>
|
|
107
175
|
`,
|
|
108
176
|
},
|
|
@@ -110,15 +178,19 @@ export const generateComponentPreview = (title: string): string => {
|
|
|
110
178
|
title: '4 Images + Text',
|
|
111
179
|
svg: `
|
|
112
180
|
<svg viewBox="0 0 200 150" class="w-full h-full">
|
|
113
|
-
<rect x="
|
|
114
|
-
<rect x="
|
|
115
|
-
<rect x="
|
|
116
|
-
<rect x="
|
|
117
|
-
<rect x="
|
|
118
|
-
<rect x="
|
|
119
|
-
<rect x="
|
|
120
|
-
<rect x="
|
|
121
|
-
<
|
|
181
|
+
<rect x="0" y="0" width="200" height="150" fill="#384152"/>
|
|
182
|
+
<rect x="15" y="20" width="30" height="25" fill="#4a5568"/>
|
|
183
|
+
<rect x="60" y="20" width="30" height="25" fill="#4a5568"/>
|
|
184
|
+
<rect x="105" y="20" width="30" height="25" fill="#4a5568"/>
|
|
185
|
+
<rect x="150" y="20" width="30" height="25" fill="#4a5568"/>
|
|
186
|
+
<rect x="15" y="50" width="30" height="4" fill="#718096"/>
|
|
187
|
+
<rect x="60" y="50" width="30" height="4" fill="#718096"/>
|
|
188
|
+
<rect x="105" y="50" width="30" height="4" fill="#718096"/>
|
|
189
|
+
<rect x="150" y="50" width="30" height="4" fill="#718096"/>
|
|
190
|
+
${generateImageIcon(15, 20, 30, 25)}
|
|
191
|
+
${generateImageIcon(60, 20, 30, 25)}
|
|
192
|
+
${generateImageIcon(105, 20, 30, 25)}
|
|
193
|
+
${generateImageIcon(150, 20, 30, 25)}
|
|
122
194
|
</svg>
|
|
123
195
|
`,
|
|
124
196
|
},
|
|
@@ -126,13 +198,16 @@ export const generateComponentPreview = (title: string): string => {
|
|
|
126
198
|
title: '3 Images + Text',
|
|
127
199
|
svg: `
|
|
128
200
|
<svg viewBox="0 0 200 150" class="w-full h-full">
|
|
129
|
-
<rect x="
|
|
130
|
-
<rect x="
|
|
131
|
-
<rect x="
|
|
132
|
-
<rect x="
|
|
133
|
-
<rect x="
|
|
134
|
-
<rect x="
|
|
135
|
-
<
|
|
201
|
+
<rect x="0" y="0" width="200" height="150" fill="#384152"/>
|
|
202
|
+
<rect x="35" y="30" width="35" height="30" fill="#4a5568"/>
|
|
203
|
+
<rect x="82" y="30" width="35" height="30" fill="#4a5568"/>
|
|
204
|
+
<rect x="130" y="30" width="35" height="30" fill="#4a5568"/>
|
|
205
|
+
<rect x="35" y="65" width="35" height="5" fill="#718096"/>
|
|
206
|
+
<rect x="82" y="65" width="35" height="5" fill="#718096"/>
|
|
207
|
+
<rect x="130" y="65" width="35" height="5" fill="#718096"/>
|
|
208
|
+
${generateImageIcon(35, 30, 35, 30)}
|
|
209
|
+
${generateImageIcon(82, 30, 35, 30)}
|
|
210
|
+
${generateImageIcon(130, 30, 35, 30)}
|
|
136
211
|
</svg>
|
|
137
212
|
`,
|
|
138
213
|
},
|
|
@@ -140,11 +215,13 @@ export const generateComponentPreview = (title: string): string => {
|
|
|
140
215
|
title: '2 Images + Text',
|
|
141
216
|
svg: `
|
|
142
217
|
<svg viewBox="0 0 200 150" class="w-full h-full">
|
|
143
|
-
<rect x="
|
|
144
|
-
<rect x="
|
|
145
|
-
<rect x="
|
|
146
|
-
<rect x="
|
|
147
|
-
<
|
|
218
|
+
<rect x="0" y="0" width="200" height="150" fill="#384152"/>
|
|
219
|
+
<rect x="45" y="35" width="45" height="40" fill="#4a5568"/>
|
|
220
|
+
<rect x="110" y="35" width="45" height="40" fill="#4a5568"/>
|
|
221
|
+
<rect x="45" y="80" width="45" height="6" fill="#718096"/>
|
|
222
|
+
<rect x="110" y="80" width="45" height="6" fill="#718096"/>
|
|
223
|
+
${generateImageIcon(45, 35, 45, 40)}
|
|
224
|
+
${generateImageIcon(110, 35, 45, 40)}
|
|
148
225
|
</svg>
|
|
149
226
|
`,
|
|
150
227
|
},
|
|
@@ -158,13 +235,14 @@ export const generateComponentPreview = (title: string): string => {
|
|
|
158
235
|
// Default fallback preview
|
|
159
236
|
return `
|
|
160
237
|
<svg viewBox="0 0 200 150" class="w-full h-full">
|
|
161
|
-
<rect x="
|
|
162
|
-
<
|
|
163
|
-
|
|
238
|
+
<rect x="0" y="0" width="200" height="150" fill="#384152"/>
|
|
239
|
+
<rect x="20" y="20" width="160" height="110" fill="#4a5568"/>
|
|
240
|
+
${generateImageIcon(20, 20, 160, 110)}
|
|
164
241
|
</svg>
|
|
165
242
|
`
|
|
166
243
|
}
|
|
167
244
|
|
|
168
245
|
export default {
|
|
169
246
|
generateComponentPreview,
|
|
247
|
+
getPlaceholderImageDataUrl,
|
|
170
248
|
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { getPlaceholderImageDataUrl } from '../componentPreviews'
|
|
2
|
+
|
|
1
3
|
interface ComponentData {
|
|
2
4
|
title: string
|
|
3
5
|
html_code: string
|
|
@@ -10,50 +12,46 @@ interface Components {
|
|
|
10
12
|
}
|
|
11
13
|
}
|
|
12
14
|
|
|
15
|
+
// Get the self-contained placeholder image
|
|
16
|
+
const placeholderImage = getPlaceholderImageDataUrl()
|
|
17
|
+
|
|
13
18
|
const component: Components[] = [
|
|
14
19
|
{
|
|
15
20
|
components: {
|
|
16
21
|
data: [
|
|
17
22
|
{
|
|
18
23
|
title: 'Single Image',
|
|
19
|
-
html_code:
|
|
20
|
-
'<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"></div></div></div></div>\n</section>',
|
|
24
|
+
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"></div></div></div></div>\n</section>`,
|
|
21
25
|
cover_image: null,
|
|
22
26
|
},
|
|
23
27
|
{
|
|
24
28
|
title: '2 vertical images',
|
|
25
|
-
html_code:
|
|
26
|
-
'<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> </div> </div> </div> </div>\n</section>',
|
|
29
|
+
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="${placeholderImage}" alt="provider"> </div> </div> </div> </div>\n</section>`,
|
|
27
30
|
cover_image: null,
|
|
28
31
|
},
|
|
29
32
|
{
|
|
30
33
|
title: '2 images',
|
|
31
|
-
html_code:
|
|
32
|
-
'<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"></div></div> </div></div>\n</section>',
|
|
34
|
+
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"></div></div> </div></div>\n</section>`,
|
|
33
35
|
cover_image: null,
|
|
34
36
|
},
|
|
35
37
|
{
|
|
36
38
|
title: '3 images',
|
|
37
|
-
html_code:
|
|
38
|
-
'<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"></div></div> </div></div>\n</section>',
|
|
39
|
+
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"></div></div> </div></div>\n</section>`,
|
|
39
40
|
cover_image: null,
|
|
40
41
|
},
|
|
41
42
|
{
|
|
42
43
|
title: '6 Images Grid',
|
|
43
|
-
html_code:
|
|
44
|
-
'<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2">\n<div class="mx-auto max-w-7xl">\n<div class="grid grid-cols-2 md:grid-cols-3 myPrimaryGap">\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n</div>\n</div>\n</div>\n</section>',
|
|
44
|
+
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2">\n<div class="mx-auto max-w-7xl">\n<div class="grid grid-cols-2 md:grid-cols-3 myPrimaryGap">\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="image">\n</div>\n\n</div>\n</div>\n</div>\n</section>`,
|
|
45
45
|
cover_image: null,
|
|
46
46
|
},
|
|
47
47
|
{
|
|
48
48
|
title: 'Two Images With Right Text Top',
|
|
49
|
-
html_code:
|
|
50
|
-
'<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl">\n<div class="myPrimaryGap lg:flex lg:justify-center"><div class="flex-1 py-2">\n<div class="grid myPrimaryGap grid-cols-1 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> </div> </div> </div>\n\n<div class="flex-1 py-2"> <div class="break-words py-2"><p><strong>Title</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div> \n</div></div></div>\n</section>',
|
|
49
|
+
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl">\n<div class="myPrimaryGap lg:flex lg:justify-center"><div class="flex-1 py-2">\n<div class="grid myPrimaryGap grid-cols-1 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> </div> </div> </div>\n\n<div class="flex-1 py-2"> <div class="break-words py-2"><p><strong>Title</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div> \n</div></div></div>\n</section>`,
|
|
51
50
|
cover_image: null,
|
|
52
51
|
},
|
|
53
52
|
{
|
|
54
53
|
title: '3 Vertical Images',
|
|
55
|
-
html_code:
|
|
56
|
-
'<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"></div></div> </div></div>\n</section>',
|
|
54
|
+
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="${placeholderImage}" alt="provider"></div></div> </div></div>\n</section>`,
|
|
57
55
|
cover_image: null,
|
|
58
56
|
},
|
|
59
57
|
{
|
|
@@ -64,20 +62,17 @@ const component: Components[] = [
|
|
|
64
62
|
},
|
|
65
63
|
{
|
|
66
64
|
title: '4 Images With Text',
|
|
67
|
-
html_code:
|
|
68
|
-
'<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"><div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> </div> </div> </div>\n</section>',
|
|
65
|
+
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"><div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> </div> </div> </div>\n</section>`,
|
|
69
66
|
cover_image: null,
|
|
70
67
|
},
|
|
71
68
|
{
|
|
72
69
|
title: '3 Images With Text',
|
|
73
|
-
html_code:
|
|
74
|
-
'<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> </div> </div> </div>\n</section>',
|
|
70
|
+
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> </div> </div> </div>\n</section>`,
|
|
75
71
|
cover_image: null,
|
|
76
72
|
},
|
|
77
73
|
{
|
|
78
74
|
title: '2 Images With Text',
|
|
79
|
-
html_code:
|
|
80
|
-
'<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> </div> </div> </div>\n</section>',
|
|
75
|
+
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> </div> </div> </div>\n</section>`,
|
|
81
76
|
cover_image: null,
|
|
82
77
|
},
|
|
83
78
|
],
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|