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
@@ -0,0 +1,140 @@
|
||||
// components/comparison.el — Neuron vs the field comparison section.
|
||||
|
||||
fn comparison() -> String {
|
||||
return "
|
||||
<section id=\"comparison\" aria-label=\"Comparison\" style=\"padding:8rem 2.5rem;background:var(--bg2)\">
|
||||
<div class=\"container\">
|
||||
|
||||
<div class=\"comparison-header\" style=\"text-align:center;margin-bottom:4rem\">
|
||||
<div style=\"display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:2rem\">
|
||||
<div class=\"navy-line-left\" style=\"width:4rem;flex-shrink:0;transform:scaleX(-1)\"></div>
|
||||
<span class=\"label reveal\" style=\"color:var(--navy-85)\">How we compare</span>
|
||||
<div class=\"navy-line-left\" style=\"width:4rem;flex-shrink:0\"></div>
|
||||
</div>
|
||||
<h2 class=\"display-lg reveal\" style=\"transition-delay:80ms;max-width:36rem;margin:0 auto 1.25rem\">
|
||||
Every other AI forgets you.<br><span class=\"gold\">Neuron doesn't.</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.7;max-width:32rem;margin:0 auto\">
|
||||
The others are tools. Neuron is a relationship. Here's the difference.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class=\"comparison-table reveal\" style=\"transition-delay:200ms;overflow-x:auto\">
|
||||
<table style=\"width:100%;border-collapse:collapse;font-family:var(--body);font-size:0.875rem\">
|
||||
<thead>
|
||||
<tr style=\"border-bottom:2px solid rgba(0,82,160,.20)\">
|
||||
<th style=\"text-align:left;padding:1rem 1.5rem 1rem 0;font-weight:500;letter-spacing:0.08em;color:var(--t3);font-size:0.75rem;text-transform:uppercase;width:28%\">Feature</th>
|
||||
<th style=\"text-align:center;padding:1rem 1rem;font-weight:600;color:var(--navy);font-size:0.875rem;width:18%\">
|
||||
<div style=\"display:inline-flex;flex-direction:column;align-items:center;gap:0.25rem\">
|
||||
<span style=\"font-size:1.1rem\">●</span>
|
||||
Neuron
|
||||
</div>
|
||||
</th>
|
||||
<th style=\"text-align:center;padding:1rem 1rem;font-weight:400;color:var(--t3);font-size:0.875rem;width:13.5%\">ChatGPT</th>
|
||||
<th style=\"text-align:center;padding:1rem 1rem;font-weight:400;color:var(--t3);font-size:0.875rem;width:13.5%\">Claude</th>
|
||||
<th style=\"text-align:center;padding:1rem 1rem;font-weight:400;color:var(--t3);font-size:0.875rem;width:13.5%\">Gemini</th>
|
||||
<th style=\"text-align:center;padding:1rem 1rem;font-weight:400;color:var(--t3);font-size:0.875rem;width:13.5%\">Copilot</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr style=\"border-bottom:1px solid rgba(0,0,0,.06)\">
|
||||
<td style=\"padding:1rem 1.5rem 1rem 0;color:var(--t1);font-weight:500\">Persistent memory</td>
|
||||
<td style=\"text-align:center;padding:1rem\"><span style=\"color:#008040;font-weight:700;font-size:1.1rem\">✓</span><br><span style=\"font-size:0.7rem;color:var(--t3);font-weight:400\">Permanent, structured</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#D4A017\">●</span><br><span style=\"font-size:0.7rem\">Limited memory</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span><br><span style=\"font-size:0.7rem\">Resets each session</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span><br><span style=\"font-size:0.7rem\">Resets each session</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span><br><span style=\"font-size:0.7rem\">Resets each session</span></td>
|
||||
</tr>
|
||||
<tr style=\"border-bottom:1px solid rgba(0,0,0,.06);background:rgba(0,82,160,.02)\">
|
||||
<td style=\"padding:1rem 1.5rem 1rem 0;color:var(--t1);font-weight:500\">Your data stays local</td>
|
||||
<td style=\"text-align:center;padding:1rem\"><span style=\"color:#008040;font-weight:700;font-size:1.1rem\">✓</span><br><span style=\"font-size:0.7rem;color:var(--t3);font-weight:400\">Runs on your device</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span><br><span style=\"font-size:0.7rem\">Cloud only</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span><br><span style=\"font-size:0.7rem\">Cloud only</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span><br><span style=\"font-size:0.7rem\">Cloud only</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span><br><span style=\"font-size:0.7rem\">Cloud only</span></td>
|
||||
</tr>
|
||||
<tr style=\"border-bottom:1px solid rgba(0,0,0,.06)\">
|
||||
<td style=\"padding:1rem 1.5rem 1rem 0;color:var(--t1);font-weight:500\">No training on your data</td>
|
||||
<td style=\"text-align:center;padding:1rem\"><span style=\"color:#008040;font-weight:700;font-size:1.1rem\">✓</span><br><span style=\"font-size:0.7rem;color:var(--t3);font-weight:400\">Architecturally impossible</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#D4A017\">●</span><br><span style=\"font-size:0.7rem\">Opt-out required</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#D4A017\">●</span><br><span style=\"font-size:0.7rem\">Policy-based</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#D4A017\">●</span><br><span style=\"font-size:0.7rem\">Policy-based</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#D4A017\">●</span><br><span style=\"font-size:0.7rem\">Policy-based</span></td>
|
||||
</tr>
|
||||
<tr style=\"border-bottom:1px solid rgba(0,0,0,.06);background:rgba(0,82,160,.02)\">
|
||||
<td style=\"padding:1rem 1.5rem 1rem 0;color:var(--t1);font-weight:500\">Works offline</td>
|
||||
<td style=\"text-align:center;padding:1rem\"><span style=\"color:#008040;font-weight:700;font-size:1.1rem\">✓</span><br><span style=\"font-size:0.7rem;color:var(--t3);font-weight:400\">Local inference via Ollama</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span></td>
|
||||
</tr>
|
||||
<tr style=\"border-bottom:1px solid rgba(0,0,0,.06)\">
|
||||
<td style=\"padding:1rem 1.5rem 1rem 0;color:var(--t1);font-weight:500\">Bring your own API keys</td>
|
||||
<td style=\"text-align:center;padding:1rem\"><span style=\"color:#008040;font-weight:700;font-size:1.1rem\">✓</span><br><span style=\"font-size:0.7rem;color:var(--t3);font-weight:400\">OpenAI, Anthropic, Groq...</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span></td>
|
||||
</tr>
|
||||
<tr style=\"border-bottom:1px solid rgba(0,0,0,.06);background:rgba(0,82,160,.02)\">
|
||||
<td style=\"padding:1rem 1.5rem 1rem 0;color:var(--t1);font-weight:500\">Structured knowledge graph</td>
|
||||
<td style=\"text-align:center;padding:1rem\"><span style=\"color:#008040;font-weight:700;font-size:1.1rem\">✓</span><br><span style=\"font-size:0.7rem;color:var(--t3);font-weight:400\">Your memories, organized</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#C44\">✕</span></td>
|
||||
</tr>
|
||||
<tr style=\"border-bottom:1px solid rgba(0,0,0,.06)\">
|
||||
<td style=\"padding:1rem 1.5rem 1rem 0;color:var(--t1);font-weight:500\">You own your outputs</td>
|
||||
<td style=\"text-align:center;padding:1rem\"><span style=\"color:#008040;font-weight:700;font-size:1.1rem\">✓</span><br><span style=\"font-size:0.7rem;color:var(--t3);font-weight:400\">No platform claim, ever</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#D4A017\">●</span><br><span style=\"font-size:0.7rem\">ToS-dependent</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#D4A017\">●</span><br><span style=\"font-size:0.7rem\">ToS-dependent</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#D4A017\">●</span><br><span style=\"font-size:0.7rem\">ToS-dependent</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#D4A017\">●</span><br><span style=\"font-size:0.7rem\">ToS-dependent</span></td>
|
||||
</tr>
|
||||
<tr style=\"border-bottom:1px solid rgba(0,0,0,.06);background:rgba(0,82,160,.02)\">
|
||||
<td style=\"padding:1rem 1.5rem 1rem 0;color:var(--t1);font-weight:500\">Price (with inference)</td>
|
||||
<td style=\"text-align:center;padding:1rem\"><span style=\"color:#008040;font-weight:700;font-size:1rem\">$19/mo</span><br><span style=\"font-size:0.7rem;color:var(--t3);font-weight:400\">or $199 lifetime</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"font-weight:500;color:var(--t2)\">$20/mo</span><br><span style=\"font-size:0.7rem\">forgets you</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"font-weight:500;color:var(--t2)\">$20/mo</span><br><span style=\"font-size:0.7rem\">no memory</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"font-weight:500;color:var(--t2)\">Free–$20</span><br><span style=\"font-size:0.7rem\">no memory</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"font-weight:500;color:var(--t2)\">$30/mo</span><br><span style=\"font-size:0.7rem\">Microsoft 365</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style=\"padding:1rem 1.5rem 1rem 0;color:var(--t1);font-weight:500\">Free tier</td>
|
||||
<td style=\"text-align:center;padding:1rem\"><span style=\"color:#008040;font-weight:700;font-size:1.1rem\">✓</span><br><span style=\"font-size:0.7rem;color:var(--t3);font-weight:400\">Full app, forever</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#D4A017\">●</span><br><span style=\"font-size:0.7rem\">GPT-3.5 only</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#D4A017\">●</span><br><span style=\"font-size:0.7rem\">Limited</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#D4A017\">●</span><br><span style=\"font-size:0.7rem\">Limited</span></td>
|
||||
<td style=\"text-align:center;padding:1rem;color:var(--t3)\"><span style=\"color:#D4A017\">●</span><br><span style=\"font-size:0.7rem\">Microsoft 365 required</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class=\"reveal\" style=\"transition-delay:300ms;margin-top:3rem;display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap\">
|
||||
<div style=\"display:flex;align-items:center;gap:0.5rem;font-family:var(--body);font-size:0.75rem;color:var(--t3)\">
|
||||
<span style=\"color:#008040;font-weight:700\">✓</span> Yes / Supported
|
||||
</div>
|
||||
<div style=\"display:flex;align-items:center;gap:0.5rem;font-family:var(--body);font-size:0.75rem;color:var(--t3)\">
|
||||
<span style=\"color:#D4A017\">●</span> Partial / Limited
|
||||
</div>
|
||||
<div style=\"display:flex;align-items:center;gap:0.5rem;font-family:var(--body);font-size:0.75rem;color:var(--t3)\">
|
||||
<span style=\"color:#C44\">✕</span> No / Not supported
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=\"reveal\" style=\"transition-delay:400ms;margin-top:4rem;padding:2.5rem 3rem;background:var(--card);border:1px solid rgba(0,82,160,.12);border-left:3px solid var(--navy)\">
|
||||
<p style=\"font-family:var(--body);font-weight:300;font-size:1rem;color:var(--t2);line-height:1.8;margin-bottom:1rem\">
|
||||
The others are impressive. Some of them are extraordinary at what they do. But they are all built on the same assumption: <em>your context lives in their cloud, session to session, at their discretion.</em>
|
||||
</p>
|
||||
<p style=\"font-family:var(--body);font-weight:300;font-size:1rem;color:var(--t2);line-height:1.8\">
|
||||
Neuron starts from a different premise. Your memory is yours. It lives on your machine. It compounds over time, not over sessions. The AI that knows you isn't an AI you borrowed from someone else's cloud — it's one that has been building with you, on your terms, since day one.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
"
|
||||
}
|
||||
Reference in New Issue
Block a user