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
}
}
}
}
}