Z/trumpsignal-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Production polish: i18n shelved, PWA icons, SEO/GEO cleanup, UX fixes

Browse Source 
Big-picture changes since 01be8e7:

New routes — /trump /btc /kol /trades /analytics /archive plus four
SEO landing pages (/methodology /glossary /case-studies /contact),
all served under /[locale]. Each has dedicated metadata + JSON-LD.

KOL page (new) — DigestWidget + OnchainWidget + TalkVsTradesWidget,
filter by handle/ticker, click-through to per-post detail with the
original AI-extracted ticker/conviction/quote.

BTC page (new) — tabbed: macro-bottom (AHR999 + 200WMA + Pi Cycle)
and funding-rate reversal, with live sparkline + threshold bands.

Telegram card on Settings — wallet-link code generation, status,
disconnect. Preferences moved into the bot itself (/trump /btc etc.)
so the card stays minimal.

SignalMonitor (new) — ETH/LINK Bollinger breakout monitor in its own
component, shares the singleton WsProvider so no second WS opens.

WS singleton refactor (lib/wsContext) — shared WsProvider + useWsSubscribe
hook. Cleanup now actively closes the socket on unmount; previously the
local `ws` couldn't be reached from cleanup and leaked one connection
per StrictMode remount.

OpenPositions polling no longer pops MetaMask in the background —
splits into load('first') for user-initiated and load('poll') that
uses getCachedViewEnvelope without signing.

i18n shelved — proxy.ts (Next 16 middleware rename) wires next-intl
but only Navbar + layout footer have translations. Rest of UI used
isZh ternary scattered across 28 files. All `const isZh = locale === 'zh'`
flipped to `const isZh = false` so every site renders English; Chinese
branches kept as dead code so revival is one regex away.
LanguageSwitch hidden but file kept. zh-CN hreflang removed from
metadata + sitemap to avoid duplicate-content penalties.

Wallet error handling — lib/walletError.ts: isUserRejection walks EIP-1193
code 4001 + .cause chain; previous string-match for "reject"/"denied"
broke for users running MetaMask in non-English UIs. 12 call sites
migrated across 5 components.

PWA icons — app/icon.tsx + app/apple-icon.tsx render the brand "α" via
Next's ImageResponse so no static PNG asset is required. manifest.ts
references /icon and /apple-icon dynamic routes.

OG image + sitemap + robots — dynamic 1200×630 OG card; robots blocks
both /en/settings and /zh/settings; sitemap only emits /en routes;
JSON-LD covers SoftwareApplication + Organization + 10-Q FAQPage.

Landing page polish — Launch Dashboard button stripped of magnetic
hover + shimmer + lift + glow expansion (multiple users found it busy);
hero scramble alphabet swapped to alphanumeric (was block characters);
"15 KOL feeds" copy updated to 19 in 5 places.

PostCards source icons — new entries for btc_bottom_reversal,
funding_reversal, kol_divergence so they no longer fall through to
the generic "first letter" fallback.

Archive page filter — excludes funding_reversal + kol_divergence
(previously only excluded truth + btc_bottom_reversal so new live
signals leaked into the legacy archive).

Cache + skeleton loading — lib/cache.ts SWR module with per-key TTL,
applied across the major pages so navigation feels instant.

