patx/vegy
Refine homepage layouts and add sourced platform proof
Commit 2ca3393 · patx · 2026-09-21T20:13:07-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index 8d3c4b0..3c4ec10 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -25,7 +25,7 @@
<link rel="stylesheet" href="styles.css" />
</head>
-<body>
+<body class="marketing">
<header class="masthead" id="masthead">
<div class="wrap">
@@ -87,7 +87,7 @@
</div>
<p class="hero-note">
- Email, text & VoIP · Web, iOS & Android · QuickBooks sync
+ Take orders by email, text, or VoIP, or through the web, iOS, and Android apps, with QuickBooks sync.
</p>
</div>
@@ -114,16 +114,20 @@
<div class="shot-dots" id="shotDots"></div>
</div>
- <div class="trust" aria-label="Distributors using Vegy">
- <div class="trust-logos">
- <img src="gardenfresh.webp" width="437" height="132" loading="lazy"
- alt="Garden Fresh Produce LLC" />
- <span class="trust-sep" aria-hidden="true"></span>
- <img src="prima.webp" width="315" height="132" loading="lazy"
- alt="Prima Produce" />
+ <section class="trust" aria-labelledby="proof-title">
+ <div class="proof-result">
+ <h2 class="h-md" id="proof-title">Over $2 million in orders in Vegy’s first year</h2>
+ <p>Reported by After Dark Labs, the team that builds and operates Vegy. This is a platform-wide result.</p>
+ <a class="link" href="https://afterdarklabs.io/">Read the Vegy project write-up at After Dark Labs</a>
</div>
- <p class="trust-caption">Garden Fresh Produce and Prima Produce use Vegy to take orders.</p>
- </div>
+ <div class="proof-customers">
+ <div class="trust-logos">
+ <img src="gardenfresh.webp" width="437" height="132" loading="lazy" alt="Garden Fresh Produce LLC" />
+ <img src="prima.webp" width="315" height="132" loading="lazy" alt="Prima Produce" />
+ </div>
+ <p class="trust-caption">Garden Fresh Produce and Prima Produce use Vegy to take orders.</p>
+ </div>
+ </section>
</div>
</section>
@@ -139,6 +143,7 @@
</p>
</div>
+ <p class="example-note">Examples of incoming orders and how Vegy handles them.</p>
<div class="swap reveal">
<div class="swap-head">
<span>How it arrives today</span>
@@ -149,7 +154,7 @@
<div class="swap-row">
<div class="swap-from">
<span class="cell-label">How it arrives today</span>
- <span class="chan">VoIP call · 11:40 PM</span>
+ <span class="chan">VoIP call at 11:40 PM</span>
<p>“Hey it’s Mike, give me the usual plus a couple cases of romaine, uh — call me back.”</p>
</div>
<div class="swap-arrow" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></div>
@@ -162,7 +167,7 @@
<div class="swap-from">
<span class="cell-label">How it arrives today</span>
<span class="chan">Text message</span>
- <p>“4 tomato, 2 onion, 6 lettuce” — no pack sizes, no case counts, no account.</p>
+ <p>“4 tomato, 2 onion, 6 lettuce” — missing pack sizes, case counts, and the customer account.</p>
</div>
<div class="swap-arrow" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></div>
<div class="swap-to">
@@ -173,7 +178,7 @@
<div class="swap-row">
<div class="swap-from">
<span class="cell-label">How it arrives today</span>
- <span class="chan">Email · PDF attached</span>
+ <span class="chan">Email with a PDF attached</span>
<p>An order sheet from 2019, with prices that expired two seasons ago.</p>
</div>
<div class="swap-arrow" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></div>
@@ -203,6 +208,7 @@
<div class="wrap">
<div class="section-head center reveal">
<h2 class="h-lg">Save time, reduce errors, and prevent shorts</h2>
+ <p class="lede">The sample orders below illustrate the workflow; names and amounts are examples.</p>
</div>
<div class="rows">
@@ -239,7 +245,7 @@
</div>
<div class="row-visual">
<div class="mock">
- <div class="mock-head"><span>Sunrise Cafe · Tuesday</span><span class="tag">Tier 2</span></div>
+ <div class="mock-head"><span>Sunrise Cafe on Tuesday</span><span class="tag">Tier 2</span></div>
<div class="mock-body">
<div class="mock-line"><span>Artichoke 12CT</span><span class="pack">2 cases</span><span class="price">$143.64</span></div>
<div class="mock-line"><span>Arugula, Baby 2/1.5lb</span><span class="pack">6 cases</span><span class="price">$133.68</span></div>
@@ -294,15 +300,6 @@
branded app and web catalog — then structures them in one place.
</p>
</article>
-
- <article class="card">
- <h3 class="h-sm">Pricing that knows the customer</h3>
- <p>
- Customer-specific pricing tiers and contract pricing applied automatically,
- plus per-account order minimums enforced at checkout.
- </p>
- </article>
-
<article class="card">
<h3 class="h-sm">A catalog that stays current</h3>
<p>
@@ -310,29 +307,71 @@
important announcements — more than a caller or old order sheet ever sees.
</p>
</article>
-
<article class="card">
<h3 class="h-sm">QuickBooks & ERP sync</h3>
<p>
Customers, items, and invoices flow into QuickBooks or your existing ERP.
- No double entry, no end-of-day export ritual.
+ Syncing removes the need for double entry and end-of-day exports.
</p>
</article>
+ </div>
- <article class="card">
- <h3 class="h-sm">Paperwork in one click</h3>
+ <div class="rows feature-details">
+ <article class="row reveal">
+ <div class="row-text">
+ <h3 class="h-md">Pricing that knows the customer</h3>
+ <p>
+ Customer-specific pricing tiers and contract pricing applied automatically,
+ plus per-account order minimums enforced at checkout.
+ </p>
+ </div>
+ <div class="row-visual">
+ <div class="mock">
+ <div class="mock-head">Customer pricing example</div>
+ <div class="mock-body">
+ <div class="mock-line"><span>Customer account</span><span class="price">Contract pricing</span></div>
+ <div class="mock-line"><span>Order minimum</span><span class="price">Applied at checkout</span></div>
+ </div>
+ </div>
+ </div>
+ </article>
+ <article class="row reveal">
+ <div class="row-text">
+ <h3 class="h-md">Paperwork in one click</h3>
<p>
Pull sheets, price lists, and sales reports export instantly — in the format
your warehouse and your bookkeeper already expect.
</p>
+ </div>
+ <div class="row-visual">
+ <div class="mock">
+ <div class="mock-head">Export options</div>
+ <div class="mock-body">
+ <div class="mock-line"><span>Warehouse</span><span class="price">Pull sheets</span></div>
+ <div class="mock-line"><span>Sales desk</span><span class="price">Price lists</span></div>
+ <div class="mock-line"><span>Bookkeeping</span><span class="price">Sales reports</span></div>
+ </div>
+ </div>
+ </div>
</article>
-
- <article class="card">
- <h3 class="h-sm">Inventory & delivery tracking</h3>
+ <article class="row reveal">
+ <div class="row-text">
+ <h3 class="h-md">Inventory & delivery tracking</h3>
<p>
Keep inventory and payment status attached to the order, and track
deliveries through to the door without a second system.
</p>
+ </div>
+ <div class="row-visual">
+ <div class="mock">
+ <div class="mock-head">Order tracking example</div>
+ <div class="mock-body">
+ <div class="mock-line"><span>Inventory</span><span class="price">Attached to order</span></div>
+ <div class="mock-line"><span>Payment status</span><span class="price">Attached to order</span></div>
+ <div class="mock-line"><span>Delivery</span><span class="price">Tracked to the door</span></div>
+ </div>
+ </div>
+ </div>
</article>
</div>
</div>
@@ -449,8 +488,8 @@
<!-- ── FAQ ──────────────────────────────────────────────────────────── -->
<section class="section" id="faq">
- <div class="wrap wrap-narrow">
- <div class="section-head center reveal">
+ <div class="wrap faq-layout">
+ <div class="section-head reveal">
<h2 class="h-lg">The questions you're actually asking</h2>
</div>
diff --git a/docs/styles.css b/docs/styles.css
index d433da4..45647d9 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -602,11 +602,10 @@ a {
.hero-note {
margin-top: 1.4rem;
- font-family: var(--mono);
- font-size: 0.74rem;
- letter-spacing: 0.09em;
- text-transform: uppercase;
- color: var(--muted);
+ max-width: 660px;
+ margin-inline: auto;
+ font-size: 0.95rem;
+ color: var(--ink-2);
}
.hero-visual {
@@ -1561,3 +1560,89 @@ a {
transform: none;
}
}
+
+/* Homepage content layouts */
+.marketing .masthead,
+.marketing .mobile-nav,
+.marketing .dock {
+ background: #fff;
+ backdrop-filter: none;
+ -webkit-backdrop-filter: none;
+}
+
+.marketing .trust {
+ display: grid;
+ grid-template-columns: 1.15fr 1fr;
+ gap: clamp(2rem, 5vw, 4rem);
+ align-items: center;
+ text-align: left;
+}
+
+.proof-result p {
+ margin: 1rem 0;
+ color: var(--ink-2);
+}
+
+.proof-result .link {
+ color: var(--green-dark);
+ font-size: 0.95rem;
+}
+
+.proof-customers {
+ text-align: center;
+}
+
+.marketing .trust-logos img {
+ max-width: 45%;
+ height: auto;
+ max-height: 56px;
+ object-fit: contain;
+}
+
+.example-note {
+ margin-bottom: 1rem;
+ color: var(--ink-2);
+ font-size: 0.95rem;
+}
+
+.feature-details {
+ margin-top: clamp(3rem, 6vw, 5rem);
+}
+
+.feature-details .mock-line {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.feature-details .price {
+ text-align: right;
+}
+
+.marketing .card:hover {
+ transform: none;
+ box-shadow: none;
+ border-color: var(--border);
+}
+
+.faq-layout {
+ display: grid;
+ grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
+ gap: clamp(2rem, 6vw, 5rem);
+ align-items: start;
+}
+
+@media (max-width: 800px) {
+ .marketing .trust,
+ .faq-layout {
+ grid-template-columns: minmax(0, 1fr);
+ }
+
+ .faq-layout .section-head {
+ margin-bottom: 0;
+ }
+
+ .marketing .row,
+ .marketing .cards,
+ .marketing .included {
+ grid-template-columns: minmax(0, 1fr);
+ }
+}