浅念
391 lines
18 KiB
HTML
391 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>HESU — Global One-Stop Trade Partner</title>
|
||
<meta name="description" content="HESU — Cross-border Supply Chain & Worldwide Distribution. Building materials export, auto export, after-sales & modification, and global logistics across 72+ countries." />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:title" content="HESU — Global One-Stop Trade Partner" />
|
||
<meta property="og:description" content="HESU — Cross-border Supply Chain & Worldwide Distribution. Building materials export, auto export, after-sales & modification, and global logistics across 72+ countries." />
|
||
<meta property="og:image" content="image/logo.png" />
|
||
|
||
<!-- Fonts (graceful fallback to system fonts if offline) -->
|
||
|
||
<link rel="icon" type="image/png" href="favicon.png" />
|
||
|
||
<link rel="stylesheet" href="css/style.css?v=20260823b" />
|
||
<link rel="stylesheet" href="css/mobile.css?v=20260823b" />
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ============ HEADER ============ -->
|
||
<header id="siteHeader" class="site-header">
|
||
<div class="container header-inner">
|
||
<!-- Logo: 3 orange skewed bars + HESU wordmark -->
|
||
<a class="logo" href="#" aria-label="HESU home">
|
||
<img width="85" height="25" class="logo-img" src="image/logo.png" alt="HESU" />
|
||
</a>
|
||
|
||
<!-- Desktop nav -->
|
||
<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">
|
||
<!-- Business mega menu (full-screen) -->
|
||
<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-auto"></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-materials"></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-logistics"></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-aftermarket"></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>
|
||
|
||
<!-- About Us mega menu (full-screen) -->
|
||
<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 href="news.html">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>
|
||
|
||
<!-- ============ HERO ============ -->
|
||
<section class="hero" id="top">
|
||
<div class="hero-bg" aria-hidden="true">
|
||
</div>
|
||
<div class="hero-content container">
|
||
<h1 class="hero-title">HESU</h1>
|
||
<p class="hero-sub">GLOBAL ONE-STOP TRADE PARTNER</p>
|
||
<p class="hero-tag">Cross-border Supply Chain & Worldwide Distribution</p>
|
||
<a href="#business" class="btn btn-explore">Explore More</a>
|
||
</div>
|
||
|
||
<!-- Stats bar -->
|
||
<div class="hero-stats">
|
||
<div class="container stats-grid">
|
||
<div class="stat">
|
||
<span class="stat-num" data-count="20">20<span class="plus">+</span></span>
|
||
<span class="stat-label">Years of Experience</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-num" data-count="15000">15000<span class="plus">+</span></span>
|
||
<span class="stat-label">Exported Vehicles</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-num" data-count="72">72<span class="plus">+</span></span>
|
||
<span class="stat-label">Covered Countries</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-num" data-count="30">30<span class="plus">+</span></span>
|
||
<span class="stat-label">Overseas Partners</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ PAGE CONTENT (dark gradient) ============ -->
|
||
<div class="page-content">
|
||
|
||
<!-- ============ FOUR CORE BUSINESSES ============ -->
|
||
<section class="business" id="business">
|
||
<div class="container">
|
||
<header class="section-head center reveal">
|
||
<h2 class="section-title section-title-d">STRONG RESOURCES, RELIABLE DELIVERY</h2>
|
||
</header>
|
||
|
||
<div class="bento-grid">
|
||
<!-- Orange banner spanning 2 cols -->
|
||
<div class="cell cell-banner reveal reveal-repeat">
|
||
|
||
<span class="banner-title">Four Core Businesses</span>
|
||
</div>
|
||
|
||
<!-- Building Materials — tall, 2 rows -->
|
||
<a href="building-materials.html" class="cell cell-media reveal reveal-repeat cell-materials">
|
||
<div class="cell-ph ph-materials"></div>
|
||
<span class="cell-title">Building Materials Export</span>
|
||
</a>
|
||
|
||
<!-- Auto Export — 2 cols -->
|
||
<a href="auto-export.html" class="cell cell-media reveal reveal-repeat cell-auto">
|
||
<div class="cell-ph ph-auto"></div>
|
||
<span class="cell-title">Auto Export</span>
|
||
</a>
|
||
|
||
<!-- After-sales & Modification — single -->
|
||
<a href="after-sales.html" class="cell cell-media reveal reveal-repeat cell-aftermarket">
|
||
<div class="cell-ph ph-aftermarket"></div>
|
||
<span class="cell-title">After-sales & Modification</span>
|
||
</a>
|
||
|
||
<!-- Global Logistics — 2 cols -->
|
||
<a href="global-logistics.html" class="cell cell-media reveal reveal-repeat cell-logistics">
|
||
<div class="cell-ph ph-logistics"></div>
|
||
<span class="cell-title">Global Logistics</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ GLOBAL PRESENCE ============ -->
|
||
<section class="presence" id="presence">
|
||
<div class="container">
|
||
<header class="section-head center reveal">
|
||
<h2 class="section-title">Global Presence of HESU</h2>
|
||
<p class="section-lead">HESU Has Built Overseas Branches And Service Hubs Across UAE, Belarus, Ghana And Ethiopia. Covering Over 72 Countries, We Provide Local Warehousing, Sales And After-Sales Support For Global Partners.</p>
|
||
<a href="global-presence.html" class="btn btn-outline">Learn More</a>
|
||
</header>
|
||
|
||
<!-- Animated world map — bg image and SVG overlay share the 1219 × 661 coordinate space -->
|
||
<div class="map-wrap reveal" aria-hidden="true">
|
||
<img class="map-bg" width="1219" height="661" loading="lazy" src="image/home/Frame 119.png" alt="Global Presence Map">
|
||
<svg class="map-overlay" viewBox="0 0 1219 661" preserveAspectRatio="xMidYMid meet">
|
||
<!-- DUBAI -->
|
||
<g class="location active" data-name="DUBAI">
|
||
<text class="label" x="418" y="107">DUBAI</text>
|
||
<path class="line" pathLength="1" d="M418 111 C 580 111, 700 130, 755 169"/>
|
||
<circle class="halo" cx="755" cy="169" r="9"/>
|
||
<circle class="halo halo2" cx="755" cy="169" r="9"/>
|
||
<circle class="dot" cx="755" cy="169" r="7.5"/>
|
||
</g>
|
||
<!-- ABU DHABI -->
|
||
<g class="location" data-name="ABU DHABI">
|
||
<text class="label" x="414" y="180">ABU DHABI</text>
|
||
<path class="line" pathLength="1" d="M414 184 C 590 184, 720 210, 793 263"/>
|
||
<circle class="halo" cx="793" cy="263" r="9"/>
|
||
<circle class="halo halo2" cx="793" cy="263" r="9"/>
|
||
<circle class="dot" cx="793" cy="263" r="7.5"/>
|
||
</g>
|
||
<!-- ETHIOPIA -->
|
||
<g class="location" data-name="ETHIOPIA">
|
||
<text class="label" x="418" y="284">ETHIOPIA</text>
|
||
<path class="line" pathLength="1" d="M418 288 C 540 288, 640 305, 702 336"/>
|
||
<circle class="halo" cx="702" cy="336" r="9"/>
|
||
<circle class="halo halo2" cx="702" cy="336" r="9"/>
|
||
<circle class="dot" cx="702" cy="336" r="7.5"/>
|
||
</g>
|
||
<!-- GHANA -->
|
||
<g class="location" data-name="GHANA">
|
||
<text class="label" x="420" y="395">GHANA</text>
|
||
<path class="line" pathLength="1" d="M420 402 C 485 396, 550 396, 613 401"/>
|
||
<circle class="halo" cx="613" cy="401" r="9"/>
|
||
<circle class="halo halo2" cx="613" cy="401" r="9"/>
|
||
<circle class="dot" cx="613" cy="401" r="7.5"/>
|
||
</g>
|
||
<!-- RUSSIA -->
|
||
<g class="location" data-name="RUSSIA">
|
||
<text class="label" x="717" y="20">RUSSIA</text>
|
||
<path class="line" pathLength="1" d="M712 26 C 800 26, 880 40, 945 75"/>
|
||
<circle class="halo" cx="945" cy="75" r="9"/>
|
||
<circle class="halo halo2" cx="945" cy="75" r="9"/>
|
||
<circle class="dot" cx="945" cy="75" r="7.5"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ HESU GLOBAL NETWORK & LOCAL SERVICE ============ -->
|
||
<section class="network" id="network">
|
||
<div class="container">
|
||
<header class="section-head center reveal">
|
||
<h2 class="section-title">HESU Global Network & Local Service</h2>
|
||
</header>
|
||
</div>
|
||
|
||
<!-- Peek carousel: 2 cards centered, outer ~3/4 + edge fade; drag / arrows to slide -->
|
||
<div class="network-stage reveal" aria-label="Regional hubs">
|
||
<div class="network-strip">
|
||
<div class="network-track">
|
||
<a href="https://magicbridgeauto.com" class="network-card">
|
||
<div class="cell-ph ph-service1"></div>
|
||
<span class="hub-label">Middle East</span>
|
||
</a>
|
||
<a href="#network" class="network-card">
|
||
<div class="cell-ph ph-service2"></div>
|
||
<span class="hub-label">Central Asia</span>
|
||
</a>
|
||
<a href="https://smartcars.cc/" class="network-card">
|
||
<div class="cell-ph ph-service3"></div>
|
||
<span class="hub-label">Eastern Europe</span>
|
||
</a>
|
||
<a href="https://bowindawinauto.com/" class="network-card">
|
||
<div class="cell-ph ph-service4"></div>
|
||
<span class="hub-label">Africa</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ PARTNER WITH HESU ============ -->
|
||
<section class="partner" id="about">
|
||
<div class="partner-inner container">
|
||
<!-- Carousel (right, 70%) -->
|
||
<div class="partner-carousel" id="partnerCarousel">
|
||
<div class="slide ph ph-warehouse is-active"></div>
|
||
<div class="slide ph ph-warehouse1"></div>
|
||
<div class="slide ph ph-warehouse2"></div>
|
||
<div class="slide ph ph-warehouse3"></div>
|
||
<div class="partner-dots" id="partnerDots" role="tablist" aria-label="Partner slides"></div>
|
||
</div>
|
||
|
||
<!-- Orange overlay block (left, 50%) -->
|
||
<div class="partner-overlay">
|
||
<h3 class="partner-title">PARTNER WITH HESU,<br />GAIN MORE THAN PRODUCTS</h3>
|
||
<ul class="partner-features">
|
||
<li>
|
||
<span class="pf-ico"><img width="130" height="130" loading="lazy" src="image/Stable.png" alt="Stable"></span>
|
||
<span>Stable</span>
|
||
</li>
|
||
<li>
|
||
<span class="pf-ico"><img width="170" height="170" loading="lazy" src="image/Efficient.png" alt="Efficient"></span>
|
||
<span>Efficient</span>
|
||
</li>
|
||
<li>
|
||
<span class="pf-ico"><img width="117" height="117" loading="lazy" src="image/Flexible.png" alt="Flexible"></span>
|
||
<span>Flexible</span>
|
||
</li>
|
||
<li>
|
||
<span class="pf-ico"><img width="130" height="130" loading="lazy" src="image/Comprehensive.png" alt="Comprehensive"></span>
|
||
<span>Comprehensive</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ NEWS ============ -->
|
||
<section class="news" id="news">
|
||
<div class="container">
|
||
<header class="news-head reveal">
|
||
<h2>NEWS</h2>
|
||
<a href="news.html" class="view-more">view more<span class="plus">+</span></a>
|
||
</header>
|
||
|
||
<div class="news-grid reveal">
|
||
<a href="news-detail.html?id=1" class="news-card">
|
||
<div class="news-img ph ph-fair"></div>
|
||
<p class="news-title">Hesu Industrial Participates in the 139th Canton Fair</p>
|
||
|
||
</a>
|
||
<a href="news-detail.html?id=2" class="news-card">
|
||
<div class="news-img ph ph-dubai"></div>
|
||
<p class="news-title">Hesu Industrial Dubai Branch Officially Opens for Business</p>
|
||
|
||
</a>
|
||
<a href="news-detail.html?id=3" class="news-card">
|
||
<div class="news-img ph ph-factory"></div>
|
||
<p class="news-title">Hesu Industrial West Africa Factory Officially Put into Use</p>
|
||
|
||
</a>
|
||
<a href="news-detail.html?id=4" class="news-card">
|
||
<div class="news-img ph ph-visit"></div>
|
||
<p class="news-title">Global Customers Visit Hesu Industrial Headquarters in China </p>
|
||
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div><!-- /.page-content -->
|
||
|
||
<!-- ============ FOOTER ============ -->
|
||
<footer class="site-footer" id="contact">
|
||
<div class="container">
|
||
<!-- Row 1: logo (left) + socials (right) -->
|
||
<div class="footer-top">
|
||
<a class="logo logo-light" href="#top" 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>
|
||
|
||
<!-- Row 2: 5 columns (intro 45% + 4 nav columns) -->
|
||
<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="#top">Privacy</a><a href="#top">Terms</a><a href="#top">Sitemap</a></span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="js/main.js?v=20260821-12"></script>
|
||
</body>
|
||
</html>
|