+
+
+
+
{product.name} ({product.code})
+
详细技术分析
+
+
+
+
+
+
+
+ ¥{product.price.toLocaleString()}
+
+
+ {isUp ? : }
+ {isUp ? '+' : ''}{product.change.toFixed(2)} ({isUp ? '+' : ''}{product.changePercent}%)
+
+
+
+
+
+
+
+
开盘
+
{product.open.toLocaleString()}
+
+
+
最高
+
{product.high.toLocaleString()}
+
+
+
最低
+
{product.low.toLocaleString()}
+
+
+
持仓量
+
{product.openInterest.toLocaleString()}
+
+
+
+
+
+
+
+
+
+
周期选择
+
+ {periods.map((p) => (
+
setSelectedPeriod(p.key as any)}
+ />
+ ))}
+
+
+
+
+ {loading ? (
+
+ ) : cycleData ? (
+
+ ) : null}
+
+
+
+
+
+
+
+ {advice && (
+
+
+
操作建议
+
+ {advice.action === 'long' ? '逢低做多' : advice.action === 'short' ? '逢高做空' : '观望等待'}
+
+
{advice.reason}
+
+
+
+
+
建议入场
+
{advice.entryPrice.toLocaleString()}
+
+
+
目标价位
+
{advice.targetPrice.toLocaleString()}
+
+
+
止损价位
+
{advice.stopLoss.toLocaleString()}
+
+
+
风险等级
+
+ {advice.riskLevel === 'low' ? '低' : advice.riskLevel === 'medium' ? '中' : '高'}
+
+
+
+
+ )}
+
+
+
+
+
+ {indicators && (
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
压力位
+ {product.keyLevels.resistance.map((level, index) => (
+
+ ))}
+
+
+
+
支撑位
+ {product.keyLevels.support.map((level, index) => (
+
+ ))}
+
+
+
+
+
+
+
+ {Object.entries(product.cycles).map(([key, trend]) => (
+
+
{cycleLabels[key]}
+
+ {trend === 'up' ?
: trend === 'down' ?
:
}
+
{trend === 'up' ? '上涨' : trend === 'down' ? '下跌' : '震荡'}
+
+
+ ))}
+
+
+
+
+ 周期共振度
+ = 80 ? 'text-revolut-teal' : product.trendScore >= 60 ? 'text-revolut-warning' : 'text-revolut-danger'}`}>
+ {product.trendScore}%
+
+
+
+
= 80 ? 'bg-revolut-teal' : product.trendScore >= 60 ? 'bg-revolut-warning' : 'bg-revolut-danger'
+ }`}
+ style={{ width: `${product.trendScore}%` }}
+ />
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/revolut-design/src/components/RiskAlerts.tsx b/revolut-design/src/components/RiskAlerts.tsx
new file mode 100644
index 0000000..da9b642
--- /dev/null
+++ b/revolut-design/src/components/RiskAlerts.tsx
@@ -0,0 +1,99 @@
+import { AlertTriangle, Bell, Shield, TrendingDown, AlertOctagon } from 'lucide-react';
+import type { RiskAlert } from '@/types';
+
+interface RiskAlertsProps {
+ alerts: RiskAlert[];
+}
+
+function RiskLevelBadge({ level }: { level: 'high' | 'medium' | 'low' }) {
+ const config = {
+ high: { text: '高风险', color: 'text-revolut-danger', bg: 'bg-revolut-danger/10', icon: AlertOctagon },
+ medium: { text: '中风险', color: 'text-revolut-warning', bg: 'bg-revolut-warning/10', icon: AlertTriangle },
+ low: { text: '低风险', color: 'text-revolut-teal', bg: 'bg-revolut-teal/10', icon: Shield },
+ };
+
+ const { text, color, bg, icon: Icon } = config[level];
+
+ return (
+
+
+ {text}
+
+ );
+}
+
+export function RiskAlertsPanel({ alerts }: RiskAlertsProps) {
+ if (alerts.length === 0) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+
+ {alerts.length} 条
+
+
+
+
+ {alerts.map((alert) => (
+
+
+
+
{alert.title}
+
{alert.description}
+
+
+
+
+
+
+
影响品种:
+
+ {alert.affectedProducts.slice(0, 2).map((product) => (
+
+ {product}
+
+ ))}
+ {alert.affectedProducts.length > 2 && (
+ +{alert.affectedProducts.length - 2}
+ )}
+
+
+
{alert.time}
+
+
+
+
+
+ 建议: {alert.suggestion}
+
+
+
+ ))}
+
+
+ );
+}
\ No newline at end of file
diff --git a/revolut-design/src/data/mockData.ts b/revolut-design/src/data/mockData.ts
new file mode 100644
index 0000000..181e2c8
--- /dev/null
+++ b/revolut-design/src/data/mockData.ts
@@ -0,0 +1,457 @@
+import type { FuturesProduct, HotEvent, MarketOverview, RiskAlert, CycleAnalysis, KLineData, MACDData, TechnicalIndicators, TradingAdvice } from '@/types';
+
+export const marketOverview: MarketOverview = {
+ heatIndex: 78.5,
+ heatChange: 5.2,
+ upCount: 156,
+ downCount: 89,
+ capitalFlow: 28.5,
+ volatilityIndex: 23.8,
+ volatilityChange: -1.2,
+};
+
+export const hotEvents: HotEvent[] = [
+ {
+ id: '1',
+ title: '地缘政治风险升级',
+ time: '2025-03-02',
+ summary: '美以袭伊朗，"海上油阀"被关，中东局势紧张升级',
+ affectedProducts: ['原油', '黄金', '白银', '燃油'],
+ impact: 'bullish',
+ impactLevel: 5,
+ analysis: '地缘政治风险急剧升温，霍尔木兹海峡封锁风险上升。原油供应中断担忧推动油价上涨，避险资产黄金、白银同步走强。短期油价易涨难跌，建议关注原油、黄金相关品种做多机会。',
+ risks: ['冲突升级可能', '供应中断风险', '波动率激增'],
+ },
+ {
+ id: '2',
+ title: '黄金价格创历史新高',
+ time: '2025-03-01',
+ summary: 'COMEX黄金突破3100美元关口，避险需求强劲',
+ affectedProducts: ['黄金', '白银', '铂金', '美元指数'],
+ impact: 'bullish',
+ impactLevel: 4,
+ analysis: '特朗普关税政策"2.0"版本引发市场担忧，叠加地缘政治风险，黄金避险属性凸显。技术面突破历史高点，多头趋势强劲。预计金价短期维持强势，回调即是买入机会。',
+ risks: ['获利回吐压力', '美元反弹风险', '美联储政策转向'],
+ },
+ {
+ id: '3',
+ title: '铜供应紧张预期',
+ time: '2025-02-28',
+ summary: '全球铜市场预计出现18万吨供应缺口，美国或加征铜进口关税',
+ affectedProducts: ['铜', '铝', '镍', '锌'],
+ impact: 'bullish',
+ impactLevel: 4,
+ analysis: '铜精矿TC现货指数持续回落，矿山供应增长放缓。美国可能加征铜进口关税，刺激美铜价格上涨，全球套利行为收紧供应。需求端新能源产业用铜需求快速增长，供需矛盾支撑铜价。',
+ risks: ['需求放缓风险', '美元走强压制', '库存累积'],
+ },
+ {
+ id: '4',
+ title: '美联储通胀数据超预期',
+ time: '2025-02-27',
+ summary: '核心PCE数据超预期，降息预期降温',
+ affectedProducts: ['美元指数', '黄金', '原油', '大宗商品'],
+ impact: 'bearish',
+ impactLevel: 3,
+ analysis: '美国2月核心PCE通胀数据超预期，市场对美联储降息预期降温。美元指数短期获得支撑，对大宗商品形成一定压制。但地缘政治风险对冲了部分利空影响。',
+ risks: ['加息预期升温', '美元持续走强', '风险资产抛售'],
+ },
+ {
+ id: '5',
+ title: 'OPEC+减产延期预期',
+ time: '2025-02-26',
+ summary: 'OPEC+可能延长减产协议至二季度末',
+ affectedProducts: ['原油', '燃油', '沥青', '石化品种'],
+ impact: 'bullish',
+ impactLevel: 3,
+ analysis: 'OPEC+成员国倾向于延长减产协议以支撑油价。全球原油需求预期改善，叠加供应端约束，原油市场供需格局趋紧。关注减产协议正式落地情况。',
+ risks: ['减产执行力度', '非OPEC增产', '需求不及预期'],
+ },
+];
+
+export const futuresProducts: FuturesProduct[] = [
+ {
+ id: '1',
+ name: '原油',
+ code: 'SC',
+ category: 'energy',
+ price: 528.6,
+ change: 12.1,
+ changePercent: 2.35,
+ open: 518.0,
+ high: 535.0,
+ low: 515.5,
+ volume: 285600,
+ openInterest: 125800,
+ trendScore: 85,
+ successRate: 72,
+ cycles: {
+ m5: 'up',
+ m15: 'up',
+ m30: 'up',
+ m60: 'sideways',
+ },
+ keyLevels: {
+ resistance: [535.0, 542.0, 550.0],
+ support: [518.0, 510.0, 500.0],
+ },
+ recommendation: 'long',
+ recommendationReason: '地缘政治风险推动，多周期共振向上',
+ },
+ {
+ id: '2',
+ name: '黄金',
+ code: 'AU',
+ category: 'metal',
+ price: 685.2,
+ change: 12.45,
+ changePercent: 1.85,
+ open: 675.0,
+ high: 692.0,
+ low: 672.0,
+ volume: 456200,
+ openInterest: 215600,
+ trendScore: 92,
+ successRate: 78,
+ cycles: {
+ m5: 'up',
+ m15: 'up',
+ m30: 'up',
+ m60: 'up',
+ },
+ keyLevels: {
+ resistance: [692.0, 700.0, 710.0],
+ support: [678.0, 670.0, 660.0],
+ },
+ recommendation: 'long',
+ recommendationReason: '创历史新高，趋势强劲，避险需求旺盛',
+ },
+ {
+ id: '3',
+ name: '铜',
+ code: 'CU',
+ category: 'metal',
+ price: 80610,
+ change: 112,
+ changePercent: 0.14,
+ open: 80200,
+ high: 81200,
+ low: 79800,
+ volume: 125800,
+ openInterest: 98500,
+ trendScore: 65,
+ successRate: 58,
+ cycles: {
+ m5: 'sideways',
+ m15: 'up',
+ m30: 'sideways',
+ m60: 'up',
+ },
+ keyLevels: {
+ resistance: [81200, 82000, 83000],
+ support: [79800, 79000, 78000],
+ },
+ recommendation: 'wait',
+ recommendationReason: '高位震荡，方向不明，建议观望',
+ },
+ {
+ id: '4',
+ name: '白银',
+ code: 'AG',
+ category: 'metal',
+ price: 8250,
+ change: 165,
+ changePercent: 2.04,
+ open: 8100,
+ high: 8350,
+ low: 8050,
+ volume: 325600,
+ openInterest: 185200,
+ trendScore: 88,
+ successRate: 75,
+ cycles: {
+ m5: 'up',
+ m15: 'up',
+ m30: 'up',
+ m60: 'up',
+ },
+ keyLevels: {
+ resistance: [8350, 8500, 8650],
+ support: [8100, 8000, 7850],
+ },
+ recommendation: 'long',
+ recommendationReason: '跟随黄金上涨，波动更大，机会更好',
+ },
+ {
+ id: '5',
+ name: '铁矿石',
+ code: 'I',
+ category: 'metal',
+ price: 785.5,
+ change: 28.0,
+ changePercent: 3.7,
+ open: 760.0,
+ high: 792.0,
+ low: 755.0,
+ volume: 185200,
+ openInterest: 95600,
+ trendScore: 82,
+ successRate: 68,
+ cycles: {
+ m5: 'up',
+ m15: 'up',
+ m30: 'up',
+ m60: 'up',
+ },
+ keyLevels: {
+ resistance: [792.0, 800.0, 815.0],
+ support: [770.0, 760.0, 745.0],
+ },
+ recommendation: 'long',
+ recommendationReason: '黑色系领涨，需求预期改善',
+ },
+ {
+ id: '6',
+ name: '豆粕',
+ code: 'M',
+ category: 'agriculture',
+ price: 2985,
+ change: -51,
+ changePercent: -1.68,
+ open: 3040,
+ high: 3050,
+ low: 2960,
+ volume: 256800,
+ openInterest: 325600,
+ trendScore: 35,
+ successRate: 42,
+ cycles: {
+ m5: 'down',
+ m15: 'down',
+ m30: 'down',
+ m60: 'sideways',
+ },
+ keyLevels: {
+ resistance: [3050, 3100, 3180],
+ support: [2960, 2900, 2820],
+ },
+ recommendation: 'short',
+ recommendationReason: '供应充足，需求疲软，短期偏弱',
+ },
+ {
+ id: '7',
+ name: '棕榈油',
+ code: 'P',
+ category: 'agriculture',
+ price: 8750,
+ change: 0,
+ changePercent: 0,
+ open: 8720,
+ high: 8820,
+ low: 8680,
+ volume: 125600,
+ openInterest: 185200,
+ trendScore: 50,
+ successRate: 52,
+ cycles: {
+ m5: 'sideways',
+ m15: 'sideways',
+ m30: 'sideways',
+ m60: 'sideways',
+ },
+ keyLevels: {
+ resistance: [8820, 8900, 9050],
+ support: [8680, 8600, 8450],
+ },
+ recommendation: 'wait',
+ recommendationReason: '横盘整理，等待方向选择',
+ },
+ {
+ id: '8',
+ name: '集运指数',
+ code: 'EC',
+ category: 'financial',
+ price: 2150,
+ change: 196,
+ changePercent: 10.06,
+ open: 1960,
+ high: 2200,
+ low: 1940,
+ volume: 85600,
+ openInterest: 45600,
+ trendScore: 90,
+ successRate: 80,
+ cycles: {
+ m5: 'up',
+ m15: 'up',
+ m30: 'up',
+ m60: 'up',
+ },
+ keyLevels: {
+ resistance: [2200, 2300, 2400],
+ support: [2000, 1900, 1800],
+ },
+ recommendation: 'long',
+ recommendationReason: '涨停突破，地缘风险推升运价',
+ },
+];
+
+export const riskAlerts: RiskAlert[] = [
+ {
+ id: '1',
+ title: '中东地缘风险急剧升温',
+ affectedProducts: ['原油', '黄金', '燃油'],
+ riskLevel: 'high',
+ description: '美以与伊朗冲突升级，霍尔木兹海峡封锁风险上升',
+ suggestion: '控制仓位，设置止损，关注局势发展',
+ time: '2025-03-02 14:30',
+ },
+ {
+ id: '2',
+ title: '黄金价格创历史新高',
+ affectedProducts: ['黄金', '白银'],
+ riskLevel: 'medium',
+ description: '金价快速上涨后存在获利回吐风险',
+ suggestion: '避免追高，等待回调后再入场',
+ time: '2025-03-01 09:15',
+ },
+ {
+ id: '3',
+ title: '集运指数涨停',
+ affectedProducts: ['集运指数'],
+ riskLevel: 'high',
+ description: '连续涨停后波动率激增，注意回调风险',
+ suggestion: '减仓或获利了结，避免隔夜重仓',
+ time: '2025-03-02 15:00',
+ },
+];
+
+export function generateKLineData(basePrice: number, count: number = 100): KLineData[] {
+ const data: KLineData[] = [];
+ let price = basePrice;
+ const now = new Date();
+
+ for (let i = count; i >= 0; i--) {
+ const time = new Date(now.getTime() - i * 5 * 60 * 1000);
+ const volatility = price * 0.008;
+ const change = (Math.random() - 0.48) * volatility;
+
+ const open = price;
+ const close = price + change;
+ const high = Math.max(open, close) + Math.random() * volatility * 0.5;
+ const low = Math.min(open, close) - Math.random() * volatility * 0.5;
+ const volume = Math.floor(Math.random() * 10000 + 5000);
+
+ data.push({
+ time: time.toISOString(),
+ open: Number(open.toFixed(2)),
+ high: Number(high.toFixed(2)),
+ low: Number(low.toFixed(2)),
+ close: Number(close.toFixed(2)),
+ volume,
+ });
+
+ price = close;
+ }
+
+ return data;
+}
+
+export function generateMACDData(klineData: KLineData[]): MACDData[] {
+ const data: MACDData[] = [];
+ let ema12 = klineData[0].close;
+ let ema26 = klineData[0].close;
+ let dea = 0;
+
+ const k12 = 2 / 13;
+ const k26 = 2 / 27;
+ const k9 = 2 / 10;
+
+ for (const kline of klineData) {
+ ema12 = kline.close * k12 + ema12 * (1 - k12);
+ ema26 = kline.close * k26 + ema26 * (1 - k26);
+ const dif = ema12 - ema26;
+ dea = dif * k9 + dea * (1 - k9);
+ const macd = (dif - dea) * 2;
+
+ data.push({
+ time: kline.time,
+ dif: Number(dif.toFixed(4)),
+ dea: Number(dea.toFixed(4)),
+ macd: Number(macd.toFixed(4)),
+ });
+ }
+
+ return data;
+}
+
+export function generateCycleAnalysis(productId: string, period: 'm5' | 'm15' | 'm30' | 'm60'): CycleAnalysis {
+ const product = futuresProducts.find(p => p.id === productId);
+ const basePrice = product?.price || 500;
+ const klineData = generateKLineData(basePrice, 80);
+ const macdData = generateMACDData(klineData);
+
+ const volumeData = klineData.map(d => ({
+ time: d.time,
+ value: d.volume,
+ }));
+
+ return {
+ period,
+ trend: product?.cycles[period] || 'sideways',
+ trendStrength: Math.floor(Math.random() * 40) + 60,
+ klineData,
+ volumeData,
+ macdData,
+ keyLevels: {
+ resistance: product?.keyLevels.resistance || [],
+ support: product?.keyLevels.support || [],
+ },
+ };
+}
+
+export function generateTechnicalIndicators(productId: string): TechnicalIndicators {
+ const product = futuresProducts.find(p => p.id === productId);
+ const price = product?.price || 500;
+
+ return {
+ macd: {
+ signal: Math.random() > 0.5 ? 'golden_cross' : 'neutral',
+ value: Number((Math.random() * 2 - 0.5).toFixed(4)),
+ },
+ rsi: {
+ value: Math.floor(Math.random() * 40) + 30,
+ status: 'normal',
+ },
+ bollinger: {
+ upper: price * 1.03,
+ middle: price,
+ lower: price * 0.97,
+ position: 'middle',
+ },
+ kdj: {
+ k: Math.floor(Math.random() * 100),
+ d: Math.floor(Math.random() * 100),
+ j: Math.floor(Math.random() * 100),
+ signal: Math.random() > 0.6 ? 'golden_cross' : 'neutral',
+ },
+ };
+}
+
+export function generateTradingAdvice(productId: string): TradingAdvice {
+ const product = futuresProducts.find(p => p.id === productId);
+ const price = product?.price || 500;
+ const recommendation = product?.recommendation || 'wait';
+
+ const volatility = price * 0.02;
+
+ return {
+ action: recommendation,
+ entryPrice: recommendation === 'long' ? price - volatility * 0.3 : price + volatility * 0.3,
+ stopLoss: recommendation === 'long' ? price - volatility : price + volatility,
+ targetPrice: recommendation === 'long' ? price + volatility * 2 : price - volatility * 2,
+ riskLevel: product?.trendScore && product.trendScore > 80 ? 'low' : product?.trendScore && product.trendScore > 60 ? 'medium' : 'high',
+ position: product?.trendScore && product.trendScore > 80 ? 'medium' : 'light',
+ holdingTime: 'short',
+ reason: product?.recommendationReason || '技术面与基本面综合判断',
+ };
+}
\ No newline at end of file
diff --git a/revolut-design/src/index.css b/revolut-design/src/index.css
new file mode 100644
index 0000000..6a8f0d4
--- /dev/null
+++ b/revolut-design/src/index.css
@@ -0,0 +1,171 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --rui-color-dark: #191c1f;
+ --rui-color-white: #ffffff;
+ --rui-color-surface: #f4f4f4;
+ --rui-color-blue: #494fdf;
+ --rui-color-action-blue: #4f55f1;
+ --rui-color-blue-text: #376cd5;
+ --rui-color-danger: #e23b4a;
+ --rui-color-deep-pink: #e61e49;
+ --rui-color-warning: #ec7e00;
+ --rui-color-yellow: #b09000;
+ --rui-color-teal: #00a87e;
+ --rui-color-light-green: #428619;
+ --rui-color-green-text: #006400;
+ --rui-color-light-blue: #007bc2;
+ --rui-color-brown: #936d62;
+ --rui-color-red-text: #8b0000;
+ --rui-color-mid-slate: #505a63;
+ --rui-color-cool-gray: #8d969e;
+ --rui-color-gray-tone: #c9c9cd;
+ }
+
+ * {
+ @apply border-revolut-grayTone;
+ }
+
+ body {
+ @apply bg-revolut-white text-revolut-dark antialiased;
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ letter-spacing: 0.24px;
+ }
+}
+
+::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+}
+
+::-webkit-scrollbar-track {
+ background: #f4f4f4;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #c9c9cd;
+ border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #8d969e;
+}
+
+::selection {
+ background: rgba(73, 79, 223, 0.2);
+ color: #191c1f;
+}
+
+*:focus-visible {
+ outline: 0 0 0 0.125rem #494fdf;
+ outline-offset: 2px;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+.line-clamp-2 {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.animate-fadeIn {
+ animation: fadeIn 0.5s ease-out forwards;
+}
+
+.font-mono {
+ font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
+}
+
+@layer components {
+ .btn-pill {
+ @apply rounded-pill px-8 py-3.5 font-display text-nav font-medium transition-all duration-200;
+ }
+
+ .btn-pill-primary {
+ @apply btn-pill bg-revolut-dark text-revolut-white hover:opacity-85;
+ }
+
+ .btn-pill-secondary {
+ @apply btn-pill bg-revolut-surface text-revolut-dark hover:opacity-85;
+ }
+
+ .btn-pill-outline {
+ @apply btn-pill bg-transparent text-revolut-dark border-2 border-revolut-dark;
+ }
+
+ .btn-pill-ghost {
+ @apply btn-pill bg-revolut-surface/10 text-revolut-surface border-2 border-revolut-surface;
+ }
+
+ .card-revolut {
+ @apply rounded-card bg-revolut-white border border-revolut-grayTone;
+ }
+
+ .card-dark {
+ @apply rounded-card bg-revolut-dark text-revolut-white;
+ }
+
+ .heading-display {
+ font-family: 'Aeonik Pro', 'Inter', 'Arial', sans-serif;
+ font-weight: 500;
+ letter-spacing: -0.48px;
+ }
+
+ .heading-hero {
+ font-family: 'Aeonik Pro', 'Inter', 'Arial', sans-serif;
+ font-size: 5rem;
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: -0.8px;
+ }
+
+ .heading-section {
+ font-family: 'Aeonik Pro', 'Inter', 'Arial', sans-serif;
+ font-size: 3rem;
+ font-weight: 500;
+ line-height: 1.21;
+ letter-spacing: -0.48px;
+ }
+
+ .heading-card {
+ font-family: 'Aeonik Pro', 'Inter', 'Arial', sans-serif;
+ font-size: 2rem;
+ font-weight: 500;
+ line-height: 1.19;
+ letter-spacing: -0.32px;
+ }
+
+ .text-body {
+ font-family: 'Inter', 'Arial', sans-serif;
+ font-size: 1rem;
+ font-weight: 400;
+ line-height: 1.5;
+ letter-spacing: 0.24px;
+ }
+
+ .text-body-semibold {
+ font-family: 'Inter', 'Arial', sans-serif;
+ font-size: 1rem;
+ font-weight: 600;
+ line-height: 1.5;
+ letter-spacing: 0.16px;
+ }
+}
\ No newline at end of file
diff --git a/revolut-design/src/main.tsx b/revolut-design/src/main.tsx
new file mode 100644
index 0000000..3d4bdea
--- /dev/null
+++ b/revolut-design/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+ ,
+)
\ No newline at end of file
diff --git a/revolut-design/src/types/index.ts b/revolut-design/src/types/index.ts
new file mode 100644
index 0000000..1c4aa74
--- /dev/null
+++ b/revolut-design/src/types/index.ts
@@ -0,0 +1,125 @@
+export interface FuturesProduct {
+ id: string;
+ name: string;
+ code: string;
+ category: 'energy' | 'metal' | 'agriculture' | 'financial';
+ price: number;
+ change: number;
+ changePercent: number;
+ open: number;
+ high: number;
+ low: number;
+ volume: number;
+ openInterest: number;
+ trendScore: number;
+ successRate: number;
+ cycles: {
+ m5: TrendDirection;
+ m15: TrendDirection;
+ m30: TrendDirection;
+ m60: TrendDirection;
+ };
+ keyLevels: {
+ resistance: number[];
+ support: number[];
+ };
+ recommendation: 'long' | 'short' | 'wait';
+ recommendationReason: string;
+}
+
+export type TrendDirection = 'up' | 'down' | 'sideways';
+
+export interface HotEvent {
+ id: string;
+ title: string;
+ time: string;
+ summary: string;
+ affectedProducts: string[];
+ impact: 'bullish' | 'bearish' | 'neutral';
+ impactLevel: 1 | 2 | 3 | 4 | 5;
+ analysis: string;
+ risks: string[];
+}
+
+export interface MarketOverview {
+ heatIndex: number;
+ heatChange: number;
+ upCount: number;
+ downCount: number;
+ capitalFlow: number;
+ volatilityIndex: number;
+ volatilityChange: number;
+}
+
+export interface KLineData {
+ time: string;
+ open: number;
+ high: number;
+ low: number;
+ close: number;
+ volume: number;
+}
+
+export interface MACDData {
+ time: string;
+ dif: number;
+ dea: number;
+ macd: number;
+}
+
+export interface TechnicalIndicators {
+ macd: {
+ signal: 'golden_cross' | 'dead_cross' | 'neutral';
+ value: number;
+ };
+ rsi: {
+ value: number;
+ status: 'overbought' | 'oversold' | 'normal';
+ };
+ bollinger: {
+ upper: number;
+ middle: number;
+ lower: number;
+ position: 'upper' | 'middle' | 'lower';
+ };
+ kdj: {
+ k: number;
+ d: number;
+ j: number;
+ signal: 'golden_cross' | 'dead_cross' | 'neutral';
+ };
+}
+
+export interface TradingAdvice {
+ action: 'long' | 'short' | 'wait';
+ entryPrice: number;
+ stopLoss: number;
+ targetPrice: number;
+ riskLevel: 'low' | 'medium' | 'high';
+ position: 'light' | 'medium' | 'heavy';
+ holdingTime: 'short' | 'medium' | 'long';
+ reason: string;
+}
+
+export interface RiskAlert {
+ id: string;
+ title: string;
+ affectedProducts: string[];
+ riskLevel: 'high' | 'medium' | 'low';
+ description: string;
+ suggestion: string;
+ time: string;
+}
+
+export interface CycleAnalysis {
+ period: 'm5' | 'm15' | 'm30' | 'm60';
+ trend: TrendDirection;
+ trendStrength: number;
+ klineData: KLineData[];
+ volumeData: { time: string; value: number }[];
+ macdData: MACDData[];
+ keyLevels: {
+ resistance: number[];
+ support: number[];
+ };
+}
\ No newline at end of file
diff --git a/revolut-design/tailwind.config.js b/revolut-design/tailwind.config.js
new file mode 100644
index 0000000..2a3b246
--- /dev/null
+++ b/revolut-design/tailwind.config.js
@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ theme: {
+ extend: {
+ colors: {
+ revolut: {
+ dark: '#191c1f',
+ white: '#ffffff',
+ surface: '#f4f4f4',
+ blue: '#494fdf',
+ actionBlue: '#4f55f1',
+ blueText: '#376cd5',
+ danger: '#e23b4a',
+ deepPink: '#e61e49',
+ warning: '#ec7e00',
+ yellow: '#b09000',
+ teal: '#00a87e',
+ lightGreen: '#428619',
+ greenText: '#006400',
+ lightBlue: '#007bc2',
+ brown: '#936d62',
+ redText: '#8b0000',
+ midSlate: '#505a63',
+ coolGray: '#8d969e',
+ grayTone: '#c9c9cd',
+ },
+ },
+ fontFamily: {
+ display: ['Aeonik Pro', 'Inter', 'Arial', 'sans-serif'],
+ body: ['Inter', 'Arial', 'sans-serif'],
+ mono: ['JetBrains Mono', 'Fira Code', 'SF Mono', 'monospace'],
+ },
+ fontSize: {
+ 'display-mega': ['8.50rem', { lineHeight: '1.00', letterSpacing: '-2.72px', fontWeight: '500' }],
+ 'display-hero': ['5.00rem', { lineHeight: '1.00', letterSpacing: '-0.8px', fontWeight: '500' }],
+ 'section': ['3.00rem', { lineHeight: '1.21', letterSpacing: '-0.48px', fontWeight: '500' }],
+ 'subheading': ['2.50rem', { lineHeight: '1.20', letterSpacing: '-0.4px', fontWeight: '500' }],
+ 'card-title': ['2.00rem', { lineHeight: '1.19', letterSpacing: '-0.32px', fontWeight: '500' }],
+ 'feature': ['1.50rem', { lineHeight: '1.33', letterSpacing: '0', fontWeight: '400' }],
+ 'nav': ['1.25rem', { lineHeight: '1.40', letterSpacing: '0', fontWeight: '500' }],
+ 'body-lg': ['1.13rem', { lineHeight: '1.56', letterSpacing: '-0.09px', fontWeight: '400' }],
+ 'body': ['1.00rem', { lineHeight: '1.50', letterSpacing: '0.24px', fontWeight: '400' }],
+ 'body-semibold': ['1.00rem', { lineHeight: '1.50', letterSpacing: '0.16px', fontWeight: '600' }],
+ 'body-bold': ['1.00rem', { lineHeight: '1.50', letterSpacing: '0.24px', fontWeight: '700' }],
+ },
+ borderRadius: {
+ 'pill': '9999px',
+ 'card': '20px',
+ 'standard': '12px',
+ },
+ spacing: {
+ '4': '4px',
+ '6': '6px',
+ '8': '8px',
+ '14': '14px',
+ '16': '16px',
+ '20': '20px',
+ '24': '24px',
+ '32': '32px',
+ '40': '40px',
+ '48': '48px',
+ '80': '80px',
+ '88': '88px',
+ '120': '120px',
+ },
+ screens: {
+ 'mobile-sm': '400px',
+ 'mobile': '720px',
+ 'tablet': '1024px',
+ 'desktop': '1280px',
+ 'large': '1920px',
+ },
+ },
+ },
+ plugins: [],
+}
\ No newline at end of file
diff --git a/revolut-design/tsconfig.app.json b/revolut-design/tsconfig.app.json
new file mode 100644
index 0000000..fbb4f2d
--- /dev/null
+++ b/revolut-design/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["src"]
+}
\ No newline at end of file
diff --git a/revolut-design/tsconfig.json b/revolut-design/tsconfig.json
new file mode 100644
index 0000000..c452f43
--- /dev/null
+++ b/revolut-design/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
\ No newline at end of file
diff --git a/revolut-design/tsconfig.node.json b/revolut-design/tsconfig.node.json
new file mode 100644
index 0000000..9e38754
--- /dev/null
+++ b/revolut-design/tsconfig.node.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2022",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
\ No newline at end of file
diff --git a/revolut-design/vite.config.ts b/revolut-design/vite.config.ts
new file mode 100644
index 0000000..5d65923
--- /dev/null
+++ b/revolut-design/vite.config.ts
@@ -0,0 +1,21 @@
+import path from "path"
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
+export default defineConfig({
+ base: './',
+ plugins: [react()],
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ },
+ },
+ build: {
+ rollupOptions: {
+ external: [],
+ },
+ commonjsOptions: {
+ esmExternals: true,
+ },
+ },
+});
\ No newline at end of file
diff --git a/revolut/DESIGN.md b/revolut/DESIGN.md
new file mode 100644
index 0000000..2b71ea3
--- /dev/null
+++ b/revolut/DESIGN.md
@@ -0,0 +1,185 @@
+# Design System Inspired by Revolut
+
+## 1. Visual Theme & Atmosphere
+
+Revolut's website is fintech confidence distilled into pixels — a design system that communicates "your money is in capable hands" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on Aeonik Pro, a geometric grotesque that creates billboard-scale headlines at 136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.
+
+The color system is built on a comprehensive `--rui-*` (Revolut UI) token architecture with semantic naming for every state: danger (`#e23b4a`), warning (`#ec7e00`), teal (`#00a87e`), blue (`#494fdf`), deep-pink (`#e61e49`), and more. But the marketing surface itself is remarkably restrained — near-black (`#191c1f`) and pure white (`#ffffff`) dominate, with the colorful semantic tokens reserved for the product interface, not the marketing page.
+
+What distinguishes Revolut is its pill-everything button system. Every button uses 9999px radius — primary dark (`#191c1f`), secondary light (`#f4f4f4`), outlined (`transparent + 2px solid`), and ghost on dark (`rgba(244,244,244,0.1) + 2px solid`). The padding is generous (14px 32px–34px), creating large, confident touch targets. Combined with Inter for body text at various weights and positive letter-spacing (0.16px–0.24px), the result is a design that feels both premium and accessible — banking for the modern era.
+
+**Key Characteristics:**
+- Aeonik Pro display at 136px weight 500 — billboard-scale fintech headlines
+- Near-black (`#191c1f`) + white binary with comprehensive `--rui-*` semantic tokens
+- Universal pill buttons (9999px radius) with generous padding (14px 32px)
+- Inter for body text with positive letter-spacing (0.16px–0.24px)
+- Rich semantic color system: blue, teal, pink, yellow, green, brown, danger, warning
+- Zero shadows detected — depth through color contrast only
+- Tight display line-heights (1.00) with relaxed body (1.50–1.56)
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Revolut Dark** (`#191c1f`): Primary dark surface, button background, near-black text
+- **Pure White** (`#ffffff`): `--rui-color-action-label`, primary light surface
+- **Light Surface** (`#f4f4f4`): Secondary button background, subtle surface
+
+### Brand / Interactive
+- **Revolut Blue** (`#494fdf`): `--rui-color-blue`, primary brand blue
+- **Action Blue** (`#4f55f1`): `--rui-color-action-photo-header-text`, header accent
+- **Blue Text** (`#376cd5`): `--website-color-blue-text`, link blue
+
+### Semantic
+- **Danger Red** (`#e23b4a`): `--rui-color-danger`, error/destructive
+- **Deep Pink** (`#e61e49`): `--rui-color-deep-pink`, critical accent
+- **Warning Orange** (`#ec7e00`): `--rui-color-warning`, warning states
+- **Yellow** (`#b09000`): `--rui-color-yellow`, attention
+- **Teal** (`#00a87e`): `--rui-color-teal`, success/positive
+- **Light Green** (`#428619`): `--rui-color-light-green`, secondary success
+- **Green Text** (`#006400`): `--website-color-green-text`, green text
+- **Light Blue** (`#007bc2`): `--rui-color-light-blue`, informational
+- **Brown** (`#936d62`): `--rui-color-brown`, warm neutral accent
+- **Red Text** (`#8b0000`): `--website-color-red-text`, dark red text
+
+### Neutral Scale
+- **Mid Slate** (`#505a63`): Secondary text
+- **Cool Gray** (`#8d969e`): Muted text, tertiary
+- **Gray Tone** (`#c9c9cd`): `--rui-color-grey-tone-20`, borders/dividers
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: `Aeonik Pro` — geometric grotesque, no detected fallbacks
+- **Body / UI**: `Inter` — standard system sans
+- **Fallback**: `Arial` for specific button contexts
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Mega | Aeonik Pro | 136px (8.50rem) | 500 | 1.00 (tight) | -2.72px | Stadium-scale hero |
+| Display Hero | Aeonik Pro | 80px (5.00rem) | 500 | 1.00 (tight) | -0.8px | Primary hero |
+| Section Heading | Aeonik Pro | 48px (3.00rem) | 500 | 1.21 (tight) | -0.48px | Feature sections |
+| Sub-heading | Aeonik Pro | 40px (2.50rem) | 500 | 1.20 (tight) | -0.4px | Sub-sections |
+| Card Title | Aeonik Pro | 32px (2.00rem) | 500 | 1.19 (tight) | -0.32px | Card headings |
+| Feature Title | Aeonik Pro | 24px (1.50rem) | 400 | 1.33 | normal | Light headings |
+| Nav / UI | Aeonik Pro | 20px (1.25rem) | 500 | 1.40 | normal | Navigation, buttons |
+| Body Large | Inter | 18px (1.13rem) | 400 | 1.56 | -0.09px | Introductions |
+| Body | Inter | 16px (1.00rem) | 400 | 1.50 | 0.24px | Standard reading |
+| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.50 | 0.16px | Emphasized body |
+| Body Bold Link | Inter | 16px (1.00rem) | 700 | 1.50 | 0.24px | Bold links |
+
+### Principles
+- **Weight 500 as display default**: Aeonik Pro uses medium (500) for ALL headings — no bold. This creates authority through size and tracking, not weight.
+- **Billboard tracking**: -2.72px at 136px is extremely compressed — text designed to be read at a glance, like airport signage.
+- **Positive tracking on body**: Inter uses +0.16px to +0.24px, creating airy, well-spaced reading text that contrasts with the compressed headings.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Dark Pill**
+- Background: `#191c1f`
+- Text: `#ffffff`
+- Padding: 14px 32px
+- Radius: 9999px (full pill)
+- Hover: opacity 0.85
+- Focus: `0 0 0 0.125rem` ring
+
+**Secondary Light Pill**
+- Background: `#f4f4f4`
+- Text: `#000000`
+- Padding: 14px 34px
+- Radius: 9999px
+- Hover: opacity 0.85
+
+**Outlined Pill**
+- Background: transparent
+- Text: `#191c1f`
+- Border: `2px solid #191c1f`
+- Padding: 14px 32px
+- Radius: 9999px
+
+**Ghost on Dark**
+- Background: `rgba(244, 244, 244, 0.1)`
+- Text: `#f4f4f4`
+- Border: `2px solid #f4f4f4`
+- Padding: 14px 32px
+- Radius: 9999px
+
+### Cards & Containers
+- Radius: 12px (small), 20px (cards)
+- No shadows — flat surfaces with color contrast
+- Dark and light section alternation
+
+### Navigation
+- Aeonik Pro 20px weight 500
+- Clean header, hamburger toggle at 12px radius
+- Pill CTAs right-aligned
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 4px, 6px, 8px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 80px, 88px, 120px
+- Large section spacing: 80px–120px
+
+### Border Radius Scale
+- Standard (12px): Navigation, small buttons
+- Card (20px): Feature cards
+- Pill (9999px): All buttons
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Everything — Revolut uses zero shadows |
+| Focus | `0 0 0 0.125rem` ring | Accessibility focus |
+
+**Shadow Philosophy**: Revolut uses ZERO shadows. Depth comes entirely from the dark/light section contrast and the generous whitespace between elements.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Aeonik Pro weight 500 for all display headings
+- Apply 9999px radius to all buttons — pill shape is universal
+- Use generous button padding (14px 32px)
+- Keep the palette to near-black + white for marketing surfaces
+- Apply positive letter-spacing on Inter body text
+
+### Don't
+- Don't use shadows — Revolut is flat by design
+- Don't use bold (700) for Aeonik Pro headings — 500 is the weight
+- Don't use small buttons — the generous padding is intentional
+- Don't apply semantic colors to marketing surfaces — they're for the product
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <400px | Compact, single column |
+| Mobile | 400–720px | Standard mobile |
+| Tablet | 720–1024px | 2-column layouts |
+| Desktop | 1024–1280px | Standard desktop |
+| Large | 1280–1920px | Full layout |
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Dark: Revolut Dark (`#191c1f`)
+- Light: White (`#ffffff`)
+- Surface: Light (`#f4f4f4`)
+- Blue: Revolut Blue (`#494fdf`)
+- Danger: Red (`#e23b4a`)
+- Success: Teal (`#00a87e`)
+
+### Example Component Prompts
+- "Create a hero: white background. Headline at 136px Aeonik Pro weight 500, line-height 1.00, letter-spacing -2.72px, #191c1f text. Dark pill CTA (#191c1f, 9999px, 14px 32px). Outlined pill secondary (transparent, 2px solid #191c1f)."
+- "Build a pill button: #191c1f background, white text, 9999px radius, 14px 32px padding, 20px Aeonik Pro weight 500. Hover: opacity 0.85."
+
+### Iteration Guide
+1. Aeonik Pro 500 for headings — never bold
+2. All buttons are pills (9999px) with generous padding
+3. Zero shadows — flat is the Revolut identity
+4. Near-black + white for marketing, semantic colors for product