vibespot 1.1.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibespot",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "AI-powered HubSpot CMS landing page builder — vibe coding & React converter",
   "type": "module",
   "bin": {
@@ -11,11 +11,14 @@
     "dist",
     "bin",
     "assets",
-    "ui"
+    "ui",
+    "starters"
   ],
   "scripts": {
     "dev": "tsx src/index.ts",
     "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
@@ -42,7 +45,8 @@
     "@types/ws": "^8.18.1",
     "tsup": "^8.4.0",
     "tsx": "^4.19.0",
-    "typescript": "^5.7.0"
+    "typescript": "^5.7.0",
+    "vitest": "^4.1.5"
   },
   "keywords": [
     "hubspot",
@@ -56,7 +60,7 @@
     "cli"
   ],
   "author": "Boris Michel",
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "FSL-1.1-Apache-2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/borismichel/vibespot.git"

package/starters/01-saas-landing.json

@@ -0,0 +1,43 @@
+{
+  "id": "saas-landing",
+  "name": "SaaS Landing Page",
+  "description": "Modern SaaS landing page with hero, features, pricing, and CTA",
+  "category": "Business",
+  "modules": [
+    {
+      "moduleName": "hero",
+      "fieldsJson": "[{\"name\":\"heading\",\"label\":\"Heading\",\"type\":\"text\",\"default\":\"Ship faster with AI\"},{\"name\":\"subheading\",\"label\":\"Subheading\",\"type\":\"text\",\"default\":\"The all-in-one platform that helps engineering teams build, test, and deploy 10x faster. No more duct-taping tools together.\"},{\"name\":\"button_text\",\"label\":\"Button Text\",\"type\":\"text\",\"default\":\"Start Free Trial\"},{\"name\":\"button_url\",\"label\":\"Button URL\",\"type\":\"url\",\"default\":\"#pricing\"},{\"name\":\"background_color\",\"label\":\"Background Color\",\"type\":\"color\",\"default\":\"#1a1a2e\"}]",
+      "metaJson": "{\"label\":\"Hero\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"LANDING_PAGE\"]}",
+      "moduleHtml": "<section class=\"hero-section\" style=\"background-color: {{ module.background_color.color || module.background_color }}\">\n  <div class=\"hero-gradient\"></div>\n  <div class=\"hero-content\">\n    {% if module.heading %}\n      <h1 class=\"hero-heading\">{{ module.heading }}</h1>\n    {% endif %}\n    {% if module.subheading %}\n      <p class=\"hero-subheading\">{{ module.subheading }}</p>\n    {% endif %}\n    {% if module.button_text %}\n      <a href=\"{{ module.button_url }}\" class=\"hero-cta-button\">{{ module.button_text }}</a>\n    {% endif %}\n  </div>\n</section>",
+      "moduleCss": ".hero-section {\n  position: relative;\n  min-height: 80vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: 80px 24px;\n}\n\n.hero-gradient {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: radial-gradient(ellipse at 30% 50%, rgba(232, 97, 58, 0.15) 0%, transparent 60%),\n              radial-gradient(ellipse at 70% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 60%);\n  pointer-events: none;\n}\n\n.hero-content {\n  position: relative;\n  z-index: 1;\n  text-align: center;\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n.hero-heading {\n  font-family: var(--font-heading);\n  font-size: 4rem;\n  font-weight: 800;\n  color: var(--color-text);\n  line-height: 1.1;\n  margin: 0 0 24px;\n  letter-spacing: -0.02em;\n}\n\n.hero-subheading {\n  font-family: var(--font-body);\n  font-size: 1.25rem;\n  color: var(--color-text-muted);\n  line-height: 1.7;\n  margin: 0 0 40px;\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.hero-cta-button {\n  display: inline-block;\n  padding: 16px 40px;\n  background: var(--color-accent);\n  color: #ffffff;\n  font-family: var(--font-body);\n  font-size: 1.1rem;\n  font-weight: 600;\n  text-decoration: none;\n  border-radius: 8px;\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.hero-cta-button:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 30px rgba(232, 97, 58, 0.35);\n}\n\n@media (max-width: 768px) {\n  .hero-section {\n    min-height: 60vh;\n    padding: 60px 20px;\n  }\n  .hero-heading {\n    font-size: 2.5rem;\n  }\n  .hero-subheading {\n    font-size: 1.1rem;\n  }\n}",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "features",
+      "fieldsJson": "[{\"name\":\"section_title\",\"label\":\"Section Title\",\"type\":\"text\",\"default\":\"Everything you need to ship\"},{\"name\":\"feature_items\",\"label\":\"Feature Items\",\"type\":\"group\",\"occurrence\":{\"min\":1,\"max\":6,\"default\":3},\"default\":[{\"icon_text\":\"\\u26a1\",\"title\":\"Lightning Fast\",\"description\":\"Sub-second builds and instant deployments. Your code goes live the moment you push.\"},{\"icon_text\":\"\\ud83d\\udd12\",\"title\":\"Enterprise Security\",\"description\":\"SOC 2 Type II certified with end-to-end encryption, SSO, and fine-grained access controls.\"},{\"icon_text\":\"\\ud83d\\ude80\",\"title\":\"Auto Scaling\",\"description\":\"Handles traffic spikes effortlessly. Scale from zero to millions of requests without config.\"},{\"icon_text\":\"\\ud83d\\udd17\",\"title\":\"Seamless Integrations\",\"description\":\"Connect with GitHub, GitLab, Slack, Jira, and 200+ tools your team already uses.\"},{\"icon_text\":\"\\ud83d\\udcca\",\"title\":\"Real-Time Analytics\",\"description\":\"Monitor performance, errors, and user metrics with built-in dashboards and alerts.\"},{\"icon_text\":\"\\ud83e\\udd1d\",\"title\":\"Team Collaboration\",\"description\":\"Branch previews, inline comments, and shared environments make teamwork frictionless.\"}],\"children\":[{\"name\":\"icon_text\",\"label\":\"Icon\",\"type\":\"text\",\"default\":\"\\u26a1\"},{\"name\":\"title\",\"label\":\"Title\",\"type\":\"text\",\"default\":\"Feature Title\"},{\"name\":\"description\",\"label\":\"Description\",\"type\":\"text\",\"default\":\"Feature description goes here.\"}]}]",
+      "metaJson": "{\"label\":\"Features\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"LANDING_PAGE\"]}",
+      "moduleHtml": "<section class=\"features-section\">\n  <div class=\"features-container\">\n    {% if module.section_title %}\n      <h2 class=\"features-title\">{{ module.section_title }}</h2>\n    {% endif %}\n    <div class=\"features-grid\">\n      {% for item in module.feature_items %}\n        <div class=\"feature-card\">\n          {% if item.icon_text %}\n            <span class=\"feature-icon\">{{ item.icon_text }}</span>\n          {% endif %}\n          {% if item.title %}\n            <h3 class=\"feature-card-title\">{{ item.title }}</h3>\n          {% endif %}\n          {% if item.description %}\n            <p class=\"feature-card-description\">{{ item.description }}</p>\n          {% endif %}\n        </div>\n      {% endfor %}\n    </div>\n  </div>\n</section>",
+      "moduleCss": ".features-section {\n  padding: 100px 24px;\n  background: var(--color-bg);\n}\n\n.features-container {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.features-title {\n  font-family: var(--font-heading);\n  font-size: 2.5rem;\n  font-weight: 700;\n  color: var(--color-text);\n  text-align: center;\n  margin: 0 0 60px;\n  letter-spacing: -0.01em;\n}\n\n.features-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 32px;\n}\n\n.feature-card {\n  background: var(--color-surface);\n  border: 1px solid rgba(255, 255, 255, 0.06);\n  border-radius: 12px;\n  padding: 36px 28px;\n  transition: border-color 0.2s ease, transform 0.2s ease;\n}\n\n.feature-card:hover {\n  border-color: rgba(232, 97, 58, 0.3);\n  transform: translateY(-4px);\n}\n\n.feature-icon {\n  font-size: 2rem;\n  display: block;\n  margin-bottom: 16px;\n}\n\n.feature-card-title {\n  font-family: var(--font-heading);\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--color-text);\n  margin: 0 0 12px;\n}\n\n.feature-card-description {\n  font-family: var(--font-body);\n  font-size: 1rem;\n  color: var(--color-text-muted);\n  line-height: 1.6;\n  margin: 0;\n}\n\n@media (max-width: 768px) {\n  .features-grid {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n  .features-title {\n    font-size: 2rem;\n  }\n  .features-section {\n    padding: 60px 20px;\n  }\n}",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "pricing",
+      "fieldsJson": "[{\"name\":\"section_title\",\"label\":\"Section Title\",\"type\":\"text\",\"default\":\"Simple, transparent pricing\"},{\"name\":\"pricing_tiers\",\"label\":\"Pricing Tiers\",\"type\":\"group\",\"occurrence\":{\"min\":1,\"max\":4,\"default\":3},\"default\":[{\"tier_name\":\"Starter\",\"price\":\"$0\",\"period\":\"/ month\",\"tier_features\":\"Up to 3 projects\\n1 team member\\n1 GB storage\\nCommunity support\\nBasic analytics\",\"button_text\":\"Get Started\",\"button_url\":\"#\",\"is_featured\":false},{\"tier_name\":\"Pro\",\"price\":\"$49\",\"period\":\"/ month\",\"tier_features\":\"Unlimited projects\\n10 team members\\n50 GB storage\\nPriority support\\nAdvanced analytics\\nCustom domains\\nSSO\",\"button_text\":\"Start Free Trial\",\"button_url\":\"#\",\"is_featured\":true},{\"tier_name\":\"Enterprise\",\"price\":\"Custom\",\"period\":\"\",\"tier_features\":\"Unlimited everything\\nUnlimited team members\\n500 GB storage\\nDedicated support\\nCustom integrations\\nSLA guarantee\\nSOC 2 compliance\",\"button_text\":\"Contact Sales\",\"button_url\":\"#\",\"is_featured\":false}],\"children\":[{\"name\":\"tier_name\",\"label\":\"Tier Name\",\"type\":\"text\",\"default\":\"Plan Name\"},{\"name\":\"price\",\"label\":\"Price\",\"type\":\"text\",\"default\":\"$0\"},{\"name\":\"period\",\"label\":\"Period\",\"type\":\"text\",\"default\":\"/ month\"},{\"name\":\"tier_features\",\"label\":\"Features (one per line)\",\"type\":\"text\",\"default\":\"Feature one\\nFeature two\\nFeature three\"},{\"name\":\"button_text\",\"label\":\"Button Text\",\"type\":\"text\",\"default\":\"Get Started\"},{\"name\":\"button_url\",\"label\":\"Button URL\",\"type\":\"url\",\"default\":\"#\"},{\"name\":\"is_featured\",\"label\":\"Featured Tier\",\"type\":\"boolean\",\"default\":false}]}]",
+      "metaJson": "{\"label\":\"Pricing\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"LANDING_PAGE\"]}",
+      "moduleHtml": "<section class=\"pricing-section\" id=\"pricing\">\n  <div class=\"pricing-container\">\n    {% if module.section_title %}\n      <h2 class=\"pricing-title\">{{ module.section_title }}</h2>\n    {% endif %}\n    <div class=\"pricing-grid\">\n      {% for tier in module.pricing_tiers %}\n        <div class=\"pricing-card{% if tier.is_featured %} pricing-card--featured{% endif %}\">\n          {% if tier.is_featured %}\n            <span class=\"pricing-badge\">Most Popular</span>\n          {% endif %}\n          {% if tier.tier_name %}\n            <h3 class=\"pricing-tier-name\">{{ tier.tier_name }}</h3>\n          {% endif %}\n          <div class=\"pricing-price-wrap\">\n            {% if tier.price %}\n              <span class=\"pricing-price\">{{ tier.price }}</span>\n            {% endif %}\n            {% if tier.period %}\n              <span class=\"pricing-period\">{{ tier.period }}</span>\n            {% endif %}\n          </div>\n          {% if tier.tier_features %}\n            <ul class=\"pricing-features-list\">\n              {% for feature_line in tier.tier_features|split(\"\\n\") %}\n                <li>{{ feature_line }}</li>\n              {% endfor %}\n            </ul>\n          {% endif %}\n          {% if tier.button_text %}\n            <a href=\"{{ tier.button_url }}\" class=\"pricing-button{% if tier.is_featured %} pricing-button--featured{% endif %}\">{{ tier.button_text }}</a>\n          {% endif %}\n        </div>\n      {% endfor %}\n    </div>\n  </div>\n</section>",
+      "moduleCss": ".pricing-section {\n  padding: 100px 24px;\n  background: var(--color-surface);\n}\n\n.pricing-container {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.pricing-title {\n  font-family: var(--font-heading);\n  font-size: 2.5rem;\n  font-weight: 700;\n  color: var(--color-text);\n  text-align: center;\n  margin: 0 0 60px;\n  letter-spacing: -0.01em;\n}\n\n.pricing-grid {\n  display: flex;\n  gap: 28px;\n  justify-content: center;\n  align-items: stretch;\n  flex-wrap: wrap;\n}\n\n.pricing-card {\n  background: var(--color-bg);\n  border: 1px solid rgba(255, 255, 255, 0.06);\n  border-radius: 16px;\n  padding: 40px 32px;\n  flex: 1;\n  min-width: 260px;\n  max-width: 380px;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  transition: border-color 0.2s ease;\n}\n\n.pricing-card--featured {\n  border-color: var(--color-accent);\n  box-shadow: 0 0 40px rgba(232, 97, 58, 0.12);\n}\n\n.pricing-badge {\n  position: absolute;\n  top: -14px;\n  left: 50%;\n  transform: translateX(-50%);\n  background: var(--color-accent);\n  color: #ffffff;\n  font-family: var(--font-body);\n  font-size: 0.8rem;\n  font-weight: 600;\n  padding: 6px 16px;\n  border-radius: 20px;\n  letter-spacing: 0.02em;\n}\n\n.pricing-tier-name {\n  font-family: var(--font-heading);\n  font-size: 1.3rem;\n  font-weight: 600;\n  color: var(--color-text);\n  margin: 0 0 16px;\n}\n\n.pricing-price-wrap {\n  margin-bottom: 28px;\n}\n\n.pricing-price {\n  font-family: var(--font-heading);\n  font-size: 3rem;\n  font-weight: 800;\n  color: var(--color-text);\n  letter-spacing: -0.02em;\n}\n\n.pricing-period {\n  font-family: var(--font-body);\n  font-size: 1rem;\n  color: var(--color-text-muted);\n  margin-left: 4px;\n}\n\n.pricing-features-list {\n  list-style: none;\n  padding: 0;\n  margin: 0 0 32px;\n  flex-grow: 1;\n}\n\n.pricing-features-list li {\n  font-family: var(--font-body);\n  font-size: 0.95rem;\n  color: var(--color-text-muted);\n  padding: 8px 0;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.04);\n  line-height: 1.5;\n}\n\n.pricing-features-list li:last-child {\n  border-bottom: none;\n}\n\n.pricing-button {\n  display: block;\n  text-align: center;\n  padding: 14px 24px;\n  font-family: var(--font-body);\n  font-size: 1rem;\n  font-weight: 600;\n  text-decoration: none;\n  border-radius: 8px;\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n  background: rgba(255, 255, 255, 0.08);\n  color: var(--color-text);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.pricing-button--featured {\n  background: var(--color-accent);\n  color: #ffffff;\n  border-color: transparent;\n}\n\n.pricing-button:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);\n}\n\n@media (max-width: 768px) {\n  .pricing-grid {\n    flex-direction: column;\n    align-items: center;\n  }\n  .pricing-card {\n    max-width: 100%;\n    min-width: auto;\n    width: 100%;\n  }\n  .pricing-title {\n    font-size: 2rem;\n  }\n  .pricing-section {\n    padding: 60px 20px;\n  }\n}",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "cta",
+      "fieldsJson": "[{\"name\":\"heading\",\"label\":\"Heading\",\"type\":\"text\",\"default\":\"Ready to ship faster?\"},{\"name\":\"description\",\"label\":\"Description\",\"type\":\"text\",\"default\":\"Join 5,000+ engineering teams who have already transformed their workflow. Start your free trial today — no credit card required.\"},{\"name\":\"button_text\",\"label\":\"Button Text\",\"type\":\"text\",\"default\":\"Start Building for Free\"},{\"name\":\"button_url\",\"label\":\"Button URL\",\"type\":\"url\",\"default\":\"#\"},{\"name\":\"background_color\",\"label\":\"Background Color\",\"type\":\"color\",\"default\":\"#e8613a\"}]",
+      "metaJson": "{\"label\":\"CTA\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"LANDING_PAGE\"]}",
+      "moduleHtml": "<section class=\"cta-section\" style=\"background-color: {{ module.background_color.color || module.background_color }}\">\n  <div class=\"cta-container\">\n    {% if module.heading %}\n      <h2 class=\"cta-heading\">{{ module.heading }}</h2>\n    {% endif %}\n    {% if module.description %}\n      <p class=\"cta-description\">{{ module.description }}</p>\n    {% endif %}\n    {% if module.button_text %}\n      <a href=\"{{ module.button_url }}\" class=\"cta-button\">{{ module.button_text }}</a>\n    {% endif %}\n  </div>\n</section>",
+      "moduleCss": ".cta-section {\n  padding: 100px 24px;\n  position: relative;\n  overflow: hidden;\n}\n\n.cta-container {\n  max-width: 700px;\n  margin: 0 auto;\n  text-align: center;\n  position: relative;\n  z-index: 1;\n}\n\n.cta-heading {\n  font-family: var(--font-heading);\n  font-size: 2.8rem;\n  font-weight: 800;\n  color: #ffffff;\n  margin: 0 0 20px;\n  letter-spacing: -0.02em;\n  line-height: 1.15;\n}\n\n.cta-description {\n  font-family: var(--font-body);\n  font-size: 1.15rem;\n  color: rgba(255, 255, 255, 0.9);\n  line-height: 1.7;\n  margin: 0 0 40px;\n}\n\n.cta-button {\n  display: inline-block;\n  padding: 16px 40px;\n  background: #ffffff;\n  color: var(--color-accent);\n  font-family: var(--font-body);\n  font-size: 1.1rem;\n  font-weight: 700;\n  text-decoration: none;\n  border-radius: 8px;\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.cta-button:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);\n}\n\n@media (max-width: 768px) {\n  .cta-section {\n    padding: 60px 20px;\n  }\n  .cta-heading {\n    font-size: 2rem;\n  }\n  .cta-description {\n    font-size: 1rem;\n  }\n}",
+      "moduleJs": ""
+    }
+  ],
+  "moduleOrder": ["hero", "features", "pricing", "cta"],
+  "sharedCss": ":root {\n  --color-bg: #0f0f23;\n  --color-surface: #1a1a2e;\n  --color-accent: #e8613a;\n  --color-text: #ffffff;\n  --color-text-muted: #a0a0b8;\n  --font-heading: system-ui, -apple-system, sans-serif;\n  --font-body: system-ui, -apple-system, sans-serif;\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background: var(--color-bg);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  line-height: 1.6;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 24px;\n}\n\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\na {\n  color: var(--color-accent);\n  text-decoration: none;\n}\n\na:hover {\n  text-decoration: underline;\n}",
+  "sharedJs": ""
+}

