hesu-JT/news.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HESU — News &amp; Insights</title>
  <meta name="description" content="HESU news and insights — exhibitions, global expansion, delivery cases and company updates from our cross-border trade operations across 72+ countries." />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="HESU — News &amp; Insights" />
  <meta property="og:description" content="HESU news and insights — exhibitions, global expansion, delivery cases and company updates from our cross-border trade operations across 72+ countries." />
  <meta property="og:image" content="image/logo.png" />

  
  <link rel="icon" type="image/png" href="favicon.png" />

  <link rel="preload" href="font/texgyreheros-regular.otf" as="font" type="font/otf" crossorigin />
  <link rel="preload" href="font/texgyreheros-bold.otf" as="font" type="font/otf" crossorigin />
  <link rel="stylesheet" href="css/fonts.css?v=20260903a" />
  <link rel="stylesheet" href="css/style.css?v=20260903a" />
  <link rel="stylesheet" href="css/news.css?v=20260823b" />
  <link rel="stylesheet" href="css/mobile.css?v=20260823b" />
</head>
<body class="is-news">

  <!-- ============ HEADER (shared) ============ -->
  <header id="siteHeader" class="site-header">
    <div class="container header-inner">
      <a class="logo" href="index.html" aria-label="HESU home">
        <img width="85" height="25" class="logo-img" src="image/logo.png" alt="HESU" />
      </a>
      <nav class="main-nav" id="mainNav" aria-label="Primary">
        <a class="drawer-logo" href="index.html" aria-label="HESU home">
          <img width="85" height="25" class="logo-img" src="image/logo.png" alt="HESU" />
        </a>
        <ul class="nav-list">
          <li class="nav-item has-mega">
            <a href="#">Business <span class="caret" aria-hidden="true"></span></a>
            <div class="mega" role="dialog" aria-label="Business">
              <div class="mega-inner">
                <div class="mega-left">
                  
                  <h3 class="mega-title">Four Core Businesses</h3>
                  
                  
                </div>
                <div class="mega-right">
                  <a class="mega-card" href="auto-export.html">
                    <div class="mega-card-img ph-select1"></div>
                    <div class="mega-card-text"><h4>Auto Export</h4></div>
                  </a>
                  <a class="mega-card" href="building-materials.html">
                    <div class="mega-card-img ph-select2"></div>
                    <div class="mega-card-text"><h4>HESU PIPE</h4></div>
                  </a>
                  <a class="mega-card" href="global-logistics.html">
                    <div class="mega-card-img ph-select3"></div>
                    <div class="mega-card-text"><h4>Global Logistics</h4></div>
                  </a>
                  <a class="mega-card" href="after-sales.html">
                    <div class="mega-card-img ph-select4"></div>
                    <div class="mega-card-text"><h4>After-sales</h4></div>
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="nav-item"><a href="global-presence.html">Global Presence</a></li>
          <li class="nav-item has-mega">
            <a href="#">About Us <span class="caret" aria-hidden="true"></span></a>
            <div class="mega" role="dialog" aria-label="About HESU">
              <div class="mega-inner">
                <div class="mega-left">
                </div>
                <div class="mega-right">
                  <a class="mega-card" href="about-us.html"><div class="mega-card-img ph-easterneurope"></div><div class="mega-card-text"><h4>Company Overview</h4></div></a>
                  <a class="mega-card" href="development-history.html"><div class="mega-card-img ph-middleeast"></div><div class="mega-card-text"><h4>Company History</h4></div></a>
                </div>
              </div>
            </div>
          </li>
          <li class="nav-item"><a class="active" href="news.html" aria-current="page">News</a></li>
          <li class="nav-item nav-contact"><a href="contact.html">Contact Us</a></li>
        </ul>
      </nav>
      <div class="header-right">
        <a href="contact.html" class="btn btn-contact">Contact Us</a>
        <button class="menu-toggle" id="menuToggle" aria-label="Open menu" aria-expanded="false"><span></span><span></span><span></span></button>
      </div>
    </div>
  </header>

  <main class="nw">

    <!-- ============================================================
         1. HERO BANNER — cargo / port photo + left-aligned "NEWS"
         ============================================================ -->
    <section class="nw-hero" aria-label="News">
      <div class="nw-hero__scene" aria-hidden="true">
        <img width="1440" height="550" class="nw-hero__bg" src="image/news/news-banner.jpg" alt="" />
      </div>
      <div class="nw-hero__veil" aria-hidden="true"></div>

      <div class="nw-hero__copy container">
        <h1 class="nw-hero__title" data-reveal>NEWS</h1>
      </div>
    </section>

    <!-- ============================================================
         2. NEWS LISTING — 3-col card grid + pagination
         ============================================================ -->
    <section class="nw-listing" id="listing">
      <div class="container">

        <!-- category tabs -->
        <div class="nw-tabs" id="newsTabs" role="tablist" aria-label="News categories">
          <button class="nw-tab is-active" type="button" role="tab" data-cat="Company News" aria-selected="true">Company News</button>
          <button class="nw-tab" type="button" role="tab" data-cat="Delivery Cases" aria-selected="false">Delivery Cases</button>
          <button class="nw-tab" type="button" role="tab" data-cat="Exhibition Info" aria-selected="false">Exhibition Info</button>
        </div>

        <div class="nw-list" id="newsGrid" aria-live="polite"></div>

        <nav class="nw-pagination" id="newsPagination" aria-label="News pagination"></nav>
      </div>
    </section>

  </main>

  <!-- ============ FOOTER (shared) ============ -->
  <footer class="site-footer" id="contact">
    <div class="container">
      <div class="footer-top">
        <a class="logo logo-light" href="index.html" aria-label="HESU home">
          <img width="85" height="25" class="logo-img" src="image/logo.png" alt="HESU" />
        </a>
        <div class="footer-social">
          <a href="https://www.tiktok.com/@hesu_group_global" target="_blank" rel="noopener" class="social" aria-label="TikTok"><img width="30" height="30" loading="lazy" src="image/TikTok.png" alt="TikTok"></a>
          <a href="https://www.facebook.com/hesuauto" target="_blank" rel="noopener" class="social" aria-label="Facebook"><img width="30" height="30" loading="lazy" src="image/Facebook.png" alt="Facebook"></a>
          <a href="https://www.instagram.com/hesuauto" target="_blank" rel="noopener" class="social" aria-label="Instagram"><img width="30" height="30" loading="lazy" src="image/Instagram.png" alt="Instagram"></a>
          <a href="https://wa.me/8618530090296" target="_blank" rel="noopener" class="social" aria-label="WhatsApp"><img width="30" height="30" loading="lazy" src="image/whatsapp.png" alt="WhatsApp"></a>
        </div>
      <div class="footer-grid">
        <div class="footer-col footer-intro">
          <p class="footer-slogan">Comprehensive International </br> Trade Service Platform</p>
        </div><div class="footer-col"><h4>Business</h4><ul><li><a href="auto-export.html">Automobile Export</a></li><li><a href="building-materials.html">Building Materials Export</a></li><li><a href="global-logistics.html">International Logistics</a></li><li><a href="after-sales.html">After-sales Service</a></li></ul></div><div class="footer-col"><h4>Global Presence</h4><ul><li><a href="https://magicbridgeauto.com/" target="_blank" rel="noopener">Middle East</a></li><li><a href="https://bowindawinauto.com/" target="_blank" rel="noopener">Africa</a></li><li><a href="https://smartcars.cc/" target="_blank" rel="noopener">Eastern Europe</a></li><li><a href="global-presence.html#gp-4">Central Asia</a></li></ul></div><div class="footer-col"><h4>About Us</h4><ul><li><a href="about-us.html">Company Profile</a></li><li><a href="development-history.html">Corporate Milestones</a></li></ul></div><div class="footer-col"><h4>News</h4><ul><li><a href="news.html">Company News</a></li><li><a href="news.html">Delivery Cases</a></li><li><a href="news.html">Exhibitions</a></li></ul></div>
      </div>
    </div>
    <div class="footer-bottom"><div class="container"><span>© <span id="year">2025</span> HESU. All rights reserved.</span><span class="footer-links"><a href="index.html">Privacy</a><a href="index.html">Terms</a><a href="index.html">Sitemap</a></span></div></div>
  </footer>

  <script src="js/main.js?v=20260821-12"></script>
  <script src="js/news.js"></script>
</body>
</html>