Edit Landing Page

Name

Also known as (comma separated)

Brief definition Standalone page designed around a single goal or campaign.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "headline", "type": "text", "label": "Headline", "default": "Launch your campaign in a day" }, { "id": "ctaText", "type": "text", "label": "CTA text", "default": "Get early access" }, { "id": "layout", "type": "select", "label": "Layout", "default": "single-column", "options": [ "single-column", "split-hero" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "showFooter", "type": "toggle", "label": "Show footer strip", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"lpage\">\n <section class=\"lpage__hero lpage__hero--{{layout}}\" style=\"background:{{accent}};\">\n <div>\n <h1 class=\"lpage__headline\">{{headline}}</h1>\n <button type=\"button\" class=\"lpage__cta\" style=\"color:{{accent}};\">{{ctaText}}</button>\n </div>\n <div class=\"lpage__visual\" aria-hidden=\"true\"></div>\n </section>\n <section class=\"lpage__strip\">\n <div></div><div></div><div></div>\n </section>\n {{#if showFooter}}<footer class=\"lpage__footer\">&copy; 2026 Campaign Co.</footer>{{/if}}\n</div>\n<style>\n.lpage { font: 16px system-ui, sans-serif; color: #241430; border: 1px solid #24143022; border-radius: 14px; overflow: hidden; max-width: 480px; background: #FAF7F2; }\n.lpage__hero { color: #FAF7F2; padding: 32px 24px; display: flex; align-items: center; gap: 20px; }\n.lpage__hero--single-column { flex-direction: column; text-align: center; }\n.lpage__hero--split-hero { flex-direction: row; text-align: left; }\n.lpage__headline { margin: 0 0 14px; font-size: 22px; font-weight: 800; }\n.lpage__cta { background: #FAF7F2; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; }\n.lpage__cta:hover, .lpage__cta:focus-visible { opacity: .9; }\n.lpage__visual { flex: 1 1 120px; min-height: 80px; border-radius: 10px; background: #FAF7F233; }\n.lpage__hero--single-column .lpage__visual { width: 100%; }\n.lpage__strip { display: flex; gap: 10px; padding: 16px 24px; }\n.lpage__strip div { flex: 1; height: 34px; border-radius: 8px; background: #24143012; }\n.lpage__footer { padding: 12px 24px; font-size: 12px; color: #241430aa; border-top: 1px solid #24143018; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] border border-[#24143022] rounded-2xl overflow-hidden max-w-[480px] bg-[#FAF7F2]\">\n <section class=\"lpage-tw lpage-tw--{{layout}} text-[#FAF7F2] px-6 py-8 flex items-center gap-5\" style=\"background:{{accent}};\">\n <div>\n <h1 class=\"m-0 mb-3.5 text-[22px] font-extrabold\">{{headline}}</h1>\n <button type=\"button\" class=\"bg-[#FAF7F2] border-0 px-5 py-2.5 rounded-lg font-bold cursor-pointer hover:opacity-90\" style=\"color:{{accent}};\">{{ctaText}}</button>\n </div>\n <div class=\"flex-1 min-w-[120px] min-h-[80px] rounded-[10px] bg-[#FAF7F233]\" aria-hidden=\"true\"></div>\n </section>\n <section class=\"flex gap-2.5 px-6 py-4\">\n <div class=\"flex-1 h-[34px] rounded-lg bg-[#24143012]\"></div>\n <div class=\"flex-1 h-[34px] rounded-lg bg-[#24143012]\"></div>\n <div class=\"flex-1 h-[34px] rounded-lg bg-[#24143012]\"></div>\n </section>\n {{#if showFooter}}<footer class=\"px-6 py-3 text-xs text-[#241430]/65 border-t border-[#24143018]\">&copy; 2026 Campaign Co.</footer>{{/if}}\n</div>\n<style>\n.lpage-tw--single-column { flex-direction: column; text-align: center; }\n.lpage-tw--split-hero { flex-direction: row; text-align: left; }\n</style>", "react": "export function LandingPage({\n headline = \"{{headline}}\",\n ctaText = \"{{ctaText}}\",\n layout = \"{{layout}}\",\n accent = \"{{accent}}\",\n showFooter = {{showFooter}},\n}) {\n const split = layout === \"split-hero\";\n return (\n <div style={{ font: \"16px system-ui, sans-serif\", color: \"#241430\", border: \"1px solid #24143022\",\n borderRadius: 14, overflow: \"hidden\", maxWidth: 480, background: \"#FAF7F2\" }}>\n <section style={{ color: \"#FAF7F2\", padding: \"32px 24px\", display: \"flex\", alignItems: \"center\", gap: 20,\n flexDirection: split ? \"row\" : \"column\", textAlign: split ? \"left\" : \"center\", background: accent }}>\n <div>\n <h1 style={{ margin: \"0 0 14px\", fontSize: 22, fontWeight: 800 }}>{headline}</h1>\n <button type=\"button\" style={{ background: \"#FAF7F2\", border: \"none\", padding: \"10px 20px\", borderRadius: 8,\n fontWeight: 700, cursor: \"pointer\", color: accent }}>{ctaText}</button>\n </div>\n <div aria-hidden=\"true\" style={{ flex: \"1 1 120px\", minHeight: 80, borderRadius: 10, background: \"#FAF7F233\",\n width: split ? \"auto\" : \"100%\" }} />\n </section>\n <section style={{ display: \"flex\", gap: 10, padding: \"16px 24px\" }}>\n {[0, 1, 2].map((i) => <div key={i} style={{ flex: 1, height: 34, borderRadius: 8, background: \"#24143012\" }} />)}\n </section>\n {showFooter && <footer style={{ padding: \"12px 24px\", fontSize: 12, color: \"#241430aa\", borderTop: \"1px solid #24143018\" }}>&copy; 2026 Campaign Co.</footer>}\n </div>\n );\n}" }