CtaSection

import ui/theme.qwe use theme_cssuse ui/cta_section.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

view CtaSectionDemo() =    <div.demo-stack>        <CtaSection id="cta-section-demo" title="Ready to try it?" text="Free for one project and up to three people. No card needed.">            <Button size="lg" tone="neutral" href="#cta_section">Create an account</Button>            <Button size="lg" variant="ghost" tone="neutral" href="#cta_section">Read the docs</Button>        </CtaSection>        <CtaSection tone="soft" align="split" title="Questions about pricing?" text="Write to us; we answer within a working day.">            <Button href="#cta_section">Email us</Button>        </CtaSection>        <CtaSection tone="outline" title="Join the newsletter">            <Button variant="outline" href="#cta_section">Subscribe</Button>        </CtaSection>    </div>

// CtaSection: a band near the end of a page that asks for the one thing: a// title, a line under it, and the buttons.////   <CtaSection title="Ready to try it?" text="Free for one project and three people.">//       <Button size="lg" tone="neutral" href="/signup">Create an account</Button>//       <Button size="lg" variant="ghost" tone="neutral" href="/docs">Read the docs</Button>//   </CtaSection>//   <CtaSection tone="soft" align="split" title="Questions?" text="Write to us; we answer within a day.">//       <Button href="mailto:hello@example.com">Email us</Button>//   </CtaSection>//// title: the ask (an <h2>). text: a line under it. children: the buttons.// tone: "accent" (default: filled with the accent colour; use tone="neutral"// buttons on it), "soft" (tinted) or "outline" (a bordered box). align: "center"// (default) or "split", the words on the left and the buttons on the right (under// them on a phone). id: the section's id, for a link to it.import ui/theme.qwe use ui_clslet cta_section_css = css`.ui-cta { display: grid; gap: 20px; justify-items: center; padding: 48px 32px; border-radius: var(--ui-radius);  text-align: center; font: 16px/1.55 var(--ui-font); color: var(--ui-fg); --t: var(--ui-accent); }.ui-cta-accent { background: var(--t); color: var(--ui-accent-fg); }.ui-cta-soft { background: var(--ui-accent-soft); }.ui-cta-outline { border: 1px solid var(--ui-border); background: var(--ui-surface); }.ui-cta-words { display: grid; gap: 8px; max-width: 640px; }.ui-cta-title { margin: 0; font-size: clamp(24px, 3.4vw, 34px); font-weight: 750; line-height: 1.15; letter-spacing: -.015em; }.ui-cta-text { margin: 0; font-size: 17px; opacity: .85; }.ui-cta-soft .ui-cta-text, .ui-cta-outline .ui-cta-text { color: var(--ui-muted); opacity: 1; }.ui-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }.ui-cta-split { grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: start; text-align: left; padding: 36px 32px; }.ui-cta-split .ui-cta-actions { justify-content: flex-end; }.ui-cta-accent .ui-btn-neutral { --b: var(--ui-accent-fg); --bf: var(--ui-accent); --bs: color-mix(in srgb, var(--ui-accent-fg) 18%, transparent); }.ui-cta-accent .ui-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent-fg) 50%, transparent); }@media (max-width: 640px) {  .ui-cta, .ui-cta-split { padding: 32px 20px; grid-template-columns: minmax(0, 1fr); }  .ui-cta-split .ui-cta-actions { justify-content: flex-start; }}`view CtaSection(title: str, text: str? = null, tone: str = "accent", align: str = "center", id: str? = null,                class: str? = null, children) {    style global cta_section_css    <section id={id} class={ui_cls(["ui-cta", `ui-cta-${tone}`, align == "split" && "ui-cta-split", class])} aria-labelledby={id != null ? `${id}-title` : null}>        <div.ui-cta-words>            <h2.ui-cta-title id={id != null ? `${id}-title` : null}>{title}</h2>            {text != null && <p.ui-cta-text>{text}</p>}        </div>        {children != null && <div.ui-cta-actions>{children}</div>}    </section>}