Landing page polish: favicon, OG tags, inline diagram, mobile responsiveness, canonical URL, CTA
This commit is contained in:
Scott Scoble
parent
707185a203
commit
9bcbb3d77c
2 changed files with 78 additions and 0 deletions
11
landing/favicon.svg
Normal file
11
landing/favicon.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||
<defs>
|
||||
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#4a9eff;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="64" height="64" rx="12" fill="url(#grad1)"/>
|
||||
<path d="M18 22 L32 12 L46 22 L46 42 L32 52 L18 42 Z" fill="white" opacity="0.9"/>
|
||||
<circle cx="32" cy="32" r="6" fill="#0a0a0f"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 511 B |
|
|
@ -5,6 +5,13 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Speckl — Spec-First Development with Dark Provenance</title>
|
||||
<meta name="description" content="Write what your system should do. Prove it. Ship with full traceability. Speckl is a specification-first development system for regulated industries.">
|
||||
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
||||
<link rel="canonical" href="https://speckl.scoble.me/">
|
||||
<meta property="og:title" content="Speckl — Spec-First Development with Dark Provenance">
|
||||
<meta property="og:description" content="Write what your system should do. Prove it. Ship with full traceability.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://speckl.scoble.me/">
|
||||
<meta property="og:image" content="https://speckl.scoble.me/docs/diagrams/architecture.svg">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0f;
|
||||
|
|
@ -116,6 +123,15 @@
|
|||
.code-block .st { color: #f1fa8c; }
|
||||
.code-block .cm { color: #6272a4; }
|
||||
|
||||
.diagram-container { margin: 2rem 0; }
|
||||
.diagram-container h3 {
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.philosophy-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
|
|
@ -161,6 +177,17 @@
|
|||
.roadmap-phase:first-child { border-radius: 0.75rem 0.75rem 0 0; }
|
||||
.roadmap-phase:last-child { border-radius: 0 0 0.75rem 0.75rem; }
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.hero { padding: 4rem 1rem 3rem; }
|
||||
.hero h1 { font-size: 2rem; }
|
||||
.hero-tagline { font-size: 1rem; }
|
||||
.btn { padding: 0.75rem 1.25rem; font-size: 0.9rem; }
|
||||
section { padding: 3.5rem 1rem; }
|
||||
.code-block { padding: 1rem; }
|
||||
.code-block pre { font-size: 0.8rem; }
|
||||
h2 { font-size: 1.5rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -172,6 +199,7 @@
|
|||
<div class="hero-cta">
|
||||
<a href="https://codeberg.org/sscoble/speckl" class="btn btn-primary">Source Code</a>
|
||||
<a href="https://codeberg.org/sscoble/speckl/src/branch/main/docs/whitepapers/dark-provenance.md" class="btn btn-secondary">Read the Whitepaper</a>
|
||||
<a href="https://discord.gg/scbJjGQx" class="btn btn-secondary">Join Discord Community</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -180,6 +208,45 @@
|
|||
<h2>What is Speckl?</h2>
|
||||
<p>Speckl is a multi-agent software development system where the primary artifact is the <em>specification</em>, not the code. Every behavior traces back to its source of intent — automatically.</p>
|
||||
|
||||
<div class="diagram-container">
|
||||
<h3>System Architecture</h3>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 320" style="width: 100%; max-width: 600px; height: auto; border-radius: 0.75rem; border: 1px solid var(--border); background: var(--code-bg);">
|
||||
<defs>
|
||||
<marker id="arr" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto" fill="#3b82f6">
|
||||
<polygon points="0 0, 10 3.5, 0 7"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<!-- Orchestrator -->
|
||||
<rect x="170" y="15" width="260" height="65" rx="8" fill="#1e3a5f" stroke="#3b82f6" stroke-width="2"/>
|
||||
<text x="300" y="45" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="15" font-weight="bold">Orchestrator</text>
|
||||
<text x="300" y="63" text-anchor="middle" fill="#94a3b8" font-family="system-ui, sans-serif" font-size="11">Accepts Specks, decomposes tasks</text>
|
||||
<!-- Arrow: Orchestrator → Team Lead Verification -->
|
||||
<line x1="220" y1="80" x2="165" y2="145" stroke="#3b82f6" stroke-width="2" marker-end="url(#arr)"/>
|
||||
<!-- Arrow: Orchestrator → Team Lead Codegen -->
|
||||
<line x1="380" y1="80" x2="435" y2="145" stroke="#3b82f6" stroke-width="2" marker-end="url(#arr)"/>
|
||||
<!-- Team Lead: Verification -->
|
||||
<rect x="60" y="150" width="210" height="60" rx="8" fill="#1e3a5f" stroke="#f59e0b" stroke-width="2"/>
|
||||
<text x="165" y="177" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Team Lead</text>
|
||||
<text x="165" y="197" text-anchor="middle" fill="#fbbf24" font-family="system-ui, sans-serif" font-size="12">Verification</text>
|
||||
<!-- Team Lead: Codegen -->
|
||||
<rect x="330" y="150" width="210" height="60" rx="8" fill="#1e3a5f" stroke="#10b981" stroke-width="2"/>
|
||||
<text x="435" y="177" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Team Lead</text>
|
||||
<text x="435" y="197" text-anchor="middle" fill="#6ee7b7" font-family="system-ui, sans-serif" font-size="12">Codegen</text>
|
||||
<!-- Arrow: Team Lead Verification → Z3 SME -->
|
||||
<line x1="165" y1="210" x2="165" y2="250" stroke="#f59e0b" stroke-width="2" marker-end="url(#arr)"/>
|
||||
<!-- Arrow: Team Lead Codegen → TypeScript SME -->
|
||||
<line x1="435" y1="210" x2="435" y2="250" stroke="#10b981" stroke-width="2" marker-end="url(#arr)"/>
|
||||
<!-- SME: Z3 -->
|
||||
<rect x="60" y="255" width="210" height="50" rx="8" fill="#1e3a5f" stroke="#f59e0b" stroke-width="1.5"/>
|
||||
<text x="165" y="277" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Z3 SME</text>
|
||||
<text x="165" y="295" text-anchor="middle" fill="#fbbf24" font-family="system-ui, sans-serif" font-size="11">(verify)</text>
|
||||
<!-- SME: TypeScript -->
|
||||
<rect x="330" y="255" width="210" height="50" rx="8" fill="#1e3a5f" stroke="#10b981" stroke-width="1.5"/>
|
||||
<text x="435" y="277" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">TypeScript SME</text>
|
||||
<text x="435" y="295" text-anchor="middle" fill="#6ee7b7" font-family="system-ui, sans-serif" font-size="11">(emit)</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="features">
|
||||
<div class="feature-card">
|
||||
<h3>🎯 Specification-First</h3>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue