slickquant.github.io/index.html at main · SlickQuant/slickquant.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>SlickQuant — AI Quant Copilot</title>
  <meta name="description" content="Research, backtest, and deploy systematic strategies with an AI Quant Copilot built for students, retail traders, and small teams." />
  <meta name="theme-color" content="#0F3D91" />
  <meta property="og:title" content="SlickQuant — AI Quant Copilot" />
  <meta property="og:description" content="Research, backtest, and deploy systematic strategies with an AI Quant Copilot." />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://slickquant.com" />
  <meta property="og:image" content="https://slickquant.com/assets/og-image.png" />
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="SlickQuant — AI Quant Copilot">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="https://slickquant.com/assets/og-image.png">
  <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=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
  <style>
    :root{--sq-primary:#133d6a;--sq-secondary:#039BE5;--sq-accent:#73E0FF}
    body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
    .glass{backdrop-filter: blur(10px); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15)}
    .grad-text{background:linear-gradient(90deg,var(--sq-secondary),var(--sq-accent));-webkit-background-clip:text;background-clip:text;color:transparent}
    .btn-primary{background:linear-gradient(135deg,var(--sq-primary),var(--sq-secondary)); color:#fff}
    .ring-grad{position:relative}
    .ring-grad:before{content:"";position:absolute;inset:-1px;border-radius:1rem;padding:1px;background:linear-gradient(135deg,#fff3,rgba(115,224,255,.5));-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude}
    .hero-bg{position:absolute;inset:0;background:radial-gradient(1200px 600px at 80% -20%, #39A7FF22 0%, transparent 60%), radial-gradient(1000px 600px at -10% -10%, #73E0FF22, transparent 60%)}
    .grid-overlay{background-image:url('assets/grid.svg');background-size:28px 28px;mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.25),transparent 70%)}
    .fade-up{opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease}
    .fade-up.show{opacity:1; transform: translateY(0)}
    @media (prefers-reduced-motion:no-preference){
      .float{animation: float 8s ease-in-out infinite}
      @keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}
      .glow{box-shadow:0 0 0 0 rgba(57,167,255,.45); animation:pulse 3s infinite}
      @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(57,167,255,.35)}70%{box-shadow:0 0 0 20px rgba(57,167,255,0)}100%{box-shadow:0 0 0 0 rgba(57,167,255,0)}}
    }
  </style>
