208 lines
6.4 KiB
TypeScript
208 lines
6.4 KiB
TypeScript
import { DeesElement, html, customElement, css } from '@design.estate/dees-element';
|
|
import { shxElementStyles } from './tokens.js';
|
|
import './shx-badge.js';
|
|
import './shx-button.js';
|
|
import './shx-icon.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'shx-landing-page': ShxLandingPage;
|
|
}
|
|
}
|
|
|
|
@customElement('shx-landing-page')
|
|
export class ShxLandingPage extends DeesElement {
|
|
public static demo = () => html`<shx-landing-page></shx-landing-page>`;
|
|
public static demoGroups = ['smarthome.exchange full pages'];
|
|
|
|
public static styles = [
|
|
...shxElementStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
min-height: 100vh;
|
|
background: radial-gradient(circle at 80% 10%, rgba(59,130,246,0.18), transparent 30%), var(--shx-bg);
|
|
color: var(--shx-fg);
|
|
}
|
|
.wrap {
|
|
max-width: 1180px;
|
|
margin: 0 auto;
|
|
padding: 0 28px;
|
|
}
|
|
nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
min-height: 64px;
|
|
border-bottom: 1px solid var(--shx-border-soft);
|
|
}
|
|
.brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font: 800 15px/1 var(--shx-display);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.links {
|
|
display: flex;
|
|
gap: 14px;
|
|
margin-left: auto;
|
|
color: var(--shx-fg-3);
|
|
font-size: 13px;
|
|
}
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: 1.05fr 0.95fr;
|
|
gap: 44px;
|
|
align-items: center;
|
|
padding: 88px 0 72px;
|
|
}
|
|
h1 {
|
|
margin: 18px 0 18px;
|
|
max-width: 720px;
|
|
font: 800 clamp(44px, 7vw, 78px)/0.95 var(--shx-display);
|
|
letter-spacing: -0.06em;
|
|
}
|
|
h1 em, h2 em {
|
|
color: var(--shx-accent);
|
|
font-style: normal;
|
|
}
|
|
.lede {
|
|
max-width: 680px;
|
|
color: var(--shx-fg-2);
|
|
font-size: 18px;
|
|
line-height: 1.55;
|
|
}
|
|
.cta {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 28px;
|
|
}
|
|
.panel {
|
|
border: 1px solid var(--shx-border);
|
|
border-radius: 16px;
|
|
background: color-mix(in srgb, var(--shx-card), transparent 4%);
|
|
box-shadow: 0 24px 70px rgba(0,0,0,0.34);
|
|
overflow: hidden;
|
|
}
|
|
.panel-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 14px;
|
|
border-bottom: 1px solid var(--shx-border-soft);
|
|
color: var(--shx-fg-3);
|
|
font: 500 11px/1 var(--shx-mono);
|
|
}
|
|
.panel-body {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 16px;
|
|
}
|
|
.tool-row {
|
|
display: grid;
|
|
grid-template-columns: 12px 1fr auto;
|
|
gap: 10px;
|
|
align-items: center;
|
|
padding: 10px;
|
|
border: 1px solid var(--shx-border-soft);
|
|
border-radius: 9px;
|
|
background: var(--shx-card-2);
|
|
font-size: 13px;
|
|
}
|
|
.dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--shx-green);
|
|
box-shadow: 0 0 12px var(--shx-green);
|
|
}
|
|
section {
|
|
padding: 64px 0;
|
|
border-top: 1px solid var(--shx-border-soft);
|
|
}
|
|
h2 {
|
|
margin: 0 0 16px;
|
|
max-width: 760px;
|
|
font: 800 40px/1.05 var(--shx-display);
|
|
letter-spacing: -0.04em;
|
|
}
|
|
.grid3 {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 14px;
|
|
margin-top: 28px;
|
|
}
|
|
.mini {
|
|
min-height: 220px;
|
|
padding: 24px;
|
|
border: 1px solid var(--shx-border);
|
|
border-radius: 14px;
|
|
background: var(--shx-card);
|
|
}
|
|
.mini strong {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
font: 800 20px/1.1 var(--shx-display);
|
|
}
|
|
.mini p {
|
|
color: var(--shx-fg-3);
|
|
line-height: 1.55;
|
|
}
|
|
@media (max-width: 860px) {
|
|
.hero, .grid3 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.links {
|
|
display: none;
|
|
}
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render() {
|
|
return html`
|
|
<div class="wrap">
|
|
<nav>
|
|
<div class="brand"><shx-icon></shx-icon> smarthome.exchange</div>
|
|
<div class="links">
|
|
<span>Tools</span>
|
|
<span>Agents</span>
|
|
<span>Automations</span>
|
|
<span>Open source</span>
|
|
</div>
|
|
</nav>
|
|
<div class="hero">
|
|
<div>
|
|
<shx-badge>local-first home OS</shx-badge>
|
|
<h1>An open home OS, <em>spoken in the language of agents.</em></h1>
|
|
<p class="lede">Every device, sensor, and routine becomes a typed tool: discoverable, permission-scoped, audit-logged, and callable by Claude, a local model, or your own TypeScript agent.</p>
|
|
<div class="cta">
|
|
<shx-button>Open console</shx-button>
|
|
<shx-badge>BYO LLM</shx-badge>
|
|
<shx-badge>MCP-native</shx-badge>
|
|
</div>
|
|
</div>
|
|
<div class="panel">
|
|
<div class="panel-head"><span>birch-lane.local/mcp</span><span>live</span></div>
|
|
<div class="panel-body">
|
|
<div class="tool-row"><span class="dot"></span><span>devices.climate.office.hold</span><shx-badge>auto</shx-badge></div>
|
|
<div class="tool-row"><span class="dot"></span><span>agents.watt.decide</span><shx-badge>ask</shx-badge></div>
|
|
<div class="tool-row"><span class="dot"></span><span>devices.lock.front.set</span><shx-badge>approval</shx-badge></div>
|
|
<div class="tool-row"><span class="dot"></span><span>audit.receipts.append</span><shx-badge>signed</shx-badge></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section>
|
|
<h2>Three primitives. <em>That is the whole platform.</em></h2>
|
|
<div class="grid3">
|
|
<div class="mini"><strong>Typed devices</strong><p>Matter, Zigbee, Z-Wave, Thread, MQTT, HomeKit, ESPHome, and Home Assistant devices become callable tools.</p></div>
|
|
<div class="mini"><strong>Scoped agents</strong><p>Agents receive revocable scopes and explicit modes: auto, ask, or suggest. No ambient access.</p></div>
|
|
<div class="mini"><strong>Audit receipts</strong><p>Every effectful call creates a receipt with caller, scope, input summary, output summary, and undo intent.</p></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|