package/starters/02-portfolio.json

@@ -0,0 +1,39 @@
+{
+  "id": "portfolio",
+  "name": "Portfolio",
+  "description": "Creative portfolio with project gallery, about section, and contact form",
+  "category": "Creative",
+  "modules": [
+    {
+      "moduleName": "hero",
+      "fieldsJson": "[{\"name\":\"display_name\",\"label\":\"Display Name\",\"type\":\"text\",\"default\":\"Alex Chen\"},{\"name\":\"role_title\",\"label\":\"Role Title\",\"type\":\"text\",\"default\":\"Product Designer & Developer\"},{\"name\":\"tagline\",\"label\":\"Tagline\",\"type\":\"text\",\"default\":\"Crafting thoughtful digital experiences at the intersection of design and code.\"}]",
+      "metaJson": "{\"label\":\"Hero\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"LANDING_PAGE\"]}",
+      "moduleHtml": "<section class=\"hero-section\">\n  <div class=\"hero-inner\">\n    <h1 class=\"hero-name\">{{ module.display_name }}</h1>\n    <p class=\"hero-role\">{{ module.role_title }}</p>\n    <p class=\"hero-tagline\">{{ module.tagline }}</p>\n  </div>\n</section>",
+      "moduleCss": ".hero-section {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 90vh;\n  background-color: var(--color-bg);\n  text-align: center;\n  padding: 4rem 2rem;\n}\n\n.hero-inner {\n  max-width: 720px;\n}\n\n.hero-name {\n  font-family: var(--font-heading);\n  font-size: 4rem;\n  font-weight: 700;\n  color: var(--color-text);\n  margin: 0 0 0.75rem;\n  line-height: 1.1;\n  letter-spacing: -0.02em;\n}\n\n.hero-role {\n  font-family: var(--font-body);\n  font-size: 1.25rem;\n  color: var(--color-text-muted);\n  margin: 0 0 1.5rem;\n  font-weight: 400;\n}\n\n.hero-tagline {\n  font-family: var(--font-body);\n  font-size: 1.125rem;\n  color: var(--color-text-muted);\n  margin: 0;\n  line-height: 1.7;\n  max-width: 540px;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n@media (max-width: 768px) {\n  .hero-name {\n    font-size: 2.5rem;\n  }\n\n  .hero-role {\n    font-size: 1.1rem;\n  }\n\n  .hero-section {\n    min-height: 70vh;\n    padding: 3rem 1.5rem;\n  }\n}"
+    },
+    {
+      "moduleName": "projects",
+      "fieldsJson": "[{\"name\":\"section_title\",\"label\":\"Section Title\",\"type\":\"text\",\"default\":\"Selected Work\"},{\"name\":\"project_items\",\"label\":\"Project Items\",\"type\":\"group\",\"occurrence\":{\"min\":1,\"max\":50,\"default\":3},\"default\":[{\"project_title\":\"Bloom — Plant Care App\",\"project_description\":\"A mobile-first app helping urban gardeners track watering schedules and identify plant diseases using AI.\",\"project_image\":{\"src\":\"\",\"alt\":\"Bloom app preview\"},\"project_url\":\"#\"},{\"project_title\":\"Meridian Dashboard\",\"project_description\":\"Analytics dashboard redesign for a fintech startup, reducing time-to-insight by 40% through simplified data visualization.\",\"project_image\":{\"src\":\"\",\"alt\":\"Meridian dashboard preview\"},\"project_url\":\"#\"},{\"project_title\":\"Kinetic Brand Identity\",\"project_description\":\"Complete brand system for a fitness tech company including logo, type system, and motion design guidelines.\",\"project_image\":{\"src\":\"\",\"alt\":\"Kinetic brand preview\"},\"project_url\":\"#\"}],\"children\":[{\"name\":\"project_title\",\"label\":\"Project Title\",\"type\":\"text\",\"default\":\"Project Title\"},{\"name\":\"project_description\",\"label\":\"Project Description\",\"type\":\"text\",\"default\":\"A brief description of this project.\"},{\"name\":\"project_image\",\"label\":\"Project Image\",\"type\":\"image\",\"default\":{\"src\":\"\",\"alt\":\"Project image\"}},{\"name\":\"project_url\",\"label\":\"Project URL\",\"type\":\"url\",\"default\":\"#\"}]}]",
+      "metaJson": "{\"label\":\"Projects\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"LANDING_PAGE\"]}",
+      "moduleHtml": "<section class=\"projects-section\">\n  <div class=\"projects-inner\">\n    <h2 class=\"projects-title\">{{ module.section_title }}</h2>\n    <div class=\"projects-grid\">\n      {% for item in module.project_items %}\n      <a href=\"{{ item.project_url }}\" class=\"project-card\">\n        <div class=\"project-image-wrap\">\n          {% if item.project_image.src %}\n          <img src=\"{{ item.project_image.src }}\" alt=\"{{ item.project_image.alt }}\" class=\"project-image\" loading=\"lazy\">\n          {% else %}\n          <div class=\"project-image-placeholder\"></div>\n          {% endif %}\n          <div class=\"project-overlay\">\n            <span class=\"project-view\">View Project &rarr;</span>\n          </div>\n        </div>\n        <div class=\"project-info\">\n          <h3 class=\"project-name\">{{ item.project_title }}</h3>\n          <p class=\"project-desc\">{{ item.project_description }}</p>\n        </div>\n      </a>\n      {% endfor %}\n    </div>\n  </div>\n</section>",
+      "moduleCss": ".projects-section {\n  padding: 6rem 2rem;\n  background-color: var(--color-surface);\n}\n\n.projects-inner {\n  max-width: 1100px;\n  margin: 0 auto;\n}\n\n.projects-title {\n  font-family: var(--font-heading);\n  font-size: 2.25rem;\n  font-weight: 700;\n  color: var(--color-text);\n  margin: 0 0 3rem;\n  letter-spacing: -0.01em;\n}\n\n.projects-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 2.5rem;\n}\n\n.project-card {\n  text-decoration: none;\n  color: inherit;\n  display: block;\n  border-radius: 8px;\n  overflow: hidden;\n  background: var(--color-bg);\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.project-card:hover {\n  transform: translateY(-4px);\n  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);\n}\n\n.project-image-wrap {\n  position: relative;\n  overflow: hidden;\n  aspect-ratio: 16 / 10;\n  background-color: #e8e8e8;\n}\n\n.project-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n.project-image-placeholder {\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(135deg, #e0e0e0 0%, #cfcfcf 100%);\n}\n\n.project-overlay {\n  position: absolute;\n  inset: 0;\n  background: rgba(26, 26, 26, 0.6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.project-card:hover .project-overlay {\n  opacity: 1;\n}\n\n.project-view {\n  color: #ffffff;\n  font-family: var(--font-body);\n  font-size: 0.95rem;\n  font-weight: 500;\n  letter-spacing: 0.03em;\n}\n\n.project-info {\n  padding: 1.5rem;\n}\n\n.project-name {\n  font-family: var(--font-heading);\n  font-size: 1.2rem;\n  font-weight: 600;\n  color: var(--color-text);\n  margin: 0 0 0.5rem;\n}\n\n.project-desc {\n  font-family: var(--font-body);\n  font-size: 0.95rem;\n  color: var(--color-text-muted);\n  margin: 0;\n  line-height: 1.6;\n}\n\n@media (max-width: 768px) {\n  .projects-grid {\n    grid-template-columns: 1fr;\n    gap: 2rem;\n  }\n\n  .projects-section {\n    padding: 4rem 1.5rem;\n  }\n\n  .projects-title {\n    font-size: 1.75rem;\n  }\n}"
+    },
+    {
+      "moduleName": "about",
+      "fieldsJson": "[{\"name\":\"section_title\",\"label\":\"Section Title\",\"type\":\"text\",\"default\":\"About\"},{\"name\":\"bio_text\",\"label\":\"Bio Text\",\"type\":\"richtext\",\"default\":\"<p>I'm a product designer and front-end developer based in San Francisco with 8 years of experience building digital products that people love to use.</p><p>I believe great design is invisible — it gets out of the way and lets people accomplish their goals with clarity and confidence. My work spans mobile apps, web platforms, and brand systems.</p><p>Previously, I've worked with teams at Stripe, Figma, and several early-stage startups. When I'm not designing, you'll find me hiking the Marin Headlands or experimenting with generative art.</p>\"},{\"name\":\"profile_image\",\"label\":\"Profile Image\",\"type\":\"image\",\"default\":{\"src\":\"\",\"alt\":\"Alex Chen profile photo\"}},{\"name\":\"skills_list\",\"label\":\"Skills (comma-separated)\",\"type\":\"text\",\"default\":\"UI/UX Design, Prototyping, React, TypeScript, Figma, Design Systems, Motion Design, User Research\"}]",
+      "metaJson": "{\"label\":\"About\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"LANDING_PAGE\"]}",
+      "moduleHtml": "<section class=\"about-section\">\n  <div class=\"about-inner\">\n    <h2 class=\"about-title\">{{ module.section_title }}</h2>\n    <div class=\"about-layout\">\n      <div class=\"about-image-col\">\n        {% if module.profile_image.src %}\n        <img src=\"{{ module.profile_image.src }}\" alt=\"{{ module.profile_image.alt }}\" class=\"about-image\">\n        {% else %}\n        <div class=\"about-image-placeholder\"></div>\n        {% endif %}\n      </div>\n      <div class=\"about-text-col\">\n        <div class=\"about-bio\">{{ module.bio_text }}</div>\n        {% if module.skills_list %}\n        <div class=\"about-skills\">\n          <h3 class=\"skills-heading\">Skills</h3>\n          <div class=\"skills-tags\">\n            {% for skill in module.skills_list|split(\", \") %}\n            <span class=\"skill-tag\">{{ skill }}</span>\n            {% endfor %}\n          </div>\n        </div>\n        {% endif %}\n      </div>\n    </div>\n  </div>\n</section>",
+      "moduleCss": ".about-section {\n  padding: 6rem 2rem;\n  background-color: var(--color-bg);\n}\n\n.about-inner {\n  max-width: 1100px;\n  margin: 0 auto;\n}\n\n.about-title {\n  font-family: var(--font-heading);\n  font-size: 2.25rem;\n  font-weight: 700;\n  color: var(--color-text);\n  margin: 0 0 3rem;\n  letter-spacing: -0.01em;\n}\n\n.about-layout {\n  display: grid;\n  grid-template-columns: 1fr 1.5fr;\n  gap: 3rem;\n  align-items: start;\n}\n\n.about-image {\n  width: 100%;\n  border-radius: 8px;\n  display: block;\n}\n\n.about-image-placeholder {\n  width: 100%;\n  aspect-ratio: 4 / 5;\n  background: linear-gradient(135deg, #e0e0e0 0%, #cfcfcf 100%);\n  border-radius: 8px;\n}\n\n.about-bio {\n  font-family: var(--font-body);\n  font-size: 1.05rem;\n  color: var(--color-text);\n  line-height: 1.75;\n}\n\n.about-bio p {\n  margin: 0 0 1rem;\n}\n\n.about-bio p:last-child {\n  margin-bottom: 0;\n}\n\n.about-skills {\n  margin-top: 2rem;\n}\n\n.skills-heading {\n  font-family: var(--font-heading);\n  font-size: 1.1rem;\n  font-weight: 600;\n  color: var(--color-text);\n  margin: 0 0 1rem;\n}\n\n.skills-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n.skill-tag {\n  font-family: var(--font-body);\n  font-size: 0.85rem;\n  color: var(--color-text-muted);\n  background: var(--color-surface);\n  border: 1px solid #e0e0e0;\n  padding: 0.35rem 0.85rem;\n  border-radius: 100px;\n}\n\n@media (max-width: 768px) {\n  .about-layout {\n    grid-template-columns: 1fr;\n    gap: 2rem;\n  }\n\n  .about-section {\n    padding: 4rem 1.5rem;\n  }\n\n  .about-title {\n    font-size: 1.75rem;\n  }\n\n  .about-image-placeholder {\n    max-width: 320px;\n  }\n}"
+    },
+    {
+      "moduleName": "contact",
+      "fieldsJson": "[{\"name\":\"section_title\",\"label\":\"Section Title\",\"type\":\"text\",\"default\":\"Get in Touch\"},{\"name\":\"contact_email\",\"label\":\"Email Address\",\"type\":\"text\",\"default\":\"hello@alexchen.design\"},{\"name\":\"contact_message\",\"label\":\"Contact Message\",\"type\":\"text\",\"default\":\"I'm always open to discussing new projects, creative ideas, or opportunities to be part of something great.\"}]",
+      "metaJson": "{\"label\":\"Contact\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"LANDING_PAGE\"]}",
+      "moduleHtml": "<section class=\"contact-section\">\n  <div class=\"contact-inner\">\n    <h2 class=\"contact-title\">{{ module.section_title }}</h2>\n    <p class=\"contact-message\">{{ module.contact_message }}</p>\n    {% if module.contact_email %}\n    <a href=\"mailto:{{ module.contact_email }}\" class=\"contact-email-link\">{{ module.contact_email }}</a>\n    {% endif %}\n  </div>\n</section>",
+      "moduleCss": ".contact-section {\n  padding: 6rem 2rem;\n  background-color: var(--color-surface);\n  text-align: center;\n}\n\n.contact-inner {\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n.contact-title {\n  font-family: var(--font-heading);\n  font-size: 2.25rem;\n  font-weight: 700;\n  color: var(--color-text);\n  margin: 0 0 1.5rem;\n  letter-spacing: -0.01em;\n}\n\n.contact-message {\n  font-family: var(--font-body);\n  font-size: 1.1rem;\n  color: var(--color-text-muted);\n  line-height: 1.7;\n  margin: 0 0 2rem;\n}\n\n.contact-email-link {\n  font-family: var(--font-body);\n  font-size: 1.25rem;\n  color: var(--color-accent);\n  text-decoration: none;\n  border-bottom: 2px solid var(--color-accent);\n  padding-bottom: 0.15rem;\n  transition: opacity 0.2s ease;\n}\n\n.contact-email-link:hover {\n  opacity: 0.7;\n}\n\n@media (max-width: 768px) {\n  .contact-section {\n    padding: 4rem 1.5rem;\n  }\n\n  .contact-title {\n    font-size: 1.75rem;\n  }\n\n  .contact-email-link {\n    font-size: 1.1rem;\n  }\n}"
+    }
+  ],
+  "moduleOrder": ["hero", "projects", "about", "contact"],
+  "sharedCss": ":root {\n  --color-bg: #fafafa;\n  --color-surface: #ffffff;\n  --color-accent: #2d2d2d;\n  --color-text: #1a1a1a;\n  --color-text-muted: #666666;\n  --font-heading: 'Georgia', serif;\n  --font-body: system-ui, -apple-system, sans-serif;\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: var(--font-body);\n  color: var(--color-text);\n  background-color: var(--color-bg);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\na {\n  color: inherit;\n}",
+  "sharedJs": ""
+}

