@jxsuite/starters 0.34.0

package/sites/saas/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "flowlark",
+  "private": true,
+  "description": "A modern SaaS product landing site with an interactive pricing toggle and FAQ accordion, built with Jx.",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "jx build",
+    "dev": "jx dev"
+  },
+  "devDependencies": {
+    "@jxsuite/compiler": "^0.19.0",
+    "@jxsuite/runtime": "^0.19.0"
+  }
+}

package/sites/saas/pages/contact.md

@@ -0,0 +1,39 @@
+---
+title: "Contact — Flowlark"
+---
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 5.5rem) 1.5rem clamp(2rem, 5vw, 3rem)"}
+::sa-section-header{props.eyebrow="Get in touch" props.heading="Let’s talk about your team" props.subheading="Have a question, want a demo, or need a custom plan? Send us a note and we’ll get back within one business day."}
+:::::
+
+::::::section{style.maxWidth="var(--max-width)" style.margin="0 auto" style.padding="0 1.5rem clamp(4rem, 8vw, 6rem)"}
+:::::div{style.display="grid" style.gridTemplateColumns="1.2fr 1fr" style.gap="clamp(2rem, 5vw, 3.5rem)" style.--md.gridTemplateColumns="1fr"}
+
+::sa-contact-form{props.heading="Send us a message"}
+
+::::div
+
+:::div{style.padding="2rem" style.backgroundColor="var(--color-bg-cream)" style.border="1px solid var(--color-border)" style.borderRadius="var(--radius)"}
+
+### Talk to a human
+
+Prefer email? Reach the team directly.
+
+[hello@flowlark.app](mailto:hello@flowlark.app)
+:::
+
+:::div{style.marginTop="1.5rem" style.padding="2rem" style.backgroundColor="var(--color-bg-cream)" style.border="1px solid var(--color-border)" style.borderRadius="var(--radius)"}
+
+### Support & sales
+
+::sa-check-item{props.text="Response within one business day"}
+
+::sa-check-item{props.text="Live demo tailored to your team"}
+
+::sa-check-item{props.text="Startup & nonprofit discounts available"}
+:::
+::::
+:::::
+::::::
+
+::sa-cta{props.heading="Rather just dive in?" props.text="You don’t need to talk to us first. Create a free workspace and explore Flowlark at your own pace." props.cta="Get started free" props.ctaHref="/pricing/"}

package/sites/saas/pages/features.md

