yuukiii/hermes-mcp
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(ui): v1 launch — consumer hero, onboarding flow, Obsidian app card

Browse Source
This commit is contained in:
Garfield
2026-06-12 06:39:07 -04:00
parent f74f90a2f0
commit bc58befd5e
11 changed files with 211 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
product/site/index.html
View File

@@ -24,6 +24,53 @@
</div>
</div>
</nav>
<!-- Consumer section — v1 launch: mortgage brokers, coaches, small business owners -->
<section class="consumer-hero">
<div class="wrap consumer-hero-inner">
<div class="consumer-copy">
<div class="eyebrow">Now available for individuals</div>
<h2>Tell Claude what to post.<br>It handles your notes, email, and social.</h2>
<p class="lede">
Connect your Obsidian vault, email inbox, Facebook page, and Instagram account once.
Then just ask Claude or ChatGPT — draft a post, search your notes, send a follow-up email.
No switching apps.
</p>
<div class="consumer-features">
<span>&#x1F4D3; Obsidian vault</span>
<span>&#x2709;&#xFE0F; Email (Gmail / Yahoo)</span>
<span>&#x1F4D8; Facebook Pages</span>
<span>&#x1F4F7; Instagram</span>
</div>
<div class="actions">
<a class="button primary" href="https://app.squaremcp.com">Try it free</a>
<a class="button secondary" href="https://app.squaremcp.com">Create account</a>
</div>
</div>
<aside class="consumer-panel">
<div class="consumer-example">
<div class="chat-bubble user">Post a rate update to my Facebook page — rates dropped to 6.5% today, link to my Calendly.</div>
<div class="chat-bubble ai">Posted to Ferrari Lending. &#x2713; "Rates dropped to 6.5% this week — book a free 30-min call: calendly.com/alexferrari/30min"</div>
<div class="chat-bubble user">Search my Obsidian notes for anything about the Johnson file.</div>
<div class="chat-bubble ai">Found 3 notes: Johnson Pre-approval (May 2), Johnson Follow-up (May 15), Johnson Closing Checklist. Want me to open one?</div>
</div>
</aside>
</div>
</section>
<style>
.consumer-hero{background:linear-gradient(135deg,#f0f4ff 0%,#faf5ff 100%);border-bottom:1px solid #e2e8f0;padding:64px 0}
.consumer-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.consumer-copy h2{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;color:#1a1a2e;line-height:1.2;margin-bottom:16px}
.consumer-copy .lede{font-size:1.05rem;color:#475569;line-height:1.65;margin-bottom:20px}
.consumer-features{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.consumer-features span{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:6px 14px;font-size:0.875rem;color:#374151}
.consumer-panel{background:#fff;border-radius:16px;padding:24px;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.chat-bubble{border-radius:12px;padding:12px 16px;font-size:0.875rem;line-height:1.5;margin-bottom:10px}
.chat-bubble.user{background:#ede9fe;color:#3730a3;margin-left:20px}
.chat-bubble.ai{background:#f0fdf4;color:#166534;margin-right:20px}
@media(max-width:768px){.consumer-hero-inner{grid-template-columns:1fr}.consumer-panel{display:none}}
</style>
<header class="hero">
<div class="wrap hero-grid">
<div class="hero-copy">