SignConfirmSheet — 4 hardcoded Chinese strings translated to English
(English users were seeing zh-only "需要钱包签名" etc).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
k
2026-05-25 00:53:27 +08:00
parent 01be8e790b
commit d72323b1c6
67 changed files with 11735 additions and 2530 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/landing.css
+408 -14
View File
@@ -233,25 +233,20 @@
transition: all 0.18s ease;
cursor: pointer; border: none;
}
/* Primary CTA — kept static on purpose. Previously the button had a magnetic
pull, a shimmer sweep, a hover lift, and a glow expansion stacked together.
Multiple users found it busy/distracting, so the button now just sits with
a fixed amber gradient + soft glow. Don't add hover transforms here. */
.lp-btn-primary {
color: #0a0907;
background: linear-gradient(135deg, #ffd88a, var(--lp-amber) 55%, #ff7a3d);
box-shadow: 0 10px 40px rgba(245,165,36,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
position: relative;
overflow: hidden;
}
.lp-btn-primary::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
transform: translateX(-150%);
transition: transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.lp-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 16px 50px rgba(245,165,36,0.55);
/* Intentionally no transform / box-shadow change — see comment above. */
filter: brightness(1.05);
}
.lp-btn-primary:hover::before { transform: translateX(150%); }
.lp-btn-secondary {
color: var(--lp-ink);
background: var(--lp-surface);
@@ -307,7 +302,7 @@
/* ---------- Section ---------- */
.lp-section {
padding: 120px 0;
padding: 80px 0;
position: relative;
}
.lp-eyebrow {
@@ -327,10 +322,10 @@
}
.lp-lead {
max-width: 600px;
font-size: 18px;
font-size: 17px;
line-height: 1.55;
color: var(--lp-ink-2);
margin: 0 0 56px;
margin: 0 0 40px;
}
/* ---------- Scroll reveal ---------- */
@@ -1557,3 +1552,402 @@
/* Prevent horizontal scroll anywhere on the landing root */
.lp-root { overflow-x: hidden; }
.lp-root img, .lp-root video { max-width: 100%; height: auto; }
/* ============================================================
✨ Premium fx layer (cursor spotlight, noise, scanlines, 3D
tilt cards, scramble text, magnetic buttons, count-up stats)
Added later — appended so existing rules win on conflict.
============================================================ */
/* ── Defaults so layouts don't jump before JS sets the vars ── */
.lp-root {
--mx: 50vw;
--my: 50vh;
}
/* ── 1. Cursor-tracking radial spotlight ──────────────────── */
.lp-spotlight {
position: fixed; inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(
600px circle at var(--mx) var(--my),
rgba(245,165,36,0.10),
rgba(245,165,36,0.04) 30%,
transparent 60%
);
mix-blend-mode: screen;
transition: background 80ms linear;
}
/* ── 2. Film grain (SVG noise data URI, tiny, no asset needed) ── */
.lp-noise {
position: fixed; inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.06;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
background-size: 160px 160px;
animation: lp-noise-shift 5s steps(8) infinite;
}
@keyframes lp-noise-shift {
0% { transform: translate(0,0); }
20% { transform: translate(-5%, 3%); }
40% { transform: translate(3%, -5%); }
60% { transform: translate(-3%, -3%); }
80% { transform: translate(5%, 4%); }
100% { transform: translate(0,0); }
}
/* ── 3. CRT scanlines (very subtle) ───────────────────────── */
.lp-scanlines {
position: fixed; inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.04;
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 2px,
rgba(255,255,255,0.4) 3px,
transparent 4px
);
mix-blend-mode: overlay;
}
/* ── 4. Scramble / decode text ─────────────────────────────── */
.lp-decode-line {
display: inline-block;
/* Use tabular nums + a slightly narrower spacing while scrambling so
the heading doesn't reflow as random glyphs swap. */
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
/* Soft glow on decoded text */
text-shadow: 0 0 22px rgba(245,165,36,0.12);
}
.lp-decode-line.grad {
text-shadow: none; /* gradient text can't take text-shadow cleanly */
}
/* ── 5. Magnetic button wrapper — DISABLED ─────────────────────
The .lp-magnet class is no longer applied to any element (see app/page.tsx
hero CTA). Rules kept commented for reference in case the effect is
reinstated later, but they should NOT match anything in production. */
/*
.lp-magnet { will-change: transform; }
.lp-btn-inner {
display: inline-flex; align-items: center; gap: 10px;
transition: transform 0.18s ease;
}
.lp-magnet:hover .lp-btn-inner { transform: translateY(-1px); }
.lp-magnet.lp-btn-primary:hover { transform: none !important; }
.lp-magnet.lp-btn-primary { transition: box-shadow 0.18s ease; }
.lp-magnet.lp-btn-primary:hover {
box-shadow: 0 18px 60px rgba(245,165,36,0.6);
}
*/
/* ── 6. Hero stats (counter strip) ────────────────────────── */
.lp-herostats {
margin: 56px auto 0;
align-self: center; /* center inside .lp-hero flex column */
display: inline-flex; align-items: stretch; gap: 28px;
padding: 18px 28px;
border: 1px solid var(--lp-line);
border-radius: 16px;
background:
linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
rgba(10,9,7,0.55);
backdrop-filter: blur(10px);
box-shadow:
0 30px 80px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,255,255,0.04);
font-family: 'Geist Mono', ui-monospace, monospace;
}
.lp-herostat { text-align: center; }
.lp-herostat-val {
font-size: clamp(22px, 3vw, 30px);
font-weight: 700;
color: var(--lp-ink);
line-height: 1;
letter-spacing: -0.02em;
display: inline-flex; align-items: baseline;
}
.lp-herostat-val .suf {
font-size: 0.6em;
color: var(--lp-amber);
margin-left: 1px;
}
.lp-herostat-val .dollar {
font-size: 0.7em;
color: var(--lp-amber);
margin-right: 1px;
}
.lp-herostat-lbl {
font-size: 10px;
color: var(--lp-ink-4);
margin-top: 6px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.lp-herostat-sep {
width: 1px;
background: linear-gradient(180deg, transparent, var(--lp-line), transparent);
align-self: stretch;
}
@media (max-width: 560px) {
.lp-herostats { gap: 16px; padding: 14px 18px; }
}
/* ── 7. PILLAR CARDS — 3D tilt + spotlight + animated edge ── */
.lp-pillar {
--tilt-x: 0deg;
--tilt-y: 0deg;
--glow-x: 50%;
--glow-y: 50%;
position: relative;
display: flex; flex-direction: column;
text-decoration: none;
color: inherit;
padding: 0;
background: transparent;
border: none;
border-radius: 20px;
transform-style: preserve-3d;
transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
transition: transform 0.18s cubic-bezier(.2,.8,.2,1);
cursor: pointer;
isolation: isolate;
}
.lp-pillar:hover { transition: transform 0.05s linear; }
/* solid body sits inside, separated from edge layer */
.lp-pillar-body {
position: relative;
z-index: 2;
display: flex; flex-direction: column; gap: 14px;
padding: 28px 26px;
background: linear-gradient(180deg, rgba(20,18,14,0.92), rgba(10,9,7,0.92));
border-radius: 18px;
border: 1px solid var(--lp-line);
height: 100%;
transform: translateZ(0); /* establish 3D layer */
}
.lp-pillar:hover .lp-pillar-body {
border-color: rgba(245,165,36,0.35);
}
/* spotlight inside the card — radial gradient driven by --glow-x/y */
.lp-pillar-glow {
position: absolute;
inset: 0;
z-index: 3;
border-radius: 18px;
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
background: radial-gradient(
400px circle at var(--glow-x) var(--glow-y),
rgba(245,165,36,0.18),
transparent 50%
);
mix-blend-mode: screen;
}
.lp-pillar:hover .lp-pillar-glow { opacity: 1; }
/* animated conic-gradient edge — rotates on hover */
.lp-pillar-edge {
position: absolute;
inset: -1px;
z-index: 1;
border-radius: 19px;
padding: 1px;
background: conic-gradient(
from var(--edge-angle, 0deg),
rgba(245,165,36,0.0),
rgba(245,165,36,0.45),
rgba(167,139,250,0.45),
rgba(239,68,68,0.4),
rgba(245,165,36,0.0)
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s ease;
animation: lp-edge-spin 4s linear infinite paused;
}
.lp-pillar:hover .lp-pillar-edge {
opacity: 1;
animation-play-state: running;
}
@property --edge-angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
@keyframes lp-edge-spin {
to { --edge-angle: 360deg; }
}
/* typography inside pillar */
.lp-pillar-tag {
align-self: flex-start;
font-size: 10px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 4px 8px; border-radius: 999px;
background: rgba(245,165,36,0.12);
color: var(--lp-amber);
font-family: 'Geist Mono', ui-monospace, monospace;
}
.lp-pillar-title {
font-size: 18px; font-weight: 700;
margin: 0; line-height: 1.25;
color: var(--lp-ink);
}
.lp-pillar-desc {
font-size: 14px; line-height: 1.6;
color: var(--lp-ink-3);
margin: 0; flex: 1;
}
.lp-pillar-foot {
display: flex; align-items: baseline; gap: 8px; margin-top: 4px;
padding-top: 12px; border-top: 1px solid var(--lp-line);
}
.lp-pillar-metric {
font-size: 22px; font-weight: 700;
color: var(--lp-amber);
font-family: 'Geist Mono', ui-monospace, monospace;
line-height: 1;
}
.lp-pillar-metric-lbl {
font-size: 11px; color: var(--lp-ink-4);
font-family: 'Geist Mono', ui-monospace, monospace;
}
.lp-pillar-arrow {
margin-left: auto; font-size: 16px; color: var(--lp-amber);
transition: transform 0.2s ease;
}
.lp-pillar:hover .lp-pillar-arrow { transform: translateX(4px); }
/* reduce motion respect */
@media (prefers-reduced-motion: reduce) {
.lp-noise,
.lp-pillar-edge { animation: none !important; }
.lp-pillar { transform: none !important; transition: none; }
.lp-spotlight { display: none; }
}
/* ── FAQ ──────────────────────────────────────────────── */
.lp-faq {
max-width: 720px;
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 2px;
}
.lp-faq-item {
border: 1px solid var(--lp-line);
border-radius: 10px;
overflow: hidden;
background: var(--lp-surface);
transition: border-color 0.2s;
}
.lp-faq-item:hover { border-color: var(--lp-line-2); }
.lp-faq-q {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 18px 20px;
background: none;
border: none;
color: var(--lp-ink-2);
font-size: 14px;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: color 0.2s;
line-height: 1.4;
}
.lp-faq-q:hover,
.lp-faq-q.open { color: var(--lp-ink); }
.lp-faq-chevron {
flex-shrink: 0;
font-size: 20px;
color: var(--lp-amber);
font-family: 'Geist Mono', monospace;
line-height: 1;
transition: transform 0.2s;
}
.lp-faq-a {
padding: 0 20px 18px;
border-top: 1px solid var(--lp-line);
}
.lp-faq-a p {
margin: 14px 0 0;
font-size: 13px;
line-height: 1.65;
color: var(--lp-ink-3);
}
/* ── Comparison table ────────────────────────────────── */
.lp-compare-wrap {
margin-top: 32px;
overflow-x: auto;
border-radius: 12px;
border: 1px solid var(--lp-line-2);
}
.lp-compare {
width: 100%;
border-collapse: collapse;
font-size: 13px;
min-width: 540px;
}
.lp-compare thead tr {
background: rgba(255,255,255,0.04);
border-bottom: 1px solid var(--lp-line-2);
}
.lp-compare th {
padding: 14px 18px;
text-align: left;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--lp-ink-3);
font-family: 'Geist Mono', monospace;
white-space: nowrap;
}
.lp-compare th.lp-compare-us {
color: var(--lp-amber);
background: rgba(245,165,36,0.06);
}
.lp-compare tbody tr {
border-bottom: 1px solid var(--lp-line);
transition: background 0.15s;
}
.lp-compare tbody tr:last-child { border-bottom: none; }
.lp-compare tbody tr:hover { background: rgba(255,255,255,0.025); }
.lp-compare-feature {
padding: 13px 18px;
color: var(--lp-ink-2);
font-weight: 500;
}
.lp-compare-val {
padding: 13px 18px;
font-family: 'Geist Mono', monospace;
font-size: 12px;
white-space: nowrap;
}
td.lp-compare-us {
color: var(--lp-amber);
background: rgba(245,165,36,0.04);
font-weight: 600;
}
.lp-compare-muted { color: var(--lp-ink-4); }