2026-08-27 11:54:26 +08:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > HESU — Development History</ title >
< meta name = "description" content = "HESU Development History — two decades of growth, from building-materials trading to a global one-stop trade platform spanning auto export, logistics and after-sales." />
< meta property = "og:type" content = "website" />
< meta property = "og:title" content = "HESU — Development History" />
< meta property = "og:description" content = "HESU Development History — two decades of growth, from building-materials trading to a global one-stop trade platform spanning auto export, logistics and after-sales." />
< meta property = "og:image" content = "image/logo.png" />
< link rel = "icon" type = "image/png" href = "favicon.png" />
2026-09-03 10:57:17 +08:00
< 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" />
2026-08-27 11:54:26 +08:00
< link rel = "stylesheet" href = "css/business.css?v=20260823b" />
< link rel = "stylesheet" href = "css/business-pages.css?v=20260823b" />
< link rel = "stylesheet" href = "css/mobile.css?v=20260823b" />
</ head >
< body class = "is-bp is-dh" >
<!-- ============ 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" >
2026-09-02 14:24:54 +08:00
< a href = "#" > Business < span class = "caret" aria-hidden = "true" ></ span ></ a >
2026-08-27 11:54:26 +08:00
< 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" >
2026-09-02 18:35:45 +08:00
< div class = "mega-card-img ph-select1" ></ div >
2026-08-27 11:54:26 +08:00
< div class = "mega-card-text" >< h4 > Auto Export</ h4 ></ div >
</ a >
< a class = "mega-card" href = "building-materials.html" >
2026-09-02 18:35:45 +08:00
< div class = "mega-card-img ph-select2" ></ div >
2026-08-27 11:54:26 +08:00
< div class = "mega-card-text" >< h4 > HESU PIPE</ h4 ></ div >
</ a >
< a class = "mega-card" href = "global-logistics.html" >
2026-09-02 18:35:45 +08:00
< div class = "mega-card-img ph-select3" ></ div >
2026-08-27 11:54:26 +08:00
< div class = "mega-card-text" >< h4 > Global Logistics</ h4 ></ div >
</ a >
< a class = "mega-card" href = "after-sales.html" >
2026-09-02 18:35:45 +08:00
< div class = "mega-card-img ph-select4" ></ div >
2026-08-27 11:54:26 +08:00
< 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" >
2026-09-02 14:24:54 +08:00
< a href = "#" > About Us < span class = "caret" aria-hidden = "true" ></ span ></ a >
2026-08-27 11:54:26 +08:00
< 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 >
< main class = "bp" >
<!-- ============================================================
1. HERO — full-bleed building photo + centered orange wordmark
============================================================ -->
< section class = "bp-hero dh-hero" aria-label = "20+ Years of Growth" >
< div class = "bp-hero__scene" aria-hidden = "true" >
< img class = "bp-hero__bg" src = "image/history/bnner1.jpg" alt = "" />
</ div >
< div class = "bp-hero__veil" aria-hidden = "true" ></ div >
<!-- <div class="bp-hero__copy container">
<h1 class="bp-hero__title dh-hero__title" data-reveal>
<span class="dh-line dh-line--lg">20<span class="dh-plus">+</span> YEARS</span>
<span class="dh-line dh-line--sm">OF GROWTH</span>
</h1>
</div> -->
</ section >
<!-- ============================================================
2. DEVELOPMENT HISTORY — title + folded two-row timeline
============================================================ -->
< section class = "dh-timeline-section" id = "timeline" >
< div class = "container" >
<!-- title area: orange title (left) + large right-arrow (right edge) -->
< header class = "dh-head" data-reveal >
< h2 class = "dh-head__title" > Development< br /> History</ h2 >
</ header >
<!-- folded route: row 1 (3 blocks) → fold → row 2 (2 blocks)
blocks are separated by a date node — top dot + calendar icon + vertical line -->
< div class = "dh-route" >
<!-- ROW 1 — 2001 / 2009 / 2016 -->
< div class = "dh-rail dh-rail--1" data-reveal >
< div class = "dh-stage" >
< div class = "dh-stage__card" >
< img width = "219" height = "152" loading = "lazy" class = "dh-stage__img" src = "image/history/Rectangle1.jpg" alt = "2001—2008 founded on building materials" />
< div class = "dh-stage__body" >
< h3 class = "dh-stage__year" > 2001—2008</ h3 >
< p class = "dh-stage__text" > Founded on building materials — laying the foundation for global trade services.</ p >
</ div >
</ div >
</ div >
< div class = "dh-node" aria-hidden = "true" >
< span class = "dh-node__cal" >< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "1.8" stroke-linecap = "round" stroke-linejoin = "round" >< rect x = "3" y = "4.5" width = "18" height = "16" rx = "2" />< path d = "M3 9h18M8 2.5v4M16 2.5v4" /></ svg ></ span >
< span class = "dh-node__line" ></ span >
< span class = "dh-node__dot" ></ span >
</ div >
< div class = "dh-stage" >
< div class = "dh-stage__card" >
< img width = "219" height = "152" loading = "lazy" class = "dh-stage__img" src = "image/history/Rectangle2.jpg" alt = "2009—2015 steady growth in building materials" />
< div class = "dh-stage__body" >
< h3 class = "dh-stage__year" > 2009—2015</ h3 >
< p class = "dh-stage__text" > Steady growth — a leading position in the provincial building-materials industry.</ p >
</ div >
</ div >
</ div >
< div class = "dh-node" aria-hidden = "true" >
< span class = "dh-node__cal" >< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "1.8" stroke-linecap = "round" stroke-linejoin = "round" >< rect x = "3" y = "4.5" width = "18" height = "16" rx = "2" />< path d = "M3 9h18M8 2.5v4M16 2.5v4" /></ svg ></ span >
< span class = "dh-node__line" ></ span >
< span class = "dh-node__dot" ></ span >
</ div >
< div class = "dh-stage" >
< div class = "dh-stage__card" >
< img width = "219" height = "152" loading = "lazy" class = "dh-stage__img" src = "image/history/Rectangle3.jpg" alt = "2016—2020 new-energy vehicle export transformation" />
< div class = "dh-stage__body" >
< h3 class = "dh-stage__year" > 2016—2020</ h3 >
< p class = "dh-stage__text" > Transformation — No.1 in new-energy vehicle export volume in Henan Province.</ p >
</ div >
</ div >
</ div >
</ div >
<!-- FOLD — the path bends down to the second row -->
< div class = "dh-fold" aria-hidden = "true" >
< span class = "dh-fold__line" ></ span >
</ div >
<!-- ROW 2 — 2022 / 2025 -->
< div class = "dh-rail dh-rail--2" data-reveal >
< div class = "dh-stage" >
< div class = "dh-stage__card" >
< img width = "219" height = "152" loading = "lazy" class = "dh-stage__img" src = "image/history/Rectangle4.jpg" alt = "2022—2025 global logistics layout" />
< div class = "dh-stage__body" >
< h3 class = "dh-stage__year" > 2022—2025</ h3 >
< p class = "dh-stage__text" > Global layout — logistics, used vehicles and overseas branches across Asia and Africa.</ p >
</ div >
</ div >
</ div >
< div class = "dh-node" aria-hidden = "true" >
< span class = "dh-node__cal" >< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "1.8" stroke-linecap = "round" stroke-linejoin = "round" >< rect x = "3" y = "4.5" width = "18" height = "16" rx = "2" />< path d = "M3 9h18M8 2.5v4M16 2.5v4" /></ svg ></ span >
< span class = "dh-node__line" ></ span >
< span class = "dh-node__dot" ></ span >
</ div >
< div class = "dh-stage" >
< div class = "dh-stage__card" >
< img width = "219" height = "152" loading = "lazy" class = "dh-stage__img" src = "image/history/Rectangle5.jpg" alt = "2025—present platform-based development" />
< div class = "dh-stage__body" >
< h3 class = "dh-stage__year" > 2025—Present</ h3 >
< p class = "dh-stage__text" > Platform-based — integrated industrial bases and overseas after-sales centers worldwide.</ p >
</ div >
</ div >
</ div >
</ div >
</ div >
</ 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 >
</ body >
</ html >
