Hello world!

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>
  );
}