Skip to content

Commit 9105ac9

Browse files
author
claude
committed
site: port v2 below-the-fold sections (pricing, Q&A, ownership panel, CTA band, footer)
Third and final commit of the homepage redesign port. Adds the content and layout improvements from the redesign while preserving the existing sections that do work the redesign didn't include. What this ships: New section: Own-your-data (between whatyouget and pricing) Two-column layout. Left: 'You didn't start your business to pay six SaaS bills' headline, ownership prose, key/value metadata (Format: folder of SQLite files / Lock-in: none / Egress fee: $0). Right: a mock file-system panel showing '~/Documents/portland- grooming/' with realistic folder stats (142 clients, 1,308 appointments, 1,284 invoices, 4.7 MB, 9 sqlite + 1 bus files) and a 'cp -r' command with a green 'ok' result. This is trust-signal content — answers 'what does owning your data actually look like' with something tangible. Rebuilt section: Pricing (three tiers, not two) Old structure was generic 'tier' cards. New structure is 'plan-card' with stronger copy: - Local $299: 'License keeps working even if we disappear' - Cloud Single $49/mo (featured): 'Cancel any time, keep your folder' — positive attribute, rendered as a regular \+ row (not the strikethrough the redesign mistakenly applied). - Cloud Multi $129/mo: 'Same license, one bill' — same correction. Annual alternative pricing ($490/yr, $1,290/yr) surfaced in the price-sub line. Clear feature hierarchy: '+ ' for features included, '— ' for features not in this tier. Matches Stockyard canonical pricing in DESIGN-SYSTEM.md / TIERS.md. Rebuilt section: Q&A (replaces old trust section) Old trust section was 3 paragraphs about license durability, no-surprise pricing, and veterans discount. New section is 5 Q&A rows in canonical stockyard voice: - 'Is this just a Notion template?' - 'What happens if Stockyard, the company, goes away?' - 'Why serve a $299 product with an AI composer?' - 'Do I need to be technical?' - 'Anything else?' (folds in the Constitution + veterans content that the old trust section carried — nothing lost) New section: closing CTA band Bottom of main content before footer. 'Stop renting the software that runs your business.' + dual CTA (Install Stockyard / See pricing) + platform line. Rebuilt footer Four-column grid: brand note + Product / Promises / Contact. Lost the old single-row nav, gained structure. Preserved links: Pricing, Bundles, About, Constitution, Veterans, Developers, GitHub, hello@ mailto. What this preserves unchanged: - The 'what' section (How it works, Install once / Your data / Works without internet) — doesn't need a redesign. - The 'versus' section (HoneyBook / Mindbody / 17hats table with Year 1 / Year 3 math) — unique, high-value content not in the redesign. Keeping it. - The 'whatyouget' section (164/195/0/SQLite stat boxes + Brewery/Yoga/Tattoo/Contractor bundle examples with links to /for/) — unique, high-value content not in the redesign. - All existing /for/ bundle links, /constitution/, /veterans/, /proxy-only/ links. Lose no anchors. - The hero (commit 2), the generator form, the JS, the counter, the chips, /api/recommend wiring — all untouched. What this explicitly omits from the redesign: - The redesign's '{{commit_sha}}' footer placeholder. Would have rendered as literal curly-brace text in production. Replaced with the hello@ email (duplicate of what's already in the Contact column, but harmless and visible). - The redesign's pricing 'x' class on positive attributes ('Cancel any time, keep your folder'). That was a bug in the redesign — rendered positive items as strikethroughs. Fixed by promoting those to regular \+ list items. - The 'steps' four-column 'how it works' from the redesign. The current three-column 'what' section is clean and the redesign's four-step version isn't obviously better; leaving the existing one in place. Verification: - HTML tag balance clean (section 8/8, div 93/93, footer 1/1, nav 1/1, ul 3/3, li 13/13) - Inline JS unchanged (identical bytes/lines/balance to post-c2 state; 12718 bytes, 315 lines, braces 51/51, parens 172/172) - JS contains renderResult, gen-r2 markup, /api/recommend and /api/toolkit-count wiring — confirmed intact - node --check on JS: valid - go build ./internal/site/...: clean - go vet ./internal/site/...: clean - make site-sync: clean - Secret scan: 0 hits Rollback plan if something breaks: git revert HEAD && make site-sync && git add internal/site/static && git commit --amend --no-edit && git push
1 parent 13ac7a5 commit 9105ac9

2 files changed

Lines changed: 416 additions & 106 deletions

File tree

internal/site/static/index.html

Lines changed: 208 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,76 @@
229229
footer nav a:hover{color:var(--rust-light)}
230230
footer .fine{font-size:.65rem;color:var(--cream-muted);margin-top:.8rem}
231231

232+
/* ── v2 section styles (commit 3 redesign port) ─────────────────── */
233+
/* Additive styles for the new Own-your-data panel, three-tier pricing,
234+
Q&A section, CTA band, and richer footer. Old sections (.trust,
235+
.pricing-preview) retain their CSS but are replaced by new markup. */
236+
.section-head{margin-bottom:3rem;text-align:center}
237+
.section-head .mono-eyebrow{display:block;margin-bottom:.75rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:3px;text-transform:uppercase;color:var(--rust-light)}
238+
.section-head h2{font-size:clamp(1.75rem,3vw,2.4rem);max-width:28ch;margin:0 auto;font-family:var(--font-serif);font-weight:400;line-height:1.25}
239+
240+
/* Own-your-data: two-column layout with a file-system panel on the right */
241+
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;max-width:1080px;margin:0 auto;padding:0 2rem}
242+
.two-col > div > p{font-size:1rem;line-height:1.7;color:var(--cream-dim);margin:0 0 1rem}
243+
.two-col > div > p:first-of-type{font-size:1.05rem;color:var(--cream)}
244+
.panel{background:var(--bg2);border:1px solid var(--bg3);border-radius:2px;padding:1.75rem}
245+
.panel .mono-label{color:var(--cream-muted);display:block;margin-bottom:1rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:2px;text-transform:uppercase}
246+
.panel h3{margin:0 0 1rem;font-weight:400;font-family:var(--font-mono);font-size:.9rem;letter-spacing:.3px;color:var(--leather-light)}
247+
.kv{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.25rem;font-family:var(--font-mono);font-size:.8rem;padding-top:.5rem}
248+
.kv .k{color:var(--cream-muted)}
249+
.kv .v{color:var(--cream);text-align:right}
250+
.kv .v.good{color:var(--green-light)}
251+
252+
/* Three-tier pricing */
253+
.plans-three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem;max-width:1080px;margin:0 auto;padding:0 2rem}
254+
.plan-card{background:var(--bg2);border:1px solid var(--bg3);border-radius:2px;padding:1.75rem 1.5rem;transition:border-color .15s}
255+
.plan-card:hover{border-color:var(--leather)}
256+
.plan-card.featured{border-color:var(--rust)}
257+
.plan-card h3{font-family:var(--font-serif);font-size:1.3rem;font-weight:400;font-style:italic;margin:0 0 .35rem}
258+
.plan-card .plan-sub{font-family:var(--font-mono);font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--cream-muted);margin-bottom:1.5rem;display:block}
259+
.plan-card .price{font-family:var(--font-mono);font-size:2.5rem;color:var(--gold);line-height:1;margin-bottom:.4rem}
260+
.plan-card .price .unit{font-size:1rem;color:var(--cream-muted)}
261+
.plan-card .price-sub{font-family:var(--font-mono);font-size:.72rem;color:var(--cream-muted);letter-spacing:.5px;margin-bottom:1.5rem}
262+
.plan-card ul{list-style:none;padding:0;margin:0 0 1.75rem;font-size:.9rem}
263+
.plan-card ul li{padding:.5rem 0;border-bottom:1px dashed var(--bg3);color:var(--cream-dim);display:flex;gap:.75rem;font-family:var(--font-serif)}
264+
.plan-card ul li::before{content:"+";font-family:var(--font-mono);color:var(--leather);flex-shrink:0}
265+
.plan-card ul li.x::before{content:"—";color:var(--cream-muted)}
266+
.plan-card ul li:last-child{border-bottom:none}
267+
.plan-card .btn{width:100%;text-align:center;box-sizing:border-box}
268+
269+
/* Q&A */
270+
.qa{max-width:780px;margin:0 auto;padding:0 2rem;border-top:1px solid var(--bg3)}
271+
.qa-row{padding:1.5rem 0;border-bottom:1px solid var(--bg3)}
272+
.qa-row:last-child{border-bottom:none}
273+
.qa-q{font-family:var(--font-serif);font-size:1.1rem;color:var(--cream);margin:0 0 .6rem;line-height:1.35}
274+
.qa-a{font-family:var(--font-serif);font-size:.95rem;color:var(--cream-dim);line-height:1.7;margin:0}
275+
276+
/* Closing CTA band */
277+
.cta-band{text-align:center;padding:4rem 2rem 3.5rem;border-top:1px solid var(--bg3);margin-top:3rem}
278+
.cta-band .mono-eyebrow{display:block;margin-bottom:1rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:3px;text-transform:uppercase;color:var(--rust-light)}
279+
.cta-band h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.3;margin:0 0 1rem}
280+
.cta-band p{max-width:52ch;margin:0 auto 2rem;color:var(--cream-dim);font-size:1rem;line-height:1.7}
281+
.cta-band .cta-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.5rem}
282+
.cta-band .cta-platforms{display:block;font-family:var(--font-mono);font-size:.7rem;color:var(--cream-muted);letter-spacing:.5px}
283+
284+
/* Footer grid (richer footer, replaces simple single-row) */
285+
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:2.5rem;max-width:1080px;margin:0 auto 2rem;padding:0 2rem}
286+
.foot-grid h4{font-family:var(--font-mono);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--leather-light);margin:0 0 .85rem;font-weight:500}
287+
.foot-grid a{display:block;font-family:var(--font-mono);font-size:.8rem;color:var(--cream-muted);padding:.25rem 0;letter-spacing:.3px}
288+
.foot-grid a:hover{color:var(--rust-light)}
289+
.foot-grid .brand-note{font-family:var(--font-mono);font-size:.78rem;color:var(--cream-muted);max-width:28ch;line-height:1.7;margin-top:.75rem}
290+
.foot-bottom{max-width:1080px;margin:0 auto;padding:1.5rem 2rem;border-top:1px solid var(--bg3);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:.68rem;color:var(--cream-muted);letter-spacing:.3px}
291+
292+
@media(max-width:900px){
293+
.two-col{grid-template-columns:1fr;gap:2rem}
294+
.plans-three{grid-template-columns:1fr;gap:1rem}
295+
.foot-grid{grid-template-columns:1fr 1fr;gap:2rem}
296+
}
297+
@media(max-width:640px){
298+
.foot-grid{grid-template-columns:1fr;gap:1.5rem}
299+
.section-head{margin-bottom:2rem}
300+
}
301+
232302
@media(max-width:640px){
233303
.hero{padding-top:2.5rem}
234304
.hero-actions{flex-direction:column;align-items:stretch;max-width:300px;margin:0 auto 1rem}
@@ -482,66 +552,134 @@ <h2>Everything for your business, in one place.</h2>
482552
<div class="browse-more"><a href="/for/">Browse all 195 bundles →</a></div>
483553
</section>
484554

555+
<!-- ── Section: Own your data ────────────────────────────────────── -->
556+
<section class="ownership" style="padding:3rem 0">
557+
<div class="section-head">
558+
<span class="mono-eyebrow">Your data, your hardware</span>
559+
<h2>You didn't start your business to pay six SaaS bills.</h2>
560+
</div>
561+
<div class="two-col">
562+
<div>
563+
<p>Everything Stockyard knows about your business (clients, appointments, invoices, agreements) ends up in one folder on your computer. Your computer, not our servers. Copy it, move it, zip it up. It all works.</p>
564+
<p>Works offline. That's the point. Which means you're the one backing things up, unless you pay for cloud. That's a tradeoff we'd rather be honest about than hide behind the word "seamless."</p>
565+
<div class="kv" style="margin-top:1.5rem;border-top:1px solid var(--bg3);padding-top:1.25rem">
566+
<span class="k">Format</span><span class="v">folder of SQLite files</span>
567+
<span class="k">Schema</span><span class="v">open, documented</span>
568+
<span class="k">Export</span><span class="v">any time, any tool</span>
569+
<span class="k">Lock-in</span><span class="v good">none</span>
570+
<span class="k">Egress fee</span><span class="v good">$0</span>
571+
</div>
572+
</div>
573+
<div class="panel">
574+
<span class="mono-label">Right now, on a real computer</span>
575+
<h3>~/Documents/portland-grooming/</h3>
576+
<div class="kv">
577+
<span class="k">Folder size</span><span class="v">4.7 MB</span>
578+
<span class="k">Files</span><span class="v">9 sqlite + 1 bus</span>
579+
<span class="k">Clients</span><span class="v">142</span>
580+
<span class="k">Appointments</span><span class="v">1,308</span>
581+
<span class="k">Invoices</span><span class="v">1,284</span>
582+
<span class="k">Last backup</span><span class="v">6 min ago</span>
583+
</div>
584+
<p style="margin-top:1.25rem;font-family:var(--font-mono);font-size:.78rem;color:var(--cream-muted);line-height:1.6">
585+
$ cp -r portland-grooming/ /Volumes/USB/<br>
586+
<span style="color:var(--green-light)">ok</span> · 10 files · 4.7 MB · 820 ms
587+
</p>
588+
</div>
589+
</div>
590+
</section>
591+
485592
<!-- ── Section: pricing preview ──────────────────────────────────── -->
486-
<section class="pricing-preview">
487-
<div class="section-label">Pricing</div>
593+
<section class="pricing-preview" id="pricing" style="padding:3rem 0">
594+
<div class="section-head">
595+
<span class="mono-eyebrow">Pricing</span>
488596
<h2>Pick your fit.</h2>
489-
<p class="lede">The software is the same either way. The difference is whether you want encrypted cloud backup.</p>
490-
491-
<div class="tiers">
492-
<div class="tier">
493-
<div class="tier-name">Local</div>
494-
<div class="tier-price"><span class="dollar">$</span>299</div>
495-
<div class="tier-period one-time">one-time</div>
496-
<p class="tier-desc">Everything on your computer. Pay once, use forever.</p>
497-
<ul class="tier-features">
597+
</div>
598+
<div class="plans-three">
599+
<div class="plan-card">
600+
<h3>Local</h3>
601+
<span class="plan-sub">Your machine, your data</span>
602+
<div class="price">$299</div>
603+
<div class="price-sub">paid once · license works forever</div>
604+
<ul>
498605
<li>All 164 tools, all 195 bundles</li>
499-
<li>Works offline forever</li>
500-
<li>Your data in a SQLite file</li>
501-
<li>No subscription</li>
606+
<li>Data on your computer, in a folder you own</li>
607+
<li>No account required, no phone-home</li>
608+
<li>License keeps working even if we disappear</li>
609+
<li class="x">No cloud backup (you handle your own)</li>
502610
</ul>
503-
<a href="/desktop/" class="btn btn-outline">See plan details</a>
504-
</div>
505-
506-
<div class="tier featured">
507-
<div class="tier-badge">Most popular</div>
508-
<div class="tier-name">Cloud Single</div>
509-
<div class="tier-price"><span class="dollar">$</span>49</div>
510-
<div class="tier-period">per month</div>
511-
<p class="tier-desc">Everything in Local, plus encrypted cloud backup for one location.</p>
512-
<ul class="tier-features">
513-
<li>Everything in Local</li>
514-
<li>Encrypted cloud backup</li>
515-
<li>Restore to a new machine</li>
516-
<li>Email support</li>
611+
<a href="/desktop/" class="btn">Install Stockyard</a>
612+
</div>
613+
<div class="plan-card featured">
614+
<h3>Cloud Single Site</h3>
615+
<span class="plan-sub">One location · backup included</span>
616+
<div class="price">$49<span class="unit">/mo</span></div>
617+
<div class="price-sub">or $490/year · everything in Local, plus:</div>
618+
<ul>
619+
<li>Encrypted cloud backup of your data</li>
620+
<li>One location</li>
621+
<li>Last 30 backups kept per site</li>
622+
<li>Cancel any time, keep your folder</li>
517623
</ul>
518-
<a href="/desktop/" class="btn">See plan details</a>
624+
<a href="/desktop/" class="btn btn-outline">Choose Cloud Single</a>
519625
</div>
520-
521-
<div class="tier">
522-
<div class="tier-name">Cloud Multi</div>
523-
<div class="tier-price"><span class="dollar">$</span>129</div>
524-
<div class="tier-period">per month</div>
525-
<p class="tier-desc">For businesses with multiple locations. Each site has its own isolated data.</p>
526-
<ul class="tier-features">
527-
<li>Everything in Cloud Single</li>
626+
<div class="plan-card">
627+
<h3>Cloud Multi-Site</h3>
628+
<span class="plan-sub">Unlimited locations</span>
629+
<div class="price">$129<span class="unit">/mo</span></div>
630+
<div class="price-sub">or $1,290/year · everything in Cloud Single, plus:</div>
631+
<ul>
528632
<li>Unlimited locations</li>
529-
<li>Isolated data per site</li>
530-
<li>Priority support</li>
633+
<li>Isolated namespace per site</li>
634+
<li>Last 30 backups kept per site</li>
635+
<li>Same license, one bill</li>
531636
</ul>
532-
<a href="/desktop/" class="btn btn-outline">See plan details</a>
637+
<a href="/desktop/" class="btn btn-outline">Choose Cloud Multi-Site</a>
533638
</div>
534639
</div>
640+
<div class="pricing-link" style="text-align:center;margin-top:2rem"><a href="/desktop/" style="font-family:var(--font-mono);font-size:.8rem;color:var(--rust-light)">See full pricing page →</a></div>
641+
</section>
535642

536-
<div class="pricing-link"><a href="/desktop/">See full pricing page →</a></div>
643+
<!-- ── Section: Q&A (honest) ─────────────────────────────────────── -->
644+
<section class="trust" style="padding:3rem 0">
645+
<div class="section-head">
646+
<span class="mono-eyebrow">Questions we actually get asked</span>
647+
<h2>The honest answers, not the polished ones.</h2>
648+
</div>
649+
<div class="qa">
650+
<div class="qa-row">
651+
<div class="qa-q">Is this just a Notion template?</div>
652+
<p class="qa-a">No. Stockyard is a desktop application. The tools are real local subprocesses that read and write to SQLite files on your computer. You can open those files in any tool that reads SQLite. You can't do that with a Notion template.</p>
653+
</div>
654+
<div class="qa-row">
655+
<div class="qa-q">What happens if Stockyard, the company, goes away?</div>
656+
<p class="qa-a">Your data is in SQLite files. The schema is public. The tools keep running on your machine because they're installed on your machine. Updates stop. That's the worst thing that happens. We'd rather tell you that than pretend we're too big to fail. The <a href="/constitution/">Stockyard Constitution</a> makes this promise formal.</p>
657+
</div>
658+
<div class="qa-row">
659+
<div class="qa-q">Why serve a $299 product with an AI composer?</div>
660+
<p class="qa-a">Because most people don't know which 8 of 164 tools they want. The composer is how you avoid the blank-slate problem. You still get to swap, remove, or add anything. It's a starting lineup, not a contract.</p>
661+
</div>
662+
<div class="qa-row">
663+
<div class="qa-q">Do I need to be technical?</div>
664+
<p class="qa-a">If you can install software, read a pricing page, and back up a file to a USB drive, you're fine. If you want to inspect the SQLite schema or script against the event bus, that's also fine. It's the same product for both of you.</p>
665+
</div>
666+
<div class="qa-row">
667+
<div class="qa-q">Anything else?</div>
668+
<p class="qa-a">Active service members and veterans get Stockyard Local free. <a href="/veterans/">Details here</a>. We will never send you a "we've updated our pricing" email. If we raise prices, every existing customer keeps their current rate.</p>
669+
</div>
670+
</div>
537671
</section>
538672

539-
<!-- ── Section: trust promise ────────────────────────────────────── -->
540-
<section class="trust">
541-
<h2>If Stockyard disappears tomorrow, your software keeps working.</h2>
542-
<p>The Local license has no expiry. The binary on your machine keeps running. Your data is in SQLite files you can open with any tool, back up by copying a folder, and move by moving a folder.</p>
543-
<p>We will never send you a "we've updated our pricing" email. If we raise prices, every existing customer keeps their current rate. That promise is called the <a href="/constitution/">Stockyard Constitution</a> and we've signed it publicly.</p>
544-
<p>Active service members and veterans get Stockyard Local free. <a href="/veterans/">Details here</a>.</p>
673+
<!-- ── Section: closing CTA ──────────────────────────────────────── -->
674+
<section class="cta-band">
675+
<span class="mono-eyebrow">Last thing</span>
676+
<h2>Stop renting the software that runs your business.</h2>
677+
<p>Describe the business. Get the toolkit. Own the folder. $299 once. Cloud is optional and always will be.</p>
678+
<div class="cta-actions">
679+
<a href="/desktop/" class="btn">Install Stockyard</a>
680+
<a href="#pricing" class="btn btn-outline">See pricing</a>
681+
</div>
682+
<span class="cta-platforms">macOS 12+ · Windows 10+ · most Linux · ~180 MB download</span>
545683
</section>
546684

547685
<!-- ── Developer note ────────────────────────────────────────────── -->
@@ -551,17 +689,34 @@ <h2>If Stockyard disappears tomorrow, your software keeps working.</h2>
551689
</aside>
552690

553691
<footer>
554-
<p class="sig">Stockyard. Your tools, your data, your hardware.</p>
555-
<nav>
692+
<div class="foot-grid">
693+
<div>
694+
<p class="sig" style="margin:0">Stockyard.</p>
695+
<p class="brand-note">Frontier general store software for small businesses who'd rather own than rent.</p>
696+
</div>
697+
<div>
698+
<h4>Product</h4>
556699
<a href="/desktop/">Pricing</a>
557700
<a href="/for/">Bundles</a>
558701
<a href="/about/">About</a>
559-
<a href="/constitution/">Constitution</a>
560-
<a href="/veterans/">Veterans</a>
561702
<a href="/proxy-only/">Developers</a>
703+
</div>
704+
<div>
705+
<h4>Promises</h4>
706+
<a href="/constitution/">Constitution</a>
707+
<a href="/veterans/">Veterans (free)</a>
562708
<a href="https://github.com/stockyard-dev/Stockyard" rel="noopener">GitHub</a>
563-
</nav>
564-
<p class="fine">hello@stockyard.dev · Built by a solo developer in Minnesota · © 2026</p>
709+
</div>
710+
<div>
711+
<h4>Contact</h4>
712+
<a href="mailto:hello@stockyard.dev">hello@stockyard.dev</a>
713+
<p class="brand-note" style="margin-top:.5rem">Built by a solo developer in Minnesota.</p>
714+
</div>
715+
</div>
716+
<div class="foot-bottom">
717+
<span>© 2026 Stockyard</span>
718+
<span>hello@stockyard.dev</span>
719+
</div>
565720
</footer>
566721

567722
<script>

0 commit comments

Comments
 (0)