@myissue/vue-website-page-builder 3.4.19 → 3.4.21
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/README.md +32 -26
- package/dist/vue-website-page-builder.js +1263 -1259
- package/dist/vue-website-page-builder.umd.cjs +46 -46
- package/package.json +3 -5
- package/src/App.vue +0 -28
- package/src/Components/Homepage/Footer.vue +0 -32
- package/src/Components/Homepage/Navbar.vue +0 -25
- package/src/Components/Layouts/FullWidthElement.vue +0 -34
- package/src/Components/Loaders/GlobalLoader.vue +0 -18
- package/src/Components/Modals/BuilderComponents.vue +0 -53
- package/src/Components/Modals/DynamicModalBuilder.vue +0 -209
- package/src/Components/Modals/MediaLibraryModal.vue +0 -61
- package/src/Components/Modals/ModalBuilder.vue +0 -117
- package/src/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue +0 -121
- package/src/Components/PageBuilder/EditorMenu/Editables/BorderRadius.vue +0 -188
- package/src/Components/PageBuilder/EditorMenu/Editables/Borders.vue +0 -176
- package/src/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue +0 -112
- package/src/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue +0 -108
- package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue +0 -541
- package/src/Components/PageBuilder/EditorMenu/Editables/HTMLEditor.vue +0 -203
- package/src/Components/PageBuilder/EditorMenu/Editables/ImageEditor.vue +0 -96
- package/src/Components/PageBuilder/EditorMenu/Editables/LinkEditor.vue +0 -315
- package/src/Components/PageBuilder/EditorMenu/Editables/ManageBackgroundOpacity.vue +0 -107
- package/src/Components/PageBuilder/EditorMenu/Editables/ManageOpacity.vue +0 -106
- package/src/Components/PageBuilder/EditorMenu/Editables/Margin.vue +0 -116
- package/src/Components/PageBuilder/EditorMenu/Editables/OpacityEditor.vue +0 -19
- package/src/Components/PageBuilder/EditorMenu/Editables/Padding.vue +0 -117
- package/src/Components/PageBuilder/EditorMenu/Editables/StyleEditor.vue +0 -123
- package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue +0 -123
- package/src/Components/PageBuilder/EditorMenu/Editables/Typography.vue +0 -237
- package/src/Components/PageBuilder/EditorMenu/EditorAccordion.vue +0 -46
- package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue +0 -368
- package/src/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue +0 -476
- package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue +0 -581
- package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue +0 -248
- package/src/Components/PageBuilder/UndoRedo/UndoRedo.vue +0 -90
- package/src/Components/TipTap/TipTap.vue +0 -25
- package/src/Components/TipTap/TipTapInput.vue +0 -340
- package/src/PageBuilder/PageBuilder.vue +0 -1025
- package/src/PageBuilder/Preview.vue +0 -64
- package/src/composables/builderInstance.ts +0 -47
- package/src/composables/delay.ts +0 -5
- package/src/composables/extractCleanHTMLFromPageBuilder.ts +0 -59
- package/src/composables/preloadImage.ts +0 -8
- package/src/composables/useDebounce.ts +0 -8
- package/src/composables/usePageBuilderModal.ts +0 -25
- package/src/composables/useTranslations.ts +0 -28
- package/src/css/dev-global.css +0 -24
- package/src/css/style.css +0 -600
- package/src/helpers/isEmptyObject.ts +0 -5
- package/src/index.ts +0 -28
- package/src/locales/ar.json +0 -170
- package/src/locales/de.json +0 -171
- package/src/locales/en.json +0 -171
- package/src/locales/es.json +0 -171
- package/src/locales/fr.json +0 -171
- package/src/locales/hi.json +0 -172
- package/src/locales/ja.json +0 -171
- package/src/locales/pt.json +0 -171
- package/src/locales/ru.json +0 -171
- package/src/locales/zh-Hans.json +0 -171
- package/src/main.ts +0 -14
- package/src/plugin.ts +0 -16
- package/src/services/LocalStorageManager.ts +0 -25
- package/src/services/PageBuilderService.ts +0 -3191
- package/src/stores/page-builder-state.ts +0 -498
- package/src/stores/shared-store.ts +0 -13
- package/src/tailwind-safelist.html +0 -3
- package/src/tests/DefaultComponents/DefaultBuilderComponents.vue +0 -284
- package/src/tests/DefaultComponents/DefaultMediaLibraryComponent.vue +0 -10
- package/src/tests/PageBuilderTest.vue +0 -82
- package/src/tests/TestComponents/DemoBuilderComponentsTest.vue +0 -5
- package/src/tests/TestComponents/DemoMediaLibraryComponentTest.vue +0 -8
- package/src/tests/TestComponents/DemoUnsplash.vue +0 -389
- package/src/tests/componentsArray.test.json +0 -62
- package/src/tests/pageBuilderService.test.ts +0 -165
- package/src/types/global.d.ts +0 -11
- package/src/types/index.ts +0 -306
- package/src/utils/builder/html-doc-declaration-with-components.ts +0 -7
- package/src/utils/builder/tailwaind-colors.ts +0 -503
- package/src/utils/builder/tailwind-border-radius.ts +0 -67
- package/src/utils/builder/tailwind-border-style-width-color.ts +0 -272
- package/src/utils/builder/tailwind-font-sizes.ts +0 -75
- package/src/utils/builder/tailwind-font-styles.ts +0 -56
- package/src/utils/builder/tailwind-opacities.ts +0 -45
- package/src/utils/builder/tailwind-padding-margin.ts +0 -159
- package/src/utils/html-elements/component.ts +0 -485
- package/src/utils/html-elements/componentHelpers.ts +0 -98
- package/src/utils/html-elements/themes.ts +0 -85
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
interface ComponentHelper {
|
|
2
|
-
html_code: string
|
|
3
|
-
id: string | null
|
|
4
|
-
title: string
|
|
5
|
-
icon: string
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
const componentHelpers: ComponentHelper[] = [
|
|
9
|
-
{
|
|
10
|
-
html_code: `
|
|
11
|
-
<section>
|
|
12
|
-
<div class="relative py-4">
|
|
13
|
-
<div class="mx-auto max-w-7xl lg:px-4 px-2">
|
|
14
|
-
<div>
|
|
15
|
-
<p>
|
|
16
|
-
Start customizing by editing this default text directly in the editor.
|
|
17
|
-
</p>
|
|
18
|
-
</div>
|
|
19
|
-
</div>
|
|
20
|
-
</div>
|
|
21
|
-
</section>`,
|
|
22
|
-
id: null,
|
|
23
|
-
title: 'Text',
|
|
24
|
-
icon: `
|
|
25
|
-
<span class="material-symbols-outlined">
|
|
26
|
-
text_fields
|
|
27
|
-
</span>
|
|
28
|
-
`,
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
html_code: `<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words"><h2>Layouts and visual.</h2></div></div></div></section>`,
|
|
32
|
-
id: null,
|
|
33
|
-
title: 'Header H2',
|
|
34
|
-
icon: `
|
|
35
|
-
<span class="material-symbols-outlined">
|
|
36
|
-
format_h2
|
|
37
|
-
</span>
|
|
38
|
-
`,
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
html_code: `<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words"><h3>Layouts and visual.</h3></div></div></div></section>`,
|
|
42
|
-
id: null,
|
|
43
|
-
title: 'Header H3',
|
|
44
|
-
icon: `
|
|
45
|
-
<span class="material-symbols-outlined">
|
|
46
|
-
format_h3
|
|
47
|
-
</span>
|
|
48
|
-
`,
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
html_code: `
|
|
52
|
-
<section>
|
|
53
|
-
<div class="py-4">
|
|
54
|
-
<div class="mx-auto max-w-7xl w-full pt-6 pb-6 bg-gray-100">
|
|
55
|
-
<div id="youtube-video" class="w-full aspect-video p-4">
|
|
56
|
-
|
|
57
|
-
<iframe
|
|
58
|
-
frameborder="0"
|
|
59
|
-
allowfullscreen
|
|
60
|
-
class="w-full aspect-video"
|
|
61
|
-
src=""
|
|
62
|
-
allow="accelerometer; autoplay; clipboard-write;" allowfullscreen>
|
|
63
|
-
</iframe>
|
|
64
|
-
</div>
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
</section>`,
|
|
68
|
-
id: null,
|
|
69
|
-
title: 'YouTube Video',
|
|
70
|
-
icon: `
|
|
71
|
-
<span class="material-symbols-outlined">
|
|
72
|
-
play_circle
|
|
73
|
-
</span>
|
|
74
|
-
`,
|
|
75
|
-
},
|
|
76
|
-
{
|
|
77
|
-
html_code: `<section><div class="relative py-8"><div class="absolute inset-0 flex items-center" aria-hidden="true"><div class="w-full border-4 border-gray-800 leading-none"></div></div><div class="relative flex justify-start"></div></div></section>`,
|
|
78
|
-
id: null,
|
|
79
|
-
title: 'Break Divider',
|
|
80
|
-
icon: `
|
|
81
|
-
<span class="material-symbols-outlined">
|
|
82
|
-
horizontal_rule
|
|
83
|
-
</span>
|
|
84
|
-
`,
|
|
85
|
-
},
|
|
86
|
-
{
|
|
87
|
-
html_code: `<section>\n<div class=\"w-full md:pt-2 md:pb-2 pt-4 pb-4 lg:px-4 px-2\">\n<div class=\"mx-auto max-w-7xl\">\n<div id=\"linktree\"\nclass=\"flex items-centre justify-start font-medium text-black bg-gray-200\">\n\n<a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://www.google.com\">Link to landing page</a>\n</div>\n</div>\n</div>\n</section>`,
|
|
88
|
-
id: null,
|
|
89
|
-
title: 'Link',
|
|
90
|
-
icon: `
|
|
91
|
-
<span class="material-symbols-outlined">
|
|
92
|
-
link
|
|
93
|
-
</span>
|
|
94
|
-
`,
|
|
95
|
-
},
|
|
96
|
-
]
|
|
97
|
-
|
|
98
|
-
export default componentHelpers
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
interface ComponentData {
|
|
2
|
-
title: string
|
|
3
|
-
html_code: string
|
|
4
|
-
cover_image: string | null
|
|
5
|
-
category: string
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
interface Themes {
|
|
9
|
-
themes: {
|
|
10
|
-
data: ComponentData[]
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
// Generate placeholder image data URL from Single Image SVG
|
|
15
|
-
const getPlaceholderImageDataUrl = (): string => {
|
|
16
|
-
const singleImageSvg = `
|
|
17
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150">
|
|
18
|
-
<defs>
|
|
19
|
-
<style>
|
|
20
|
-
.bg { fill: #384152; }
|
|
21
|
-
.fg { fill: #718096; }
|
|
22
|
-
</style>
|
|
23
|
-
</defs>
|
|
24
|
-
<rect class="bg" width="200" height="150"/>
|
|
25
|
-
<polygon class="fg" points="65 90.01 90 60.01 115 90.01"/>
|
|
26
|
-
<polygon class="fg" points="110 90.01 122.5 75.01 135 90.01"/>
|
|
27
|
-
<circle class="fg" cx="122.5" cy="64.15" r="4.16"/>
|
|
28
|
-
</svg>
|
|
29
|
-
`
|
|
30
|
-
|
|
31
|
-
// Convert SVG to data URL
|
|
32
|
-
const encodedSvg = encodeURIComponent(singleImageSvg.trim())
|
|
33
|
-
return `data:image/svg+xml,${encodedSvg}`
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
const component: Themes[] = [
|
|
37
|
-
{
|
|
38
|
-
themes: {
|
|
39
|
-
data: [
|
|
40
|
-
{
|
|
41
|
-
title: 'Article',
|
|
42
|
-
html_code: `<div id="pagebuilder" class=" style=""><section data-component-title="Header H2"><div class="pbx-relative pbx-py-4"><div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"><div class="pbx-break-words pbx-font-medium pbx-text-3xl lg:pbx-text-6xl"><h2>Inceptos himenaeos</h2></div></div></div></section> <section data-component-title="Text"> <div class="pbx-relative pbx-py-4"> <div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"> <div><p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra.<br><br>Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p></div> </div> </div> </section> <section data-component-title="Header H3" class=""><div class="pbx-relative pbx-py-4"><div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"><div class="pbx-break-words pbx-text-1xl lg:pbx-text-3xl pbx-font-medium"><h3>Fringilla lacus nec metus</h3></div></div></div></section> <section data-component-title="Text" class=""> <div class="pbx-relative pbx-py-4"> <div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"> <div><p>Sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra.</p><ul><li><p><strong>Blorf nizgat quarnip veloop</strong></p></li><li><p><strong>Dramble froop with lartic spindles</strong></p></li><li><p><strong>Quibber on flemt zarglo dynamics</strong></p></li><li><p><strong>Slooped jarnix under flibble zones</strong></p></li><li><p><strong>Plonk-ready trizzit with garm logic</strong></p><p><br></p></li></ul><p>Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p></div> </div> </div> </section> <section data-component-title="Header H3" class=""><div class="pbx-relative pbx-py-4"><div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"><div class="pbx-break-words pbx-text-1xl lg:pbx-text-3xl pbx-font-medium"><h3>Conubia nostra inceptos</h3></div></div></div></section> <section data-component-title="Text"> <div class="pbx-relative pbx-py-4"> <div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"> <div><p>Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. <br><br>Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. <br><br>Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p></div> </div> </div> </section></div>`,
|
|
43
|
-
category: 'Article',
|
|
44
|
-
cover_image: `
|
|
45
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
|
|
46
|
-
<path fill="#4e4e50" d="M32 4H0V0h32v4zM20 12H0V8h20v4zM32 24H0v-4h32v4zM24 32H0v-4h24v4zM32 30a2.001 2.001 0 0 1-4.004 0A2.001 2.001 0 0 1 32 30z"/>
|
|
47
|
-
</svg>
|
|
48
|
-
`,
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
title: 'Blog Post',
|
|
52
|
-
html_code: `<section data-component-title="Single Image"> <div class="md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2"><div class="pbx-mx-auto pbx-max-w-7xl"><div class="pbx-myPrimaryGap pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-1 lg:pbx-grid-cols-1"> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"></div></div></div></div> </section> <section data-component-title="Header H2" ><div class="pbx-relative pbx-py-4"><div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"><div class="pbx-break-words pbx-font-medium pbx-text-3xl lg:pbx-text-6xl"><h2>Inceptos himenaeos</h2></div></div></div></section> <section data-component-title="Text" > <div class="pbx-relative pbx-py-4"> <div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"> <div><p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra.<br><br>Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p></div> </div> </div> </section> <section data-component-title="Header H3" class="" ><div class="pbx-relative pbx-py-4"><div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"><div class="pbx-break-words pbx-text-1xl lg:pbx-text-3xl pbx-font-medium"><h3>Fringilla lacus nec metus</h3></div></div></div></section> <section data-component-title="Text" class="" > <div class="pbx-relative pbx-py-4"> <div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"> <div><p>Sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra.</p><ul><li><p><strong>Blorf nizgat quarnip veloop</strong></p></li><li><p><strong>Dramble froop with lartic spindles</strong></p></li><li><p><strong>Quibber on flemt zarglo dynamics</strong></p></li><li><p><strong>Slooped jarnix under flibble zones</strong></p></li><li><p><strong>Plonk-ready trizzit with garm logic</strong></p><p><br></p></li></ul><p>Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p></div> </div> </div> </section> <section data-component-title="Header H3" class="" ><div class="pbx-relative pbx-py-4"><div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"><div class="pbx-break-words pbx-text-1xl lg:pbx-text-3xl pbx-font-medium"><h3>Conubia nostra inceptos</h3></div></div></div></section> <section data-component-title="Text" > <div class="pbx-relative pbx-py-4"> <div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"> <div><p>Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. <br><br>Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. <br><br>Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p></div> </div> </div> </section> <section data-component-title="Three Square Images"> <div class="md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2"><div class="pbx-mx-auto pbx-max-w-7xl"><div class="pbx-myPrimaryGap pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-3 lg:pbx-grid-cols-3"> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"></div></div> </div></div> </section>`,
|
|
53
|
-
category: 'Article',
|
|
54
|
-
cover_image: `
|
|
55
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="206.893 39.489 110.693 141.8873" width="110.693px" height="141.887px">
|
|
56
|
-
<g transform="matrix(1, 0, 0, 1, 0, 2.842170943040401e-14)">
|
|
57
|
-
<g id="article" style="" transform="matrix(1.62105, 0, 0, 1.62105, -98.141953, -52.42038)">
|
|
58
|
-
<path fill="#4e4e50" d="M 238.331 116.22 L 206.331 116.22 L 206.331 112.22 L 238.331 112.22 L 238.331 116.22 Z M 226.331 124.22 L 206.331 124.22 L 206.331 120.22 L 226.331 120.22 L 226.331 124.22 Z M 238.331 136.22 L 206.331 136.22 L 206.331 132.22 L 238.331 132.22 L 238.331 136.22 Z M 230.331 144.22 L 206.331 144.22 L 206.331 140.22 L 230.331 140.22 L 230.331 144.22 Z M 238.331 142.22 C 238.331 143.762 236.663 144.725 235.328 143.954 C 234.708 143.597 234.327 142.936 234.327 142.22 C 234.327 140.679 235.995 139.716 237.33 140.487 C 237.949 140.844 238.331 141.505 238.331 142.22 Z" style="stroke-width: 1;"/>
|
|
59
|
-
</g>
|
|
60
|
-
</g>
|
|
61
|
-
<g transform="matrix(1, 0, 0, 1, 0, 2.842170943040401e-14)">
|
|
62
|
-
<rect class="bg" width="110.693" height="83.02" style="fill: rgb(56, 65, 82); stroke-width: 1;" x="206.893" y="39.489"/>
|
|
63
|
-
<polygon class="fg" points="242.868 89.308 256.705 72.703 270.543 89.308" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
|
|
64
|
-
<polygon class="fg" points="267.776 89.308 274.694 81.005 281.614 89.308" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
|
|
65
|
-
<circle class="fg" cx="274.694" cy="74.995" r="2.303" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
|
|
66
|
-
</g>
|
|
67
|
-
</svg>
|
|
68
|
-
`,
|
|
69
|
-
},
|
|
70
|
-
{
|
|
71
|
-
title: 'Stats Simple',
|
|
72
|
-
html_code: `<section data-component-title="Header H2" ><div class="pbx-relative pbx-py-4"><div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"><div class="pbx-break-words pbx-font-medium pbx-text-3xl lg:pbx-text-6xl"><h2>Eaque, iste dolor cupiditate blanditiis ratione</h2></div></div></div></section> <section data-component-title="Stats Split with image" > <div class="md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2"><div class="pbx-mx-auto pbx-max-w-7xl"><div class="pbx-myPrimaryGap pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 lg:pbx-grid-cols-2"> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square "src="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div> <div class=""> <p class="pbx-font-semibold">Our track record</p> </div> <div class="pbx-font-medium pbx-text-2xl lg:pbx-text-4xl"><p>Trusted by thousands of creators worldwide</p></div> <div><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p></div> <div class="pbx-mt-16 pbx-grid pbx-max-w-xl pbx-grid-cols-1 pbx-gap-8 sm:pbx-mt-20 sm:pbx-grid-cols-2 xl:pbx-mt-16"> <div class="pbx-flex pbx-flex-col pbx-gap-y-3 pbx-border-l pbx-border-gray-900/10 pbx-pl-6"> <div><p>Creators on the platform</p></div> <div class="pbx-font-medium pbx-text-lg lg:pbx-text-2xl"><p>8,000+</p></div> </div> <div class="pbx-flex pbx-flex-col pbx-gap-y-3 pbx-border-l pbx-border-gray-900/10 pbx-pl-6"> <div> <p class="pbx-text-sm/6 pbx-text-gray-600">Flat platform fee</p> </div> <div class="pbx-font-medium pbx-text-lg lg:pbx-text-2xl"><p>3%</p></div> </div> <div class="pbx-flex pbx-flex-col pbx-gap-y-3 pbx-border-l pbx-border-gray-900/10 pbx-pl-6"> <div> <p class="pbx-text-sm/6 pbx-text-gray-600">Uptime guarantee</p> </div> <div class="pbx-text-lg lg:pbx-text-2xl pbx-font-medium"><p>99.9%</p></div> </div> <div class="pbx-flex pbx-flex-col pbx-gap-y-3 pbx-border-l pbx-border-gray-900/10 pbx-pl-6"> <div> <p class="pbx-text-sm/6 pbx-text-gray-600">Paid out to creators</p> </div> <div class="pbx-text-lg lg:pbx-text-2xl pbx-font-medium"><p>$70M</p></div> </div> </div> </div></div> </div></div> </section> <section data-component-title="Header H3" ><div class="pbx-relative pbx-py-4"><div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"><div class="pbx-break-words pbx-text-1xl lg:pbx-text-3xl pbx-font-medium"><h3>Layouts and visual.</h3></div></div></div></section> <section data-component-title="Text" > <div class="pbx-relative pbx-py-4"> <div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"> <div><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione. Dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione. Cadipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p></div> </div> </div> </section> <section data-component-title="Four Square Images With Text" > <div class="md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2"><div class="pbx-mx-auto pbx-max-w-7xl"><div class="pbx-myPrimaryGap pbx-grid pbx-grid-cols-2 sm:pbx-grid-cols-2 lg:pbx-grid-cols-4"> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> <div class="pbx-break-words pbx-py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> <div class="pbx-break-words pbx-py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> <div class="pbx-break-words pbx-py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"><div class="pbx-break-words pbx-py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> </div> </div> </div> </section>`,
|
|
73
|
-
category: 'Marketing',
|
|
74
|
-
cover_image: `
|
|
75
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
|
|
76
|
-
<path fill="#4e4e50" d="M32 4H0V0h32v4zM20 12H0V8h20v4zM32 24H0v-4h32v4zM24 32H0v-4h24v4zM32 30a2.001 2.001 0 0 1-4.004 0A2.001 2.001 0 0 1 32 30z"/>
|
|
77
|
-
</svg>
|
|
78
|
-
`,
|
|
79
|
-
},
|
|
80
|
-
],
|
|
81
|
-
},
|
|
82
|
-
},
|
|
83
|
-
]
|
|
84
|
-
|
|
85
|
-
export default component
|