fix: pre-launch UI hardening + KOL reduce-action type, proxy IP relay, settings redesign
Frontend half of the pre-launch audit campaign: - types/index.ts + kol/KolPageClient.tsx: add missing 'reduce' KolAction (backend emits it; frontend lacked the type + color/label maps → undefined styling). Adds ACTION_COLOR/actionLabel/postActionLabel entries. - proxy/[...path]/route.ts: relay real client IP (x-forwarded-for / x-real-ip) so the backend rate limiter buckets per-user instead of per-Next-server (BUG-02). - Settings/BotConfigPanel redesign, paper-mode clarity, copy cleanup. - Assorted page/display fixes, loading states, Pagination component. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
k
@@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import dynamic from 'next/dynamic'
|
||||
import Link from 'next/link'
|
||||
import { useParams } from 'next/navigation'
|
||||
import { useLocale } from 'next-intl'
|
||||
@@ -11,11 +12,17 @@ import { usePriceSocket } from '@/lib/useRealtimeData'
|
||||
import { getMacroSnapshot, getPerformance, getPrices, getUserPublic, type MacroSnapshot } from '@/lib/api'
|
||||
import { getCachedViewEnvelope } from '@/lib/signedRequest'
|
||||
import { swrFetch } from '@/lib/cache'
|
||||
import ChartPanel from '@/components/dashboard/ChartPanel'
|
||||
import PostRow, { SignalPill, SourceIcon, fmtPct, TimeAgo, LocalDateTime } from '@/components/dashboard/PostCards'
|
||||
import OpenPositions from '@/components/positions/OpenPositions'
|
||||
import PageHint from '@/components/ui/PageHint'
|
||||
|
||||
// Heavy components — lazy-loaded so they don't bloat the initial JS bundle.
|
||||
// ChartPanel pulls in lightweight-charts (~200KB gz); split it out.
|
||||
const ChartPanel = dynamic(() => import('@/components/dashboard/ChartPanel'), {
|
||||
ssr: false,
|
||||
loading: () => <div style={{ height: 320, background: 'var(--bg-sunk)', borderRadius: 12, marginBottom: 16 }} />,
|
||||
})
|
||||
|
||||
interface Props {
|
||||
initialPosts: TrumpPost[]
|
||||
}
|
||||
@@ -211,7 +218,10 @@ export default function DashboardClient({ initialPosts }: Props) {
|
||||
getPrices(asset, timeframe)
|
||||
.then(c => { setCandles(c); setChartErr('') })
|
||||
.catch(e => setChartErr(e instanceof Error ? e.message : (isZh ? '价格数据加载失败' : 'Failed to load price data')))
|
||||
}, [asset, timeframe, chartReload, isZh])
|
||||
// isZh intentionally excluded: it is a compile-time constant (always false)
|
||||
// and including it would restart the chart fetch on every render.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [asset, timeframe, chartReload])
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true
|
||||
|
||||
@@ -6,6 +6,9 @@ import type { TrumpPost } from '@/types'
|
||||
import { getPosts } from '@/lib/api'
|
||||
import PostRow from '@/components/dashboard/PostCards'
|
||||
import PageHint from '@/components/ui/PageHint'
|
||||
import Pagination from '@/components/ui/Pagination'
|
||||
|
||||
const ARCHIVE_PAGE_SIZE = 30
|
||||
|
||||
const LIVE_SOURCES = new Set([
|
||||
'truth',
|
||||
@@ -25,6 +28,7 @@ export default function ArchivePage() {
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [loadErr, setLoadErr] = useState('')
|
||||
const [src, setSrc] = useState<string>('all')
|
||||
const [archivePage, setArchivePage] = useState(1)
|
||||
|
||||
useEffect(() => {
|
||||
getPosts(500, 1)
|
||||
@@ -49,6 +53,9 @@ export default function ArchivePage() {
|
||||
() => src === 'all' ? archivePosts : archivePosts.filter(p => p.source === src),
|
||||
[archivePosts, src],
|
||||
)
|
||||
const archiveTotalPages = Math.max(1, Math.ceil(filtered.length / ARCHIVE_PAGE_SIZE))
|
||||
const archiveSafePage = Math.min(archivePage, archiveTotalPages)
|
||||
const archivePageItems = filtered.slice((archiveSafePage - 1) * ARCHIVE_PAGE_SIZE, archiveSafePage * ARCHIVE_PAGE_SIZE)
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
@@ -67,7 +74,7 @@ export default function ArchivePage() {
|
||||
{[['all', archivePosts.length] as [string, number], ...sources].map(([s, n]) => (
|
||||
<button
|
||||
key={s}
|
||||
onClick={() => setSrc(s)}
|
||||
onClick={() => { setSrc(s); setArchivePage(1) }}
|
||||
style={{
|
||||
padding: '4px 10px', borderRadius: 6, border: '1px solid var(--line)',
|
||||
background: src === s ? 'var(--ink)' : 'transparent',
|
||||
@@ -95,10 +102,19 @@ export default function ArchivePage() {
|
||||
{isZh ? '没有可显示的历史信号。' : 'No archived signals.'}
|
||||
</div>
|
||||
)}
|
||||
{!loading && filtered.length > 0 && (
|
||||
<div className="post-stream">
|
||||
{filtered.map(p => <PostRow key={p.id} post={p} />)}
|
||||
</div>
|
||||
{!loading && archivePageItems.length > 0 && (
|
||||
<>
|
||||
<div className="post-stream">
|
||||
{archivePageItems.map(p => <PostRow key={p.id} post={p} />)}
|
||||
</div>
|
||||
<Pagination
|
||||
page={archiveSafePage}
|
||||
total={archiveTotalPages}
|
||||
count={filtered.length}
|
||||
pageSize={ARCHIVE_PAGE_SIZE}
|
||||
onChange={setArchivePage}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -363,7 +363,7 @@ html[data-theme="dark"] .asset-switch button.on { background: var(--surface-2);
|
||||
.page {
|
||||
max-width: 1360px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 28px 80px;
|
||||
padding: 28px 28px 64px;
|
||||
width: 100%;
|
||||
}
|
||||
.page.wide { max-width: 1600px; }
|
||||
@@ -372,20 +372,20 @@ html[data-theme="dark"] .asset-switch button.on { background: var(--surface-2);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 28px;
|
||||
margin-bottom: 24px;
|
||||
gap: 24px;
|
||||
}
|
||||
.page-title {
|
||||
font-size: 34px;
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 600;
|
||||
line-height: 1.05;
|
||||
font-size: 28px;
|
||||
letter-spacing: -0.025em;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
margin: 0;
|
||||
}
|
||||
.page-sub {
|
||||
color: var(--ink-3);
|
||||
font-size: 14px;
|
||||
margin-top: 6px;
|
||||
font-size: 13px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@ import type {
|
||||
import { getKolPosts, getKolPost, getKolDigest, getKolChanges, getKolDivergence } from '@/lib/api'
|
||||
import { swrFetch } from '@/lib/cache'
|
||||
import PageHint from '@/components/ui/PageHint'
|
||||
import Pagination from '@/components/ui/Pagination'
|
||||
|
||||
/**
|
||||
* KOL feed — independent module. Lists analyzed posts from tracked KOLs
|
||||
@@ -22,6 +23,7 @@ const ACTION_COLOR: Record<KolTicker['action'], string> = {
|
||||
bullish: '#16a34a',
|
||||
sell: '#dc2626',
|
||||
bearish: '#dc2626',
|
||||
reduce: '#f59e0b',
|
||||
mention: '#9ca3af',
|
||||
}
|
||||
|
||||
@@ -31,6 +33,7 @@ function actionLabel(action: KolTicker['action'], isZh: boolean) {
|
||||
const labels: Record<KolTicker['action'], string> = {
|
||||
buy: 'BUY',
|
||||
sell: 'SELL',
|
||||
reduce: 'Reduce',
|
||||
bullish: 'Bullish',
|
||||
bearish: 'Bearish',
|
||||
mention: 'Mention',
|
||||
@@ -78,6 +81,7 @@ function postActionLabel(action: string, isZh: boolean) {
|
||||
const labels: Record<string, string> = {
|
||||
buy: 'BUY',
|
||||
sell: 'SELL',
|
||||
reduce: 'Reducing',
|
||||
bullish: 'Bullish post',
|
||||
bearish: 'Bearish post',
|
||||
}
|
||||
@@ -780,12 +784,14 @@ export default function KolPage({
|
||||
const locale = useLocale()
|
||||
const isZh = false // i18n shelved — Chinese branches kept as dead code for future revival; see messages/zh.json
|
||||
const dateLocale = isZh ? 'zh-CN' : 'en-US'
|
||||
const KOL_PAGE_SIZE = 20
|
||||
const [posts, setPosts] = useState<KolPostSummary[]>(initialPosts ?? [])
|
||||
const [loading, setLoading] = useState(initialPosts === null)
|
||||
const [err, setErr] = useState('')
|
||||
const [openPost, setOpenPost] = useState<KolPostDetail | null>(null)
|
||||
const [handleFilter, setHandleFilter] = useState<string>('all')
|
||||
const [tickerFilter, setTickerFilter] = useState<string | null>(null)
|
||||
const [kolPage, setKolPage] = useState(1)
|
||||
|
||||
useEffect(() => {
|
||||
swrFetch(
|
||||
@@ -812,6 +818,10 @@ export default function KolPage({
|
||||
return out
|
||||
}, [posts, handleFilter, tickerFilter])
|
||||
|
||||
const kolTotalPages = Math.max(1, Math.ceil(filtered.length / KOL_PAGE_SIZE))
|
||||
const kolSafePage = Math.min(kolPage, kolTotalPages)
|
||||
const kolPageItems = filtered.slice((kolSafePage - 1) * KOL_PAGE_SIZE, kolSafePage * KOL_PAGE_SIZE)
|
||||
|
||||
async function openDetail(id: number) {
|
||||
try {
|
||||
const detail = await getKolPost(id)
|
||||
@@ -837,8 +847,10 @@ export default function KolPage({
|
||||
isZh={isZh}
|
||||
initialDigest={initialDigest}
|
||||
activeTicker={tickerFilter}
|
||||
onTickerClick={(sym) =>
|
||||
setTickerFilter(prev => prev === sym ? null : sym)}
|
||||
onTickerClick={(sym) => {
|
||||
setTickerFilter(prev => prev === sym ? null : sym)
|
||||
setKolPage(1)
|
||||
}}
|
||||
/>
|
||||
|
||||
<WalletCheckWidget
|
||||
@@ -858,7 +870,7 @@ export default function KolPage({
|
||||
<span style={{ color: 'var(--ink-3)' }}>{isZh ? '当前筛选标的：' : 'Filtered asset:'}</span>
|
||||
<strong>{tickerFilter}</strong>
|
||||
<button
|
||||
onClick={() => setTickerFilter(null)}
|
||||
onClick={() => { setTickerFilter(null); setKolPage(1) }}
|
||||
style={{
|
||||
background: 'var(--bg-sunk)', border: '1px solid var(--line)',
|
||||
borderRadius: 4, padding: '2px 8px',
|
||||
@@ -873,7 +885,7 @@ export default function KolPage({
|
||||
{handles.map(h => (
|
||||
<button
|
||||
key={h}
|
||||
onClick={() => setHandleFilter(h)}
|
||||
onClick={() => { setHandleFilter(h); setKolPage(1) }}
|
||||
className={`nav-tab ${handleFilter === h ? 'active' : ''}`}
|
||||
style={{ border: 'none', cursor: 'pointer' }}
|
||||
>
|
||||
@@ -895,7 +907,7 @@ export default function KolPage({
|
||||
: 'No data yet. Wait for the next feed ingestion run (daily 01:15 UTC).'}
|
||||
</div>
|
||||
)}
|
||||
{filtered.map(p => (
|
||||
{kolPageItems.map(p => (
|
||||
<div
|
||||
key={p.id}
|
||||
onClick={() => openDetail(p.id)}
|
||||
@@ -954,6 +966,15 @@ export default function KolPage({
|
||||
<TickerChips tickers={p.tickers} isZh={isZh} />
|
||||
</div>
|
||||
))}
|
||||
|
||||
<Pagination
|
||||
page={kolSafePage}
|
||||
total={kolTotalPages}
|
||||
count={filtered.length}
|
||||
pageSize={KOL_PAGE_SIZE}
|
||||
onChange={setKolPage}
|
||||
scrollTop={false}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useMemo } from 'react'
|
||||
import dynamic from 'next/dynamic'
|
||||
import { useLocale } from 'next-intl'
|
||||
import type { TrumpPost } from '@/types'
|
||||
import { getPosts, getFundingSnapshot, type FundingSnapshot } from '@/lib/api'
|
||||
@@ -9,7 +10,12 @@ import PostRow from '@/components/dashboard/PostCards'
|
||||
import SystemControl from '@/components/signals/SystemControl'
|
||||
import InfoTip from '@/components/ui/InfoTip'
|
||||
import PageHint from '@/components/ui/PageHint'
|
||||
import MacroPanel from '@/components/btc/MacroPanel'
|
||||
|
||||
// MacroPanel is 631 lines with heavy indicator math — split it out.
|
||||
const MacroPanel = dynamic(() => import('@/components/btc/MacroPanel'), {
|
||||
ssr: false,
|
||||
loading: () => <div style={{ height: 280, background: 'var(--bg-sunk)', borderRadius: 12, marginBottom: 20 }} />,
|
||||
})
|
||||
|
||||
/**
|
||||
* System 2 — BTC bottom-reversal. Its own dedicated page.
|
||||
|
||||
@@ -1,14 +1,20 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import dynamic from 'next/dynamic'
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { useLocale } from 'next-intl'
|
||||
import { useAccount } from 'wagmi'
|
||||
import BotConfigPanel from '@/components/trades/BotConfigPanel'
|
||||
import TelegramCard from '@/components/telegram/TelegramCard'
|
||||
import PageHint from '@/components/ui/PageHint'
|
||||
|
||||
// BotConfigPanel is 867 lines and only needed after wallet connect — lazy load it.
|
||||
const BotConfigPanel = dynamic(() => import('@/components/trades/BotConfigPanel'), {
|
||||
ssr: false,
|
||||
loading: () => <div style={{ height: 200, background: 'var(--bg-sunk)', borderRadius: 12, marginBottom: 16 }} />,
|
||||
})
|
||||
|
||||
/**
|
||||
* Settings page — the home for all configuration.
|
||||
*
|
||||
|
||||
@@ -69,7 +69,9 @@ export default function TradesPageClient() {
|
||||
}
|
||||
})()
|
||||
return () => { cancelled = true }
|
||||
}, [address, isConnected, isZh])
|
||||
// isZh intentionally excluded: compile-time constant (always false).
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [address, isConnected])
|
||||
|
||||
const needsSetup = mounted && isConnected && (!isSubscribed || !hlApiKeySet)
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
export default function TradesLoading() {
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-head">
|
||||
<div className="skeleton sk-title" style={{ width: 140, marginBottom: 8 }} />
|
||||
</div>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="skeleton-card" style={{ marginBottom: 8, padding: 16 }}>
|
||||
<div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
|
||||
<div className="skeleton sk-line" style={{ width: 40 }} />
|
||||
<div className="skeleton sk-line" style={{ width: 60 }} />
|
||||
<div className="skeleton sk-line" style={{ width: 80 }} />
|
||||
<div className="skeleton sk-line" style={{ width: 100 }} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -9,11 +9,9 @@ import PostRow from '@/components/dashboard/PostCards'
|
||||
import SystemControl from '@/components/signals/SystemControl'
|
||||
import PageHint from '@/components/ui/PageHint'
|
||||
import InfoTip from '@/components/ui/InfoTip'
|
||||
import Pagination from '@/components/ui/Pagination'
|
||||
|
||||
/**
|
||||
* System 1 — Trump (event-driven scalp). Its own dedicated page.
|
||||
* Shows ONLY source === 'truth'. No scanner panel (that's System 2).
|
||||
*/
|
||||
const PAGE_SIZE = 30
|
||||
|
||||
const SENTIMENTS = ['all', 'bullish', 'bearish', 'neutral'] as const
|
||||
type SentimentFilter = (typeof SENTIMENTS)[number]
|
||||
@@ -25,29 +23,32 @@ interface TrumpSignalPageProps {
|
||||
|
||||
export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPageProps) {
|
||||
const locale = useLocale()
|
||||
const isZh = false // i18n shelved — Chinese branches kept as dead code for future revival; see messages/zh.json
|
||||
const [posts, setPosts] = useState<TrumpPost[]>(initialPosts ?? [])
|
||||
const [loading, setLoading] = useState(initialPosts === null)
|
||||
const [loadErr, setLoadErr] = useState('')
|
||||
const isZh = false
|
||||
const [posts, setPosts] = useState<TrumpPost[]>(initialPosts ?? [])
|
||||
const [loading, setLoading] = useState(initialPosts === null)
|
||||
const [loadErr, setLoadErr] = useState('')
|
||||
const [sentFilter, setSentFilter] = useState<SentimentFilter>('all')
|
||||
const [sigFilter, setSigFilter] = useState<SignalFilter>('all')
|
||||
const [page, setPage] = useState(1)
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
swrFetch(
|
||||
'posts-500',
|
||||
3 * 60_000, // 3 min TTL
|
||||
3 * 60_000,
|
||||
() => getPosts(500, 1),
|
||||
fresh => setPosts(fresh), // background revalidation callback
|
||||
fresh => setPosts(fresh),
|
||||
)
|
||||
.then(p => { setPosts(p); setLoadErr('') })
|
||||
.catch(e => setLoadErr(e instanceof Error ? e.message : (isZh ? '帖子加载失败' : 'Failed to load posts')))
|
||||
.catch(e => setLoadErr(e instanceof Error ? e.message : 'Failed to load posts'))
|
||||
.finally(() => setLoading(false))
|
||||
}, [isZh])
|
||||
}, [])
|
||||
|
||||
const trumpPosts = useMemo(
|
||||
() => posts.filter(p => (p.source || '') === 'truth'),
|
||||
[posts],
|
||||
)
|
||||
|
||||
const filtered = useMemo(() => trumpPosts.filter(p => {
|
||||
if (sentFilter !== 'all' && p.sentiment !== sentFilter) return false
|
||||
if (sigFilter === 'actionable' && p.signal !== 'buy' && p.signal !== 'short') return false
|
||||
@@ -56,6 +57,10 @@ export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPage
|
||||
return true
|
||||
}), [trumpPosts, sentFilter, sigFilter])
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE))
|
||||
const safePage = Math.min(page, totalPages)
|
||||
const pageItems = filtered.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE)
|
||||
|
||||
const sigCounts = useMemo(() => ({
|
||||
all: trumpPosts.length,
|
||||
actionable: trumpPosts.filter(p => p.signal === 'buy' || p.signal === 'short').length,
|
||||
@@ -64,24 +69,17 @@ export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPage
|
||||
}), [trumpPosts])
|
||||
|
||||
const signalLabels: Record<SignalFilter, string> = {
|
||||
all: isZh ? '全部' : 'All',
|
||||
actionable: isZh ? '可执行' : 'Actionable',
|
||||
buy: isZh ? '做多' : 'Buy',
|
||||
short: isZh ? '做空' : 'Short',
|
||||
all: 'All', actionable: 'Actionable', buy: 'Buy', short: 'Short',
|
||||
}
|
||||
|
||||
const sentimentLabels: Record<SentimentFilter, string> = {
|
||||
all: isZh ? '全部' : 'All',
|
||||
bullish: isZh ? '看多' : 'Bullish',
|
||||
bearish: isZh ? '看空' : 'Bearish',
|
||||
neutral: isZh ? '中性' : 'Neutral',
|
||||
all: 'All', bullish: 'Bullish', bearish: 'Bearish', neutral: 'Neutral',
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-head">
|
||||
<div>
|
||||
<h1 className="page-title">{isZh ? '① Trump 信号' : '① Trump Signal'}</h1>
|
||||
<h1 className="page-title">① Trump Signal</h1>
|
||||
<PageHint count={`${sigCounts.actionable} actionable / ${trumpPosts.length} posts`}>
|
||||
Watches Trump's Truth Social posts in real time, AI-scores each one,
|
||||
and only fires a trade when the conviction is high enough to move price.
|
||||
@@ -96,6 +94,7 @@ export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPage
|
||||
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||
gap: 12, margin: '16px 0 12px', flexWrap: 'wrap',
|
||||
}}>
|
||||
{/* Signal filter tabs */}
|
||||
<div className="nav-tabs" style={{ background: 'var(--bg-sunk)' }}>
|
||||
{([
|
||||
{ key: 'all', hint: 'Every post the scraper has captured.' },
|
||||
@@ -106,7 +105,7 @@ export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPage
|
||||
<button
|
||||
key={f.key}
|
||||
className={`nav-tab ${sigFilter === f.key ? 'active' : ''}`}
|
||||
onClick={() => setSigFilter(f.key)}
|
||||
onClick={() => { setSigFilter(f.key); setPage(1) }}
|
||||
>
|
||||
{f.key === 'actionable' ? '🔥 ' : ''}
|
||||
{signalLabels[f.key]}
|
||||
@@ -114,6 +113,8 @@ export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPage
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Sentiment filter */}
|
||||
<div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<span style={{ fontSize: 11, color: 'var(--ink-4)', marginRight: 4 }}>
|
||||
Sentiment
|
||||
@@ -125,7 +126,7 @@ export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPage
|
||||
{SENTIMENTS.map(f => (
|
||||
<button
|
||||
key={f}
|
||||
onClick={() => setSentFilter(f)}
|
||||
onClick={() => { setSentFilter(f); setPage(1) }}
|
||||
style={{
|
||||
padding: '4px 10px', borderRadius: 6, border: '1px solid var(--line)',
|
||||
background: sentFilter === f ? 'var(--ink)' : 'transparent',
|
||||
@@ -140,24 +141,37 @@ export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPage
|
||||
</div>
|
||||
|
||||
{loading && <TrumpSkeleton />}
|
||||
|
||||
{!loading && loadErr && (
|
||||
<div className="card" style={{ padding: 24, textAlign: 'center', color: 'var(--down)' }}>
|
||||
⚠️ {`Couldn’t load signals — ${loadErr}`}
|
||||
⚠️ {`Couldn't load signals — ${loadErr}`}
|
||||
<div style={{ marginTop: 10 }}>
|
||||
<button className="btn ghost" style={{ fontSize: 12, padding: '6px 14px' }}
|
||||
onClick={() => location.reload()}>{isZh ? '重试' : 'Retry'}</button>
|
||||
onClick={() => location.reload()}>Retry</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !loadErr && filtered.length === 0 && (
|
||||
<div className="card" style={{ padding: 48, textAlign: 'center', color: 'var(--ink-3)' }}>
|
||||
No Trump signals match the current filter.
|
||||
</div>
|
||||
)}
|
||||
{!loading && filtered.length > 0 && (
|
||||
<div className="post-stream">
|
||||
{filtered.map(p => <PostRow key={p.id} post={p} />)}
|
||||
</div>
|
||||
|
||||
{!loading && pageItems.length > 0 && (
|
||||
<>
|
||||
<div className="post-stream">
|
||||
{pageItems.map(p => <PostRow key={p.id} post={p} />)}
|
||||
</div>
|
||||
|
||||
<Pagination
|
||||
page={safePage}
|
||||
total={totalPages}
|
||||
count={filtered.length}
|
||||
pageSize={PAGE_SIZE}
|
||||
onChange={setPage}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
/** Instant skeleton shown by Next.js while TrumpPage compiles / fetches. */
|
||||
export default function TrumpLoading() {
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-head">
|
||||
<div>
|
||||
<div className="skeleton sk-title" style={{ width: 180, marginBottom: 8 }} />
|
||||
<div className="skeleton sk-line" style={{ width: 320 }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="post-stream" style={{ marginTop: 16 }}>
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<div key={i} className="skeleton-card" style={{ marginBottom: 8 }}>
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
||||
<div className="skeleton sk-line sk-w-q" />
|
||||
<div className="skeleton sk-line" style={{ width: 60 }} />
|
||||
</div>
|
||||
<div className="skeleton sk-title sk-w-3q" />
|
||||
<div className="skeleton sk-line sk-w-full" />
|
||||
<div className="skeleton sk-line sk-w-half" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -8,12 +8,23 @@ async function handler(request: NextRequest): Promise<NextResponse> {
|
||||
const targetUrl = `${API_BASE}${targetPath}${url.search}`
|
||||
|
||||
const headers = new Headers(request.headers)
|
||||
// Remove Next.js internal headers
|
||||
// Remove Next.js internal headers that would confuse the upstream server.
|
||||
// Keep (or relay) x-forwarded-for so the backend's rate limiter can
|
||||
// identify individual clients — without it, all users share the Next.js
|
||||
// server IP and a single rate-limit bucket.
|
||||
headers.delete('host')
|
||||
headers.delete('x-forwarded-for')
|
||||
headers.delete('x-forwarded-host')
|
||||
headers.delete('x-forwarded-proto')
|
||||
|
||||
// Relay real client IP. Prefer the header Vercel/CDN already set; fall
|
||||
// back to x-real-ip; ultimately unknown if neither is present (e.g. local
|
||||
// dev through a raw Node server).
|
||||
const clientIp =
|
||||
request.headers.get('x-forwarded-for') ??
|
||||
request.headers.get('x-real-ip') ??
|
||||
'unknown'
|
||||
headers.set('x-forwarded-for', clientIp)
|
||||
|
||||
const body =
|
||||
request.method !== 'GET' && request.method !== 'HEAD'
|
||||
? await request.arrayBuffer()
|
||||
|
||||
+222
-73
@@ -4,21 +4,21 @@
|
||||
============================================================ */
|
||||
|
||||
.lp-root {
|
||||
--lp-bg: #0a0907;
|
||||
--lp-bg-2: #12100c;
|
||||
--lp-surface: rgba(255, 255, 255, 0.04);
|
||||
--lp-surface-2: rgba(255, 255, 255, 0.07);
|
||||
--lp-line: rgba(255, 255, 255, 0.08);
|
||||
--lp-line-2: rgba(255, 255, 255, 0.14);
|
||||
--lp-ink: #f5f2ea;
|
||||
--lp-ink-2: #c9c3b5;
|
||||
--lp-bg: #060605;
|
||||
--lp-bg-2: #0e0d0b;
|
||||
--lp-surface: rgba(255, 255, 255, 0.045);
|
||||
--lp-surface-2: rgba(255, 255, 255, 0.08);
|
||||
--lp-line: rgba(255, 255, 255, 0.10);
|
||||
--lp-line-2: rgba(255, 255, 255, 0.18);
|
||||
--lp-ink: #ffffff;
|
||||
--lp-ink-2: #d4cfc5;
|
||||
--lp-ink-3: #8a8578;
|
||||
--lp-ink-4: #5c584e;
|
||||
--lp-amber: #f5a524;
|
||||
--lp-amber-2: #e68a00;
|
||||
--lp-amber-glow: rgba(245, 165, 36, 0.35);
|
||||
--lp-red: #ef4444;
|
||||
--lp-green: #22c55e;
|
||||
--lp-amber-glow: rgba(245, 165, 36, 0.40);
|
||||
--lp-red: #f43f3f;
|
||||
--lp-green: #1fdb63;
|
||||
--lp-violet: #a78bfa;
|
||||
|
||||
min-height: 100vh;
|
||||
@@ -104,7 +104,7 @@
|
||||
.lp-nav-inner {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 14px 24px;
|
||||
padding: 12px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -142,24 +142,46 @@
|
||||
|
||||
/* ---------- Hero ---------- */
|
||||
.lp-hero {
|
||||
min-height: calc(100vh - 60px);
|
||||
min-height: calc(100vh - 56px);
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
gap: 52px;
|
||||
align-items: start;
|
||||
padding: 72px 0 60px;
|
||||
text-align: left;
|
||||
}
|
||||
.lp-hero-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 80px 0 100px;
|
||||
text-align: center;
|
||||
align-items: flex-start;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.lp-hero-right {
|
||||
position: relative;
|
||||
padding-top: 2px;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
.lp-hero {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
padding: 52px 0 56px;
|
||||
gap: 0;
|
||||
align-items: center;
|
||||
}
|
||||
.lp-hero-left { align-items: center; }
|
||||
.lp-hero-right { display: none; }
|
||||
}
|
||||
|
||||
.lp-live-badge {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
margin: 0 auto 28px;
|
||||
padding: 7px 14px 7px 10px;
|
||||
font-size: 12px; font-weight: 600;
|
||||
color: var(--lp-ink-2);
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.25);
|
||||
border-radius: 999px;
|
||||
letter-spacing: 0.04em;
|
||||
margin: 0 0 22px;
|
||||
padding: 5px 12px 5px 9px;
|
||||
font-size: 11px; font-weight: 700;
|
||||
color: var(--lp-ink-3);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
border-radius: 6px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
animation: lp-fade-up 0.7s ease both;
|
||||
}
|
||||
@@ -176,11 +198,11 @@
|
||||
}
|
||||
|
||||
.lp-h1 {
|
||||
font-size: clamp(40px, 7.2vw, 88px);
|
||||
font-weight: 800;
|
||||
line-height: 1.02;
|
||||
letter-spacing: -0.035em;
|
||||
margin: 0 0 22px;
|
||||
font-size: clamp(36px, 5.0vw, 72px);
|
||||
font-weight: 900;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.04em;
|
||||
margin: 0 0 18px;
|
||||
animation: lp-fade-up 0.9s 0.1s ease both;
|
||||
}
|
||||
.lp-h1 .grad {
|
||||
@@ -210,28 +232,36 @@
|
||||
}
|
||||
|
||||
.lp-sub {
|
||||
max-width: 640px;
|
||||
margin: 0 auto 40px;
|
||||
font-size: clamp(16px, 1.8vw, 20px);
|
||||
max-width: 480px;
|
||||
margin: 0 0 32px;
|
||||
font-size: clamp(14px, 1.5vw, 17px);
|
||||
line-height: 1.55;
|
||||
color: var(--lp-ink-2);
|
||||
color: var(--lp-ink-3);
|
||||
animation: lp-fade-up 0.9s 0.25s ease both;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
.lp-sub { margin: 0 auto 32px; max-width: 520px; }
|
||||
.lp-engine-chips { justify-content: center; }
|
||||
}
|
||||
|
||||
.lp-ctas {
|
||||
display: flex; gap: 14px;
|
||||
justify-content: center;
|
||||
display: flex; gap: 12px;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
animation: lp-fade-up 0.9s 0.4s ease both;
|
||||
}
|
||||
@media (max-width: 920px) {
|
||||
.lp-ctas { justify-content: center; }
|
||||
}
|
||||
.lp-btn {
|
||||
display: inline-flex; align-items: center; gap: 10px;
|
||||
padding: 16px 28px;
|
||||
font-size: 16px; font-weight: 600;
|
||||
border-radius: 14px;
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 14px 24px;
|
||||
font-size: 15px; font-weight: 700;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
transition: all 0.18s ease;
|
||||
cursor: pointer; border: none;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
/* 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.
|
||||
@@ -265,8 +295,8 @@
|
||||
|
||||
/* ---------- Ticker strip ---------- */
|
||||
.lp-ticker {
|
||||
margin-top: 64px;
|
||||
padding: 18px 0;
|
||||
margin-top: 0;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid var(--lp-line);
|
||||
border-bottom: 1px solid var(--lp-line);
|
||||
overflow: hidden;
|
||||
@@ -277,7 +307,7 @@
|
||||
display: flex;
|
||||
gap: 48px;
|
||||
width: max-content;
|
||||
animation: lp-scroll 40s linear infinite;
|
||||
animation: lp-scroll 28s linear infinite;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@keyframes lp-scroll {
|
||||
@@ -302,30 +332,30 @@
|
||||
|
||||
/* ---------- Section ---------- */
|
||||
.lp-section {
|
||||
padding: 80px 0;
|
||||
padding: 72px 0;
|
||||
position: relative;
|
||||
}
|
||||
.lp-eyebrow {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.16em;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--lp-amber);
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.lp-h2 {
|
||||
font-size: clamp(30px, 4.5vw, 52px);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.025em;
|
||||
line-height: 1.08;
|
||||
margin: 0 0 20px;
|
||||
font-size: clamp(26px, 3.8vw, 48px);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1.1;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.lp-lead {
|
||||
max-width: 600px;
|
||||
font-size: 17px;
|
||||
line-height: 1.55;
|
||||
color: var(--lp-ink-2);
|
||||
margin: 0 0 40px;
|
||||
max-width: 580px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: var(--lp-ink-3);
|
||||
margin: 0 0 36px;
|
||||
}
|
||||
|
||||
/* ---------- Scroll reveal ---------- */
|
||||
@@ -545,7 +575,7 @@
|
||||
|
||||
/* ---------- Final CTA ---------- */
|
||||
.lp-cta-final {
|
||||
padding: 120px 0;
|
||||
padding: 88px 0 96px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
@@ -1469,19 +1499,19 @@
|
||||
/* ===== Mobile polish (≤720px / ≤480px) ===== */
|
||||
@media (max-width: 720px) {
|
||||
.lp-wrap { padding: 0 16px; }
|
||||
.lp-nav-inner { padding: 12px 16px; }
|
||||
.lp-nav-inner { padding: 10px 16px; }
|
||||
.lp-logo { font-size: 14px; }
|
||||
.lp-nav-cta { padding: 8px 12px; font-size: 12px; }
|
||||
.lp-nav-cta { padding: 7px 12px; font-size: 12px; }
|
||||
|
||||
.lp-hero {
|
||||
min-height: auto;
|
||||
padding: 48px 0 56px;
|
||||
padding: 44px 0 52px;
|
||||
}
|
||||
.lp-h1 {
|
||||
font-size: clamp(30px, 8.4vw, 56px);
|
||||
margin-bottom: 18px;
|
||||
font-size: clamp(28px, 8.0vw, 52px);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.lp-sub { margin-bottom: 28px; font-size: 15px; }
|
||||
.lp-sub { margin-bottom: 24px; font-size: 14px; }
|
||||
.lp-live-badge {
|
||||
font-size: 10px;
|
||||
padding: 6px 10px 6px 8px;
|
||||
@@ -1496,10 +1526,10 @@
|
||||
.lp-ticker-track { gap: 24px; }
|
||||
.lp-ticker-item { font-size: 11px; }
|
||||
|
||||
.lp-section { padding: 60px 0; }
|
||||
.lp-h2 { font-size: clamp(24px, 6.4vw, 40px); }
|
||||
.lp-lead { font-size: 15px; }
|
||||
.lp-eyebrow { font-size: 11px; }
|
||||
.lp-section { padding: 52px 0; }
|
||||
.lp-h2 { font-size: clamp(22px, 6.0vw, 38px); }
|
||||
.lp-lead { font-size: 14px; }
|
||||
.lp-eyebrow { font-size: 10px; }
|
||||
|
||||
/* Terminal */
|
||||
.lp-term { border-radius: 14px; }
|
||||
@@ -1535,7 +1565,7 @@
|
||||
.lp-stat-val { font-size: 28px; }
|
||||
|
||||
/* Final CTA */
|
||||
.lp-cta-final { padding: 64px 0 72px; }
|
||||
.lp-cta-final { padding: 56px 0 64px; }
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
@@ -1649,12 +1679,128 @@
|
||||
}
|
||||
*/
|
||||
|
||||
/* ── Engine chips — 6-signal breadth strip ─────────────────── */
|
||||
.lp-engine-chips {
|
||||
display: flex; flex-wrap: wrap; gap: 6px;
|
||||
margin-top: 18px;
|
||||
animation: lp-fade-up 0.9s 0.55s ease both;
|
||||
}
|
||||
.lp-engine-chip {
|
||||
font-size: 11px; font-weight: 600;
|
||||
padding: 4px 10px; border-radius: 5px;
|
||||
font-family: 'Geist Mono', monospace;
|
||||
letter-spacing: 0.04em;
|
||||
border: 1px solid;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.lp-engine-chip.trump { color: var(--lp-amber); background: rgba(245,165,36,0.10); border-color: rgba(245,165,36,0.28); }
|
||||
.lp-engine-chip.macro { color: var(--lp-green); background: rgba(31,219,99,0.09); border-color: rgba(31,219,99,0.25); }
|
||||
.lp-engine-chip.kol { color: var(--lp-violet); background: rgba(167,139,250,0.10); border-color: rgba(167,139,250,0.28); }
|
||||
.lp-engine-chip.tvt { color: var(--lp-red); background: rgba(244,63,63,0.09); border-color: rgba(244,63,63,0.25); }
|
||||
.lp-engine-chip.fund { color: #60c8f5; background: rgba(96,200,245,0.09); border-color: rgba(96,200,245,0.25); }
|
||||
.lp-engine-chip.auto { color: var(--lp-ink-2); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.13); }
|
||||
|
||||
/* ── Live feed (X-timeline style, hero right column) ───────── */
|
||||
.lp-livefeed {
|
||||
background: rgba(8,8,8,0.85);
|
||||
border: 1px solid var(--lp-line-2);
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(24px);
|
||||
box-shadow:
|
||||
0 40px 100px rgba(0,0,0,0.7),
|
||||
0 0 0 1px rgba(255,255,255,0.04),
|
||||
inset 0 1px 0 rgba(255,255,255,0.04);
|
||||
animation: lp-fade-up 1s 0.5s ease both;
|
||||
}
|
||||
.lp-livefeed-head {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 11px 16px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.07);
|
||||
font-size: 10px; font-weight: 700;
|
||||
letter-spacing: 0.12em; text-transform: uppercase;
|
||||
color: var(--lp-ink-3);
|
||||
background: rgba(255,255,255,0.015);
|
||||
}
|
||||
.lp-livefeed-dot {
|
||||
width: 7px; height: 7px; border-radius: 50%;
|
||||
background: var(--lp-green);
|
||||
box-shadow: 0 0 8px var(--lp-green);
|
||||
animation: lp-ping 1.4s infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.lp-livefeed-count {
|
||||
margin-left: auto;
|
||||
font-size: 10px;
|
||||
color: var(--lp-ink-4);
|
||||
font-family: 'Geist Mono', monospace;
|
||||
}
|
||||
|
||||
.lp-signal-post {
|
||||
padding: 13px 16px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
transition: background 0.15s;
|
||||
cursor: default;
|
||||
}
|
||||
.lp-signal-post:last-child { border-bottom: none; }
|
||||
.lp-signal-post.is-new {
|
||||
background: rgba(245,165,36,0.04);
|
||||
border-left: 2px solid var(--lp-amber);
|
||||
padding-left: 14px;
|
||||
}
|
||||
.lp-signal-post:hover { background: rgba(255,255,255,0.025); }
|
||||
.lp-signal-post-head {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.lp-signal-handle {
|
||||
font-size: 13px; font-weight: 700;
|
||||
color: var(--lp-ink);
|
||||
}
|
||||
.lp-signal-at { font-size: 12px; color: var(--lp-ink-4); }
|
||||
.lp-signal-ts { font-size: 11px; color: var(--lp-ink-4); margin-left: auto; font-family: 'Geist Mono', monospace; }
|
||||
.lp-signal-new-badge {
|
||||
margin-left: 4px;
|
||||
font-size: 9px; font-weight: 700;
|
||||
padding: 1px 6px; border-radius: 3px;
|
||||
background: var(--lp-amber);
|
||||
color: #060605;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
animation: lp-pulse-soft 1.8s ease-in-out infinite;
|
||||
}
|
||||
.lp-signal-text {
|
||||
font-size: 13.5px; line-height: 1.4;
|
||||
color: var(--lp-ink-2);
|
||||
margin: 0 0 9px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lp-signal-chips {
|
||||
display: flex; gap: 5px; flex-wrap: wrap; align-items: center;
|
||||
}
|
||||
.lp-signal-chip {
|
||||
font-size: 10px; font-weight: 700;
|
||||
padding: 3px 8px; border-radius: 4px;
|
||||
font-family: 'Geist Mono', monospace;
|
||||
letter-spacing: 0.05em;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.lp-signal-chip.long { background: rgba(31,219,99,0.15); color: var(--lp-green); border-color: rgba(31,219,99,0.30); }
|
||||
.lp-signal-chip.short { background: rgba(244,63,63,0.15); color: var(--lp-red); border-color: rgba(244,63,63,0.30); }
|
||||
.lp-signal-chip.noise { background: rgba(255,255,255,0.05); color: var(--lp-ink-4); border-color: rgba(255,255,255,0.08); }
|
||||
.lp-signal-chip.asset { background: rgba(245,165,36,0.15); color: var(--lp-amber); border-color: rgba(245,165,36,0.30); }
|
||||
.lp-signal-chip.conf { background: rgba(167,139,250,0.12); color: var(--lp-violet); border-color: rgba(167,139,250,0.25); }
|
||||
.lp-signal-chip.action-ok { color: var(--lp-green); background: transparent; border: none; padding-left: 0; font-weight: 500; font-size: 11px; }
|
||||
.lp-signal-chip.action-skip { color: var(--lp-ink-4); background: transparent; border: none; padding-left: 0; font-weight: 500; font-size: 11px; }
|
||||
|
||||
/* ── 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;
|
||||
margin: 32px 0 0;
|
||||
display: inline-flex; align-items: stretch; gap: 24px;
|
||||
padding: 14px 20px;
|
||||
border: 1px solid var(--lp-line);
|
||||
border-radius: 16px;
|
||||
background:
|
||||
@@ -1697,6 +1843,9 @@
|
||||
background: linear-gradient(180deg, transparent, var(--lp-line), transparent);
|
||||
align-self: stretch;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
.lp-herostats { align-self: center; }
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.lp-herostats { gap: 16px; padding: 14px 18px; }
|
||||
}
|
||||
|
||||
+140
-51
@@ -224,8 +224,9 @@ export default function LandingPage() {
|
||||
useCursorVars(rootRef as React.RefObject<HTMLElement>)
|
||||
|
||||
// Decoded hero text — assembles from random glyphs on mount.
|
||||
const heroLine1 = useScramble('Where crypto alpha actually lives —', 1100)
|
||||
const heroLine2 = useScramble('all in one tab.', 1500)
|
||||
const heroLine1 = useScramble('Trump. KOL. Macro.', 900)
|
||||
const heroLine2 = useScramble('Six engines.', 1200)
|
||||
const heroLine3 = useScramble('Always first.', 1500)
|
||||
// primaryRef / useMagnetic intentionally removed — the hero CTA is now a
|
||||
// static button. The hook is still defined above in case the effect is
|
||||
// reinstated on another element later.
|
||||
@@ -254,56 +255,74 @@ export default function LandingPage() {
|
||||
<div className="lp-wrap">
|
||||
{/* ---------- HERO ---------- */}
|
||||
<section className="lp-hero">
|
||||
<div className="lp-live-badge">
|
||||
<span className="lp-live-dot" />
|
||||
Six signal engines running · right now
|
||||
</div>
|
||||
|
||||
<h1 className="lp-h1 lp-decode">
|
||||
<span className="lp-decode-line">{heroLine1}</span>
|
||||
<br />
|
||||
<span className="grad lp-decode-line">{heroLine2}</span>
|
||||
</h1>
|
||||
|
||||
<p className="lp-sub">
|
||||
Trump posts. On-chain bottoms. KOL essays. Wallets that move before
|
||||
they tweet. We scrape every edge, score it with AI, and surface only
|
||||
what’s tradeable. You sleep. It doesn’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="#pillars" className="lp-btn lp-btn-secondary">
|
||||
See all six signals
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Live counter strip — animates in when hero is visible */}
|
||||
<HeroStats />
|
||||
|
||||
|
||||
{/* 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>
|
||||
))}
|
||||
{/* LEFT column */}
|
||||
<div className="lp-hero-left">
|
||||
<div className="lp-live-badge">
|
||||
<span className="lp-live-dot" />
|
||||
6 signal engines · live right now
|
||||
</div>
|
||||
|
||||
<h1 className="lp-h1 lp-decode">
|
||||
<span className="lp-decode-line">{heroLine1}</span>
|
||||
<br />
|
||||
<span className="grad lp-decode-line">{heroLine2}</span>
|
||||
<br />
|
||||
<span className="lp-decode-line">{heroLine3}</span>
|
||||
</h1>
|
||||
|
||||
<p className="lp-sub">
|
||||
AI reads every signal in under 3 seconds.
|
||||
You’re in the position before the headline hits.
|
||||
</p>
|
||||
|
||||
<div className="lp-ctas">
|
||||
<Link href="/en" className="lp-btn lp-btn-primary">
|
||||
Launch Dashboard
|
||||
<span className="lp-arrow">→</span>
|
||||
</Link>
|
||||
<a href="#pillars" className="lp-btn lp-btn-secondary">
|
||||
See all six signals
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Engine chips — show breadth at a glance */}
|
||||
<div className="lp-engine-chips">
|
||||
<span className="lp-engine-chip trump">Trump Signal</span>
|
||||
<span className="lp-engine-chip macro">Macro Vibes</span>
|
||||
<span className="lp-engine-chip kol">KOL Signal</span>
|
||||
<span className="lp-engine-chip tvt">Talks vs Trades</span>
|
||||
<span className="lp-engine-chip fund">Funding Reversal</span>
|
||||
<span className="lp-engine-chip auto">Auto-Trader</span>
|
||||
</div>
|
||||
|
||||
{/* Live counter strip */}
|
||||
<HeroStats />
|
||||
</div>
|
||||
|
||||
{/* RIGHT column — X-style live signal feed */}
|
||||
<div className="lp-hero-right">
|
||||
<LiveFeed />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Ticker strip — below the 2-col hero */}
|
||||
<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>
|
||||
|
||||
{/* ---------- FOUR PILLARS ---------- */}
|
||||
<section id="pillars" className="lp-section" style={{ paddingTop: 60 }}>
|
||||
<section id="pillars" className="lp-section" style={{ paddingTop: 48 }}>
|
||||
<div className="lp-reveal" style={{ maxWidth: 680 }}>
|
||||
<div className="lp-eyebrow">What runs inside</div>
|
||||
<h2 className="lp-h2">
|
||||
@@ -369,7 +388,7 @@ export default function LandingPage() {
|
||||
</section>
|
||||
|
||||
{/* ---------- THE ENGINE (terminal block) — Pillar 1 deep-dive ---------- */}
|
||||
<section id="engine" className="lp-section" style={{ paddingTop: 60 }}>
|
||||
<section id="engine" className="lp-section" style={{ paddingTop: 48 }}>
|
||||
<div className="lp-reveal" style={{ maxWidth: 640 }}>
|
||||
<div className="lp-eyebrow">Pillar 1 · live engine</div>
|
||||
<h2 className="lp-h2">
|
||||
@@ -439,7 +458,7 @@ export default function LandingPage() {
|
||||
</section>
|
||||
|
||||
{/* ---------- PRESS / HEADLINES ---------- */}
|
||||
<section className="lp-section" style={{ paddingTop: 60 }}>
|
||||
<section className="lp-section" style={{ paddingTop: 48 }}>
|
||||
<div className="lp-reveal" style={{ maxWidth: 680 }}>
|
||||
<div className="lp-eyebrow">Headlines you can Google</div>
|
||||
<h2 className="lp-h2">
|
||||
@@ -598,7 +617,7 @@ export default function LandingPage() {
|
||||
</section>
|
||||
|
||||
{/* ---------- COMPARISON TABLE ---------- */}
|
||||
<section id="compare" className="lp-section" style={{ paddingTop: 60 }}>
|
||||
<section id="compare" className="lp-section" style={{ paddingTop: 48 }}>
|
||||
<div className="lp-reveal" style={{ maxWidth: 680 }}>
|
||||
<div className="lp-eyebrow">How it compares</div>
|
||||
<h2 className="lp-h2">
|
||||
@@ -631,7 +650,7 @@ export default function LandingPage() {
|
||||
</section>
|
||||
|
||||
{/* ---------- WHAT IS TRUMP ALPHA (canonical definition for GEO) ---------- */}
|
||||
<section id="about" className="lp-section" style={{ paddingTop: 80 }}>
|
||||
<section id="about" className="lp-section" style={{ paddingTop: 56 }}>
|
||||
<div className="lp-reveal" style={{ maxWidth: 720 }}>
|
||||
<div className="lp-eyebrow">What is Trump Alpha</div>
|
||||
<h2 className="lp-h2">
|
||||
@@ -730,6 +749,76 @@ export default function LandingPage() {
|
||||
)
|
||||
}
|
||||
|
||||
/* ---------- Live feed (hero right column) ---------- */
|
||||
function LiveFeed() {
|
||||
return (
|
||||
<div className="lp-livefeed">
|
||||
<div className="lp-livefeed-head">
|
||||
<span className="lp-livefeed-dot" />
|
||||
Live signal feed
|
||||
<span className="lp-livefeed-count">3 today</span>
|
||||
</div>
|
||||
<LiveSignalPost
|
||||
isNew
|
||||
ts="2m ago"
|
||||
text="BITCOIN is the FUTURE of money. America will LEAD the world in crypto. BIG things coming very soon. ENJOY!"
|
||||
signal={{ type: 'LONG', asset: 'BTC', conf: 82, action: 'AUTO-LONG fired' }}
|
||||
/>
|
||||
<LiveSignalPost
|
||||
ts="14m ago"
|
||||
text="Massive new TARIFFS on China coming — they have RIPPED OFF the USA for decades. No more!"
|
||||
signal={{ type: 'SHORT', asset: 'BTC', conf: 71, action: 'AUTO-SHORT fired' }}
|
||||
/>
|
||||
<LiveSignalPost
|
||||
ts="38m ago"
|
||||
text="Crooked Joe and the Radical Left Lunatics are destroying our beautiful country. SAD!"
|
||||
signal={{ type: 'NOISE', skip: 'off-topic · skipped' }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function LiveSignalPost({
|
||||
isNew, ts, text, signal,
|
||||
}: {
|
||||
isNew?: boolean
|
||||
ts: string
|
||||
text: string
|
||||
signal:
|
||||
| { type: 'LONG' | 'SHORT'; asset: string; conf: number; action: string }
|
||||
| { type: 'NOISE'; skip: string }
|
||||
}) {
|
||||
const t = signal.type
|
||||
return (
|
||||
<div className={`lp-signal-post${isNew ? ' is-new' : ''}`}>
|
||||
<div className="lp-signal-post-head">
|
||||
<span className="lp-signal-handle">Donald Trump</span>
|
||||
<span className="lp-signal-at">@realDonaldTrump</span>
|
||||
{isNew && <span className="lp-signal-new-badge">new</span>}
|
||||
<span className="lp-signal-ts">{ts}</span>
|
||||
</div>
|
||||
<p className="lp-signal-text">{text}</p>
|
||||
<div className="lp-signal-chips">
|
||||
<span className={`lp-signal-chip ${t === 'LONG' ? 'long' : t === 'SHORT' ? 'short' : 'noise'}`}>
|
||||
{t}
|
||||
</span>
|
||||
{'asset' in signal && (
|
||||
<>
|
||||
<span className="lp-signal-chip asset">{signal.asset}</span>
|
||||
<span className="lp-signal-chip conf">CONF {signal.conf}</span>
|
||||
<span className={`lp-signal-chip ${signal.action.includes('fired') ? 'action-ok' : 'action-skip'}`}>
|
||||
· {signal.action}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{'skip' in signal && (
|
||||
<span className="lp-signal-chip action-skip">· {signal.skip}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/* ---------- Terminal row ---------- */
|
||||
function TermRow({
|
||||
isNew,
|
||||
|
||||
Reference in New Issue
Block a user