package/starters/03-restaurant.json

@@ -0,0 +1,39 @@
+{
+  "id": "restaurant",
+  "name": "Restaurant",
+  "description": "Restaurant landing page with menu, reservations, and location info",
+  "category": "Food & Dining",
+  "modules": [
+    {
+      "moduleName": "hero",
+      "fieldsJson": "[\n  {\n    \"name\": \"restaurant_name\",\n    \"label\": \"Restaurant Name\",\n    \"type\": \"text\",\n    \"default\": \"La Maison\"\n  },\n  {\n    \"name\": \"subtitle\",\n    \"label\": \"Hero Subtitle\",\n    \"type\": \"text\",\n    \"default\": \"Fine French Dining Since 1987\"\n  },\n  {\n    \"name\": \"background_image\",\n    \"label\": \"Background Image\",\n    \"type\": \"image\",\n    \"default\": {\n      \"src\": \"\",\n      \"alt\": \"Restaurant interior\",\n      \"width\": 1920,\n      \"height\": 1080\n    }\n  }\n]",
+      "metaJson": "{\n  \"label\": \"Restaurant Hero\",\n  \"css_assets\": [],\n  \"js_assets\": [],\n  \"icon\": \"module\",\n  \"categories\": [\"LANDING_PAGE\"],\n  \"is_available_for_new_content\": true,\n  \"smart_type\": \"NOT_SMART\"\n}",
+      "moduleHtml": "<section class=\"restaurant-hero\">\n  {% if module.background_image.src %}\n    <div class=\"hero-bg\" style=\"background-image: url('{{ module.background_image.src }}');\"></div>\n  {% else %}\n    <div class=\"hero-bg hero-bg--placeholder\"></div>\n  {% endif %}\n  <div class=\"hero-overlay\"></div>\n  <div class=\"hero-content\">\n    <div class=\"hero-ornament\">&#10045;</div>\n    <h1 class=\"hero-title\">{{ module.restaurant_name }}</h1>\n    <div class=\"hero-divider\"></div>\n    <p class=\"hero-subtitle\">{{ module.subtitle }}</p>\n  </div>\n</section>",
+      "moduleCss": ".restaurant-hero {\n  position: relative;\n  min-height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n\n.hero-bg {\n  position: absolute;\n  inset: 0;\n  background-size: cover;\n  background-position: center;\n  z-index: 0;\n}\n\n.hero-bg--placeholder {\n  background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-surface) 100%);\n}\n\n.hero-overlay {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.55);\n  z-index: 1;\n}\n\n.hero-content {\n  position: relative;\n  z-index: 2;\n  text-align: center;\n  padding: 2rem;\n}\n\n.hero-ornament {\n  font-size: 1.5rem;\n  color: var(--color-accent);\n  margin-bottom: 1rem;\n  letter-spacing: 0.5em;\n}\n\n.hero-title {\n  font-family: var(--font-heading);\n  font-size: clamp(3rem, 8vw, 6rem);\n  font-weight: 400;\n  color: var(--color-text);\n  margin: 0 0 1rem;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n}\n\n.hero-divider {\n  width: 80px;\n  height: 1px;\n  background: var(--color-accent);\n  margin: 1.5rem auto;\n}\n\n.hero-subtitle {\n  font-family: var(--font-body);\n  font-size: clamp(1rem, 2.5vw, 1.4rem);\n  color: var(--color-text-muted);\n  margin: 0;\n  letter-spacing: 0.15em;\n  text-transform: uppercase;\n  font-weight: 300;\n}"
+    },
+    {
+      "moduleName": "menu",
+      "fieldsJson": "[\n  {\n    \"name\": \"section_title\",\n    \"label\": \"Menu Section Title\",\n    \"type\": \"text\",\n    \"default\": \"Our Menu\"\n  },\n  {\n    \"name\": \"menu_categories\",\n    \"label\": \"Menu Categories\",\n    \"type\": \"group\",\n    \"occurrence\": {\n      \"min\": 1,\n      \"max\": 10,\n      \"default\": 3\n    },\n    \"children\": [\n      {\n        \"name\": \"category_name\",\n        \"label\": \"Category Name\",\n        \"type\": \"text\",\n        \"default\": \"Entr\\u00e9es\"\n      },\n      {\n        \"name\": \"menu_items\",\n        \"label\": \"Menu Items\",\n        \"type\": \"group\",\n        \"occurrence\": {\n          \"min\": 1,\n          \"max\": 20,\n          \"default\": 3\n        },\n        \"children\": [\n          {\n            \"name\": \"item_title\",\n            \"label\": \"Item Title\",\n            \"type\": \"text\",\n            \"default\": \"Coq au Vin\"\n          },\n          {\n            \"name\": \"item_description\",\n            \"label\": \"Item Description\",\n            \"type\": \"text\",\n            \"default\": \"Braised chicken in Burgundy wine with pearl onions, mushrooms, and lardons\"\n          },\n          {\n            \"name\": \"item_price\",\n            \"label\": \"Item Price\",\n            \"type\": \"text\",\n            \"default\": \"$38\"\n          }\n        ]\n      }\n    ]\n  }\n]",
+      "metaJson": "{\n  \"label\": \"Restaurant Menu\",\n  \"css_assets\": [],\n  \"js_assets\": [],\n  \"icon\": \"module\",\n  \"categories\": [\"LANDING_PAGE\"],\n  \"is_available_for_new_content\": true,\n  \"smart_type\": \"NOT_SMART\"\n}",
+      "moduleHtml": "<section class=\"restaurant-menu\">\n  <div class=\"menu-container\">\n    <div class=\"menu-header\">\n      <div class=\"menu-ornament\">&#10045;</div>\n      <h2 class=\"menu-title\">{{ module.section_title }}</h2>\n      <div class=\"menu-divider\"></div>\n    </div>\n    {% for category in module.menu_categories %}\n      <div class=\"menu-category\">\n        <h3 class=\"category-name\">{{ category.category_name }}</h3>\n        <div class=\"menu-items\">\n          {% for item in category.menu_items %}\n            <div class=\"menu-item\">\n              <div class=\"menu-item-header\">\n                <span class=\"item-title\">{{ item.item_title }}</span>\n                <span class=\"item-dots\"></span>\n                <span class=\"item-price\">{{ item.item_price }}</span>\n              </div>\n              {% if item.item_description %}\n                <p class=\"item-description\">{{ item.item_description }}</p>\n              {% endif %}\n            </div>\n          {% endfor %}\n        </div>\n      </div>\n    {% endfor %}\n  </div>\n</section>",
+      "moduleCss": ".restaurant-menu {\n  padding: 6rem 1.5rem;\n  background: var(--color-bg);\n}\n\n.menu-container {\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n.menu-header {\n  text-align: center;\n  margin-bottom: 4rem;\n}\n\n.menu-ornament {\n  font-size: 1.2rem;\n  color: var(--color-accent);\n  margin-bottom: 1rem;\n  letter-spacing: 0.5em;\n}\n\n.menu-title {\n  font-family: var(--font-heading);\n  font-size: clamp(2rem, 5vw, 3rem);\n  font-weight: 400;\n  color: var(--color-text);\n  margin: 0;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n}\n\n.menu-divider {\n  width: 60px;\n  height: 1px;\n  background: var(--color-accent);\n  margin: 1.5rem auto 0;\n}\n\n.menu-category {\n  margin-bottom: 3rem;\n}\n\n.category-name {\n  font-family: var(--font-heading);\n  font-size: 1.5rem;\n  font-weight: 400;\n  color: var(--color-accent);\n  text-align: center;\n  margin: 0 0 2rem;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n\n.menu-item {\n  margin-bottom: 1.5rem;\n}\n\n.menu-item-header {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n}\n\n.item-title {\n  font-family: var(--font-heading);\n  font-size: 1.1rem;\n  color: var(--color-text);\n  white-space: nowrap;\n}\n\n.item-dots {\n  flex: 1;\n  border-bottom: 1px dotted var(--color-text-muted);\n  min-width: 2rem;\n  margin-bottom: 0.3rem;\n}\n\n.item-price {\n  font-family: var(--font-body);\n  font-size: 1.1rem;\n  color: var(--color-accent);\n  white-space: nowrap;\n  font-weight: 500;\n}\n\n.item-description {\n  font-family: var(--font-body);\n  font-size: 0.9rem;\n  color: var(--color-text-muted);\n  margin: 0.25rem 0 0;\n  line-height: 1.5;\n  font-style: italic;\n}\n\n@media (max-width: 600px) {\n  .restaurant-menu {\n    padding: 4rem 1rem;\n  }\n}"
+    },
+    {
+      "moduleName": "reservations",
+      "fieldsJson": "[\n  {\n    \"name\": \"section_title\",\n    \"label\": \"Reservations Title\",\n    \"type\": \"text\",\n    \"default\": \"Reserve a Table\"\n  },\n  {\n    \"name\": \"reservation_text\",\n    \"label\": \"Reservation Description\",\n    \"type\": \"text\",\n    \"default\": \"Join us for an unforgettable dining experience. We recommend reservations for dinner service, especially on weekends.\"\n  },\n  {\n    \"name\": \"phone_number\",\n    \"label\": \"Reservation Phone Number\",\n    \"type\": \"text\",\n    \"default\": \"+1 (555) 123-4567\"\n  },\n  {\n    \"name\": \"booking_url\",\n    \"label\": \"Online Booking URL\",\n    \"type\": \"url\",\n    \"default\": {\n      \"url\": {\n        \"href\": \"\",\n        \"type\": \"EXTERNAL\"\n      },\n      \"open_in_new_tab\": true\n    }\n  }\n]",
+      "metaJson": "{\n  \"label\": \"Reservations CTA\",\n  \"css_assets\": [],\n  \"js_assets\": [],\n  \"icon\": \"module\",\n  \"categories\": [\"LANDING_PAGE\"],\n  \"is_available_for_new_content\": true,\n  \"smart_type\": \"NOT_SMART\"\n}",
+      "moduleHtml": "<section class=\"reservations\">\n  <div class=\"reservations-container\">\n    <div class=\"reservations-ornament\">&#10045;</div>\n    <h2 class=\"reservations-title\">{{ module.section_title }}</h2>\n    <div class=\"reservations-divider\"></div>\n    {% if module.reservation_text %}\n      <p class=\"reservations-text\">{{ module.reservation_text }}</p>\n    {% endif %}\n    <div class=\"reservations-actions\">\n      {% if module.phone_number %}\n        <a href=\"tel:{{ module.phone_number }}\" class=\"reservations-phone\">\n          <span class=\"phone-icon\">&#9742;</span>\n          {{ module.phone_number }}\n        </a>\n      {% endif %}\n      {% if module.booking_url.url.href %}\n        <a href=\"{{ module.booking_url.url.href }}\"\n           class=\"reservations-btn\"\n           {% if module.booking_url.open_in_new_tab %}target=\"_blank\" rel=\"noopener noreferrer\"{% endif %}>\n          Book Online\n        </a>\n      {% endif %}\n    </div>\n  </div>\n</section>",
+      "moduleCss": ".reservations {\n  padding: 6rem 1.5rem;\n  background: var(--color-surface);\n  text-align: center;\n}\n\n.reservations-container {\n  max-width: 640px;\n  margin: 0 auto;\n}\n\n.reservations-ornament {\n  font-size: 1.2rem;\n  color: var(--color-accent);\n  margin-bottom: 1rem;\n  letter-spacing: 0.5em;\n}\n\n.reservations-title {\n  font-family: var(--font-heading);\n  font-size: clamp(2rem, 5vw, 3rem);\n  font-weight: 400;\n  color: var(--color-text);\n  margin: 0;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n}\n\n.reservations-divider {\n  width: 60px;\n  height: 1px;\n  background: var(--color-accent);\n  margin: 1.5rem auto;\n}\n\n.reservations-text {\n  font-family: var(--font-body);\n  font-size: 1.1rem;\n  color: var(--color-text-muted);\n  line-height: 1.8;\n  margin: 0 0 2.5rem;\n}\n\n.reservations-actions {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1.5rem;\n}\n\n.reservations-phone {\n  font-family: var(--font-body);\n  font-size: 1.3rem;\n  color: var(--color-text);\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  transition: color 0.2s ease;\n}\n\n.reservations-phone:hover {\n  color: var(--color-accent);\n}\n\n.phone-icon {\n  font-size: 1.1rem;\n}\n\n.reservations-btn {\n  display: inline-block;\n  font-family: var(--font-body);\n  font-size: 0.9rem;\n  font-weight: 500;\n  color: var(--color-bg);\n  background: var(--color-accent);\n  padding: 1rem 3rem;\n  border: none;\n  letter-spacing: 0.15em;\n  text-transform: uppercase;\n  text-decoration: none;\n  transition: background 0.2s ease, transform 0.2s ease;\n}\n\n.reservations-btn:hover {\n  background: #c4955e;\n  transform: translateY(-1px);\n}\n\n@media (max-width: 600px) {\n  .reservations {\n    padding: 4rem 1rem;\n  }\n}"
+    },
+    {
+      "moduleName": "location",
+      "fieldsJson": "[\n  {\n    \"name\": \"section_title\",\n    \"label\": \"Location Section Title\",\n    \"type\": \"text\",\n    \"default\": \"Visit Us\"\n  },\n  {\n    \"name\": \"address_text\",\n    \"label\": \"Restaurant Address\",\n    \"type\": \"text\",\n    \"default\": \"123 Rue de la Paix, New York, NY 10001\"\n  },\n  {\n    \"name\": \"hours_text\",\n    \"label\": \"Business Hours\",\n    \"type\": \"text\",\n    \"default\": \"Tuesday - Saturday: 5:30 PM - 10:30 PM | Sunday Brunch: 11:00 AM - 2:30 PM | Monday: Closed\"\n  },\n  {\n    \"name\": \"phone_display\",\n    \"label\": \"Contact Phone Number\",\n    \"type\": \"text\",\n    \"default\": \"+1 (555) 123-4567\"\n  }\n]",
+      "metaJson": "{\n  \"label\": \"Location & Hours\",\n  \"css_assets\": [],\n  \"js_assets\": [],\n  \"icon\": \"module\",\n  \"categories\": [\"LANDING_PAGE\"],\n  \"is_available_for_new_content\": true,\n  \"smart_type\": \"NOT_SMART\"\n}",
+      "moduleHtml": "<section class=\"location\">\n  <div class=\"location-container\">\n    <div class=\"location-header\">\n      <div class=\"location-ornament\">&#10045;</div>\n      <h2 class=\"location-title\">{{ module.section_title }}</h2>\n      <div class=\"location-divider\"></div>\n    </div>\n    <div class=\"location-grid\">\n      <div class=\"location-card\">\n        <h3 class=\"location-card-title\">Address</h3>\n        <p class=\"location-card-text\">{{ module.address_text }}</p>\n      </div>\n      <div class=\"location-card\">\n        <h3 class=\"location-card-title\">Hours</h3>\n        <p class=\"location-card-text\">{{ module.hours_text }}</p>\n      </div>\n    </div>\n    {% if module.phone_display %}\n      <div class=\"location-contact\">\n        <p class=\"location-phone\">Reservations: <a href=\"tel:{{ module.phone_display }}\">{{ module.phone_display }}</a></p>\n      </div>\n    {% endif %}\n  </div>\n</section>",
+      "moduleCss": ".location {\n  padding: 6rem 1.5rem;\n  background: var(--color-bg);\n}\n\n.location-container {\n  max-width: 900px;\n  margin: 0 auto;\n}\n\n.location-header {\n  text-align: center;\n  margin-bottom: 4rem;\n}\n\n.location-ornament {\n  font-size: 1.2rem;\n  color: var(--color-accent);\n  margin-bottom: 1rem;\n  letter-spacing: 0.5em;\n}\n\n.location-title {\n  font-family: var(--font-heading);\n  font-size: clamp(2rem, 5vw, 3rem);\n  font-weight: 400;\n  color: var(--color-text);\n  margin: 0;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n}\n\n.location-divider {\n  width: 60px;\n  height: 1px;\n  background: var(--color-accent);\n  margin: 1.5rem auto 0;\n}\n\n.location-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 3rem;\n  margin-bottom: 3rem;\n}\n\n.location-card {\n  text-align: center;\n  padding: 2rem;\n  border: 1px solid rgba(212, 165, 116, 0.2);\n}\n\n.location-card-title {\n  font-family: var(--font-heading);\n  font-size: 1.2rem;\n  font-weight: 400;\n  color: var(--color-accent);\n  margin: 0 0 1rem;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n\n.location-card-text {\n  font-family: var(--font-body);\n  font-size: 1rem;\n  color: var(--color-text-muted);\n  line-height: 1.8;\n  margin: 0;\n}\n\n.location-contact {\n  text-align: center;\n}\n\n.location-phone {\n  font-family: var(--font-body);\n  font-size: 1.1rem;\n  color: var(--color-text-muted);\n  margin: 0;\n}\n\n.location-phone a {\n  color: var(--color-accent);\n  text-decoration: none;\n  transition: color 0.2s ease;\n}\n\n.location-phone a:hover {\n  color: var(--color-text);\n}\n\n@media (max-width: 600px) {\n  .location {\n    padding: 4rem 1rem;\n  }\n\n  .location-grid {\n    grid-template-columns: 1fr;\n    gap: 2rem;\n  }\n}"
+    }
+  ],
+  "moduleOrder": ["hero", "menu", "reservations", "location"],
+  "sharedCss": ":root {\n  --color-bg: #1c1917;\n  --color-surface: #292524;\n  --color-accent: #d4a574;\n  --color-text: #fafaf9;\n  --color-text-muted: #a8a29e;\n  --font-heading: 'Georgia', 'Times New Roman', serif;\n  --font-body: system-ui, sans-serif;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background: var(--color-bg);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  line-height: 1.6;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nimg {\n  max-width: 100%;\n  height: auto;\n  display: block;\n}\n\na {\n  color: var(--color-accent);\n  text-decoration: none;\n}\n\na:hover {\n  color: var(--color-text);\n}",
+  "sharedJs": ""
+}

