News Hero Section with Headline, CTA & Feature Image

<section class="sm:px-8 max-w-7xl mr-auto mb-16 ml-auto pr-6 pl-6">
      <div class="">
        <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          <div class="">
            <h1 class="sm:text-7xl lg:text-8xl leading-[1.02] text-5xl font-semibold text-black tracking-tighter font-playfair" style="">
              Stories that shape the day
            </h1>
            <p class="sm:text-2xl leading-relaxed text-xl text-black/60 font-geist mt-6" style="">Independent reporting. Clear analysis. Delivered daily.</p>
            
            <div class="flex flex-wrap gap-4 mt-10 items-center">
              <button class="inline-flex gap-2 hover:bg-black/80 transition-all font-medium text-white font-geist bg-black h-12 rounded-xl pr-6 pl-6 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] items-center" style="">Read top stories<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg></button>
              <a href="#briefings" class="inline-flex items-center gap-2 text-sm text-black/70 hover:text-black transition font-geist" style="">
                Today's briefings
                <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-up-right" class="lucide lucide-arrow-up-right w-4 h-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
              </a>
            </div>

            <div class="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-4">
              <div class="flex items-center gap-3 rounded-xl border border-black/5 bg-white/50 backdrop-blur px-4 py-3">
                <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="radio" class="lucide lucide-radio w-5 h-5 text-emerald-600"><path d="M16.247 7.761a6 6 0 0 1 0 8.478" class=""></path><path d="M19.075 4.933a10 10 0 0 1 0 14.134" class=""></path><path d="M4.925 19.067a10 10 0 0 1 0-14.134" class=""></path><path d="M7.753 16.239a6 6 0 0 1 0-8.478" class=""></path><circle cx="12" cy="12" r="2" class=""></circle></svg>
                <span class="text-sm text-black/70 font-geist" style="">Live updates</span>
              </div>
              <div class="flex gap-3 bg-white/50 border-black/5 border rounded-xl pt-3 pr-4 pb-3 pl-4 backdrop-blur items-center">
                <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="badge-check" class="lucide lucide-badge-check w-5 h-5 text-blue-600"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
                <span class="text-sm text-black/70 font-geist" style="">Verified sources</span>
              </div>
              <div class="flex items-center gap-3 rounded-xl border border-black/5 bg-white/50 backdrop-blur px-4 py-3">
                <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="shield" class="lucide lucide-shield w-5 h-5 text-purple-600"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path></svg>
                <span class="text-sm text-black/70 font-geist" style="">Ad‑free reading</span>
              </div>
            </div>
          </div>

          <div class="">
            <div class="relative rounded-3xl overflow-hidden border border-black/5 bg-white/30 backdrop-blur" id="lead">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/45edcc86-1205-4adc-a717-8b568c63a038_1600w.jpg" alt="Feature story" class="w-full h-[480px] sm:h-[480px] object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent pointer-events-none"></div>
              <div class="absolute bottom-6 left-6 right-6 flex items-center justify-between">
                <div class="inline-flex items-center gap-2 rounded-full bg-white/50 backdrop-blur px-4 py-2 border border-black/5">
                  <span class="h-2 w-2 rounded-full bg-red-500 animate-pulse"></span>
                  <span class="text-sm text-black/80 font-geist font-medium" style="">Breaking: Global markets rally</span>
                </div>
                <a href="#featured" class="inline-flex items-center gap-2 text-sm rounded-xl bg-white/50 backdrop-blur px-4 py-2 border border-black/5 text-black/70 hover:bg-white/70 transition font-geist" style="">
                  Quick read
                  <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="eye" class="lucide lucide-eye w-4 h-4"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>