|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN" class="scroll-smooth">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>首页 </title>
|
|
|
|
|
|
<!-- 引入字体与图标 -->
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700;900&family=Montserrat:wght@400;500;700;800;900&family=Inter:wght@400;500;700;800;900&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet"/>
|
|
|
|
|
|
<!-- 引入外部依赖: Swiper, AOS, Vanilla-Tilt -->
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" />
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
|
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script> -->
|
|
|
|
|
|
<!-- Tailwind 高级配置 (已修复转义符) -->
|
|
|
<script id="tailwind-config">
|
|
|
tailwind.config = {
|
|
|
darkMode: "class",
|
|
|
theme: {
|
|
|
extend: {
|
|
|
colors: {
|
|
|
"primary": "#13eca4",
|
|
|
"background-light": "#f8fcfa",
|
|
|
"background-dark": "#10221c",
|
|
|
"pearlescent": "#f0f7f5",
|
|
|
"silver-accent": "#e2e8f0",
|
|
|
"about-us": "#ff6b00"
|
|
|
},
|
|
|
fontFamily: {
|
|
|
"display": ["Montserrat", "sans-serif"],
|
|
|
"sans": ["Montserrat", "sans-serif"],
|
|
|
"mono": ["JetBrains Mono", "monospace"],
|
|
|
"inter": ["Inter", "sans-serif"],
|
|
|
},
|
|
|
backgroundImage: {
|
|
|
'liquid-gradient': 'linear-gradient(135deg, #f8fcfa 0%, #e8f5f1 50%, #dcfce7 100%)',
|
|
|
'glass-gradient': 'linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%)',
|
|
|
'aurora': 'linear-gradient(135deg, rgba(19,236,164,0.1) 0%, rgba(13,166,112,0.05) 50%, rgba(248,252,250,0) 100%)',
|
|
|
'mesh': 'radial-gradient(at 40% 20%, rgba(19,236,164,0.08) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(16,34,28,0.05) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(19,236,164,0.05) 0px, transparent 50%)',
|
|
|
},
|
|
|
boxShadow: {
|
|
|
'glow': '0 0 20px rgba(19, 236, 164, 0.4)',
|
|
|
'glow-lg': '0 10px 30px rgba(19, 236, 164, 0.4)',
|
|
|
'bento': '0 20px 40px -15px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.02)',
|
|
|
'bento-hover': '0 30px 60px -20px rgba(19,236,164,0.15), 0 0 0 1px rgba(19,236,164,0.3)',
|
|
|
'bento-dark': '0 30px 60px -15px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1)',
|
|
|
},
|
|
|
keyframes: {
|
|
|
scan: { '0%': { top: '-10%', opacity: '0' }, '10%': { opacity: '1' }, '90%': { opacity: '1' }, '100%': { top: '110%', opacity: '0' } },
|
|
|
floatY: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-15px)' } },
|
|
|
blobSpin: { '0%': { transform: 'rotate(0deg) scale(1)' }, '50%': { transform: 'rotate(180deg) scale(1.1)' }, '100%': { transform: 'rotate(360deg) scale(1)' } }
|
|
|
},
|
|
|
animation: {
|
|
|
'scan-slow': 'scan 6s linear infinite',
|
|
|
'float-1': 'floatY 3s ease-in-out infinite',
|
|
|
'float-2': 'floatY 3s ease-in-out infinite 1s',
|
|
|
'float-3': 'floatY 3s ease-in-out infinite 2s',
|
|
|
'blob-spin': 'blobSpin 20s infinite cubic-bezier(0.4, 0, 0.2, 1)',
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
|
<style>
|
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
|
::-webkit-scrollbar-thumb { background: rgba(19, 236, 164, 0.2); border-radius: 10px; }
|
|
|
::-webkit-scrollbar-thumb:hover { background: rgba(19, 236, 164, 0.4); }
|
|
|
|
|
|
.liquid-blob { position: absolute; filter: blur(80px); z-index: 0; opacity: 0.6; }
|
|
|
#tab_storage:checked ~ div .tab-label-storage { background-color: #13eca4; color: #0d1b17; box-shadow: 0 0 15px rgba(19,236,164,0.3); }
|
|
|
#tab_services:checked ~ div .tab-label-services { background-color: #13eca4; color: #0d1b17; box-shadow: 0 0 15px rgba(19,236,164,0.3); }
|
|
|
#tab_microgrids:checked ~ div .tab-label-microgrids { background-color: #13eca4; color: #0d1b17; box-shadow: 0 0 15px rgba(19,236,164,0.3); }
|
|
|
|
|
|
.globe-grid { background-image: radial-gradient(circle, rgba(19,236,164,0.1) 1px, transparent 1px); background-size: 20px 20px; }
|
|
|
.animate-select { animation: globePulse 0.6s ease-out; }
|
|
|
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
|
.hide-scrollbar::-webkit-scrollbar { display: none; }
|
|
|
|
|
|
.project-card.active { border-color: #13eca4; background: rgba(19, 236, 164, 0.1); }
|
|
|
|
|
|
/* 交互点激活态的新特效：雷达扩散 */
|
|
|
.globe-dot.active .active-radar {
|
|
|
opacity: 1;
|
|
|
transform: scale(1);
|
|
|
animation: radarPulse 2s infinite ease-out;
|
|
|
}
|
|
|
.globe-dot.active .active-radar-2 {
|
|
|
opacity: 1;
|
|
|
transform: scale(1);
|
|
|
animation: radarPulse 2s infinite ease-out 0.4s;
|
|
|
}
|
|
|
.globe-dot.active .dot-core {
|
|
|
background-color: #13eca4;
|
|
|
box-shadow: 0 0 20px rgba(19, 236, 164, 0.9);
|
|
|
border: 2px solid white;
|
|
|
}
|
|
|
|
|
|
/* 特定颜色的激活态覆盖 */
|
|
|
#dot-p2.active .dot-core { background-color: #60a5fa; box-shadow: 0 0 20px rgba(96, 165, 250, 0.9); }
|
|
|
#dot-p2.active .active-radar { border-color: rgba(96, 165, 250, 0.4); }
|
|
|
|
|
|
#dot-p4.active .dot-core { background-color: #fb923c; box-shadow: 0 0 20px rgba(251, 146, 60, 0.9); }
|
|
|
#dot-p4.active .active-radar { border-color: rgba(251, 146, 60, 0.4); }
|
|
|
|
|
|
|
|
|
/* 悬浮动画关键帧 */
|
|
|
@keyframes float-y {
|
|
|
0%, 100% { transform: translateY(0px); }
|
|
|
50% { transform: translateY(-20px); } /* 上浮高度 */
|
|
|
}
|
|
|
|
|
|
/* 不同频率的动画类 */
|
|
|
.animate-float-slow {
|
|
|
animation: float-y 6s ease-in-out infinite;
|
|
|
}
|
|
|
.animate-float-medium {
|
|
|
animation: float-y 5s ease-in-out infinite 0.5s; /* 0.5s 延迟 */
|
|
|
}
|
|
|
.animate-float-fast {
|
|
|
animation: float-y 7s ease-in-out infinite 1s; /* 1s 延迟 */
|
|
|
}
|
|
|
|
|
|
/* 避免Hover时动画冲突（可选：鼠标放上去暂停浮动，方便点击/查看） */
|
|
|
.group:hover .animate-float-slow,
|
|
|
.group:hover .animate-float-medium,
|
|
|
.group:hover .animate-float-fast {
|
|
|
animation-play-state: paused;
|
|
|
}
|
|
|
|
|
|
@keyframes radarPulse {
|
|
|
0% { transform: scale(0.5); opacity: 0; }
|
|
|
50% { opacity: 1; }
|
|
|
100% { transform: scale(1.8); opacity: 0; }
|
|
|
}
|
|
|
@keyframes scrollDown {
|
|
|
0% { transform: translateY(0); opacity: 1; }
|
|
|
100% { transform: translateY(12px); opacity: 0; }
|
|
|
}
|
|
|
|
|
|
#particle-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
|
|
|
.cursor::after { content: '_'; animation: blink 1s infinite; color: #13eca4; }
|
|
|
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
|
|
|
.hud-border { border: 1px solid rgba(19, 236, 164, 0.3); background: rgba(19, 236, 164, 0.05); }
|
|
|
</style>
|
|
|
<body>
|
|
|
<!-- Background Blobs -->
|
|
|
<div class="fixed inset-0 pointer-events-none overflow-hidden z-0">
|
|
|
<div class="liquid-blob bg-primary/20 w-[600px] h-[600px] rounded-full -top-40 -left-40 mix-blend-multiply"></div>
|
|
|
<div class="liquid-blob bg-blue-200/30 w-[500px] h-[500px] rounded-full top-1/3 -right-20 mix-blend-multiply"></div>
|
|
|
<div class="liquid-blob bg-teal-100/40 w-[800px] h-[800px] rounded-full -bottom-40 left-1/4 mix-blend-multiply"></div>
|
|
|
</div>
|
|
|
|
|
|
<div class="relative z-[1] flex flex-col min-h-screen">
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Hero Section (Updated) -->
|
|
|
<section class="relative w-full h-[calc(100vh-60px)] md:h-[calc(100vh-80px)] min-h-[600px] overflow-hidden bg-[#f8fcfa] group/hero">
|
|
|
|
|
|
<!-- Swiper Container -->
|
|
|
<div class="swiper heroSwiper w-full h-full relative z-10">
|
|
|
<div class="swiper-wrapper">
|
|
|
<div class="swiper-slide bg-[#010403]">
|
|
|
<div id="particle-canvas"></div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-black/50 z-10 pointer-events-none"></div>
|
|
|
|
|
|
<div class="absolute inset-0 z-20 flex flex-col justify-between p-10 md:p-20 pointer-events-none">
|
|
|
<header class="flex justify-between items-start">
|
|
|
<h1 class="text-4xl md:text-[2.66rem] tracking-tighter text-white">NENGHUI
|
|
|
<!-- <span class="text-[#13eca4]">OS.</span> -->
|
|
|
</h1>
|
|
|
<div class="hud-border px-4 py-2 rounded font-mono text-xs text-[#13eca4] hidden md:block">
|
|
|
CORE: <span class="text-white">STABLE</span>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
<div class="max-w-2xl">
|
|
|
<div class="hud-border backdrop-blur-md px-6 py-2 rounded-full mb-6 inline-block shadow-[0_0_20px_rgba(19,236,164,0.1)]">
|
|
|
<span class="font-mono text-sm tracking-widest text-[#13eca4] uppercase cursor" id="hud-text">INIT_SYSTEM</span>
|
|
|
</div>
|
|
|
<h2 class="text-4xl md:text-[2.66rem] leading-[0.9] tracking-tighter mb-6 uppercase">
|
|
|
Energy<br><span class="text-[#13eca4]">EMPOWERING.</span>
|
|
|
</h2>
|
|
|
<p class="text-[1rem] text-gray-500 max-w-md italic">Smart energy solutions for a sustainable and low-carbon future.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Slide 1 ... (Content Unchanged) ... -->
|
|
|
<div class="swiper-slide relative w-full h-full flex items-center justify-center overflow-hidden">
|
|
|
<!-- ... Slide 1 Content ... -->
|
|
|
<div class="absolute inset-0 z-0 skeleton-wrapper skeleton-pulse ">
|
|
|
<div class="lazy-target w-full h-full bg-cover bg-center opacity-90 transition-transform duration-[10s] ease-linear scale-100 hover:scale-105"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/01/test-banner5.jpg" >
|
|
|
</div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-b from-white/60 via-transparent to-background-light"></div>
|
|
|
</div>
|
|
|
|
|
|
<div class="relative z-10 max-w-[1000px] px-6 text-center flex flex-col items-center gap-3 md:gap-8" data-swiper-parallax="-300">
|
|
|
<!-- <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/40 backdrop-blur-md border border-white/50 shadow-sm animate-fade-in">
|
|
|
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
|
|
|
<span class="text-xs uppercase tracking-widest text-[#0d1b17]">
|
|
|
Global Vision </span>
|
|
|
</div>-->
|
|
|
|
|
|
<h1 class="text-[#0d1b17] text-4xl md:text-[2.66rem] tracking-tighter mix-blend-color-burn">
|
|
|
Global Vision <br/>
|
|
|
<span class="italic font-light text-transparent bg-clip-text bg-gradient-to-r from-primary to-[#0d6efd]">Localized Performance.</span>
|
|
|
</h1>
|
|
|
<p class="text-[#0d1b17]/80 text-[1rem] max-w-2xl backdrop-blur-sm">
|
|
|
|
|
|
Engineering excellence meets on-site precision， Delivering integrated EPC solutions with global expertise.
|
|
|
|
|
|
|
|
|
</p>
|
|
|
<!-- <div class="flex flex-col sm:flex-row gap-4 mt-4">
|
|
|
<button class="flex h-12 px-8 items-center justify-center rounded-full bg-primary text-[#0d1b17] text-base shadow-[0_0_20px_rgba(19,236,164,0.4)] hover:shadow-[0_0_30px_rgba(19,236,164,0.6)] hover:scale-105 transition-all">
|
|
|
Discover Flow
|
|
|
</button>
|
|
|
<button class="flex h-12 px-8 items-center justify-center rounded-full bg-white/50 backdrop-blur-md text-[#0d1b17] border border-white/60 text-base font-medium hover:bg-white hover:scale-105 transition-all">
|
|
|
Our Technology
|
|
|
</button>
|
|
|
</div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Slide 3 ... (Content Unchanged) ... -->
|
|
|
<div class="swiper-slide relative w-full h-full flex items-center justify-center overflow-hidden">
|
|
|
<!-- ... Slide 1 Content ... -->
|
|
|
<div class="absolute inset-0 z-0 skeleton-wrapper skeleton-pulse ">
|
|
|
<div class="lazy-target w-full h-full bg-cover bg-center opacity-90 transition-transform duration-[10s] ease-linear scale-100 hover:scale-105"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/01/test-banner3.jpg">
|
|
|
</div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-b from-white/60 via-transparent to-background-light"></div>
|
|
|
</div>
|
|
|
|
|
|
<div class="relative z-10 max-w-[1000px] px-6 text-center flex flex-col items-center gap-3 md:gap-8" data-swiper-parallax="-300">
|
|
|
<!-- <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/40 backdrop-blur-md border border-white/50 shadow-sm animate-fade-in">
|
|
|
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
|
|
|
<span class="text-xs uppercase tracking-widest text-[#0d1b17]">
|
|
|
Global Vision </span>
|
|
|
</div>-->
|
|
|
|
|
|
<h1 class="text-[#0d1b17] text-4xl md:text-[2.66rem] tracking-tighter mix-blend-color-burn">
|
|
|
|
|
|
Powering the AI-Driven <br/>
|
|
|
<span class="italic font-light text-transparent bg-clip-text bg-gradient-to-r from-primary to-[#0d6efd]">Energy Revolution.</span>
|
|
|
</h1>
|
|
|
<p class="text-[#0d1b17]/80 text-[1rem] max-w-2xl backdrop-blur-sm">
|
|
|
|
|
|
|
|
|
Next-Gen Energy Storage Solutions | EPC & EMC/PPA for a Sustainable Future.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</p>
|
|
|
<!-- <div class="flex flex-col sm:flex-row gap-4 mt-4">
|
|
|
<button class="flex h-12 px-8 items-center justify-center rounded-full bg-primary text-[#0d1b17] text-base shadow-[0_0_20px_rgba(19,236,164,0.4)] hover:shadow-[0_0_30px_rgba(19,236,164,0.6)] hover:scale-105 transition-all">
|
|
|
Discover Flow
|
|
|
</button>
|
|
|
|
|
|
</div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Slide 2 ... (Content Unchanged) ...
|
|
|
<div class="swiper-slide relative w-full h-full flex items-center justify-center overflow-hidden">
|
|
|
<div class="absolute inset-0 z-0 skeleton-wrapper skeleton-pulse">
|
|
|
<div class="lazy-target h-full bg-cover bg-center"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/home-new-banner.png" >
|
|
|
</div>
|
|
|
<div class="absolute inset-0 bg-[#0d1b17]/40"></div>
|
|
|
</div>
|
|
|
|
|
|
<div class="relative z-10 max-w-[1000px] px-6 text-center flex flex-col items-center gap-8" data-swiper-parallax="-300">
|
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-black/20 backdrop-blur-md border border-white/20 shadow-sm">
|
|
|
<span class="material-symbols-outlined text-white text-sm"></span>
|
|
|
<span class="text-xs uppercase tracking-widest text-white">Project Spotlight</span>
|
|
|
</div>
|
|
|
<h1 class="text-white text-5xl md:text-7xl font-medium tracking-tighter leading-none">
|
|
|
Engineering <br/>
|
|
|
<span class="italic font-light text-primary">The Future</span>
|
|
|
</h1>
|
|
|
<button onclick="playHeroVideo()" class="group relative flex items-center justify-center w-20 h-20 md:w-24 md:h-24 rounded-full bg-white/10 backdrop-blur-md border border-white/30 transition-all duration-500 hover:scale-110 hover:bg-primary hover:border-primary cursor-pointer mt-4">
|
|
|
<div class="absolute inset-0 rounded-full border border-white/30 animate-[ping_2s_infinite]"></div>
|
|
|
<span class="material-symbols-outlined text-4xl md:text-5xl text-white group-hover:text-[#0d1b17] ml-1 transition-colors"></span>
|
|
|
</button>
|
|
|
<p class="text-white/80 text-sm md:text-base font-mono tracking-widest mt-2 uppercase">
|
|
|
Watch the Documentary
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>-->
|
|
|
</div>
|
|
|
|
|
|
<!-- Swiper Navigation (Removed Pagination) -->
|
|
|
<!-- Removed: <div class="swiper-pagination"></div> -->
|
|
|
<div class="swiper-button-next !text-[#0d1b17]/50 hover:!text-primary !hidden md:!flex transition-opacity duration-300" id="hero-next"></div>
|
|
|
<div class="swiper-button-prev !text-[#0d1b17]/50 hover:!text-primary !hidden md:!flex transition-opacity duration-300" id="hero-prev"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Immersive Video Layer -->
|
|
|
<!-- ... (Video Layer Code Unchanged) ... -->
|
|
|
<!-- <div id="banner-video-layer" class="absolute inset-0 z-50 bg-black flex items-center justify-center opacity-0 pointer-events-none transition-all duration-700">
|
|
|
<button onclick="closeHeroVideo()" class="absolute top-24 right-6 md:top-8 md:right-8 z-50 group flex items-center gap-2 px-4 py-2 rounded-full bg-black/50 backdrop-blur-md border border-white/10 text-white hover:bg-primary hover:text-[#0d1b17] transition-all duration-300">
|
|
|
<span class="text-xs uppercase tracking-widest hidden md:block">Close Video</span>
|
|
|
<span class="material-symbols-outlined text-xl group-hover:rotate-90 transition-transform"></span>
|
|
|
</button>
|
|
|
<video id="hero-video" class="w-full h-full object-contain md:object-cover" controls controlsList="nodownload">
|
|
|
<source src="https://nenghui.com/wp-content/uploads/2026/03/888-SH-NHET-001-final-20260227_20263411558.mp4" type="video/mp4">
|
|
|
Your browser does not support the video tag.
|
|
|
</video>
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
<!-- Scroll Down Indicator (Responsive: Mouse for Desktop / Arrow for Mobile) -->
|
|
|
<div class="absolute md:bottom-[5px] bottom-[14%] left-0 w-full flex justify-center z-30 pointer-events-none">
|
|
|
<div class="cursor-pointer pointer-events-auto animate-fade-in" onclick="document.getElementById('trust').scrollIntoView({behavior: 'smooth'})">
|
|
|
|
|
|
<!-- 1. Desktop View (MD and up): Mouse Animation -->
|
|
|
<div class="hidden md:flex flex-col items-center gap-3 group">
|
|
|
<span class="text-[10px] uppercase tracking-[0.2em] text-[#0d1b17]/60 group-hover:text-primary transition-colors duration-300">Scroll</span>
|
|
|
<div class="w-[26px] h-[42px] rounded-full border-2 border-[#0d1b17]/20 bg-white/10 backdrop-blur-sm flex justify-center p-1 shadow-sm group-hover:border-primary/50 transition-colors duration-300">
|
|
|
<div class="w-1 h-1.5 bg-primary rounded-full animate-[scrollDown_1.5s_infinite]"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 2. Mobile View (Below MD): Bouncing Arrow Animation -->
|
|
|
<div class="flex md:hidden flex-col items-center gap-1 opacity-70">
|
|
|
<span class="text-[9px] uppercase tracking-[0.15em] text-[#0d1b17]/60 mb-1">Swipe</span>
|
|
|
<div class="animate-bounce p-2 rounded-full bg-white/20 backdrop-blur-sm border border-white/10 shadow-sm">
|
|
|
<span class="material-symbols-outlined text-2xl text-[#0d1b17]"></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<!-- Trust Stats Section -->
|
|
|
<section class="py-24 relative" id="trust">
|
|
|
<!-- 背景装饰线条 -->
|
|
|
<div class="absolute top-1/2 left-0 w-full h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent -translate-y-1/2 z-0 pointer-events-none"></div>
|
|
|
|
|
|
<div class="layout-container max-w-[1280px] mx-auto px-6 relative z-10">
|
|
|
<div class="mb-16 text-center" data-aos="fade-up">
|
|
|
<h3 class=" text-4xl md:text-[2.66rem] text-[#0d1b17] mb-2">Powering the Planet</h3>
|
|
|
<p class="text-[#0d1b17]/60 text-[1rem]">Driving the transition with measurable impact.</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
|
|
|
|
|
|
<!-- Item 1: Technology Pioneer (慢速浮动) -->
|
|
|
<!-- Added: animate-float-slow -->
|
|
|
<div class="animate-float-slow group relative w-48 h-48 md:w-64 md:h-64 cursor-default" data-aos="fade-right" data-aos-delay="0">
|
|
|
<!-- 动态光晕背景 -->
|
|
|
<div class="absolute inset-0 bg-primary/20 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
|
|
|
|
|
<!-- 主体容器 -->
|
|
|
<div class="relative w-full h-full rounded-full bg-white/60 backdrop-blur-xl border border-white/80 shadow-[0_8px_32px_rgba(0,0,0,0.05)] flex flex-col items-center justify-center transition-all duration-500 group-hover:scale-105 group-hover:border-primary/30 group-hover:shadow-[0_15px_40px_rgba(19,236,164,0.15)]">
|
|
|
<!-- 内部旋转环 -->
|
|
|
<div class="absolute inset-2 rounded-full border border-dashed border-[#0d1b17]/10 w-[calc(100%-16px)] h-[calc(100%-16px)] animate-[spin_20s_linear_infinite] opacity-30 group-hover:opacity-60 transition-opacity"></div>
|
|
|
|
|
|
<p class="text-[#0d1b17]/60 text-[10px] md:text-xs uppercase tracking-widest mb-2 z-10">Technology Pioneer</p>
|
|
|
<h4 class="text-[#0d1b17] text-4xl md:text-5xl tracking-tight z-10 flex items-baseline">
|
|
|
<span class="counter" data-target="200">0</span>
|
|
|
<span class="text-2xl text-primary ml-1">+</span>
|
|
|
</h4>
|
|
|
<p class="text-[#0d1b17]/40 text-[10px] mt-1">Patents Granted</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Item 2: Carbon Offset (中速浮动 - 中心大球) -->
|
|
|
<!-- Added: animate-float-medium -->
|
|
|
<div class="animate-float-medium group relative w-56 h-56 md:w-80 md:h-80 -my-4 md:-my-8 z-20 cursor-default" data-aos="zoom-in" data-aos-delay="100">
|
|
|
<!-- 外部行星轨道装饰 -->
|
|
|
<div class="absolute inset-[-20px] rounded-full border border-primary/20 opacity-0 scale-90 group-hover:opacity-100 group-hover:scale-100 transition-all duration-700 ease-out"></div>
|
|
|
<div class="absolute inset-[-20px] rounded-full border-t border-primary/60 opacity-0 rotate-45 group-hover:opacity-100 group-hover:rotate-180 transition-all duration-1000 ease-out"></div>
|
|
|
|
|
|
<!-- 主体容器 -->
|
|
|
<div class="relative w-full h-full rounded-full bg-gradient-to-b from-white to-[#f0f7f5] backdrop-blur-xl border-2 border-primary/10 shadow-[0_20px_50px_rgba(19,236,164,0.15)] flex flex-col items-center justify-center transition-all duration-500 group-hover:scale-105 group-hover:shadow-[0_30px_60px_rgba(19,236,164,0.25)]">
|
|
|
|
|
|
<!-- 内部液态背景装饰 -->
|
|
|
<div class="absolute w-32 h-32 bg-primary/10 rounded-full blur-2xl mix-blend-multiply filter group-hover:bg-primary/20 transition-colors"></div>
|
|
|
|
|
|
<div class="relative z-10 text-center">
|
|
|
<span class="inline-block p-2 rounded-full bg-primary/10 text-primary mb-3">
|
|
|
<span class="material-symbols-outlined text-xl"></span>
|
|
|
</span>
|
|
|
<p class="text-[#0d1b17]/60 text-xs uppercase tracking-widest mb-1">Carbon Offset</p>
|
|
|
<h4 class="text-[#0d1b17] text-5xl md:text-7xl tracking-tight leading-none mb-1">
|
|
|
<span class="counter" data-target="10">0</span>
|
|
|
<span class="text-3xl md:text-4xl text-primary">GW</span>
|
|
|
</h4>
|
|
|
<p class="text-[#0d1b17]/50 text-xs">Clean Energy Delivered</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Item 3: EPC Portfolio (最慢/不同步) -->
|
|
|
<!-- Added: animate-float-fast -->
|
|
|
<div class="animate-float-fast group relative w-48 h-48 md:w-64 md:h-64 cursor-default" data-aos="fade-left" data-aos-delay="200">
|
|
|
<!-- 动态光晕背景 -->
|
|
|
<div class="absolute inset-0 bg-blue-400/20 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
|
|
|
|
|
<!-- 主体容器 -->
|
|
|
<div class="relative w-full h-full rounded-full bg-white/60 backdrop-blur-xl border border-white/80 shadow-[0_8px_32px_rgba(0,0,0,0.05)] flex flex-col items-center justify-center transition-all duration-500 group-hover:scale-105 group-hover:border-blue-400/30 group-hover:shadow-[0_15px_40px_rgba(96,165,250,0.15)]">
|
|
|
<!-- 内部旋转环 (反向) -->
|
|
|
<div class="absolute inset-2 rounded-full border border-dashed border-[#0d1b17]/10 w-[calc(100%-16px)] h-[calc(100%-16px)] animate-[spin_25s_linear_infinite_reverse] opacity-30 group-hover:opacity-60 transition-opacity"></div>
|
|
|
|
|
|
<p class="text-[#0d1b17]/60 text-[10px] md:text-xs uppercase tracking-widest mb-2 z-10">EPC Portfolio</p>
|
|
|
<h4 class="text-[#0d1b17] text-4xl md:text-5xl tracking-tight z-10 flex items-baseline">
|
|
|
<span class="counter" data-target="1000">0</span>
|
|
|
<span class="text-2xl text-blue-500 ml-1">+</span>
|
|
|
</h4>
|
|
|
<p class="text-[#0d1b17]/40 text-[10px] mt-1">Projects Completed</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Products Section -->
|
|
|
<section class="py-24 bg-gradient-to-b from-transparent to-white/50" id="products">
|
|
|
<div class="layout-container max-w-[1280px] mx-auto px-6">
|
|
|
<div class="text-center mb-16" data-aos="fade-up">
|
|
|
<h2 class="text-4xl md:text-[2.66rem] tracking-tight text-[#0d1b17] mb-4">Integrated Renewable Energy Infrastructure</h2>
|
|
|
<p class="text-[1rem] text-[#0d1b17]/70 max-w-2xl mx-auto">From cutting-edge storage products to full-lifecycle EPC, EMC/PPA, and BOT energy services.</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="relative w-full">
|
|
|
<input checked="" class="peer/storage hidden" id="tab_storage" name="product_tabs" type="radio"/>
|
|
|
<input class="peer/services hidden" id="tab_services" name="product_tabs" type="radio"/>
|
|
|
<input class="peer/microgrids hidden" id="tab_microgrids" name="product_tabs" type="radio"/>
|
|
|
|
|
|
<!-- Tab Navigation -->
|
|
|
<div class="flex justify-center mb-16 sticky top-[80px] z-[5]" data-aos="fade-up" data-aos-delay="100">
|
|
|
<div class="bg-white/40 backdrop-blur-md p-1.5 rounded-full border border-white/60 shadow-sm inline-flex flex-col sm:flex-row gap-2 sm:gap-0">
|
|
|
<label class="tab-label-storage cursor-pointer px-8 py-3 rounded-full text-sm transition-all text-[#0d1b17]/60 hover:text-[#0d1b17] hover:bg-white/50 text-center sm:text-left" for="tab_storage">
|
|
|
Smart Energy Storage Systems
|
|
|
</label>
|
|
|
<label class="tab-label-services cursor-pointer px-8 py-3 rounded-full text-sm transition-all text-[#0d1b17]/60 hover:text-[#0d1b17] hover:bg-white/50 text-center sm:text-left" for="tab_services">
|
|
|
Turnkey Energy Services (EPC & EMC/PPA)
|
|
|
</label>
|
|
|
<label class="tab-label-microgrids cursor-pointer px-8 py-3 rounded-full text-sm transition-all text-[#0d1b17]/60 hover:text-[#0d1b17] hover:bg-white/50 text-center sm:text-left" for="tab_microgrids">
|
|
|
Microgrids
|
|
|
</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Tab Content: Storage -->
|
|
|
<div class="hidden peer-checked/storage:flex flex-col gap-10 animate-fade-in">
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
|
<!-- Product Card 1 -->
|
|
|
<div class="group relative bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-[0_20px_40px_rgba(0,0,0,0.05)] transition-all duration-500 hover:-translate-y-2 border border-white/50" data-aos="fade-up" data-aos-delay="0">
|
|
|
<div class="h-64 w-full bg-[#f0f7f5] overflow-hidden relative skeleton-wrapper skeleton-pulse">
|
|
|
<div class="absolute inset-0 bg-contain bg-no-repeat bg-center transition-transform duration-700 group-hover:scale-105 lazy-target"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/01/NE261L.png"
|
|
|
data-alt="Residential ESS Unit" ></div>
|
|
|
<div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-colors"></div>
|
|
|
</div>
|
|
|
<div class="p-8">
|
|
|
<div class="flex justify-between items-start mb-2">
|
|
|
<h3 class="text-xl text-[#0d1b17]">All-in-one Liquid-cooled ESS Cabinet 261kWh</h3>
|
|
|
<span class="material-symbols-outlined text-primary"></span>
|
|
|
</div>
|
|
|
<p class="text-[#0d1b17]/60 text-sm leading-relaxed line-clamp-4">Advanced liquid cooling and dual NOVEC1230/aerosol fire suppression ensure safety and longevity for off-grid solar, industrial storage, and hybrid power systems.</p>
|
|
|
<div class="space-y-3 mb-8 mt-6">
|
|
|
<div class="flex justify-between items-center text-sm border-b border-slate-100 pb-2">
|
|
|
<span class="text-slate-400 font-medium">Capacity</span>
|
|
|
<span class=" text-[#0d1b17] text-right">261.12 kWh</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between items-center text-sm border-b border-slate-100 pb-2 ">
|
|
|
<span class="text-slate-400 font-medium">Max. Efficiency</span>
|
|
|
<span class=" text-[#0d1b17] text-right" >≥ 90% </span>
|
|
|
</div>
|
|
|
<div class="flex justify-between items-center text-sm border-b border-slate-100 pb-2 ">
|
|
|
<span class="text-slate-400 font-medium">Cycle Life</span>
|
|
|
<span class=" text-[#0d1b17] text-right">≥ 8,000 times</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a href="https://nenghui.com/products/ne261l/" target="_blank" rel="noopener noreferrer" class="inline-block w-full">
|
|
|
<button class="group/btn relative w-full overflow-hidden rounded bg-transparent py-3 text-sm uppercase tracking-widest text-[#0d1b17] transition-colors hover:text-[#0d1b17] border border-[#0d1b17]/10">
|
|
|
<span class="absolute inset-0 bg-primary translate-y-full transition-transform duration-300 ease-out group-hover/btn:translate-y-0"></span>
|
|
|
<span class="relative z-10 flex justify-center items-center gap-2">
|
|
|
View Data Sheet
|
|
|
<span class="material-symbols-outlined text-base transition-transform group-hover/btn:translate-x-1"></span>
|
|
|
</span>
|
|
|
</button>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Product Card 2 -->
|
|
|
<div class="group relative bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-[0_20px_40px_rgba(0,0,0,0.05)] transition-all duration-500 hover:-translate-y-2 md:translate-y-8 border border-white/50" data-aos="fade-up" data-aos-delay="200">
|
|
|
<div class="h-64 w-full bg-[#f0f7f5] overflow-hidden relative skeleton-wrapper skeleton-pulse">
|
|
|
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105 lazy-target" data-alt="Utility Scale Storage"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/01/upload_1768787975.png"></div>
|
|
|
<div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-colors"></div>
|
|
|
</div>
|
|
|
<div class="p-8">
|
|
|
<div class="flex justify-between items-start mb-2">
|
|
|
<h3 class="text-xl text-[#0d1b17]">NH-ICS180-261</h3>
|
|
|
<span class="material-symbols-outlined text-primary"></span>
|
|
|
</div>
|
|
|
<p class="text-[#0d1b17]/60 text-sm leading-relaxed line-clamp-4">The NH-ICS180-261 ESS Charger integrates high-capacity energy storage with ultra-fast EV charging in one compact system. Featuring 180kW max output, compatibility with global standards...</p>
|
|
|
<div class="space-y-3 mb-8 mt-6">
|
|
|
<div class="flex justify-between items-center text-sm border-b border-slate-100 pb-2">
|
|
|
<span class="text-slate-400 font-medium">Capacity</span>
|
|
|
<span class=" text-[#0d1b17] text-right">186 / 261 kWh</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between items-center text-sm border-b border-slate-100 pb-2">
|
|
|
<span class="text-slate-400 font-medium">Max. Efficiency</span>
|
|
|
<span class=" text-[#0d1b17] text-right">≥ 95%</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between items-center text-sm border-b border-slate-100 pb-2">
|
|
|
<span class="text-slate-400 font-medium">Cycle Life</span>
|
|
|
<span class=" text-[#0d1b17] text-right">≥ 8,000 times</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a href="https://nenghui.com/products/nh-ics180-261/" target="_blank" rel="noopener noreferrer" class="inline-block w-full">
|
|
|
<button class="group/btn relative w-full overflow-hidden rounded bg-transparent py-3 text-sm uppercase tracking-widest text-[#0d1b17] transition-colors hover:text-[#0d1b17] border border-[#0d1b17]/10">
|
|
|
<span class="absolute inset-0 bg-primary translate-y-full transition-transform duration-300 ease-out group-hover/btn:translate-y-0"></span>
|
|
|
<span class="relative z-10 flex justify-center items-center gap-2">
|
|
|
View Data Sheet
|
|
|
<span class="material-symbols-outlined text-base transition-transform group-hover/btn:translate-x-1"></span>
|
|
|
</span>
|
|
|
</button>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Product Card 3 -->
|
|
|
<div class="group relative bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-[0_20px_40px_rgba(0,0,0,0.05)] transition-all duration-500 hover:-translate-y-2 border border-white/50" data-aos="fade-up" data-aos-delay="400">
|
|
|
<div class="h-64 w-full bg-[#f0f7f5] overflow-hidden relative skeleton-wrapper skeleton-pulse">
|
|
|
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105 lazy-target" data-alt="Solar String Inverter"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/01/N20HC5000-1.png"></div>
|
|
|
<div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-colors"></div>
|
|
|
</div>
|
|
|
<div class="p-8">
|
|
|
<div class="flex justify-between items-start mb-2">
|
|
|
<h3 class="text-xl text-[#0d1b17]">Liquid-cooled ESS Container 5MWh</h3>
|
|
|
<span class="material-symbols-outlined text-primary"></span>
|
|
|
</div>
|
|
|
<p class="text-[#0d1b17]/60 text-sm leading-relaxed line-clamp-4">Liquid-cooled thermal control ensures ±4°C cell uniformity, extending lifespan by 30% and achieving >95% efficiency for grid, solar, and industrial applications.</p>
|
|
|
<div class="space-y-3 mb-8 mt-6">
|
|
|
<div class="flex justify-between items-center text-sm border-b border-slate-100 pb-2">
|
|
|
<span class="text-slate-400 font-medium">Capacity</span>
|
|
|
<span class=" text-[#0d1b17] text-right">5,015 kWh</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between items-center text-sm border-b border-slate-100 pb-2">
|
|
|
<span class="text-slate-400 font-medium">Max. Efficiency</span>
|
|
|
<span class=" text-[#0d1b17] text-right">≥93%@25±3℃, 0.5C</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between items-center text-sm border-b border-slate-100 pb-2">
|
|
|
<span class="text-slate-400 font-medium">IP Rating</span>
|
|
|
<span class=" text-[#0d1b17] text-right">IP55</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a href="https://nenghui.com/products/n20hc5000/" target="_blank" rel="noopener noreferrer" class="inline-block w-full">
|
|
|
<button class="group/btn relative w-full overflow-hidden rounded bg-transparent py-3 text-sm uppercase tracking-widest text-[#0d1b17] transition-colors hover:text-[#0d1b17] border border-[#0d1b17]/10">
|
|
|
<span class="absolute inset-0 bg-primary translate-y-full transition-transform duration-300 ease-out group-hover/btn:translate-y-0"></span>
|
|
|
<span class="relative z-10 flex justify-center items-center gap-2">
|
|
|
View Data Sheet
|
|
|
<span class="material-symbols-outlined text-base transition-transform group-hover/btn:translate-x-1"></span>
|
|
|
</span>
|
|
|
</button>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="text-center mt-2" data-aos="fade-up">
|
|
|
<a href="/pros">
|
|
|
<button class="inline-flex items-center gap-2 px-8 py-3 rounded-full bg-[#0d1b17] text-white hover:bg-primary hover:text-[#0d1b17] transition-all shadow-lg hover:shadow-primary/25">
|
|
|
View All Storage Products
|
|
|
<span class="material-symbols-outlined text-sm"></span>
|
|
|
</button>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Tab Content: Services -->
|
|
|
<div class="hidden peer-checked/services:flex flex-col gap-10 animate-fade-in">
|
|
|
<div class="group relative bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-[0_20px_40px_rgba(0,0,0,0.05)] transition-all duration-500 border border-white/50 max-w-5xl mx-auto w-full" data-aos="fade-up">
|
|
|
<div class="flex flex-col md:flex-row h-full">
|
|
|
|
|
|
<!-- Left Section: Image Swiper (FIXED HEIGHT FOR MOBILE) -->
|
|
|
<div class="w-full md:w-5/12 relative h-[300px] sm:h-[350px] md:h-auto overflow-hidden shrink-0">
|
|
|
<div class="swiper serviceImageSwiper absolute inset-0 w-full h-full">
|
|
|
<div class="swiper-wrapper">
|
|
|
<div class="swiper-slide relative h-full w-full bg-[#f0f7f5] skeleton-wrapper skeleton-pulse">
|
|
|
<div class="lazy-target absolute inset-0 bg-cover bg-center transition-transform duration-[5s] ease-linear scale-100 hover:scale-110"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/home-page-1.jpg"
|
|
|
aria-label="Engineering Services">
|
|
|
</div>
|
|
|
<div class="absolute inset-0 bg-black/10"></div>
|
|
|
</div>
|
|
|
<div class="swiper-slide relative h-full w-full bg-[#f0f7f5] skeleton-wrapper skeleton-pulse">
|
|
|
<div class="lazy-target absolute inset-0 bg-cover bg-center transition-transform duration-[5s] ease-linear scale-100 hover:scale-110"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/home-page-2.jpg"
|
|
|
aria-label="Smart Grid">
|
|
|
</div>
|
|
|
<div class="absolute inset-0 bg-black/10"></div>
|
|
|
</div>
|
|
|
<div class="swiper-slide relative h-full w-full bg-[#f0f7f5] skeleton-wrapper skeleton-pulse">
|
|
|
<div class="lazy-target absolute inset-0 bg-cover bg-center transition-transform duration-[5s] ease-linear scale-100 hover:scale-110"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/home-page-3.jpg"
|
|
|
aria-label="O&M Services">
|
|
|
</div>
|
|
|
<div class="absolute inset-0 bg-black/10"></div>
|
|
|
</div>
|
|
|
<div class="swiper-slide relative h-full w-full bg-[#f0f7f5] skeleton-wrapper skeleton-pulse">
|
|
|
<div class="lazy-target absolute inset-0 bg-cover bg-center transition-transform duration-[5s] ease-linear scale-100 hover:scale-110"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/home-page-4.jpg"
|
|
|
aria-label="O&M Services">
|
|
|
</div>
|
|
|
<div class="absolute inset-0 bg-black/10"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="swiper-pagination !bottom-6"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Right Section: Content -->
|
|
|
<div class="flex-1 p-8 md:p-12 flex flex-col justify-center">
|
|
|
<div class="flex justify-between items-start mb-6">
|
|
|
<div>
|
|
|
<h3 class="text-2xl md:text-3xl text-[#0d1b17]">Turnkey Energy Services</h3>
|
|
|
<h3 class="text-2xl md:text-3xl text-[#0d1b17]">(EPC & EMC/PPA)</h3>
|
|
|
</div>
|
|
|
<span class="material-symbols-outlined text-primary text-4xl"></span>
|
|
|
</div>
|
|
|
<div class="text-[#0d1b17]/70 text-base md:text-lg leading-relaxed mb-8">
|
|
|
<ul class="space-y-3">
|
|
|
<li class="flex items-start gap-2">
|
|
|
<span class="w-1.5 h-1.5 rounded-full bg-primary mt-2.5 shrink-0"></span>
|
|
|
<span>Total Solutions: Full-lifecycle EPC (Design, Procurement, Construction) and BOT (Build-Operate-Transfer) models.</span>
|
|
|
</li>
|
|
|
<li class="flex items-start gap-2">
|
|
|
<span class="w-1.5 h-1.5 rounded-full bg-primary mt-2.5 shrink-0"></span>
|
|
|
<span>Energy Management: Performance-based EMC/PPA models focusing on energy efficiency and profit-sharing.</span>
|
|
|
</li>
|
|
|
<li class="flex items-start gap-2">
|
|
|
<span class="w-1.5 h-1.5 rounded-full bg-primary mt-2.5 shrink-0"></span>
|
|
|
<span>Expert Consulting: Technical feasibility studies, grid connection, and policy compliance.</span>
|
|
|
</li>
|
|
|
<li class="flex items-start gap-2">
|
|
|
<span class="w-1.5 h-1.5 rounded-full bg-primary mt-2.5 shrink-0"></span>
|
|
|
<span>Smart O&M: 24/7 intelligent monitoring, maintenance, and system optimization.</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="text-center mt-2" data-aos="fade-up">
|
|
|
<a href="/epc-emc/">
|
|
|
<button class="inline-flex items-center gap-2 px-8 py-3 rounded-full bg-[#0d1b17] text-white hover:bg-primary hover:text-[#0d1b17] transition-all shadow-lg hover:shadow-primary/25">
|
|
|
View Full Service Portfolio
|
|
|
<span class="material-symbols-outlined text-sm"></span>
|
|
|
</button>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Tab Content: Microgrids -->
|
|
|
<div class="hidden peer-checked/microgrids:flex flex-col gap-10 animate-fade-in">
|
|
|
<div class="group relative bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-[0_20px_40px_rgba(0,0,0,0.05)] transition-all duration-500 border border-white/50 max-w-5xl mx-auto w-full" data-aos="fade-up">
|
|
|
<div class="flex flex-col md:flex-row h-full">
|
|
|
|
|
|
<!-- Left Section: Image Swiper (FIXED HEIGHT FOR MOBILE) -->
|
|
|
<div class="w-full md:w-5/12 relative h-[300px] sm:h-[350px] md:h-auto overflow-hidden shrink-0">
|
|
|
<div class="swiper serviceImageSwiper absolute inset-0 w-full h-full">
|
|
|
<div class="swiper-wrapper">
|
|
|
<div class="swiper-slide relative h-full w-full bg-[#f0f7f5] skeleton-wrapper skeleton-pulse">
|
|
|
<div class="lazy-target absolute inset-0 bg-cover bg-center transition-transform duration-[5s] ease-linear scale-100 hover:scale-110"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/03/home-microgrid.jpg"
|
|
|
aria-label="Engineering Services">
|
|
|
</div>
|
|
|
<div class="absolute inset-0 bg-black/10"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="swiper-pagination !bottom-6"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Right Section: Content -->
|
|
|
<div class="flex-1 p-8 md:p-12 flex flex-col justify-center">
|
|
|
<div class="flex justify-between items-start mb-6">
|
|
|
<div>
|
|
|
<h3 class="text-2xl md:text-3xl text-[#0d1b17]">Reliable Microgrid Solutions </h3>
|
|
|
<h4 class="text-2xl md:text-3xl text-[#0d1b17]">Engineering a Greener Grid</h4>
|
|
|
</div>
|
|
|
<span class="material-symbols-outlined text-primary text-4xl"></span>
|
|
|
</div>
|
|
|
|
|
|
<div class="text-[#0d1b17]/70 text-base md:text-lg leading-relaxed mb-8">
|
|
|
<ul class="space-y-3">
|
|
|
<li class="flex items-start gap-2">
|
|
|
<span>From industrial parks to remote islands, Nenghui delivers end-to-end Microgrid EPC services. Our systems optimize the synergy between PV and ESS, providing seamless power switching and maximized energy efficiency. Experience the next generation of decentralized power infrastructure.</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="text-center mt-2" data-aos="fade-up">
|
|
|
<a href="/microgrid/">
|
|
|
<button class="inline-flex items-center gap-2 px-8 py-3 rounded-full bg-[#0d1b17] text-white hover:bg-primary hover:text-[#0d1b17] transition-all shadow-lg hover:shadow-primary/25">
|
|
|
View Case Studies
|
|
|
<span class="material-symbols-outlined text-sm"></span>
|
|
|
</button>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Global Grid Section -->
|
|
|
<!-- Global Grid Section (Mobile Layout Fixed: Title -> Card -> Map) -->
|
|
|
<section class="py-12 md:py-16 px-4 md:px-6 bg-[#f8fcfa]" id="regional">
|
|
|
<div class="layout-container max-w-[1280px] mx-auto">
|
|
|
<div class="bg-[#10221c] rounded-[2rem] md:rounded-[3rem] p-0 relative overflow-hidden text-white shadow-2xl h-auto md:h-[90vh] min-h-[900px] md:min-h-[650px] max-h-none md:max-h-[900px] flex flex-col group/map" data-aos="zoom-in" data-aos-duration="1000">
|
|
|
|
|
|
<!-- Background Aesthetic -->
|
|
|
<div class="absolute inset-0 bg-[radial-gradient(circle_at_center,_#1a332a_0%,_#10221c_80%)]"></div>
|
|
|
<div class="absolute inset-0 globe-grid opacity-10 pointer-events-none"></div>
|
|
|
|
|
|
<!-- 1. 顶部标题栏 (Extracted to Top) -->
|
|
|
<!-- Always visible at the very top, non-blocking -->
|
|
|
<div class="relative z-30 w-full p-6 md:p-10 pointer-events-none shrink-0">
|
|
|
<div class="pointer-events-auto inline-block" data-aos="fade-right">
|
|
|
<h2 class="text-3xl mb-2 tracking-tight text-white">Integrated Renewable Energy Infrastructure</h2>
|
|
|
<p class="text-primary/80 text-xs md:text-sm font-mono tracking-wide flex items-center gap-2">
|
|
|
<span class="relative flex h-2 w-2">
|
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
|
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
|
|
|
</span>
|
|
|
REGIONAL HUBS ACTIVE
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Flex Container for Main Content (Card + Map) -->
|
|
|
<div class="relative z-20 w-full flex flex-col md:flex-row flex-grow pointer-events-none">
|
|
|
|
|
|
<!-- 2. 信息卡片区域 (Mobile: Top / Desktop: Right Side) -->
|
|
|
<!-- Mobile: Order 1 (Appears below title, above map) -->
|
|
|
<div class="w-full md:w-1/4 relative order-1 md:order-2 px-6 pb-4 md:pb-0 pointer-events-auto flex flex-col justify-start md:justify-center z-40 shrink-0">
|
|
|
<!-- Card Container -->
|
|
|
<!-- 详情卡片 (Updated Layout for Description & Tags) -->
|
|
|
<div class="relative md:absolute md:right-10 md:top-1/3 md:-translate-y-1/2 w-full transition-all duration-500 ease-out" id="region-info-card">
|
|
|
<div class="bg-[#0f221e]/90 backdrop-blur-xl rounded-2xl p-5 md:p-6 border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.3)]">
|
|
|
|
|
|
<!-- 1. Header: Location Badge -->
|
|
|
<div class="flex justify-between items-center mb-3 border-b border-white/5 pb-3">
|
|
|
<div class="flex items-center gap-2">
|
|
|
<span class="w-1.5 h-1.5 rounded-full bg-primary animate-pulse"></span>
|
|
|
<span class="text-[10px] uppercase tracking-widest text-primary">Regional Hub</span>
|
|
|
</div>
|
|
|
<div class="flex items-center gap-1 text-gray-400">
|
|
|
<span class="material-symbols-outlined text-[12px]"></span>
|
|
|
<span class="text-[10px] font-mono text-white uppercase tracking-wider" id="card-loc">Shanghai, China</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 2. Office Title & Lead -->
|
|
|
<div class="mb-3">
|
|
|
<h4 class="text-xl md:text-2xl text-white mb-1 leading-tight" id="card-office">Global Headquarters</h4>
|
|
|
<p class="text-xs text-primary/80 font-mono">
|
|
|
Lead: <span id="card-name" class="text-white ">Sabrina.Zhang</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<!-- 3. Description (New Field) -->
|
|
|
<div class="mb-4">
|
|
|
<p class="text-gray-300 text-xs leading-relaxed border-l-2 border-primary/20 pl-3" id="card-des">
|
|
|
The central hub for innovation, orchestrating global supply chains...
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<!-- 4. Focus Tags (Generated from JS) -->
|
|
|
<div class="flex flex-wrap gap-2 mb-5" id="card-focus-container">
|
|
|
<!-- Tags will be injected here -->
|
|
|
</div>
|
|
|
|
|
|
<!-- 5. Contact Grid -->
|
|
|
<div class="flex flex-col gap-2">
|
|
|
<!-- Phone -->
|
|
|
<a id="link-phone" href="#" class="flex items-center gap-3 p-2 rounded hover:bg-white/10 transition-colors group/contact cursor-pointer border border-transparent hover:border-white/5">
|
|
|
<div class="size-8 rounded-full bg-primary/10 text-primary flex items-center justify-center shrink-0 group-hover/contact:bg-primary group-hover/contact:text-[#0d1b17] transition-colors">
|
|
|
<span class="material-symbols-outlined text-sm"></span>
|
|
|
</div>
|
|
|
<div class="overflow-hidden">
|
|
|
<span class="text-[9px] text-gray-500 block uppercase tracking-wider">Phone / WhatsApp</span>
|
|
|
<span class="text-sm font-mono text-white truncate block underline decoration-white/30 decoration-dashed underline-offset-4 group-hover/contact:decoration-solid" id="card-phone">
|
|
|
+86 ...
|
|
|
</span>
|
|
|
</div>
|
|
|
<span class="material-symbols-outlined text-gray-500 text-sm ml-auto group-hover/contact:text-primary opacity-0 group-hover/contact:opacity-100 transition-opacity"></span>
|
|
|
</a>
|
|
|
|
|
|
<!-- Email -->
|
|
|
<a id="link-email" href="#" class="flex items-center gap-3 p-2 rounded hover:bg-white/10 transition-colors group/contact cursor-pointer border border-transparent hover:border-white/5">
|
|
|
<div class="size-8 rounded-full bg-blue-500/10 text-blue-400 flex items-center justify-center shrink-0 group-hover/contact:bg-blue-500 group-hover/contact:text-white transition-colors">
|
|
|
<span class="material-symbols-outlined text-sm"></span>
|
|
|
</div>
|
|
|
<div class="overflow-hidden">
|
|
|
<span class="text-[9px] text-gray-500 block uppercase tracking-wider">Email</span>
|
|
|
<span class="text-sm font-mono text-white truncate block underline decoration-white/30 decoration-dashed underline-offset-4 group-hover/contact:decoration-solid" id="card-email">
|
|
|
contact@nenghui.com
|
|
|
</span>
|
|
|
</div>
|
|
|
<span class="material-symbols-outlined text-gray-500 text-sm ml-auto group-hover/contact:text-blue-400 opacity-0 group-hover/contact:opacity-100 transition-opacity"></span>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 3. 地球视觉区域 (Mobile: Bottom / Desktop: Left Side) -->
|
|
|
<!-- Mobile: Order 2 (Appears after card) -->
|
|
|
<div class="w-full md:w-3/4 flex flex-col relative h-[500px] md:h-full order-2 md:order-1">
|
|
|
<div class="absolute inset-0 z-10 flex items-center justify-center md:justify-end md:right-20 overflow-visible pointer-events-none">
|
|
|
<div class="relative w-[300px] h-[300px] sm:w-[500px] sm:h-[500px] md:w-[750px] md:h-[750px] rounded-full flex items-center justify-center pointer-events-auto transition-transform duration-1000 md:-translate-x-[10%]" id="globe-container">
|
|
|
|
|
|
<div class="absolute inset-0 rounded-full bg-[#0f2a22] shadow-[inset_-40px_-40px_100px_rgba(0,0,0,0.9),inset_20px_20px_60px_rgba(255,255,255,0.05),0_0_80px_rgba(19,236,164,0.05)] overflow-hidden border border-primary/10">
|
|
|
<div class="absolute inset-0 bg-cover bg-center opacity-40 mix-blend-overlay" style="background-image: url('https://nenghui.com/wp-content/uploads/2026/02/home-map-unnamed.png');"></div>
|
|
|
|
|
|
<!-- Map Dots -->
|
|
|
<!-- P0: Shanghai -->
|
|
|
<div id="dot-p0" class="globe-dot absolute top-[45%] left-[82%] cursor-pointer group active" onclick="updateRegion(0)">
|
|
|
<div class="active-radar absolute -inset-6 border border-primary/30 rounded-full opacity-0 scale-50 transition-all duration-1000 ease-out pointer-events-none"></div>
|
|
|
<div class="active-radar-2 absolute -inset-10 border border-primary/10 rounded-full opacity-0 scale-50 transition-all duration-1000 ease-out delay-100 pointer-events-none"></div>
|
|
|
<div class="dot-core w-3 h-3 bg-white rounded-full shadow-[0_0_15px_white] z-10 relative transition-all duration-300 group-hover:scale-125"></div>
|
|
|
<div class="dot-ping absolute inset-0 -m-1 bg-white/30 rounded-full animate-ping"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- P1: Netherlands -->
|
|
|
<div id="dot-p1" class="globe-dot absolute top-[38%] left-[47%] cursor-pointer group" onclick="updateRegion(1)">
|
|
|
<div class="active-radar absolute -inset-6 border border-blue-400/30 rounded-full opacity-0 scale-50 transition-all duration-1000 ease-out pointer-events-none"></div>
|
|
|
<div class="dot-core w-2.5 h-2.5 bg-blue-400 rounded-full shadow-[0_0_10px_#60a5fa] z-10 relative transition-all duration-300 group-hover:scale-125"></div>
|
|
|
<div class="dot-ping absolute inset-0 -m-1 bg-blue-400/30 rounded-full animate-ping"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- P2: Iraq -->
|
|
|
<div id="dot-p2" class="globe-dot absolute top-[45%] left-[58%] cursor-pointer group" onclick="updateRegion(2)">
|
|
|
<div class="active-radar absolute -inset-6 border border-orange-400/30 rounded-full opacity-0 scale-50 transition-all duration-1000 ease-out pointer-events-none"></div>
|
|
|
<div class="dot-core w-2.5 h-2.5 bg-orange-400 rounded-full shadow-[0_0_12px_#fb923c] z-10 relative transition-all duration-300 group-hover:scale-125"></div>
|
|
|
<div class="dot-ping absolute inset-0 -m-1 bg-orange-400/30 rounded-full animate-ping"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- P3: Thailand -->
|
|
|
<div id="dot-p3" class="globe-dot absolute top-[51%] left-[78%] cursor-pointer group" onclick="updateRegion(3)">
|
|
|
<div class="active-radar absolute -inset-6 border border-teal-400/30 rounded-full opacity-0 scale-50 transition-all duration-1000 ease-out pointer-events-none"></div>
|
|
|
<div class="dot-core w-2.5 h-2.5 bg-teal-400 rounded-full shadow-[0_0_10px_#2dd4bf] z-10 relative transition-all duration-300 group-hover:scale-125"></div>
|
|
|
<div class="dot-ping absolute inset-0 -m-1 bg-teal-400/30 rounded-full animate-ping"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- P4: Cambodia -->
|
|
|
<div id="dot-p4" class="globe-dot absolute top-[52%] left-[78.5%] cursor-pointer group" onclick="updateRegion(4)">
|
|
|
<div class="active-radar absolute -inset-6 border border-purple-400/30 rounded-full opacity-0 scale-50 transition-all duration-1000 ease-out pointer-events-none"></div>
|
|
|
<div class="dot-core w-2.5 h-2.5 bg-purple-400 rounded-full shadow-[0_0_10px_#c084fc] z-10 relative transition-all duration-300 group-hover:scale-125"></div>
|
|
|
<div class="dot-ping absolute inset-0 -m-1 bg-purple-400/30 rounded-full animate-ping"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 4. 底部卡片容器 (Bottom Cards) -->
|
|
|
<div class="relative z-30 w-full pb-6 mt-auto pointer-events-none flex justify-center items-center order-3">
|
|
|
<div class="flex overflow-x-auto gap-4 px-6 hide-scrollbar snap-x scroll-smooth pointer-events-auto" id="project-cards-container">
|
|
|
<!-- JS will inject cards here -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<!-- Why Us Section (Redesigned: Bento Grid Layout) -->
|
|
|
<!-- Why Us Section (Redesigned: 3+2 Layout) -->
|
|
|
<section class="py-24 relative overflow-hidden bg-gradient-to-b from-transparent to-[#f0f7f5]/50" id="tech">
|
|
|
|
|
|
<!-- Background Decorative Blobs -->
|
|
|
<div class="absolute left-0 top-1/4 w-[500px] h-[500px] bg-primary/5 rounded-full blur-3xl -z-10 mix-blend-multiply"></div>
|
|
|
<div class="absolute right-0 bottom-0 w-[600px] h-[600px] bg-blue-100/20 rounded-full blur-3xl -z-10 mix-blend-multiply"></div>
|
|
|
|
|
|
<div class="layout-container max-w-[1280px] mx-auto px-6">
|
|
|
<!-- Section Header -->
|
|
|
<div class="text-center max-w-4xl mx-auto mb-16" data-aos="fade-up">
|
|
|
<h2 class="text-4xl md:text-[2.66rem] text-[#0d1b17] leading-tight mb-6">
|
|
|
Why Partner with NENGHUI?
|
|
|
</h2>
|
|
|
<p class="text-[1rem] text-[#0d1b17]/70 leading-relaxed font-light">
|
|
|
Engineering trust through decades of expertise, design innovation, and global compliance.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<!-- Bento Grid Layout (3 Top, 2 Bottom) -->
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6">
|
|
|
|
|
|
<!-- 1. Proven Delivery Excellence (Dark Theme) -->
|
|
|
<div class="lg:col-span-2 group relative rounded-[2.5rem] bg-[#0d1b17] text-white overflow-hidden p-8 flex flex-col hover:shadow-2xl transition-all duration-500" data-aos="fade-up" data-aos-delay="0">
|
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full blur-2xl -mr-10 -mt-10"></div>
|
|
|
|
|
|
<div class="size-12 rounded-xl bg-white/10 flex items-center justify-center border border-white/10 mb-6 group-hover:scale-110 group-hover:bg-primary group-hover:text-[#0d1b17] transition-all duration-300">
|
|
|
<span class="material-symbols-outlined text-2xl"></span>
|
|
|
</div>
|
|
|
|
|
|
<h3 class="text-xl mb-3">Proven Delivery Excellence</h3>
|
|
|
<p class="text-white/70 text-sm leading-relaxed mb-4 flex-grow">
|
|
|
With years of consistent contract fulfillment and project execution, we ensure reliability in every commitment. Our robust operational capacity guarantees your energy transition is in safe hands.
|
|
|
</p>
|
|
|
|
|
|
<div class="mt-auto pt-4 border-t border-white/10">
|
|
|
<span class="text-[10px] tracking-widest text-primary uppercase">Reliable Execution</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 2. 16 Years Leadership (Light Theme, Dynamic JS) -->
|
|
|
<div class="lg:col-span-2 group relative rounded-[2.5rem] bg-white border border-white/60 shadow-sm overflow-hidden p-8 flex flex-col hover:-translate-y-2 hover:shadow-xl transition-all duration-500" data-aos="fade-up" data-aos-delay="100">
|
|
|
<div class="absolute -right-10 -top-10 w-32 h-32 bg-blue-50 rounded-full blur-2xl group-hover:scale-150 transition-transform"></div>
|
|
|
|
|
|
<div class="size-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center mb-6 group-hover:scale-150 transition-transform duration-300">
|
|
|
<span class="material-symbols-outlined text-2xl"></span>
|
|
|
</div>
|
|
|
|
|
|
<h3 class="text-xl text-[#0d1b17] mb-3">
|
|
|
<span id="dynamic-years-title">16</span> Years of Technical Leadership
|
|
|
</h3>
|
|
|
<p class="text-[#0d1b17]/60 text-sm leading-relaxed mb-4 flex-grow">
|
|
|
Founded by a technical expert team, we have remained dedicated to the energy sector for <span id="dynamic-years-text" class=" text-[#0d1b17]">16</span> years. Our deep-rooted engineering DNA drives continuous innovation and professional rigor in everything we build.
|
|
|
</p>
|
|
|
|
|
|
<div class="mt-auto pt-4 border-t border-gray-100">
|
|
|
<span class="text-[10px] tracking-widest text-blue-600 uppercase">Since <span id="dynamic-years-value">2009</span></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 3. Design-Driven Evolution (Gradient Theme) -->
|
|
|
<div class="lg:col-span-2 group relative rounded-[2.5rem] bg-gradient-to-br from-primary/10 to-white border border-primary/20 shadow-sm overflow-hidden p-8 flex flex-col hover:-translate-y-2 hover:shadow-xl transition-all duration-500" data-aos="fade-up" data-aos-delay="200">
|
|
|
<div class="size-12 rounded-xl bg-white text-primary shadow-sm flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
|
|
|
<span class="material-symbols-outlined text-2xl"></span>
|
|
|
</div>
|
|
|
|
|
|
<h3 class="text-xl text-[#0d1b17] mb-3">Design-Driven Evolution</h3>
|
|
|
<p class="text-[#0d1b17]/60 text-sm leading-relaxed mb-4 flex-grow">
|
|
|
Originating from the power industry, NENGHUI has evolved into a specialist in clean energy design and engineering. We provide high-value services, working heart-to-heart with global partners to create sustainable impact.
|
|
|
</p>
|
|
|
|
|
|
<div class="mt-auto pt-4 border-t border-primary/10">
|
|
|
<span class="text-[10px] tracking-widest text-primary uppercase">High-Value Services</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 5. Certified Global Quality (Wide, Badges Right) -->
|
|
|
<div class="lg:col-span-3 group relative rounded-[2.5rem] bg-white border border-gray-100 shadow-sm overflow-hidden p-8 flex flex-col md:flex-row items-center gap-8 hover:shadow-xl transition-all duration-500" data-aos="fade-up" data-aos-delay="400">
|
|
|
<div class="absolute -left-10 -bottom-10 w-40 h-40 bg-gray-50 rounded-full blur-2xl -z-10"></div>
|
|
|
|
|
|
<div class="flex-1 relative z-10">
|
|
|
<div class="size-12 rounded-xl bg-gray-100 text-gray-700 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
|
|
|
<span class="material-symbols-outlined text-2xl"></span>
|
|
|
</div>
|
|
|
<h3 class="text-xl text-[#0d1b17] mb-3">Certified Global Quality</h3>
|
|
|
<p class="text-[#0d1b17]/60 text-sm leading-relaxed">
|
|
|
Our products and processes meet stringent domestic and international standards. With comprehensive global certifications, we ensure seamless market entry and long-term operational safety across the world.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<!-- Certification Visuals -->
|
|
|
<div class="flex gap-3 flex-wrap justify-center md:justify-end w-full md:w-auto md:flex-col">
|
|
|
<div class="flex flex-col items-center gap-1 group/badge">
|
|
|
<div class="h-12 w-12 rounded-full border border-gray-100 bg-white shadow-sm flex items-center justify-center text-[10px] text-[#004084] group-hover/badge:-translate-y-1 transition-transform">TÜV</div>
|
|
|
<span class="text-[8px] text-gray-400 uppercase tracking-wider">Safety</span>
|
|
|
</div>
|
|
|
<div class="flex flex-col items-center gap-1 group/badge">
|
|
|
<div class="h-12 w-12 rounded-full border border-gray-100 bg-white shadow-sm flex items-center justify-center text-[10px] text-black group-hover/badge:-translate-y-1 transition-transform delay-75">CE</div>
|
|
|
<span class="text-[8px] text-gray-400 uppercase tracking-wider">EU Std</span>
|
|
|
</div>
|
|
|
<div class="flex flex-col items-center gap-1 group/badge">
|
|
|
<div class="h-12 w-12 rounded-full border border-gray-100 bg-white shadow-sm flex items-center justify-center text-[10px] text-[#D32026] group-hover/badge:-translate-y-1 transition-transform delay-150">UL</div>
|
|
|
<span class="text-[8px] text-gray-400 uppercase tracking-wider">US Std</span>
|
|
|
</div>
|
|
|
<div class="flex flex-col items-center gap-1 group/badge">
|
|
|
<div class="h-12 w-12 bg-white flex items-center justify-center text-[10px] ">...</div>
|
|
|
<span class="text-[8px] text-gray-400 uppercase tracking-wider"></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 4. Tailored Multi-Scenario Solutions (Wide, Image Left) -->
|
|
|
<div class="lg:col-span-3 group relative rounded-[2.5rem] bg-[#f0f7f5] border border-white/60 shadow-sm overflow-hidden p-8 flex flex-col md:flex-row items-center gap-8 hover:shadow-xl transition-all duration-500" data-aos="fade-up" data-aos-delay="300">
|
|
|
|
|
|
<div class="flex-1 relative z-10 order-2 md:order-1">
|
|
|
<div class="size-12 rounded-xl bg-teal-100/50 text-teal-700 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
|
|
|
<span class="material-symbols-outlined text-2xl"></span>
|
|
|
</div>
|
|
|
<h3 class="text-xl text-[#0d1b17] mb-3">Tailored Multi-Scenario Solutions</h3>
|
|
|
<p class="text-[#0d1b17]/60 text-sm leading-relaxed">
|
|
|
We offer a full spectrum of energy assets, including Solar, ESS, and EV Charging infrastructure. From microgrids to grid-scale projects, our integrated "Solar + Storage + Charging" solutions meet diverse global demands
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<!-- Visual -->
|
|
|
<div class="skeleton-wrapper skeleton-pulse w-full md:w-5/12 h-40 md:h-full min-h-[160px] relative rounded-2xl overflow-hidden shadow-sm group-hover:shadow-md transition-all duration-500 order-1 md:order-2">
|
|
|
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110 lazy-target"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/home-page-sun.avif"></div>
|
|
|
<div class="absolute inset-0 bg-teal-900/10 mix-blend-overlay"></div>
|
|
|
<div class="absolute bottom-2 left-2 bg-black/40 backdrop-blur-md px-2 py-1 rounded text-[9px] text-white uppercase">
|
|
|
Solar + Storage + Charging
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- CASES -->
|
|
|
<section class="py-24 bg-[#f0f7f5]" id="impact-stories">
|
|
|
<div class="layout-container max-w-[1280px] mx-auto px-6">
|
|
|
|
|
|
<!-- Header: Title & Custom Navigation -->
|
|
|
<div class="flex justify-between items-center mb-12" data-aos="fade-right">
|
|
|
<h2 class="text-4xl md:text-[2.66rem] text-[#0d1b17]">Cases</h2>
|
|
|
|
|
|
<!-- Custom Navigation Buttons -->
|
|
|
<div class="flex gap-2">
|
|
|
|
|
|
<button class="swiper-custom-prev size-10 rounded-full border border-[#0d1b17]/10 flex items-center justify-center hover:bg-white transition-colors cursor-pointer group z-10">
|
|
|
<span class="material-symbols-outlined group-hover:-translate-x-0.5 transition-transform"></span>
|
|
|
</button>
|
|
|
|
|
|
<button class="swiper-custom-next size-10 rounded-full bg-[#0d1b17] text-white flex items-center justify-center hover:bg-primary hover:text-[#0d1b17] transition-colors cursor-pointer group z-10">
|
|
|
<span class="material-symbols-outlined group-hover:translate-x-0.5 transition-transform"></span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Swiper Container -->
|
|
|
<!-- 注意：h-[500px] 固定高度，rounded-[2rem] 圆角 -->
|
|
|
<div class="swiper impactSwiper w-full h-[500px] rounded-[2rem] overflow-hidden shadow-2xl" data-aos="zoom-in">
|
|
|
<div class="swiper-wrapper">
|
|
|
<!-- Slide 4: California -->
|
|
|
<div class="swiper-slide relative w-full h-full">
|
|
|
<div class="absolute inset-0 bg-cover bg-center "
|
|
|
style="background-image: url("https://nenghui.com/wp-content/uploads/2026/02/home-case-iraq.jpg")"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/home-case-iraq.jpg"></div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
|
|
<div class="absolute bottom-0 left-0 w-full p-8 md:p-12">
|
|
|
<div class="max-w-2xl">
|
|
|
<span class="text-primary text-sm uppercase tracking-widest mb-2 block">IRAQ BESS - 2025</span>
|
|
|
<h3 class="text-3xl text-white mb-4">Empowering Iraq’s Grid with Smart BESS Technology </h3>
|
|
|
<p class="text-gray-200 text-lg mb-6 line-clamp-2">330kW/763kWh Turnkey EPC Project for Sustainable Industrial Power Management.</p>
|
|
|
<!-- <a class="text-white border-b border-white pb-1 hover:text-primary hover:border-primary transition-colors inline-block" href="https://nenghui.com/cases/spic-guizhou-jinyuan-group-120mwp-agricultural-solar-pv-power-station-2/">Read More</a> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Slide 41: California -->
|
|
|
<div class="swiper-slide relative w-full h-full ">
|
|
|
<div class="absolute inset-0 bg-cover bg-center lat"
|
|
|
style="background-image: url("https://nenghui.com/wp-content/uploads/2026/02/home-case-soar.jpg")"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/home-case-soar.jpg"></div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
|
|
<div class="absolute bottom-0 left-0 w-full p-8 md:p-12">
|
|
|
<div class="max-w-2xl">
|
|
|
<span class="text-primary text-sm uppercase tracking-widest mb-2 block">Excellence in Mountainous Solar Integration - 2024</span>
|
|
|
<h3 class="text-3xl text-white mb-4">Excellence in Mountainous Solar Integration </h3>
|
|
|
<p class="text-gray-200 text-lg mb-6 line-clamp-2">This signature project by Shanghai Nenghui Technology showcases our end-to-end capability in mountainous solar. From sophisticated grid connection to resilient structural engineering, we ensure long-term reliability in every peak we power.</p>
|
|
|
<!-- <a class="text-white border-b border-white pb-1 hover:text-primary hover:border-primary transition-colors inline-block" href="https://nenghui.com/cases/spic-guizhou-jinyuan-group-120mwp-agricultural-solar-pv-power-station-2/">Read More</a> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div> <!-- Slide 42: California -->
|
|
|
<div class="swiper-slide relative w-full h-full ">
|
|
|
<div class="absolute inset-0 bg-cover bg-center "
|
|
|
style="background-image: url("https://nenghui.com/wp-content/uploads/2026/02/home-case-arid.jpg")"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/home-case-arid.jpg"></div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
|
|
<div class="absolute bottom-0 left-0 w-full p-8 md:p-12">
|
|
|
<div class="max-w-2xl">
|
|
|
<span class="text-primary text-sm uppercase tracking-widest mb-2 block">We Power the Arid Frontier - 2023</span>
|
|
|
<h3 class="text-3xl text-white mb-4"> Innovative solar solutions tailored for the most demanding climates.</h3>
|
|
|
<p class="text-gray-200 text-lg mb-6 line-clamp-2">This landmark project showcases our ability to design and maintain high-efficiency PV plants in sandy and rocky deserts, setting a new benchmark for utility-scale solar.</p>
|
|
|
<!-- <a class="text-white border-b border-white pb-1 hover:text-primary hover:border-primary transition-colors inline-block" href="https://nenghui.com/cases/spic-guizhou-jinyuan-group-120mwp-agricultural-solar-pv-power-station-2/">Read More</a> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Slide 5: California -->
|
|
|
<div class="swiper-slide relative w-full h-full ">
|
|
|
<div class="absolute inset-0 bg-cover bg-center "
|
|
|
style="background-image: url("https://nenghui.com/wp-content/uploads/2026/02/home-case-zhuhai.jpg")"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/home-case-zhuhai.jpg"></div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
|
|
<div class="absolute bottom-0 left-0 w-full p-8 md:p-12">
|
|
|
<div class="max-w-2xl">
|
|
|
<span class="text-primary text-sm uppercase tracking-widest mb-2 block">Commercial ESS Project - 2019</span>
|
|
|
<h3 class="text-3xl text-white mb-4">Smart Energy, Zero Investment </h3>
|
|
|
<p class="text-gray-200 text-lg mb-6 line-clamp-2">NENGHUI-funded energy storage featuring smart C&I integration and lifetime performance guarantee.</p>
|
|
|
<!-- <a class="text-white border-b border-white pb-1 hover:text-primary hover:border-primary transition-colors inline-block" href="https://nenghui.com/cases/spic-guizhou-jinyuan-group-120mwp-agricultural-solar-pv-power-station-2/">Read More</a> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Slide 6: California -->
|
|
|
<div class="swiper-slide relative w-full h-full ">
|
|
|
<div class="absolute inset-0 bg-cover bg-center "
|
|
|
style="background-image: url("https://nenghui.com/wp-content/uploads/2026/02/home-case-zongcheng.jpg")"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/home-case-zongcheng.jpg"></div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
|
|
<div class="absolute bottom-0 left-0 w-full p-8 md:p-12">
|
|
|
<div class="max-w-2xl">
|
|
|
<span class="text-primary text-sm uppercase tracking-widest mb-2 block">Next-Gen EV Heavy Truck Powertrain - 2025</span>
|
|
|
<h3 class="text-3xl text-white mb-4">Pioneering Core Technology Breakthroughs</h3>
|
|
|
<p class="text-gray-200 text-lg mb-6 line-clamp-2">Delivering high-performance powertrain systems through intelligent manufacturing and advanced engineering.</p>
|
|
|
<!-- <a class="text-white border-b border-white pb-1 hover:text-primary hover:border-primary transition-colors inline-block" href="https://nenghui.com/cases/spic-guizhou-jinyuan-group-120mwp-agricultural-solar-pv-power-station-2/">Read More</a> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Slide 7: California -->
|
|
|
<div class="swiper-slide relative w-full h-full ">
|
|
|
<div class="absolute inset-0 bg-cover bg-center"
|
|
|
style="background-image: url("https://nenghui.com/wp-content/uploads/2026/02/home-case-qinzhou.jpg")"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/home-case-qinzhou.jpg"></div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
|
|
<div class="absolute bottom-0 left-0 w-full p-8 md:p-12">
|
|
|
<div class="max-w-2xl">
|
|
|
<span class="text-primary text-sm uppercase tracking-widest mb-2 block">Qinzhou 20MWp Fishing-Solar Hybrid Project - 2023</span>
|
|
|
<h3 class="text-3xl text-white mb-4">Sustainable Synergy of Energy & Aquaculture</h3>
|
|
|
<p class="text-gray-200 text-lg mb-6 line-clamp-2">A premier EPC turnkey solution integrating high-efficiency PV arrays with modern fishery ecosystems.</p>
|
|
|
<!-- <a class="text-white border-b border-white pb-1 hover:text-primary hover:border-primary transition-colors inline-block" href="https://nenghui.com/cases/spic-guizhou-jinyuan-group-120mwp-agricultural-solar-pv-power-station-2/">Read More</a> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Slide 1: California -->
|
|
|
<div class="swiper-slide relative w-full h-full ">
|
|
|
<div class="absolute inset-0 bg-cover bg-center "
|
|
|
style="background-image: url("https://nenghui.com/wp-content/uploads/2026/02/home-case-hybird.jpg")"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/home-case-hybird.jpg"></div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
|
|
<div class="absolute bottom-0 left-0 w-full p-8 md:p-12">
|
|
|
<div class="max-w-2xl">
|
|
|
<span class="text-primary text-sm uppercase tracking-widest mb-2 block">Innovative Agri-Solar Hybrid Project - 2024</span>
|
|
|
<h3 class="text-3xl text-white mb-4">Harmony of Energy & Agriculture</h3>
|
|
|
<p class="text-gray-200 text-lg mb-6 line-clamp-2">A high-efficiency EPC solution maximizing land value through integrated solar power and sustainable forestry.</p>
|
|
|
<!-- <a class="text-white border-b border-white pb-1 hover:text-primary hover:border-primary transition-colors inline-block" href="https://nenghui.com/cases/spic-guizhou-jinyuan-group-120mwp-agricultural-solar-pv-power-station-2/">Read More</a> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Slide 2: California -->
|
|
|
<div class="swiper-slide relative w-full h-full ">
|
|
|
<div class="absolute inset-0 bg-cover bg-center "
|
|
|
style="background-image: url("https://nenghui.com/wp-content/uploads/2026/02/home-case-120mw.png")"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/home-case-120mw.png"></div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
|
|
<div class="absolute bottom-0 left-0 w-full p-8 md:p-12">
|
|
|
<div class="max-w-2xl">
|
|
|
<span class="text-primary text-sm uppercase tracking-widest mb-2 block">120MWp Integrated Agrivoltaic Project - 2025</span>
|
|
|
<h3 class="text-3xl text-white mb-4">Excellence in EPC Delivery</h3>
|
|
|
<p class="text-gray-200 text-lg mb-6 line-clamp-2">A premier subsidized PV development featuring high-standard equipment and rigorous execution within Guizhou's premier million-kilowatt solar cluster.</p>
|
|
|
<!-- <a class="text-white border-b border-white pb-1 hover:text-primary hover:border-primary transition-colors inline-block" href="https://nenghui.com/cases/spic-guizhou-jinyuan-group-120mwp-agricultural-solar-pv-power-station-2/">Read More</a> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- New Module: Compliance & Global Certifications -->
|
|
|
<!-- 模块：国际合规与资质认证 -->
|
|
|
<!-- 模块：国际合规与资质认证 (默认彩色版) -->
|
|
|
<section class="py-24 bg-gradient-to-b from-white to-[#f0f7f5] border-t border-gray-100" id="compliance">
|
|
|
<div class="layout-container max-w-[1280px] mx-auto px-6 text-center">
|
|
|
|
|
|
<!-- 标题区域 -->
|
|
|
<div class="max-w-3xl mx-auto mb-20" data-aos="fade-up">
|
|
|
<h2 class="text-4xl md:text-[2.66rem] text-[#0d1b17] mb-4 tracking-tight">
|
|
|
Certified Reliability, Global Compliance
|
|
|
</h2>
|
|
|
<p class="text-[#0d1b17]/60 text-[1rem] font-light ">
|
|
|
Upholding the world’s most stringent standards for safety, quality, and environmental stewardship.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<!-- Logo 展示网格 -->
|
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-12 md:gap-8 items-end justify-items-center">
|
|
|
|
|
|
<!-- 1. TÜV Rheinland (蓝色) -->
|
|
|
<div class="group flex flex-col items-center justify-end h-32 w-full cursor-default" data-aos="fade-up" data-aos-delay="0">
|
|
|
<!-- 默认无滤镜，Hover时放大、上浮、增加彩色投影 -->
|
|
|
<div class="transition-all duration-300 ease-out group-hover:scale-110 group-hover:-translate-y-2 group-hover:drop-shadow-[0_10px_20px_rgba(0,64,132,0.25)]">
|
|
|
<span class="font-display text-5xl text-[#004084] tracking-tighter">TÜV</span>
|
|
|
</div>
|
|
|
<!-- 底部文字说明：默认隐藏，Hover时上滑显示 -->
|
|
|
<div class="h-6 mt-4 overflow-hidden">
|
|
|
<span class="block text-[10px] uppercase tracking-widest text-[#004084]/80 opacity-0 translate-y-4 transition-all duration-500 group-hover:opacity-100 group-hover:translate-y-0">
|
|
|
Safety Tested
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 2. CE (Fixed: Perfect Center Alignment) -->
|
|
|
<div class="group flex flex-col items-center justify-end h-32 w-full cursor-default" data-aos="fade-up" data-aos-delay="100">
|
|
|
|
|
|
<!-- SVG Container: Added w-full & justify-center to ensure horizontal centering -->
|
|
|
<div class="w-full flex justify-center transition-all duration-300 ease-out group-hover:scale-110 group-hover:-translate-y-2 group-hover:drop-shadow-[0_10px_20px_rgba(0,0,0,0.15)]">
|
|
|
<!-- Correct CE Logo: Tight ViewBox (No left padding) -->
|
|
|
<svg height="50" viewBox="0 0 52 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
<!-- C: Left Arc -->
|
|
|
<path d="M 16 8 A 12 12 0 1 0 16 32" stroke="#0d1b17" stroke-width="5" stroke-linecap="butt" />
|
|
|
|
|
|
<!-- E: Right Arc -->
|
|
|
<path d="M 42 8 A 12 12 0 1 0 42 32" stroke="#0d1b17" stroke-width="5" stroke-linecap="butt" />
|
|
|
|
|
|
<!-- E Middle Bar -->
|
|
|
<path d="M 30 20 L 41 20" stroke="#0d1b17" stroke-width="5" stroke-linecap="butt" />
|
|
|
</svg>
|
|
|
</div>
|
|
|
|
|
|
<!-- Text Container: Added w-full & text-center -->
|
|
|
<div class="h-6 mt-4 w-full overflow-hidden text-center">
|
|
|
<span class="inline-block text-[10px] uppercase tracking-widest text-black/80 opacity-0 translate-y-4 transition-all duration-500 group-hover:opacity-100 group-hover:translate-y-0">
|
|
|
European Std.
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<!-- 3. UL (红色) -->
|
|
|
<div class="group flex flex-col items-center justify-end h-32 w-full cursor-default" data-aos="fade-up" data-aos-delay="200">
|
|
|
<div class="transition-all duration-300 ease-out group-hover:scale-110 group-hover:-translate-y-2 group-hover:drop-shadow-[0_10px_20px_rgba(211,32,38,0.25)]">
|
|
|
<div class="size-14 rounded-full border-[4px] border-[#D32026] flex items-center justify-center relative bg-white">
|
|
|
<span class="font-display text-3xl text-[#D32026] relative top-[2px] right-[1px] leading-none">UL</span>
|
|
|
<span class="absolute -bottom-1 -right-2 text-[8px] text-[#D32026]">®</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="h-6 mt-4 overflow-hidden">
|
|
|
<span class="block text-[10px] uppercase tracking-widest text-[#D32026]/80 opacity-0 translate-y-4 transition-all duration-500 group-hover:opacity-100 group-hover:translate-y-0">
|
|
|
US Safety
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 4. IEC (蓝色) -->
|
|
|
<div class="group flex flex-col items-center justify-end h-32 w-full cursor-default" data-aos="fade-up" data-aos-delay="300">
|
|
|
<div class="transition-all duration-300 ease-out group-hover:scale-110 group-hover:-translate-y-2 group-hover:drop-shadow-[0_10px_20px_rgba(0,85,140,0.25)]">
|
|
|
<span class="font-display text-5xl text-[#00558C] tracking-wide">IEC</span>
|
|
|
</div>
|
|
|
<div class="h-6 mt-4 overflow-hidden">
|
|
|
<span class="block text-[10px] uppercase tracking-widest text-[#00558C]/80 opacity-0 translate-y-4 transition-all duration-500 group-hover:opacity-100 group-hover:translate-y-0">
|
|
|
Electrotechnical
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 5. ISO (深灰色) -->
|
|
|
<div class="group flex flex-col items-center justify-end h-32 w-full cursor-default" data-aos="fade-up" data-aos-delay="400">
|
|
|
<div class="transition-all duration-300 ease-out group-hover:scale-110 group-hover:-translate-y-2 group-hover:drop-shadow-[0_10px_20px_rgba(30,30,30,0.2)]">
|
|
|
<span class="font-display text-5xl text-[#333] tracking-tight">ISO</span>
|
|
|
</div>
|
|
|
<div class="h-6 mt-4 overflow-hidden">
|
|
|
<span class="block text-[10px] uppercase tracking-widest text-[#333]/80 opacity-0 translate-y-4 transition-all duration-500 group-hover:opacity-100 group-hover:translate-y-0">
|
|
|
9001 / 14001 / 45001
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<!-- Footer
|
|
|
<footer class="bg-[#0d1b17] text-white pt-24 pb-12 relative overflow-hidden">
|
|
|
<div class="absolute top-0 left-0 w-full h-24 bg-gradient-to-b from-background-light to-[#0d1b17] opacity-10"></div>
|
|
|
<div class="layout-container max-w-[1280px] mx-auto px-6">
|
|
|
<div class="flex flex-col md:flex-row justify-between gap-12 mb-20">
|
|
|
<div class="max-w-sm" data-aos="fade-up">
|
|
|
<div class="flex items-center gap-3 mb-6">
|
|
|
<div class="size-8 text-[#0d1b17] bg-primary rounded-full flex items-center justify-center p-1.5">
|
|
|
<span class="material-symbols-outlined text-[20px]">water_drop</span>
|
|
|
</div>
|
|
|
<h2 class="text-2xl tracking-tight">Global Energy</h2>
|
|
|
</div>
|
|
|
<p class="text-gray-400 leading-relaxed">
|
|
|
Pioneering the liquid state of energy. We build the infrastructure that allows power to flow organically, efficiently, and endlessly.
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="flex flex-wrap gap-12 md:gap-24">
|
|
|
<div class="flex flex-col gap-4" data-aos="fade-up" data-aos-delay="100">
|
|
|
<h4 class=" text-lg">Company</h4>
|
|
|
<a class="text-gray-400 hover:text-primary transition-colors" href="#">About Us</a>
|
|
|
<a class="text-gray-400 hover:text-primary transition-colors" href="#">Careers</a>
|
|
|
<a class="text-gray-400 hover:text-primary transition-colors" href="#">Investors</a>
|
|
|
<a class="text-gray-400 hover:text-primary transition-colors" href="#">Press</a>
|
|
|
</div>
|
|
|
<div class="flex flex-col gap-4" data-aos="fade-up" data-aos-delay="200">
|
|
|
<h4 class=" text-lg">Solutions</h4>
|
|
|
<a class="text-gray-400 hover:text-primary transition-colors" href="#">Solar Arrays</a>
|
|
|
<a class="text-gray-400 hover:text-primary transition-colors" href="#">Wind Fluids</a>
|
|
|
<a class="text-gray-400 hover:text-primary transition-colors" href="#">Hydro Storage</a>
|
|
|
<a class="text-gray-400 hover:text-primary transition-colors" href="#">Grid Software</a>
|
|
|
</div>
|
|
|
<div class="flex flex-col gap-4" data-aos="fade-up" data-aos-delay="300">
|
|
|
<h4 class=" text-lg">Connect</h4>
|
|
|
<div class="flex gap-4">
|
|
|
<a class="text-gray-400 hover:text-primary transition-colors" href="#">Ln</a>
|
|
|
<a class="text-gray-400 hover:text-primary transition-colors" href="#">Tw</a>
|
|
|
<a class="text-gray-400 hover:text-primary transition-colors" href="#">Ig</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-500">
|
|
|
<p>© 2024 Global Energy Systems. All rights reserved.</p>
|
|
|
<div class="flex gap-6">
|
|
|
<a class="hover:text-white transition-colors" href="#">Privacy Policy</a>
|
|
|
<a class="hover:text-white transition-colors" href="#">Terms of Service</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer> -->
|
|
|
</div>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
|
|
|
<!-- Swiper JS -->
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Enhanced Project Data
|
|
|
// ==========================================
|
|
|
// Regional Map Logic (Dynamic Data)
|
|
|
// ==========================================
|
|
|
|
|
|
// 1. Define Data Source
|
|
|
const regionData = [
|
|
|
{
|
|
|
office: "Global Headquarters",
|
|
|
name: "Sabrina.Zhang",
|
|
|
focus: "R&D, Global Strategy, Supply Chain",
|
|
|
phone: "+86 021-50896255",
|
|
|
email: "contact@nenghui.com",
|
|
|
icon: "", // Material Symbol
|
|
|
color: "text-primary", // Tailwind class
|
|
|
loc: "Shanghai, China",
|
|
|
des: "The central hub for innovation, orchestrating global supply chains and advanced system integration for renewable energy solutions worldwide."
|
|
|
},
|
|
|
{
|
|
|
office: "European Branch",
|
|
|
name: "Alli.Yu",
|
|
|
focus: "ESS Distribution, Technical Consulting",
|
|
|
phone: "+86 13057491520",
|
|
|
email: "Alli.Yu@nenghui.com",
|
|
|
icon: "",
|
|
|
color: "text-blue-400",
|
|
|
loc: "Amsterdam, Netherlands",
|
|
|
des: "Focused on high-performance Energy Storage Systems (ESS), providing Utility-Scale and C&I storage solutions tailored for the European energy transition."
|
|
|
},
|
|
|
{
|
|
|
office: "Middle East EPC Office",
|
|
|
name: "Leo.Li",
|
|
|
focus: "EPC, O&M, Smart Grid Monitoring",
|
|
|
phone: "+964 07889681628",
|
|
|
email: "leo@nenghui.com",
|
|
|
icon: "",
|
|
|
color: "text-orange-400",
|
|
|
loc: "Baghdad/Basra, Iraq",
|
|
|
des: "Specializing in full-lifecycle EPC delivery, from technical feasibility studies and system design to grid-connected construction of large-scale solar and ESS projects in arid environments. "
|
|
|
},
|
|
|
{
|
|
|
office: "ASEAN Strategic Branch",
|
|
|
name: "james.chen",
|
|
|
focus: "PPA, Financing Solutions, TISI Compliance",
|
|
|
phone: "+0980645276",
|
|
|
email: "james.chen@nenghui.com",
|
|
|
icon: "",
|
|
|
color: "text-teal-400",
|
|
|
loc: "Bangkok, Thailand",
|
|
|
des: "Driving energy efficiency through Energy Management Contracting (PPA) and flexible financing, offering integrated solar and ESS solutions for Thailand's industrial sector. "
|
|
|
},
|
|
|
{
|
|
|
office: "Southeast Asia Branch",
|
|
|
name: "ZHANGYI",
|
|
|
focus: "BOT, Microgrids, Industrial PV + ESS",
|
|
|
phone: "+855 066503722",
|
|
|
email: "zhangyi@nenghui.com",
|
|
|
icon: "",
|
|
|
color: "text-purple-400",
|
|
|
loc: "Phnom Penh, Cambodia",
|
|
|
des: "A leader in Build-Operate-Transfer (BOT) models and turnkey EPC services, delivering stable, green power infrastructure to industrial parks and remote microgrids. "
|
|
|
}
|
|
|
];
|
|
|
|
|
|
|
|
|
// 2. Render Bottom Cards
|
|
|
function initRegionalMap() {
|
|
|
const container = document.getElementById('project-cards-container');
|
|
|
if (!container) return;
|
|
|
container.innerHTML = '';
|
|
|
|
|
|
regionData.forEach((data, index) => {
|
|
|
const card = document.createElement('div');
|
|
|
let className = `project-card snap-start min-w-[200px] bg-white/5 backdrop-blur-md border border-white/10 p-4 rounded-2xl cursor-pointer hover:bg-white/10 transition-all duration-300`;
|
|
|
if (index === 0) className += ' active';
|
|
|
|
|
|
card.className = className;
|
|
|
card.id = `card-p${index}`;
|
|
|
// 修改：用户点击时传入 true 启用滚动
|
|
|
card.onclick = () => updateRegion(index, true);
|
|
|
|
|
|
card.innerHTML = `
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
|
<span class="material-symbols-outlined ${data.color} text-lg">${data.icon}</span>
|
|
|
<span class="text-[9px] font-mono text-gray-500">#00${index + 1}</span>
|
|
|
</div>
|
|
|
<h5 class=" text-white text-xs mb-0.5 truncate w-36">${data.office}</h5>
|
|
|
<p class="text-gray-400 text-[9px] uppercase truncate w-32">${data.loc}</p>
|
|
|
`;
|
|
|
container.appendChild(card);
|
|
|
});
|
|
|
|
|
|
// Initialize view
|
|
|
updateRegion(0, false);
|
|
|
}
|
|
|
|
|
|
// 3. Update Function
|
|
|
function updateRegion(index, shouldScroll = true) {
|
|
|
const data = regionData[index];
|
|
|
if (!data) return;
|
|
|
|
|
|
// A. Update Top-Right Info Card Fields
|
|
|
document.getElementById('card-loc').innerText = data.loc;
|
|
|
document.getElementById('card-office').innerText = data.office;
|
|
|
document.getElementById('card-name').innerText = data.name;
|
|
|
document.getElementById('card-des').innerText = data.des;
|
|
|
|
|
|
// B. Update Focus Tags
|
|
|
const focusContainer = document.getElementById('card-focus-container');
|
|
|
if (focusContainer) {
|
|
|
focusContainer.innerHTML = ''; // Clear old tags
|
|
|
const tags = data.focus.split(','); // Split by comma
|
|
|
tags.forEach(tag => {
|
|
|
const span = document.createElement('span');
|
|
|
span.className = "px-2 py-1 rounded bg-white/5 border border-white/10 text-[10px] text-gray-300 whitespace-nowrap";
|
|
|
span.innerText = tag.trim();
|
|
|
focusContainer.appendChild(span);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// C. Update Links
|
|
|
const phoneLink = document.getElementById('link-phone');
|
|
|
const phoneText = document.getElementById('card-phone');
|
|
|
const emailLink = document.getElementById('link-email');
|
|
|
const emailText = document.getElementById('card-email');
|
|
|
|
|
|
if (phoneText) phoneText.innerText = data.phone;
|
|
|
if (emailText) emailText.innerText = data.email;
|
|
|
|
|
|
// Strip non-numeric for tel: link (keep +)
|
|
|
if (phoneLink) {
|
|
|
const cleanPhone = data.phone.replace(/[^0-9+]/g, '');
|
|
|
phoneLink.href = `tel:${cleanPhone}`;
|
|
|
}
|
|
|
if (emailLink) {
|
|
|
emailLink.href = `mailto:${data.email}`;
|
|
|
}
|
|
|
|
|
|
// D. Update Bottom Cards Highlight
|
|
|
document.querySelectorAll('.project-card').forEach(c => c.classList.remove('active'));
|
|
|
const activeCard = document.getElementById(`card-p${index}`);
|
|
|
if (activeCard) {
|
|
|
activeCard.classList.add('active');
|
|
|
// 修改：只有当 shouldScroll 为 true 时才执行滚动
|
|
|
if (shouldScroll) {
|
|
|
activeCard.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
// E. Update Map Dots
|
|
|
document.querySelectorAll('.globe-dot').forEach(dot => dot.classList.remove('active'));
|
|
|
const activeDot = document.getElementById(`dot-p${index}`);
|
|
|
if (activeDot) {
|
|
|
activeDot.classList.add('active');
|
|
|
}
|
|
|
|
|
|
// F. Globe Pulse
|
|
|
const globe = document.getElementById('globe-container');
|
|
|
if (globe) {
|
|
|
globe.classList.remove('animate-select');
|
|
|
void globe.offsetWidth;
|
|
|
globe.classList.add('animate-select');
|
|
|
}
|
|
|
}
|
|
|
function calcYear () {
|
|
|
const startYear = Number(document.getElementById('dynamic-years-value').innerText)
|
|
|
console.log(document.getElementById('dynamic-years-value').innerText)
|
|
|
// const startYear = 2009; // Set the founding year
|
|
|
const currentYear = new Date().getFullYear();
|
|
|
const yearsOperation = currentYear - startYear;
|
|
|
|
|
|
// Update the title number
|
|
|
const titleEl = document.getElementById('dynamic-years-title');
|
|
|
if (titleEl) {
|
|
|
titleEl.innerText = yearsOperation;
|
|
|
}
|
|
|
|
|
|
// Update the description text number
|
|
|
const textEl = document.getElementById('dynamic-years-text');
|
|
|
if (textEl) {
|
|
|
textEl.innerText = yearsOperation;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Initialize Service Image Swiper (Left side of the card)
|
|
|
const counters = document.querySelectorAll('.counter');
|
|
|
const speed = 200; // The lower the slower
|
|
|
|
|
|
const animateCounters = () => {
|
|
|
counters.forEach(counter => {
|
|
|
const updateCount = () => {
|
|
|
const target = +counter.getAttribute('data-target');
|
|
|
const count = +counter.innerText;
|
|
|
const inc = target / speed;
|
|
|
|
|
|
if (count < target) {
|
|
|
counter.innerText = Math.ceil(count + inc);
|
|
|
setTimeout(updateCount, 20); // Update speed
|
|
|
} else {
|
|
|
counter.innerText = target;
|
|
|
}
|
|
|
};
|
|
|
updateCount();
|
|
|
});
|
|
|
};
|
|
|
|
|
|
// Trigger animation when section is in view
|
|
|
let hasAnimated = false;
|
|
|
const section = document.querySelector('#trust');
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
|
if(entries[0].isIntersecting && !hasAnimated) {
|
|
|
animateCounters();
|
|
|
hasAnimated = true;
|
|
|
}
|
|
|
}, { threshold: 0.5 });
|
|
|
|
|
|
if(section) {
|
|
|
observer.observe(section);
|
|
|
}
|
|
|
// 1. Initialize Hero Swiper
|
|
|
var heroSwiper = new Swiper(".heroSwiper", {
|
|
|
loop: true,
|
|
|
speed: 1000,
|
|
|
parallax: true,
|
|
|
effect: 'fade',
|
|
|
fadeEffect: {
|
|
|
crossFade: true
|
|
|
},
|
|
|
autoplay: {
|
|
|
delay: 6000,
|
|
|
disableOnInteraction: false,
|
|
|
},
|
|
|
pagination: {
|
|
|
el: ".swiper-pagination",
|
|
|
clickable: true,
|
|
|
renderBullet: function (index, className) {
|
|
|
return '<span class="' + className + ' !bg-primary"></span>';
|
|
|
},
|
|
|
},
|
|
|
navigation: {
|
|
|
nextEl: ".swiper-button-next",
|
|
|
prevEl: ".swiper-button-prev",
|
|
|
},
|
|
|
});
|
|
|
|
|
|
// 2. Video Player Logic
|
|
|
// const videoLayer = document.getElementById('banner-video-layer');
|
|
|
// const heroVideo = document.getElementById('hero-video');
|
|
|
|
|
|
// // UI Elements to hide when video plays
|
|
|
// const heroPagination = document.getElementById('hero-pagination');
|
|
|
// const heroNext = document.getElementById('hero-next');
|
|
|
// const heroPrev = document.getElementById('hero-prev');
|
|
|
|
|
|
// function playHeroVideo() {
|
|
|
// // Stop the swiper autoplay
|
|
|
// heroSwiper.autoplay.stop();
|
|
|
|
|
|
// // Show Video Layer
|
|
|
// videoLayer.classList.remove('opacity-0', 'pointer-events-none');
|
|
|
|
|
|
// // Hide Swiper Controls for cleaner look
|
|
|
// // heroPagination?.style.opacity = '0';
|
|
|
// heroNext.style.opacity = '0';
|
|
|
// heroPrev.style.opacity = '0';
|
|
|
|
|
|
// // Reset and play video
|
|
|
// heroVideo.currentTime = 0;
|
|
|
// heroVideo.play();
|
|
|
// }
|
|
|
|
|
|
// function closeHeroVideo() {
|
|
|
// // Hide Video Layer
|
|
|
// videoLayer.classList.add('opacity-0', 'pointer-events-none');
|
|
|
|
|
|
// // Show Swiper Controls
|
|
|
// // heroPagination?.style.opacity = '1';
|
|
|
// heroNext.style.opacity = '1';
|
|
|
// heroPrev.style.opacity = '1';
|
|
|
|
|
|
// // Pause video
|
|
|
// heroVideo.pause();
|
|
|
|
|
|
// // Resume swiper autoplay
|
|
|
// heroSwiper.autoplay.start();
|
|
|
// }
|
|
|
|
|
|
// Auto-close when video ends
|
|
|
// heroVideo.addEventListener('ended', () => {
|
|
|
// return false;
|
|
|
// // closeHeroVideo();
|
|
|
// });
|
|
|
|
|
|
class AdvancedImageLoader1 {
|
|
|
constructor(options = {}) {
|
|
|
this.options = Object.assign({
|
|
|
rootMargin: '200px 0px', // 提前 200px 开始加载
|
|
|
threshold: 0.01, // 只要露出 1% 就加载
|
|
|
selector: '.lazy-target',// 需要懒加载的目标选择器
|
|
|
skeletonClass: 'skeleton-pulse', // 骨架屏动画类名
|
|
|
loadedClass: 'loaded', // 加载完成后的 CSS 类名
|
|
|
}, options);
|
|
|
|
|
|
this.observer = null;
|
|
|
this.init();
|
|
|
}
|
|
|
|
|
|
init() {
|
|
|
if ('IntersectionObserver' in window) {
|
|
|
this.observer = new IntersectionObserver((entries, observer) => {
|
|
|
entries.forEach(entry => {
|
|
|
if (entry.isIntersecting) {
|
|
|
this.loadImage(entry.target);
|
|
|
observer.unobserve(entry.target);
|
|
|
}
|
|
|
});
|
|
|
}, {
|
|
|
rootMargin: this.options.rootMargin,
|
|
|
threshold: this.options.threshold
|
|
|
});
|
|
|
}
|
|
|
this.scan();
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 扫描 DOM，寻找未加载的图片并加入观察队列
|
|
|
* 注意：在动态渲染（如搜索、翻页）后必须调用此方法
|
|
|
*/
|
|
|
scan() {
|
|
|
const elements = document.querySelectorAll(`${this.options.selector}:not(.${this.options.loadedClass})`);
|
|
|
elements.forEach(el => {
|
|
|
// 如果浏览器不支持 Observer，直接加载
|
|
|
if (!this.observer) {
|
|
|
this.loadImage(el);
|
|
|
} else {
|
|
|
this.observer.observe(el);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 核心加载逻辑
|
|
|
* @param {HTMLElement} el 目标 DOM 元素
|
|
|
*/
|
|
|
loadImage(el) {
|
|
|
const bgSrc = el.getAttribute('data-bg');
|
|
|
const imgSrc = el.getAttribute('data-src');
|
|
|
// 寻找外层包裹的骨架屏容器（如果有）
|
|
|
const skeleton = el.closest('.skeleton-wrapper');
|
|
|
|
|
|
if (!bgSrc && !imgSrc) return;
|
|
|
|
|
|
// 1. 创建内存对象进行预加载 (Preload)
|
|
|
const loader = new Image();
|
|
|
|
|
|
loader.onload = () => {
|
|
|
// 2. 图片下载完毕，更新 DOM
|
|
|
if (bgSrc) {
|
|
|
el.style.backgroundImage = `url("${bgSrc}")`;
|
|
|
}
|
|
|
if (imgSrc) {
|
|
|
el.setAttribute('src', imgSrc);
|
|
|
}
|
|
|
|
|
|
// 3. 触发 CSS 动画 (Fade-in)
|
|
|
// 使用 requestAnimationFrame 确保样式重绘顺滑
|
|
|
requestAnimationFrame(() => {
|
|
|
el.classList.add(this.options.loadedClass);
|
|
|
});
|
|
|
|
|
|
// 4. 关闭骨架屏动画
|
|
|
if (skeleton) {
|
|
|
skeleton.classList.remove(this.options.skeletonClass);
|
|
|
// 可选：加载完成后移除背景色，或者保留作为底色
|
|
|
// skeleton.style.backgroundColor = 'transparent';
|
|
|
}
|
|
|
};
|
|
|
|
|
|
loader.onerror = () => {
|
|
|
console.warn('Image load failed:', bgSrc || imgSrc);
|
|
|
// 即使失败也移除动画，避免一直闪烁
|
|
|
if (skeleton) skeleton.classList.remove(this.options.skeletonClass);
|
|
|
};
|
|
|
|
|
|
// 开始下载
|
|
|
loader.src = bgSrc || imgSrc;
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 手动强制预加载一组图片（不等待进入视口）
|
|
|
* 适用于：轮播图的首屏图片、模态框弹出前的图片
|
|
|
* @param {Array} urls 图片链接数组
|
|
|
*/
|
|
|
static preloadBatch(urls) {
|
|
|
urls.forEach(url => {
|
|
|
const img = new Image();
|
|
|
img.src = url;
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
// 4. Init
|
|
|
window.addEventListener('load', () => {
|
|
|
|
|
|
initRegionalMap();
|
|
|
calcYear()
|
|
|
window.ImageLoader = new AdvancedImageLoader1();
|
|
|
// 找到这部分代码
|
|
|
var swiper = new Swiper(".impactSwiper", {
|
|
|
loop: true,
|
|
|
effect: "fade",
|
|
|
fadeEffect: {
|
|
|
crossFade: true
|
|
|
},
|
|
|
watchSlidesProgress: true,
|
|
|
autoplay: {
|
|
|
delay: 5000,
|
|
|
disableOnInteraction: false,
|
|
|
waitForTransition: false,
|
|
|
},
|
|
|
// 修改这里：使用新的唯一类名
|
|
|
navigation: {
|
|
|
nextEl: ".swiper-custom-next", // 原来是 ".swiper-button-next"
|
|
|
prevEl: ".swiper-custom-prev", // 原来是 ".swiper-button-prev"
|
|
|
},
|
|
|
keyboard: { enabled: true },
|
|
|
observer: true,
|
|
|
observeParents: true,
|
|
|
on: {
|
|
|
init: function () {
|
|
|
this.update();
|
|
|
this.autoplay.start();
|
|
|
},
|
|
|
}
|
|
|
});
|
|
|
var serviceImageSwiper = new Swiper(".serviceImageSwiper", {
|
|
|
loop: true,
|
|
|
effect: "fade", // Fade effect makes image transition smoother
|
|
|
fadeEffect: {
|
|
|
crossFade: true
|
|
|
},
|
|
|
speed: 1000,
|
|
|
autoplay: {
|
|
|
delay: 4000, // Auto switch every 4 seconds
|
|
|
disableOnInteraction: false,
|
|
|
},
|
|
|
pagination: {
|
|
|
el: ".swiper-pagination",
|
|
|
clickable: true,
|
|
|
// Custom bullet style to match theme
|
|
|
renderBullet: function (index, className) {
|
|
|
return '<span class="' + className + ' !bg-white !opacity-80 hover:!opacity-100 !w-2 !h-2 !transition-all"></span>';
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
AOS.init({ duration: 900, easing: 'ease-out-cubic', once: true, offset: 50 });
|
|
|
|
|
|
});
|
|
|
</script>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
|
|
|
|
|
|
|
<script id="vertexShader" type="x-shader/x-vertex">
|
|
|
attribute vec3 targetPosition;
|
|
|
attribute vec3 targetColor;
|
|
|
varying vec3 vColor;
|
|
|
uniform float uProgress;
|
|
|
uniform float uTime;
|
|
|
|
|
|
// 旋转函数：现在它只处理 XY 轴的自转，保留 Z 轴深度
|
|
|
vec3 rotatePoint(vec3 p, float angle, float cy) {
|
|
|
float s = sin(angle);
|
|
|
float c = cos(angle);
|
|
|
float tx = p.x;
|
|
|
float ty = p.y - cy;
|
|
|
// 关键修复：返回时保留一个微小的随机 Z 深度（基于 original p.z 但去除 999.9 偏移）
|
|
|
return vec3(tx * c - ty * s, tx * s + ty * c + cy, (fract(p.x * 123.456) - 0.5) * 5.0);
|
|
|
}
|
|
|
|
|
|
void main() {
|
|
|
vColor = mix(vec3(0.07, 0.92, 0.64), targetColor, uProgress);
|
|
|
|
|
|
float rotorY = 120.0;
|
|
|
float angle = uTime * 4.0;
|
|
|
|
|
|
vec3 pOrigin = position;
|
|
|
// 如果起始状态是风机叶片，持续旋转
|
|
|
if (abs(position.z - 999.9) < 0.1) {
|
|
|
pOrigin = rotatePoint(position, angle, rotorY);
|
|
|
}
|
|
|
|
|
|
vec3 pTarget = targetPosition;
|
|
|
// 如果目标状态是风机叶片，进行旋转插值
|
|
|
if (abs(targetPosition.z - 999.9) < 0.1) {
|
|
|
pTarget = rotatePoint(targetPosition, angle, rotorY);
|
|
|
}
|
|
|
|
|
|
// 插值计算
|
|
|
vec3 pos = mix(pOrigin, pTarget, uProgress);
|
|
|
|
|
|
// 呼吸效果（仅 Y 轴微调）
|
|
|
pos.y += sin(uTime * 1.5 + position.x * 0.02) * 2.0;
|
|
|
|
|
|
// 应用模型矩阵变换（包含 points.rotation.y）
|
|
|
vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
|
|
|
gl_PointSize = 3.2 * (400.0 / -mvPosition.z);
|
|
|
gl_Position = projectionMatrix * mvPosition;
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<script id="fragmentShader" type="x-shader/x-fragment">
|
|
|
varying vec3 vColor;
|
|
|
void main() {
|
|
|
float d = distance(gl_PointCoord, vec2(0.5));
|
|
|
if (d > 0.5) discard;
|
|
|
gl_FragColor = vec4(vColor, 0.8 * (1.0 - d * 2.0));
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
const scene = new THREE.Scene();
|
|
|
const camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 2000);
|
|
|
camera.position.set(0, -20, 450);
|
|
|
|
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
|
|
document.getElementById('particle-canvas').appendChild(renderer.domElement);
|
|
|
|
|
|
const particleCount = 20000;
|
|
|
const colorMain = new THREE.Color(0x13eca4);
|
|
|
const colorText = new THREE.Color(0x00ffff);
|
|
|
|
|
|
const ShapeLib = {
|
|
|
fill: (pts) => {
|
|
|
const posArr = new Float32Array(particleCount * 3);
|
|
|
const colArr = new Float32Array(particleCount * 3);
|
|
|
for(let i=0; i<particleCount; i++) {
|
|
|
const p = pts[i % pts.length];
|
|
|
posArr[i*3] = p.x; posArr[i*3+1] = p.y; posArr[i*3+2] = p.z;
|
|
|
const c = p.c || colorMain;
|
|
|
colArr[i*3] = c.r; colArr[i*3+1] = c.g; colArr[i*3+2] = c.b;
|
|
|
}
|
|
|
return { pos: posArr, col: colArr };
|
|
|
},
|
|
|
generateLogoPts: (offsetX, offsetY, scale) => {
|
|
|
const pts = [];
|
|
|
const canvas = document.createElement('canvas');
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
canvas.width = 200; canvas.height = 40;
|
|
|
ctx.font = 'bold 30px Arial';
|
|
|
ctx.fillStyle = 'white';
|
|
|
ctx.fillText('NENGHUI', 10, 30);
|
|
|
const data = ctx.getImageData(0,0,200,40).data;
|
|
|
for(let y=0; y<40; y+=2) {
|
|
|
for(let x=0; x<200; x+=2) {
|
|
|
if(data[(y*200+x)*4] > 128) {
|
|
|
pts.push({ x: (x - 100) * scale + offsetX, y: -(y - 20) * scale + offsetY, z: 41, c: colorText });
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
return pts;
|
|
|
},
|
|
|
text: () => {
|
|
|
const canvas = document.createElement('canvas'); canvas.width = 1000; canvas.height = 200;
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
ctx.font = 'bold 160px "Space Grotesk"'; ctx.fillStyle = 'white'; ctx.textAlign = 'center';
|
|
|
ctx.fillText('NENGHUI', 500, 140);
|
|
|
const data = ctx.getImageData(0,0,1000,200).data;
|
|
|
const pts = [];
|
|
|
for(let y=0; y<200; y+=3) for(let x=0; x<1000; x+=3) {
|
|
|
if(data[(y*1000+x)*4] > 128) pts.push({ x: (x-500)*0.8, y: -(y-100)*0.8, z: (Math.random()-0.5)*15, c: colorMain });
|
|
|
}
|
|
|
return ShapeLib.fill(pts);
|
|
|
},
|
|
|
bess: () => {
|
|
|
const pts = [];
|
|
|
for(let i=0; i<4000; i++) {
|
|
|
pts.push({ x: (Math.random()-0.5)*180 - 100, y: (Math.random()-0.5)*80 + 20, z: (Math.random()-0.5)*80, c: colorMain });
|
|
|
}
|
|
|
pts.push(...ShapeLib.generateLogoPts(-100, 20, 0.6));
|
|
|
for(let i=0; i<4000; i++) {
|
|
|
pts.push({ x: (Math.random()-0.5)*70 + 120, y: (Math.random()-0.5)*160 + 20, z: (Math.random()-0.5)*70, c: colorMain });
|
|
|
}
|
|
|
pts.push(...ShapeLib.generateLogoPts(120, 40, 0.3));
|
|
|
return ShapeLib.fill(pts);
|
|
|
},
|
|
|
wind: () => {
|
|
|
const pts = [];
|
|
|
const rotorY = 120;
|
|
|
// 塔架 (不旋转，Z 为随机小值)
|
|
|
for(let i=0; i<5000; i++) {
|
|
|
pts.push({ x: (Math.random()-0.5)*10, y: Math.random()*240-120, z: (Math.random()-0.5)*10 });
|
|
|
}
|
|
|
// 叶片 (旋转，Z 设为 999.9 暗号)
|
|
|
for(let b=0; b<3; b++) {
|
|
|
let angle = b * (Math.PI * 2 / 3);
|
|
|
for(let i=0; i<3000; i++) {
|
|
|
let len = Math.random() * 140;
|
|
|
pts.push({
|
|
|
x: Math.cos(angle) * len,
|
|
|
y: Math.sin(angle) * len + rotorY,
|
|
|
z: 999.9
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
return ShapeLib.fill(pts);
|
|
|
},
|
|
|
solar: () => {
|
|
|
const pts = [];
|
|
|
const panelWidth = 400; // 总宽度
|
|
|
const panelDepth = 250; // 总深度
|
|
|
const stepX = 80; // 支架左右间隔
|
|
|
const stepZ = 60; // 支架前后间隔
|
|
|
const groundY = -80; // 支架底部高度
|
|
|
|
|
|
for(let i = 0; i < 6000; i++) {
|
|
|
let r = Math.random();
|
|
|
|
|
|
if (r < 0.7) {
|
|
|
// 1. 生成光伏面板表面 (保持倾斜)
|
|
|
let x = (Math.random() - 0.5) * panelWidth;
|
|
|
let z = (Math.random() - 0.5) * panelDepth;
|
|
|
let y = -z * 0.5 - 20; // 倾斜公式
|
|
|
pts.push({ x, y, z, c: colorMain });
|
|
|
|
|
|
} else if (r < 0.9) {
|
|
|
// 2. 生成垂直立柱 (Legs)
|
|
|
// 在固定的步长位置生成
|
|
|
let gridX = (Math.floor(Math.random() * (panelWidth / stepX)) - (panelWidth / stepX / 2)) * stepX;
|
|
|
let gridZ = (Math.floor(Math.random() * (panelDepth / stepZ)) - (panelDepth / stepZ / 2)) * stepZ;
|
|
|
|
|
|
let topY = -gridZ * 0.5 - 20; // 计算该点面板的高度
|
|
|
let y = groundY + Math.random() * (topY - groundY);
|
|
|
|
|
|
pts.push({ x: gridX, y, z: gridZ, c: new THREE.Color(0x555555) }); // 支架用深色或主色
|
|
|
|
|
|
} else {
|
|
|
// 3. 生成横向连接梁 (Beams)
|
|
|
let z = (Math.floor(Math.random() * (panelDepth / stepZ)) - (panelDepth / stepZ / 2)) * stepZ;
|
|
|
let x = (Math.random() - 0.5) * panelWidth;
|
|
|
let y = -z * 0.5 - 22; // 略低于面板
|
|
|
|
|
|
pts.push({ x, y, z, c: colorMain });
|
|
|
}
|
|
|
}
|
|
|
return ShapeLib.fill(pts);
|
|
|
},
|
|
|
truck: () => { // 深度优化：重卡换电站场景
|
|
|
const pts = [];
|
|
|
const tractorW = 60, tractorH = 55, tractorD = 50; // 车头尺寸
|
|
|
const trailerW = 150, trailerH = 60, trailerD = 50; // 货箱尺寸
|
|
|
|
|
|
for(let i=0; i<particleCount; i++) {
|
|
|
let r = Math.random();
|
|
|
|
|
|
if(r < 0.15) { // 1. 车头 (Tractor) - 位于前方
|
|
|
let x = Math.random() * tractorW + 75;
|
|
|
let y = Math.random() * tractorH - 30;
|
|
|
let z = (Math.random() - 0.5) * tractorD;
|
|
|
// 削出挡风玻璃的斜坡感
|
|
|
if (x > 110 && y > 0) x -= (y / tractorH) * 20;
|
|
|
pts.push({ x, y, z });
|
|
|
|
|
|
} else if(r < 0.45) { // 2. 货箱 (Trailer) - 位于后方
|
|
|
let x = Math.random() * trailerW - 80;
|
|
|
let y = Math.random() * trailerH - 30;
|
|
|
let z = (Math.random() - 0.5) * trailerD;
|
|
|
pts.push({ x, y, z });
|
|
|
|
|
|
} else if(r < 0.55) { // 3. 车轮 (Wheels) - 6个圆环
|
|
|
let wheelPositions = [-60, -20, 20, 90, 115];
|
|
|
let wIdx = Math.floor(Math.random() * wheelPositions.length);
|
|
|
let angle = Math.random() * Math.PI * 2;
|
|
|
let rad = 12;
|
|
|
let side = Math.random() > 0.5 ? 26 : -26;
|
|
|
pts.push({
|
|
|
x: wheelPositions[wIdx] + Math.cos(angle) * rad,
|
|
|
y: -35 + Math.sin(angle) * rad,
|
|
|
z: side
|
|
|
});
|
|
|
|
|
|
} else if(r < 0.85) { // 4. 换电站框架 (Station) - 龙门架结构
|
|
|
let x = (Math.random() - 0.5) * 120 + 20; // 覆盖车头后部和货箱前部
|
|
|
let y = Math.random() * 140 - 50;
|
|
|
let z = (Math.random() - 0.5) * 110;
|
|
|
// 镂空中间：只在四周生成粒子形成框架
|
|
|
if (Math.abs(z) < 40 ) {
|
|
|
if (y < 50) {
|
|
|
z = Math.sign(z) * 45 + (Math.random()-0.5)*5;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
pts.push({ x, y, z });
|
|
|
|
|
|
} else { // 5. 正在吊装的电池包 (The Battery Pack)
|
|
|
// 悬浮在车头后方上空的密集点阵
|
|
|
let x = 60 + (Math.random() - 0.5) * 25;
|
|
|
let y = 60 + (Math.random() - 0.5) * 20; // 悬停高度
|
|
|
let z = (Math.random() - 0.5) * 40;
|
|
|
pts.push({ x, y, z });
|
|
|
}
|
|
|
}
|
|
|
return ShapeLib.fill(pts);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
|
|
|
const allData = [
|
|
|
{ data: ShapeLib.text(), text: "SYSTEM // NENGHUI" },
|
|
|
{ data: ShapeLib.bess(), text: "HARDWARE // STORAGE_UNITS" },
|
|
|
{ data: ShapeLib.wind(), text: "GEN // WIND_TURBINE" },
|
|
|
{ data: ShapeLib.solar(), text: "GEN // SOLAR_ARRAY" },
|
|
|
{ data: ShapeLib.truck(), text: "LOGISTICS // TRUCK_SWAP" }
|
|
|
];
|
|
|
|
|
|
// 核心修复：确保初始属性被正确创建
|
|
|
const geo = new THREE.BufferGeometry();
|
|
|
const initialPos = new Float32Array(allData[0].data.pos);
|
|
|
const initialTargetPos = new Float32Array(allData[1].data.pos);
|
|
|
const initialTargetCol = new Float32Array(allData[1].data.col);
|
|
|
|
|
|
geo.setAttribute('position', new THREE.BufferAttribute(initialPos, 3));
|
|
|
geo.setAttribute('targetPosition', new THREE.BufferAttribute(initialTargetPos, 3));
|
|
|
geo.setAttribute('targetColor', new THREE.BufferAttribute(initialTargetCol, 3));
|
|
|
|
|
|
const mat = new THREE.ShaderMaterial({
|
|
|
uniforms: { uProgress: { value: 0 }, uTime: { value: 0 } },
|
|
|
vertexShader: document.getElementById('vertexShader').textContent,
|
|
|
fragmentShader: document.getElementById('fragmentShader').textContent,
|
|
|
transparent: true, blending: THREE.AdditiveBlending, depthWrite: false
|
|
|
});
|
|
|
|
|
|
const points = new THREE.Points(geo, mat);
|
|
|
scene.add(points);
|
|
|
|
|
|
function typeText(str) {
|
|
|
const el = document.getElementById('hud-text');
|
|
|
if(!el) return;
|
|
|
el.innerText = ''; let i = 0;
|
|
|
const t = setInterval(() => {
|
|
|
el.innerText += str[i++];
|
|
|
if(i === str.length) clearInterval(t);
|
|
|
}, 40);
|
|
|
}
|
|
|
|
|
|
let curr = 0;
|
|
|
function morph() {
|
|
|
let next = (curr + 1) % allData.length;
|
|
|
|
|
|
// 更新属性数组
|
|
|
geo.attributes.position.array.set(allData[curr].data.pos);
|
|
|
geo.attributes.targetPosition.array.set(allData[next].data.pos);
|
|
|
geo.attributes.targetColor.array.set(allData[next].data.col);
|
|
|
|
|
|
// 标记更新
|
|
|
geo.attributes.position.needsUpdate = true;
|
|
|
geo.attributes.targetPosition.needsUpdate = true;
|
|
|
geo.attributes.targetColor.needsUpdate = true;
|
|
|
|
|
|
mat.uniforms.uProgress.value = 0;
|
|
|
typeText(allData[next].text);
|
|
|
|
|
|
gsap.to(mat.uniforms.uProgress, {
|
|
|
value: 1, duration: 2.0, ease: "power2.inOut",
|
|
|
onComplete: () => { curr = next; }
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 启动循环
|
|
|
setInterval(morph, 5000);
|
|
|
// 初始化第一次文字显示
|
|
|
typeText(allData[0].text);
|
|
|
|
|
|
function animate(t) {
|
|
|
requestAnimationFrame(animate);
|
|
|
mat.uniforms.uTime.value = t * 0.001;
|
|
|
points.rotation.y += 0.0015;
|
|
|
renderer.render(scene, camera);
|
|
|
}
|
|
|
animate(0);
|
|
|
|
|
|
window.addEventListener('resize', () => {
|
|
|
camera.aspect = window.innerWidth/window.innerHeight; camera.updateProjectionMatrix();
|
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