package/starters/04-event.json

@@ -0,0 +1,39 @@
+{
+  "id": "event",
+  "name": "Event / Conference",
+  "description": "Event landing page with speakers, schedule, and registration",
+  "category": "Events",
+  "modules": [
+    {
+      "moduleName": "hero",
+      "fieldsJson": "[{\"name\":\"event_title\",\"label\":\"Event Title\",\"type\":\"text\",\"default\":\"TechForward 2026\"},{\"name\":\"event_date\",\"label\":\"Event Date\",\"type\":\"text\",\"default\":\"September 15-17, 2026\"},{\"name\":\"event_location\",\"label\":\"Event Location\",\"type\":\"text\",\"default\":\"San Francisco, CA\"},{\"name\":\"tagline\",\"label\":\"Tagline\",\"type\":\"text\",\"default\":\"Where Innovation Meets Impact\"},{\"name\":\"register_url\",\"label\":\"Register URL\",\"type\":\"url\",\"default\":\"\"}]",
+      "metaJson": "{\"label\":\"Hero\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"LANDING_PAGE\"]}",
+      "moduleHtml": "<section class=\"hero\">\n  <div class=\"hero__container\">\n    <p class=\"hero__date\">{{ module.event_date }}</p>\n    <h1 class=\"hero__title\">{{ module.event_title }}</h1>\n    <p class=\"hero__location\">{{ module.event_location }}</p>\n    <p class=\"hero__tagline\">{{ module.tagline }}</p>\n    {% if module.register_url %}\n      <a href=\"{{ module.register_url }}\" class=\"hero__cta\">Register Now</a>\n    {% endif %}\n  </div>\n</section>",
+      "moduleCss": ".hero {\n  background: linear-gradient(160deg, #0a0a1a 0%, #1a1a3e 100%);\n  padding: 120px 24px 100px;\n  text-align: center;\n  position: relative;\n  overflow: hidden;\n}\n\n.hero::before {\n  content: '';\n  position: absolute;\n  top: -50%;\n  left: -50%;\n  width: 200%;\n  height: 200%;\n  background: radial-gradient(circle at 30% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%);\n  pointer-events: none;\n}\n\n.hero__container {\n  max-width: 800px;\n  margin: 0 auto;\n  position: relative;\n  z-index: 1;\n}\n\n.hero__date {\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--color-accent, #6366f1);\n  text-transform: uppercase;\n  letter-spacing: 0.15em;\n  margin-bottom: 16px;\n}\n\n.hero__title {\n  font-size: clamp(2.5rem, 6vw, 4.5rem);\n  font-weight: 800;\n  color: var(--color-text, #f8fafc);\n  line-height: 1.1;\n  margin: 0 0 16px;\n}\n\n.hero__location {\n  font-size: 1.25rem;\n  color: var(--color-text-muted, #94a3b8);\n  margin-bottom: 8px;\n}\n\n.hero__tagline {\n  font-size: 1.25rem;\n  color: var(--color-text-muted, #94a3b8);\n  margin-bottom: 40px;\n}\n\n.hero__cta {\n  display: inline-block;\n  padding: 16px 48px;\n  background: var(--color-accent, #6366f1);\n  color: #fff;\n  font-size: 1.125rem;\n  font-weight: 700;\n  border-radius: 8px;\n  text-decoration: none;\n  transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.hero__cta:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.35);\n}\n\n@media (max-width: 768px) {\n  .hero {\n    padding: 80px 20px 64px;\n  }\n}"
+    },
+    {
+      "moduleName": "speakers",
+      "fieldsJson": "[{\"name\":\"section_title\",\"label\":\"Section Title\",\"type\":\"text\",\"default\":\"Featured Speakers\"},{\"name\":\"speaker_list\",\"label\":\"Speakers\",\"type\":\"group\",\"occurrence\":{\"min\":1,\"max\":8,\"default\":4},\"default\":[{\"speaker_name\":\"Dr. Maya Chen\",\"speaker_role\":\"CTO, Quantum Systems\",\"speaker_bio\":\"Leading researcher in quantum computing applications\",\"speaker_image\":null},{\"speaker_name\":\"James Okafor\",\"speaker_role\":\"VP Engineering, NeuralScale\",\"speaker_bio\":\"Architect of large-scale distributed AI systems\",\"speaker_image\":null},{\"speaker_name\":\"Sofia Ramirez\",\"speaker_role\":\"Founder, GreenStack\",\"speaker_bio\":\"Pioneering sustainable cloud infrastructure\",\"speaker_image\":null},{\"speaker_name\":\"Anil Patel\",\"speaker_role\":\"Head of AI, DataForge\",\"speaker_bio\":\"Expert in responsible AI and governance frameworks\",\"speaker_image\":null}],\"children\":[{\"name\":\"speaker_name\",\"label\":\"Speaker Name\",\"type\":\"text\",\"default\":\"Speaker Name\"},{\"name\":\"speaker_role\",\"label\":\"Speaker Role\",\"type\":\"text\",\"default\":\"Role & Company\"},{\"name\":\"speaker_bio\",\"label\":\"Speaker Bio\",\"type\":\"text\",\"default\":\"Brief speaker biography\"},{\"name\":\"speaker_image\",\"label\":\"Speaker Image\",\"type\":\"image\",\"default\":null}]}]",
+      "metaJson": "{\"label\":\"Speakers\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"LANDING_PAGE\"]}",
+      "moduleHtml": "<section class=\"speakers\">\n  <div class=\"speakers__container\">\n    <h2 class=\"speakers__heading\">{{ module.section_title }}</h2>\n    <div class=\"speakers__grid\">\n      {% for speaker in module.speaker_list %}\n        <div class=\"speakers__card\">\n          <div class=\"speakers__avatar\">\n            {% if speaker.speaker_image.src %}\n              <img src=\"{{ speaker.speaker_image.src }}\" alt=\"{{ speaker.speaker_name }}\" loading=\"lazy\" />\n            {% else %}\n              <span class=\"speakers__initials\">{{ speaker.speaker_name|truncate(1, true, '') }}</span>\n            {% endif %}\n          </div>\n          <h3 class=\"speakers__name\">{{ speaker.speaker_name }}</h3>\n          <p class=\"speakers__role\">{{ speaker.speaker_role }}</p>\n        </div>\n      {% endfor %}\n    </div>\n  </div>\n</section>",
+      "moduleCss": ".speakers {\n  background: var(--color-bg, #0a0a1a);\n  padding: 96px 24px;\n}\n\n.speakers__container {\n  max-width: 1100px;\n  margin: 0 auto;\n}\n\n.speakers__heading {\n  font-size: clamp(2rem, 4vw, 3rem);\n  font-weight: 800;\n  color: var(--color-text, #f8fafc);\n  text-align: center;\n  margin: 0 0 64px;\n}\n\n.speakers__grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 40px;\n}\n\n.speakers__card {\n  text-align: center;\n  padding: 32px 16px;\n  border-radius: 12px;\n  background: var(--color-surface, #12122a);\n  transition: transform 0.2s;\n}\n\n.speakers__card:hover {\n  transform: translateY(-4px);\n}\n\n.speakers__avatar {\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  margin: 0 auto 24px;\n  background: linear-gradient(135deg, var(--color-accent, #6366f1), #818cf8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n\n.speakers__avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.speakers__initials {\n  font-size: 2.5rem;\n  font-weight: 700;\n  color: #fff;\n  text-transform: uppercase;\n}\n\n.speakers__name {\n  font-size: 1.25rem;\n  font-weight: 700;\n  color: var(--color-text, #f8fafc);\n  margin: 0 0 4px;\n}\n\n.speakers__role {\n  font-size: 0.95rem;\n  color: var(--color-text-muted, #94a3b8);\n  margin: 0;\n}\n\n@media (max-width: 900px) {\n  .speakers__grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 600px) {\n  .speakers__grid {\n    grid-template-columns: 1fr;\n    gap: 24px;\n  }\n\n  .speakers {\n    padding: 64px 20px;\n  }\n}"
+    },
+    {
+      "moduleName": "schedule",
+      "fieldsJson": "[{\"name\":\"section_title\",\"label\":\"Section Title\",\"type\":\"text\",\"default\":\"Schedule\"},{\"name\":\"schedule_days\",\"label\":\"Schedule Days\",\"type\":\"group\",\"occurrence\":{\"min\":1,\"max\":3,\"default\":3},\"default\":[{\"day_title\":\"Day 1 - September 15\",\"day_events\":[{\"event_time\":\"9:00 AM\",\"event_title\":\"Opening Keynote: The Future of AI\",\"event_speaker\":\"Dr. Maya Chen\"},{\"event_time\":\"11:00 AM\",\"event_title\":\"Scaling Distributed Systems\",\"event_speaker\":\"James Okafor\"},{\"event_time\":\"2:00 PM\",\"event_title\":\"Workshop: Hands-on with LLMs\",\"event_speaker\":\"Anil Patel\"},{\"event_time\":\"4:30 PM\",\"event_title\":\"Networking Reception\",\"event_speaker\":\"\"}]},{\"day_title\":\"Day 2 - September 16\",\"day_events\":[{\"event_time\":\"9:00 AM\",\"event_title\":\"Sustainable Cloud Infrastructure\",\"event_speaker\":\"Sofia Ramirez\"},{\"event_time\":\"11:00 AM\",\"event_title\":\"Panel: Ethics in AI Development\",\"event_speaker\":\"All Speakers\"},{\"event_time\":\"2:00 PM\",\"event_title\":\"Building Production ML Pipelines\",\"event_speaker\":\"James Okafor\"},{\"event_time\":\"5:00 PM\",\"event_title\":\"Conference Dinner\",\"event_speaker\":\"\"}]},{\"day_title\":\"Day 3 - September 17\",\"day_events\":[{\"event_time\":\"9:00 AM\",\"event_title\":\"Quantum Computing Primer\",\"event_speaker\":\"Dr. Maya Chen\"},{\"event_time\":\"11:00 AM\",\"event_title\":\"Green Computing at Scale\",\"event_speaker\":\"Sofia Ramirez\"},{\"event_time\":\"1:30 PM\",\"event_title\":\"Closing Keynote & Awards\",\"event_speaker\":\"All Speakers\"}]}],\"children\":[{\"name\":\"day_title\",\"label\":\"Day Title\",\"type\":\"text\",\"default\":\"Day 1\"},{\"name\":\"day_events\",\"label\":\"Events\",\"type\":\"group\",\"occurrence\":{\"min\":1,\"max\":10,\"default\":3},\"children\":[{\"name\":\"event_time\",\"label\":\"Event Time\",\"type\":\"text\",\"default\":\"9:00 AM\"},{\"name\":\"event_title\",\"label\":\"Event Title\",\"type\":\"text\",\"default\":\"Session Title\"},{\"name\":\"event_speaker\",\"label\":\"Speaker\",\"type\":\"text\",\"default\":\"\"}]}]}]",
+      "metaJson": "{\"label\":\"Schedule\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"LANDING_PAGE\"]}",
+      "moduleHtml": "<section class=\"schedule\">\n  <div class=\"schedule__container\">\n    <h2 class=\"schedule__heading\">{{ module.section_title }}</h2>\n    {% for day in module.schedule_days %}\n      <div class=\"schedule__day\">\n        <h3 class=\"schedule__day-title\">{{ day.day_title }}</h3>\n        <div class=\"schedule__timeline\">\n          {% for item in day.day_events %}\n            <div class=\"schedule__event\">\n              <span class=\"schedule__time\">{{ item.event_time }}</span>\n              <div class=\"schedule__details\">\n                <h4 class=\"schedule__event-title\">{{ item.event_title }}</h4>\n                {% if item.event_speaker %}\n                  <p class=\"schedule__speaker\">{{ item.event_speaker }}</p>\n                {% endif %}\n              </div>\n            </div>\n          {% endfor %}\n        </div>\n      </div>\n    {% endfor %}\n  </div>\n</section>",
+      "moduleCss": ".schedule {\n  background: var(--color-surface, #12122a);\n  padding: 96px 24px;\n}\n\n.schedule__container {\n  max-width: 900px;\n  margin: 0 auto;\n}\n\n.schedule__heading {\n  font-size: clamp(2rem, 4vw, 3rem);\n  font-weight: 800;\n  color: var(--color-text, #f8fafc);\n  text-align: center;\n  margin: 0 0 64px;\n}\n\n.schedule__day {\n  margin-bottom: 48px;\n}\n\n.schedule__day:last-child {\n  margin-bottom: 0;\n}\n\n.schedule__day-title {\n  font-size: 1.5rem;\n  font-weight: 700;\n  color: var(--color-accent, #6366f1);\n  margin: 0 0 24px;\n  padding-bottom: 12px;\n  border-bottom: 2px solid rgba(99, 102, 241, 0.2);\n}\n\n.schedule__timeline {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n.schedule__event {\n  display: flex;\n  align-items: flex-start;\n  gap: 24px;\n  padding: 20px 0;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.1);\n}\n\n.schedule__event:last-child {\n  border-bottom: none;\n}\n\n.schedule__time {\n  flex-shrink: 0;\n  width: 100px;\n  font-size: 0.95rem;\n  font-weight: 600;\n  color: var(--color-accent, #6366f1);\n  padding-top: 2px;\n}\n\n.schedule__details {\n  flex: 1;\n}\n\n.schedule__event-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--color-text, #f8fafc);\n  margin: 0 0 4px;\n}\n\n.schedule__speaker {\n  font-size: 0.9rem;\n  color: var(--color-text-muted, #94a3b8);\n  margin: 0;\n}\n\n@media (max-width: 600px) {\n  .schedule {\n    padding: 64px 20px;\n  }\n\n  .schedule__event {\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .schedule__time {\n    width: auto;\n  }\n}"
+    },
+    {
+      "moduleName": "register",
+      "fieldsJson": "[{\"name\":\"heading\",\"label\":\"Heading\",\"type\":\"text\",\"default\":\"Join Us at TechForward 2026\"},{\"name\":\"description\",\"label\":\"Description\",\"type\":\"text\",\"default\":\"Three days of keynotes, workshops, and networking with the brightest minds in tech. Early bird pricing available for a limited time.\"},{\"name\":\"register_url\",\"label\":\"Register URL\",\"type\":\"url\",\"default\":\"\"},{\"name\":\"ticket_price\",\"label\":\"Ticket Price\",\"type\":\"text\",\"default\":\"Early Bird: $299\"}]",
+      "metaJson": "{\"label\":\"Register\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"LANDING_PAGE\"]}",
+      "moduleHtml": "<section class=\"register\">\n  <div class=\"register__container\">\n    <h2 class=\"register__heading\">{{ module.heading }}</h2>\n    {% if module.description %}\n      <p class=\"register__description\">{{ module.description }}</p>\n    {% endif %}\n    {% if module.ticket_price %}\n      <p class=\"register__price\">{{ module.ticket_price }}</p>\n    {% endif %}\n    {% if module.register_url %}\n      <a href=\"{{ module.register_url }}\" class=\"register__cta\">Register Now</a>\n    {% endif %}\n  </div>\n</section>",
+      "moduleCss": ".register {\n  background: linear-gradient(160deg, var(--color-accent, #6366f1), #4f46e5);\n  padding: 96px 24px;\n  text-align: center;\n}\n\n.register__container {\n  max-width: 700px;\n  margin: 0 auto;\n}\n\n.register__heading {\n  font-size: clamp(2rem, 4vw, 3rem);\n  font-weight: 800;\n  color: #fff;\n  margin: 0 0 16px;\n}\n\n.register__description {\n  font-size: 1.15rem;\n  color: rgba(255, 255, 255, 0.85);\n  line-height: 1.7;\n  margin: 0 0 24px;\n}\n\n.register__price {\n  font-size: 1.5rem;\n  font-weight: 700;\n  color: #fff;\n  margin: 0 0 32px;\n}\n\n.register__cta {\n  display: inline-block;\n  padding: 16px 56px;\n  background: #fff;\n  color: var(--color-accent, #6366f1);\n  font-size: 1.125rem;\n  font-weight: 700;\n  border-radius: 8px;\n  text-decoration: none;\n  transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.register__cta:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);\n}\n\n@media (max-width: 600px) {\n  .register {\n    padding: 64px 20px;\n  }\n}"
+    }
+  ],
+  "moduleOrder": ["hero", "speakers", "schedule", "register"],
+  "sharedCss": ":root {\n  --color-bg: #0a0a1a;\n  --color-surface: #12122a;\n  --color-accent: #6366f1;\n  --color-text: #f8fafc;\n  --color-text-muted: #94a3b8;\n  --font-heading: system-ui, -apple-system, sans-serif;\n  --font-body: system-ui, -apple-system, sans-serif;\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: var(--font-body);\n  background: var(--color-bg);\n  color: var(--color-text);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nh1, h2, h3, h4, h5, h6 {\n  font-family: var(--font-heading);\n}\n\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}",
+  "sharedJs": ""
+}

