Newsroom Layout with Featured Articles Grid

<div class="md:pt-2 max-w-5xl mr-auto ml-auto pt-24 pr-6 pb-20 pl-6">
  <!-- Header -->
  <nav class="flex md:px-12 md:py-8 z-50 pt-6 pr-6 pb-6 pl-6 relative items-center justify-between">
    <!-- Logo -->
    <div class="flex items-center gap-2"></div>

    <!-- Desktop Menu -->
    <div
      class="hidden shadow-black/20 md:flex bg-gradient-to-br from-white/10 to-white/0 rounded-full pt-1 pr-1 pb-1 pl-1 shadow-lg backdrop-blur-md gap-x-1 gap-y-1 items-center"
      style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); --border-radius-before: 9999px">
      <a href="/home"
        class="transition-all text-sm font-medium text-white bg-white/10 rounded-full pt-1.5 pr-4 pb-1.5 pl-4 shadow-sm"
        style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); --border-radius-before: 9999px">
        Home
      </a>
      <a href="/newsroom"
        class="hover:text-white transition-colors text-sm font-medium text-zinc-400 pt-1.5 pr-4 pb-1.5 pl-4">
        Newsroom
      </a>
      <a href="/about"
        class="hover:text-white transition-colors text-sm font-medium text-zinc-400 pt-1.5 pr-4 pb-1.5 pl-4">
        About
      </a>
      <a href="/faq"
        class="hover:text-white transition-colors text-sm font-medium text-zinc-400 pt-1.5 pr-4 pb-1.5 pl-4">
        FAQ
      </a>
    </div>

    <!-- CTA -->
    <button class="hidden sm:flex hover:from-blue-500 hover:to-blue-600 hover:shadow-[0_0_30px_rgba(59,130,246,0.5)] transition-all flex cursor-pointer text-sm font-medium text-white bg-gradient-to-b from-blue-600 to-blue-700 rounded-full pt-2.5 pr-5 pb-2.5 pl-5 shadow-[0px_0px_0px_1px_rgba(37,99,235,1),inset_0_1px_0_rgba(255,255,255,0.2)] backdrop-blur-sm gap-x-2 gap-y-x-2 items-center" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); --border-radius-before: 9999px" onclick="window.location.href='/home';window.location.href='/contact';window.location.href='/contact';window.location.href='/contact'" role="button">
            <span class="text-sm font-medium text-white tracking-tight">
              Contact Us
            </span>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4 text-blue-100">
              <path d="M5 12h14" class=""></path>
              <path d="m12 5 7 7-7 7" class=""></path>
            </svg>
          </button>

    <!-- Mobile Menu Icon -->
    <button class="md:hidden text-zinc-400 hover:text-white">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="menu" class="lucide lucide-menu w-6 h-6">
              <path d="M4 5h16" class=""></path>
              <path d="M4 12h16" class=""></path>
              <path d="M4 19h16" class=""></path>
            </svg>
          </button>
  </nav>
  <header class="flex flex-col md:flex-row md:items-end animate-fade-up mb-16 gap-x-6 gap-y-6 justify-between">
    <div class="">
      <div class="inline-flex items-center gap-2 rounded-full border border-blue-500/20 bg-blue-500/10 px-3 py-1 mb-6">
        <span class="relative flex h-2 w-2">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
        </span>
        <span class="uppercase text-[10px] font-semibold text-blue-300 tracking-wide">
                Newsroom
              </span>
      </div>
      <h1 class="md:text-5xl leading-[1.1] text-4xl font-medium text-white tracking-tight">
        <span class="bg-clip-text text-transparent bg-gradient-to-r from-zinc-200 to-zinc-500">
                Latest News
              </span>
        <br class="hidden md:block">
      </h1>
    </div>

    <div class="flex flex-col sm:flex-row items-center gap-3 w-full md:w-auto">
      <!-- Search Input -->
      <div class="relative w-full sm:w-64 group">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-search text-zinc-500 group-focus-within:text-blue-400 transition-colors">
            <circle cx="11" cy="11" r="8" class=""></circle>
            <path d="m21 21-4.3-4.3" class=""></path>
          </svg>
        </div>
        <input type="text" class="block w-full pl-9 pr-3 py-2 bg-zinc-900/50 border border-white/10 rounded-full text-xs font-medium text-white placeholder-zinc-500 focus:outline-none focus:border-white/20 focus:ring-1 focus:ring-white/20 focus:bg-zinc-900 transition-all hover:border-white/20 hover:bg-zinc-900/80" placeholder="Search insights...">
      </div>

      <!-- Controls -->
      <div class="flex items-center gap-2 w-full sm:w-auto">
        <button class="flex-1 sm:flex-none flex items-center justify-center gap-2 px-4 py-2 bg-zinc-900/50 border border-white/10 rounded-full text-xs font-medium text-zinc-400 hover:text-white hover:border-white/20 hover:bg-zinc-800 transition-all">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-filter">
                  <path d="M3 6h18" class=""></path>
                  <path d="M7 12h10" class=""></path>
                  <path d="M10 18h4" class=""></path>
                </svg>
                <span class="">Filter</span>
              </button>

        <div class="relative group flex-1 sm:flex-none">
          <button class="w-full flex items-center justify-center gap-2 px-4 py-2 bg-zinc-900/50 border border-white/10 rounded-full text-xs font-medium text-zinc-400 hover:text-white hover:border-white/20 hover:bg-zinc-800 transition-all">
                  <span class="">Latest</span>
                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14" viewBox="0 0 24 24" data-icon="lucide:chevron-down" data-width="14" class="iconify iconify--lucide">
                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m6 9l6 6l6-6" class=""></path>
                  </svg>
                </button>
        </div>
      </div>
    </div>
  </header>

  <!-- Featured Article -->
  <article
    class="spotlight-card relative group rounded-3xl bg-zinc-900/40 border border-white/10 overflow-hidden mb-16 animate-fade-up delay-100"
    style="--mouse-x: 870.0142211914062px; --mouse-y: -105.6363525390625px;">
    <div class="grid md:grid-cols-2 gap-0 cursor-pointer gap-x-0 gap-y-0" onclick="window.location.href='/article'"
      role="button">
      <div class="h-64 md:h-auto overflow-hidden relative border-b md:border-b-0 md:border-r border-white/5">
        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent z-10 md:hidden"></div>
        <img src="https://images.unsplash.com/photo-1640906152676-dace6710d24b?w=2160&amp;q=80" alt="AI replacing humans" class="group-hover:opacity-100 group-hover:scale-105 transition-all duration-500 ease-out opacity-80 w-full h-full object-cover">
      </div>
      <div class="md:p-12 flex flex-col z-20 pt-8 pr-8 pb-8 pl-8 relative justify-center">
        <div class="flex flex-wrap items-center gap-3 mb-6">
          <span class="px-2 py-0.5 rounded text-[10px] font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
                  Featured
                </span>
          <span class="text-[10px] font-medium text-zinc-500 uppercase tracking-widest flex items-center gap-2">
                  AI &amp; Work
                  <span class="w-1 h-1 rounded-full bg-zinc-700"></span>
          7 min read
          </span>
        </div>
        <h2
          class="text-2xl md:text-3xl font-medium text-white mb-4 tracking-tight group-hover:text-blue-100 transition-colors">
          AI Replacing Humans: The Reality Behind the Hype
        </h2>
        <p class="text-sm text-zinc-400 leading-relaxed mb-8 line-clamp-3">
          A clear-eyed look at what AI is actually automating today versus
          what still requires people. We break down where jobs are
          changing, why “replacement” is often the wrong framing, and how
          teams can adapt with smarter workflows and better tooling.
        </p>
        <a href="/article"
          class="inline-flex items-center gap-2 text-sm text-white font-medium border-b border-white/20 pb-0.5 hover:border-blue-400 hover:text-blue-300 transition-all w-max">
          Read Article
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16"
            viewBox="0 0 24 24" data-icon="lucide:arrow-right" data-width="16"
            class="iconify group-hover:translate-x-1 transition-transform iconify--lucide">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
              d="M5 12h14m-7-7l7 7l-7 7" class=""></path>
          </svg>
        </a>
      </div>
    </div>
  </article>

  <!-- Article Grid -->
  <div class="grid md:grid-cols-2 mb-16 gap-x-6 gap-y-6">
    <!-- Card 1 -->
    <article
      class="group flex flex-col overflow-hidden hover:bg-zinc-900/60 hover:border-white/20 transition-all duration-300 ease-out bg-zinc-900/40 h-full border-white/10 border rounded-3xl relative cursor-pointer"
      onclick="window.location.href='/article'" role="button">
      <div class="h-64 w-full overflow-hidden border-b border-white/5 relative">
        <div class="absolute inset-0 bg-zinc-900/20 z-10 transition-opacity group-hover:opacity-0 duration-300"></div>
        <img src="https://images.unsplash.com/photo-1640906152676-dace6710d24b?w=800&amp;q=80" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 ease-out" alt="AI replacing humans">
        <div
          class="absolute top-4 right-4 bg-black/60 backdrop-blur-md px-2 py-1 rounded text-[10px] font-medium text-white border border-white/10 z-20">
          AI &amp; Work
        </div>
      </div>
      <div class="flex flex-col flex-1 pt-8 pr-8 pb-8 pl-8">
        <div class="flex items-center gap-3 mb-4 text-xs font-semibold uppercase tracking-widest text-zinc-500">
          <span class="text-blue-400">AI &amp; Work</span>
          <span class="w-1 h-1 rounded-full bg-zinc-700"></span>
          <span>Oct 24, 2023</span>
          <span class="w-1 h-1 rounded-full bg-zinc-700"></span>
          <span class="">7 min read</span>
        </div>
        <h3 class="text-2xl font-semibold text-white mb-3 tracking-tight group-hover:text-blue-300 transition-colors">
          AI Replacing Humans: The Reality Behind the Hype
        </h3>
        <p class="text-sm text-zinc-400 leading-relaxed mb-8 flex-1 line-clamp-3">
          A clear-eyed look at what AI is actually automating today versus
          what still requires people. We break down where jobs are
          changing, why “replacement” is often the wrong framing, and how
          teams can adapt with smarter workflows and better tooling.
        </p>
        <div class="mt-auto pt-6 border-t border-white/5 flex items-center justify-between">
          <span class="text-sm font-medium text-zinc-300 group-hover:text-white transition-colors">
                  Read article
                </span>
          <button class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-zinc-400 group-hover:bg-blue-500 group-hover:text-white transition-all duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right">
                    <path d="M5 12h14" class=""></path>
                    <path d="m12 5 7 7-7 7" class=""></path>
                  </svg>
                </button>
        </div>
      </div>
    </article>

    <!-- Card 2 -->
    <article
      class="group relative flex flex-col h-full bg-zinc-900/40 border border-white/10 rounded-3xl overflow-hidden hover:bg-zinc-900/60 hover:border-white/20 transition-all duration-300 ease-out"
      onclick="window.location.href='/article'" role="button">
      <div class="h-64 w-full overflow-hidden border-b border-white/5 relative">
        <div class="absolute inset-0 bg-zinc-900/20 z-10 transition-opacity group-hover:opacity-0 duration-300"></div>
        <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&amp;w=800" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 ease-out" alt="Generative models in recruitment">
        <div
          class="absolute top-4 right-4 bg-black/60 backdrop-blur-md px-2 py-1 rounded text-[10px] font-medium text-white border border-white/10 z-20">
          AI Models
        </div>
      </div>
      <div class="p-8 flex flex-col flex-1">
        <div class="flex items-center gap-3 mb-4 text-xs font-semibold uppercase tracking-widest text-zinc-500">
          <span class="text-purple-400">AI Models</span>
          <span class="w-1 h-1 rounded-full bg-zinc-700"></span>
          <span>Oct 24, 2023</span>
          <span class="w-1 h-1 rounded-full bg-zinc-700"></span>
          <span>8 min read</span>
        </div>
        <h3 class="text-2xl font-semibold text-white mb-3 tracking-tight group-hover:text-purple-300 transition-colors">
          The Evolution of Generative Models in Recruitment
        </h3>
        <p class="text-sm text-zinc-400 leading-relaxed mb-8 flex-1 line-clamp-3">
          How Large Language Models are reshaping the way we identify
          talent, reduce bias, and predict candidate success. We explore
          the shift to Transformers and the rise of domain fine-tuning for
          recruiting workflows.
        </p>
        <div class="mt-auto pt-6 border-t border-white/5 flex items-center justify-between">
          <span class="text-sm font-medium text-zinc-300 group-hover:text-white transition-colors">
                  Read article
                </span>
          <button class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-zinc-400 group-hover:bg-purple-500 group-hover:text-white transition-all duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right">
                    <path d="M5 12h14" class=""></path>
                    <path d="m12 5 7 7-7 7" class=""></path>
                  </svg>
                </button>
        </div>
      </div>
    </article>

    <!-- Card 3 -->
    <article
      class="group flex flex-col overflow-hidden hover:bg-zinc-900/60 hover:border-white/20 transition-all duration-300 ease-out bg-zinc-900/40 h-full border-white/10 border rounded-3xl relative cursor-pointer"
      onclick="window.location.href='/article'" role="button">
      <div class="h-64 w-full overflow-hidden border-b border-white/5 relative">
        <div class="absolute inset-0 bg-zinc-900/20 z-10 transition-opacity group-hover:opacity-0 duration-300"></div>
        <img src="https://images.unsplash.com/photo-1640906152676-dace6710d24b?w=800&amp;q=80" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 ease-out" alt="Designing for trust in AI systems">
        <div
          class="absolute top-4 right-4 bg-black/60 backdrop-blur-md px-2 py-1 rounded text-[10px] font-medium text-white border border-white/10 z-20">
          Product
        </div>
      </div>
      <div class="p-8 flex flex-col flex-1">
        <div class="flex items-center gap-3 mb-4 text-xs font-semibold uppercase tracking-widest text-zinc-500">
          <span class="text-emerald-400">Product</span>
          <span class="w-1 h-1 rounded-full bg-zinc-700"></span>
          <span>Oct 24, 2023</span>
          <span class="w-1 h-1 rounded-full bg-zinc-700"></span>
          <span>6 min read</span>
        </div>
        <h3
          class="text-2xl font-semibold text-white mb-3 tracking-tight group-hover:text-emerald-300 transition-colors">
          Designing for Trust in AI Systems
        </h3>
        <p class="text-sm text-zinc-400 leading-relaxed mb-8 flex-1 line-clamp-3">
          Why transparency in algorithmic decision making is the key to
          user adoption in enterprise software. As systems become more
          autonomous, the “black box” problem becomes a significant
          barrier for compliance and explainability.
        </p>
        <div class="mt-auto pt-6 border-t border-white/5 flex items-center justify-between">
          <span class="text-sm font-medium text-zinc-300 group-hover:text-white transition-colors">
                  Read article
                </span>
          <button class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-zinc-400 group-hover:bg-emerald-500 group-hover:text-white transition-all duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right">
                    <path d="M5 12h14" class=""></path>
                    <path d="m12 5 7 7-7 7" class=""></path>
                  </svg>
                </button>
        </div>
      </div>
    </article>

    <!-- Card 4 -->
    <article
      class="group flex flex-col overflow-hidden hover:bg-zinc-900/60 hover:border-white/20 transition-all duration-300 ease-out bg-zinc-900/40 h-full border-white/10 border rounded-3xl relative cursor-pointer"
      onclick="window.location.href='/newsroom/'" role="button">
      <div class="overflow-hidden w-full h-64 border-white/5 border-b relative">
        <div
          class="z-10 transition-opacity group-hover:opacity-0 duration-300 bg-zinc-900/20 absolute top-0 right-0 bottom-0 left-0">
        </div>
        <img src="https://images.unsplash.com/photo-1629946832022-c327f74956e0?w=800&amp;q=80" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 ease-out" alt="Newsroom">
        <div
          class="absolute top-4 right-4 bg-black/60 backdrop-blur-md px-2 py-1 rounded text-[10px] font-medium text-white border border-white/10 z-20">
          Newsroom
        </div>
      </div>
      <div class="p-8 flex flex-col flex-1">
        <div class="flex items-center gap-3 mb-4 text-xs font-semibold uppercase tracking-widest text-zinc-500">
          <span class="text-amber-400">Newsroom</span>
          <span class="w-1 h-1 rounded-full bg-zinc-700"></span>
          <span>Latest</span>
          <span class="w-1 h-1 rounded-full bg-zinc-700"></span>
          <span>Browse</span>
        </div>
        <h3 class="text-2xl font-semibold text-white mb-3 tracking-tight group-hover:text-amber-300 transition-colors">
          Explore all articles
        </h3>
        <p class="text-sm text-zinc-400 leading-relaxed mb-8 flex-1 line-clamp-3">
          Browse the full newsroom for the latest insights on AI,
          recruiting workflows, and the future of work.
        </p>
        <div class="mt-auto pt-6 border-t border-white/5 flex items-center justify-between">
          <span class="text-sm font-medium text-zinc-300 group-hover:text-white transition-colors">
                  View newsroom
                </span>
          <button class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-zinc-400 group-hover:bg-amber-500 group-hover:text-white transition-all duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right">
                    <path d="M5 12h14" class=""></path>
                    <path d="m12 5 7 7-7 7" class=""></path>
                  </svg>
                </button>
        </div>
      </div>
    </article>

    <!-- Load More Button -->
    <div class="md:col-span-2 flex pt-4 items-center justify-center">
      <button class="group flex items-center gap-2 px-6 py-3 rounded-full bg-zinc-900/50 border border-white/10 text-sm font-medium text-zinc-400 hover:bg-zinc-800 hover:text-white hover:border-white/20 transition-all duration-300" onclick="window.location.href='/newsroom/'" type="button">
              <span class="">Load more articles</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down transition-transform group-hover:translate-y-0.5">
                <path d="M12 5v14" class=""></path>
                <path d="m19 12-7 7-7-7" class=""></path>
              </svg>
            </button>
    </div>
  </div>

  <!-- Newsletter -->
  <div class="overflow-hidden animate-fade-up delay-300 rounded-3xl relative">
    <div
      class="z-10 md:p-12 flex flex-col md:flex-row gap-8 bg-zinc-900 border-white/10 border rounded-3xl pt-8 pr-8 pb-8 pl-8 relative gap-x-8 gap-y-8 items-center justify-between">
      <div class="max-w-lg text-center md:text-left">
        <h3 class="text-2xl font-medium text-white mb-2 tracking-tight">
          Stay ahead of the curve
        </h3>
        <p class="text-zinc-400 text-sm leading-relaxed">
          Join 15,000+ engineers and designers. Weekly curation of
          resources and thoughts on AI and recruitment.
        </p>
      </div>
      <form class="w-full md:w-auto flex flex-col sm:flex-row gap-3">
        <input type="email" placeholder="email@address.com" class="bg-zinc-800/50 border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder-zinc-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/50 w-full sm:w-64 transition-all">
        <button type="button" class="bg-white text-black px-6 py-3 rounded-xl text-sm font-medium hover:bg-zinc-200 transition-colors shadow-[0_0_20px_rgba(255,255,255,0.1)] whitespace-nowrap">
                Subscribe
              </button>
      </form>
    </div>
    <div class="z-10 sm:px-6 lg:pt-8 lg:pl-2 lg:pr-2 max-w-7xl mr-auto ml-auto pr-4 pl-4 relative">
      <!-- FAQ Container -->
    </div>
  </div>

  <!-- Footer -->
  <footer class="md:px-12 bg-black/50 w-full max-w-[1400px] z-10 mr-auto ml-auto pt-16 pr-6 pb-16 pl-6 relative">
    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 mb-16 gap-x-10 gap-y-10">
      <!-- Brand Column -->
      <div class="col-span-2 lg:col-span-2 pr-2">
        <div class="flex gap-2 mb-6 gap-x-2 gap-y-2 items-center">
          <div
            class="flex text-white bg-gradient-to-br from-sky-500 to-blue-600 w-8 h-8 rounded-full items-center justify-center shadow-[0_0_15px_rgba(14,165,233,0.4)]">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
              style="width: 20px; height: 20px; color: rgb(255, 255, 255);" class="w-[20px] h-[20px]" aria-hidden="true"
              role="img" data-icon="solar:box-bold-duotone" data-width="20" data-solar="database-bold-duotone"
              data-icon-set="solar" data-icon-replaced="true" stroke-width="2">
              <path fill="#ffffff" d="M12 10c4.418 0 8-1.79 8-4s-3.582-4-8-4s-8 1.79-8 4s3.582 4 8 4" class=""></path>
              <path fill="#ffffff" d="M4 12v6c0 2.21 3.582 4 8 4s8-1.79 8-4v-6c0 2.21-3.582 4-8 4s-8-1.79-8-4"
                opacity=".5" class=""></path>
              <path fill="#ffffff" d="M4 6v6c0 2.21 3.582 4 8 4s8-1.79 8-4V6c0 2.21-3.582 4-8 4S4 8.21 4 6" opacity=".7"
                class=""></path>
            </svg>
          </div>
          <span class="text-lg font-semibold text-white tracking-tight">
                  AI-Powered Truck Driver Recruiter
                </span>
        </div>
      </div>

      <!-- Links Column 1 -->
      <div class="">
        <h4 class="cursor-pointer text-sm font-semibold text-white mb-4" onclick="window.location.href='/home'"
          role="button">
          Home
        </h4>
        <ul class="space-y-3 text-sm text-zinc-500">
          <li class="">
            <a href="/faq" class="hover:text-sky-400 transition-colors">
              FAQ
            </a>
          </li>
          <li class="">
            <a href="/about" class="hover:text-sky-400 transition-colors">
              About
            </a>
          </li>
        </ul>
      </div>

      <!-- Links Column 2 -->
      <div class="">
        <ul class="space-y-3 text-sm text-zinc-500">
          <li class="">
            <a href="/newsroom" class="hover:text-sky-400 transition-colors">
              Newsroom
            </a>
          </li>
          <li class="">
            <a href="/contact" class="hover:text-sky-400 transition-colors">
              Contact
            </a>
          </li>
        </ul>
      </div>

      <!-- Links Column 3 -->
      <div class="">
        <ul class="space-y-3 text-sm text-zinc-500">
          <li class="">
            <a href="/privacy" class="hover:text-sky-400 transition-colors">
              Privacy Policy
            </a>
          </li>
          <li class="">
            <a href="/contact" class="hover:text-sky-400 transition-colors">
              Cookie Policy
            </a>
          </li>
        </ul>
      </div>

      <!-- Links Column 4 -->
      <div class="flex gap-4 gap-x-4 gap-y-4">
        <a href="#" class="hover:text-white transition-colors text-zinc-500">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18"
            viewBox="0 0 24 24" data-icon="simple-icons:x" data-width="18" class="w-[18px] h-[18px]" stroke-width="2"
            data-icon-replaced="true" style="width: 18px; height: 18px; color: rgb(255, 255, 255);">
            <path fill="currentColor"
              d="M14.234 10.162L22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299l-.929-1.329L3.076 1.56h3.182l5.965 8.532l.929 1.329l7.754 11.09h-3.182z"
              class=""></path>
          </svg>
        </a>
        <a href="https://www.facebook.com/hybridaiworkforce" class="hover:text-white transition-colors text-zinc-500">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
            style="color: rgb(255, 255, 255); width: 18px; height: 18px;" class="w-[18px] h-[18px]" aria-hidden="true"
            role="img" data-icon="simple-icons:github" data-width="18" data-simple-icons="facebook"
            data-icon-set="simple-icons" data-icon-replaced="true" stroke-width="2">
            <path fill="#ffffff"
              d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978c.401 0 .955.042 1.468.103a9 9 0 0 1 1.141.195v3.325a9 9 0 0 0-.653-.036a27 27 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.7 1.7 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103l-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647"
              class=""></path>
          </svg>
        </a>
        <a href="https://www.linkedin.com/company/hybrid-ai-workforce"
          class="hover:text-white transition-colors text-zinc-500">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18"
            viewBox="0 0 24 24" data-icon="simple-icons:linkedin" data-width="18" class="w-[18px] h-[18px]"
            stroke-width="2" data-icon-replaced="true" style="width: 18px; height: 18px; color: rgb(255, 255, 255);">
            <path fill="currentColor"
              d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-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.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.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 0z"
              class=""></path>
          </svg>
        </a>
        <a href="#" class="text-zinc-500 hover:text-white transition-colors"></a>
      </div>
    </div>

    <div
      class="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-white/5 text-xs text-zinc-600">
      <p class="">
        © 2025 AI-Powered Truck Driver Recruiter. All rights reserved.
      </p>
      <div class="flex gap-6 mt-4 md:mt-0">
        <span class="flex items-center gap-1.5">
                <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
        All systems operational
        </span>
      </div>
    </div>
  </footer>
</div>