Spaces:
Sleeping
Sleeping
File size: 11,441 Bytes
b72652e 7dff677 b72652e 7dff677 b72652e 7dff677 b72652e 7dff677 b72652e 7dff677 b72652e 7dff677 b72652e 7dff677 b72652e 7dff677 b72652e 7dff677 b72652e 7dff677 b72652e 7dff677 b72652e 7dff677 b72652e | 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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 | import { Link } from 'react-router-dom'
import { motion } from 'framer-motion'
import { useState, useEffect } from 'react'
import { ShieldCheck, ArrowRight, TrendingUp, Target, Crosshair, Users, Landmark, Briefcase, UserCheck, PieChart } from 'lucide-react'
const PitchBackground = () => (
<div style={{ position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none' }}>
<div style={{
position: 'absolute', inset: 0,
background: 'radial-gradient(circle at 30% 30%, rgba(34, 197, 94, 0.08) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(59, 130, 246, 0.08) 0%, transparent 50%)',
}} />
<svg width="100%" height="100%" style={{ opacity: 0.1 }} preserveAspectRatio="xMidYMid slice" viewBox="0 0 1000 600">
<rect width="1000" height="600" fill="none" stroke="rgba(255,255,255,0.2)" strokeWidth="1" />
<line x1="500" y1="0" x2="500" y2="600" stroke="rgba(255,255,255,0.2)" strokeWidth="1" />
<circle cx="500" cy="300" r="90" fill="none" stroke="rgba(255,255,255,0.2)" strokeWidth="1" />
</svg>
</div>
)
const AUDIENCES = [
{ icon: <Briefcase size={24} />, title: "Directors of Football", desc: "Validate transfer ceilings and protect club liquidity." },
{ icon: <Target size={24} />, title: "Head Scouts", desc: "Back the 'eye test' with unshakeable performance data." },
{ icon: <Landmark size={24} />, title: "Financial Officers", desc: "Model 5-year FFP impact before signing the contract." },
{ icon: <Users size={24} />, title: "Elite Agents", desc: "Benchmark client value against live market benchmarks." },
{ icon: <PieChart size={24} />, title: "Investment Groups", desc: "De-risk acquisitions with high-fidelity ROI projections." },
]
export default function Landing() {
const [evalCount, setEvalCount] = useState(84);
useEffect(() => {
const stored = localStorage.getItem('fv_usage_count');
const localUses = stored ? parseInt(stored, 10) : 0;
setEvalCount(84 + localUses);
}, []);
const STATS = [
{ value: evalCount.toString(), label: 'Transfers Evaluated' },
{ value: '£14.2m', label: 'Avg. Overpay Avoided' },
{ value: 'PL-Sync', label: 'Market Intelligence' },
{ value: '100%', label: 'PSR Compliance' },
]
return (
<div className="page" style={{ position: 'relative', overflow: 'hidden' }}>
<PitchBackground />
{/* ── Cinematic Hero ────────────────────────────────────────────────── */}
<section className="container" style={{ position: 'relative', zIndex: 1, padding: '40px 24px 60px' }}>
<div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: '48px', alignItems: 'center' }}>
<motion.div
initial={{ opacity: 0, x: -40 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }}
>
<div style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', marginBottom: '24px', padding: '6px 16px', background: 'rgba(59,130,246,0.1)', border: '1px solid rgba(59,130,246,0.2)', borderRadius: '100px' }}>
<span style={{ fontSize: '1.2rem' }}>🏆</span>
<span style={{ fontSize: '0.8rem', fontWeight: 600, color: '#60a5fa', letterSpacing: '0.05em', textTransform: 'uppercase' }}>
The Gold Standard in Transfer Intelligence
</span>
</div>
<h1 style={{ marginBottom: '24px', fontSize: 'clamp(2.5rem, 6vw, 4.8rem)', lineHeight: 1.05, fontWeight: 900, letterSpacing: '-0.02em' }}>
Own the Negotiation. <br/>
<span className="gradient-accent">Master the Market.</span>
</h1>
<p style={{ maxWidth: '600px', marginBottom: '40px', fontSize: '1.25rem', lineHeight: 1.6, color: 'var(--text-2)', fontWeight: 400 }}>
Stop guessing. Start quantifying. The definitive platform for quantifying the true intrinsic value of world-class talent and eliminating overpayment risk.
</p>
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
<Link to="/estimate" className="btn btn-secondary btn-lg" style={{ padding: '18px 36px' }}>
Launch Intelligence Engine <ArrowRight size={20} />
</Link>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, scale: 0.9, rotate: 2 }}
animate={{ opacity: 1, scale: 1, rotate: 0 }}
transition={{ duration: 1, delay: 0.2 }}
style={{ position: 'relative' }}
>
<div style={{
position: 'absolute', inset: -20,
background: 'radial-gradient(circle, rgba(59,130,246,0.2) 0%, transparent 70%)',
filter: 'blur(40px)', zIndex: -1
}} />
<img
src="/pl_lion_valuation_hero_1777652300981.png"
alt="Premier League Intelligence"
style={{
width: '100%', borderRadius: '24px',
border: '1px solid var(--glass-border-hi)',
boxShadow: '0 40px 100px rgba(0,0,0,0.6)',
transform: 'perspective(1000px) rotateY(-5deg)'
}}
/>
</motion.div>
</div>
</section>
{/* ── Financial Stats ───────────────────────────────────────────────── */}
<section style={{ position: 'relative', zIndex: 1, borderTop: '1px solid var(--glass-border)', borderBottom: '1px solid var(--glass-border)', padding: '40px 0', background: 'rgba(255,255,255,0.02)' }}>
<div className="container">
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: '24px', textAlign: 'center' }}>
{STATS.map(({ value, label }, i) => (
<motion.div
key={label}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 * i }}
viewport={{ once: true }}
>
<div style={{ fontSize: '2.8rem', fontWeight: 900, color: 'var(--text-1)', fontFamily: 'Outfit' }}>{value}</div>
<div style={{ fontSize: '0.8rem', color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700 }}>{label}</div>
</motion.div>
))}
</div>
</div>
</section>
{/* ── Target Audience ───────────────────────────────────────────────── */}
<section className="container" style={{ position: 'relative', zIndex: 1, padding: '100px 24px' }}>
<div style={{ textAlign: 'center', marginBottom: '64px' }}>
<h2 style={{ marginBottom: '16px', fontSize: '2.5rem' }}>Built for the Decision Makers</h2>
<p style={{ maxWidth: '600px', margin: '0 auto', fontSize: '1.1rem', color: 'var(--text-2)' }}>
Empowering the most critical roles in the multi-billion pound football industry.
</p>
</div>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '20px' }}>
{AUDIENCES.map((item, i) => (
<motion.div
key={item.title}
whileHover={{ y: -10, background: 'rgba(255,255,255,0.06)' }}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 * i }}
viewport={{ once: true }}
className="glass"
style={{ padding: '28px', textAlign: 'center', border: '1px solid var(--glass-border)' }}
>
<div style={{
width: 50, height: 50, borderRadius: '12px',
background: 'rgba(59,130,246,0.1)', display: 'flex',
alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px',
color: '#60a5fa'
}}>
{item.icon}
</div>
<h4 style={{ marginBottom: '12px', fontSize: '1.05rem', color: 'var(--text-1)' }}>{item.title}</h4>
<p style={{ fontSize: '0.82rem', color: 'var(--text-3)', lineHeight: 1.5 }}>{item.desc}</p>
</motion.div>
))}
</div>
</section>
{/* ── Value Proposition Cards ───────────────────────────────────────── */}
<section className="container" style={{ position: 'relative', zIndex: 1, marginBottom: '100px' }}>
<div className="grid-3" style={{ gap: '24px' }}>
<motion.div whileHover={{ scale: 1.02 }} className="glass" style={{ padding: '32px' }}>
<Target size={32} color="#3b82f6" style={{ marginBottom: '24px' }} />
<h3 style={{ marginBottom: '12px' }}>Intrinsic Valuation</h3>
<p style={{ fontSize: '0.95rem' }}>Isolate pure performance metrics from market noise to identify the true ceiling price of any asset.</p>
</motion.div>
<motion.div whileHover={{ scale: 1.02 }} className="glass" style={{ padding: '32px' }}>
<Crosshair size={32} color="#f5a623" style={{ marginBottom: '24px' }} />
<h3 style={{ marginBottom: '12px' }}>Live Market Pulse</h3>
<p style={{ fontSize: '0.95rem' }}>Real-time newsroom scraping for durability, form, and agent leverage to adjust valuations on the fly.</p>
</motion.div>
<motion.div whileHover={{ scale: 1.02 }} className="glass" style={{ padding: '32px' }}>
<ShieldCheck size={32} color="#22c55e" style={{ marginBottom: '24px' }} />
<h3 style={{ marginBottom: '12px' }}>Board-Ready Compliance</h3>
<p style={{ fontSize: '0.95rem' }}>Instantly calculate amortisation hits and ensure every bid stays within PSR & FFP safety zones.</p>
</motion.div>
</div>
</section>
{/* ── Enterprise CTA ────────────────────────────────────────────────── */}
<section className="container" style={{ position: 'relative', zIndex: 1, marginBottom: '80px' }}>
<motion.div
whileInView={{ opacity: 1, y: 0 }}
initial={{ opacity: 0, y: 40 }}
viewport={{ once: true }}
className="glass"
style={{
padding: '60px 48px', textAlign: 'center',
background: 'linear-gradient(135deg, rgba(34,197,94,0.08), rgba(59,130,246,0.1))',
borderColor: 'var(--glass-border-hi)',
}}
>
<h2 style={{ marginBottom: '16px', fontSize: '2.5rem' }}>Maximize your net spend.</h2>
<p style={{ marginBottom: '40px', color: 'var(--text-2)', fontSize: '1.1rem' }}>Join the elite recruitment departments using data to win the transfer window.</p>
<Link to="/estimate" className="btn btn-secondary btn-lg">
Start Free Evaluation <TrendingUp size={22} style={{ marginLeft: 10 }} />
</Link>
</motion.div>
</section>
</div>
)
}
|