Spaces:
Sleeping
Sleeping
File size: 4,781 Bytes
67c8aca | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | import { ArrowRight, BrainCircuit, LineChart, ShieldCheck, Database, Zap, FileSpreadsheet } from 'lucide-react';
export default function Home({ onProceed }) {
return (
<div className="home-container" style={{ padding: '2rem 0' }}>
{/* Hero Section */}
<div style={{ textAlign: 'center', marginBottom: '5rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<div style={{ background: 'var(--primary-glow)', padding: '1.5rem', borderRadius: '50%', color: 'var(--primary)', marginBottom: '2rem' }}>
<BrainCircuit size={64} />
</div>
<h1 style={{ fontSize: '4.5rem', fontWeight: '800', letterSpacing: '-0.04em', marginBottom: '1.5rem', color: 'var(--text-main)', lineHeight: '1.1' }}>
Next-Generation <br/>
<span style={{ color: 'var(--primary)' }}>Loan Intelligence</span>
</h1>
<p style={{ fontSize: '1.25rem', color: 'var(--text-muted)', maxWidth: '650px', marginBottom: '3rem', lineHeight: '1.6' }}>
Evaluate loan applications instantly. Our hybrid architecture combines deterministic mathematical modeling with Mistral Large 3 AI to provide human-readable, actionable financial decisions.
</p>
<button onClick={onProceed} className="btn" style={{ fontSize: '1.15rem', padding: '1.2rem 3.5rem', borderRadius: '40px' }}>
Proceed to Application <ArrowRight size={22} />
</button>
</div>
{/* Feature Grid Section */}
<div style={{ marginBottom: '4rem' }}>
<h2 style={{ textAlign: 'center', fontSize: '2.5rem', marginBottom: '3rem', fontWeight: '700' }}>Platform Capabilities</h2>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2rem' }}>
{/* Card 1 */}
<div className="glass-card" style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<div style={{ background: '#ecfdf5', width: '50px', height: '50px', borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--success)' }}>
<ShieldCheck size={28} />
</div>
<h3 style={{ fontSize: '1.5rem', fontWeight: '700' }}>Deterministic Engine</h3>
<p style={{ color: 'var(--text-muted)', lineHeight: '1.6' }}>
Base evaluations are driven by a strictly enforced Random Forest pipeline. No hallucinations—just pure math calculating Debt-to-Income ratios and credit health.
</p>
</div>
{/* Card 2 */}
<div className="glass-card" style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<div style={{ background: 'var(--primary-glow)', width: '50px', height: '50px', borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--primary)' }}>
<Zap size={28} />
</div>
<h3 style={{ fontSize: '1.5rem', fontWeight: '700' }}>Generative Explanations</h3>
<p style={{ color: 'var(--text-muted)', lineHeight: '1.6' }}>
We pipe the mathematical packet into NVIDIA NIM (Mistral 3). It translates complex metrics into a multi-point, easy-to-read narrative for applicants.
</p>
</div>
{/* Card 3 */}
<div className="glass-card" style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<div style={{ background: '#eff6ff', width: '50px', height: '50px', borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#3b82f6' }}>
<LineChart size={28} />
</div>
<h3 style={{ fontSize: '1.5rem', fontWeight: '700' }}>Visual Benchmarking</h3>
<p style={{ color: 'var(--text-muted)', lineHeight: '1.6' }}>
Dynamically compare incoming applications against a "Typical Approved Profile" using our built-in Radar comparisons and internal ML weigh distribution charts.
</p>
</div>
</div>
</div>
{/* Footer Banner */}
<div style={{ borderRadius: '20px', background: 'linear-gradient(135deg, #1a1b1e 0%, #374151 100%)', color: 'white', padding: '3rem', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1.5rem' }}>
<Database size={40} color="var(--primary)" />
<h2 style={{ fontSize: '2rem' }}>Ready to analyze your next portfolio?</h2>
<button onClick={onProceed} className="btn" style={{ background: 'white', color: 'var(--text-main)', boxShadow: 'none' }}>
Start Prediction Pipeline
</button>
</div>
</div>
);
}
|