@@ -0,0 +1,87 @@
+---
+title: "Features — Flowlark"
+---
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 5.5rem) 1.5rem clamp(2rem, 5vw, 3rem)"}
+::sa-section-header{props.eyebrow="Features" props.heading="One tool for the whole build" props.subheading="From the first idea to the shipped release, Flowlark keeps your team’s work in one connected, fast, and friendly place."}
+:::::
+
+:::::section{style.padding="clamp(2rem, 5vw, 3rem) 1.5rem clamp(4rem, 8vw, 6rem)"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.25rem" style.--md.gridTemplateColumns="1fr"}
+::sa-feature-card{props.icon="🗂️" props.title="Projects & tasks" props.text="Organize work into projects, break it into tasks, and see it on boards, lists, or timelines."}
+
+::sa-feature-card{props.icon="🤖" props.title="Automations" props.text="Rules that move work forward for you — assignments, status changes, reminders, and handoffs."}
+
+::sa-feature-card{props.icon="📊" props.title="Analytics" props.text="Live dashboards for velocity, cycle time, and workload — always current, never exported."}
+
+::sa-feature-card{props.icon="🧩" props.title="Integrations" props.text="Connect your repo, chat, and docs so updates flow both ways without copy-paste."}
+
+::sa-feature-card{props.icon="🔔" props.title="Smart notifications" props.text="Get exactly the updates you care about — and none of the noise you don’t."}
+
+::sa-feature-card{props.icon="🔒" props.title="Enterprise security" props.text="SSO, SCIM provisioning, granular roles, and audit logs for teams with real compliance needs."}
+::::
+:::::
+
+:::::section{style.padding="0 0 clamp(2rem, 5vw, 4rem)" style.backgroundColor="var(--color-bg-cream)"}
+::::sa-feature-split{props.image="/images/feature-1.jpg" props.imageAlt="Team collaborating in the Flowlark workspace"}
+:::div
+::sa-section-header{props.eyebrow="Plan" props.heading="Plan work everyone can see" props.align="left"}
+
+Roadmaps, sprints, and backlogs share one source of truth. Drag work between stages, set dependencies, and let the timeline update itself.
+:::
+
+:::div{style.display="flex" style.flexDirection="column" style.gap="0.75rem" style.marginTop="1.5rem"}
+::sa-check-item{props.text="Boards, lists, and timeline views"}
+
+::sa-check-item{props.text="Dependencies and milestones"}
+
+::sa-check-item{props.text="Templates for recurring work"}
+:::
+::::
+
+::::sa-feature-split{props.image="/images/feature-2.jpg" props.imageAlt="Analytics dashboard inside Flowlark" props.reverse="true"}
+:::div
+::sa-section-header{props.eyebrow="Measure" props.heading="Know exactly where things stand" props.align="left"}
+
+Every action feeds a live dashboard, so progress is always visible. Catch blockers early and share a link instead of assembling a report.
+:::
+
+:::div{style.display="flex" style.flexDirection="column" style.gap="0.75rem" style.marginTop="1.5rem"}
+::sa-check-item{props.text="Velocity and cycle-time charts"}
+
+::sa-check-item{props.text="Workload and capacity views"}
+
+::sa-check-item{props.text="Exportable, shareable reports"}
+:::
+::::
+
+::::sa-feature-split{props.image="/images/feature-3.jpg" props.imageAlt="Flowlark mobile app interface"}
+:::div
+::sa-section-header{props.eyebrow="Anywhere" props.heading="Your work, on every device" props.align="left"}
+
+The mobile app keeps you in the loop on the go. Review, comment, and unblock teammates from your phone — then pick up right where you left off on desktop.
+:::
+
+:::div{style.display="flex" style.flexDirection="column" style.gap="0.75rem" style.marginTop="1.5rem"}
+::sa-check-item{props.text="Native iOS and Android apps"}
+
+::sa-check-item{props.text="Offline-friendly and fast"}
+
+::sa-check-item{props.text="Push notifications that respect focus time"}
+:::
+::::
+:::::
+
+:::::section{style.padding="clamp(4rem, 8vw, 6rem) 1.5rem"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(4, 1fr)" style.gap="1rem" style.--md.gridTemplateColumns="repeat(2, 1fr)"}
+::sa-stat{props.value="200+" props.label="Integrations and counting"}
+
+::sa-stat{props.value="50ms" props.label="Median action response time"}
+
+::sa-stat{props.value="SOC 2" props.label="Type II compliant"}
+
+::sa-stat{props.value="24/7" props.label="Monitoring and on-call"}
+::::
+:::::
+
+::sa-cta{props.heading="See it with your own projects" props.text="Spin up a free workspace and bring in real work. You’ll feel the difference in the first afternoon." props.cta="Get started free" props.ctaHref="/pricing/" props.cta2="Talk to sales" props.cta2Href="/contact/"}

package/sites/saas/pages/index.md

@@ -0,0 +1,122 @@
+---
+title: "Flowlark — Plan, ship, and scale in one place"
+state:
+  testimonials:
+    $prototype: ContentCollection
+    $src: "@jxsuite/parser/ContentCollection.class.json"
+    contentType: testimonials
+    sort:
+      field: order
+      order: asc
+    limit: 4
+---
+
+::sa-hero{props.eyebrow="✦ Now with automations & analytics" props.heading="The product platform for teams that ship." props.subheading="Flowlark brings planning, building, and shipping into one fast, delightful workspace — so your team spends less time on busywork and more time making things." props.cta="Get started free" props.ctaHref="/pricing/" props.cta2="See the features" props.cta2Href="/features/" props.note="Free forever plan · No credit card required" props.image="/images/hero.jpg" props.imageAlt="The Flowlark product dashboard showing projects, timelines, and analytics"}
+
+::sa-logo-cloud{}
+
+:::::section{style.padding="clamp(4rem, 8vw, 6rem) 1.5rem"}
+::sa-section-header{props.eyebrow="Why Flowlark" props.heading="Everything your team needs, nothing it doesn’t" props.subheading="One workspace that replaces the tangle of trackers, docs, and spreadsheets your team juggles today."}
+
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.25rem" style.--md.gridTemplateColumns="1fr"}
+::sa-feature-card{props.icon="⚡" props.title="Ship faster" props.text="Plan work, track progress, and hand off cleanly — all in a workspace that keeps everyone in sync."}
+
+::sa-feature-card{props.icon="🤖" props.title="Automate the busywork" props.text="Trigger updates, assignments, and reminders automatically. Set a rule once and let it run."}
+
+::sa-feature-card{props.icon="📊" props.title="See what matters" props.text="Live dashboards turn your team’s activity into insight — no exports, no stale slides."}
+
+::sa-feature-card{props.icon="🧩" props.title="Fits your stack" props.text="Connect the tools you already use. Flowlark plays nicely with the rest of your workflow."}
+
+::sa-feature-card{props.icon="🔒" props.title="Secure by default" props.text="Encryption in transit and at rest, granular permissions, SSO, and audit logs when you need them."}
+
+::sa-feature-card{props.icon="🌍" props.title="Built for teams" props.text="From two people to two thousand, Flowlark scales with you without slowing anyone down."}
+::::
+:::::
+
+:::::section{style.padding="0 0 clamp(2rem, 5vw, 4rem)" style.backgroundColor="var(--color-bg-cream)"}
+::::sa-feature-split{props.image="/images/feature-1.jpg" props.imageAlt="Team collaborating in the Flowlark workspace"}
+:::div
+::sa-section-header{props.eyebrow="Collaborate" props.heading="One workspace, every team" props.align="left"}
+
+Bring product, design, and engineering into a shared space where plans, discussions, and decisions live side by side. No more digging through threads to find the latest.
+:::
+
+:::div{style.display="flex" style.flexDirection="column" style.gap="0.75rem" style.marginTop="1.5rem"}
+::sa-check-item{props.text="Shared roadmaps and timelines"}
+
+::sa-check-item{props.text="Comments and mentions in context"}
+
+::sa-check-item{props.text="Real-time updates across the team"}
+:::
+::::
+
+::::sa-feature-split{props.image="/images/feature-2.jpg" props.imageAlt="Analytics dashboard inside Flowlark" props.reverse="true"}
+:::div
+::sa-section-header{props.eyebrow="Measure" props.heading="Insight without the spreadsheet" props.align="left"}
+
+Dashboards update themselves as your team works. Track velocity, spot bottlenecks, and share progress with a link instead of a status meeting.
+:::
+
+:::div{style.display="flex" style.flexDirection="column" style.gap="0.75rem" style.marginTop="1.5rem"}
+::sa-check-item{props.text="Live velocity and cycle-time charts"}
+
+::sa-check-item{props.text="Custom reports in a few clicks"}
+
+::sa-check-item{props.text="Shareable, always-current links"}
+:::
+::::
+:::::
+
+:::::section{style.padding="clamp(4rem, 8vw, 6rem) 0"}
+::sa-section-header{props.eyebrow="Pricing" props.heading="Simple pricing that scales with you" props.subheading="Start free, upgrade when you’re ready. Switch between monthly and annual any time."}
+
+::sa-pricing{}
+:::::
+
+:::::section{style.padding="clamp(4rem, 8vw, 6rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::sa-section-header{props.eyebrow="Compare plans" props.heading="Every plan, side by side"}
+
+::::div{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto" style.overflowX="auto" style.borderRadius="var(--radius)" style.border="1px solid var(--color-border)" style.backgroundColor="var(--color-bg-white)"}
+
+|                     | Starter   | Pro            | Scale             |
+| ------------------- | --------- | -------------- | ----------------- |
+| Projects            | 3         | Unlimited      | Unlimited         |
+| Automations         | —         | ✓              | ✓                 |
+| Analytics dashboard | —         | ✓              | ✓                 |
+| SSO & SCIM          | —         | —              | ✓                 |
+| Audit logs          | —         | —              | ✓                 |
+| Support             | Community | Priority email | Dedicated manager |
+| Uptime SLA          | —         | —              | 99.9%             |
+
+::::
+:::::
+
+:::::section{style.padding="clamp(4rem, 8vw, 6rem) 1.5rem"}
+::sa-section-header{props.eyebrow="Loved by teams" props.heading="Teams do their best work on Flowlark"}
+
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(2, 1fr)" style.gap="1.25rem" style.--md.gridTemplateColumns="1fr"}
+:::Array{items.ref="#/state/testimonials"}
+::sa-testimonial-card{props.quote="${item.data.quote}" props.author="${item.data.author}" props.company="${item.data.company}"}
+:::
+::::
+:::::
+
+:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(4, 1fr)" style.gap="1rem" style.--md.gridTemplateColumns="repeat(2, 1fr)"}
+::sa-stat{props.value="12k+" props.label="Teams building on Flowlark"}
+
+::sa-stat{props.value="40%" props.label="Less time spent on status updates"}
+
+::sa-stat{props.value="99.9%" props.label="Uptime, backed by an SLA"}
+
+::sa-stat{props.value="4.9/5" props.label="Average customer rating"}
+::::
+:::::
+
+:::::section{style.padding="clamp(4rem, 8vw, 6rem) 1.5rem"}
+::sa-section-header{props.eyebrow="FAQ" props.heading="Questions, answered" props.subheading="Everything you need to know before you get started."}
+
+::sa-faq{}
+:::::
+
+::sa-cta{props.heading="Ready to give your team its time back?" props.text="Start free in minutes. No credit card, no sales call — just your team, shipping." props.cta="Get started free" props.ctaHref="/pricing/" props.cta2="Talk to sales" props.cta2Href="/contact/"}

package/sites/saas/pages/pricing.md

@@ -0,0 +1,39 @@
+---
+title: "Pricing — Flowlark"
+---
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 5.5rem) 1.5rem clamp(2rem, 5vw, 3rem)"}
+::sa-section-header{props.eyebrow="Pricing" props.heading="Pricing that grows with your team" props.subheading="Start on the free plan and upgrade whenever you’re ready. Every paid plan includes a 14-day trial — no credit card to begin."}
+:::::
+
+:::::section{style.padding="0 0 clamp(4rem, 8vw, 6rem)"}
+::sa-pricing{}
+:::::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 5.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::sa-section-header{props.eyebrow="Compare plans" props.heading="What’s included at every tier"}
+
+::::div{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto" style.overflowX="auto" style.borderRadius="var(--radius)" style.border="1px solid var(--color-border)" style.backgroundColor="var(--color-bg-white)"}
+
+|                     | Starter   | Pro            | Scale             |
+| ------------------- | --------- | -------------- | ----------------- |
+| Projects            | 3         | Unlimited      | Unlimited         |
+| Team members        | 3         | Unlimited      | Unlimited         |
+| Automations         | —         | ✓              | ✓                 |
+| Analytics dashboard | —         | ✓              | ✓                 |
+| Integrations        | Core      | All            | All + custom      |
+| SSO & SCIM          | —         | —              | ✓                 |
+| Audit logs          | —         | —              | ✓                 |
+| Support             | Community | Priority email | Dedicated manager |
+| Uptime SLA          | —         | —              | 99.9%             |
+
+::::
+:::::
+
+:::::section{style.padding="clamp(4rem, 8vw, 6rem) 1.5rem"}
+::sa-section-header{props.eyebrow="FAQ" props.heading="Pricing questions" props.subheading="Still deciding? These are the questions teams ask us most."}
+
+::sa-faq{}
+:::::
+
+::sa-cta{props.heading="Try Flowlark free for 14 days" props.text="Explore every Pro feature with your real team and real projects. Cancel any time — we’ll even remind you before the trial ends." props.cta="Start free trial" props.ctaHref="/contact/" props.cta2="Talk to sales" props.cta2Href="/contact/"}

package/sites/saas/project.json

@@ -0,0 +1,134 @@
+{
+  "name": "Flowlark",
+  "url": "https://example.com",
+  "defaults": {
+    "layout": "./layouts/base.json",
+    "lang": "en"
+  },
+  "$head": [
+    {
+      "tagName": "meta",
+      "attributes": { "name": "viewport", "content": "width=device-width, initial-scale=1" }
+    },
+    {
+      "tagName": "meta",
+      "attributes": {
+        "name": "description",
+        "content": "Flowlark is the modern product platform that helps teams plan, ship, and scale — with pricing that flexes from your first project to your thousandth."
+      }
+    },
+    {
+      "tagName": "link",
+      "attributes": { "rel": "icon", "href": "/favicon.svg" }
+    },
+    {
+      "tagName": "link",
+      "attributes": { "rel": "preconnect", "href": "https://fonts.googleapis.com" }
+    },
+    {
+      "tagName": "link",
+      "attributes": { "rel": "preconnect", "href": "https://fonts.gstatic.com", "crossorigin": "" }
+    },
+    {
+      "tagName": "link",
+      "attributes": {
+        "rel": "stylesheet",
+        "href": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap"
+      }
+    }
+  ],
+  "$media": {
+    "--": "1200px",
+    "--lg": "(max-width: 1024px)",
+    "--md": "(max-width: 768px)",
+    "--sm": "(max-width: 640px)"
+  },
+  "style": {
+    "--color-primary": "#6366f1",
+    "--color-primary-hover": "#4f46e5",
+    "--color-ink": "#0d0d1a",
+    "--color-bg-dark": "#0d0d1a",
+    "--color-bg-cream": "#f6f6fb",
+    "--color-bg-surface": "#f6f6fb",
+    "--color-bg-white": "#ffffff",
+    "--color-text-primary": "#14142b",
+    "--color-text-white": "#ffffff",
+    "--color-text-muted": "#64647a",
+    "--color-border": "#e6e6f0",
+    "--color-accent": "#6366f1",
+    "--color-accent-soft": "rgba(99, 102, 241, 0.12)",
+    "--font-heading": "'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--max-width": "1200px",
+    "--max-width-narrow": "820px",
+    "--radius": "0.75rem",
+    "margin": "0",
+    "padding": "0",
+    "fontFamily": "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "lineHeight": "1.6",
+    "color": "var(--color-text-primary)",
+    "backgroundColor": "var(--color-bg-white)",
+    "table": {
+      "width": "100%",
+      "borderCollapse": "collapse",
+      "fontSize": "0.95rem",
+      "textAlign": "left",
+      "backgroundColor": "var(--color-bg-white)",
+      "thead": {
+        "borderBottom": "1px solid var(--color-border)",
+        "th": {
+          "padding": "1rem 1.1rem",
+          "fontFamily": "var(--font-heading)",
+          "fontSize": "0.9rem",
+          "fontWeight": "600",
+          "color": "var(--color-text-primary)"
+        }
+      },
+      "tbody": {
+        "tr": {
+          "borderBottom": "1px solid var(--color-border)"
+        },
+        "td": {
+          "padding": "0.9rem 1.1rem",
+          "color": "var(--color-text-muted)",
+          ":first-child": {
+            "color": "var(--color-text-primary)",
+            "fontWeight": "600"
+          }
+        }
+      }
+    }
+  },
+  "imports": {
+    "Markdown": "@jxsuite/parser/Markdown.class.json",
+    "ContentCollection": "@jxsuite/parser/ContentCollection.class.json"
+  },
+  "images": {
+    "optimize": true,
+    "widths": [320, 640, 960, 1280, 1920],
+    "formats": ["webp", "avif"],
+    "quality": { "webp": 80, "avif": 65, "jpeg": 80, "png": 80 },
+    "sizes": "(max-width: 768px) 100vw, 50vw",
+    "lazyLoad": true
+  },
+  "contentTypes": {
+    "testimonials": {
+      "source": "./content/testimonials/",
+      "format": "Markdown",
+      "schema": {
+        "type": "object",
+        "properties": {
+          "quote": { "type": "string" },
+          "author": { "type": "string" },
+          "company": { "type": "string" },
+          "order": { "type": "number" }
+        },
+        "required": ["quote", "author"]
+      }
+    }
+  },
+  "build": {
+    "outDir": "./dist",
+    "format": "directory",
+    "trailingSlash": "always"
+  }
+}

package/sites/saas/public/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <rect width="32" height="32" rx="7" fill="#6366f1"/>
+  <path d="M8 21c3-1 4.5-3 5.5-6S15.5 8 19 7c-1 3-1 5 0 7s3 2.5 5 2c-2.5 2-4.5 2.5-6.5 1.5S13.5 14 12 16s-2.5 4-4 5z" fill="#fff"/>
+  <circle cx="21.5" cy="10.5" r="1.6" fill="#fff"/>
+</svg>

package/sites/shop/components/shp-badge.json

@@ -0,0 +1,18 @@
+{
+  "tagName": "shp-badge",
+  "state": {
+    "label": ""
+  },
+  "style": {
+    "display": "inline-block",
+    "padding": "0.25rem 0.7rem",
+    "borderRadius": "999px",
+    "fontSize": "0.72rem",
+    "fontWeight": "600",
+    "textTransform": "uppercase",
+    "letterSpacing": "0.06em",
+    "backgroundColor": "rgba(22, 163, 74, 0.12)",
+    "color": "var(--color-primary-hover)"
+  },
+  "children": [{ "tagName": "span", "textContent": "${state.label}" }]
+}

package/sites/shop/components/shp-contact-form.json

@@ -0,0 +1,156 @@
+{
+  "tagName": "shp-contact-form",
+  "state": {
+    "heading": "Send us a message"
+  },
+  "style": {
+    "display": "block"
+  },
+  "children": [
+    {
+      "tagName": "h3",
+      "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "1.6rem",
+        "margin": "0 0 1.25rem"
+      },
+      "textContent": "${state.heading}"
+    },
+    {
+      "tagName": "form",
+      "attributes": { "action": "#", "method": "post" },
+      "style": { "display": "grid", "gap": "1rem", "alignContent": "start" },
+      "children": [
+        {
+          "tagName": "input",
+          "attributes": {
+            "type": "text",
+            "name": "name",
+            "placeholder": "Your name",
+            "required": "true",
+            "aria-label": "Your name"
+          },
+          "style": {
+            "width": "100%",
+            "padding": "0.75rem 0.9rem",
+            "border": "1px solid var(--color-border)",
+            "borderRadius": "var(--radius)",
+            "fontSize": "1rem"
+          }
+        },
+        {
+          "tagName": "input",
+          "attributes": {
+            "type": "email",
+            "name": "email",
+            "placeholder": "Email address",
+            "required": "true",
+            "aria-label": "Email address"
+          },
+          "style": {
+            "width": "100%",
+            "padding": "0.75rem 0.9rem",
+            "border": "1px solid var(--color-border)",
+            "borderRadius": "var(--radius)",
+            "fontSize": "1rem"
+          }
+        },
+        {
+          "tagName": "div",
+          "style": { "display": "grid", "gridTemplateColumns": "1fr 1fr", "gap": "1rem" },
+          "children": [
+            {
+              "tagName": "select",
+              "attributes": { "name": "topic", "aria-label": "What can we help with?" },
+              "style": {
+                "width": "100%",
+                "padding": "0.75rem 0.9rem",
+                "border": "1px solid var(--color-border)",
+                "borderRadius": "var(--radius)",
+                "fontSize": "1rem",
+                "backgroundColor": "var(--color-bg-white)"
+              },
+              "children": [
+                {
+                  "tagName": "option",
+                  "attributes": { "value": "sales" },
+                  "textContent": "Buying a bike"
+                },
+                {
+                  "tagName": "option",
+                  "attributes": { "value": "service" },
+                  "textContent": "Book a service"
+                },
+                {
+                  "tagName": "option",
+                  "attributes": { "value": "fit" },
+                  "textContent": "Bike fitting"
+                },
+                {
+                  "tagName": "option",
+                  "attributes": { "value": "other" },
+                  "textContent": "Something else"
+                }
+              ]
+            },
+            {
+              "tagName": "input",
+              "attributes": {
+                "type": "date",
+                "name": "date",
+                "aria-label": "Preferred service date"
+              },
+              "style": {
+                "width": "100%",
+                "padding": "0.75rem 0.9rem",
+                "border": "1px solid var(--color-border)",
+                "borderRadius": "var(--radius)",
+                "fontSize": "1rem"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "textarea",
+          "attributes": {
+            "name": "notes",
+            "rows": "3",
+            "placeholder": "Tell us about your bike or what you're after…",
+            "aria-label": "Notes"
+          },
+          "style": {
+            "width": "100%",
+            "padding": "0.75rem 0.9rem",
+            "border": "1px solid var(--color-border)",
+            "borderRadius": "var(--radius)",
+            "fontSize": "1rem",
+            "fontFamily": "inherit"
+          }
+        },
+        {
+          "tagName": "button",
+          "attributes": { "type": "submit" },
+          "textContent": "Send Message",
+          "style": {
+            "backgroundColor": "var(--color-primary)",
+            "color": "var(--color-text-white)",
+            "padding": "0.85rem 1.5rem",
+            "border": "none",
+            "borderRadius": "999px",
+            "fontSize": "1rem",
+            "fontWeight": "600",
+            "cursor": "pointer",
+            "justifySelf": "start",
+            "transition": "background-color 0.15s",
+            ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+          }
+        },
+        {
+          "tagName": "p",
+          "style": { "fontSize": "0.85rem", "color": "var(--color-text-muted)", "margin": "0" },
+          "textContent": "This is a demo form. Wire it to your booking provider or email in pages/contact.md."
+        }
+      ]
+    }
+  ]
+}