Tech Blog Header with Hero Section

<header class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-12 sm:pt-16 lg:pt-20">
  <div class="grid gap-8 lg:gap-12 lg:grid-cols-12 items-center">
    <div class="lg:col-span-7 space-y-6">
      <div class="animate-fade-slide-left delay-100 flex items-center gap-3">
        <div class="gradient-border">
          <div class="gradient-border-inner px-4 py-2">
            <span class="text-xs font-medium tracking-wider text-lime-300 uppercase flex items-center gap-2">
              Latest Insights
              <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" class="w-3 h-3">
                <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path>
              </svg>
            </span>
          </div>
        </div>
        <div class="h-px bg-gradient-to-r from-lime-300/50 to-transparent flex-1"></div>
      </div>
      <h1 class="animate-fade-slide-left delay-200 text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-semibold leading-[0.9] tracking-tight text-white">
        Discover the future ofthrough expert insights
        <span class="bg-gradient-to-r from-lime-300 to-emerald-300 bg-clip-text text-transparent">technology</span>
      </h1>
    </div>
    <div class="lg:col-span-5 space-y-6 lg:space-y-8">
      <div class="animate-fade-slide-right delay-300 bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-all duration-300">
        <p class="text-neutral-300 leading-relaxed text-sm sm:text-base mb-4">
          Dive deep into cutting-edge technologies, innovative solutions, and transformative ideas that are reshaping our digital landscape. From AI breakthroughs to quantum computing advances.
        </p>
        <details class="text-neutral-400 text-sm leading-relaxed">
          <summary class="cursor-pointer font-medium mb-2 select-none hover:text-lime-300 transition-colors">Read more details</summary>
          <p class="mt-2">
            Explore the latest trends in artificial intelligence, blockchain innovation, cybersecurity advancements, and the expanding Internet of Things ecosystem.
          </p>
        </details>
      </div>
      <div class="animate-fade-slide-right delay-400 flex flex-col sm:flex-row gap-4">
        <button class="group inline-flex items-center justify-center gap-3 bg-lime-400 text-purple-900 px-6 py-3 rounded-full font-medium text-sm hover:bg-lime-300 transition-all duration-300 hover:shadow-lg hover:shadow-lime-400/25 hover:scale-105">
          <span>Explore Articles</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" class="w-4 h-4 group-hover:translate-x-1 transition-transform">
            <path d="M5 12h14"></path>
            <path d="m12 5 7 7-7 7"></path>
          </svg>
        </button>
        <button class="group inline-flex items-center justify-center gap-3 border border-neutral-600 text-neutral-300 px-6 py-3 rounded-full font-medium text-sm hover:border-lime-400 hover:text-lime-400 transition-all duration-300">
          <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" class="w-4 h-4">
            <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
          </svg>
          <span>Save for Later</span>
        </button>
      </div>
    </div>
  </div>
</header>