Spaces:
Running
Running
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TradeForge Pro - EA Trading Market & Broker Referral Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <style> | |
| :root { | |
| --bg-primary: #0a0e17; | |
| --bg-secondary: #111827; | |
| --bg-card: #1a2332; | |
| --fg-primary: #f0f4f8; | |
| --fg-secondary: #94a3b8; | |
| --fg-muted: #64748b; | |
| --accent-gold: #f59e0b; | |
| --accent-green: #10b981; | |
| --accent-blue: #3b82f6; | |
| --accent-purple: #8b5cf6; | |
| --border: #2d3748; | |
| --glow-gold: rgba(245, 158, 11, 0.3); | |
| --glow-green: rgba(16, 185, 129, 0.3); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background: var(--bg-primary); | |
| color: var(--fg-primary); | |
| overflow-x: hidden; | |
| } | |
| .font-mono { | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| /* Background Effects */ | |
| .bg-grid { | |
| background-image: | |
| linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px); | |
| background-size: 60px 60px; | |
| } | |
| .bg-gradient-radial { | |
| background: | |
| radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59, 130, 246, 0.15), transparent), | |
| radial-gradient(ellipse 60% 40% at 80% 50%, rgba(139, 92, 246, 0.1), transparent), | |
| radial-gradient(ellipse 50% 30% at 20% 80%, rgba(16, 185, 129, 0.1), transparent); | |
| } | |
| /* Glassmorphism */ | |
| .glass { | |
| background: rgba(26, 35, 50, 0.7); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .glass-card { | |
| background: linear-gradient(135deg, rgba(26, 35, 50, 0.8), rgba(17, 24, 39, 0.9)); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| /* Animations */ | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { box-shadow: 0 0 20px var(--glow-gold); } | |
| 50% { box-shadow: 0 0 40px var(--glow-gold), 0 0 60px var(--glow-gold); } | |
| } | |
| @keyframes gradient-shift { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| @keyframes slide-up { | |
| from { opacity: 0; transform: translateY(40px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fade-in { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes chart-grow { | |
| from { transform: scaleY(0); } | |
| to { transform: scaleY(1); } | |
| } | |
| .animate-float { animation: float 6s ease-in-out infinite; } | |
| .animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; } | |
| .animate-gradient { | |
| background-size: 200% 200%; | |
| animation: gradient-shift 4s ease infinite; | |
| } | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(40px); | |
| transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .reveal.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .animate-float, .animate-pulse-glow, .animate-gradient { animation: none; } | |
| .reveal { transition: none; opacity: 1; transform: none; } | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-secondary); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--border); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--fg-muted); | |
| } | |
| /* Buttons */ | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--accent-gold), #d97706); | |
| color: var(--bg-primary); | |
| font-weight: 600; | |
| padding: 0.875rem 2rem; | |
| border-radius: 12px; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-primary::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, transparent, rgba(255,255,255,0.2), transparent); | |
| transform: translateX(-100%); | |
| transition: transform 0.5s ease; | |
| } | |
| .btn-primary:hover::before { | |
| transform: translateX(100%); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 40px var(--glow-gold); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| border: 2px solid var(--border); | |
| color: var(--fg-primary); | |
| font-weight: 500; | |
| padding: 0.875rem 2rem; | |
| border-radius: 12px; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-secondary:hover { | |
| border-color: var(--accent-gold); | |
| color: var(--accent-gold); | |
| background: rgba(245, 158, 11, 0.05); | |
| } | |
| /* Cards */ | |
| .ea-card { | |
| transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .ea-card:hover { | |
| transform: translateY(-8px); | |
| border-color: rgba(245, 158, 11, 0.3); | |
| box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 40px var(--glow-gold); | |
| } | |
| /* Chart Bars */ | |
| .chart-bar { | |
| transform-origin: bottom; | |
| animation: chart-grow 1s ease-out forwards; | |
| } | |
| /* Tab System */ | |
| .tab-btn { | |
| position: relative; | |
| padding: 1rem 1.5rem; | |
| color: var(--fg-secondary); | |
| transition: all 0.3s ease; | |
| } | |
| .tab-btn::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| width: 0; | |
| height: 2px; | |
| background: var(--accent-gold); | |
| transition: all 0.3s ease; | |
| transform: translateX(-50%); | |
| } | |
| .tab-btn.active { | |
| color: var(--accent-gold); | |
| } | |
| .tab-btn.active::after { | |
| width: 100%; | |
| } | |
| .tab-btn:hover { | |
| color: var(--fg-primary); | |
| } | |
| /* Stats Counter */ | |
| .stat-number { | |
| background: linear-gradient(135deg, var(--fg-primary), var(--accent-gold)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Navigation */ | |
| .nav-link { | |
| position: relative; | |
| color: var(--fg-secondary); | |
| transition: color 0.3s ease; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -4px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--accent-gold); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover { | |
| color: var(--fg-primary); | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| /* Mobile Menu */ | |
| .mobile-menu { | |
| transform: translateX(100%); | |
| transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .mobile-menu.open { | |
| transform: translateX(0); | |
| } | |
| /* Progress Ring */ | |
| .progress-ring { | |
| transform: rotate(-90deg); | |
| } | |
| .progress-ring-circle { | |
| transition: stroke-dashoffset 1s ease-out; | |
| } | |
| /* Broker Card */ | |
| .broker-card { | |
| transition: all 0.3s ease; | |
| } | |
| .broker-card:hover { | |
| background: rgba(59, 130, 246, 0.1); | |
| border-color: rgba(59, 130, 246, 0.3); | |
| } | |
| /* Price Tag */ | |
| .price-tag { | |
| background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2)); | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| } | |
| /* Focus States */ | |
| button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { | |
| outline: 2px solid var(--accent-gold); | |
| outline-offset: 2px; | |
| } | |
| /* Input Styles */ | |
| .input-field { | |
| background: rgba(17, 24, 39, 0.8); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 1rem 1.25rem; | |
| color: var(--fg-primary); | |
| transition: all 0.3s ease; | |
| } | |
| .input-field:focus { | |
| border-color: var(--accent-gold); | |
| box-shadow: 0 0 20px rgba(245, 158, 11, 0.1); | |
| } | |
| .input-field::placeholder { | |
| color: var(--fg-muted); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-grid"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 left-0 right-0 z-50 glass"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-20"> | |
| <!-- Logo --> | |
| <a href="#" class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center"> | |
| <i data-lucide="trending-up" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold">TradeForge<span class="text-amber-500">Pro</span></span> | |
| </a> | |
| <!-- Desktop Nav --> | |
| <div class="hidden lg:flex items-center gap-8"> | |
| <a href="#marketplace" class="nav-link font-medium">Marketplace</a> | |
| <a href="#brokers" class="nav-link font-medium">Broker Partner</a> | |
| <a href="#pricing" class="nav-link font-medium">Pricing</a> | |
| <a href="#dashboard" class="nav-link font-medium">Dashboard</a> | |
| <a href="#" class="nav-link font-medium">Docs</a> | |
| </div> | |
| <!-- CTA Buttons --> | |
| <div class="hidden lg:flex items-center gap-4"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener" class="text-sm text-amber-500 hover:text-amber-400 transition-colors">Built with anycoder</a> | |
| <button class="btn-secondary text-sm py-2 px-4">Sign In</button> | |
| <button class="btn-primary text-sm py-2 px-5">Get Started</button> | |
| </div> | |
| <!-- Mobile Menu Button --> | |
| <button id="mobileMenuBtn" class="lg:hidden p-2 rounded-lg hover:bg-white/5" aria-label="Toggle menu"> | |
| <i data-lucide="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="mobile-menu fixed inset-0 z-40 lg:hidden"> | |
| <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" id="mobileMenuOverlay"></div> | |
| <div class="absolute right-0 top-0 bottom-0 w-80 bg-[#111827] p-6 pt-24"> | |
| <div class="flex flex-col gap-6"> | |
| <a href="#marketplace" class="text-lg font-medium hover:text-amber-500 transition-colors">Marketplace</a> | |
| <a href="#brokers" class="text-lg font-medium hover:text-amber-500 transition-colors">Broker Partner</a> | |
| <a href="#pricing" class="text-lg font-medium hover:text-amber-500 transition-colors">Pricing</a> | |
| <a href="#dashboard" class="text-lg font-medium hover:text-amber-500 transition-colors">Dashboard</a> | |
| <a href="#" class="text-lg font-medium hover:text-amber-500 transition-colors">Docs</a> | |
| <hr class="border-gray-700"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-amber-500">Built with anycoder</a> | |
| <button class="btn-secondary w-full">Sign In</button> | |
| <button class="btn-primary w-full">Get Started</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center bg-gradient-radial pt-20"> | |
| <!-- Floating Elements --> | |
| <div class="absolute inset-0 overflow-hidden pointer-events-none"> | |
| <div class="absolute top-1/4 left-10 w-64 h-64 bg-amber-500/10 rounded-full blur-3xl animate-float"></div> | |
| <div class="absolute bottom-1/4 right-10 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl animate-float" style="animation-delay: -2s;"></div> | |
| <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl"></div> | |
| </div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 relative z-10"> | |
| <div class="grid lg:grid-cols-2 gap-16 items-center"> | |
| <!-- Left Content --> | |
| <div class="reveal"> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-amber-500/10 border border-amber-500/20 mb-6"> | |
| <span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span> | |
| <span class="text-sm text-amber-500 font-medium">Platform EA Trading #1 di Indonesia</span> | |
| </div> | |
| <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6"> | |
| Expert Advisor | |
| <span class="block bg-gradient-to-r from-amber-400 via-orange-500 to-amber-600 bg-clip-text text-transparent animate-gradient">Marketplace</span> | |
| & Broker Ecosystem | |
| </h1> | |
| <p class="text-lg text-gray-400 mb-8 max-w-xl"> | |
| Temukan, uji, dan deploy Expert Advisor berkualitas tinggi dengan integrasi broker referral ecosystem. | |
| Tingkatkan profit trading Anda dengan EA terverifikasi dan dapatkan komisi referral hingga 45%. | |
| </p> | |
| <div class="flex flex-wrap gap-4 mb-12"> | |
| <button class="btn-primary flex items-center gap-2"> | |
| <span>Mulai Sekarang</span> | |
| <i data-lucide="arrow-right" class="w-5 h-5"></i> | |
| </button> | |
| <button class="btn-secondary flex items-center gap-2"> | |
| <i data-lucide="play-circle" class="w-5 h-5"></i> | |
| <span>Lihat Demo</span> | |
| </button> | |
| </div> | |
| <!-- Stats --> | |
| <div class="grid grid-cols-3 gap-6"> | |
| <div> | |
| <div class="text-3xl font-bold stat-number font-mono" data-count="2847">0</div> | |
| <div class="text-sm text-gray-500">EA Terverifikasi</div> | |
| </div> | |
| <div> | |
| <div class="text-3xl font-bold stat-number font-mono" data-count="15800">0</div> | |
| <div class="text-sm text-gray-500">Active Traders</div> | |
| </div> | |
| <div> | |
| <div class="text-3xl font-bold stat-number font-mono" data-count="45">0</div> | |
| <div class="text-sm text-gray-500">% Max Referral</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right - Dashboard Preview --> | |
| <div class="reveal" style="transition-delay: 0.2s;"> | |
| <div class="glass-card rounded-3xl p-6 relative"> | |
| <!-- Glow Effect --> | |
| <div class="absolute -inset-1 bg-gradient-to-r from-amber-500/20 via-transparent to-blue-500/20 rounded-3xl blur-xl -z-10"></div> | |
| <!-- Dashboard Header --> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-xs text-gray-500 font-mono">trade-forge-pro.vercel.app</div> | |
| </div> | |
| <!-- Mini Dashboard --> | |
| <div class="space-y-4"> | |
| <!-- Balance Card --> | |
| <div class="bg-gradient-to-r from-amber-500/10 to-orange-500/10 rounded-2xl p-5 border border-amber-500/20"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-sm text-gray-400">Total Portfolio Value</span> | |
| <span class="text-xs text-green-500 font-mono bg-green-500/10 px-2 py-1 rounded">+12.4%</span> | |
| </div> | |
| <div class="text-3xl font-bold font-mono">$124,847.32</div> | |
| </div> | |
| <!-- Chart --> | |
| <div class="bg-gray-800/50 rounded-2xl p-5"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="text-sm text-gray-400">Performance (30D)</span> | |
| <div class="flex gap-2"> | |
| <span class="text-xs text-amber-500 bg-amber-500/10 px-2 py-1 rounded cursor-pointer hover:bg-amber-500/20">1M</span> | |
| <span class="text-xs text-gray-500 bg-gray-700/50 px-2 py-1 rounded cursor-pointer hover:bg-gray-700">3M</span> | |
| <span class="text-xs text-gray-500 bg-gray-700/50 px-2 py-1 rounded cursor-pointer hover:bg-gray-700">1Y</span> | |
| </div> | |
| </div> | |
| <div class="h-32 flex items-end gap-2" id="heroChart"> | |
| <!-- Chart bars will be generated by JS --> | |
| </div> | |
| </div> | |
| <!-- Active EAs --> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="bg-gray-800/50 rounded-xl p-4"> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <div class="w-8 h-8 rounded-lg bg-green-500/20 flex items-center justify-center"> | |
| <i data-lucide="bot" class="w-4 h-4 text-green-500"></i> | |
| </div> | |
| <span class="text-sm font-medium">Gold Scalper</span> | |
| </div> | |
| <div class="text-lg font-bold text-green-500 font-mono">+$3,247</div> | |
| <div class="text-xs text-gray-500">Win Rate: 78%</div> | |
| </div> | |
| <div class="bg-gray-800/50 rounded-xl p-4"> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <div class="w-8 h-8 rounded-lg bg-blue-500/20 flex items-center justify-center"> | |
| <i data-lucide="bot" class="w-4 h-4 text-blue-500"></i> | |
| </div> | |
| <span class="text-sm font-medium">Trend Master</span> | |
| </div> | |
| <div class="text-lg font-bold text-green-500 font-mono">+$1,892</div> | |
| <div class="text-xs text-gray-500">Win Rate: 82%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scroll Indicator --> | |
| <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 animate-bounce"> | |
| <span class="text-xs text-gray-500">Scroll untuk eksplorasi</span> | |
| <i data-lucide="chevron-down" class="w-5 h-5 text-gray-500"></i> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-24 relative"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 reveal"> | |
| <span class="text-amber-500 font-medium mb-4 block">PLATFORM UNGGULAN</span> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-4">Fitur yang Membedakan Kami</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Ekosistem trading terlengkap dengan integrasi marketplace EA dan broker referral dalam satu platform</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Feature 1 --> | |
| <div class="reveal glass-card rounded-2xl p-8 hover:border-amber-500/30 transition-all duration-300 group"> | |
| <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> | |
| <i data-lucide="shield-check" class="w-7 h-7 text-amber-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">EA Terverifikasi</h3> | |
| <p class="text-gray-400 text-sm leading-relaxed">Setiap EA melewati proses verifikasi ketat dengan audit smart contract dan backtest terverifikasi oleh tim ahli kami.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="reveal glass-card rounded-2xl p-8 hover:border-blue-500/30 transition-all duration-300 group" style="transition-delay: 0.1s;"> | |
| <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> | |
| <i data-lucide="users" class="w-7 h-7 text-blue-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Broker Referral</h3> | |
| <p class="text-gray-400 text-sm leading-relaxed">Integrasi dengan 50+ broker terpercaya. Dapatkan komisi referral hingga 45% dan bonus deposit eksklusif.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="reveal glass-card rounded-2xl p-8 hover:border-green-500/30 transition-all duration-300 group" style="transition-delay: 0.2s;"> | |
| <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> | |
| <i data-lucide="bar-chart-3" class="w-7 h-7 text-green-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Analytics Real-time</h3> | |
| <p class="text-gray-400 text-sm leading-relaxed">Dashboard analytics dengan monitoring profit, drawdown, dan metrik performa EA secara real-time.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="reveal glass-card rounded-2xl p-8 hover:border-purple-500/30 transition-all duration-300 group" style="transition-delay: 0.3s;"> | |
| <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> | |
| <i data-lucide="lock" class="w-7 h-7 text-purple-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Keamanan Terjamin</h3> | |
| <p class="text-gray-400 text-sm leading-relaxed">Enkripsi end-to-end, 2FA, dan cold storage untuk aset digital. Lisensi dan regulasi lengkap.</p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="reveal glass-card rounded-2xl p-8 hover:border-cyan-500/30 transition-all duration-300 group" style="transition-delay: 0.4s;"> | |
| <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-cyan-500/20 to-teal-500/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> | |
| <i data-lucide="zap" class="w-7 h-7 text-cyan-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Eksekusi Ultra Cepat</h3> | |
| <p class="text-gray-400 text-sm leading-relaxed">Latency di bawah 10ms dengan server colocation di pusat data finansial utama dunia.</p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="reveal glass-card rounded-2xl p-8 hover:border-rose-500/30 transition-all duration-300 group" style="transition-delay: 0.5s;"> | |
| <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-rose-500/20 to-red-500/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> | |
| <i data-lucide="headphones" class="w-7 h-7 text-rose-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Support 24/7</h3> | |
| <p class="text-gray-400 text-sm leading-relaxed">Tim support profesional tersedia 24/7 melalui live chat, email, dan dedicated account manager.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- EA Marketplace Section --> | |
| <section id="marketplace" class="py-24 relative bg-gradient-radial"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between mb-12 reveal"> | |
| <div> | |
| <span class="text-amber-500 font-medium mb-4 block">MARKETPLACE</span> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-4">Expert Advisor Marketplace</h2> | |
| <p class="text-gray-400 max-w-xl">Temukan EA berkualitas tinggi dengan performa terverifikasi untuk berbagai strategi trading</p> | |
| </div> | |
| <div class="flex gap-2 mt-6 lg:mt-0"> | |
| <button class="tab-btn active" data-tab="all">Semua</button> | |
| <button class="tab-btn" data-tab="scalping">Scalping</button> | |
| <button class="tab-btn" data-tab="trend">Trend</button> | |
| <button class="tab-btn" data-tab="grid">Grid</button> | |
| </div> | |
| </div> | |
| <!-- EA Grid --> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6" id="eaGrid"> | |
| <!-- EA Cards will be generated by JS --> | |
| </div> | |
| <div class="text-center mt-12 reveal"> | |
| <button class="btn-secondary inline-flex items-center gap-2"> | |
| <span>Lihat Semua EA</span> | |
| <i data-lucide="arrow-right" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Broker Referral Section --> | |
| <section id="brokers" class="py-24 relative"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 reveal"> | |
| <span class="text-blue-500 font-medium mb-4 block">BROKER PARTNER</span> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-4">Broker Referral Ecosystem</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Partnership dengan broker terpercaya untuk memberikan nilai tambah bagi trader dan referral partner</p> | |
| </div> | |
| <!-- Broker Stats --> | |
| <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 mb-16 reveal"> | |
| <div class="glass-card rounded-2xl p-6 text-center"> | |
| <div class="text-4xl font-bold text-blue-500 font-mono mb-2">50+</div> | |
| <div class="text-sm text-gray-400">Partner Broker</div> | |
| </div> | |
| <div class="glass-card rounded-2xl p-6 text-center"> | |
| <div class="text-4xl font-bold text-green-500 font-mono mb-2">$2.4M</div> | |
| <div class="text-sm text-gray-400">Total Komisi Dibayar</div> | |
| </div> | |
| <div class="glass-card rounded-2xl p-6 text-center"> | |
| <div class="text-4xl font-bold text-amber-500 font-mono mb-2">45%</div> | |
| <div class="text-sm text-gray-400">Max Revenue Share</div> | |
| </div> | |
| <div class="glass-card rounded-2xl p-6 text-center"> | |
| <div class="text-4xl font-bold text-purple-500 font-mono mb-2">24h</div> | |
| <div class="text-sm text-gray-400">Payout Time</div> | |
| </div> | |
| </div> | |
| <!-- Broker List --> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 reveal" id="brokerGrid"> | |
| <!-- Broker Cards will be generated by JS --> | |
| </div> | |
| <!-- Referral CTA --> | |
| <div class="mt-16 glass-card rounded-3xl p-8 lg:p-12 reveal relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 w-96 h-96 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div> | |
| <div class="relative z-10 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-3">Jadi Referral Partner</h3> | |
| <p class="text-gray-400 max-w-xl">Dapatkan penghasilan pasif dengan mereferensikan trader ke broker partner. Komisi hingga 45% dari spread dan lot trading.</p> | |
| </div> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <button class="btn-primary whitespace-nowrap">Daftar Sebagai Partner</button> | |
| <button class="btn-secondary whitespace-nowrap">Pelajari Lebih Lanjut</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-24 relative bg-gradient-radial"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 reveal"> | |
| <span class="text-green-500 font-medium mb-4 block">PRICING</span> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-4">Pilih Paket yang Tepat</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Harga transparan tanpa biaya tersembunyi. Upgrade atau downgrade kapan saja.</p> | |
| </div> | |
| <div class="grid lg:grid-cols-3 gap-8 reveal"> | |
| <!-- Starter --> | |
| <div class="glass-card rounded-3xl p-8 relative"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold mb-2">Starter</h3> | |
| <p class="text-sm text-gray-400">Untuk trader pemula yang ingin mencoba platform</p> | |
| </div> | |
| <div class="mb-8"> | |
| <span class="text-4xl font-bold font-mono">$0</span> | |
| <span class="text-gray-400">/bulan</span> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-center gap-3 text-sm"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500"></i> | |
| <span>Akses 10 EA Gratis</span> | |
| </li> | |
| <li class="flex items-center gap-3 text-sm"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500"></i> | |
| <span>1 Akun Broker Terhubung</span> | |
| </li> | |
| <li class="flex items-center gap-3 text-sm"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500"></i> | |
| <span>Dashboard Basic</span> | |
| </li> | |
| <li class="flex items-center gap-3 text-sm text-gray-500"> | |
| <i data-lucide="x" class="w-5 h-5"></i> | |
| <span>Referral Program</span> | |
| </li> | |
| <li class="flex items-center gap-3 text-sm text-gray-500"> | |
| <i data-lucide="x" class="w-5 h-5"></i> | |
| <span>Priority Support</span> | |
| </li> | |
| </ul> | |
| <button class="btn-secondary w-full">Mulai Gratis</button> | |
| </div> | |
| <!-- Pro - Featured --> | |
| <div class="glass-card rounded-3xl p-8 relative border-amber-500/30"> | |
| <div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-gradient-to-r from-amber-500 to-orange-500 rounded-full text-sm font-bold text-black"> | |
| POPULER | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold mb-2">Professional</h3> | |
| <p class="text-sm text-gray-400">Untuk trader serius dengan kebutuhan lengkap</p> | |
| </div> | |
| <div class="mb-8"> | |
| <span class="text-4xl font-bold font-mono text-amber-500">$49</span> | |
| <span class="text-gray-400">/bulan</span> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-center gap-3 text-sm"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500"></i> | |
| <span>Akses 500+ EA Premium</span> | |
| </li> | |
| <li class="flex items-center gap-3 text-sm"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500"></i> | |
| <span>5 Akun Broker Terhubung</span> | |
| </li> | |
| <li class="flex items-center gap-3 text-sm"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500"></i> | |
| <span>Analytics Dashboard</span> | |
| </li> | |
| <li class="flex items-center gap-3 text-sm"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500"></i> | |
| <span>Referral Commission 25%</span> | |
| </li> | |
| <li class="flex items-center gap-3 text-sm"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500"></i> | |
| <span>Priority Email Support</span> | |
| </li> | |
| </ul> | |
| <button class="btn-primary w-full animate-pulse-glow">Pilih Professional</button> | |
| </div> | |
| <!-- Enterprise --> | |
| <div class="glass-card rounded-3xl p-8 relative"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold mb-2">Enterprise</h3> | |
| <p class="text-sm text-gray-400">Untuk institusi dan profesional dengan kebutuhan khusus</p> | |
| </div> | |
| <div class="mb-8"> | |
| <span class="text-4xl font-bold font-mono">$199</span> | |
| <span class="text-gray-400">/bulan</span> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-center gap-3 text-sm"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500"></i> | |
| <span>Akses Semua EA Unlimited</span> | |
| </li> | |
| <li class="flex items-center gap-3 text-sm"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500"></i> | |
| <span>Unlimited Akun Broker</span> | |
| </li> | |
| <li class="flex items-center gap-3 text-sm"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500"></i> | |
| <span>Advanced Analytics & API</span> | |
| </li> | |
| <li class="flex items-center gap-3 text-sm"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500"></i> | |
| <span>Referral Commission 45%</span> | |
| </li> | |
| <li class="flex items-center gap-3 text-sm"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500"></i> | |
| <span>Dedicated Account Manager</span> | |
| </li> | |
| </ul> | |
| <button class="btn-secondary w-full">Hubungi Sales</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dashboard Preview Section --> | |
| <section id="dashboard" class="py-24 relative"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 reveal"> | |
| <span class="text-purple-500 font-medium mb-4 block">DASHBOARD</span> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-4">Powerful Trading Dashboard</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Monitor semua aktivitas trading, EA performance, dan referral earnings dalam satu dashboard</p> | |
| </div> | |
| <!-- Dashboard Mock --> | |
| <div class="reveal"> | |
| <div class="glass-card rounded-3xl overflow-hidden"> | |
| <!-- Dashboard Header --> | |
| <div class="bg-gray-800/50 px-6 py-4 flex items-center justify-between border-b border-gray-700/50"> | |
| <div class="flex items-center gap-4"> | |
| <div class="flex gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow |