Will Anderson
5cb13d67f7
Replace all return "..." HTML string literals with native El templates —
removes all \" escapes, converts + interpolations to {expr}/{raw(expr)},
and replaces conditional string concatenation with {#if}/{#else}/{/if}.
No functional changes; output is identical.
92 lines
7.0 KiB
EmacsLisp
92 lines
7.0 KiB
EmacsLisp
// components/environmental.el - Environmental impact section.
|
|
//
|
|
// The honest case for why local-first AI has a lower footprint than cloud AI.
|
|
// Not greenwashing - a structural argument. The benefit follows from the
|
|
// architecture; it wasn't engineered as a feature, but it's real.
|
|
|
|
fn environmental() -> String {
|
|
return <section id="environmental" aria-label="Environmental impact" style="padding:8rem 2.5rem;background:var(--bg)">
|
|
<div class="container-lg">
|
|
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start" class="env-grid">
|
|
|
|
<div>
|
|
<div style="display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem">
|
|
<div class="navy-line-left" style="width:3rem;flex-shrink:0"></div>
|
|
<span class="label reveal" style="color:var(--navy-85)">Environmental impact</span>
|
|
</div>
|
|
|
|
<h2 class="display-lg reveal" style="transition-delay:80ms;margin-bottom:1.5rem">
|
|
Fewer tokens.<br><span class="gold">Same work done.</span>
|
|
</h2>
|
|
|
|
<p class="reveal" style="transition-delay:160ms;font-family:var(--body);font-weight:300;font-size:1rem;color:var(--t2);line-height:1.8;margin-bottom:1.25rem">
|
|
Persistent context means shorter, more targeted prompts on every call. Less computation. Lower cost. A smaller footprint. This isn't a setting you toggle - it's what the architecture does by default.
|
|
</p>
|
|
|
|
<p class="reveal" style="transition-delay:220ms;font-family:var(--body);font-weight:300;font-size:1rem;color:var(--t2);line-height:1.8;margin-bottom:1.25rem">
|
|
Every time you open ChatGPT and explain who you are again, that's computation that didn't need to happen. With Neuron, that context tax doesn't accumulate. Over months of use, the savings compound into a meaningful reduction in total compute - and a meaningful reduction in what you pay.
|
|
</p>
|
|
|
|
<p class="reveal" style="transition-delay:280ms;font-family:var(--body);font-weight:300;font-size:1rem;color:var(--t2);line-height:1.8;margin-bottom:2.5rem">
|
|
This isn't a green marketing claim. It's a consequence of the design. The same architecture that makes Neuron better for you also makes it lighter on the planet.
|
|
</p>
|
|
|
|
<div class="reveal" style="transition-delay:340ms;background:var(--card);border:1px solid rgba(0,82,160,.18);padding:2rem">
|
|
<p style="font-family:var(--body);font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--navy);margin-bottom:1.25rem">Savings calculator</p>
|
|
<p style="font-family:var(--body);font-size:0.875rem;color:var(--t2);margin-bottom:1rem">If you spend <strong id="calc-spend" style="color:var(--t1)">$50</strong>/month on AI…</p>
|
|
<input type="range" id="calc-slider" min="10" max="500" step="10" value="50" style="width:100%;accent-color:var(--navy);margin-bottom:1.5rem">
|
|
<div style="display:flex;align-items:baseline;gap:0.75rem;margin-bottom:0.375rem">
|
|
<span id="calc-savings" style="font-family:var(--head);font-size:2.5rem;font-weight:600;color:var(--navy)">$240</span>
|
|
<span style="font-family:var(--body);font-size:0.7rem;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:var(--t3)">saved per year</span>
|
|
</div>
|
|
<p style="font-family:var(--body);font-size:0.75rem;color:var(--t3)">Based on estimated token reduction applied to your monthly spend.</p>
|
|
</div>
|
|
|
|
<script src="/js/environmental.js" defer></script>
|
|
</div>
|
|
|
|
<div style="display:flex;flex-direction:column;gap:1.5rem;padding-top:1rem">
|
|
|
|
<div class="reveal card-dark" style="transition-delay:100ms;padding:1.75rem 2rem;border-left:3px solid rgba(0,120,84,.40)">
|
|
<p style="font-family:var(--body);font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,120,84,.70);margin-bottom:0.75rem">Local inference - coming</p>
|
|
<p style="font-family:var(--body);font-weight:400;font-size:0.9375rem;color:var(--t1);margin-bottom:0.5rem">Your GPU, already powered on</p>
|
|
<p style="font-family:var(--body);font-weight:300;font-size:0.875rem;color:var(--t2);line-height:1.7">
|
|
The design: when you run inference locally via Ollama, your device's GPU handles it - hardware that's already consuming power. No data center spins up a cluster for your query. No round-trip. No idle servers waiting at scale. This is where we're headed.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="reveal card-dark" style="transition-delay:200ms;padding:1.75rem 2rem;border-left:3px solid rgba(0,120,84,.40)">
|
|
<p style="font-family:var(--body);font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,120,84,.70);margin-bottom:0.75rem">No database server for your data</p>
|
|
<p style="font-family:var(--body);font-weight:400;font-size:0.9375rem;color:var(--t1);margin-bottom:0.5rem">On-device storage</p>
|
|
<p style="font-family:var(--body);font-weight:300;font-size:0.875rem;color:var(--t2);line-height:1.7">
|
|
Your context lives on your device in a purpose-built local storage layer. No cloud database servers running 24/7 to store and serve your conversations. No replication across availability zones. Just your device.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="reveal card-dark" style="transition-delay:300ms;padding:1.75rem 2rem;border-left:3px solid rgba(0,120,84,.40)">
|
|
<p style="font-family:var(--body);font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,120,84,.70);margin-bottom:0.75rem">Persistent context = less recomputation</p>
|
|
<p style="font-family:var(--body);font-weight:400;font-size:0.9375rem;color:var(--t1);margin-bottom:0.5rem">No re-explaining. No wasted tokens.</p>
|
|
<p style="font-family:var(--body);font-weight:300;font-size:0.875rem;color:var(--t2);line-height:1.7">
|
|
Neuron surfaces exactly what's relevant for each conversation - no re-deriving who you are from long histories. Shorter, more targeted prompts. More with less.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="reveal" style="transition-delay:400ms;padding:1.25rem 1.75rem;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.07);border-radius:2px">
|
|
<p style="font-family:var(--body);font-size:0.8125rem;font-weight:300;color:var(--t3);line-height:1.7">
|
|
<strong style="font-weight:500;color:var(--t2)">The honest picture:</strong> When you use Neuron with BYOK providers (OpenAI, Anthropic, Grok) or Neuron Inference, those queries travel to inference servers - that footprint exists. The savings come from the architecture: persistent memory and local-first design reduce the total computation required to get the same work done.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
<style>
|
|
@media (max-width: 768px) {
|
|
.env-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
|
|
}
|
|
</style>
|
|
}
|