</head>
<body class="bg-slate-950 text-slate-100">
  <header class="sticky top-0 z-50 backdrop-blur supports-[backdrop-filter]:bg-slate-950/60 border-b border-white/5">
    <div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
      <a href="#" class="flex items-center gap-3">
        <img src="assets/logo.svg" alt="SlickQuant logo" class="w-9 h-9">
        <div class="leading-tight">
          <div class="text-sky-600 font-extrabold tracking-widest text-sm">SLICK</div>
          <div class="text-sky-400 font-extrabold tracking-widest text-sm">QUANT</div>
        </div>
      </a>
      <nav class="hidden md:flex items-center gap-6 text-sm text-slate-300">
        <a href="#features" class="hover:text-white">Features</a>
        <a href="#how" class="hover:text-white">How it works</a>
        <a href="#pricing" class="hover:text-white">Pricing</a>
        <a href="#faq" class="hover:text-white">FAQ</a>
        <a href="#waitlist" class="px-4 py-2 rounded-xl btn-primary hover:opacity-90">Join waitlist</a>
      </nav>
      <button id="menuBtn" class="md:hidden rounded-lg border border-white/10 px-3 py-2">Menu</button>
    </div>
    <div id="mobileMenu" class="hidden md:hidden border-t border-white/5 bg-slate-950/80">
      <nav class="max-w-7xl mx-auto px-4 py-3 flex flex-col gap-3 text-slate-300">
        <a href="#features" class="hover:text-white">Features</a>
        <a href="#how" class="hover:text-white">How it works</a>
        <a href="#pricing" class="hover:text-white">Pricing</a>
        <a href="#faq" class="hover:text-white">FAQ</a>
        <a href="#waitlist" class="px-4 py-2 rounded-xl btn-primary text-center hover:opacity-90">Join waitlist</a>
      </nav>
    </div>
  </header>
  <section class="relative overflow-hidden">
    <div class="hero-bg pointer-events-none"></div>
    <div class="grid-overlay absolute inset-0 opacity-[0.18]"></div>
    <div class="max-w-7xl mx-auto px-4 py-20 md:py-28 relative">
      <div class="grid md:grid-cols-2 gap-10 items-center">
        <div class="space-y-6 fade-up">
          <div class="inline-flex items-center gap-2 rounded-full glass px-3 py-1 text-xs text-sky-300 border border-white/10">
            <span class="w-2 h-2 bg-sky-400 rounded-full glow"></span>
            Private beta forming now
          </div>
          <h1 class="text-4xl md:text-6xl font-extrabold leading-tight">
            The <span class="grad-text">AI Quant Copilot</span> for fast research and robust execution
          </h1>
          <p class="text-slate-300/90 text-lg">Go from idea → backtest → live trading with an AI research agent, microstructure simulator, and clean broker integrations.</p>
          <div class="flex flex-wrap gap-3">
            <a href="#waitlist" class="btn-primary px-5 py-3 rounded-xl font-semibold">Join the waitlist</a>
            <a href="#features" class="px-5 py-3 rounded-xl border border-white/10 hover:bg-white/5">Explore features</a>
          </div>
          <div class="flex flex-wrap gap-2 text-slate-400 text-sm">
            <span class="px-2 py-1 rounded-full bg-white/5 border border-white/10">Backtesting</span>
            <span class="px-2 py-1 rounded-full bg-white/5 border border-white/10">AI Strategy Research</span>
            <span class="px-2 py-1 rounded-full bg-white/5 border border-white/10">Exchange Simulator</span>
            <span class="px-2 py-1 rounded-full bg-white/5 border border-white/10">Live Trading</span>
          </div>
        </div>
        <div class="relative fade-up float">
          <div class="absolute -inset-4 bg-gradient-to-br from-sky-500/20 to-cyan-300/10 blur-3xl rounded-3xl"></div>
          <div class="relative ring-grad rounded-2xl glass p-4">
            <img src="assets/hero-illustration.svg" alt="SlickQuant mock UI" class="rounded-xl border border-white/10">
            <div class="mt-4 grid grid-cols-3 gap-3 text-xs text-slate-300/80">
              <div class="glass rounded-xl p-3 border border-white/10">
                <div class="text-slate-200 font-semibold">Alpha Ideas</div>
                <div>Generate & vet signals</div>
              </div>
              <div class="glass rounded-xl p-3 border border-white/10">
                <div class="text-slate-200 font-semibold">Diagnostics</div>
                <div>Slippage/fees/borrow</div>
              </div>
              <div class="glass rounded-xl p-3 border border-white/10">
                <div class="text-slate-200 font-semibold">Deploy</div>
                <div>Risk-guarded live</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="features" class="py-20 md:py-24">
    <div class="max-w-7xl mx-auto px-4">
      <h2 class="text-3xl md:text-4xl font-extrabold mb-10 fade-up">What you can do with SlickQuant</h2>
      <div class="grid md:grid-cols-3 gap-6">
        <div class="glass rounded-2xl p-6 border border-white/10 fade-up">
          <h3 class="font-bold text-xl mb-2">AI Research Agent</h3>
          <p class="text-slate-300">Brainstorm alphas, generate Python/C++/Rust code, and auto-instrument experiments with guardrails.</p>
        </div>
        <div class="glass rounded-2xl p-6 border border-white/10 fade-up">
          <h3 class="font-bold text-xl mb-2">Backtesting & Analytics</h3>
          <p class="text-slate-300">Event-driven backtests with realistic microstructure, slippage, fees, and borrow.</p>
        </div>
        <div class="glass rounded-2xl p-6 border border-white/10 fade-up">
          <h3 class="font-bold text-xl mb-2">Exchange Simulator</h3>
          <p class="text-slate-300">C++ matching engine sim for CME/ICE/Eurex; stress strategies before they touch the market.</p>
        </div>
      </div>
    </div>
  </section>
  <section id="how" class="py-20 md:py-24 bg-gradient-to-b from-slate-950 to-slate-900 border-y border-white/5">
    <div class="max-w-7xl mx-auto px-4">
      <h2 class="text-3xl md:text-4xl font-extrabold mb-10 fade-up">How it works</h2>
      <ol class="grid md:grid-cols-3 gap-6">
        <li class="glass rounded-2xl p-6 border border-white/10 fade-up">
          <div class="text-sky-300 font-extrabold text-sm tracking-widest mb-2">STEP 1</div>
          <div class="font-semibold text-lg mb-1">Ideate</div>
          <p class="text-slate-300">Describe a strategy; the AI agent drafts code, tests, and evaluation criteria.</p>
        </li>
        <li class="glass rounded-2xl p-6 border border-white/10 fade-up">
          <div class="text-sky-300 font-extrabold text-sm tracking-widest mb-2">STEP 2</div>
          <div class="font-semibold text-lg mb-1">Validate</div>
          <p class="text-slate-300">Run robust backtests and microstructure sims, review diagnostics and risk.</p>
        </li>
        <li class="glass rounded-2xl p-6 border border-white/10 fade-up">
          <div class="text-sky-300 font-extrabold text-sm tracking-widest mb-2">STEP 3</div>
          <div class="font-semibold text-lg mb-1">Deploy</div>
          <p class="text-slate-300">Connect a broker/exchange, set risk guards, and ship with confidence.</p>
        </li>
      </ol>
    </div>
  </section>
  <section id="waitlist" class="py-20 md:py-24">
    <div class="max-w-3xl mx-auto px-4 text-center">
      <h2 class="text-3xl md:text-4xl font-extrabold mb-4 fade-up">Join the private beta</h2>
      <p class="text-slate-300 mb-8 fade-up">No spam. Occasional product updates, early access invites, and roadmap notes.</p>
      <div class="glass rounded-2xl p-6 border border-white/10 fade-up">
        <!-- BEGIN: ConvertKit HTML-only (no pop-ups) -->
        <form
          action="https://app.kit.com/forms/8552368/subscriptions"
          method="post"
          class="grid md:grid-cols-[1fr_auto] gap-3"
        >
          <input
            class="w-full rounded-xl bg-white/5 border border-white/10 px-4 py-3 outline-none focus:ring-2 focus:ring-sky-500"
            type="email"
            name="email_address"
            placeholder="you@example.com"
            aria-label="Email address"
            required
          >
          <button type="submit" class="btn-primary rounded-xl px-6 py-3 font-semibold">
            Join waitlist
          </button>
          <!-- Honeypot -->
          <input type="text" name="fields[website]" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px">
        </form>
        <!-- END: ConvertKit HTML-only -->
      </div>
    </div>
  </section>
  <section id="pricing" class="py-20 md:py-24 bg-slate-900/50 border-y border-white/5">
    <div class="max-w-7xl mx-auto px-4">
      <h2 class="text-3xl md:text-4xl font-extrabold mb-10 fade-up">Simple, transparent pricing</h2>
      <div class="grid md:grid-cols-3 gap-6">
        <div class="glass rounded-2xl p-6 border border-white/10 fade-up">
          <div class="text-sm font-bold text-sky-300 tracking-widest mb-1">STARTER</div>
          <div class="text-4xl font-extrabold">$0<span class="text-base text-slate-400">/mo</span></div>
          <ul class="mt-4 text-slate-300 space-y-2 text-sm"><li>Community + tutorials</li><li>Education labs</li><li>Basic backtests</li></ul>
        </div>
        <div class="glass rounded-2xl p-6 border border-sky-400/40 fade-up">
          <div class="text-sm font-bold text-sky-300 tracking-widest mb-1">PRO</div>
          <div class="text-4xl font-extrabold">$29<span class="text-base text-slate-400">/mo</span></div>
          <ul class="mt-4 text-slate-300 space-y-2 text-sm"><li>AI research agent</li><li>Advanced analytics</li><li>Broker integrations</li></ul>
        </div>
        <div class="glass rounded-2xl p-6 border border-white/10 fade-up">
          <div class="text-sm font-bold text-sky-300 tracking-widest mb-1">TEAM</div>
          <div class="text-4xl font-extrabold">Custom</div>
          <ul class="mt-4 text-slate-300 space-y-2 text-sm"><li>SSO & admin controls</li><li>Priority support</li><li>On-prem options</li></ul>
        </div>
      </div>
      <p class="text-xs text-slate-400 mt-4">Pricing is indicative and may change at launch.</p>
    </div>
  </section>
  <section id="faq" class="py-20 md:py-24">
    <div class="max-w-5xl mx-auto px-4">
      <h2 class="text-3xl md:text-4xl font-extrabold mb-6 fade-up">FAQ</h2>
      <div class="space-y-3">
        <details class="glass rounded-xl border border-white/10 p-4 fade-up"><summary class="font-semibold cursor-pointer">Is SlickQuant for retail or institutions?</summary><p class="text-slate-300 mt-2">Designed for students, retail traders, and small teams; institutions can contact us for tailored solutions.</p></details>
        <details class="glass rounded-xl border border-white/10 p-4 fade-up"><summary class="font-semibold cursor-pointer">Can I live trade?</summary><p class="text-slate-300 mt-2">Yes—via optional connectors (e.g., cryptocurrency exchanges, Alpaca, Interactive Brokers, etc.). You control the switch with strict risk guards.</p></details>
        <details class="glass rounded-xl border border-white/10 p-4 fade-up"><summary class="font-semibold cursor-pointer">Do I need prior quant experience?</summary><p class="text-slate-300 mt-2">No. Our education tracks and guided labs help you ramp up quickly.</p></details>
      </div>
    </div>
  </section>
  <footer class="py-10 border-t border-white/5">
    <div class="max-w-7xl mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-3">
      <div class="flex items-center gap-2"><img src="assets/logo.svg" class="w-7 h-7" alt="SlickQuant"><div class="text-sky-600 font-extrabold tracking-widest text-sm">SLICKQUANT</div></div>
      <nav class="flex items-center gap-5 text-sm text-slate-400"><a href="#features" class="hover:text-white">Features</a><a href="#pricing" class="hover:text-white">Pricing</a><a href="#faq" class="hover:text-white">FAQ</a><a href="privacy.html" class="hover:text-white">Privacy</a></nav>
      <p class="text-slate-500 text-sm">© <span id="year"></span> SlickQuant LLC</p>
    </div>
  </footer>
  <script>
    const btn=document.getElementById('menuBtn'); const mm=document.getElementById('mobileMenu');
    btn?.addEventListener('click',()=>mm.classList.toggle('hidden'));
    document.getElementById('year').textContent=new Date().getFullYear();
    const obs=new IntersectionObserver(entries=>{for(const e of entries){ if(e.isIntersecting){ e.target.classList.add('show'); obs.unobserve(e.target);}}},{threshold:.1}); document.querySelectorAll('.fade-up').forEach(el=>obs.observe(el));
  </script>
</body>
</html>