cinqcinqdev-seo 0.1.68 → 0.1.69
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 +1 -1
- package/dist/runtime/pages/admin/editor/[id].vue +101 -35
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -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;
|