Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
import React from 'react';
import { motion } from 'framer-motion';
import { ArrowRight, Mic, TrendingUp, Brain, BadgePoundSterling, CheckCircle, Trophy, Users, BookOpen, Target, Star } from 'lucide-react';
export default function JimFrancisLandingPage() {
const outcomes = [
{ icon: TrendingUp, title: 'Business Growth', text: 'Build predictable revenue, stronger offers, and systems that scale.' },
{ icon: Brain, title: 'Influence & Sales', text: 'Master persuasion, language, closing, and decision psychology.' },
{ icon: Mic, title: 'Speaker Training', text: 'Turn talks, webinars, and presentations into sales machines.' },
{ icon: BadgePoundSterling, title: 'Financial Education', text: 'Learn wealth principles, cash flow, trading, leverage, and compounding.' },
];
const credibility = [
'Trained 300+ professional speakers',
'Built 15+ seminar and education businesses',
'Took a company from £0 to £108M in under 4 years',
'Trained 3,000+ sales professionals',
'Worked with major seminar and wealth education brands',
'Author, trainer, speaker, entrepreneur and influence strategist',
];
const learn = [
'Build instant rapport and trust',
'Create subconscious agreement before the close',
'Use stories that sell, not just entertain',
'Remove objections before they appear',
'Build high-ticket offers and funnels',
'Create cash flow through skills, systems and strategy',
];
return (
<div className="min-h-screen bg-black text-white overflow-hidden">
<section className="relative px-6 py-20 md:py-28">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,#6b4a12_0%,#111_40%,#000_75%)] opacity-80" />
<div className="absolute inset-0 opacity-20 bg-[linear-gradient(120deg,transparent,rgba(255,215,0,.25),transparent)]" />
<div className="relative max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
<motion.div initial={{ opacity: 0, y: 25 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7 }}>
<div className="inline-flex items-center gap-2 border border-yellow-500/40 rounded-full px-4 py-2 text-sm text-yellow-300 mb-6">
<Star size={16} /> Business • Influence • Wealth • Speaking
</div>
<h1 className="text-5xl md:text-7xl font-black leading-tight tracking-tight">
One Message.<br />One System.<br />
<span className="text-yellow-400">Real Results.</span>
</h1>
<p className="mt-6 text-xl text-zinc-300 max-w-xl">
Learn how to grow your business, master influence, sell from stage, and build wealth with proven strategies from Jim Francis.
</p>
<div className="mt-8 flex flex-col sm:flex-row gap-4">
<button className="bg-yellow-500 hover:bg-yellow-400 text-black font-bold rounded-2xl px-7 py-4 flex items-center justify-center gap-2 shadow-lg shadow-yellow-500/20">
Get Started Today <ArrowRight size={20} />
</button>
<button className="border border-yellow-500/50 rounded-2xl px-7 py-4 font-semibold text-yellow-300 hover:bg-yellow-500/10">
See What You’ll Learn
</button>
</div>
</motion.div>
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.8 }} className="relative">
<div className="rounded-[2rem] border border-yellow-500/30 bg-zinc-950/80 p-8 shadow-2xl shadow-yellow-900/30">
<div className="text-yellow-400 text-2xl font-black mb-4">“A few words, a few stories, a few techniques… can be worth millions.”</div>
<div className="grid grid-cols-2 gap-4 text-sm">
<div className="rounded-2xl bg-black/60 p-5 border border-yellow-500/20"><Trophy className="text-yellow-400 mb-3" />£108M Growth Story</div>
<div className="rounded-2xl bg-black/60 p-5 border border-yellow-500/20"><Users className="text-yellow-400 mb-3" />300+ Speakers Trained</div>
<div className="rounded-2xl bg-black/60 p-5 border border-yellow-500/20"><Target className="text-yellow-400 mb-3" />20–33% Close Potential</div>
<div className="rounded-2xl bg-black/60 p-5 border border-yellow-500/20"><BookOpen className="text-yellow-400 mb-3" />Proven Systems</div>
</div>
</div>
</motion.div>
</div>
</section>
<section className="px-6 py-16 bg-zinc-950">
<div className="max-w-7xl mx-auto">
<h2 className="text-4xl md:text-5xl font-black text-center mb-4">What You Get</h2>
<p className="text-center text-zinc-400 mb-10">Powerful outcomes for entrepreneurs, speakers, coaches and business owners.</p>
<div className="grid md:grid-cols-4 gap-6">
{outcomes.map((item, i) => {
const Icon = item.icon;
return (
<div key={i} className="rounded-3xl border border-yellow-500/20 bg-black p-6 hover:border-yellow-400 transition">
<Icon className="text-yellow-400 mb-4" size={34} />
<h3 className="text-xl font-bold mb-2">{item.title}</h3>
<p className="text-zinc-400">{item.text}</p>
</div>
);
})}
</div>
</div>
</section>
<section className="px-6 py-16">
<div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-10">
<div className="rounded-3xl bg-zinc-950 border border-yellow-500/20 p-8">
<h2 className="text-3xl font-black mb-6 text-yellow-400">Credibility That Counts</h2>
<div className="space-y-4">
{credibility.map((x, i) => (
<div key={i} className="flex gap-3"><CheckCircle className="text-yellow-400 shrink-0" /> <span>{x}</span></div>
))}
</div>
</div>
<div className="rounded-3xl bg-zinc-950 border border-yellow-500/20 p-8">
<h2 className="text-3xl font-black mb-6 text-yellow-400">The System You Learn</h2>
<div className="space-y-4">
{learn.map((x, i) => (
<div key={i} className="flex gap-3"><CheckCircle className="text-yellow-400 shrink-0" /> <span>{x}</span></div>
))}
</div>
</div>
</div>
</section>
<section className="px-6 py-20 bg-gradient-to-b from-zinc-950 to-black text-center">
<div className="max-w-4xl mx-auto">
<h2 className="text-4xl md:text-6xl font-black mb-6">The Real Cost Is Not The Price.</h2>
<p className="text-xl text-zinc-300 mb-8">
It’s the sales you never make, the opportunities you miss, and the income you leave on the table.
</p>
<button className="bg-yellow-500 hover:bg-yellow-400 text-black font-black rounded-2xl px-10 py-5 text-lg inline-flex items-center gap-2">
Design Your Life. Build Your Income. <ArrowRight />
</button>
</div>
</section>
</div>
);
}
Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.