neuron-technologies/neuron-web
3
0
Fork 0
Code Issues 2 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

ux: chat header + greeting + brain avatar + share button + terms + badge

Browse Source 
Restores inline-JS styles.el (the obfuscated /assets/js/*.js path
broke the chat widget) and threads four UX fixes through it:

  - Chat header: drop the all-caps "NEURON / Live Demo" subtitle, keep
    just "Neuron" in bold white at 1rem.
  - Greeting: replace the canned "Hi. I am Neuron. You get 5 questions"
    with "Hey. What is on your mind?" in all three callsites (open,
    reset, turnstile-verified). The questions counter is already in
    the header, so we don't need to repeat it.
  - Avatar: switch chat avatar from neuron-icon.png to the brain mark
    (/assets/brand/neuron-brain.png). Thinking state now shows the
    pulsing brain plus three-dot animation instead of "thinking..."
    text.
  - Share button: from a muted t3 link to a navy pill with subtle
    background, uppercase letter-spacing, and active-press feedback.

main.el: drop the FOUNDING_SOLD = 47 floor and rewrite
fetch_founding_count_stripe to count succeeded PaymentIntents (the
live Stripe Elements path) AND legacy Checkout Sessions, excluding
refunded charges.

founding_badge.el: rewrite to the Option C "Tag" design picked from
/tmp/founding-badge-preview.html - tall card, navy top stroke, brain
mark prominent, "Neuron, LLC" footer.

terms.el: kill the "Neuron Inference - our own inference layer, live
now" claim. Inference launches Q3 2026 and the wording now says so.
This commit is contained in:
Will Anderson
2026-05-01 23:40:49 -05:00
parent d6731f7834
commit 4aa48538f6
4 changed files with 182 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/founding_badge.el
+61 -105
View File
@@ -1,63 +1,25 @@
// founding_badge.el - Founding Member badge component.
// founding_badge.el - Founding Member badge (Option C: Tag).
//
// Renders the certificate-style badge with guilloché background,
// navy colour scheme, and member number. Matches the React archive design.
// Used on the post-purchase success page and as a shareable /founding-badge route.
// Tall card, navy top stroke, brain logo prominent, member number,
// "Neuron, LLC" footer. Matches the design picked from
// /tmp/founding-badge-preview.html.
fn founding_badge(member_number: Int) -> String {
let num_str: String = int_to_str(member_number)
let show_number: Bool = member_number > 0
let number_html: String = if show_number {
"<div style=\"display:flex;flex-direction:column;align-items:center;gap:0;\">
<span style=\"font-size:8px;font-weight:700;letter-spacing:.20em;text-transform:uppercase;color:#0052A0;line-height:1;margin-bottom:-8px;position:relative;z-index:1;\">No.</span>
<p style=\"font-size:42px;font-weight:700;color:#0D0D14;letter-spacing:-.02em;line-height:.85;margin:0;\">" + num_str + "</p>
<p style=\"font-size:8px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#0052A0;margin:0;\">of 1,000</p>
</div>"
"<div class=\"founding-badge-num\">#" + num_str + "</div>
<div class=\"founding-badge-of\">of 1,000</div>"
} else {
"<p style=\"font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:rgba(0,82,160,.45);margin:0;\">Your number awaits</p>"
"<div class=\"founding-badge-pending\">Your number awaits</div>"
}
return "
<div class=\"founding-badge\" aria-label=\"Founding Member badge\">
<!-- Guilloché background SVG -->
<svg aria-hidden=\"true\" class=\"founding-badge-bg\" viewBox=\"0 0 260 300\" preserveAspectRatio=\"none\">
<defs>
<pattern id=\"hatch\" width=\"6\" height=\"6\" patternUnits=\"userSpaceOnUse\" patternTransform=\"rotate(45)\">
<line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"6\" stroke=\"rgba(0,82,160,.055)\" stroke-width=\"0.5\"/>
</pattern>
<pattern id=\"dots\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\">
<circle cx=\"5\" cy=\"5\" r=\"0.6\" fill=\"rgba(0,82,160,.12)\"/>
</pattern>
</defs>
<rect width=\"260\" height=\"300\" fill=\"rgba(0,82,160,.025)\"/>
<rect width=\"260\" height=\"300\" fill=\"url(#hatch)\"/>
<rect width=\"260\" height=\"300\" fill=\"url(#dots)\"/>
<!-- Guilloché wave bands -->
<path d=\"M 0,40 C 26,34 52,46 78,40 S 130,34 156,40 S 208,46 260,40\" fill=\"none\" stroke=\"rgba(0,82,160,.18)\" stroke-width=\"0.7\"/>
<path d=\"M 0,38 C 29,44 58,32 87,38 S 145,44 174,38 S 232,32 260,38\" fill=\"none\" stroke=\"rgba(0,82,160,.12)\" stroke-width=\"0.7\"/>
<path d=\"M 0,260 C 26,254 52,266 78,260 S 130,254 156,260 S 208,266 260,260\" fill=\"none\" stroke=\"rgba(0,82,160,.18)\" stroke-width=\"0.7\"/>
<path d=\"M 0,258 C 29,264 58,252 87,258 S 145,264 174,258 S 232,252 260,258\" fill=\"none\" stroke=\"rgba(0,82,160,.12)\" stroke-width=\"0.7\"/>
<!-- Double-line ornate border -->
<rect x=\"6\" y=\"6\" width=\"248\" height=\"288\" fill=\"none\" stroke=\"rgba(0,82,160,.30)\" stroke-width=\"0.75\"/>
<rect x=\"10\" y=\"10\" width=\"240\" height=\"280\" fill=\"none\" stroke=\"rgba(0,82,160,.15)\" stroke-width=\"0.5\" stroke-dasharray=\"4 3\"/>
<!-- Corner rosettes -->
<g><circle cx=\"6\" cy=\"6\" r=\"14\" fill=\"none\" stroke=\"rgba(0,82,160,.22)\" stroke-width=\"0.6\"/><circle cx=\"6\" cy=\"6\" r=\"9\" fill=\"none\" stroke=\"rgba(0,82,160,.22)\" stroke-width=\"0.6\"/><circle cx=\"6\" cy=\"6\" r=\"5\" fill=\"none\" stroke=\"rgba(0,82,160,.22)\" stroke-width=\"0.6\"/><circle cx=\"6\" cy=\"6\" r=\"1.7\" fill=\"rgba(0,82,160,.25)\"/></g>
<g><circle cx=\"254\" cy=\"6\" r=\"14\" fill=\"none\" stroke=\"rgba(0,82,160,.22)\" stroke-width=\"0.6\"/><circle cx=\"254\" cy=\"6\" r=\"9\" fill=\"none\" stroke=\"rgba(0,82,160,.22)\" stroke-width=\"0.6\"/><circle cx=\"254\" cy=\"6\" r=\"5\" fill=\"none\" stroke=\"rgba(0,82,160,.22)\" stroke-width=\"0.6\"/><circle cx=\"254\" cy=\"6\" r=\"1.7\" fill=\"rgba(0,82,160,.25)\"/></g>
<g><circle cx=\"6\" cy=\"294\" r=\"14\" fill=\"none\" stroke=\"rgba(0,82,160,.22)\" stroke-width=\"0.6\"/><circle cx=\"6\" cy=\"294\" r=\"9\" fill=\"none\" stroke=\"rgba(0,82,160,.22)\" stroke-width=\"0.6\"/><circle cx=\"6\" cy=\"294\" r=\"5\" fill=\"none\" stroke=\"rgba(0,82,160,.22)\" stroke-width=\"0.6\"/><circle cx=\"6\" cy=\"294\" r=\"1.7\" fill=\"rgba(0,82,160,.25)\"/></g>
<g><circle cx=\"254\" cy=\"294\" r=\"14\" fill=\"none\" stroke=\"rgba(0,82,160,.22)\" stroke-width=\"0.6\"/><circle cx=\"254\" cy=\"294\" r=\"9\" fill=\"none\" stroke=\"rgba(0,82,160,.22)\" stroke-width=\"0.6\"/><circle cx=\"254\" cy=\"294\" r=\"5\" fill=\"none\" stroke=\"rgba(0,82,160,.22)\" stroke-width=\"0.6\"/><circle cx=\"254\" cy=\"294\" r=\"1.7\" fill=\"rgba(0,82,160,.25)\"/></g>
<!-- Micro text bands -->
<text x=\"130\" y=\"22\" text-anchor=\"middle\" font-size=\"4.5\" font-family=\"system-ui,sans-serif\" letter-spacing=\"3\" fill=\"rgba(0,82,160,.28)\" text-length=\"220\" length-adjust=\"spacing\">NEURON TECHNOLOGIES · FOUNDING MEMBER · NEURON TECHNOLOGIES · FOUNDING MEMBER</text>
<text x=\"130\" y=\"286\" text-anchor=\"middle\" font-size=\"4.5\" font-family=\"system-ui,sans-serif\" letter-spacing=\"3\" fill=\"rgba(0,82,160,.28)\" text-length=\"220\" length-adjust=\"spacing\">NEURON TECHNOLOGIES · FOUNDING MEMBER · NEURON TECHNOLOGIES · FOUNDING MEMBER</text>
</svg>
<!-- Badge content -->
<div class=\"founding-badge-inner\">
<p class=\"founding-badge-label\">Founding Member</p>
<div class=\"founding-badge-rule\"></div>
<div class=\"founding-badge-icon\">
<img src=\"/assets/neuron-icon.png\" alt=\"Neuron\" width=\"34\" height=\"34\">
</div>
" + number_html + "
</div>
<img class=\"founding-badge-brain\" src=\"/assets/brand/neuron-brain.png\" alt=\"Neuron\" width=\"40\" height=\"40\">
<div class=\"founding-badge-eye\">Founding Member</div>
" + number_html + "
<div class=\"founding-badge-line\"></div>
<div class=\"founding-badge-name\">Neuron, LLC</div>
</div>
"
}
@@ -65,72 +27,66 @@ fn founding_badge(member_number: Int) -> String {
fn founding_badge_css() -> String {
return "
<style>
@keyframes fb-glow-pulse {
0%,100% { box-shadow: 0 0 0 3px rgba(0,82,160,.08), 0 0 18px rgba(0,82,160,.22), 0 0 36px rgba(0,82,160,.10); }
50% { box-shadow: 0 0 0 4px rgba(0,82,160,.12), 0 0 28px rgba(0,82,160,.32), 0 0 56px rgba(0,82,160,.16); }
}
@keyframes fb-icon-float {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
.founding-badge {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
width: 260px;
background: #FAFAF8;
border: 1px solid rgba(0,120,212,.5);
animation: fb-glow-pulse 3s ease-in-out infinite;
overflow: hidden;
}
.founding-badge-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.founding-badge-inner {
position: relative;
width: 200px;
background: #fff;
border: 1px solid rgba(0,82,160,.18);
border-top: 4px solid #0052A0;
padding: 1.5rem 1.25rem 1.125rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 32px 28px 28px;
width: 100%;
text-align: center;
box-sizing: border-box;
gap: .25rem;
box-shadow: 0 4px 24px rgba(0,82,160,.10);
font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.founding-badge-label {
font-family: var(--body,system-ui,sans-serif);
font-size: 8.5px;
.founding-badge-brain {
width: 56px;
height: 56px;
margin-bottom: .5rem;
opacity: .92;
}
.founding-badge-eye {
font-size: .65rem;
font-weight: 600;
letter-spacing: .30em;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(0,82,160,.65);
margin-bottom: .25rem;
}
.founding-badge-num {
font-family: 'Playfair Display', Georgia, serif;
font-size: 2.6rem;
font-weight: 600;
color: #0052A0;
line-height: 1;
margin: 0;
line-height: 1.05;
}
.founding-badge-rule {
width: 48px;
.founding-badge-of {
font-size: .65rem;
font-weight: 400;
color: #6B6B7E;
letter-spacing: .04em;
}
.founding-badge-pending {
font-size: .65rem;
font-weight: 500;
color: rgba(0,82,160,.55);
letter-spacing: .15em;
text-transform: uppercase;
padding: .5rem 0;
}
.founding-badge-line {
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,82,160,.45), transparent);
background: rgba(0,82,160,.12);
margin: .65rem 0 .5rem;
}
.founding-badge-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(255,255,255,.85);
border: 1px solid rgba(0,82,160,.2);
box-shadow: 0 0 0 4px rgba(0,82,160,.06);
display: flex;
align-items: center;
justify-content: center;
}
.founding-badge-icon img {
display: block;
animation: fb-icon-float 4s ease-in-out infinite;
.founding-badge-name {
font-size: .625rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: #6B6B7E;
}
</style>
"