Lovable – Header HTML

<header class="pfsa-header">

  <!-- Top Bar -->

  <div class="pfsa-topbar">

    <div class="pfsa-topbar-inner">

      <div class="pfsa-topbar-left">

        <a href="/login" class="pfsa-topbar-link">

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>

          LOGIN

        </a>

        <a href="/register" class="pfsa-topbar-link">

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>

          REGISTRATION

        </a>

      </div>

      <div class="pfsa-topbar-right">

        <a href="https://facebook.com/thepfsa" class="pfsa-social-link" target="_blank">

          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>

        </a>

        <a href="https://twitter.com/thaborapf" class="pfsa-social-link" target="_blank">

          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>

        </a>

        <a href="https://instagram.com/thepfsa" class="pfsa-social-link" target="_blank">

          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>

        </a>

        <a href="https://linkedin.com/company/thepfsa" class="pfsa-social-link" target="_blank">

          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>

        </a>

      </div>

    </div>

  </div>

  <!-- Main Header -->

  <div class="pfsa-main-header">

    <div class="pfsa-header-inner">

      <a href="/" class="pfsa-logo">

        <img src="https://staging4.thepfsa.co.uk/wp-content/uploads/2025/04/PFSA_Wide-Lockup-04.png" alt="PFSA - Professional Football Scouts Association">

      </a>

      <nav class="pfsa-nav">

        <!-- THE PFSA -->

        <div class="pfsa-nav-item">

          <button class="pfsa-nav-btn">

            THE PFSA

            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>

          </button>

          <div class="pfsa-mega-menu">

            <div class="pfsa-mega-grid cols-3">

              <div class="pfsa-mega-column">

                <h3>About Us</h3>

                <ul class="pfsa-mega-links">

                  <li><a href="/about" class="pfsa-mega-link">Our Story</a></li>

                  <li><a href="/team" class="pfsa-mega-link">Our Team</a></li>

                  <li><a href="/partners" class="pfsa-mega-link">Partners</a></li>

                </ul>

              </div>

              <div class="pfsa-mega-column">

                <h3>Community</h3>

                <ul class="pfsa-mega-links">

                  <li><a href="/news" class="pfsa-mega-link">News & Updates</a></li>

                  <li><a href="/success-stories" class="pfsa-mega-link">Success Stories</a></li>

                  <li><a href="/testimonials" class="pfsa-mega-link">Testimonials</a></li>

                  <li><a href="/faq" class="pfsa-mega-link">FAQ</a></li>

                </ul>

              </div>

              <div class="pfsa-mega-column">

                <h3>Connect</h3>

                <ul class="pfsa-mega-links">

                  <li><a href="/contact" class="pfsa-mega-link">Contact Us</a></li>

                  <li><a href="/careers" class="pfsa-mega-link">Careers</a></li>

                  <li><a href="/press" class="pfsa-mega-link">Press & Media</a></li>

                </ul>

              </div>

            </div>

          </div>

        </div>

        <!-- MEMBERSHIP -->

        <div class="pfsa-nav-item">

          <button class="pfsa-nav-btn">

            MEMBERSHIP

            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>

          </button>

          <div class="pfsa-mega-menu">

            <div class="pfsa-mega-grid cols-2">

              <div class="pfsa-mega-column">

                <h3>Membership Types</h3>

                <ul class="pfsa-mega-links">

                  <li><a href="/membership/scout" class="pfsa-mega-link featured">Scout Membership</a></li>

                  <li><a href="/membership/club" class="pfsa-mega-link">Club Membership</a></li>

                  <li><a href="/membership/student" class="pfsa-mega-link">Student Membership</a></li>

                </ul>

              </div>

              <div class="pfsa-mega-column">

                <h3>Benefits</h3>

                <ul class="pfsa-mega-links">

                  <li><a href="/benefits/network" class="pfsa-mega-link">Network Access</a></li>

                  <li><a href="/benefits/events" class="pfsa-mega-link">Industry Events</a></li>

                  <li><a href="/benefits/content" class="pfsa-mega-link">Exclusive Content</a></li>

                  <li><a href="/benefits/certification" class="pfsa-mega-link">Certification</a></li>

                </ul>

              </div>

            </div>

          </div>

        </div>

        <!-- SCOUTING COURSES -->

        <div class="pfsa-nav-item">

          <button class="pfsa-nav-btn">

            SCOUTING COURSES

            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>

          </button>

          <div class="pfsa-mega-menu">

            <div class="pfsa-mega-grid cols-4">

              <div class="pfsa-mega-column">

                <h3>Entry/Intermediate</h3>

                <ul class="pfsa-mega-links">

                  <li><a href="/courses/introduction-football-scouting" class="pfsa-mega-link featured">FREE | Introduction Into Football Scouting</a></li>

                  <li><a href="/courses/level-1-talent-identification" class="pfsa-mega-link">Level 1 Talent Identification</a></li>

                  <li><a href="/courses/level-1-opposition-analysis" class="pfsa-mega-link">Level 1 Opposition Analysis</a></li>

                  <li><a href="/courses/level-1-technical-scouting" class="pfsa-mega-link">Level 1 Technical Scouting</a></li>

                  <li><a href="/courses/bundle" class="pfsa-mega-link featured">BUNDLE UP AND SAVE!</a></li>

                  <li><a href="/courses/entry-intermediate" class="pfsa-mega-link">Browse All</a></li>

                </ul>

              </div>

              <div class="pfsa-mega-column">

                <h3>Intermediate/Advanced</h3>

                <ul class="pfsa-mega-links">

                  <li><a href="/courses/level-2-talent-identification" class="pfsa-mega-link">Level 2 Talent Identification</a></li>

                  <li><a href="/courses/level-2-opposition-analysis" class="pfsa-mega-link">Level 2 Opposition Analysis</a></li>

                  <li><a href="/courses/level-2-technical-scouting" class="pfsa-mega-link">Level 2 Technical Scouting</a></li>

                  <li><a href="/courses/football-scouting-programme" class="pfsa-mega-link">PFSA Football Scouting Programme</a></li>

                  <li><a href="/courses/intermediate-advanced" class="pfsa-mega-link">Browse All</a></li>

                </ul>

              </div>

              <div class="pfsa-mega-column">

                <h3>Womens Football</h3>

                <ul class="pfsa-mega-links">

                  <li><a href="/courses/womens-level-2-talent-identification" class="pfsa-mega-link">Level 2 Talent ID in Womens Football</a></li>

                  <li><a href="/courses/womens-analysis-recruitment" class="pfsa-mega-link">Analysis & Recruitment</a></li>

                </ul>

              </div>

              <div class="pfsa-mega-column">

                <h3>Explore</h3>

                <ul class="pfsa-mega-links">

                  <li><a href="/webinars-workshops" class="pfsa-mega-link">PFSA Webinars & Workshops</a></li>

                  <li><a href="/careers" class="pfsa-mega-link">Careers</a></li>

                  <li><a href="/performance-analysis" class="pfsa-mega-link">Performance Analysis</a></li>

                </ul>

              </div>

            </div>

          </div>

        </div>

        <!-- SCOUTING NETWORK -->

        <div class="pfsa-nav-item">

          <button class="pfsa-nav-btn">

            SCOUTING NETWORK

            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>

          </button>

          <div class="pfsa-mega-menu">

            <div class="pfsa-mega-grid cols-2">

              <div class="pfsa-mega-column">

                <h3>For Scouts</h3>

                <ul class="pfsa-mega-links">

                  <li><a href="/scouting" class="pfsa-mega-link featured">Register as a Scout</a></li>

                  <li><a href="/dashboard" class="pfsa-mega-link">Scout Dashboard</a></li>

                  <li><a href="/assignments" class="pfsa-mega-link">Assignment Portal</a></li>

                  <li><a href="/coverage" class="pfsa-mega-link">Coverage Map</a></li>

                </ul>

              </div>

              <div class="pfsa-mega-column">

                <h3>For Clubs</h3>

                <ul class="pfsa-mega-links">

                  <li><a href="/find-scout" class="pfsa-mega-link">Find a Scout</a></li>

                  <li><a href="/request" class="pfsa-mega-link">Request Coverage</a></li>

                  <li><a href="/reports" class="pfsa-mega-link">Report Library</a></li>

                </ul>

              </div>

            </div>

          </div>

        </div>

        <!-- FOOTBALL TRIALS -->

        <div class="pfsa-nav-item">

          <button class="pfsa-nav-btn">

            FOOTBALL TRIALS

            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>

          </button>

          <div class="pfsa-mega-menu">

            <div class="pfsa-mega-grid cols-2">

              <div class="pfsa-mega-column">

                <h3>Upcoming Trials</h3>

                <ul class="pfsa-mega-links">

                  <li><a href="/trials" class="pfsa-mega-link featured">View All Trials</a></li>

                  <li><a href="/trials/locations" class="pfsa-mega-link">Trial Locations</a></li>

                  <li><a href="/trials/age-groups" class="pfsa-mega-link">Age Groups</a></li>

                </ul>

              </div>

              <div class="pfsa-mega-column">

                <h3>Information</h3>

                <ul class="pfsa-mega-links">

                  <li><a href="/trials/how-it-works" class="pfsa-mega-link">How Trials Work</a></li>

                  <li><a href="/trials/preparation" class="pfsa-mega-link">What to Expect</a></li>

                  <li><a href="/trials/success" class="pfsa-mega-link">Success Stories</a></li>

                </ul>

              </div>

            </div>

          </div>

        </div>

        <!-- MORE -->

        <div class="pfsa-nav-item">

          <button class="pfsa-nav-btn">

            MORE

            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>

          </button>

          <div class="pfsa-mega-menu">

            <div class="pfsa-mega-grid cols-2">

              <div class="pfsa-mega-column">

                <h3>Resources</h3>

                <ul class="pfsa-mega-links">

                  <li><a href="/blog" class="pfsa-mega-link">Blog</a></li>

                  <li><a href="/videos" class="pfsa-mega-link">Video Library</a></li>

                  <li><a href="/downloads" class="pfsa-mega-link">Downloads</a></li>

                </ul>

              </div>

              <div class="pfsa-mega-column">

                <h3>Support</h3>

                <ul class="pfsa-mega-links">

                  <li><a href="/help" class="pfsa-mega-link">Help Centre</a></li>

                  <li><a href="/contact" class="pfsa-mega-link">Contact Support</a></li>

                </ul>

              </div>

            </div>

          </div>

        </div>

      </nav>

      <a href="/scouting" class="pfsa-cta">Become a Scout</a>

      <button class="pfsa-mobile-btn" onclick="openPFSAMobileMenu()">

        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>

      </button>

    </div>

  </div>

