> ## Documentation Index
> Fetch the complete documentation index at: https://academy.pathfindr.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Pathfindr Academy

> Together, we'll make AI part of what you do.

export const MeetExpertsSection = ({title = "Meet the experts"}) => {
  const experts = [{
    name: "Dawid Naude",
    title: "CEO & Founder",
    href: "https://www.linkedin.com/in/dawidnaude/",
    imageSrc: "/images/dawidPic.webp",
    imageAlt: "Dawid Naude",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Lindsay Page",
    title: "Director, AI Accelerator (Product)",
    href: "https://www.linkedin.com/in/lindsayxpage/",
    imageSrc: "/images/lindsayPic.webp",
    imageAlt: "Lindsay Page",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Laura Hatton",
    title: "Director, AI Accelerator (Customer)",
    href: "https://www.linkedin.com/in/laurahatton1/",
    imageSrc: "/images/lauraPic.webp",
    imageAlt: "Laura Hatton",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Eoin McDonnell",
    title: "Director, AI Execution & Business Operations",
    href: "https://www.linkedin.com/in/eoinjmcdonnell/",
    imageSrc: "/images/eoinPic.webp",
    imageAlt: "Eoin McDonnell",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Charlie Dillon",
    title: "AI Explorer",
    href: "https://www.linkedin.com/in/charlie-dillon-18190523b/",
    imageSrc: "/images/charliePic.webp",
    imageAlt: "Charlie Dillon",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Garrich Farrell Hardjojuwono",
    title: "AI Explorer",
    href: "https://www.linkedin.com/in/garrichfh/",
    imageSrc: "/images/garrichPic.webp",
    imageAlt: "Garrich Farrell Hardjojuwono",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Sophia Ng",
    title: "AI Trainer",
    href: "https://www.linkedin.com/in/sophiang113/",
    imageSrc: "/images/sophiaPic.webp",
    imageAlt: "Sophia Ng",
    width: 800,
    height: 1200,
    loading: "lazy"
  }, {
    name: "Hannah Goddard",
    title: "AI Adoption Enterprise Team Lead",
    href: "https://www.linkedin.com/in/hannah-goddard-424338134/",
    imageSrc: "/images/hannahPic.webp",
    imageAlt: "Hannah Goddard",
    width: 800,
    height: 1200,
    loading: "lazy"
  }, {
    name: "Anna McFadyen",
    title: "AI Client Success & Enablement Partner",
    href: "https://www.linkedin.com/in/anna-mcfadyen-1a3425181/",
    imageSrc: "/images/annaPic.webp",
    imageAlt: "Anna McFadyen",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Luke Dodunski",
    title: "AI Enablement Partner",
    href: "https://www.linkedin.com/in/luke-dodunski/",
    imageSrc: "/images/lukePic.webp",
    imageAlt: "Luke Dodunski",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Chris Hall",
    title: "AI Adoption Specialist",
    href: "https://www.linkedin.com/in/christopher-hall-5713681a5/",
    imageSrc: "/images/chrisPic.webp",
    imageAlt: "Chris Hall",
    width: 800,
    height: 1000,
    loading: "lazy"
  }, {
    name: "Shubham Pai",
    title: "AI Engineer",
    href: "https://www.linkedin.com/in/shubhamvpai/",
    imageSrc: "/images/shubhamPic.webp",
    imageAlt: "Shubham Pai",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Ashard Nizar",
    title: "AI Engineer",
    href: "https://www.linkedin.com/in/ashard-nizar/",
    imageSrc: "/images/ashardPic.webp",
    imageAlt: "Ashard Nizar",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Jack Low",
    title: "AI Innovation Lead",
    href: "https://www.linkedin.com/in/hellojacklow/",
    imageSrc: "/images/jackPic.webp",
    imageAlt: "Jack Low",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Shravan Sheth",
    title: "Head of AI Transformation",
    href: "https://www.linkedin.com/in/shravan-sheth-40047a17/",
    imageSrc: "/images/shravPic.webp",
    imageAlt: "Shravan Sheth",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Tim Gaul",
    title: "AI Development Manager & Architect",
    href: "https://www.linkedin.com/in/tgaul/",
    imageSrc: "/images/timPic.webp",
    imageAlt: "Tim Gaul",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Georgia Newton",
    title: "AI Solutions Lead",
    href: "https://www.linkedin.com/in/georgiaznewton/",
    imageSrc: "/images/georgiaPic.webp",
    imageAlt: "Georgia Newton",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Luka Janicijevic",
    title: "AI Solutions Lead",
    href: "https://www.linkedin.com/in/lukajanicijevic/",
    imageSrc: "/images/lukaPic.webp",
    imageAlt: "Luka Janicijevic",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Belinda Wall",
    title: "Head of Brand & Marketing",
    href: "https://www.linkedin.com/in/belindawall/",
    imageSrc: "/images/belindaPic.webp",
    imageAlt: "Belinda Wall",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Josh Solano",
    title: "Business Development Manager",
    href: "https://www.linkedin.com/in/josh-solano-b98aa1209/",
    imageSrc: "/images/joshPic.webp",
    imageAlt: "Josh Solano",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Rhona Maclean",
    title: "Executive Assistant",
    href: "https://www.linkedin.com/in/rhona-maclean-6172137/",
    imageSrc: "/images/rhonaPic.webp",
    imageAlt: "Rhona Maclean",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Ananya Salian",
    title: "AI Solutions Analyst",
    href: "https://www.linkedin.com/in/ananyasalian/",
    imageSrc: "/images/ananyaPic.webp",
    imageAlt: "Ananya Salian",
    width: 800,
    height: 800,
    loading: "lazy"
  }, {
    name: "Liam Nguyen",
    title: "AI Explorer",
    href: "https://www.linkedin.com/in/liam-nguyen-13ba74216/",
    imageSrc: "/images/liamPic.webp",
    imageAlt: "Liam Nguyen",
    width: 800,
    height: 800,
    loading: "lazy"
  }];
  return <div className="homepage-meet-experts">
      <div className="max-w-6xl mx-auto px-6 py-8">
        <h2 className="mb-6 text-xl font-semibold text-gray-900 dark:text-white" style={{
    fontFamily: '"Nicholas", Georgia, serif'
  }}>
          {title}
        </h2>

        <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
          {experts.map(expert => <a key={expert.name} href={expert.href} target="_blank" rel="noopener noreferrer" className="group block overflow-hidden rounded-2xl bg-white no-underline shadow-md transition-all duration-200 hover:-translate-y-1 hover:no-underline hover:shadow-xl dark:bg-gray-900">
              <div className="expert-image-frame h-44 w-full bg-slate-200 dark:bg-slate-700">
                <img src={expert.imageSrc} alt={expert.imageAlt} width={expert.width} height={expert.height} className="expert-image pointer-events-none h-full w-full select-none object-cover object-top" loading={expert.loading} decoding="async" draggable="false" onLoad={event => event.currentTarget.classList.add("is-loaded")} />
              </div>
              <div className="p-4">
                <h3 className="text-sm font-semibold text-gray-900 dark:text-white">{expert.name}</h3>
                {expert.title ? <p className="mt-1 text-xs leading-5 text-gray-600 dark:text-gray-300">{expert.title}</p> : null}
              </div>
            </a>)}
        </div>
      </div>
    </div>;
};

