gavindiaz/QuantScan-Pro-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Initialize QuantScan AI frontend project

Browse Source 
Set up the basic React project structure, including necessary dependencies, configuration files, and initial styling for the QuantScan AI Forex Pro scanner. This commit establishes the foundation for building the frontend application.
This commit is contained in:
desartstudio95
2026-04-28 20:32:34 +02:00
parent a8dc00eecd
commit f15d70a121
26 changed files with 9739 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LandingPage.tsx
+249
View File
@@ -0,0 +1,249 @@
import React from 'react';
import { motion } from 'motion/react';
import { TrendingUp, ShieldCheck, Zap, BarChart3, Globe, ChevronRight, CheckCircle2 } from 'lucide-react';
interface LandingPageProps {
onGetStarted: () => void;
onViewPlans: () => void;
}
export const LandingPage: React.FC<LandingPageProps> = ({ onGetStarted, onViewPlans }) => {
return (
<div className="min-h-screen bg-brand-dark text-white overflow-x-hidden">
{/* Navbar */}
<nav className="fixed top-0 w-full z-50 glass-card bg-brand-dark/80 rounded-none border-t-0 border-x-0 border-b border-white/5 py-4">
<div className="max-w-7xl mx-auto px-6 flex justify-between items-center">
<div className="flex items-center gap-3">
<img
src="https://i.ibb.co/9BwbV3M/FXBROS-WORLD-3.png"
alt="Logo"
className="w-12 h-12 object-contain"
referrerPolicy="no-referrer"
/>
<span className="font-black italic text-2xl tracking-tighter uppercase">
QUANT<span className="text-brand-red">SCAN</span>
</span>
</div>
<div className="hidden md:flex items-center gap-8">
<button
onClick={onViewPlans}
className="text-xs font-black uppercase tracking-widest text-zinc-400 hover:text-white transition-colors"
>
Planos
</button>
<button
onClick={onGetStarted}
className="bg-brand-red hover:bg-brand-red/90 text-white px-5 py-2 rounded-lg font-bold text-sm transition-all active:scale-95 flex items-center gap-2"
>
Acessar Agora <ChevronRight size={16} />
</button>
</div>
<div className="flex md:hidden items-center gap-3">
<button
onClick={onViewPlans}
className="text-[10px] font-black uppercase tracking-widest text-zinc-400"
>
Planos
</button>
<button
onClick={onGetStarted}
className="bg-brand-red hover:bg-brand-red/90 text-white px-4 py-2 rounded-lg font-bold text-xs transition-all flex items-center gap-2"
>
Acessar <ChevronRight size={14} />
</button>
</div>
</div>
</nav>
{/* Hero Section */}
<section className="relative pt-32 pb-20 px-6 min-h-screen flex items-center">
<div className="absolute inset-0 z-0">
<img
src="https://i.ibb.co/VcJRM0zZ/90a0c129-b771-41d6-ad30-634d1d2546c4.png"
alt="Forex Background"
className="w-full h-full object-cover opacity-80"
/>
<div className="absolute inset-0 bg-gradient-to-b from-brand-dark/60 via-brand-dark/40 to-brand-dark" />
</div>
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center relative z-10">
<motion.div
initial={{ opacity: 0, x: -30 }}
animate={{ opacity: 1, x: 0 }}
className="space-y-6"
>
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-red/10 border border-brand-red/20 text-brand-red text-xs font-black uppercase tracking-widest">
<Zap size={14} /> Inteligência Institucional
</div>
<h1 className="text-4xl md:text-5xl font-black italic tracking-tighter leading-[0.9] uppercase">
REVELE A <span className="text-brand-red">LIQUIDEZ</span> <br />
DAS INSTITUIÇÕES.
</h1>
<p className="text-base md:text-lg max-w-xl font-medium leading-relaxed">
Scanner de Forex baseado em IA avançada que identifica padrões de alta probabilidade em segundos. Pare de ser a liquidez do mercado.
</p>
<div className="flex flex-col sm:flex-row gap-4 pt-4">
<button
onClick={onGetStarted}
className="bg-white text-brand-dark px-10 py-4 rounded-xl font-black text-lg hover:bg-zinc-200 transition-all flex items-center justify-center gap-3"
>
TESTAR SCANNER <ChevronRight size={20} />
</button>
<button
onClick={onViewPlans}
className="bg-zinc-900 border border-white/10 text-white px-10 py-4 rounded-xl font-black text-lg hover:bg-zinc-800 transition-all flex items-center justify-center gap-3"
>
VER PLANOS
</button>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 0.2 }}
className="relative"
>
<div className="absolute -inset-4 bg-brand-red/20 blur-[100px] rounded-full" />
<div className="glass-card p-4 border-zinc-800 relative z-10 overflow-hidden">
<img
src="https://i.ibb.co/TB4yz3GP/Chat-GPT-Image-25-de-abr-de-2026-03-58-37.png"
alt="Trading Chart Analysis"
className="rounded-xl opacity-80 h-[400px] w-full object-cover transition-all duration-700"
referrerPolicy="no-referrer"
/>
<div className="absolute inset-0 bg-gradient-to-t from-brand-dark via-transparent to-transparent flex flex-col justify-end p-8">
<div className="glass-card p-4 translate-y-4 max-w-xs border-brand-red/30">
<p className="text-xs font-bold text-brand-red uppercase mb-1">IA DETECTADA:</p>
<p className="text-sm font-black">Bullish Order Block H1</p>
<div className="flex gap-2 mt-3">
<div className="h-1 flex-1 bg-brand-red rounded-full" />
<div className="h-1 flex-1 bg-brand-red/20 rounded-full" />
<div className="h-1 flex-1 bg-brand-red/20 rounded-full" />
</div>
</div>
</div>
</div>
</motion.div>
</div>
</section>
{/* Features Grid */}
<section className="py-20 px-6 bg-zinc-950/50">
<div className="max-w-7xl mx-auto space-y-12">
<div className="text-center space-y-4">
<h2 className="text-2xl font-black uppercase italic tracking-tighter">
TECNOLOGIA DE <span className="text-brand-red">PRÓXIMA GERAÇÃO</span>
</h2>
<div className="w-16 h-1 bg-brand-red mx-auto" />
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{[
{
icon: BarChart3,
title: "Análise Automática",
desc: "Nossa IA identifica quebras de estrutura e mudanças de comportamento do mercado instantaneamente."
},
{
icon: ShieldCheck,
title: "Probability Score",
desc: "Cada setup recebe uma pontuação de 0-100% baseada em confluências institucionais reais."
},
{
icon: Globe,
title: "Qualquer Ativo",
desc: "Pares de Forex, Índices, Cripto ou Commodities. Se tem gráfico, nossa IA analisa."
}
].map((feature, i) => (
<div key={i} className="glass-card p-6 border-zinc-800 hover:border-brand-red/30 transition-colors group">
<div className="w-12 h-12 bg-white/5 rounded-xl flex items-center justify-center mb-6 group-hover:bg-brand-red/10 transition-colors">
<feature.icon className="text-zinc-500 group-hover:text-brand-red transition-colors" />
</div>
<h3 className="text-lg font-black uppercase mb-3 ">{feature.title}</h3>
<p className="text-zinc-500 text-sm leading-relaxed">{feature.desc}</p>
</div>
))}
</div>
</div>
</section>
{/* Proof Section */}
<section className="py-20 px-6 max-w-7xl mx-auto">
<div className="glass-card p-12 overflow-hidden relative">
<div className="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div className="space-y-6">
<h3 className="text-2xl md:text-3xl font-black italic tracking-tighter uppercase leading-none">
PARE DE ADIVINHAR.<br />
COMECE A <span className="text-brand-red">QUANTIFICAR</span>.
</h3>
<ul className="space-y-3">
{[
"Análise em tempo real de fluxos e vácuos",
"Detecção de zonas de Oferta & Procura",
"Histórico adaptativo para aprendizado de sinais",
"Interface otimizada profissional"
].map((text, i) => (
<li key={i} className="flex items-center gap-3 text-zinc-400 font-medium text-xs md:text-sm">
<CheckCircle2 className="text-brand-red shrink-0" size={16} />
{text}
</li>
))}
</ul>
<button
onClick={onViewPlans}
className="bg-brand-red text-white px-8 py-4 rounded-xl font-black hover:bg-brand-red/90 transition-all flex items-center gap-3"
>
LIBERAR MEU ACESSO <ChevronRight size={20} />
</button>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-4">
<div className="glass-card p-6 text-center border-white/5">
<p className="text-3xl font-black text-brand-red">82%</p>
<p className="text-[10px] text-zinc-500 font-bold uppercase tracking-widest">Precisão média</p>
</div>
<div className="glass-card p-6 text-center border-white/5">
<p className="text-3xl font-black">24/7</p>
<p className="text-[10px] text-zinc-500 font-bold uppercase tracking-widest">Monitoramento</p>
</div>
</div>
<div className="space-y-4 pt-8">
<div className="glass-card p-6 text-center border-white/5">
<p className="text-3xl font-black text-white">PRO</p>
<p className="text-[10px] text-zinc-500 font-bold uppercase tracking-widest">Estratégia Foco</p>
</div>
<div className="glass-card p-6 text-center border-white/5">
<p className="text-3xl font-black text-white">IA</p>
<p className="text-[10px] text-zinc-500 font-bold uppercase tracking-widest">Adaptativa</p>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Footer */}
<footer className="py-12 border-t border-white/5 text-center">
<div className="max-w-7xl mx-auto px-6 space-y-6">
<div className="flex items-center justify-center gap-2">
<div className="w-8 h-8 bg-brand-red rounded-lg flex items-center justify-center">
<TrendingUp size={18} className="text-white" />
</div>
<span className="font-black italic text-xl tracking-tighter uppercase">
QUANT<span className="text-brand-red">SCAN</span>
</span>
</div>
<p className="text-zinc-600 text-xs max-w-lg mx-auto">
Aviso Legal: Negociar no mercado Forex envolve riscos elevados. Os sinais gerados pela IA são apenas para fins informativos e não constituem aconselhamento financeiro.
</p>
<div className="text-zinc-800 text-[10px] font-bold uppercase tracking-[0.2em]">
© 2026 QUANT SCAN AI - TODOS OS DIREITOS RESERVADOS
</div>
</div>
</footer>
</div>
);
};