datafault q-html UI Demo q-component { id: "df-navbar"; nav { class: "df-navbar"; style { display: "flex"; justify-content: "space-between"; align-items: center; padding: 16px 32px; background: #ffffff; border-bottom: 1px solid #E2E7EE; } div { class: "df-navbar-left"; slot { name: "left"; } } div { class: "df-navbar-right"; style { display: flex; gap: 16px; align-items: center; } slot { name: "right"; } } } } q-component { id: "df-button"; button { class: "df-button"; style { border-radius: 8px; padding: 10px 20px; border: none; cursor: pointer; font-weight: 600; } slot { name: "label"; } } } q-component { id: "df-card"; div { class: "df-card"; style { background: #ffffff; border-radius: 12px; padding: 24px; border: 1px solid #E2E7EE; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } div { class: "df-card-header"; style { margin-bottom: 8px; font-weight: 600; color: #06223E; font-size: 18px; } slot { name: "title"; } } div { class: "df-card-body"; style { color: #39424E; font-size: 14px; line-height: 1.45; } slot { name: "body"; } } } } q-component { id: "df-hero"; section { class: "df-hero"; style { text-align: center; padding: 64px 32px; background: linear-gradient(135deg, #06223E, #0F74CE); color: #ffffff; } div { class: "df-hero-inner"; h1 { style { font-size: 40px; margin-bottom: 16px; } slot { name: "headline"; } } p { style { font-size: 16px; margin-bottom: 24px; opacity: 0.9; } slot { name: "subhead"; } } div { class: "df-hero-actions"; slot { name: "actions"; } } } } } q-component { id: "df-grid-3"; div { class: "df-grid-3"; style { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 32px; max-width: 960px; margin: 0 auto; } slot { name: "items"; } } } q-component { id: "df-feature"; div { class: "df-feature"; style { text-align: left; padding: 16px; border-radius: 10px; border: 1px solid #E2E7EE; background: #F3F6F9; } div { class: "df-feature-title"; style { font-weight: 600; margin-bottom: 6px; color: #06223E; } slot { name: "title"; } } div { class: "df-feature-text"; style { font-size: 14px; color: #39424E; line-height: 1.4; } slot { name: "text"; } } } } q-component { id: "df-terminal"; pre { class: "df-terminal"; style { background: #031220; color: #9AD1FF; padding: 16px; border-radius: 12px; font-size: 13px; overflow-x: auto; } slot { name: "content"; } } } div { style { background: #F3F6F9; min-height: 100vh; } df-navbar { div { slot: "left"; style { font-weight: 700; font-size: 18px; color: #06223E; } text { datafault } } div { slot: "right"; a { href: "#features"; style { margin-right: 16px; text-decoration: none; color: #06223E; font-size: 14px; } text { Features } } a { href: "#docs"; style { margin-right: 16px; text-decoration: none; color: #06223E; font-size: 14px; } text { Docs } } df-button { style { background: #0F74CE; color: #ffffff; } div { slot: "label"; text { Sign In } } } } } df-hero { div { slot: "headline"; text { Next-generation coding & SaaS infrastructure } } div { slot: "subhead"; text { Datafault helps you build, ship, and operate complex systems without your stack turning into a junkyard. } } div { slot: "actions"; df-button { style { background: #0F74CE; color: #ffffff; margin-right: 12px; } div { slot: "label"; text { Get Started } } } df-button { style { background: transparent; color: #ffffff; border: 2px solid #9AD1FF; } div { slot: "label"; text { View Docs } } } } } df-grid-3 { div { slot: "items"; df-card { div { slot: "title"; text { API-first workflows } } div { slot: "body"; text { Generate, deploy, and observe API integrations without rewriting the same boilerplate every quarter. } } } df-card { div { slot: "title"; text { Durable automation } } div { slot: "body"; text { Use agents, jobs, and event streams that survive schema changes and human mistakes. } } } df-card { div { slot: "title"; text { Developer-native UX } } div { slot: "body"; text { q-html, CLIs, dashboards, and APIs all wired from a single source of truth. } } } } } div { id: "docs"; style { max-width: 960px; margin: 0 auto 64px auto; padding: 0 32px 32px 32px; } h2 { style { color: #06223E; margin-bottom: 12px; } text { Quick start } } df-terminal { div { slot: "content"; text { npm install datafault-cli\n datafault init my-service } } } } }