Add landing page at src/app/(public)/page.tsx (task 9.1)
Implements the public landing page matching the Lovable design mockup: - Sticky navbar with CandleAnnotator logo, Log in / Get Started links - Hero section with gradient background, headline, and CTA buttons - Features grid with 6 cards (Precision Annotation, ML Training Pipeline, Real-Time Predictions, Multi-Chart Workspace, Keyboard-First Workflow, Export & Persist) using lucide-react icons - Stats bar showing 50ms render latency, 6 shortcut keys, JSON export - Footer CTA section with Create Free Account button - Minimal footer with logo and copyright Uses Tailwind CSS and shadcn/ui Button component, consistent with project stack. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marko Djordjevic
parent
162dfb0882
commit
09facbce69
2 changed files with 201 additions and 1 deletions
200
src/app/(public)/page.tsx
Normal file
200
src/app/(public)/page.tsx
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
ChartColumn,
|
||||
Zap,
|
||||
Crosshair,
|
||||
Brain,
|
||||
Database,
|
||||
Shield,
|
||||
ArrowRight,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
{/* Navbar */}
|
||||
<nav className="border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-50">
|
||||
<div className="max-w-6xl mx-auto flex items-center justify-between px-6 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<ChartColumn className="w-5 h-5 text-primary" />
|
||||
<span className="font-mono font-bold text-sm tracking-tight">
|
||||
CandleAnnotator
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="ghost" size="sm" className="font-mono text-xs" asChild>
|
||||
<Link href="/login">Log in</Link>
|
||||
</Button>
|
||||
<Button size="sm" className="font-mono text-xs" asChild>
|
||||
<Link href="/register">Get Started</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-primary/5 to-transparent pointer-events-none" />
|
||||
<div className="max-w-4xl mx-auto px-6 py-24 text-center relative z-10">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-border bg-secondary/50 text-xs font-mono text-muted-foreground mb-6">
|
||||
<Zap className="w-3 h-3 text-primary" />
|
||||
Built for quants & ML engineers
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight leading-tight mb-4">
|
||||
Annotate OHLC Charts.
|
||||
<br />
|
||||
<span className="text-primary">Train Smarter Models.</span>
|
||||
</h1>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto mb-8 leading-relaxed">
|
||||
A precision tool for labeling candlestick patterns, building
|
||||
training datasets, and running ML predictions — all in a fast,
|
||||
keyboard-driven workspace.
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<Button size="lg" className="font-mono text-sm gap-2" asChild>
|
||||
<Link href="/register">
|
||||
Start Annotating <ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="font-mono text-sm"
|
||||
asChild
|
||||
>
|
||||
<Link href="/app">Try Demo</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Grid */}
|
||||
<section className="max-w-5xl mx-auto px-6 py-20">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-2xl font-bold tracking-tight mb-2">
|
||||
Everything you need
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
From annotation to model training, in one interface.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{/* Card 1 */}
|
||||
<div className="group p-5 rounded-lg border border-border bg-card hover:border-primary/30 hover:shadow-md transition-all duration-200">
|
||||
<div className="w-9 h-9 rounded-md bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
|
||||
<Crosshair className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-sm mb-1">Precision Annotation</h3>
|
||||
<p className="text-xs text-muted-foreground leading-relaxed">
|
||||
Draw rectangles, spans, and lines directly on OHLC candlestick
|
||||
charts with pixel-perfect accuracy.
|
||||
</p>
|
||||
</div>
|
||||
{/* Card 2 */}
|
||||
<div className="group p-5 rounded-lg border border-border bg-card hover:border-primary/30 hover:shadow-md transition-all duration-200">
|
||||
<div className="w-9 h-9 rounded-md bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
|
||||
<Brain className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-sm mb-1">ML Training Pipeline</h3>
|
||||
<p className="text-xs text-muted-foreground leading-relaxed">
|
||||
Export annotated datasets in structured formats ready for model
|
||||
training and backtesting.
|
||||
</p>
|
||||
</div>
|
||||
{/* Card 3 */}
|
||||
<div className="group p-5 rounded-lg border border-border bg-card hover:border-primary/30 hover:shadow-md transition-all duration-200">
|
||||
<div className="w-9 h-9 rounded-md bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
|
||||
<ChartColumn className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-sm mb-1">Real-Time Predictions</h3>
|
||||
<p className="text-xs text-muted-foreground leading-relaxed">
|
||||
Run trained models against visible candles and visualize
|
||||
predictions with confidence overlays.
|
||||
</p>
|
||||
</div>
|
||||
{/* Card 4 */}
|
||||
<div className="group p-5 rounded-lg border border-border bg-card hover:border-primary/30 hover:shadow-md transition-all duration-200">
|
||||
<div className="w-9 h-9 rounded-md bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
|
||||
<Database className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-sm mb-1">Multi-Chart Workspace</h3>
|
||||
<p className="text-xs text-muted-foreground leading-relaxed">
|
||||
Load multiple CSV datasets, switch between charts, and manage
|
||||
annotations per session.
|
||||
</p>
|
||||
</div>
|
||||
{/* Card 5 */}
|
||||
<div className="group p-5 rounded-lg border border-border bg-card hover:border-primary/30 hover:shadow-md transition-all duration-200">
|
||||
<div className="w-9 h-9 rounded-md bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
|
||||
<Zap className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-sm mb-1">Keyboard-First Workflow</h3>
|
||||
<p className="text-xs text-muted-foreground leading-relaxed">
|
||||
Shortcuts for every tool — R, S, L, D, T, B — designed for speed
|
||||
and flow.
|
||||
</p>
|
||||
</div>
|
||||
{/* Card 6 */}
|
||||
<div className="group p-5 rounded-lg border border-border bg-card hover:border-primary/30 hover:shadow-md transition-all duration-200">
|
||||
<div className="w-9 h-9 rounded-md bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
|
||||
<Shield className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-sm mb-1">Export & Persist</h3>
|
||||
<p className="text-xs text-muted-foreground leading-relaxed">
|
||||
Export annotations as JSON. Your data, your format, your models.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Bar */}
|
||||
<section className="border-y border-border bg-card/30">
|
||||
<div className="max-w-4xl mx-auto px-6 py-12 grid grid-cols-3 gap-6 text-center">
|
||||
<div>
|
||||
<div className="text-2xl font-mono font-bold text-primary">50ms</div>
|
||||
<div className="text-xs text-muted-foreground mt-1">
|
||||
Render latency
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-mono font-bold text-primary">6</div>
|
||||
<div className="text-xs text-muted-foreground mt-1">
|
||||
Shortcut keys
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-mono font-bold text-primary">JSON</div>
|
||||
<div className="text-xs text-muted-foreground mt-1">
|
||||
Export format
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer CTA */}
|
||||
<section className="max-w-3xl mx-auto px-6 py-20 text-center">
|
||||
<h2 className="text-2xl font-bold mb-3">Ready to label?</h2>
|
||||
<p className="text-muted-foreground text-sm mb-6">
|
||||
No credit card required. Start annotating charts in seconds.
|
||||
</p>
|
||||
<Button size="lg" className="font-mono text-sm gap-2" asChild>
|
||||
<Link href="/register">
|
||||
Create Free Account <ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t border-border py-6">
|
||||
<div className="max-w-6xl mx-auto px-6 flex items-center justify-between text-xs text-muted-foreground font-mono">
|
||||
<div className="flex items-center gap-2">
|
||||
<ChartColumn className="w-3.5 h-3.5" />
|
||||
<span>CandleAnnotator</span>
|
||||
</div>
|
||||
<span>© 2026</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue