feat: revamp dashboard, trades, and add landing/legal pages

- Major UI updates across dashboard, analytics, posts, trades, settings - New landing page, robots/sitemap, contact/privacy/terms pages - Updated globals.css with extensive styling and new landing.css - Refactor signedRequest, realtime data hook, and dashboard store Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-25 16:04:57 +08:00
parent 83e5892ddf
commit 040e1df685
28 changed files with 4133 additions and 690 deletions
@@ -0,0 +1,505 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import Link from 'next/link'
+import './landing.css'
+
+/* Scroll-reveal hook */
+function useReveal() {
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const root = ref.current
+    if (!root) return
+    const els = root.querySelectorAll<HTMLElement>('.lp-reveal')
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const e of entries) {
+          if (e.isIntersecting) {
+            e.target.classList.add('in')
+            io.unobserve(e.target)
+          }
+        }
+      },
+      { threshold: 0.12, rootMargin: '0px 0px -40px 0px' },
+    )
+    els.forEach((el) => io.observe(el))
+    return () => io.disconnect()
+  }, [])
+  return ref
+}
+
+/* Ticking clock for the terminal header (looks alive) */
+function useClock() {
+  const [t, setT] = useState<string>('')
+  useEffect(() => {
+    const tick = () => {
+      const d = new Date()
+      setT(d.toISOString().replace('T', ' ').slice(0, 19) + ' UTC')
+    }
+    tick()
+    const id = setInterval(tick, 1000)
+    return () => clearInterval(id)
+  }, [])
+  return t
+}
+
+export default function LandingPage() {
+  const rootRef = useReveal()
+  const clock = useClock()
+
+  return (
+    <div className="lp-root" ref={rootRef}>
+      <div className="lp-mesh" aria-hidden />
+      <div className="lp-grid" aria-hidden />
+
+      <nav className="lp-nav">
+        <div className="lp-nav-inner">
+          <Link href="/" className="lp-logo">
+            <span className="lp-logo-dot" />
+            Trump Alpha
+          </Link>
+          <Link href="/en" className="lp-nav-cta">
+            Launch Dashboard
+            <span className="lp-arrow">→</span>
+          </Link>
+        </div>
+      </nav>
+
+      <div className="lp-wrap">
+        {/* ---------- HERO ---------- */}
+        <section className="lp-hero">
+          <div className="lp-live-badge">
+            <span className="lp-live-dot" />
+            Reading @realDonaldTrump on Truth Social · right now
+          </div>
+
+          <h1 className="lp-h1">
+            Trump posts at 3am.<br />
+            The bot trades at&nbsp;
+            <span className="strike">
+              <span className="grad">3:00:02</span>
+            </span>
+            .
+          </h1>
+
+          <p className="lp-sub">
+            Every Truth Social post is scraped, scored by AI, and turned into a
+            Hyperliquid position — in under three seconds. You sleep. It doesn&rsquo;t.
+          </p>
+
+          <div className="lp-ctas">
+            <Link href="/en" className="lp-btn lp-btn-primary">
+              Launch Dashboard
+              <span className="lp-arrow">→</span>
+            </Link>
+            <a href="#engine" className="lp-btn lp-btn-secondary">
+              Watch the engine
+            </a>
+          </div>
+
+          {/* Ticker strip */}
+          <div className="lp-ticker" aria-hidden>
+            <div className="lp-ticker-track">
+              {[0, 1].map((k) => (
+                <div key={k} style={{ display: 'flex', gap: 48 }}>
+                  <TickerItem asset="BTC" kind="buy"  text="Post scored 82 · AUTO-LONG fired" />
+                  <TickerItem asset="ETH" kind="hold" text="Below user confidence floor · skipped" />
+                  <TickerItem asset="BTC" kind="sell" text="Signal SHORT · TP/SL armed" />
+                  <TickerItem asset="ETH" kind="buy"  text="Post scored 74 · AUTO-LONG fired" />
+                  <TickerItem asset="BTC" kind="hold" text="Outside active window · standing by" />
+                  <TickerItem asset="ETH" kind="sell" text="Signal SHORT · position opened" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* ---------- THE ENGINE (terminal block) ---------- */}
+        <section id="engine" className="lp-section" style={{ paddingTop: 60 }}>
+          <div className="lp-reveal" style={{ maxWidth: 640 }}>
+            <div className="lp-eyebrow">The engine, running</div>
+            <h2 className="lp-h2">
+              No mock-ups. No dashboards in a marketing deck.
+            </h2>
+            <p className="lp-lead">
+              This is what the signal engine actually does, every time Trump posts.
+              Scrape. Score. Decide. Execute.
+            </p>
+          </div>
+
+          {/* Terminal */}
+          <div className="lp-term lp-reveal">
+            <div className="lp-term-head">
+              <span className="dot" />
+              <span className="meta-live">LIVE</span>
+              <span className="sep">│</span>
+              <span>trumpsignal.engine</span>
+              <span className="sep">│</span>
+              <span>src=<span className="meta-amber">truthsocial.com/@realDonaldTrump</span></span>
+              <span className="spacer" />
+              <span suppressHydrationWarning>{clock}</span>
+            </div>
+
+            <div className="lp-term-body">
+              <TermRow
+                isNew
+                ts="−02m"
+                text="BITCOIN is the FUTURE of money. America will LEAD the world in crypto. BIG things coming very soon. ENJOY!"
+                verdict={{ cls: 'LONG', asset: 'BTC', conf: 82, action: 'AUTO-LONG · 3× isolated · $50' }}
+              />
+              <TermRow
+                ts="−14m"
+                text="Massive new TARIFFS on China coming — they have RIPPED OFF the USA for decades. No more!"
+                verdict={{ cls: 'SHORT', asset: 'BTC', conf: 71, action: 'AUTO-SHORT · 3× isolated · $50' }}
+              />
+              <TermRow
+                ts="−38m"
+                text="Crooked Joe and the Radical Left Lunatics are destroying our beautiful country. SAD!"
+                verdict={{ cls: 'NOISE', skip: 'off-topic · below confidence floor' }}
+              />
+              <TermRow
+                ts="−01h"
+                text="The Fed must CUT rates NOW. The economy cannot afford their stupidity any longer!"
+                verdict={{ cls: 'LONG', asset: 'BTC', conf: 64, action: 'AUTO-LONG · 3× isolated · $50' }}
+              />
+              <TermRow
+                ts="−02h"
+                text="Crypto is the FUTURE. No More War on Crypto! America FIRST!"
+                verdict={{ cls: 'LONG', asset: 'BTC', conf: 78, action: 'skipped · daily budget cap hit' }}
+                soft
+              />
+            </div>
+
+            <div className="lp-term-foot">
+              <span>
+                tail -f /var/log/engine <span className="lp-term-cursor" />
+              </span>
+              <span className="tail">posts analysed: 1,247 · uptime 99.8%</span>
+            </div>
+          </div>
+
+          {/* Stat strip */}
+          <div className="lp-stats lp-reveal">
+            <Stat value="<3" suffix="s" label="Post → position" sub="scrape · score · sign · send" />
+            <Stat value="24/7" label="Always on" sub="unless you say otherwise" />
+            <Stat value="$0" label="Fee from us" sub="you pay Hyperliquid, not me" />
+            <Stat value="6" label="Safety layers" sub="TP · SL · hold · budget · window · isolation" />
+          </div>
+
+          <p
+            className="lp-reveal"
+            style={{
+              marginTop: 18, fontSize: 12, color: 'var(--lp-ink-4)',
+              textAlign: 'center', fontFamily: 'Geist Mono, monospace',
+            }}
+          >
+            Posts shown are examples in Trump&rsquo;s style — your actual feed is live from the dashboard.
+          </p>
+        </section>
+
+        {/* ---------- PRESS / HEADLINES ---------- */}
+        <section className="lp-section" style={{ paddingTop: 80 }}>
+          <div className="lp-reveal" style={{ maxWidth: 680 }}>
+            <div className="lp-eyebrow">Headlines you can Google</div>
+            <h2 className="lp-h2">
+              The market already trades every Trump post.
+            </h2>
+            <p className="lp-lead">
+              Big wallets have been scoring eight-figure moves on his Truth Social
+              activity for two years. This bot won&rsquo;t give you their edge —
+              it just gives you their speed.
+            </p>
+          </div>
+
+          <div className="lp-press">
+            {/* Big card — the $6.8M trader story */}
+            <a
+              className="lp-news lp-news-big lp-reveal"
+              href="https://www.newsbreak.com/raw-story-2096750/4286876592634-that-s-the-maga-playbook-crypto-trade-made-moments-before-trump-post-raises-eyebrows"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="lp-news-big-figure">
+                <span className="tag">verified · on-chain</span>
+                <div className="num">+$6.8M</div>
+                <div className="subnum">50× leverage · same-day close</div>
+              </div>
+              <div className="lp-news-big-body">
+                <div className="lp-news-head">
+                  <span className="lp-news-outlet">Raw Story · NewsBreak</span>
+                  <span className="lp-news-date">Mar 2025</span>
+                </div>
+                <h3 className="lp-news-headline">
+                  Anonymous whale placed a 50× leveraged BTC/ETH bet minutes before
+                  Trump&rsquo;s crypto-reserve post — cashed out the same day.
+                </h3>
+              </div>
+              <span className="lp-news-arrow">↗</span>
+            </a>
+
+            <a
+              className="lp-news lp-reveal"
+              href="https://www.cnbc.com/2025/03/02/trump-announces-strategic-crypto-reserve-including-bitcoin-solana-xrp-and-more.html"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className="lp-news-arrow">↗</span>
+              <div className="lp-news-head">
+                <span className="lp-news-outlet">CNBC</span>
+                <span className="lp-news-date">Mar 2&nbsp;2025</span>
+              </div>
+              <h3 className="lp-news-headline">
+                Trump&rsquo;s Truth Social post confirming a Strategic Crypto
+                Reserve sent Bitcoin from $84k to $91k overnight.
+              </h3>
+              <div className="lp-news-stat">
+                <span className="n up">+8.2%</span>
+                <span className="l">BTC · 24 hours<br />one Truth Social post</span>
+              </div>
+            </a>
+
+            <a
+              className="lp-news lp-reveal"
+              href="https://www.aljazeera.com/news/2025/3/4/trump-announces-us-crypto-reserve-what-it-is-and-why-it-matters"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className="lp-news-arrow">↗</span>
+              <div className="lp-news-head">
+                <span className="lp-news-outlet">Al Jazeera</span>
+                <span className="lp-news-date">Mar 4&nbsp;2025</span>
+              </div>
+              <h3 className="lp-news-headline">
+                Ethereum spiked more than 10% alongside Bitcoin as the reserve
+                announcement rippled across every major alt.
+              </h3>
+              <div className="lp-news-stat">
+                <span className="n up">+10%+</span>
+                <span className="l">ETH · same window<br />BTC, SOL, XRP followed</span>
+              </div>
+            </a>
+
+            <a
+              className="lp-news lp-reveal"
+              href="https://www.coindesk.com/markets/2026/04/20/five-times-president-trump-made-a-statement-that-moved-bitcoin-and-why-it-might-happen-again-this-week"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className="lp-news-arrow">↗</span>
+              <div className="lp-news-head">
+                <span className="lp-news-outlet">CoinDesk</span>
+                <span className="lp-news-date">Apr 20&nbsp;2026</span>
+              </div>
+              <h3 className="lp-news-headline">
+                Five separate times a single Trump statement moved BTC within
+                minutes — and why it keeps happening.
+              </h3>
+              <div className="lp-news-stat">
+                <span className="n">5×</span>
+                <span className="l">documented cases<br />BTC moved in minutes</span>
+              </div>
+            </a>
+
+            <a
+              className="lp-news lp-reveal"
+              href="https://time.com/7263869/donald-trump-crypto-reserve-summit-bitcoin/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className="lp-news-arrow">↗</span>
+              <div className="lp-news-head">
+                <span className="lp-news-outlet">TIME</span>
+                <span className="lp-news-date">Mar 2025</span>
+              </div>
+              <h3 className="lp-news-headline">
+                Senator Schiff calls for an SEC investigation into possible
+                insider trading around Trump&rsquo;s market-moving posts.
+              </h3>
+              <div className="lp-news-stat">
+                <span className="n">SEC</span>
+                <span className="l">investigation requested<br />by a U.S. senator</span>
+              </div>
+            </a>
+          </div>
+
+          <p className="lp-press-note lp-reveal">
+            Not our claims — their headlines. Click any card to read the source.
+          </p>
+        </section>
+
+        {/* ---------- WHY IT WORKS ---------- */}
+        <section className="lp-section">
+          <div className="lp-reveal" style={{ maxWidth: 640 }}>
+            <div className="lp-eyebrow">Why bother</div>
+            <h2 className="lp-h2">
+              Trump moves markets. You can&rsquo;t outrun him manually.
+            </h2>
+            <p className="lp-lead">
+              He posts at any hour, in any mood. By the time you see it, the move
+              is half over. The bot doesn&rsquo;t blink. That&rsquo;s the whole pitch.
+            </p>
+          </div>
+
+          <div className="lp-why">
+            <WhyCard
+              n="01"
+              t="Your rules, not ours"
+              d="Your leverage, your position size, your TP/SL, your daily cap, your active hours. The bot only does what your config says."
+            />
+            <WhyCard
+              n="02"
+              t="Isolated margin, always"
+              d="Every open uses Hyperliquid isolated margin. A bad trade can&rsquo;t drain your other positions or your whole account."
+            />
+            <WhyCard
+              n="03"
+              t="Nothing held overnight"
+              d="Every position force-closes after 60 minutes. No waking up to a liquidation from a post you missed."
+            />
+            <WhyCard
+              n="04"
+              t="Your keys stay yours"
+              d="Non-custodial. The Hyperliquid API key can open and close — it cannot withdraw. We never see your MetaMask."
+            />
+          </div>
+        </section>
+
+        {/* ---------- FINAL CTA ---------- */}
+        <section className="lp-cta-final lp-reveal">
+          <h2 className="lp-h2" style={{ margin: '0 auto 24px', maxWidth: 780 }}>
+            Stop refreshing Truth Social.<br />
+            <span className="grad" style={{ fontWeight: 700 }}>
+              Go do literally anything else.
+            </span>
+          </h2>
+          <p className="lp-lead" style={{ margin: '0 auto 40px', textAlign: 'center' }}>
+            2 minutes to set up. Free. Bring your own Hyperliquid account. If you
+            don&rsquo;t like it, disconnect — nothing to cancel.
+          </p>
+          <div className="lp-ctas">
+            <Link href="/en" className="lp-btn lp-btn-primary">
+              Launch Dashboard
+              <span className="lp-arrow">→</span>
+            </Link>
+          </div>
+        </section>
+      </div>
+
+      <footer className="lp-foot">
+        <p className="lp-disclaimer">
+          TrumpSignal is an experimental tool. Crypto perp trading is extremely
+          high-risk; you can lose more than you deposit. Past signals are not
+          predictions of future results. Not affiliated with Truth Social, Trump
+          Media &amp; Technology Group, or Donald J. Trump. Trade at your own risk.
+        </p>
+        <div style={{ marginTop: 16 }}>
+          <span>© {new Date().getFullYear()} TrumpSignal</span>
+          <Link href="/en/privacy">Privacy</Link>
+          <Link href="/en/terms">Terms</Link>
+          <Link href="/en/contact">Contact</Link>
+        </div>
+      </footer>
+    </div>
+  )
+}
+
+/* ---------- Terminal row ---------- */
+function TermRow({
+  isNew,
+  ts,
+  text,
+  verdict,
+  soft,
+}: {
+  isNew?: boolean
+  ts: string
+  text: string
+  verdict:
+    | { cls: 'LONG' | 'SHORT'; asset: string; conf: number; action: string }
+    | { cls: 'NOISE'; skip: string }
+  soft?: boolean
+}) {
+  const cls = verdict.cls
+  const valClass = cls === 'LONG' ? 'long' : cls === 'SHORT' ? 'short' : 'skip'
+  return (
+    <div className={`lp-term-row${isNew ? ' new' : ''}`}>
+      <div className="lp-term-meta">
+        <span className="handle">@realDonaldTrump</span>
+        <span>·</span>
+        <span className="ts">{ts}</span>
+        <span>·</span>
+        <span>truthsocial</span>
+      </div>
+      <p className="lp-term-quote">{text}</p>
+      <div className="lp-term-verdict">
+        <span className="seg">
+          <span className="k">cls</span>
+          <span className={`v ${valClass}`}>{cls}</span>
+        </span>
+        {'asset' in verdict && (
+          <>
+            <span className="seg">
+              <span className="k">asset</span>
+              <span className="v amber">{verdict.asset}</span>
+            </span>
+            <span className="seg">
+              <span className="k">conf</span>
+              <span className="bar">
+                <span
+                  className="bar-fill"
+                  style={{ width: `${verdict.conf}%` }}
+                />
+              </span>
+              <span className="v">{verdict.conf}</span>
+            </span>
+            <span className="seg">
+              <span className="k">action</span>
+              <span className={`v ${soft ? '' : 'amber'}`}>{verdict.action}</span>
+            </span>
+          </>
+        )}
+        {'skip' in verdict && (
+          <span className="seg">
+            <span className="k">reason</span>
+            <span className="v skip">{verdict.skip}</span>
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/* ---------- Small components ---------- */
+function TickerItem({ asset, kind, text }: { asset: string; kind: 'buy' | 'sell' | 'hold'; text: string }) {
+  return (
+    <div className="lp-ticker-item">
+      <span className={`tag ${kind}`}>{kind.toUpperCase()}</span>
+      <span style={{ color: 'var(--lp-ink-2)' }}>{asset}</span>
+      <span>·</span>
+      <span>{text}</span>
+    </div>
+  )
+}
+
+function Stat({ value, suffix, label, sub }: { value: string; suffix?: string; label: string; sub?: string }) {
+  return (
+    <div className="lp-stat">
+      <div className="lp-stat-val">
+        {value}
+        {suffix && <span className="suffix">{suffix}</span>}
+      </div>
+      <div className="lp-stat-lbl">{label}</div>
+      {sub && <div className="lp-stat-sub">{sub}</div>}
+    </div>
+  )
+}
+
+function WhyCard({ n, t, d }: { n: string; t: string; d: string }) {
+  return (
+    <div className="lp-why-card lp-reveal">
+      <div className="num">{n}</div>
+      <h4>{t}</h4>
+      <p>{d}</p>
+    </div>
+  )
+}