Rewrite landing to El component architecture
Full El component split: nav, hero, pillars, inference, pricing, footer, about, enterprise, mission, viral, local_first, comparison, efficiency, environmental. - About page rewritten first-person (Will's voice), photo included, no product spoilers - Stripe checkout wired: env() reads STRIPE_SECRET_KEY/PRICE_* at startup - Minor parent-onboarding callout added to pricing section - Inference pricing: "at cost" removed, now "priced below competitors" - Nav: wordmark image, About link active on /about - .gitignore: excludes .env, dist/, generated HTML
This commit is contained in:
Will Anderson
+145
@@ -0,0 +1,145 @@
|
||||
// components/pricing.el — Three pricing cards: Free / Professional / Founding Member.
|
||||
// Accepts the founding counter values as parameters so main.el can inject
|
||||
// server-side rendered counts without JS.
|
||||
|
||||
fn founding_spots_html(sold: Int, total: Int) -> String {
|
||||
let remaining: Int = total - sold
|
||||
let pct: Int = (sold * 100) / total
|
||||
let pct_str: String = int_to_str(pct)
|
||||
let remaining_str: String = int_to_str(remaining)
|
||||
let sold_str: String = int_to_str(sold)
|
||||
let total_str: String = int_to_str(total)
|
||||
return "
|
||||
<div class=\"founding-spots\">
|
||||
<p class=\"founding-spots-label\">Only " + remaining_str + " left</p>
|
||||
<div class=\"founding-spots-bar\"><div class=\"founding-spots-fill\" style=\"width:" + pct_str + "%\"></div></div>
|
||||
<p class=\"founding-spots-sub\">" + sold_str + " of " + total_str + " claimed</p>
|
||||
</div>
|
||||
"
|
||||
}
|
||||
|
||||
fn pricing(sold: Int, total: Int) -> String {
|
||||
let spots_html: String = founding_spots_html(sold, total)
|
||||
let remaining: Int = total - sold
|
||||
let pct: Int = (sold * 100) / total
|
||||
let pct_str: String = int_to_str(pct)
|
||||
let remaining_str: String = int_to_str(remaining)
|
||||
let total_str: String = int_to_str(total)
|
||||
|
||||
return "
|
||||
<section id=\"pricing\" aria-label=\"Pricing\">
|
||||
<div class=\"container\">
|
||||
|
||||
<div class=\"pricing-header\">
|
||||
<div class=\"pricing-label-row reveal\">
|
||||
<div style=\"height:1px;width:4rem;background:linear-gradient(to right,transparent,rgba(0,82,160,.35))\"></div>
|
||||
<span class=\"label\" style=\"color:var(--navy-85)\">Pricing</span>
|
||||
<div style=\"height:1px;width:4rem;background:linear-gradient(to left,transparent,rgba(0,82,160,.35))\"></div>
|
||||
</div>
|
||||
<h2 class=\"display-lg pricing-headline reveal\" style=\"transition-delay:80ms\">Own it. Don't rent it.</h2>
|
||||
<p class=\"pricing-sub reveal\" style=\"transition-delay:160ms\">Neuron inference on every paid plan. Cheaper than OpenAI, Anthropic, and Google — on day one.</p>
|
||||
</div>
|
||||
|
||||
<div class=\"pricing-grid\">
|
||||
|
||||
<div class=\"pricing-card card-dark reveal\">
|
||||
<p class=\"pricing-tier\">Free</p>
|
||||
<div class=\"pricing-price-row\">
|
||||
<span class=\"pricing-price\">$0</span>
|
||||
<span class=\"pricing-cadence\">forever</span>
|
||||
</div>
|
||||
<p class=\"pricing-tagline\">Start building your memory. No card required.</p>
|
||||
<ul class=\"pricing-features\">
|
||||
<li><span class=\"dash\">-</span><span>Persistent memory — never resets</span></li>
|
||||
<li><span class=\"dash\">-</span><span>Neuron inference — metered, priced below OpenAI and Anthropic</span></li>
|
||||
<li><span class=\"dash\">-</span><span>Local inference via Ollama</span></li>
|
||||
<li><span class=\"dash\">-</span><span>Bring your own API keys (optional)</span></li>
|
||||
<li><span class=\"dash\">-</span><span>Unlimited projects</span></li>
|
||||
<li><span class=\"dash\">-</span><span>3 marketplace plugins included</span></li>
|
||||
<li><span class=\"dash\">-</span><span>Core built-in capabilities</span></li>
|
||||
</ul>
|
||||
<div style=\"flex:1\"></div>
|
||||
<div class=\"pricing-cta pricing-cta-ghost\">
|
||||
<a href=\"https://github.com/neuron-technologies/neuron\">Download free →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=\"pricing-card card-dark reveal\" style=\"transition-delay:150ms\">
|
||||
<p class=\"pricing-tier\">Professional</p>
|
||||
<div class=\"pricing-price-row\">
|
||||
<span class=\"pricing-price\">$19</span>
|
||||
<span class=\"pricing-cadence\">/ month</span>
|
||||
</div>
|
||||
<p class=\"pricing-tagline\">Full access. Neuron inference — cheaper than what you're paying now.</p>
|
||||
<ul class=\"pricing-features\">
|
||||
<li><span class=\"dash\">-</span><span>Neuron inference — metered, below OpenAI and Anthropic rates</span></li>
|
||||
<li><span class=\"dash\">-</span><span>ChatGPT Plus is $20/mo and forgets you every session. Neuron remembers everything and costs less per token.</span></li>
|
||||
<li><span class=\"dash\">-</span><span>Everything in Free</span></li>
|
||||
<li><span class=\"dash\">-</span><span>Unlimited projects</span></li>
|
||||
<li><span class=\"dash\">-</span><span>Full plugin marketplace</span></li>
|
||||
<li><span class=\"dash\">-</span><span>Advanced integrations — IDE, Slack, and more</span></li>
|
||||
<li><span class=\"dash\">-</span><span>Early access to new features</span></li>
|
||||
</ul>
|
||||
<div style=\"flex:1\"></div>
|
||||
<div class=\"pricing-cta pricing-cta-navy\">
|
||||
<button class=\"pricing-cta-navy\" data-checkout=\"professional\">Get Started →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=\"pricing-card featured reveal\" style=\"transition-delay:300ms\">
|
||||
<p class=\"pricing-tier\">Founding Member</p>
|
||||
<div class=\"pricing-price-row\">
|
||||
<span class=\"pricing-price\">$199</span>
|
||||
<span class=\"pricing-cadence\">lifetime</span>
|
||||
</div>
|
||||
<p class=\"pricing-tagline\">Pay once. Neuron inference forever. No subscription, ever.</p>
|
||||
|
||||
" + spots_html + "
|
||||
|
||||
<ul class=\"pricing-features\">
|
||||
<li><span class=\"dash\">-</span><span>Neuron inference — priced below competitors, forever, as it improves</span></li>
|
||||
<li><span class=\"dash\">-</span><span>Everything in Professional — forever</span></li>
|
||||
<li><span class=\"dash\">-</span><span>Never pay again — lifetime updates included</span></li>
|
||||
<li><span class=\"dash\">-</span><span>Founding member badge in the app</span></li>
|
||||
<li><span class=\"dash\">-</span><span>Private community — direct line to the team</span></li>
|
||||
<li><span class=\"dash\">-</span><span>Shape the roadmap — your votes carry more weight</span></li>
|
||||
<li><span class=\"dash\">-</span><span>Beta features before general release</span></li>
|
||||
<li><span class=\"dash\">-</span><span>Name in the credits</span></li>
|
||||
</ul>
|
||||
|
||||
<div style=\"flex:1\"></div>
|
||||
<div class=\"pricing-cta pricing-cta-solid\">
|
||||
<button class=\"pricing-cta-solid\" data-checkout=\"founding\">Claim your spot →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class=\"founding-banner reveal\">
|
||||
<div>
|
||||
<p class=\"founding-banner-label\">Founding Member Spots</p>
|
||||
<div style=\"display:flex;align-items:baseline;gap:.5rem;margin:.25rem 0\">
|
||||
<span class=\"founding-banner-count\">" + remaining_str + "</span>
|
||||
<span class=\"founding-banner-sub\">remaining of <span>" + total_str + "</span></span>
|
||||
</div>
|
||||
<div class=\"founding-banner-bar\"><div class=\"founding-banner-fill\" style=\"width:" + pct_str + "%\"></div></div>
|
||||
</div>
|
||||
<button class=\"btn-primary\" data-checkout=\"founding\" style=\"white-space:nowrap\">Claim spot →</button>
|
||||
</div>
|
||||
|
||||
<p class=\"pricing-fine reveal\" style=\"margin-top:2.5rem\">
|
||||
Neuron inference on all plans · Bring your own keys if you want · Your data stays yours · Same support for every user
|
||||
</p>
|
||||
|
||||
<div class=\"reveal\" style=\"margin-top:3rem;padding:1.5rem 2rem;border:1px solid rgba(0,82,160,.18);border-radius:8px;background:rgba(0,82,160,.03);\">
|
||||
<p class=\"label\" style=\"margin-bottom:.75rem;font-size:.65rem\">For families</p>
|
||||
<p style=\"font-family:var(--body);font-weight:300;font-size:.9rem;color:var(--t2);line-height:1.8;\">
|
||||
<strong style=\"color:var(--t1);font-weight:500\">Minors require a parent account.</strong>
|
||||
Children and teens can't create accounts on their own — a parent or guardian creates the family account, configures access, and remains in the loop. The minor's experience is fully private from everyone except the trusted adult who set it up.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
"
|
||||
}
|
||||
Reference in New Issue
Block a user