package/starters/05-coming-soon.json

@@ -0,0 +1,32 @@
+{
+  "id": "coming-soon",
+  "name": "Coming Soon",
+  "description": "Pre-launch page with signup form and feature preview",
+  "category": "Launch",
+  "modules": [
+    {
+      "moduleName": "hero",
+      "fieldsJson": "[{\"name\":\"brand_name\",\"label\":\"Brand Name\",\"type\":\"text\",\"default\":\"Luminary\"},{\"name\":\"heading\",\"label\":\"Heading\",\"type\":\"text\",\"default\":\"Something amazing is coming\"},{\"name\":\"subheading\",\"label\":\"Subheading\",\"type\":\"text\",\"default\":\"We're building the future of creative collaboration. Be the first to know when we launch.\"},{\"name\":\"launch_date\",\"label\":\"Launch Date\",\"type\":\"text\",\"default\":\"Coming Q3 2026\"}]",
+      "metaJson": "{\"label\":\"Hero\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"LANDING_PAGE\"]}",
+      "moduleHtml": "<section class=\"hero\">\n  <div class=\"hero__inner\">\n    <span class=\"hero__brand\">{{ module.brand_name }}</span>\n    <h1 class=\"hero__heading\">{{ module.heading }}</h1>\n    <p class=\"hero__subheading\">{{ module.subheading }}</p>\n    <div class=\"hero__launch-date\">\n      <span class=\"hero__launch-pill\">{{ module.launch_date }}</span>\n    </div>\n  </div>\n</section>",
+      "moduleCss": ".hero {\n  min-height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background: linear-gradient(160deg, var(--color-bg) 0%, #1a1025 50%, var(--color-bg) 100%);\n  position: relative;\n  overflow: hidden;\n}\n\n.hero::before {\n  content: \"\";\n  position: absolute;\n  top: 20%;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 600px;\n  height: 600px;\n  background: radial-gradient(circle, rgba(167, 139, 250, 0.15) 0%, transparent 70%);\n  pointer-events: none;\n}\n\n.hero__inner {\n  position: relative;\n  z-index: 1;\n  max-width: 720px;\n  padding: 2rem;\n}\n\n.hero__brand {\n  display: inline-block;\n  font-family: var(--font-heading);\n  font-size: 0.875rem;\n  font-weight: 600;\n  letter-spacing: 0.2em;\n  text-transform: uppercase;\n  color: var(--color-accent);\n  margin-bottom: 1.5rem;\n}\n\n.hero__heading {\n  font-family: var(--font-heading);\n  font-size: clamp(2.5rem, 6vw, 4.5rem);\n  font-weight: 700;\n  line-height: 1.1;\n  color: var(--color-text);\n  margin: 0 0 1.5rem;\n  letter-spacing: -0.02em;\n}\n\n.hero__subheading {\n  font-family: var(--font-body);\n  font-size: clamp(1rem, 2vw, 1.25rem);\n  line-height: 1.7;\n  color: var(--color-text-muted);\n  margin: 0 0 2rem;\n  max-width: 560px;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.hero__launch-date {\n  margin-top: 2.5rem;\n}\n\n.hero__launch-pill {\n  display: inline-block;\n  padding: 0.625rem 1.5rem;\n  border: 1px solid rgba(167, 139, 250, 0.3);\n  border-radius: 9999px;\n  font-family: var(--font-body);\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--color-accent);\n  letter-spacing: 0.05em;\n  background: rgba(167, 139, 250, 0.08);\n}"
+    },
+    {
+      "moduleName": "features-preview",
+      "fieldsJson": "[{\"name\":\"section_title\",\"label\":\"Section Title\",\"type\":\"text\",\"default\":\"What to Expect\"},{\"name\":\"preview_items\",\"label\":\"Preview Items\",\"type\":\"group\",\"occurrence\":{\"min\":1,\"max\":4,\"default\":3},\"default\":[{\"icon_text\":\"\\u2728\",\"feature_title\":\"AI-Powered Workflows\",\"feature_description\":\"Automate your creative process with intelligent tools that learn how you work.\"},{\"icon_text\":\"\\ud83c\\udfaf\",\"feature_title\":\"Real-Time Collaboration\",\"feature_description\":\"Work together seamlessly with your team, no matter where they are.\"},{\"icon_text\":\"\\ud83d\\ude80\",\"feature_title\":\"Instant Publishing\",\"feature_description\":\"Go from concept to live in minutes with one-click deployment.\"}],\"children\":[{\"name\":\"icon_text\",\"label\":\"Icon Emoji\",\"type\":\"text\",\"default\":\"\\u2728\"},{\"name\":\"feature_title\",\"label\":\"Feature Title\",\"type\":\"text\",\"default\":\"Feature Title\"},{\"name\":\"feature_description\",\"label\":\"Feature Description\",\"type\":\"text\",\"default\":\"A short description of this upcoming feature.\"}]}]",
+      "metaJson": "{\"label\":\"Features Preview\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"LANDING_PAGE\"]}",
+      "moduleHtml": "<section class=\"features-preview\">\n  <div class=\"features-preview__inner\">\n    <h2 class=\"features-preview__title\">{{ module.section_title }}</h2>\n    <div class=\"features-preview__grid\">\n      {% for item in module.preview_items %}\n      <div class=\"features-preview__card\">\n        <span class=\"features-preview__icon\">{{ item.icon_text }}</span>\n        <h3 class=\"features-preview__card-title\">{{ item.feature_title }}</h3>\n        <p class=\"features-preview__card-desc\">{{ item.feature_description }}</p>\n      </div>\n      {% endfor %}\n    </div>\n  </div>\n</section>",
+      "moduleCss": ".features-preview {\n  padding: 6rem 2rem;\n  background: var(--color-bg);\n}\n\n.features-preview__inner {\n  max-width: 1080px;\n  margin: 0 auto;\n}\n\n.features-preview__title {\n  font-family: var(--font-heading);\n  font-size: clamp(1.75rem, 4vw, 2.5rem);\n  font-weight: 700;\n  color: var(--color-text);\n  text-align: center;\n  margin: 0 0 3.5rem;\n  letter-spacing: -0.02em;\n}\n\n.features-preview__grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 1.5rem;\n}\n\n.features-preview__card {\n  background: rgba(255, 255, 255, 0.04);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  border: 1px solid rgba(255, 255, 255, 0.06);\n  border-radius: 1rem;\n  padding: 2rem;\n  transition: transform 0.2s ease, border-color 0.2s ease;\n}\n\n.features-preview__card:hover {\n  transform: translateY(-4px);\n  border-color: rgba(167, 139, 250, 0.25);\n}\n\n.features-preview__icon {\n  display: block;\n  font-size: 2rem;\n  margin-bottom: 1rem;\n}\n\n.features-preview__card-title {\n  font-family: var(--font-heading);\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--color-text);\n  margin: 0 0 0.75rem;\n}\n\n.features-preview__card-desc {\n  font-family: var(--font-body);\n  font-size: 0.9375rem;\n  line-height: 1.6;\n  color: var(--color-text-muted);\n  margin: 0;\n}\n\n@media (max-width: 768px) {\n  .features-preview__grid {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n  }\n}"
+    },
+    {
+      "moduleName": "signup",
+      "fieldsJson": "[{\"name\":\"heading\",\"label\":\"Heading\",\"type\":\"text\",\"default\":\"Stay in the Loop\"},{\"name\":\"description\",\"label\":\"Description\",\"type\":\"text\",\"default\":\"Join our waitlist and get early access when we launch.\"},{\"name\":\"form_id\",\"label\":\"HubSpot Form ID\",\"type\":\"text\",\"default\":\"\"},{\"name\":\"button_text\",\"label\":\"Button Text\",\"type\":\"text\",\"default\":\"Join Waitlist\"}]",
+      "metaJson": "{\"label\":\"Signup\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"LANDING_PAGE\"]}",
+      "moduleHtml": "<section class=\"signup\">\n  <div class=\"signup__inner\">\n    <h2 class=\"signup__heading\">{{ module.heading }}</h2>\n    <p class=\"signup__description\">{{ module.description }}</p>\n    {% if module.form_id %}\n    <div class=\"signup__form-embed\">\n      <script charset=\"utf-8\" type=\"text/javascript\" src=\"//js.hsforms.net/forms/embed/v2.js\"></script>\n      <script>\n        hbspt.forms.create({\n          portalId: {{ portal_id }},\n          formId: \"{{ module.form_id }}\"\n        });\n      </script>\n    </div>\n    {% else %}\n    <div class=\"signup__placeholder\">\n      <div class=\"signup__input-group\">\n        <div class=\"signup__fake-input\">your@email.com</div>\n        <button class=\"signup__button\" type=\"button\">{{ module.button_text }}</button>\n      </div>\n      <p class=\"signup__hint\">Set a HubSpot Form ID in the module settings to enable the live form.</p>\n    </div>\n    {% endif %}\n  </div>\n</section>",
+      "moduleCss": ".signup {\n  padding: 6rem 2rem;\n  background: linear-gradient(180deg, var(--color-bg) 0%, #110d1a 100%);\n}\n\n.signup__inner {\n  max-width: 560px;\n  margin: 0 auto;\n  text-align: center;\n}\n\n.signup__heading {\n  font-family: var(--font-heading);\n  font-size: clamp(1.75rem, 4vw, 2.5rem);\n  font-weight: 700;\n  color: var(--color-text);\n  margin: 0 0 1rem;\n  letter-spacing: -0.02em;\n}\n\n.signup__description {\n  font-family: var(--font-body);\n  font-size: 1.0625rem;\n  line-height: 1.6;\n  color: var(--color-text-muted);\n  margin: 0 0 2.5rem;\n}\n\n.signup__form-embed {\n  margin-top: 1rem;\n}\n\n.signup__placeholder {\n  margin-top: 1rem;\n}\n\n.signup__input-group {\n  display: flex;\n  gap: 0;\n  max-width: 440px;\n  margin: 0 auto;\n  border-radius: 0.75rem;\n  overflow: hidden;\n  border: 1px solid rgba(167, 139, 250, 0.2);\n}\n\n.signup__fake-input {\n  flex: 1;\n  padding: 0.875rem 1.25rem;\n  background: rgba(255, 255, 255, 0.04);\n  color: var(--color-text-muted);\n  font-family: var(--font-body);\n  font-size: 0.9375rem;\n  text-align: left;\n  border: none;\n}\n\n.signup__button {\n  padding: 0.875rem 1.75rem;\n  background: var(--color-accent);\n  color: #09090b;\n  font-family: var(--font-heading);\n  font-size: 0.9375rem;\n  font-weight: 600;\n  border: none;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background 0.2s ease;\n}\n\n.signup__button:hover {\n  background: #8b6ff0;\n}\n\n.signup__hint {\n  font-family: var(--font-body);\n  font-size: 0.8125rem;\n  color: var(--color-text-muted);\n  margin: 1.25rem 0 0;\n  opacity: 0.7;\n}\n\n@media (max-width: 480px) {\n  .signup__input-group {\n    flex-direction: column;\n    border-radius: 0.75rem;\n  }\n\n  .signup__fake-input {\n    text-align: center;\n    border-bottom: 1px solid rgba(167, 139, 250, 0.1);\n  }\n\n  .signup__button {\n    border-radius: 0;\n  }\n}"
+    }
+  ],
+  "moduleOrder": ["hero", "features-preview", "signup"],
+  "sharedCss": ":root {\n  --color-bg: #09090b;\n  --color-surface: #18181b;\n  --color-accent: #a78bfa;\n  --color-text: #fafafa;\n  --color-text-muted: #71717a;\n  --font-heading: system-ui, sans-serif;\n  --font-body: system-ui, sans-serif;\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  background-color: var(--color-bg);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  line-height: 1.6;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}",
+  "sharedJs": ""
+}