export const IntegratedHomepageSection = () => {
  const [articleHref, setArticleHref] = useState("/leadership-cohort/onboarding/promptLibrary");
  const [articleLabel, setArticleLabel] = useState("Leadership");
  const [articleTitle, setArticleTitle] = useState("Prompt library");
  const [articleDescription, setArticleDescription] = useState("Copy, paste, and adapt these prompts for your daily work.");
  useEffect(() => {
    const randomIndex = Math.floor(Math.random() * 6);
    if (randomIndex === 1) {
      setArticleHref("/driver/identifyingAGoodDriver");
      setArticleLabel("Accelerator");
      setArticleTitle("Identifying a good 'Driver'");
      setArticleDescription("The person inside your organisation who turns guidance into day-to-day change and gets things done.");
      return;
    }
    if (randomIndex === 2) {
      setArticleHref("/driver/identifyingAGoodChampion");
      setArticleLabel("Accelerator");
      setArticleTitle("Identifying a good 'Champion'");
      setArticleDescription("A guide for Sponsors and Drivers on selecting effective AI Champions.");
      return;
    }
    if (randomIndex === 3) {
      setArticleHref("/participant/aiForFunctions/humanResources");
      setArticleLabel("Deep dives");
      setArticleTitle("Human resources");
      setArticleDescription("Discover real uses of AI in Human Resources and get ideas for implementing it in your organisation.");
      return;
    }
    if (randomIndex === 4) {
      setArticleHref("/participant/aiForFunctions/customerOperations");
      setArticleLabel("Deep dives");
      setArticleTitle("Customer operations");
      setArticleDescription("Discover real uses of AI in Customer Operations and get ideas for implementing it in your organisation.");
      return;
    }
    if (randomIndex === 5) {
      setArticleHref("/participant/aiForFunctions/dataAnalytics");
      setArticleLabel("Deep dives");
      setArticleTitle("Data analytics");
      setArticleDescription("Discover real uses of AI in Data Analytics and get ideas for implementing it in your organisation.");
    }
  }, []);
  return <div className="integrated-homepage-section">
      <div className="max-w-6xl mx-auto px-6 py-8">
        <div className="hidden md:block">
          <div className="grid grid-cols-6 gap-4 mb-6">
            <h2 className="col-span-2 text-xl font-medium text-gray-900 dark:text-white" style={{
    fontFamily: '"Nicholas", Georgia, serif'
  }}>
              Discover articles
            </h2>
            <h2 className="col-span-2 text-xl font-medium text-gray-900 dark:text-white" style={{
    fontFamily: '"Nicholas", Georgia, serif'
  }}>
              Get started
            </h2>
            <h2 className="col-span-2 text-xl font-medium text-gray-900 dark:text-white" style={{
    fontFamily: '"Nicholas", Georgia, serif'
  }}>
              Learning paths
            </h2>
          </div>

          <div className="grid min-h-[304px] grid-cols-6 gap-4 items-stretch">
            <div className="col-span-2 flex">
              <a href={articleHref} className="group flex h-full w-full flex-col justify-between rounded-2xl p-5 text-white no-underline hover:no-underline hover:-translate-y-1 transition-all duration-200 shadow-[0_4px_20px_rgba(0,166,128,0.25)]" style={{
    background: 'linear-gradient(135deg, #00A680 0%, #00917a 50%, #007d69 100%)'
  }}>
                <div className="inline-flex rounded-full bg-white/20 px-3 py-1 text-xs font-medium">
                  {articleLabel}
                </div>
                  <div className="mt-3 text-left" style={{
    fontFamily: '"Nicholas", Georgia, serif',
    fontSize: '1.3rem',
    lineHeight: '1.2'
  }}>
                    {articleTitle}
                  </div>
                <p className="mt-3 text-sm leading-6 text-white/90">
                  {articleDescription}
                </p>
                <div className="mt-3 text-sm font-medium">Read article</div>
              </a>
            </div>

            <div className="col-span-2 grid h-full grid-rows-3 gap-4">
              <a href="/leadership-cohort/onboarding/introduction" className="group flex items-center justify-center rounded-2xl p-4 text-white no-underline hover:no-underline hover:-translate-y-1 transition-all duration-200 shadow-[0_4px_16px_rgba(0,0,0,0.15)]" style={{
    background: 'linear-gradient(135deg, #355C6D 0%, #4A7181 100%)'
  }}>
                <div className="text-center">
                  <div style={{
    fontFamily: '"Nicholas", Georgia, serif',
    fontSize: '1.25rem',
    lineHeight: '1.2'
  }}>
                    Leadership
                  </div>
                  <div className="mt-1 text-xs text-white/75">Become AI-powered leaders</div>
                </div>
              </a>

              <a href="/driver/gettingStarted/introduction" className="homepage-driver-card group flex items-center justify-center rounded-2xl p-4 text-white no-underline hover:no-underline hover:-translate-y-1 transition-all duration-200 shadow-[0_4px_16px_rgba(0,0,0,0.15)]" style={{
    background: 'linear-gradient(135deg, #0B1B2B 0%, #1a2d3d 100%)'
  }}>
                <div className="text-center">
                  <div style={{
    fontFamily: '"Nicholas", Georgia, serif',
    fontSize: '1.25rem',
    lineHeight: '1.2'
  }}>
                    Driver
                  </div>
                  <div className="mt-1 text-xs text-white/75">Manage AI onboarding</div>
                </div>
              </a>

              <a href="/participant/gettingStarted/introduction" className="group flex items-center justify-center rounded-2xl p-4 text-white no-underline hover:no-underline hover:-translate-y-1 transition-all duration-200 shadow-[0_4px_16px_rgba(0,0,0,0.15)]" style={{
    background: 'linear-gradient(135deg, #1e3a5f 0%, #2a4a6f 100%)'
  }}>
                <div className="text-center">
                  <div style={{
    fontFamily: '"Nicholas", Georgia, serif',
    fontSize: '1.25rem',
    lineHeight: '1.2'
  }}>
                    Participant
                  </div>
                  <div className="mt-1 text-xs text-white/75">Learn AI fundamentals</div>
                </div>
              </a>
            </div>

            <div className="col-span-2 grid h-full grid-rows-4 gap-3">
              <a href="/participant/gettingStarted/chatgptIntroduction" className="flex items-center justify-between rounded-xl px-4 py-2.5 text-white no-underline hover:no-underline hover:-translate-y-0.5 transition-all duration-200 shadow-[0_2px_12px_rgba(0,0,0,0.12)]" style={{
    background: 'linear-gradient(135deg, #0d4f4f 0%, #1a6060 100%)',
    fontFamily: '"Nicholas", Georgia, serif',
    fontSize: '1.1rem'
  }}>
                <span className="flex items-center gap-3">
                  <svg className="h-5 w-5 opacity-90" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.896zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681v6.722zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z" />
                  </svg>
                  <span>ChatGPT</span>
                </span>
                <span className="text-white/70">›</span>
              </a>
              <a href="/participant/gettingStarted/copilotIntroduction" className="flex items-center justify-between rounded-xl px-4 py-2.5 text-white no-underline hover:no-underline hover:-translate-y-0.5 transition-all duration-200 shadow-[0_2px_12px_rgba(0,0,0,0.12)]" style={{
    background: 'linear-gradient(135deg, #1e40af 0%, #2563eb 100%)',
    fontFamily: '"Nicholas", Georgia, serif',
    fontSize: '1.1rem'
  }}>
                <span className="flex items-center gap-3">
                  <svg className="h-5 w-5 opacity-90" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801" />
                  </svg>
                  <span>Copilot</span>
                </span>
                <span className="text-white/70">›</span>
              </a>
              <a href="/participant/gettingStarted/geminiIntroduction" className="flex items-center justify-between rounded-xl px-4 py-2.5 text-white no-underline hover:no-underline hover:-translate-y-0.5 transition-all duration-200 shadow-[0_2px_12px_rgba(0,0,0,0.12)]" style={{
    background: 'linear-gradient(135deg, #4f46e5 0%, #6366f1 100%)',
    fontFamily: '"Nicholas", Georgia, serif',
    fontSize: '1.1rem'
  }}>
                <span className="flex items-center gap-3">
                  <svg className="h-5 w-5 opacity-90" viewBox="0 0 64 64" fill="currentColor" aria-hidden="true">
                    <path d="M57.067 28.61c-4.931-2.122-9.245-5.034-12.945-8.732-3.697-3.697-6.609-8.013-8.732-12.944-.815-1.89-1.47-3.832-1.972-5.824A1.503 1.503 0 0032 0c-.671 0-1.255.459-1.419 1.11a47.077 47.077 0 01-1.972 5.824c-2.122 4.931-5.034 9.247-8.732 12.944-3.698 3.698-8.014 6.61-12.944 8.732a47.077 47.077 0 01-5.824 1.972A1.503 1.503 0 000 32c0 .671.458 1.255 1.109 1.419a47.077 47.077 0 015.824 1.972c4.93 2.122 9.246 5.034 12.944 8.731 3.698 3.698 6.61 8.014 8.732 12.945a47.077 47.077 0 011.972 5.824A1.503 1.503 0 0032 64c.671 0 1.255-.458 1.419-1.109a47.077 47.077 0 011.972-5.824c2.123-4.931 5.035-9.247 8.732-12.945 3.698-3.697 8.014-6.609 12.944-8.731a47.077 47.077 0 015.824-1.972A1.503 1.503 0 0064 32c0-.671-.458-1.255-1.109-1.419a47.077 47.077 0 01-5.824-1.972z" />
                  </svg>
                  <span>Gemini</span>
                </span>
                <span className="text-white/70">›</span>
              </a>
              <a href="/participant/gettingStarted/claudeIntroduction" className="flex items-center justify-between rounded-xl px-4 py-2.5 text-white no-underline hover:no-underline hover:-translate-y-0.5 transition-all duration-200 shadow-[0_2px_12px_rgba(0,0,0,0.12)]" style={{
    background: 'linear-gradient(135deg, #c2410c 0%, #dc6843 100%)',
    fontFamily: '"Nicholas", Georgia, serif',
    fontSize: '1.1rem'
  }}>
                <span className="flex items-center gap-3">
                  <svg className="h-5 w-5 opacity-90" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                    <path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z" />
                  </svg>
                  <span>Claude</span>
                </span>
                <span className="text-white/70">›</span>
              </a>
            </div>
          </div>
        </div>

        <div className="block md:hidden">
          <div className="mb-8">
            <h2 className="text-xl font-medium text-gray-900 dark:text-white mb-6" style={{
    fontFamily: '"Nicholas", Georgia, serif'
  }}>
              Discover articles
            </h2>
            <a href={articleHref} className="group block rounded-2xl p-6 text-white no-underline hover:no-underline hover:-translate-y-1 transition-all duration-200 shadow-[0_4px_20px_rgba(0,166,128,0.25)]" style={{
    background: 'linear-gradient(135deg, #00A680 0%, #00917a 50%, #007d69 100%)'
  }}>
              <div className="inline-flex rounded-full bg-white/20 px-3 py-1 text-xs font-medium">
                {articleLabel}
              </div>
              <div className="mt-4 text-left" style={{
    fontFamily: '"Nicholas", Georgia, serif',
    fontSize: '1.35rem',
    lineHeight: '1.2'
  }}>
                {articleTitle}
              </div>
              <p className="mt-3 text-sm leading-6 text-white/90">
                {articleDescription}
              </p>
            </a>
          </div>

          <div className="mb-8">
            <h2 className="text-xl font-medium text-gray-900 dark:text-white mb-6" style={{
    fontFamily: '"Nicholas", Georgia, serif'
  }}>
              Get started
            </h2>
            <div className="grid grid-cols-1 gap-4">
              <a href="/leadership-cohort/onboarding/introduction" className="flex min-h-[120px] items-center justify-center rounded-2xl p-5 text-white no-underline hover:no-underline transition-all duration-200 shadow-[0_4px_16px_rgba(0,0,0,0.15)]" style={{
    background: 'linear-gradient(135deg, #355C6D 0%, #4A7181 100%)'
  }}>
                <div className="text-center">
                  <div style={{
    fontFamily: '"Nicholas", Georgia, serif',
    fontSize: '1.1rem',
    lineHeight: '1.2'
  }}>Leadership</div>
                  <div className="mt-1 text-xs text-white/75">Become AI-powered leaders</div>
                </div>
              </a>
              <a href="/driver/gettingStarted/introduction" className="homepage-driver-card flex min-h-[120px] items-center justify-center rounded-2xl p-5 text-white no-underline hover:no-underline transition-all duration-200 shadow-[0_4px_16px_rgba(0,0,0,0.15)]" style={{
    background: 'linear-gradient(135deg, #0B1B2B 0%, #1a2d3d 100%)'
  }}>
                <div className="text-center">
                  <div style={{
    fontFamily: '"Nicholas", Georgia, serif',
    fontSize: '1.1rem',
    lineHeight: '1.2'
  }}>Driver</div>
                  <div className="mt-1 text-xs text-white/75">Manage AI onboarding</div>
                </div>
              </a>
              <a href="/participant/gettingStarted/introduction" className="flex min-h-[120px] items-center justify-center rounded-2xl p-5 text-white no-underline hover:no-underline transition-all duration-200 shadow-[0_4px_16px_rgba(0,0,0,0.15)]" style={{
    background: 'linear-gradient(135deg, #1e3a5f 0%, #2a4a6f 100%)'
  }}>
                <div className="text-center">
                  <div style={{
    fontFamily: '"Nicholas", Georgia, serif',
    fontSize: '1.1rem',
    lineHeight: '1.2'
  }}>Participant</div>
                  <div className="mt-1 text-xs text-white/75">Learn AI fundamentals</div>
                </div>
              </a>
            </div>
          </div>

          <div>
            <h2 className="text-xl font-medium text-gray-900 dark:text-white mb-6" style={{
    fontFamily: '"Nicholas", Georgia, serif'
  }}>
              Learning paths
            </h2>
            <div className="grid grid-cols-2 gap-3">
              <a href="/participant/gettingStarted/chatgptIntroduction" className="flex min-h-[100px] items-center justify-between rounded-xl px-4 py-4 text-white no-underline hover:no-underline transition-all duration-200 shadow-[0_2px_12px_rgba(0,0,0,0.12)]" style={{
    background: 'linear-gradient(135deg, #0d4f4f 0%, #1a6060 100%)',
    fontFamily: '"Nicholas", Georgia, serif',
    fontSize: '1.15rem'
  }}>
                <span className="flex items-center gap-3">
                  <svg className="h-5 w-5 opacity-90" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.896zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681v6.722zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z" />
                  </svg>
                  <span>ChatGPT</span>
                </span>
                <span className="text-white/70">›</span>
              </a>
              <a href="/participant/gettingStarted/copilotIntroduction" className="flex min-h-[100px] items-center justify-between rounded-xl px-4 py-4 text-white no-underline hover:no-underline transition-all duration-200 shadow-[0_2px_12px_rgba(0,0,0,0.12)]" style={{
    background: 'linear-gradient(135deg, #1e40af 0%, #2563eb 100%)',
    fontFamily: '"Nicholas", Georgia, serif',
    fontSize: '1.15rem'
  }}>
                <span className="flex items-center gap-3">
                  <svg className="h-5 w-5 opacity-90" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801" />
                  </svg>
                  <span>Copilot</span>
                </span>
                <span className="text-white/70">›</span>
              </a>
              <a href="/participant/gettingStarted/geminiIntroduction" className="flex min-h-[100px] items-center justify-between rounded-xl px-4 py-4 text-white no-underline hover:no-underline transition-all duration-200 shadow-[0_2px_12px_rgba(0,0,0,0.12)]" style={{
    background: 'linear-gradient(135deg, #4f46e5 0%, #6366f1 100%)',
    fontFamily: '"Nicholas", Georgia, serif',
    fontSize: '1.15rem'
  }}>
                <span className="flex items-center gap-3">
                  <svg className="h-5 w-5 opacity-90" viewBox="0 0 64 64" fill="currentColor" aria-hidden="true">
                    <path d="M57.067 28.61c-4.931-2.122-9.245-5.034-12.945-8.732-3.697-3.697-6.609-8.013-8.732-12.944-.815-1.89-1.47-3.832-1.972-5.824A1.503 1.503 0 0032 0c-.671 0-1.255.459-1.419 1.11a47.077 47.077 0 01-1.972 5.824c-2.122 4.931-5.034 9.247-8.732 12.944-3.698 3.698-8.014 6.61-12.944 8.732a47.077 47.077 0 01-5.824 1.972A1.503 1.503 0 000 32c0 .671.458 1.255 1.109 1.419a47.077 47.077 0 015.824 1.972c4.93 2.122 9.246 5.034 12.944 8.731 3.698 3.698 6.61 8.014 8.732 12.945a47.077 47.077 0 011.972 5.824A1.503 1.503 0 0032 64c.671 0 1.255-.458 1.419-1.109a47.077 47.077 0 011.972-5.824c2.123-4.931 5.035-9.247 8.732-12.945 3.698-3.697 8.014-6.609 12.944-8.731a47.077 47.077 0 015.824-1.972A1.503 1.503 0 0064 32c0-.671-.458-1.255-1.109-1.419a47.077 47.077 0 01-5.824-1.972z" />
                  </svg>
                  <span>Gemini</span>
                </span>
                <span className="text-white/70">›</span>
              </a>
              <a href="/participant/gettingStarted/claudeIntroduction" className="flex min-h-[100px] items-center justify-between rounded-xl px-4 py-4 text-white no-underline hover:no-underline transition-all duration-200 shadow-[0_2px_12px_rgba(0,0,0,0.12)]" style={{
    background: 'linear-gradient(135deg, #c2410c 0%, #dc6843 100%)',
    fontFamily: '"Nicholas", Georgia, serif',
    fontSize: '1.15rem'
  }}>
                <span className="flex items-center gap-3">
                  <svg className="h-5 w-5 opacity-90" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                    <path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z" />
                  </svg>
                  <span>Claude</span>
                </span>
                <span className="text-white/70">›</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const HeroSection = ({subtitle = "Together, we'll make AI part of what you do."}) => {
  const heroTitleStyle = {
    color: "#f2faf7",
    WebkitTextFillColor: "#f2faf7"
  };
  const heroSubtitleStyle = {
    fontFamily: "Roboto, sans-serif",
    fontWeight: 400,
    color: "#f2faf7",
    WebkitTextFillColor: "#f2faf7"
  };
  return <div className="homepage-hero">
      <div className="max-w-6xl mx-auto px-6 py-4">
        <div className="homepage-hero-panel rounded-2xl p-6 md:p-8 text-center relative overflow-hidden">
          <div className="relative z-10">
            <div className="homepage-hero-rotator homepage-hero-title text-2xl md:text-3xl mb-2" style={{
    minHeight: "2.5rem",
    fontFamily: '"Nicholas", Georgia, serif',
    letterSpacing: "-0.02em",
    color: "#f2faf7",
    WebkitTextFillColor: "#f2faf7"
  }}>
              <span style={heroTitleStyle}>Let's get started</span>
              <span style={heroTitleStyle}>Learn something today</span>
              <span style={heroTitleStyle}>Build confidence with AI</span>
              <span style={heroTitleStyle}>Explore your next step</span>
            </div>
            <p className="homepage-hero-subtitle text-base md:text-lg max-w-2xl mx-auto" style={heroSubtitleStyle}>
              {subtitle}
            </p>
          </div>
        </div>
      </div>
    </div>;
};

<div className="homepage-wrapper">
  <HeroSection subtitle="Together, we'll make AI part of what you do." />

  <IntegratedHomepageSection />

  <MeetExpertsSection />
</div>