`react-dash/src/setup/steps/Welcome.jsx`

70 lines
import React from 'react';

const FEATURES = [
  { title: 'Market Intelligence', desc: 'Scans Polymarket for weather prediction markets and identifies profitable opportunities', icon: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6' },
  { title: 'Weather Forecasting', desc: 'Pulls real NWS forecast data and builds probability models for weather outcomes', icon: 'M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z' },
  { title: 'Automated Trading', desc: 'Places bets on Polymarket when edges exceed your risk threshold, fully automated', icon: 'M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z' },
];

const PIPELINE = [
  'Connect to Polymarket API',
  'Ingest weather prediction markets',
  'Fetch NWS forecast data',
  'Generate AI probability models',
  'Calculate edges & signals',
  'Execute trades automatically',
];

export default function Welcome({ next }) {
  return (
    <div className="space-y-8">
      <div className="text-center">
        <h1 className="text-4xl font-bold wizard-gradient mb-3">Welcome to Poly</h1>
        <p className="text-gray-400 text-lg">Weather-forecast micro-betting on Polymarket</p>
      </div>

      <div className="grid grid-cols-3 gap-4">
        {FEATURES.map(f => (
          <div key={f.title} className="card text-center">
            <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center mx-auto mb-3">
              <svg className="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d={f.icon} />
              </svg>
            </div>
            <h3 className="font-semibold text-sm mb-1">{f.title}</h3>
            <p className="text-xs text-gray-500 leading-relaxed">{f.desc}</p>
          </div>
        ))}
      </div>

      <div className="card">
        <h3 className="font-semibold text-sm mb-3">How it works</h3>
        <div className="grid grid-cols-2 gap-2">
          {PIPELINE.map((p, i) => (
            <div key={i} className="flex items-center gap-3 py-1.5">
              <span className="w-6 h-6 rounded-full bg-blue-500/15 text-blue-400 flex items-center justify-center text-xs font-bold flex-shrink-0">{i + 1}</span>
              <span className="text-sm text-gray-300">{p}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="card bg-yellow-500/5 border-yellow-500/20">
        <div className="flex items-start gap-3">
          <svg className="w-5 h-5 text-yellow-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
          </svg>
          <div>
            <p className="text-sm font-medium text-yellow-400">You'll need Polymarket Builder API keys</p>
            <p className="text-xs text-gray-400 mt-1">Go to polymarket.com → Settings → Builder tab to create API credentials. You can also skip this and use paper mode.</p>
          </div>
        </div>
      </div>

      <div className="flex justify-center">
        <button onClick={next} className="wizard-btn">Get Started</button>
      </div>
    </div>
  );
}