Files
Predictalytics/temp_new_design/Landing.dc.html
T

307 lines
21 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body { margin: 0; background: #0a0d14; font-family: 'Manrope', system-ui, sans-serif; }
* { box-sizing: border-box; }
a { color: #5b9dff; text-decoration: none; }
a:hover { color: #8ab8ff; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
</style>
</helmet>
<div style="position:relative; min-height:100vh; width:100%; background: radial-gradient(1100px 700px at 15% -10%, rgba(22,82,240,0.28), transparent 60%), radial-gradient(900px 600px at 110% 10%, rgba(18,212,138,0.10), transparent 55%), #0a0d14; color:#EDEFF5; overflow-x:hidden;">
<!-- NAV -->
<header style="position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:16px 48px; backdrop-filter:blur(20px); background:rgba(10,13,20,0.6); border-bottom:1px solid rgba(255,255,255,0.07);">
<div style="display:flex; align-items:center; gap:10px;">
<div style="width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 0 20px rgba(22,82,240,0.6);"></div>
<div style="font-weight:800; font-size:17px; letter-spacing:-0.02em;">{{ brandName }}<span style="color:#5b9dff;">.</span></div>
</div>
<nav style="display:flex; align-items:center; gap:32px;">
<a href="#features" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">Features</a>
<a href="#pricing" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">Pricing</a>
<a href="#faq" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">FAQ</a>
<a href="./API Docs.dc.html" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">API Docs</a>
</nav>
<div style="display:flex; align-items:center; gap:10px;">
<div onClick="{{ openLogin }}" style="cursor:pointer; padding:9px 18px; border-radius:10px; font-size:13.5px; font-weight:700; color:#EDEFF5;">Log in</div>
<div onClick="{{ openRegister }}" style="cursor:pointer; padding:9px 20px; border-radius:10px; font-size:13.5px; font-weight:700; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 4px 20px rgba(22,82,240,0.4);">Sign up</div>
</div>
</header>
<!-- HERO -->
<section style="padding:100px 48px 80px; max-width:1080px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px;">
<div style="padding:6px 14px; border-radius:20px; background:rgba(22,82,240,0.12); border:1px solid rgba(22,82,240,0.3); font-size:12.5px; font-weight:700; color:#5b9dff;">Live on-chain analytics · Polymarket &amp; beyond</div>
<h1 style="margin:0; font-size:52px; font-weight:800; letter-spacing:-0.03em; line-height:1.08; max-width:760px;">See every trader and market before the crowd does</h1>
<p style="margin:0; font-size:17px; color:#8B93A7; max-width:600px; line-height:1.6;">Deep trader profiling, wallet clustering, and real-time market analytics for professional prediction market traders.</p>
<div style="display:flex; gap:14px; margin-top:8px;">
<div onClick="{{ openRegister }}" style="cursor:pointer; padding:14px 26px; border-radius:12px; font-size:14.5px; font-weight:700; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 8px 30px rgba(22,82,240,0.4);">Start free</div>
<a href="#features" style="padding:14px 26px; border-radius:12px; font-size:14.5px; font-weight:700; color:#EDEFF5; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.04); white-space:nowrap;">See features</a>
</div>
<!-- product preview mock -->
<div style="margin-top:40px; width:100%; border-radius:20px; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.09); backdrop-filter:blur(24px); box-shadow:0 20px 60px rgba(0,0,0,0.4); padding:20px; display:grid; grid-template-columns:1.4fr 1fr; gap:14px; text-align:left;">
<div style="border-radius:14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); padding:18px;">
<div style="font-size:12px; font-weight:700; color:#8B93A7; margin-bottom:10px;">Yes Price History</div>
<svg viewBox="0 0 500 140" style="width:100%; height:140px;">
<defs>
<linearGradient id="hfill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#12D48A" stop-opacity="0.35"/>
<stop offset="100%" stop-color="#12D48A" stop-opacity="0"/>
</linearGradient>
</defs>
<path d="{{ heroArea }}" fill="url(#hfill)" stroke="none"></path>
<path d="{{ heroLine }}" fill="none" stroke="#12D48A" stroke-width="2.5"></path>
</svg>
</div>
<div style="border-radius:14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); padding:18px; display:flex; flex-direction:column; gap:10px;">
<div style="font-size:12px; font-weight:700; color:#8B93A7;">Top Traders</div>
<sc-for list="{{ heroTraders }}" as="t" hint-placeholder-count="3">
<div style="display:flex; align-items:center; gap:10px;">
<div style="width:24px; height:24px; border-radius:7px; background:{{ t.bg }};"></div>
<div style="font-size:12.5px; font-weight:700; flex:1;">{{ t.handle }}</div>
<div style="font-size:12px; font-family:'Roboto Mono'; font-weight:700; color:#12D48A;">{{ t.pnl }}</div>
</div>
</sc-for>
</div>
</div>
</section>
<!-- FEATURES -->
<section id="features" style="padding:80px 48px; max-width:1200px; margin:0 auto;">
<div style="text-align:center; margin-bottom:48px;">
<div style="font-size:12.5px; font-weight:700; color:#5b9dff; margin-bottom:10px;">FEATURES</div>
<h2 style="margin:0 0 12px; font-size:34px; font-weight:800; letter-spacing:-0.02em;">Everything you need to read the market</h2>
<p style="margin:0; color:#8B93A7; font-size:15px;">Built for quants who need signal, not noise.</p>
</div>
<div style="display:grid; grid-template-columns:repeat(3,1fr); gap:18px;">
<sc-for list="{{ features }}" as="f" hint-placeholder-count="6">
<div style="padding:26px; border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px);">
<div style="width:42px; height:42px; border-radius:12px; background:{{ f.iconBg }}; margin-bottom:16px; display:flex; align-items:center; justify-content:center;">
<div style="width:16px; height:16px; border-radius:5px; background:{{ f.dotColor }};"></div>
</div>
<div style="font-size:16px; font-weight:700; margin-bottom:8px;">{{ f.title }}</div>
<div style="font-size:13.5px; color:#8B93A7; line-height:1.6;">{{ f.desc }}</div>
</div>
</sc-for>
</div>
</section>
<!-- PRICING -->
<section id="pricing" style="padding:80px 48px; max-width:1160px; margin:0 auto;">
<div style="text-align:center; margin-bottom:48px;">
<div style="font-size:12.5px; font-weight:700; color:#5b9dff; margin-bottom:10px;">PRICING</div>
<h2 style="margin:0 0 12px; font-size:34px; font-weight:800; letter-spacing:-0.02em;">Simple, usage-based plans</h2>
<p style="margin:0; color:#8B93A7; font-size:15px;">Upgrade any time as your call volume grows.</p>
</div>
<div style="display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch;">
<sc-for list="{{ plans }}" as="p" hint-placeholder-count="3">
<div style="{{ p.cardStyle }}">
<sc-if value="{{ p.featured }}" hint-placeholder-val="{{ false }}">
<div style="position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:5px 14px; border-radius:20px; background:linear-gradient(135deg,#1652F0,#4c8dff); font-size:11px; font-weight:800; letter-spacing:0.04em;">MOST POPULAR</div>
</sc-if>
<div style="font-size:15px; font-weight:700; margin-bottom:6px;">{{ p.name }}</div>
<div style="display:flex; align-items:baseline; gap:4px; margin-bottom:18px;">
<div style="font-size:36px; font-weight:800; font-family:'Roboto Mono'; letter-spacing:-0.02em;">{{ p.price }}</div>
<div style="font-size:13px; color:#8B93A7;">{{ p.period }}</div>
</div>
<div style="display:flex; flex-direction:column; gap:10px; margin-bottom:22px;">
<sc-for list="{{ p.items }}" as="item" hint-placeholder-count="4">
<div style="display:flex; align-items:center; gap:9px; font-size:13.5px; color:#C7CCDA;">
<div style="width:6px; height:6px; border-radius:50%; background:#12D48A; flex:none;"></div>
<span>{{ item }}</span>
</div>
</sc-for>
</div>
<div onClick="{{ openRegister }}" style="{{ p.btnStyle }}">{{ p.btnLabel }}</div>
</div>
</sc-for>
</div>
</section>
<!-- FAQ -->
<section id="faq" style="padding:80px 48px 100px; max-width:820px; margin:0 auto;">
<div style="text-align:center; margin-bottom:44px;">
<div style="font-size:12.5px; font-weight:700; color:#5b9dff; margin-bottom:10px;">FAQ</div>
<h2 style="margin:0; font-size:34px; font-weight:800; letter-spacing:-0.02em;">Common questions</h2>
</div>
<div style="display:flex; flex-direction:column; gap:10px;">
<sc-for list="{{ faqs }}" as="q" hint-placeholder-count="6">
<div style="border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); overflow:hidden;">
<div onClick="{{ q.onToggle }}" style="cursor:pointer; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;">
<div style="font-size:14.5px; font-weight:700;">{{ q.question }}</div>
<div style="flex:none; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:16px; color:#5b9dff; transform:{{ q.iconTransform }};">+</div>
</div>
<sc-if value="{{ q.open }}" hint-placeholder-val="{{ false }}">
<div style="padding:0 22px 18px; font-size:13.5px; color:#8B93A7; line-height:1.7;">{{ q.answer }}</div>
</sc-if>
</div>
</sc-for>
</div>
</section>
<!-- FOOTER -->
<footer style="padding:32px 48px; border-top:1px solid rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:space-between; color:#5B6377; font-size:12.5px;">
<div>© 2026 {{ brandName }}. All rights reserved.</div>
<div style="display:flex; gap:20px;">
<a href="./API Docs.dc.html" style="color:#5B6377;">API Docs</a>
<a href="#faq" style="color:#5B6377;">FAQ</a>
<a href="#pricing" style="color:#5B6377;">Pricing</a>
</div>
</footer>
<!-- AUTH MODAL -->
<sc-if value="{{ authOpen }}" hint-placeholder-val="{{ false }}">
<div onClick="{{ closeAuth }}" style="position:fixed; inset:0; z-index:100; background:rgba(6,8,13,0.7); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;">
<div onClick="{{ stopProp }}" style="width:400px; max-width:92vw; border-radius:20px; background:rgba(16,20,29,0.9); border:1px solid rgba(255,255,255,0.1); backdrop-filter:blur(30px); box-shadow:0 30px 80px rgba(0,0,0,0.5); padding:32px;">
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;">
<div style="font-size:19px; font-weight:800;">{{ authTitle }}</div>
<div onClick="{{ closeAuth }}" style="cursor:pointer; width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; font-size:14px; color:#8B93A7;"></div>
</div>
<div style="display:flex; flex-direction:column; gap:14px;">
<sc-if value="{{ isRegisterMode }}" hint-placeholder-val="{{ false }}">
<div style="display:flex; flex-direction:column; gap:6px;">
<label style="font-size:12.5px; font-weight:600; color:#C7CCDA;">Full name</label>
<input placeholder="Jane Trader" style="padding:11px 14px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:13.5px; font-family:'Manrope'; outline:none;" />
</div>
</sc-if>
<div style="display:flex; flex-direction:column; gap:6px;">
<label style="font-size:12.5px; font-weight:600; color:#C7CCDA;">Email</label>
<input placeholder="you@domain.com" style="padding:11px 14px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:13.5px; font-family:'Manrope'; outline:none;" />
</div>
<div style="display:flex; flex-direction:column; gap:6px;">
<label style="font-size:12.5px; font-weight:600; color:#C7CCDA;">Password</label>
<input type="password" placeholder="••••••••" style="padding:11px 14px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:13.5px; font-family:'Manrope'; outline:none;" />
</div>
<div style="margin-top:6px; padding:13px; border-radius:11px; text-align:center; font-size:14px; font-weight:700; cursor:pointer; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 8px 24px rgba(22,82,240,0.4);">{{ authSubmitLabel }}</div>
<div style="text-align:center; font-size:12.5px; color:#8B93A7; margin-top:4px;">
{{ authSwitchPrompt }} <span onClick="{{ switchAuthMode }}" style="color:#5b9dff; font-weight:700; cursor:pointer;">{{ authSwitchAction }}</span>
</div>
</div>
</div>
</div>
</sc-if>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;: {&quot;width&quot;: 1440}, &quot;brandName&quot;: {&quot;editor&quot;: &quot;text&quot;, &quot;default&quot;: &quot;Predictalytics&quot;, &quot;tsType&quot;: &quot;string&quot;}}">
class Component extends DCLogic {
state = {
authOpen: false,
authMode: "login",
openFaq: 0,
};
openLogin = () => this.setState({ authOpen: true, authMode: "login" });
openRegister = () => this.setState({ authOpen: true, authMode: "register" });
closeAuth = () => this.setState({ authOpen: false });
switchAuthMode = () => this.setState((s) => ({ authMode: s.authMode === "login" ? "register" : "login" }));
stopProp = (e) => e.stopPropagation();
toggleFaq = (i) => this.setState((s) => ({ openFaq: s.openFaq === i ? -1 : i }));
buildPath(series, w, h, pad) {
const min = Math.min(...series);
const max = Math.max(...series);
const range = max - min || 1;
const innerW = w - pad * 2;
const innerH = h - pad * 2;
const pts = series.map((v, i) => {
const x = pad + (i / (series.length - 1)) * innerW;
const y = pad + innerH - ((v - min) / range) * innerH;
return [x, y];
});
let line = "M" + pts[0][0].toFixed(1) + "," + pts[0][1].toFixed(1);
for (let i = 1; i < pts.length; i++) line += " L" + pts[i][0].toFixed(1) + "," + pts[i][1].toFixed(1);
const area = line + ` L${pts[pts.length - 1][0].toFixed(1)},${h - pad} L${pts[0][0].toFixed(1)},${h - pad} Z`;
return { line, area };
}
renderVals() {
const brandName = this.props.brandName ?? "Predictalytics";
const heroSeries = [40, 44, 41, 48, 52, 50, 58, 55, 62, 66, 63, 70, 68, 74, 71.4];
const { line, area } = this.buildPath(heroSeries, 500, 140, 8);
const features = [
{ title: "Trader Tracking", desc: "Follow any wallet's full position history, P&L, and behavior patterns across every market.", iconBg: "rgba(22,82,240,0.14)", dotColor: "#5b9dff" },
{ title: "Wallet Clustering", desc: "Detect connected wallets and coordinated accounts behind a single trading strategy.", iconBg: "rgba(124,92,255,0.14)", dotColor: "#7c5cff" },
{ title: "Market Analysis", desc: "Order book depth, liquidity, and holder concentration for every active market.", iconBg: "rgba(18,212,138,0.14)", dotColor: "#12D48A" },
{ title: "Custom Alerts", desc: "Get notified the moment a tracked trader opens a position or a market shifts sharply.", iconBg: "rgba(255,157,76,0.14)", dotColor: "#ff9d4c" },
{ title: "Trader Traits", desc: "Automatic tagging — arbitrage traders, resolution farmers, bots — at a glance.", iconBg: "rgba(246,70,93,0.14)", dotColor: "#F6465D" },
{ title: "API Access", desc: "Pull every metric programmatically into your own models and dashboards.", iconBg: "rgba(22,82,240,0.14)", dotColor: "#5b9dff" },
];
const baseCard = "position:relative; padding:30px 26px; border-radius:20px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); display:flex; flex-direction:column;";
const featuredCard = "position:relative; padding:30px 26px; border-radius:20px; background:rgba(22,82,240,0.08); border:1px solid rgba(22,82,240,0.35); backdrop-filter:blur(24px); display:flex; flex-direction:column; box-shadow:0 20px 50px rgba(22,82,240,0.2);";
const btnPrimary = "cursor:pointer; padding:12px; border-radius:11px; text-align:center; font-size:13.5px; font-weight:700; margin-top:auto; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 8px 24px rgba(22,82,240,0.4);";
const btnSecondary = "cursor:pointer; padding:12px; border-radius:11px; text-align:center; font-size:13.5px; font-weight:700; margin-top:auto; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#EDEFF5;";
const plans = [
{ name: "Free", price: "$0", period: "/ month", featured: false, cardStyle: baseCard, btnStyle: btnSecondary, btnLabel: "Get started",
items: ["20 API calls / day", "Restricted web access", "Market overview only", "Community support"] },
{ name: "Pro", price: "$99", period: "/ month", featured: true, cardStyle: featuredCard, btnStyle: btnPrimary, btnLabel: "Start Pro",
items: ["2,000 API calls / day", "Enhanced AI trader analytics", "MCP access for your AI agent", "Priority support"] },
{ name: "Enterprise", price: "Contact us", period: "", featured: false, cardStyle: baseCard, btnStyle: btnSecondary, btnLabel: "Contact sales",
items: ["10,000+ API calls / day", "Ready to use AI analytics with your individual prompts", "MCP access for your AI agent", "Priority support"] },
];
const faqDefs = [
{ q: "What data sources power your analytics?", a: "We index on-chain activity directly from Polymarket and related prediction market contracts in real time, plus supplementary off-chain resolution data." },
{ q: "How do you identify traders as bots or arbitrageurs?", a: "We apply behavioral heuristics — trade timing, position sizing, cross-market correlation — to automatically tag wallets with traits like Bot, Arbitrage Trader, or Resolution Farming." },
{ q: "Can I track a specific wallet or trader?", a: "Yes. Search any wallet address or handle to pull up its full position history, P&L, and connected wallets." },
{ q: "What's included in the API?", a: "Market and trader endpoints covering prices, order books, holders, and trader metrics. Call limits scale with your plan, from 20 to 2,000 requests per day." },
{ q: "Do you support alerts?", a: "Yes, set alerts on tracked traders or markets and get notified the moment a position opens or a price moves sharply." },
{ q: "Can I cancel or change my plan anytime?", a: "Yes, upgrade, downgrade, or cancel at any time from your account settings — changes apply at the next billing cycle." },
];
const faqs = faqDefs.map((f, i) => ({
question: f.q,
answer: f.a,
open: this.state.openFaq === i,
iconTransform: this.state.openFaq === i ? "rotate(45deg)" : "rotate(0deg)",
onToggle: () => this.toggleFaq(i),
}));
const heroTraders = [
{ handle: "quant_owl", pnl: "+$216K", bg: "linear-gradient(135deg,#1652F0,#4c8dff)" },
{ handle: "arb_meridian", pnl: "+$454K", bg: "linear-gradient(135deg,#12D48A,#0a8f5f)" },
{ handle: "resolvr", pnl: "+$105K", bg: "linear-gradient(135deg,#7c5cff,#4c8dff)" },
];
return {
brandName,
heroLine: line,
heroArea: area,
heroTraders,
features,
plans,
faqs,
authOpen: this.state.authOpen,
isRegisterMode: this.state.authMode === "register",
authTitle: this.state.authMode === "login" ? "Log in" : "Create your account",
authSubmitLabel: this.state.authMode === "login" ? "Log in" : "Create account",
authSwitchPrompt: this.state.authMode === "login" ? "Don't have an account?" : "Already have an account?",
authSwitchAction: this.state.authMode === "login" ? "Sign up" : "Log in",
openLogin: this.openLogin,
openRegister: this.openRegister,
closeAuth: this.closeAuth,
switchAuthMode: this.switchAuthMode,
stopProp: this.stopProp,
};
}
}
</script>
</body>
</html>