198 lines
12 KiB
TypeScript
198 lines
12 KiB
TypeScript
import React from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import Head from 'next/head';
|
|
import Link from 'next/link';
|
|
import * as icon from '@mdi/js';
|
|
import BaseIcon from '../components/BaseIcon';
|
|
import LayoutGuest from '../layouts/Guest';
|
|
import { getPageTitle } from '../config';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<div className="bg-[#0a0a0a] min-h-screen text-white selection:bg-[#0ea5e9]/30 font-sans">
|
|
<Head>
|
|
<title>{getPageTitle('Ultra-Premium Trading Journal')}</title>
|
|
</Head>
|
|
|
|
{/* Navigation */}
|
|
<nav className="fixed top-0 w-full z-50 bg-[#0a0a0a]/80 backdrop-blur-xl border-b border-white/10">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between h-16 items-center">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-8 h-8 bg-gradient-to-br from-[#0ea5e9] to-[#3b82f6] rounded-lg flex items-center justify-center shadow-lg shadow-blue-500/20">
|
|
<BaseIcon path={icon.mdiChartLine} size={20} className="text-white" />
|
|
</div>
|
|
<span className="text-xl font-bold tracking-tight">TradeLog<span className="text-[#0ea5e9]">Pro</span></span>
|
|
</div>
|
|
<div className="hidden md:flex items-center space-x-8 text-sm font-medium text-gray-400">
|
|
<a href="#features" className="hover:text-white transition-colors">Features</a>
|
|
<a href="#pricing" className="hover:text-white transition-colors">Pricing</a>
|
|
<Link href="/login" className="hover:text-white transition-colors">Login</Link>
|
|
<Link href="/register" className="bg-[#0ea5e9] hover:bg-[#0ea5e9]/90 text-white px-5 py-2 rounded-full transition-all shadow-lg shadow-blue-500/25">
|
|
Get Started
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero Section */}
|
|
<section className="pt-32 pb-20 px-4 overflow-hidden relative">
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[500px] bg-[#0ea5e9]/10 blur-[120px] rounded-full -z-10"></div>
|
|
<div className="max-w-5xl mx-auto text-center">
|
|
<div className="inline-flex items-center space-x-2 bg-white/5 border border-white/10 px-3 py-1 rounded-full mb-6 backdrop-blur-sm">
|
|
<span className="flex h-2 w-2 rounded-full bg-[#0ea5e9] animate-pulse"></span>
|
|
<span className="text-xs font-medium text-gray-300 tracking-wide uppercase">New: AI-Powered Trade Insights</span>
|
|
</div>
|
|
<h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-6 bg-gradient-to-b from-white to-gray-400 bg-clip-text text-transparent leading-tight">
|
|
Master Your Edge with <br /> Precision Analytics.
|
|
</h1>
|
|
<p className="text-lg md:text-xl text-gray-400 max-w-2xl mx-auto mb-10 leading-relaxed">
|
|
The ultra-premium trading journal designed for high-performance traders. Track performance, analyze psychology, and unlock AI insights to reach your goals.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<Link href="/register" className="w-full sm:w-auto bg-[#0ea5e9] hover:bg-[#0ea5e9]/90 text-white px-8 py-4 rounded-xl font-semibold transition-all shadow-xl shadow-blue-500/25 flex items-center justify-center">
|
|
Start Free Journaling
|
|
<BaseIcon path={icon.mdiArrowRight} size={20} className="ml-2" />
|
|
</Link>
|
|
<a href="#features" className="w-full sm:w-auto bg-white/5 hover:bg-white/10 border border-white/10 px-8 py-4 rounded-xl font-semibold transition-all flex items-center justify-center">
|
|
Explore Features
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dashboard Preview */}
|
|
<div className="max-w-6xl mx-auto mt-20 relative">
|
|
<div className="absolute inset-0 bg-gradient-to-t from-[#0a0a0a] via-transparent to-transparent z-10"></div>
|
|
<div className="bg-[#121212] border border-white/10 rounded-2xl p-4 shadow-2xl relative overflow-hidden group">
|
|
<div className="flex items-center justify-between mb-8 border-b border-white/5 pb-4">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-3 h-3 rounded-full bg-red-500/50"></div>
|
|
<div className="w-3 h-3 rounded-full bg-yellow-500/50"></div>
|
|
<div className="w-3 h-3 rounded-full bg-green-500/50"></div>
|
|
</div>
|
|
<div className="text-xs text-gray-500 font-mono">dashboard.tradelogpro.ai</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
{[
|
|
{ label: 'Total PnL', value: '+$12,450.00', color: 'text-green-400', icon: icon.mdiCurrencyUsd },
|
|
{ label: 'Win Rate', value: '68.5%', color: 'text-[#0ea5e9]', icon: icon.mdiChartPie },
|
|
{ label: 'Profit Factor', value: '2.4', color: 'text-purple-400', icon: icon.mdiTrendingUp }
|
|
].map((stat, i) => (
|
|
<div key={i} className="bg-white/5 border border-white/5 p-6 rounded-xl">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<span className="text-sm text-gray-500">{stat.label}</span>
|
|
<BaseIcon path={stat.icon} size={18} className="text-gray-600" />
|
|
</div>
|
|
<div className={`text-2xl font-bold ${stat.color}`}>{stat.value}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="h-64 bg-white/5 rounded-xl border border-white/5 flex items-end justify-between p-6 overflow-hidden">
|
|
{[40, 60, 45, 70, 85, 65, 90, 110, 95, 130, 150].map((h, i) => (
|
|
<div key={i} className="w-[6%] bg-gradient-to-t from-[#0ea5e9]/20 to-[#0ea5e9] rounded-t-sm transition-all duration-1000 group-hover:opacity-80" style={{ height: `${h}%` }}></div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Pricing Section */}
|
|
<section id="pricing" className="py-20 px-4">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-bold mb-4">Choose Your Plan</h2>
|
|
<p className="text-gray-400">Scale your trading with tools built for your success level.</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{/* Free Tier */}
|
|
<div className="bg-[#121212] border border-white/10 p-8 rounded-2xl flex flex-col hover:border-[#0ea5e9]/30 transition-all">
|
|
<div className="mb-8">
|
|
<h3 className="text-xl font-bold mb-2">Free</h3>
|
|
<div className="text-4xl font-bold mb-4">$0<span className="text-lg text-gray-500 font-normal">/mo</span></div>
|
|
<p className="text-gray-400 text-sm leading-relaxed">Perfect for beginners tracking their first steps in the market.</p>
|
|
</div>
|
|
<ul className="space-y-4 mb-10 flex-grow">
|
|
{['Manual trade entry', 'Basic dashboard', 'Win Rate, PnL, Total Trades', 'Last 30 days history', 'Single account'].map((feat, i) => (
|
|
<li key={i} className="flex items-center text-sm text-gray-300">
|
|
<BaseIcon path={icon.mdiCheck} size={16} className="text-green-500 mr-2" />
|
|
{feat}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Link href="/register" className="w-full bg-white/5 hover:bg-white/10 py-3 rounded-xl font-semibold text-center transition-all text-white">
|
|
Get Started
|
|
</Link>
|
|
</div>
|
|
|
|
{/* $1 Tier */}
|
|
<div className="bg-[#121212] border-2 border-[#0ea5e9] p-8 rounded-2xl flex flex-col relative shadow-2xl shadow-blue-500/10 scale-105">
|
|
<div className="absolute top-0 right-8 -translate-y-1/2 bg-[#0ea5e9] text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Most Popular</div>
|
|
<div className="mb-8">
|
|
<h3 className="text-xl font-bold mb-2">Pro</h3>
|
|
<div className="text-4xl font-bold mb-4">$1<span className="text-lg text-gray-500 font-normal">/mo</span></div>
|
|
<p className="text-gray-400 text-sm leading-relaxed">Comprehensive analytics for serious individual traders.</p>
|
|
</div>
|
|
<ul className="space-y-4 mb-10 flex-grow">
|
|
{['CSV bulk import', 'Full dashboard metrics', 'Equity curve visualization', 'Performance breakdowns', 'Trade duration analytics', 'Screenshot attachments', 'Mood/emotions tracker', 'Economic calendar'].map((feat, i) => (
|
|
<li key={i} className="flex items-center text-sm text-gray-300">
|
|
<BaseIcon path={icon.mdiCheck} size={16} className="text-[#0ea5e9] mr-2" />
|
|
{feat}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Link href="/register" className="w-full bg-[#0ea5e9] hover:bg-[#0ea5e9]/90 py-3 rounded-xl font-semibold text-center transition-all shadow-lg shadow-blue-500/25 text-white">
|
|
Go Pro Now
|
|
</Link>
|
|
</div>
|
|
|
|
{/* $10 Tier */}
|
|
<div className="bg-[#121212] border border-white/10 p-8 rounded-2xl flex flex-col hover:border-[#0ea5e9]/30 transition-all">
|
|
<div className="mb-8">
|
|
<h3 className="text-xl font-bold mb-2">AI Elite</h3>
|
|
<div className="text-4xl font-bold mb-4">$10<span className="text-lg text-gray-500 font-normal">/mo</span></div>
|
|
<p className="text-gray-400 text-sm leading-relaxed">The ultimate edge with AI pattern recognition and insights.</p>
|
|
</div>
|
|
<ul className="space-y-4 mb-10 flex-grow">
|
|
{['Everything in Pro', 'AI-powered trade analysis', 'AI pattern recognition', 'Weakness identification', 'Risk size recommendations', 'Market condition classifier', 'Broker API auto-sync'].map((feat, i) => (
|
|
<li key={i} className="flex items-center text-sm text-gray-300">
|
|
<BaseIcon path={icon.mdiCheck} size={16} className="text-purple-500 mr-2" />
|
|
{feat}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Link href="/register" className="w-full bg-white/5 hover:bg-white/10 py-3 rounded-xl font-semibold text-center transition-all text-white">
|
|
Unlock Elite AI
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t border-white/10 py-12 px-4 bg-[#0a0a0a]">
|
|
<div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center">
|
|
<div className="flex items-center space-x-2 mb-8 md:mb-0">
|
|
<div className="w-6 h-6 bg-[#0ea5e9] rounded flex items-center justify-center">
|
|
<BaseIcon path={icon.mdiChartLine} size={14} className="text-white" />
|
|
</div>
|
|
<span className="font-bold">TradeLogPro</span>
|
|
</div>
|
|
<div className="flex space-x-8 text-sm text-gray-500">
|
|
<Link href="/privacy-policy" className="hover:text-white transition-colors">Privacy</Link>
|
|
<Link href="/terms-of-use" className="hover:text-white transition-colors">Terms</Link>
|
|
<a href="#" className="hover:text-white transition-colors">Twitter</a>
|
|
<a href="#" className="hover:text-white transition-colors">Support</a>
|
|
</div>
|
|
<div className="mt-8 md:mt-0 text-sm text-gray-600 font-mono">
|
|
© 2026 TRADELOGPRO. ALL RIGHTS RESERVED.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
LandingPage.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
}; |