Spaces:
Running
Running
| <html class="dark" lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta content="width=device-width, initial-scale=1.0" name="viewport" /> | |
| <title>ContraSignal - AI Driven Contrarian Analysis</title> | |
| <link rel="icon" type="image/png" href="/static/favicon.png"> | |
| <link rel="shortcut icon" href="/static/favicon.png"> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com" rel="preconnect" /> | |
| <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap" | |
| rel="stylesheet" /> | |
| <!-- Material Symbols --> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" | |
| rel="stylesheet" /> | |
| <!-- Dependencies (Three.js & GSAP) --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> | |
| <script id="tailwind-config"> | |
| tailwind.config = { | |
| darkMode: "class", | |
| theme: { | |
| extend: { | |
| colors: { | |
| "primary": "#33f20d", // Electric Neon Green | |
| "void": "#050505", // Deep Void Black | |
| "surface": "#0a0f0a", // Slightly lighter black | |
| "navy-dark": "#020412", | |
| "crimson": "#ff2a2a", | |
| }, | |
| fontFamily: { | |
| "display": ["Inter", "sans-serif"], | |
| "mono": ["JetBrains Mono", "monospace"], | |
| }, | |
| backgroundImage: { | |
| 'grid-pattern': "linear-gradient(to right, #1f2937 1px, transparent 1px), linear-gradient(to bottom, #1f2937 1px, transparent 1px)", | |
| } | |
| }, | |
| }, | |
| } | |
| </script> | |
| <style> | |
| /* Custom Utilities */ | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.03); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .neon-text-glow { | |
| text-shadow: 0 0 10px rgba(51, 242, 13, 0.5); | |
| } | |
| .neon-box-glow { | |
| box-shadow: 0 0 15px rgba(51, 242, 13, 0.4); | |
| } | |
| .neon-box-glow:hover { | |
| box-shadow: 0 0 25px rgba(51, 242, 13, 0.6); | |
| } | |
| .text-gradient { | |
| background: linear-gradient(to right, #ffffff, #33f20d); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| /* Scanline effect for background */ | |
| .scanlines { | |
| background: linear-gradient(to bottom, | |
| rgba(255, 255, 255, 0), | |
| rgba(255, 255, 255, 0) 50%, | |
| rgba(0, 0, 0, 0.2) 50%, | |
| rgba(0, 0, 0, 0.2)); | |
| background-size: 100% 4px; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| pointer-events: none; | |
| z-index: 10; | |
| } | |
| /* Ensure canvas background fits */ | |
| #canvas-container canvas { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-void text-white font-display overflow-x-hidden selection:bg-primary selection:text-void"> | |
| <!-- Top Navigation --> | |
| <nav class="fixed top-0 w-full z-50 border-b border-white/10 bg-void/80 backdrop-blur-md"> | |
| <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between"> | |
| <!-- Logo --> | |
| <div class="flex items-center gap-3"> | |
| <div class="size-8 rounded bg-primary flex items-center justify-center text-void neon-box-glow"> | |
| <span class="material-symbols-outlined text-2xl font-bold">candlestick_chart</span> | |
| </div> | |
| <h2 class="text-white text-lg font-bold tracking-tight">ContraSignal</h2> | |
| </div> | |
| <!-- Desktop Links --> | |
| <div class="hidden md:flex items-center gap-8"> | |
| <a class="text-gray-400 hover:text-primary transition-colors text-sm font-medium" | |
| href="#how-it-works">How it Works</a> | |
| <a href="/analyze" | |
| class="bg-primary text-void hover:bg-[#2adb0b] transition-all px-6 py-2 rounded-full text-sm font-bold neon-box-glow"> | |
| Get Started | |
| </a> | |
| </div> | |
| <!-- Mobile Menu Icon --> | |
| <div class="md:hidden text-white"> | |
| <span class="material-symbols-outlined cursor-pointer">menu</span> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex flex-col justify-center items-center pt-20 overflow-hidden"> | |
| <!-- Background Elements --> | |
| <div class="absolute inset-0 z-0"> | |
| <!-- Animation Canvas Loop --> | |
| <div id="canvas-container" class="absolute inset-0"></div> | |
| <!-- Scanlines Overlay --> | |
| <div class="scanlines opacity-20"></div> | |
| </div> | |
| <div class="relative z-10 max-w-5xl mx-auto px-6 text-center flex flex-col items-center gap-8"> | |
| <!-- Badge --> | |
| <div | |
| class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-primary/30 bg-primary/10 backdrop-blur-sm"> | |
| <span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span> | |
| <span class="text-xs font-mono text-primary uppercase tracking-wider">System Online • v.2.4.0</span> | |
| </div> | |
| <!-- Headline --> | |
| <h1 id="hero-title" class="text-5xl md:text-7xl font-black tracking-tighter leading-[1.1]"> | |
| Find Buying Opportunities <br /> | |
| <span class="text-gradient">When Markets Panic</span> | |
| </h1> | |
| <!-- Subheadline --> | |
| <p id="hero-desc" class="text-gray-400 text-lg md:text-xl max-w-2xl font-light leading-relaxed"> | |
| AI-driven contrarian analysis to detect signal in the noise. Leverage institutional-grade tools to find | |
| your edge. | |
| </p> | |
| <!-- CTA --> | |
| <div id="hero-ctas" class="flex flex-col sm:flex-row gap-4 mt-4"> | |
| <a href="/analyze" | |
| class="flex items-center gap-2 bg-primary text-void px-8 py-4 rounded-full text-base font-bold neon-box-glow hover:scale-105 transition-transform duration-200"> | |
| <span>Start Analysis</span> | |
| <span class="material-symbols-outlined text-lg">arrow_forward</span> | |
| </a> | |
| <a href="#how-it-works" | |
| class="flex items-center gap-2 border border-white/20 hover:border-white/50 bg-white/5 backdrop-blur-sm text-white px-8 py-4 rounded-full text-base font-medium transition-colors"> | |
| <span class="material-symbols-outlined text-lg">play_circle</span> | |
| <span>How It Works</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Scrolling Ticker/Stats (Simulated) --> | |
| <div class="absolute bottom-0 w-full border-t border-white/10 bg-void/50 backdrop-blur-md"> | |
| <div class="max-w-7xl mx-auto px-6 py-4"> | |
| <div | |
| class="flex flex-wrap md:flex-nowrap gap-6 justify-between items-center overflow-x-auto no-scrollbar"> | |
| <!-- Stat 1 --> | |
| <div class="flex items-center gap-3 min-w-[180px]"> | |
| <div class="p-2 rounded bg-red-900/20 text-crimson"> | |
| <span class="material-symbols-outlined">trending_down</span> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500 font-mono uppercase">BTC Sentiment</p> | |
| <div class="flex items-baseline gap-2"> | |
| <span class="font-mono text-white font-bold">12.4</span> | |
| <span class="font-mono text-xs text-crimson">EXTREME FEAR</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-px h-8 bg-white/10 hidden md:block"></div> | |
| <!-- Stat 2 --> | |
| <div class="flex items-center gap-3 min-w-[180px]"> | |
| <div class="p-2 rounded bg-red-900/20 text-crimson"> | |
| <span class="material-symbols-outlined">trending_down</span> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500 font-mono uppercase">ETH Sentiment</p> | |
| <div class="flex items-baseline gap-2"> | |
| <span class="font-mono text-white font-bold">18.2</span> | |
| <span class="font-mono text-xs text-crimson">FEAR</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-px h-8 bg-white/10 hidden md:block"></div> | |
| <!-- Stat 3 --> | |
| <div class="flex items-center gap-3 min-w-[180px]"> | |
| <div class="p-2 rounded bg-green-900/20 text-primary"> | |
| <span class="material-symbols-outlined">trending_up</span> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500 font-mono uppercase">VIX Volatility</p> | |
| <div class="flex items-baseline gap-2"> | |
| <span class="font-mono text-white font-bold">24.5</span> | |
| <span class="font-mono text-xs text-primary">+4.2%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-px h-8 bg-white/10 hidden md:block"></div> | |
| <!-- Stat 4 --> | |
| <div class="flex items-center gap-3 min-w-[180px]"> | |
| <div class="p-2 rounded bg-primary/20 text-primary animate-pulse"> | |
| <span class="material-symbols-outlined">bolt</span> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500 font-mono uppercase">Contra Signal</p> | |
| <div class="flex items-baseline gap-2"> | |
| <span class="font-mono text-primary font-bold">STRONG BUY</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="how-it-works" class="py-24 relative bg-void"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="mb-16 md:text-center max-w-3xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Deep Market Intelligence</h2> | |
| <p class="text-gray-400">Our algorithms process millions of data points to visualize market psychology | |
| in real-time.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Card 1 --> | |
| <div | |
| class="glass-card rounded-3xl p-8 hover:bg-white/5 transition-colors group relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 p-4 opacity-20 group-hover:opacity-40 transition-opacity"> | |
| <span class="material-symbols-outlined text-8xl text-white rotate-12">psychology</span> | |
| </div> | |
| <div class="relative z-10 flex flex-col h-full"> | |
| <div | |
| class="size-12 rounded-full bg-gradient-to-br from-gray-800 to-black border border-white/10 flex items-center justify-center mb-6"> | |
| <span class="material-symbols-outlined text-primary">analytics</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Sentiment Strength</h3> | |
| <p class="text-sm text-gray-400 mb-6 flex-grow">Visualizing market psychology with real-time | |
| sentiment gauges across social, news, and on-chain data.</p> | |
| <!-- Mini viz --> | |
| <div class="mt-auto pt-4 border-t border-white/5"> | |
| <div class="flex justify-between text-xs font-mono text-gray-500 mb-1"> | |
| <span>BEARISH</span> | |
| <span>BULLISH</span> | |
| </div> | |
| <div class="h-2 bg-gray-800 rounded-full overflow-hidden"> | |
| <div | |
| class="h-full bg-gradient-to-r from-crimson via-yellow-500 to-primary w-[35%] rounded-full relative"> | |
| <div | |
| class="absolute right-0 top-1/2 -translate-y-1/2 size-3 bg-white rounded-full shadow-lg border-2 border-gray-900"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div | |
| class="glass-card rounded-3xl p-8 hover:bg-white/5 transition-colors group relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 p-4 opacity-20 group-hover:opacity-40 transition-opacity"> | |
| <span class="material-symbols-outlined text-8xl text-white rotate-12">description</span> | |
| </div> | |
| <div class="relative z-10 flex flex-col h-full"> | |
| <div | |
| class="size-12 rounded-full bg-gradient-to-br from-gray-800 to-black border border-white/10 flex items-center justify-center mb-6"> | |
| <span class="material-symbols-outlined text-primary">library_books</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Fundamental RAG</h3> | |
| <p class="text-sm text-gray-400 mb-6 flex-grow">Context-aware AI breakdown of fundamental | |
| reports, earnings calls, and regulatory filings.</p> | |
| <!-- Mini viz --> | |
| <div class="mt-auto pt-4 border-t border-white/5 flex flex-col gap-2"> | |
| <div | |
| class="flex items-center gap-2 text-xs font-mono bg-green-900/20 p-1.5 rounded border border-green-900/30 text-green-400"> | |
| <span class="material-symbols-outlined text-sm">check_circle</span> | |
| <span>EPS Exceeded: +12%</span> | |
| </div> | |
| <div | |
| class="flex items-center gap-2 text-xs font-mono bg-red-900/20 p-1.5 rounded border border-red-900/30 text-red-400"> | |
| <span class="material-symbols-outlined text-sm">warning</span> | |
| <span>Guidance Reduced</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div | |
| class="glass-card rounded-3xl p-8 hover:bg-white/5 transition-colors group relative overflow-hidden ring-1 ring-primary/30"> | |
| <!-- Glow effect behind this card specifically --> | |
| <div class="absolute inset-0 bg-primary/5 blur-xl -z-10"></div> | |
| <div class="absolute top-0 right-0 p-4 opacity-20 group-hover:opacity-40 transition-opacity"> | |
| <span class="material-symbols-outlined text-8xl text-primary rotate-12">radar</span> | |
| </div> | |
| <div class="relative z-10 flex flex-col h-full"> | |
| <div | |
| class="size-12 rounded-full bg-gradient-to-br from-primary/20 to-primary/5 border border-primary/30 flex items-center justify-center mb-6"> | |
| <span class="material-symbols-outlined text-primary">target</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2 text-white">Contrarian Signal</h3> | |
| <p class="text-sm text-gray-400 mb-6 flex-grow">Algorithmically generated entry points when | |
| panic peaks. Buy when others are fearful.</p> | |
| <!-- Mini viz --> | |
| <div class="mt-auto pt-4 border-t border-white/5"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex flex-col"> | |
| <span class="text-xs text-gray-500 font-mono">CONFIDENCE</span> | |
| <span class="text-lg font-mono font-bold text-primary neon-text-glow">94.2%</span> | |
| </div> | |
| <button | |
| class="bg-primary text-void text-xs font-bold px-3 py-1.5 rounded-full uppercase tracking-wider"> | |
| Signal Active | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-24 relative overflow-hidden"> | |
| <div | |
| class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-green-900/20 to-void"> | |
| </div> | |
| <div class="max-w-4xl mx-auto px-6 relative z-10 text-center"> | |
| <h2 class="text-4xl md:text-5xl font-black mb-8 tracking-tight">Stop Guessing.<br />Start <span | |
| class="text-primary">Knowing.</span></h2> | |
| <!-- Quote Block --> | |
| <div class="mb-10 relative inline-block"> | |
| <span class="absolute -top-4 -left-6 text-6xl text-primary/20 font-serif leading-none">“</span> | |
| <p class="text-xl md:text-2xl text-gray-300 font-light italic relative z-10"> | |
| Be greedy when others are fearful. | |
| </p> | |
| <footer class="mt-3 text-sm font-mono text-primary font-bold tracking-wider uppercase"> | |
| — Warren Buffett | |
| </footer> | |
| </div> | |
| <div class="flex flex-col items-center gap-4"> | |
| <a href="/analyze" | |
| class="bg-primary text-void px-10 py-4 rounded-full text-lg font-bold neon-box-glow hover:scale-105 transition-transform w-full md:w-auto"> | |
| Start Analysis | |
| </a> | |
| <p class="text-xs text-gray-600 mt-4">Free to start exploring.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="border-t border-white/10 bg-void py-12"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 mb-12"> | |
| <div class="flex flex-col gap-4"> | |
| <div class="flex items-center gap-2"> | |
| <div | |
| class="size-6 rounded bg-primary/20 border border-primary/50 flex items-center justify-center text-primary"> | |
| <span class="material-symbols-outlined text-sm font-bold">candlestick_chart</span> | |
| </div> | |
| <h2 class="text-white text-lg font-bold">ContraSignal</h2> | |
| </div> | |
| <p class="text-gray-500 text-sm max-w-xs">High-frequency insights for the modern contrarian | |
| investor.</p> | |
| </div> | |
| <div class="flex gap-8"> | |
| <!-- Socials can remain or be removed. Keeping placeholders. --> | |
| </div> | |
| </div> | |
| <div | |
| class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-gray-600"> | |
| <p>© 2025 ContraSignal. Built for Smart Money Investing.</p> | |
| <div class="flex gap-6"> | |
| <a class="hover:text-gray-400" href="#">Privacy Policy</a> | |
| <a class="hover:text-gray-400" href="#">Terms</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Logic --> | |
| <script src="/static/js/landing.js"></script> | |
| </body> | |
| </html> |