/*
Coxeva Portal - Single-file React app (default export)
- Uses Tailwind CSS classes (ensure Tailwind is configured in the project)
- Includes dark aesthetic and Gold accents
- Mock auth (localStorage) for demo; replace with real Auth (Supabase/Firebase) for production
- Stripe integration placeholders included (Stripe Checkout / Billing), replace keys and server endpoints
- Logo components (Dark & Light SVG) included inline
How to use:
1. Create a React project (Vite or Create-React-App). Install Tailwind and configure.
2. Drop this file as src/App.jsx and import into index.jsx.
3. Add environment variables for STRIPE_PUBLIC_KEY and API endpoints.
4. Deploy to Vercel/Netlify/Hostinger (Hostinger supports static React builds).
This file is intentionally self-contained for rapid prototyping.
*/
import React, { useEffect, useState } from "react";
// --- Logo components ---
const LogoDark = ({ size = 56 }) => (
<svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="64" rx="12" fill="#0B0B0B" />
<g transform="translate(8 8)">
<path d="M6 36 L26 6 L46 36" stroke="#D4AF37" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
<circle cx="16" cy="28" r="6" fill="#D4AF37" />
</g>
</svg>
);
const LogoLight = ({ size = 56 }) => (
<svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="64" rx="12" fill="#FFFFFF" />
<g transform="translate(8 8)">
<path d="M6 36 L26 6 L46 36" stroke="#2F4F6F" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
<circle cx="16" cy="28" r="6" fill="#2F4F6F" />
</g>
</svg>
);
// --- Mock data ---
const MOCK_INVOICES = [
{ id: "INV-00123", date: "2025-10-01", service: "Premium Signal Subscription", amount: 249.0, status: "Paid" },
{ id: "INV-00124", date: "2025-11-01", service: "Research & AI Insights Access", amount: 499.0, status: "Pending" },
];
// --- Helper functions ---
const formatUSD = (n) => `$${n.toFixed(2)}`;
// --- Simple Auth Hook (mock) ---
function useAuth() {
const [user, setUser] = useState(null);
useEffect(() => {
const stored = localStorage.getItem("coxeva_user");
if (stored) setUser(JSON.parse(stored));
}, []);
function login(email) {
const u = { email, name: email.split("@")[0] };
localStorage.setItem("coxeva_user", JSON.stringify(u));
setUser(u);
}
function logout() {
localStorage.removeItem("coxeva_user");
setUser(null);
}
return { user, login, logout };
}
// --- Pages / Components ---
function TopNav({ user, onLogout }) {
return (
<header className="w-full bg-[#0f1724] text-white py-4 shadow-md">
<div className="max-w-6xl mx-auto px-6 flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-14 h-14 rounded-lg overflow-hidden bg-gradient-to-br from-[#1f2937] to-[#111827] flex items-center justify-center">
<LogoDark size={44} />
</div>
<div>
<div className="text-xl font-semibold">Coxeva</div>
<div className="text-xs text-[#9CA3AF]">Trading Research & Signal Services</div>
</div>
</div>
<nav className="hidden md:flex items-center gap-6 text-sm text-[#CBD5E1]">
<a href="#" className="hover:text-[#FFD700]">Home</a>
<a href="#services" className="hover:text-[#FFD700]">Services</a>
<a href="#portal" className="hover:text-[#FFD700]">Portal</a>
<a href="#contact" className="hover:text-[#FFD700]">Contact</a>
<a href="tel:+16519640927" className="px-3 py-2 bg-[#0B1220] rounded-md">📞 +1 (651) 964-0927</a>
{user ? (
<div className="flex items-center gap-3">
<div className="text-sm">{user.name}</div>
<button onClick={onLogout} className="px-3 py-2 bg-[#1f2937] rounded">Logout</button>
</div>
) : (
<a href="#portal" className="px-3 py-2 bg-[#FFD700] text-black rounded font-medium">Sign Up / Login</a>
)}
</nav>
</div>
</header>
);
}
function Hero({ onCTAClick }) {
return (
<section className="py-20 bg-gradient-to-b from-[#071022] via-[#0b1220] to-[#071022]">
<div className="max-w-6xl mx-auto px-6 text-center">
<h1 className="text-4xl md:text-5xl font-bold text-white leading-tight">Institutional Trading Research & Premium Signal Services</h1>
<p className="mt-6 text-[#9CA3AF] max-w-2xl mx-auto">Coxeva delivers AI-powered market analysis, professionally modeled signals, and hands-on mentorship — designed for traders who demand institutional-quality insight.</p>
<div className="mt-8 flex justify-center gap-4">
<button onClick={onCTAClick} className="bg-[#FFD700] text-black px-6 py-3 rounded-full font-semibold">Join the Portal</button>
<a href="#contact" className="px-6 py-3 border border-[#1f2937] rounded-full text-[#CBD5E1]">Contact Sales</a>
</div>
</div>
</section>
);
}
function ServicesGrid() {
const services = [
{ title: "Research & Reports", desc: "Institutional-grade research, downloadable reports and interactive dashboards." },
{ title: "Signal Services", desc: "Premium signals with time-sensitive alerts and recommended risk sizing." },
{ title: "AI Strategy Development", desc: "Custom AI-backed strategies and backtesting for educational application." },
{ title: "Mentorship Programs", desc: "1:1 coaching, bootcamps and performance reviews for traders." },
];
return (
<section id="services" className="max-w-6xl mx-auto px-6 py-16">
<div className="grid md:grid-cols-2 gap-8">
{services.map((s) => (
<div key={s.title} className="bg-[#071427] p-8 rounded-2xl border border-[#12202b] shadow-lg">
<h3 className="text-xl font-semibold text-[#FFD700]">{s.title}</h3>
<p className="mt-3 text-[#9CA3AF]">{s.desc}</p>
<div className="mt-6 flex gap-3">
<a href="#portal" className="px-4 py-2 bg-[#0B1220] rounded text-[#CBD5E1]">Learn More</a>
<a href="#contact" className="px-4 py-2 border border-[#1f2937] rounded text-[#CBD5E1]">Contact Sales</a>
</div>
</div>
))}
</div>
</section>
);
}
function PortalLanding({ onShowRegister }) {
return (
<section id="portal" className="max-w-4xl mx-auto px-6 py-20">
<div className="bg-[#071427] p-10 rounded-2xl shadow-xl">
<h2 className="text-2xl font-semibold text-white">Client Portal</h2>
<p className="mt-3 text-[#9CA3AF]">Secure access for subscribers: dashboard, invoices, downloads and AI tools.</p>
<div className="mt-6 flex gap-4">
<a href="#dashboard" className="px-4 py-3 bg-[#FFD700] rounded text-black font-semibold">Go to Dashboard</a>
<button onClick={onShowRegister} className="px-4 py-3 border border-[#1f2937] rounded text-[#CBD5E1]">Register</button>
</div>
</div>
</section>
);
}
function AuthModal({ onClose, onLogin }) {
const [email, setEmail] = useState("");
const [name, setName] = useState("");
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
<div className="bg-[#071427] p-8 rounded-2xl w-full max-w-md">
<div className="flex justify-between items-center">
<h3 className="text-xl font-semibold">Create your account</h3>
<button onClick={onClose} className="text-[#9CA3AF]">✕</button>
</div>
<p className="text-sm text-[#9CA3AF] mt-2">Sign up to access your dashboard, invoices and research materials.</p>
<div className="mt-4 grid gap-3">
<input value={name} onChange={(e) => setName(e.target.value)} placeholder="Full name" className="p-3 rounded bg-[#0b1220] border border-[#12202b]" />
<input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email address" className="p-3 rounded bg-[#0b1220] border border-[#12202b]" />
<div className="flex justify-end gap-2 mt-2">
<button onClick={() => { onLogin(email || `${name}@example.com`); onClose(); }} className="bg-[#FFD700] px-4 py-2 rounded font-semibold">Create Account</button>
</div>
</div>
</div>
</div>
);
}
function Dashboard({ invoices }) {
return (
<section className="max-w-6xl mx-auto px-6 py-16" id="dashboard-section">
<div className="bg-[#071427] p-8 rounded-2xl shadow-xl">
<div className="flex items-start justify-between gap-6 flex-wrap">
<div>
<h3 className="text-xl font-semibold text-white">Dashboard</h3>
<p className="text-sm text-[#9CA3AF] mt-2">Overview of your subscriptions and invoices.</p>
</div>
<div className="text-right">
<div className="text-sm text-[#9CA3AF]">Next billing date</div>
<div className="font-semibold">Nov 01, 2025</div>
</div>
</div>
<div className="mt-8 overflow-x-auto">
<table className="w-full text-left rounded-lg">
<thead>
<tr className="text-sm text-[#CBD5E1] border-b border-[#12202b]">
<th className="py-3">Invoice #</th>
<th className="py-3">Date</th>
<th className="py-3">Service</th>
<th className="py-3">Amount</th>
<th className="py-3">Status</th>
<th className="py-3">Action</th>
</tr>
</thead>
<tbody>
{invoices.map((inv) => (
<tr key={inv.id} className="border-b border-[#0f1724]">
<td className="py-4 text-[#E6EDF3]">{inv.id}</td>
<td className="py-4 text-[#9CA3AF]">{inv.date}</td>
<td className="py-4">{inv.service}</td>
<td className="py-4">{formatUSD(inv.amount)}</td>
<td className="py-4">{inv.status === "Paid" ? <span className="text-green-400">Paid</span> : <span className="text-yellow-400">{inv.status}</span>}</td>
<td className="py-4"><button className="px-3 py-1 bg-[#FFD700] text-black rounded" onClick={() => alert('Open invoice '+inv.id)}>View / Pay</button></td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</section>
);
}
function Footer() {
return (
<footer className="bg-[#021023] text-[#9CA3AF] py-8 mt-12">
<div className="max-w-6xl mx-auto px-6 text-center">
<div className="flex items-center justify-center gap-4 mb-4">
<LogoLight size={36} />
<div className="text-sm">Coxeva LLC — Registered in Wyoming, USA</div>
</div>
<div className="text-xs">© {new Date().getFullYear()} Coxeva LLC. All rights reserved.</div>
</div>
</footer>
);
}
// --- Main App ---
export default function App() {
const auth = useAuth();
const [showAuth, setShowAuth] = useState(false);
const [invoices, setInvoices] = useState(MOCK_INVOICES);
useEffect(() => {
// In production: fetch invoices for logged user from API
if (auth.user) {
// fetch(`/api/invoices?email=${auth.user.email}`).then(...)
}
}, [auth.user]);
return (
<div className="min-h-screen bg-[#05070a] text-white">
<TopNav user={auth.user} onLogout={auth.logout} />
<Hero onCTAClick={() => setShowAuth(true)} />
<ServicesGrid />
<PortalLanding onShowRegister={() => setShowAuth(true)} />
{/* Portal / Dashboard area: show if logged in */}
{auth.user ? (
<Dashboard invoices={invoices} />
) : (
<section className="max-w-4xl mx-auto px-6 py-12 text-center text-[#9CA3AF]"><em>Sign in to view your dashboard and invoices.</em></section>
)}
<section id="contact" className="max-w-6xl mx-auto px-6 py-12">
<div className="bg-[#071427] p-8 rounded-2xl text-center">
<h3 className="text-lg font-semibold">Contact Sales</h3>
<p className="text-sm text-[#9CA3AF] mt-2">For enterprise pricing and partnerships, contact our sales team.</p>
<div className="mt-4"><a href="tel:+16519640927" className="px-4 py-2 bg-[#FFD700] text-black rounded">Call +1 (651) 964-0927</a></div>
</div>
</section>
<Footer />
{showAuth && <AuthModal onClose={() => setShowAuth(false)} onLogin={(email) => auth.login(email)} />}
</div>
);
}