cinqcinqdev-seo 0.1.68 → 0.1.70
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/module.json
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<section ref="sectionEl" class="relative overflow-hidden" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
|
|
3
3
|
|
|
4
|
+
<!-- Gradient overlay (all layouts) -->
|
|
5
|
+
<div v-if="showOverlay && !['fullscreen','parallax','video','magazine'].includes(layout)" class="absolute inset-0 pointer-events-none" style="z-index:1" :style="overlayStyle"></div>
|
|
6
|
+
|
|
4
7
|
<!-- CENTERED -->
|
|
5
|
-
<div v-if="layout === 'centered'" class="px-6 md:px-12 pt-20 pb-16 text-center">
|
|
8
|
+
<div v-if="layout === 'centered'" class="relative px-6 md:px-12 pt-20 pb-16 text-center" style="z-index:2">
|
|
6
9
|
<div :class="[containerClass]">
|
|
7
10
|
<span v-if="badge" :class="['inline-flex items-center gap-1.5 text-[10px] font-bold tracking-[0.4em] uppercase px-4 py-1.5 rounded-full border mb-8', ac()]" :style="[{ borderColor: ca(textColor, '30'), color: ca(textColor, '80') }, as_(0)]">
|
|
8
11
|
<span class="w-1.5 h-1.5 rounded-full inline-block" :style="{ backgroundColor: ca(textColor, '60') }"></span>{{ badge }}
|
|
@@ -55,7 +58,7 @@
|
|
|
55
58
|
<div class="absolute inset-0">
|
|
56
59
|
<img v-if="image" :src="image" class="w-full h-full object-cover" />
|
|
57
60
|
<div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor, '08') }"></div>
|
|
58
|
-
<div class="absolute inset-0" :style="
|
|
61
|
+
<div v-if="showOverlay" class="absolute inset-0" :style="overlayStyle"></div>
|
|
59
62
|
</div>
|
|
60
63
|
<div :class="[containerClass, 'relative z-10 w-full px-6 md:px-12 pb-14']">
|
|
61
64
|
<span v-if="badge" :class="['inline-block text-[9px] font-black uppercase tracking-[0.5em] opacity-40 mb-4', ac()]" :style="as_(0)">{{ badge }}</span>
|
|
@@ -89,7 +92,7 @@
|
|
|
89
92
|
<!-- PARALLAX -->
|
|
90
93
|
<div v-else-if="layout === 'parallax'" class="relative min-h-[90vh] flex flex-col justify-end">
|
|
91
94
|
<div class="absolute inset-0" :style="{ backgroundImage: image ? `url(${image})` : undefined, backgroundSize: 'cover', backgroundPosition: 'center', backgroundAttachment: 'fixed', backgroundColor: !image ? ca(textColor, '08') : undefined }"></div>
|
|
92
|
-
<div class="absolute inset-0" :style="
|
|
95
|
+
<div v-if="showOverlay" class="absolute inset-0" :style="overlayStyle"></div>
|
|
93
96
|
<div :class="[containerClass, 'relative z-10 w-full px-6 md:px-12 pb-16']">
|
|
94
97
|
<span v-if="badge" :class="['inline-block text-[9px] font-black uppercase tracking-[0.5em] opacity-40 mb-4', ac()]" :style="as_(0)">{{ badge }}</span>
|
|
95
98
|
<component :is="titleTag" :class="['font-black uppercase tracking-tighter leading-[0.88] mb-6', ac()]" :style="[{ fontSize: 'clamp(3rem,8vw,7rem)' }, as_(badge ? 1 : 0)]">{{ title }}</component>
|
|
@@ -105,7 +108,7 @@
|
|
|
105
108
|
<div class="absolute inset-0 overflow-hidden">
|
|
106
109
|
<video v-if="videoUrl" :src="videoUrl" autoplay muted loop playsinline class="absolute inset-0 w-full h-full object-cover" />
|
|
107
110
|
<div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor, '10') }"></div>
|
|
108
|
-
<div class="absolute inset-0" :style="
|
|
111
|
+
<div v-if="showOverlay" class="absolute inset-0" :style="overlayStyle"></div>
|
|
109
112
|
</div>
|
|
110
113
|
<div :class="[containerClass, 'relative z-10 w-full px-6 md:px-12 pb-14']">
|
|
111
114
|
<span v-if="badge" :class="['inline-block text-[9px] font-black uppercase tracking-[0.5em] opacity-40 mb-4', ac()]" :style="as_(0)">{{ badge }}</span>
|
|
@@ -123,7 +126,8 @@
|
|
|
123
126
|
<div :class="['col-span-12 md:col-span-7 relative overflow-hidden min-h-[360px] md:min-h-0', cardRound, ac()]" :style="as_(0)">
|
|
124
127
|
<img v-if="image" :src="image" class="absolute inset-0 w-full h-full object-cover" />
|
|
125
128
|
<div v-else class="absolute inset-0" :style="{ backgroundColor: ca(textColor, '10') }"></div>
|
|
126
|
-
<div class="absolute inset-0
|
|
129
|
+
<div v-if="showOverlay" class="absolute inset-0" :style="overlayStyle"></div>
|
|
130
|
+
<div class="absolute inset-0 flex flex-col justify-end p-8 md:p-10" style="z-index:1">
|
|
127
131
|
<span v-if="badge" class="text-[9px] font-black uppercase tracking-[0.5em] mb-3" :style="{ opacity: 0.5 }">{{ badge }}</span>
|
|
128
132
|
<component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.88]" :style="{ fontSize: 'clamp(2rem,4vw,3.5rem)' }">{{ title }}</component>
|
|
129
133
|
</div>
|
|
@@ -188,7 +192,10 @@ const props = defineProps({
|
|
|
188
192
|
paddingTop: { type: String, default: "" },
|
|
189
193
|
paddingBottom: { type: String, default: "" },
|
|
190
194
|
marginTop: { type: String, default: "" },
|
|
191
|
-
marginBottom: { type: String, default: "" }
|
|
195
|
+
marginBottom: { type: String, default: "" },
|
|
196
|
+
overlay: { default: null },
|
|
197
|
+
overlayDirection: { type: String, default: "to top" },
|
|
198
|
+
overlayStrength: { type: String, default: "medium" }
|
|
192
199
|
});
|
|
193
200
|
const sectionEl = ref(null);
|
|
194
201
|
const isVisible = ref(false);
|
|
@@ -217,6 +224,21 @@ const as_ = (n) => {
|
|
|
217
224
|
if (!isVisible.value || props.animation === "none" || props.animation === "typewriter" || props.animation === "float") return {};
|
|
218
225
|
return { animationDelay: `${n * 0.1}s`, animationFillMode: "both" };
|
|
219
226
|
};
|
|
227
|
+
const showOverlay = computed(() => {
|
|
228
|
+
if (props.overlay === false) return false;
|
|
229
|
+
if (props.overlay === true) return true;
|
|
230
|
+
return ["fullscreen", "parallax", "video", "magazine"].includes(props.layout);
|
|
231
|
+
});
|
|
232
|
+
const overlayStyle = computed(() => {
|
|
233
|
+
const dir = props.overlayDirection || "to top";
|
|
234
|
+
const c = props.bgColor;
|
|
235
|
+
const stops = {
|
|
236
|
+
light: `linear-gradient(${dir}, ${ca(c, "99")} 0%, ${ca(c, "44")} 40%, transparent 70%)`,
|
|
237
|
+
medium: `linear-gradient(${dir}, ${c} 15%, ${ca(c, "cc")} 40%, ${ca(c, "44")} 65%, transparent 100%)`,
|
|
238
|
+
strong: `linear-gradient(${dir}, ${c} 35%, ${ca(c, "ee")} 55%, ${ca(c, "88")} 75%, transparent 100%)`
|
|
239
|
+
};
|
|
240
|
+
return { background: stops[props.overlayStrength] || stops.medium };
|
|
241
|
+
});
|
|
220
242
|
const cardRound = computed(() => ({ sharp: "rounded-xl", rounded: "rounded-3xl", pill: "rounded-[40px]" })[props.radius] || "rounded-3xl");
|
|
221
243
|
const containerClass = computed(() => ({ narrow: "max-w-3xl mx-auto", normal: "max-w-6xl mx-auto", wide: "max-w-7xl mx-auto", full: "max-w-full" })[props.contentWidth] || "max-w-6xl mx-auto");
|
|
222
244
|
const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
|
|
@@ -103,10 +103,14 @@ export const DEFAULT_SECTIONS = {
|
|
|
103
103
|
paddingTop: "",
|
|
104
104
|
paddingBottom: "",
|
|
105
105
|
marginTop: "",
|
|
106
|
-
marginBottom: ""
|
|
106
|
+
marginBottom: "",
|
|
107
|
+
overlay: null,
|
|
108
|
+
overlayDirection: "to top",
|
|
109
|
+
overlayStrength: "medium"
|
|
107
110
|
},
|
|
108
111
|
groups: [
|
|
109
112
|
{ key: "design", label: "Design" },
|
|
113
|
+
{ key: "overlay", label: "Overlay" },
|
|
110
114
|
{ key: "animation", label: "Animation" }
|
|
111
115
|
],
|
|
112
116
|
fields: {
|
|
@@ -137,6 +141,24 @@ export const DEFAULT_SECTIONS = {
|
|
|
137
141
|
textDirection: { type: "cards", label: "Direction", group: "design", options: directionOptions },
|
|
138
142
|
contentWidth: { type: "cards", label: "Content Width", group: "design", options: contentWidthOptions },
|
|
139
143
|
textSize: { type: "cards", label: "Text Size", group: "design", options: textSizeOptions },
|
|
144
|
+
overlay: { type: "cards", label: "Gradient Overlay", group: "overlay", options: [
|
|
145
|
+
{ value: null, label: "Auto", icon: "\u2B24" },
|
|
146
|
+
{ value: true, label: "On", icon: "\u2713" },
|
|
147
|
+
{ value: false, label: "Off", icon: "\u2715" }
|
|
148
|
+
] },
|
|
149
|
+
overlayDirection: { type: "select", label: "Direction", group: "overlay", options: [
|
|
150
|
+
{ value: "to top", label: "Bottom \u2192 Top" },
|
|
151
|
+
{ value: "to bottom", label: "Top \u2192 Bottom" },
|
|
152
|
+
{ value: "to right", label: "Left \u2192 Right" },
|
|
153
|
+
{ value: "to left", label: "Right \u2192 Left" },
|
|
154
|
+
{ value: "to bottom right", label: "Diagonal \u2198" },
|
|
155
|
+
{ value: "to bottom left", label: "Diagonal \u2199" }
|
|
156
|
+
] },
|
|
157
|
+
overlayStrength: { type: "cards", label: "Strength", group: "overlay", options: [
|
|
158
|
+
{ value: "light", label: "Light", icon: "\u25CB" },
|
|
159
|
+
{ value: "medium", label: "Medium", icon: "\u25D1" },
|
|
160
|
+
{ value: "strong", label: "Strong", icon: "\u25CF" }
|
|
161
|
+
] },
|
|
140
162
|
animation: { type: "cards", label: "Animation", group: "animation", options: animationOptions },
|
|
141
163
|
paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
|
|
142
164
|
paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },
|
|
@@ -107,42 +107,108 @@ const SVG_ICONS = {
|
|
|
107
107
|
const sectionIcon = (key) => SVG_ICONS[key] || SVG_ICONS.settings;
|
|
108
108
|
const selectedGroup = ref(SECTION_GROUPS[0]?.label ?? "Hero");
|
|
109
109
|
const THUMBS = {
|
|
110
|
-
// ──
|
|
111
|
-
|
|
112
|
-
"HeroSection:
|
|
113
|
-
|
|
114
|
-
"HeroSection:
|
|
115
|
-
|
|
116
|
-
"HeroSection:
|
|
117
|
-
|
|
118
|
-
"HeroSection:
|
|
119
|
-
|
|
110
|
+
// ── HeroSection layouts ──
|
|
111
|
+
// centered: badge pill → big title (centered) → subtitle → CTA pill
|
|
112
|
+
"HeroSection:centered": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="108" y="18" width="64" height="11" rx="5.5" fill="none" stroke="#e5e7eb" stroke-width="1.5"/><rect x="116" y="23" width="48" height="3" rx="1.5" fill="#9ca3af"/><rect x="44" y="42" width="192" height="15" rx="3" fill="#111827"/><rect x="64" y="61" width="152" height="12" rx="3" fill="#111827" opacity=".65"/><rect x="76" y="86" width="128" height="4" rx="2" fill="#c0c4cc"/><rect x="86" y="94" width="108" height="4" rx="2" fill="#c0c4cc"/><rect x="96" y="112" width="88" height="20" rx="10" fill="#3d35ff"/><rect x="108" y="120" width="64" height="4" rx="2" fill="#fff"/></svg>`,
|
|
113
|
+
// split: text left | image right (50/50, image 4/3)
|
|
114
|
+
"HeroSection:split": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="40" width="8" height="8" rx="4" fill="#9ca3af" opacity=".5"/><rect x="14" y="58" width="120" height="14" rx="3" fill="#111827"/><rect x="14" y="76" width="108" height="11" rx="3" fill="#111827" opacity=".6"/><rect x="14" y="97" width="96" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="105" width="80" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="121" width="64" height="16" rx="8" fill="#3d35ff"/><rect x="148" y="16" width="120" height="126" rx="12" fill="#e5e7eb"/></svg>`,
|
|
115
|
+
// bento: 7/12 left card (badge top, title+CTA bottom) | 5/12 right image card
|
|
116
|
+
"HeroSection:bento": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#f3f4f6"/><rect x="6" y="6" width="162" height="146" rx="12" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="18" y="16" width="48" height="7" rx="3" fill="#c0c4cc" opacity=".6"/><rect x="18" y="95" width="134" height="16" rx="3" fill="#111827"/><rect x="18" y="115" width="110" height="7" rx="2" fill="#c0c4cc"/><rect x="18" y="132" width="64" height="14" rx="7" fill="#3d35ff"/><rect x="174" y="6" width="100" height="146" rx="12" fill="#d1d5db"/></svg>`,
|
|
117
|
+
// fullscreen: image fills, gradient from top to bottom, big title left, subtitle+outlined CTA at bottom-left
|
|
118
|
+
"HeroSection:fullscreen": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="gfs" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#374151" stop-opacity=".2"/><stop offset="55%" stop-color="#111827" stop-opacity=".75"/><stop offset="100%" stop-color="#111827" stop-opacity="1"/></linearGradient></defs><rect width="280" height="158" fill="#4b5563"/><rect width="280" height="158" fill="url(#gfs)"/><rect x="14" y="80" width="8" height="6" rx="2" fill="#fff" opacity=".4"/><rect x="14" y="98" width="200" height="18" rx="3" fill="#fff" opacity=".92"/><rect x="14" y="122" width="90" height="5" rx="2" fill="#fff" opacity=".5"/><rect x="180" y="115" width="80" height="18" rx="9" fill="none" stroke="#fff" stroke-width="1.5"/></svg>`,
|
|
119
|
+
// minimal: border-b row (badge — line — text), HUGE title, image below, border-t row (subtitle left | CTA link right)
|
|
120
|
+
"HeroSection:minimal": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="18" width="248" height="1" fill="#e5e7eb"/><rect x="14" y="24" width="40" height="5" rx="2" fill="#9ca3af" opacity=".5"/><rect x="60" y="24" width="140" height="1" fill="#f3f4f6"/><rect x="234" y="24" width="28" height="5" rx="2" fill="#9ca3af" opacity=".35"/><rect x="14" y="32" width="248" height="1" fill="#e5e7eb"/><rect x="14" y="44" width="252" height="32" rx="2" fill="#111827"/><rect x="14" y="86" width="252" height="42" rx="4" fill="#e5e7eb"/><rect x="14" y="136" width="248" height="1" fill="#e5e7eb"/><rect x="14" y="141" width="80" height="4" rx="2" fill="#9ca3af" opacity=".5"/><rect x="228" y="140" width="36" height="6" rx="2" fill="#111827" opacity=".6"/></svg>`,
|
|
121
|
+
// editorial: line+badge → HUGE title + portrait photo → border subtitle+CTA
|
|
122
|
+
"HeroSection:editorial": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="18" width="20" height="2" fill="#c0c4cc"/><rect x="38" y="16" width="50" height="6" rx="2" fill="#9ca3af" opacity=".5"/><rect x="14" y="36" width="186" height="22" rx="2" fill="#111827"/><rect x="14" y="62" width="200" height="18" rx="2" fill="#111827" opacity=".65"/><rect x="218" y="30" width="52" height="68" rx="6" fill="#d1d5db"/><rect x="14" y="98" width="248" height="1" fill="#e5e7eb"/><rect x="14" y="106" width="100" height="4" rx="2" fill="#9ca3af"/><rect x="14" y="114" width="80" height="4" rx="2" fill="#9ca3af" opacity=".7"/><rect x="192" y="102" width="70" height="18" rx="9" fill="#3d35ff"/></svg>`,
|
|
123
|
+
// parallax: dark+image bg with background-attachment:fixed suggestion, gradient, content bottom-left
|
|
124
|
+
"HeroSection:parallax": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="gpar" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#374151" stop-opacity=".15"/><stop offset="50%" stop-color="#111827" stop-opacity=".65"/><stop offset="100%" stop-color="#111827" stop-opacity="1"/></linearGradient></defs><rect width="280" height="158" fill="#4b5563"/><line x1="0" y1="0" x2="280" y2="158" stroke="#6b7280" stroke-width="8" opacity=".08"/><line x1="0" y1="40" x2="240" y2="158" stroke="#6b7280" stroke-width="8" opacity=".06"/><line x1="40" y1="0" x2="280" y2="120" stroke="#6b7280" stroke-width="8" opacity=".06"/><rect width="280" height="158" fill="url(#gpar)"/><rect x="14" y="85" width="8" height="5" rx="2" fill="#fff" opacity=".4"/><rect x="14" y="100" width="180" height="16" rx="3" fill="#fff" opacity=".9"/><rect x="14" y="122" width="80" height="5" rx="2" fill="#fff" opacity=".5"/><rect x="160" y="116" width="80" height="16" rx="8" fill="none" stroke="#fff" stroke-width="1.5"/></svg>`,
|
|
125
|
+
// video: dark bg, play button top-right, gradient, content bottom-left
|
|
126
|
+
"HeroSection:video": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="gvid" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#111827" stop-opacity=".1"/><stop offset="45%" stop-color="#111827" stop-opacity=".65"/><stop offset="100%" stop-color="#111827" stop-opacity="1"/></linearGradient></defs><rect width="280" height="158" fill="#1f2937"/><rect width="280" height="158" fill="url(#gvid)"/><circle cx="140" cy="52" r="18" fill="none" stroke="#fff" stroke-width="1.5" opacity=".3"/><polygon points="133,44 133,60 153,52" fill="#fff" opacity=".3"/><rect x="14" y="100" width="180" height="16" rx="3" fill="#fff" opacity=".9"/><rect x="14" y="122" width="80" height="5" rx="2" fill="#fff" opacity=".5"/><rect x="14" y="132" width="64" height="16" rx="8" fill="#3d35ff"/></svg>`,
|
|
127
|
+
// magazine: left 7/12 = image with gradient+title overlay | right 5/12 = light card text+CTA
|
|
128
|
+
"HeroSection:magazine": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="gmag" x1="0" y1="0" x2="0" y2="1"><stop offset="30%" stop-color="transparent"/><stop offset="100%" stop-color="#111827" stop-opacity=".9"/></linearGradient></defs><rect width="280" height="158" fill="#f3f4f6"/><rect x="6" y="6" width="162" height="146" rx="10" fill="#9ca3af"/><rect x="6" y="6" width="162" height="146" rx="10" fill="url(#gmag)"/><rect x="16" y="108" width="140" height="14" rx="3" fill="#fff"/><rect x="16" y="126" width="100" height="6" rx="2" fill="#fff" opacity=".6"/><rect x="174" y="6" width="100" height="146" rx="10" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="184" y="22" width="80" height="6" rx="2" fill="#c0c4cc"/><rect x="184" y="34" width="70" height="5" rx="2" fill="#c0c4cc" opacity=".6"/><rect x="184" y="128" width="70" height="16" rx="8" fill="#3d35ff"/></svg>`,
|
|
120
129
|
// ── Other Hero types ──
|
|
121
|
-
"HeroSlider": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><
|
|
122
|
-
|
|
123
|
-
"
|
|
124
|
-
//
|
|
125
|
-
"
|
|
126
|
-
"
|
|
127
|
-
"
|
|
128
|
-
//
|
|
129
|
-
|
|
130
|
-
"
|
|
131
|
-
//
|
|
132
|
-
"
|
|
133
|
-
|
|
134
|
-
"
|
|
135
|
-
|
|
136
|
-
"
|
|
137
|
-
"
|
|
138
|
-
"
|
|
139
|
-
//
|
|
140
|
-
"
|
|
141
|
-
"
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
"
|
|
145
|
-
|
|
130
|
+
"HeroSlider": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="gsl" x1="0" y1="1" x2="0" y2="0"><stop offset="0%" stop-color="#111827"/><stop offset="60%" stop-color="#111827" stop-opacity=".7"/><stop offset="100%" stop-color="#4b5563" stop-opacity=".3"/></linearGradient></defs><rect width="280" height="158" fill="#374151"/><rect width="280" height="158" fill="url(#gsl)"/><rect x="14" y="82" width="170" height="18" rx="3" fill="#fff" opacity=".92"/><rect x="14" y="106" width="130" height="7" rx="2" fill="#fff" opacity=".45"/><rect x="14" y="120" width="60" height="16" rx="8" fill="#3d35ff"/><circle cx="100" cy="150" r="5" fill="#fff"/><circle cx="114" cy="150" r="3.5" fill="#fff" opacity=".35"/><circle cx="126" cy="150" r="3.5" fill="#fff" opacity=".35"/><rect x="6" y="63" width="18" height="18" rx="9" fill="none" stroke="#fff" stroke-width="1.5" opacity=".4"/><rect x="256" y="63" width="18" height="18" rx="9" fill="none" stroke="#fff" stroke-width="1.5" opacity=".4"/></svg>`,
|
|
131
|
+
// fan: centered text → 3 images at -6°/0°/+6° rotations
|
|
132
|
+
"HeroFan": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#f8f9fa"/><rect x="80" y="12" width="120" height="13" rx="3" fill="#111827"/><rect x="90" y="29" width="100" height="5" rx="2" fill="#c0c4cc"/><rect x="95" y="38" width="90" height="5" rx="2" fill="#c0c4cc"/><rect x="98" y="52" width="36" height="14" rx="7" fill="#3d35ff"/><rect x="140" y="52" width="36" height="14" rx="7" fill="none" stroke="#3d35ff" stroke-width="1.5"/><g transform="translate(74,118) rotate(-6)"><rect width="52" height="66" rx="6" fill="#d1d5db"/></g><g transform="translate(114,108)"><rect width="56" height="70" rx="6" fill="#9ca3af"/></g><g transform="translate(174,118) rotate(6) translate(-52,0)"><rect width="52" height="66" rx="6" fill="#d1d5db"/></g></svg>`,
|
|
133
|
+
// BlogHero layouts
|
|
134
|
+
"BlogHero:centered": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="96" y="14" width="48" height="9" rx="4.5" fill="#e0e7ff"/><rect x="104" y="18" width="32" height="3" rx="1.5" fill="#3d35ff" opacity=".7"/><rect x="40" y="32" width="200" height="14" rx="3" fill="#111827"/><rect x="54" y="50" width="172" height="9" rx="2" fill="#111827" opacity=".55"/><rect x="68" y="70" width="30" height="30" rx="15" fill="#e5e7eb"/><rect x="104" y="78" width="60" height="5" rx="2" fill="#c0c4cc"/><rect x="104" y="87" width="40" height="4" rx="2" fill="#c0c4cc" opacity=".6"/><rect x="16" y="112" width="248" height="42" rx="6" fill="#e5e7eb"/></svg>`,
|
|
135
|
+
"BlogHero:cover": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="gcov" x1="0" y1="0" x2="0" y2="1"><stop offset="25%" stop-color="transparent"/><stop offset="100%" stop-color="#111827" stop-opacity=".95"/></linearGradient></defs><rect width="280" height="158" fill="#6b7280"/><rect width="280" height="158" fill="url(#gcov)"/><rect x="44" y="82" width="48" height="8" rx="4" fill="#fff" opacity=".4"/><rect x="44" y="96" width="200" height="18" rx="3" fill="#fff" opacity=".95"/><rect x="44" y="120" width="140" height="6" rx="2" fill="#fff" opacity=".55"/><rect x="44" y="132" width="28" height="28" rx="14" fill="#e5e7eb" opacity=".4"/><rect x="78" y="139" width="60" height="5" rx="2" fill="#fff" opacity=".6"/></svg>`,
|
|
136
|
+
"BlogHero:split": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="24" width="40" height="8" rx="4" fill="#e0e7ff"/><rect x="18" y="27" width="32" height="3" rx="1.5" fill="#3d35ff" opacity=".7"/><rect x="14" y="44" width="120" height="15" rx="3" fill="#111827"/><rect x="14" y="64" width="110" height="10" rx="2" fill="#111827" opacity=".55"/><rect x="14" y="84" width="24" height="24" rx="12" fill="#e5e7eb"/><rect x="44" y="90" width="55" height="5" rx="2" fill="#c0c4cc"/><rect x="44" y="99" width="40" height="4" rx="2" fill="#c0c4cc" opacity=".6"/><rect x="148" y="14" width="120" height="130" rx="10" fill="#e5e7eb"/></svg>`,
|
|
137
|
+
// TextVisual layouts
|
|
138
|
+
// split: left text | right image 4/3
|
|
139
|
+
"TextVisual:split": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="24" width="36" height="9" rx="4.5" fill="none" stroke="#e5e7eb" stroke-width="1.5"/><rect x="14" y="46" width="118" height="14" rx="3" fill="#111827"/><rect x="14" y="65" width="108" height="9" rx="2" fill="#111827" opacity=".55"/><rect x="14" y="84" width="100" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="92" width="88" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="108" width="60" height="16" rx="8" fill="#3d35ff"/><rect x="150" y="20" width="116" height="118" rx="14" fill="#e5e7eb"/></svg>`,
|
|
140
|
+
// stacked: image full width on top, text below
|
|
141
|
+
"TextVisual:stacked": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="12" width="252" height="74" rx="12" fill="#e5e7eb"/><rect x="14" y="96" width="36" height="9" rx="4.5" fill="none" stroke="#e5e7eb" stroke-width="1.5"/><rect x="14" y="112" width="150" height="13" rx="3" fill="#111827"/><rect x="14" y="130" width="120" height="5" rx="2" fill="#c0c4cc"/><rect x="14" y="140" width="54" height="14" rx="7" fill="#3d35ff"/></svg>`,
|
|
142
|
+
// wide: left 2/3 image | right 1/3 text
|
|
143
|
+
"TextVisual:wide": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="14" width="168" height="130" rx="12" fill="#e5e7eb"/><rect x="192" y="28" width="76" height="13" rx="3" fill="#111827"/><rect x="192" y="46" width="68" height="8" rx="2" fill="#111827" opacity=".55"/><rect x="192" y="64" width="72" height="4" rx="2" fill="#c0c4cc"/><rect x="192" y="72" width="60" height="4" rx="2" fill="#c0c4cc"/><rect x="192" y="80" width="64" height="4" rx="2" fill="#c0c4cc"/><rect x="192" y="98" width="56" height="14" rx="7" fill="#3d35ff"/></svg>`,
|
|
144
|
+
// RichText layouts (width variants)
|
|
145
|
+
"RichText:article": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="56" y="20" width="168" height="12" rx="3" fill="#111827"/><rect x="56" y="40" width="168" height="4" rx="2" fill="#c0c4cc"/><rect x="56" y="48" width="155" height="4" rx="2" fill="#c0c4cc"/><rect x="56" y="56" width="162" height="4" rx="2" fill="#c0c4cc"/><rect x="56" y="70" width="168" height="4" rx="2" fill="#c0c4cc"/><rect x="56" y="78" width="140" height="4" rx="2" fill="#c0c4cc"/><rect x="56" y="86" width="155" height="4" rx="2" fill="#c0c4cc"/><rect x="56" y="100" width="168" height="4" rx="2" fill="#c0c4cc"/><rect x="56" y="108" width="130" height="4" rx="2" fill="#c0c4cc"/></svg>`,
|
|
146
|
+
"RichText:wide": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="28" y="20" width="224" height="12" rx="3" fill="#111827"/><rect x="28" y="40" width="224" height="4" rx="2" fill="#c0c4cc"/><rect x="28" y="48" width="205" height="4" rx="2" fill="#c0c4cc"/><rect x="28" y="56" width="216" height="4" rx="2" fill="#c0c4cc"/><rect x="28" y="70" width="224" height="4" rx="2" fill="#c0c4cc"/><rect x="28" y="78" width="190" height="4" rx="2" fill="#c0c4cc"/><rect x="28" y="86" width="210" height="4" rx="2" fill="#c0c4cc"/></svg>`,
|
|
147
|
+
"RichText:full": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="20" width="252" height="12" rx="3" fill="#111827"/><rect x="14" y="40" width="252" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="48" width="232" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="56" width="244" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="70" width="252" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="78" width="218" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="86" width="238" height="4" rx="2" fill="#c0c4cc"/></svg>`,
|
|
148
|
+
// Quote layouts
|
|
149
|
+
"Quote:centered": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#f8f9fa"/><rect x="50" y="38" width="180" height="8" rx="2" fill="#111827" opacity=".75"/><rect x="60" y="50" width="160" height="7" rx="2" fill="#111827" opacity=".55"/><rect x="70" y="62" width="140" height="7" rx="2" fill="#111827" opacity=".45"/><rect x="96" y="82" width="28" height="28" rx="14" fill="#e5e7eb"/><rect x="130" y="88" width="60" height="6" rx="2" fill="#111827" opacity=".6"/><rect x="130" y="98" width="44" height="4" rx="2" fill="#9ca3af"/></svg>`,
|
|
150
|
+
"Quote:left": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="22" width="4" height="100" rx="2" fill="#3d35ff"/><rect x="26" y="36" width="200" height="8" rx="2" fill="#111827" opacity=".75"/><rect x="26" y="48" width="190" height="7" rx="2" fill="#111827" opacity=".55"/><rect x="26" y="60" width="170" height="7" rx="2" fill="#111827" opacity=".45"/><rect x="26" y="82" width="28" height="28" rx="14" fill="#e5e7eb"/><rect x="60" y="88" width="60" height="6" rx="2" fill="#111827" opacity=".6"/><rect x="60" y="98" width="44" height="4" rx="2" fill="#9ca3af"/></svg>`,
|
|
151
|
+
"Quote:large": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#f8f9fa"/><rect x="14" y="14" width="252" height="90" rx="10" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="28" y="34" width="220" height="10" rx="3" fill="#111827" opacity=".75"/><rect x="28" y="49" width="200" height="9" rx="2" fill="#111827" opacity=".55"/><rect x="28" y="63" width="180" height="9" rx="2" fill="#111827" opacity=".45"/><rect x="28" y="84" width="60" height="5" rx="2" fill="#3d35ff" opacity=".7"/><rect x="28" y="118" width="28" height="28" rx="14" fill="#e5e7eb"/><rect x="64" y="124" width="80" height="6" rx="2" fill="#111827" opacity=".6"/><rect x="64" y="134" width="56" height="4" rx="2" fill="#9ca3af"/></svg>`,
|
|
152
|
+
// Features: 3-col icon+title+body cards
|
|
153
|
+
"Features": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="70" y="14" width="140" height="11" rx="3" fill="#111827"/><rect x="80" y="29" width="120" height="5" rx="2" fill="#c0c4cc"/><rect x="14" y="52" width="76" height="86" rx="10" fill="#eef2ff"/><rect x="24" y="64" width="24" height="24" rx="12" fill="#3d35ff" opacity=".2"/><rect x="24" y="96" width="56" height="7" rx="2" fill="#111827"/><rect x="24" y="107" width="48" height="4" rx="2" fill="#c0c4cc"/><rect x="102" y="52" width="76" height="86" rx="10" fill="#eef2ff"/><rect x="112" y="64" width="24" height="24" rx="12" fill="#3d35ff" opacity=".2"/><rect x="112" y="96" width="56" height="7" rx="2" fill="#111827"/><rect x="112" y="107" width="48" height="4" rx="2" fill="#c0c4cc"/><rect x="190" y="52" width="76" height="86" rx="10" fill="#eef2ff"/><rect x="200" y="64" width="24" height="24" rx="12" fill="#3d35ff" opacity=".2"/><rect x="200" y="96" width="56" height="7" rx="2" fill="#111827"/><rect x="200" y="107" width="48" height="4" rx="2" fill="#c0c4cc"/></svg>`,
|
|
154
|
+
// ServiceGrid layouts
|
|
155
|
+
// grid: 3-col border cards, number watermark, title, body, link
|
|
156
|
+
"ServiceGrid:grid": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#f8f9fa"/><rect x="14" y="14" width="120" height="11" rx="3" fill="#111827"/><rect x="14" y="30" width="90" height="5" rx="2" fill="#c0c4cc"/><rect x="14" y="52" width="78" height="92" rx="10" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="24" y="64" width="52" height="8" rx="2" fill="#111827"/><rect x="24" y="76" width="56" height="4" rx="2" fill="#c0c4cc"/><rect x="24" y="84" width="48" height="4" rx="2" fill="#c0c4cc"/><rect x="24" y="130" width="40" height="4" rx="2" fill="#3d35ff" opacity=".7"/><rect x="102" y="52" width="78" height="92" rx="10" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="112" y="64" width="52" height="8" rx="2" fill="#111827"/><rect x="112" y="76" width="56" height="4" rx="2" fill="#c0c4cc"/><rect x="112" y="84" width="48" height="4" rx="2" fill="#c0c4cc"/><rect x="112" y="130" width="40" height="4" rx="2" fill="#3d35ff" opacity=".7"/><rect x="190" y="52" width="78" height="92" rx="10" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="200" y="64" width="52" height="8" rx="2" fill="#111827"/><rect x="200" y="76" width="56" height="4" rx="2" fill="#c0c4cc"/><rect x="200" y="84" width="48" height="4" rx="2" fill="#c0c4cc"/><rect x="200" y="130" width="40" height="4" rx="2" fill="#3d35ff" opacity=".7"/></svg>`,
|
|
157
|
+
// list: numbered list, full-width items stacked
|
|
158
|
+
"ServiceGrid:list": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="14" width="120" height="11" rx="3" fill="#111827"/><rect x="14" y="45" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="56" width="12" height="9" rx="2" fill="#9ca3af" opacity=".4"/><rect x="34" y="54" width="80" height="9" rx="2" fill="#111827"/><rect x="34" y="67" width="120" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="84" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="95" width="12" height="9" rx="2" fill="#9ca3af" opacity=".4"/><rect x="34" y="93" width="80" height="9" rx="2" fill="#111827"/><rect x="34" y="106" width="120" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="122" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="133" width="12" height="9" rx="2" fill="#9ca3af" opacity=".4"/><rect x="34" y="131" width="80" height="9" rx="2" fill="#111827"/><rect x="34" y="144" width="100" height="4" rx="2" fill="#c0c4cc"/></svg>`,
|
|
159
|
+
// cards: 2-col flex cards (icon-box left + text right)
|
|
160
|
+
"ServiceGrid:cards": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#f8f9fa"/><rect x="14" y="14" width="120" height="11" rx="3" fill="#111827"/><rect x="14" y="46" width="124" height="46" rx="8" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="22" y="56" width="26" height="26" rx="8" fill="#e5e7eb"/><rect x="56" y="58" width="70" height="7" rx="2" fill="#111827"/><rect x="56" y="69" width="60" height="4" rx="2" fill="#c0c4cc"/><rect x="142" y="46" width="124" height="46" rx="8" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="150" y="56" width="26" height="26" rx="8" fill="#e5e7eb"/><rect x="184" y="58" width="70" height="7" rx="2" fill="#111827"/><rect x="184" y="69" width="60" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="102" width="124" height="46" rx="8" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="22" y="112" width="26" height="26" rx="8" fill="#e5e7eb"/><rect x="56" y="114" width="70" height="7" rx="2" fill="#111827"/><rect x="56" y="125" width="60" height="4" rx="2" fill="#c0c4cc"/><rect x="142" y="102" width="124" height="46" rx="8" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="150" y="112" width="26" height="26" rx="8" fill="#e5e7eb"/><rect x="184" y="114" width="70" height="7" rx="2" fill="#111827"/><rect x="184" y="125" width="60" height="4" rx="2" fill="#c0c4cc"/></svg>`,
|
|
161
|
+
// minimal: title left | price right, divided rows
|
|
162
|
+
"ServiceGrid:minimal": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="14" width="120" height="11" rx="3" fill="#111827"/><rect x="14" y="40" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="50" width="110" height="9" rx="2" fill="#111827"/><rect x="14" y="63" width="140" height="4" rx="2" fill="#c0c4cc"/><rect x="216" y="49" width="50" height="11" rx="2" fill="#111827" opacity=".7"/><rect x="14" y="82" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="92" width="110" height="9" rx="2" fill="#111827"/><rect x="14" y="105" width="120" height="4" rx="2" fill="#c0c4cc"/><rect x="216" y="91" width="50" height="11" rx="2" fill="#111827" opacity=".7"/><rect x="14" y="124" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="134" width="110" height="9" rx="2" fill="#111827"/><rect x="216" y="133" width="50" height="11" rx="2" fill="#111827" opacity=".7"/></svg>`,
|
|
163
|
+
// Process layouts
|
|
164
|
+
// steps: vertical line left, numbered circles + text
|
|
165
|
+
"Process:steps": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="14" width="140" height="11" rx="3" fill="#111827"/><rect x="35" y="44" width="1.5" height="108" rx="1" fill="#e5e7eb"/><circle cx="36" cy="56" r="11" fill="#3d35ff"/><rect cx="36" cy="56" x="44" y="50" width="80" height="8" rx="2" fill="#111827"/><rect x="44" y="62" width="120" height="4" rx="2" fill="#c0c4cc"/><rect x="44" y="70" width="100" height="4" rx="2" fill="#c0c4cc"/><circle cx="36" cy="110" r="11" fill="#e5e7eb"/><rect x="44" y="104" width="80" height="8" rx="2" fill="#111827" opacity=".6"/><rect x="44" y="116" width="100" height="4" rx="2" fill="#c0c4cc"/></svg>`,
|
|
166
|
+
// horizontal: circles in a row connected by lines
|
|
167
|
+
"Process:horizontal": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#f8f9fa"/><rect x="50" y="14" width="180" height="11" rx="3" fill="#111827"/><line x1="58" y1="72" x2="116" y2="72" stroke="#e5e7eb" stroke-width="1.5"/><line x1="164" y1="72" x2="222" y2="72" stroke="#e5e7eb" stroke-width="1.5"/><circle cx="46" cy="72" r="16" fill="#3d35ff"/><circle cx="140" cy="72" r="16" fill="#3d35ff" opacity=".5"/><circle cx="234" cy="72" r="16" fill="#e5e7eb"/><rect x="20" y="98" width="52" height="7" rx="2" fill="#111827"/><rect x="20" y="109" width="52" height="4" rx="2" fill="#c0c4cc"/><rect x="114" y="98" width="52" height="7" rx="2" fill="#111827"/><rect x="114" y="109" width="52" height="4" rx="2" fill="#c0c4cc"/><rect x="208" y="98" width="52" height="7" rx="2" fill="#111827" opacity=".5"/><rect x="208" y="109" width="52" height="4" rx="2" fill="#c0c4cc" opacity=".5"/></svg>`,
|
|
168
|
+
// cards: 3-col cards with number circle top
|
|
169
|
+
"Process:cards": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#f8f9fa"/><rect x="60" y="14" width="160" height="10" rx="3" fill="#111827"/><rect x="14" y="44" width="78" height="100" rx="10" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><circle cx="34" cy="64" r="12" fill="#3d35ff"/><rect x="24" y="86" width="58" height="8" rx="2" fill="#111827"/><rect x="24" y="98" width="54" height="4" rx="2" fill="#c0c4cc"/><rect x="24" y="106" width="50" height="4" rx="2" fill="#c0c4cc"/><rect x="101" y="44" width="78" height="100" rx="10" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><circle cx="121" cy="64" r="12" fill="#3d35ff" opacity=".5"/><rect x="111" y="86" width="58" height="8" rx="2" fill="#111827"/><rect x="111" y="98" width="54" height="4" rx="2" fill="#c0c4cc"/><rect x="111" y="106" width="50" height="4" rx="2" fill="#c0c4cc"/><rect x="188" y="44" width="78" height="100" rx="10" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><circle cx="208" cy="64" r="12" fill="#e5e7eb"/><rect x="198" y="86" width="58" height="8" rx="2" fill="#111827" opacity=".4"/><rect x="198" y="98" width="54" height="4" rx="2" fill="#c0c4cc" opacity=".4"/></svg>`,
|
|
170
|
+
// timeline: center vertical line, steps alternate left/right
|
|
171
|
+
"Process:timeline": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="60" y="14" width="160" height="10" rx="3" fill="#111827"/><rect x="139" y="38" width="2" height="108" rx="1" fill="#e5e7eb"/><rect x="20" y="46" width="100" height="24" rx="6" fill="#f3f4f6"/><rect x="28" y="52" width="76" height="7" rx="2" fill="#111827"/><rect x="28" y="63" width="60" height="4" rx="2" fill="#c0c4cc"/><circle cx="140" cy="60" r="9" fill="#3d35ff"/><rect x="160" y="88" width="100" height="24" rx="6" fill="#f3f4f6"/><rect x="168" y="94" width="76" height="7" rx="2" fill="#111827"/><rect x="168" y="105" width="60" height="4" rx="2" fill="#c0c4cc"/><circle cx="140" cy="102" r="9" fill="#3d35ff" opacity=".5"/><rect x="20" y="126" width="100" height="24" rx="6" fill="#f3f4f6"/><rect x="28" y="132" width="76" height="7" rx="2" fill="#111827" opacity=".5"/><circle cx="140" cy="140" r="9" fill="#e5e7eb"/></svg>`,
|
|
172
|
+
// minimal: numbered list, no circles, just number + text
|
|
173
|
+
"Process:minimal": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="14" width="140" height="11" rx="3" fill="#111827"/><rect x="14" y="44" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="54" width="14" height="9" rx="2" fill="#9ca3af" opacity=".3"/><rect x="36" y="52" width="90" height="9" rx="2" fill="#111827"/><rect x="36" y="65" width="140" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="84" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="94" width="14" height="9" rx="2" fill="#9ca3af" opacity=".3"/><rect x="36" y="92" width="90" height="9" rx="2" fill="#111827"/><rect x="36" y="105" width="120" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="124" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="134" width="14" height="9" rx="2" fill="#9ca3af" opacity=".3"/><rect x="36" y="132" width="90" height="9" rx="2" fill="#111827" opacity=".5"/></svg>`,
|
|
174
|
+
// Testimonials layouts
|
|
175
|
+
// grid: 3-col cards with quote, avatar+name
|
|
176
|
+
"Testimonials:grid": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#f8f9fa"/><rect x="60" y="14" width="160" height="10" rx="3" fill="#111827"/><rect x="14" y="42" width="78" height="102" rx="10" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="22" y="52" width="62" height="5" rx="2" fill="#c0c4cc"/><rect x="22" y="61" width="58" height="5" rx="2" fill="#c0c4cc"/><rect x="22" y="70" width="50" height="5" rx="2" fill="#c0c4cc"/><line x1="22" y1="100" x2="82" y2="100" stroke="#e5e7eb" stroke-width="1"/><circle cx="30" cy="116" r="8" fill="#e5e7eb"/><rect x="44" y="112" width="40" height="5" rx="2" fill="#111827"/><rect x="44" y="121" width="28" height="4" rx="2" fill="#c0c4cc"/><rect x="101" y="42" width="78" height="102" rx="10" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="109" y="52" width="62" height="5" rx="2" fill="#c0c4cc"/><rect x="109" y="61" width="58" height="5" rx="2" fill="#c0c4cc"/><rect x="109" y="70" width="50" height="5" rx="2" fill="#c0c4cc"/><line x1="109" y1="100" x2="169" y2="100" stroke="#e5e7eb" stroke-width="1"/><circle cx="117" cy="116" r="8" fill="#e5e7eb"/><rect x="131" y="112" width="40" height="5" rx="2" fill="#111827"/><rect x="131" y="121" width="28" height="4" rx="2" fill="#c0c4cc"/><rect x="188" y="42" width="78" height="102" rx="10" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="196" y="52" width="62" height="5" rx="2" fill="#c0c4cc"/><rect x="196" y="61" width="58" height="5" rx="2" fill="#c0c4cc"/><rect x="196" y="70" width="50" height="5" rx="2" fill="#c0c4cc"/><line x1="196" y1="100" x2="256" y2="100" stroke="#e5e7eb" stroke-width="1"/><circle cx="204" cy="116" r="8" fill="#e5e7eb"/><rect x="218" y="112" width="40" height="5" rx="2" fill="#111827"/><rect x="218" y="121" width="28" height="4" rx="2" fill="#c0c4cc"/></svg>`,
|
|
177
|
+
// featured: 1 large card on top + 2 smaller cards below
|
|
178
|
+
"Testimonials:featured": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#f8f9fa"/><rect x="14" y="14" width="252" height="78" rx="10" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="24" y="28" width="220" height="10" rx="2" fill="#111827" opacity=".8"/><rect x="24" y="42" width="200" height="8" rx="2" fill="#c0c4cc"/><rect x="24" y="54" width="180" height="8" rx="2" fill="#c0c4cc" opacity=".6"/><circle cx="34" cy="78" r="9" fill="#e5e7eb"/><rect x="50" y="73" width="70" height="6" rx="2" fill="#111827"/><rect x="50" y="83" width="50" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="104" width="122" height="48" rx="8" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="24" y="114" width="96" height="5" rx="2" fill="#c0c4cc"/><rect x="24" y="123" width="86" height="5" rx="2" fill="#c0c4cc"/><circle cx="30" cy="140" r="7" fill="#e5e7eb"/><rect x="44" y="138" width="50" height="5" rx="2" fill="#111827"/><rect x="144" y="104" width="122" height="48" rx="8" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="154" y="114" width="96" height="5" rx="2" fill="#c0c4cc"/><rect x="154" y="123" width="86" height="5" rx="2" fill="#c0c4cc"/><circle cx="160" cy="140" r="7" fill="#e5e7eb"/><rect x="174" y="138" width="50" height="5" rx="2" fill="#111827"/></svg>`,
|
|
179
|
+
// wall: masonry columns
|
|
180
|
+
"Testimonials:wall": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#f8f9fa"/><rect x="14" y="12" width="78" height="62" rx="8" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="22" y="22" width="62" height="4" rx="2" fill="#c0c4cc"/><rect x="22" y="30" width="56" height="4" rx="2" fill="#c0c4cc"/><rect x="22" y="38" width="58" height="4" rx="2" fill="#c0c4cc"/><circle cx="22" cy="60" r="6" fill="#e5e7eb"/><rect x="34" y="58" width="40" height="4" rx="2" fill="#111827"/><rect x="14" y="82" width="78" height="68" rx="8" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="22" y="92" width="62" height="4" rx="2" fill="#c0c4cc"/><rect x="22" y="100" width="56" height="4" rx="2" fill="#c0c4cc"/><rect x="22" y="108" width="60" height="4" rx="2" fill="#c0c4cc"/><rect x="22" y="116" width="50" height="4" rx="2" fill="#c0c4cc"/><circle cx="22" cy="136" r="6" fill="#e5e7eb"/><rect x="34" y="134" width="40" height="4" rx="2" fill="#111827"/><rect x="101" y="12" width="78" height="90" rx="8" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="109" y="22" width="62" height="4" rx="2" fill="#c0c4cc"/><rect x="109" y="30" width="56" height="4" rx="2" fill="#c0c4cc"/><rect x="109" y="38" width="58" height="4" rx="2" fill="#c0c4cc"/><rect x="109" y="46" width="50" height="4" rx="2" fill="#c0c4cc"/><circle cx="109" cy="85" r="6" fill="#e5e7eb"/><rect x="121" y="83" width="40" height="4" rx="2" fill="#111827"/><rect x="101" y="110" width="78" height="40" rx="8" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="109" y="120" width="62" height="4" rx="2" fill="#c0c4cc"/><rect x="109" y="128" width="50" height="4" rx="2" fill="#c0c4cc"/><rect x="188" y="12" width="78" height="52" rx="8" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="196" y="22" width="62" height="4" rx="2" fill="#c0c4cc"/><rect x="196" y="30" width="56" height="4" rx="2" fill="#c0c4cc"/><circle cx="196" cy="50" r="6" fill="#e5e7eb"/><rect x="208" y="48" width="40" height="4" rx="2" fill="#111827"/><rect x="188" y="72" width="78" height="80" rx="8" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="196" y="82" width="62" height="4" rx="2" fill="#c0c4cc"/><rect x="196" y="90" width="56" height="4" rx="2" fill="#c0c4cc"/><rect x="196" y="98" width="52" height="4" rx="2" fill="#c0c4cc"/><circle cx="196" cy="132" r="6" fill="#e5e7eb"/><rect x="208" y="130" width="40" height="4" rx="2" fill="#111827"/></svg>`,
|
|
181
|
+
"Testimonials:minimal": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="60" y="14" width="160" height="10" rx="3" fill="#111827"/><rect x="14" y="44" width="78" height="54" rx="8" fill="#f8f9fa" stroke="#e5e7eb" stroke-width="1"/><rect x="22" y="54" width="62" height="4" rx="2" fill="#c0c4cc"/><rect x="22" y="62" width="56" height="4" rx="2" fill="#c0c4cc"/><circle cx="22" cy="84" r="6" fill="#e5e7eb"/><rect x="34" y="82" width="36" height="4" rx="2" fill="#111827"/><rect x="101" y="44" width="78" height="54" rx="8" fill="#f8f9fa" stroke="#e5e7eb" stroke-width="1"/><rect x="109" y="54" width="62" height="4" rx="2" fill="#c0c4cc"/><rect x="109" y="62" width="56" height="4" rx="2" fill="#c0c4cc"/><circle cx="109" cy="84" r="6" fill="#e5e7eb"/><rect x="121" y="82" width="36" height="4" rx="2" fill="#111827"/><rect x="188" y="44" width="78" height="54" rx="8" fill="#f8f9fa" stroke="#e5e7eb" stroke-width="1"/><rect x="196" y="54" width="62" height="4" rx="2" fill="#c0c4cc"/><rect x="196" y="62" width="56" height="4" rx="2" fill="#c0c4cc"/><circle cx="196" cy="84" r="6" fill="#e5e7eb"/><rect x="208" y="82" width="36" height="4" rx="2" fill="#111827"/></svg>`,
|
|
182
|
+
// Pricing layouts
|
|
183
|
+
// cards: 3 cards, middle elevated+accent bg
|
|
184
|
+
"Pricing:cards": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#f8f9fa"/><rect x="60" y="12" width="160" height="10" rx="3" fill="#111827"/><rect x="14" y="36" width="76" height="110" rx="10" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="22" y="46" width="56" height="7" rx="2" fill="#111827"/><rect x="22" y="58" width="42" height="12" rx="2" fill="#c0c4cc" opacity=".8"/><rect x="22" y="78" width="60" height="4" rx="2" fill="#c0c4cc"/><rect x="22" y="86" width="52" height="4" rx="2" fill="#c0c4cc"/><rect x="22" y="94" width="56" height="4" rx="2" fill="#c0c4cc"/><rect x="22" y="132" width="58" height="12" rx="6" fill="none" stroke="#e5e7eb" stroke-width="1.5"/><rect x="102" y="24" width="76" height="122" rx="10" fill="#3d35ff"/><rect x="110" y="36" width="56" height="7" rx="2" fill="#fff" opacity=".9"/><rect x="110" y="48" width="42" height="14" rx="2" fill="#fff" opacity=".9"/><rect x="110" y="70" width="60" height="4" rx="2" fill="#fff" opacity=".55"/><rect x="110" y="78" width="52" height="4" rx="2" fill="#fff" opacity=".55"/><rect x="110" y="86" width="56" height="4" rx="2" fill="#fff" opacity=".55"/><rect x="110" y="130" width="58" height="12" rx="6" fill="#fff"/><rect x="190" y="36" width="76" height="110" rx="10" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="198" y="46" width="56" height="7" rx="2" fill="#111827"/><rect x="198" y="58" width="42" height="12" rx="2" fill="#c0c4cc" opacity=".8"/><rect x="198" y="78" width="60" height="4" rx="2" fill="#c0c4cc"/><rect x="198" y="86" width="52" height="4" rx="2" fill="#c0c4cc"/><rect x="198" y="94" width="56" height="4" rx="2" fill="#c0c4cc"/><rect x="198" y="132" width="58" height="12" rx="6" fill="none" stroke="#e5e7eb" stroke-width="1.5"/></svg>`,
|
|
185
|
+
// minimal: horizontal rows name | price | button
|
|
186
|
+
"Pricing:minimal": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="60" y="14" width="160" height="10" rx="3" fill="#111827"/><rect x="14" y="42" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="52" width="100" height="9" rx="2" fill="#111827"/><rect x="14" y="65" width="80" height="4" rx="2" fill="#c0c4cc"/><rect x="180" y="50" width="44" height="13" rx="3" fill="#111827" opacity=".7"/><rect x="238" y="50" width="38" height="13" rx="6" fill="#3d35ff"/><rect x="14" y="86" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="96" width="100" height="9" rx="2" fill="#111827"/><rect x="14" y="109" width="80" height="4" rx="2" fill="#c0c4cc"/><rect x="180" y="94" width="44" height="13" rx="3" fill="#111827" opacity=".7"/><rect x="238" y="94" width="38" height="13" rx="6" fill="#3d35ff"/><rect x="14" y="130" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="140" width="100" height="9" rx="2" fill="#111827"/><rect x="180" y="138" width="44" height="13" rx="3" fill="#111827" opacity=".7"/><rect x="238" y="138" width="38" height="13" rx="6" fill="#3d35ff"/></svg>`,
|
|
187
|
+
// table: comparison table with checkmarks
|
|
188
|
+
"Pricing:table": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="60" y="12" width="160" height="10" rx="3" fill="#111827"/><rect x="14" y="36" width="252" height="1" fill="#e5e7eb"/><rect x="80" y="36" width="1.5" height="120" fill="#f3f4f6"/><rect x="168" y="36" width="1.5" height="120" fill="#f3f4f6"/><rect x="90" y="40" width="60" height="9" rx="2" fill="#111827"/><rect x="178" y="40" width="60" height="9" rx="2" fill="#3d35ff"/><rect x="14" y="58" width="252" height="1" fill="#f3f4f6"/><rect x="14" y="64" width="60" height="5" rx="2" fill="#c0c4cc"/><rect x="104" y="62" width="12" height="12" rx="2" fill="#22c55e" opacity=".2"/><rect x="192" y="62" width="12" height="12" rx="2" fill="#22c55e" opacity=".2"/><rect x="14" y="84" width="252" height="1" fill="#f3f4f6"/><rect x="14" y="90" width="60" height="5" rx="2" fill="#c0c4cc"/><rect x="104" y="88" width="12" height="12" rx="2" fill="#22c55e" opacity=".2"/><rect x="14" y="110" width="252" height="1" fill="#f3f4f6"/><rect x="14" y="116" width="60" height="5" rx="2" fill="#c0c4cc"/><rect x="192" y="114" width="12" height="12" rx="2" fill="#22c55e" opacity=".2"/><rect x="14" y="136" width="252" height="1" fill="#f3f4f6"/><rect x="14" y="142" width="60" height="5" rx="2" fill="#c0c4cc"/><rect x="104" y="140" width="12" height="12" rx="2" fill="#22c55e" opacity=".2"/><rect x="192" y="140" width="12" height="12" rx="2" fill="#22c55e" opacity=".2"/></svg>`,
|
|
189
|
+
// FAQ: centered italic title + accordion items
|
|
190
|
+
"FAQ": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="70" y="14" width="140" height="12" rx="3" fill="#111827"/><rect x="16" y="40" width="248" height="28" rx="8" fill="#f8f9fa" stroke="#e5e7eb" stroke-width="1"/><rect x="26" y="51" width="120" height="7" rx="2" fill="#111827"/><rect x="242" y="48" width="14" height="14" rx="3" fill="#c0c4cc" opacity=".6"/><rect x="16" y="76" width="248" height="28" rx="8" fill="#f8f9fa" stroke="#e5e7eb" stroke-width="1"/><rect x="26" y="87" width="140" height="7" rx="2" fill="#111827"/><rect x="242" y="84" width="14" height="14" rx="3" fill="#c0c4cc" opacity=".6"/><rect x="16" y="110" width="248" height="38" rx="8" fill="#eef2ff" stroke="#3d35ff" stroke-width="1.5"/><rect x="26" y="121" width="140" height="7" rx="2" fill="#3d35ff"/><rect x="26" y="133" width="110" height="5" rx="2" fill="#3d35ff" opacity=".4"/></svg>`,
|
|
191
|
+
// CallToAction layouts
|
|
192
|
+
// centered: colored bg section, centered title+desc+CTA pill
|
|
193
|
+
"CallToAction:centered": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#3d35ff"/><rect x="44" y="44" width="192" height="16" rx="4" fill="#fff" opacity=".95"/><rect x="66" y="66" width="148" height="6" rx="2" fill="#fff" opacity=".5"/><rect x="76" y="76" width="128" height="6" rx="2" fill="#fff" opacity=".4"/><rect x="86" y="98" width="108" height="22" rx="11" fill="#fff"/><rect x="104" y="107" width="72" height="5" rx="2" fill="#3d35ff"/></svg>`,
|
|
194
|
+
// banner: horizontal border card, text left | buttons right
|
|
195
|
+
"CallToAction:banner": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#f8f9fa"/><rect x="14" y="40" width="252" height="78" rx="12" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="28" y="54" width="110" height="12" rx="3" fill="#111827"/><rect x="28" y="71" width="90" height="5" rx="2" fill="#c0c4cc"/><rect x="28" y="80" width="80" height="5" rx="2" fill="#c0c4cc"/><rect x="178" y="60" width="72" height="20" rx="10" fill="#3d35ff"/><rect x="188" y="68" width="52" height="4" rx="2" fill="#fff"/><rect x="178" y="86" width="72" height="20" rx="10" fill="none" stroke="#e5e7eb" stroke-width="1.5"/><rect x="188" y="94" width="52" height="4" rx="2" fill="#9ca3af"/></svg>`,
|
|
196
|
+
// minimal: border-t/b lines, text left | CTA link right
|
|
197
|
+
"CallToAction:minimal": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="48" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="64" width="130" height="12" rx="3" fill="#111827"/><rect x="14" y="82" width="110" height="5" rx="2" fill="#c0c4cc"/><rect x="196" y="70" width="70" height="7" rx="2" fill="#111827" opacity=".6"/><rect x="14" y="108" width="252" height="1" fill="#e5e7eb"/></svg>`,
|
|
198
|
+
// Newsletter layouts
|
|
199
|
+
// centered: centered title + email+button row
|
|
200
|
+
"Newsletter:centered": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#f8f9fa"/><rect x="64" y="26" width="152" height="13" rx="3" fill="#111827"/><rect x="74" y="44" width="132" height="5" rx="2" fill="#c0c4cc"/><rect x="80" y="53" width="120" height="5" rx="2" fill="#c0c4cc"/><rect x="44" y="76" width="148" height="32" rx="8" fill="#fff" stroke="#e5e7eb" stroke-width="1.5"/><rect x="58" y="90" width="90" height="5" rx="2" fill="#c0c4cc"/><rect x="198" y="76" width="38" height="32" rx="8" fill="#3d35ff"/><rect x="204" y="90" width="26" height="5" rx="2" fill="#fff"/><rect x="96" y="122" width="88" height="4" rx="2" fill="#c0c4cc" opacity=".5"/></svg>`,
|
|
201
|
+
// split: left text col | right form col
|
|
202
|
+
"Newsletter:split": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="36" width="116" height="14" rx="3" fill="#111827"/><rect x="14" y="55" width="106" height="5" rx="2" fill="#c0c4cc"/><rect x="14" y="64" width="96" height="5" rx="2" fill="#c0c4cc"/><rect x="148" y="36" width="118" height="32" rx="8" fill="#f8f9fa" stroke="#e5e7eb" stroke-width="1.5"/><rect x="158" y="50" width="80" height="5" rx="2" fill="#c0c4cc"/><rect x="148" y="76" width="118" height="32" rx="8" fill="#3d35ff"/><rect x="158" y="90" width="80" height="5" rx="2" fill="#fff"/></svg>`,
|
|
203
|
+
// minimal: border-t/b bar with title left | form right
|
|
204
|
+
"Newsletter:minimal": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="52" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="66" width="110" height="12" rx="3" fill="#111827"/><rect x="14" y="83" width="90" height="5" rx="2" fill="#c0c4cc"/><rect x="140" y="68" width="90" height="28" rx="6" fill="#f8f9fa" stroke="#e5e7eb" stroke-width="1.5"/><rect x="150" y="80" width="60" height="5" rx="2" fill="#c0c4cc"/><rect x="238" y="68" width="28" height="28" rx="6" fill="#3d35ff"/><rect x="14" y="104" width="252" height="1" fill="#e5e7eb"/></svg>`,
|
|
205
|
+
// ContactForm layouts
|
|
206
|
+
// split: left text (title+subtitle) | right form fields
|
|
207
|
+
"ContactForm:split": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="28" width="110" height="16" rx="3" fill="#111827"/><rect x="14" y="50" width="100" height="5" rx="2" fill="#c0c4cc"/><rect x="14" y="59" width="90" height="5" rx="2" fill="#c0c4cc"/><rect x="14" y="68" width="94" height="5" rx="2" fill="#c0c4cc"/><rect x="148" y="20" width="118" height="24" rx="6" fill="#f8f9fa" stroke="#e5e7eb" stroke-width="1.5"/><rect x="158" y="30" width="70" height="5" rx="2" fill="#c0c4cc"/><rect x="148" y="52" width="118" height="24" rx="6" fill="#f8f9fa" stroke="#e5e7eb" stroke-width="1.5"/><rect x="158" y="62" width="70" height="5" rx="2" fill="#c0c4cc"/><rect x="148" y="84" width="118" height="50" rx="6" fill="#f8f9fa" stroke="#e5e7eb" stroke-width="1.5"/><rect x="158" y="94" width="80" height="5" rx="2" fill="#c0c4cc"/><rect x="148" y="142" width="118" height="14" rx="7" fill="#3d35ff"/></svg>`,
|
|
208
|
+
// centered: centered title + form fields centered
|
|
209
|
+
"ContactForm:centered": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="70" y="16" width="140" height="12" rx="3" fill="#111827"/><rect x="14" y="40" width="120" height="22" rx="6" fill="#f8f9fa" stroke="#e5e7eb" stroke-width="1.5"/><rect x="24" y="50" width="70" height="4" rx="2" fill="#c0c4cc"/><rect x="146" y="40" width="120" height="22" rx="6" fill="#f8f9fa" stroke="#e5e7eb" stroke-width="1.5"/><rect x="156" y="50" width="70" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="70" width="252" height="22" rx="6" fill="#f8f9fa" stroke="#e5e7eb" stroke-width="1.5"/><rect x="24" y="80" width="80" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="100" width="252" height="38" rx="6" fill="#f8f9fa" stroke="#e5e7eb" stroke-width="1.5"/><rect x="24" y="110" width="100" height="4" rx="2" fill="#c0c4cc"/><rect x="24" y="120" width="80" height="4" rx="2" fill="#c0c4cc"/><rect x="90" y="146" width="100" height="12" rx="6" fill="#3d35ff"/></svg>`,
|
|
210
|
+
// minimal: simple stacked fields
|
|
211
|
+
"ContactForm:minimal": `<svg viewBox="0 0 280 158" xmlns="http://www.w3.org/2000/svg"><rect width="280" height="158" fill="#fff"/><rect x="14" y="16" width="140" height="12" rx="3" fill="#111827"/><rect x="14" y="32" width="100" height="4" rx="2" fill="#c0c4cc"/><rect x="14" y="48" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="60" width="60" height="4" rx="2" fill="#9ca3af" opacity=".5"/><rect x="14" y="72" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="84" width="60" height="4" rx="2" fill="#9ca3af" opacity=".5"/><rect x="14" y="96" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="108" width="60" height="4" rx="2" fill="#9ca3af" opacity=".5"/><rect x="14" y="120" width="252" height="1" fill="#e5e7eb"/><rect x="14" y="144" width="100" height="14" rx="7" fill="#3d35ff"/></svg>`
|
|
146
212
|
};
|
|
147
213
|
const sectionThumbnail = (type, layoutKey) => {
|
|
148
214
|
const k = layoutKey ? `${type}:${layoutKey}` : type;
|