</header>

<!-- Mobile Menu -->

<div class="pfsa-mobile-overlay" onclick="closePFSAMobileMenu()"></div>

<div class="pfsa-mobile-menu">

  <div class="pfsa-mobile-header">

    <img src="https://staging4.thepfsa.co.uk/wp-content/uploads/2025/04/PFSA_Wide-Lockup-04.png" alt="PFSA" style="height: 32px;">

    <button class="pfsa-mobile-close" onclick="closePFSAMobileMenu()">

      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" x2="6" y1="6" y2="18"/><line x1="6" x2="18" y1="6" y2="18"/></svg>

    </button>

  </div>

  <nav class="pfsa-mobile-nav">

    <div class="pfsa-mobile-item">

      <button class="pfsa-mobile-item-btn" onclick="toggleMobileSubmenu(this)">

        THE PFSA

        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>

      </button>

      <div class="pfsa-mobile-submenu">

        <a href="/about" class="pfsa-mobile-sublink">Our Story</a>

        <a href="/team" class="pfsa-mobile-sublink">Our Team</a>

        <a href="/partners" class="pfsa-mobile-sublink">Partners</a>

        <a href="/news" class="pfsa-mobile-sublink">News & Updates</a>

        <a href="/contact" class="pfsa-mobile-sublink">Contact Us</a>

      </div>

    </div>

    <div class="pfsa-mobile-item">

      <button class="pfsa-mobile-item-btn" onclick="toggleMobileSubmenu(this)">

        MEMBERSHIP

        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>

      </button>

      <div class="pfsa-mobile-submenu">

        <a href="/membership/scout" class="pfsa-mobile-sublink">Scout Membership</a>

        <a href="/membership/club" class="pfsa-mobile-sublink">Club Membership</a>

        <a href="/membership/student" class="pfsa-mobile-sublink">Student Membership</a>

      </div>

    </div>

    <div class="pfsa-mobile-item">

      <button class="pfsa-mobile-item-btn" onclick="toggleMobileSubmenu(this)">

        SCOUTING COURSES

        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>

      </button>

      <div class="pfsa-mobile-submenu">

        <a href="/courses/introduction-football-scouting" class="pfsa-mobile-sublink">FREE | Introduction Into Football Scouting</a>

        <a href="/courses/level-1-talent-identification" class="pfsa-mobile-sublink">Level 1 Talent Identification</a>

        <a href="/courses/entry-intermediate" class="pfsa-mobile-sublink">Browse All Entry/Intermediate</a>

        <a href="/courses/intermediate-advanced" class="pfsa-mobile-sublink">Browse All Advanced</a>

      </div>

    </div>

    <div class="pfsa-mobile-item">

      <button class="pfsa-mobile-item-btn" onclick="toggleMobileSubmenu(this)">

        SCOUTING NETWORK

        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>

      </button>

      <div class="pfsa-mobile-submenu">

        <a href="/scouting" class="pfsa-mobile-sublink">Register as a Scout</a>

        <a href="/dashboard" class="pfsa-mobile-sublink">Scout Dashboard</a>

        <a href="/find-scout" class="pfsa-mobile-sublink">Find a Scout</a>

      </div>

    </div>

    <div class="pfsa-mobile-item">

      <button class="pfsa-mobile-item-btn" onclick="toggleMobileSubmenu(this)">

        FOOTBALL TRIALS

        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>

      </button>

      <div class="pfsa-mobile-submenu">

        <a href="/trials" class="pfsa-mobile-sublink">View All Trials</a>

        <a href="/trials/locations" class="pfsa-mobile-sublink">Trial Locations</a>

        <a href="/trials/how-it-works" class="pfsa-mobile-sublink">How Trials Work</a>

      </div>

    </div>

    <div class="pfsa-mobile-item">

      <button class="pfsa-mobile-item-btn" onclick="toggleMobileSubmenu(this)">

        MORE

        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>

      </button>

      <div class="pfsa-mobile-submenu">

        <a href="/blog" class="pfsa-mobile-sublink">Blog</a>

        <a href="/videos" class="pfsa-mobile-sublink">Video Library</a>

        <a href="/help" class="pfsa-mobile-sublink">Help Centre</a>

      </div>

    </div>

  </nav>

  <a href="/scouting" class="pfsa-mobile-cta">Become a Scout</a>

</div>