|
|
<!DOCTYPE html>
|
|
|
<html class="light" lang="en">
|
|
|
<head>
|
|
|
<meta charset="utf-8"/>
|
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
|
<title>Energy Storage - Waterfall Specs View</title>
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet"/>
|
|
|
<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/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"/>
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" />
|
|
|
<!-- AOS Animation Library -->
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
|
|
|
<!-- Tailwind & Config -->
|
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
|
<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", "Montserrat"],
|
|
|
"inter": ["Inter", "Montserrat"],
|
|
|
},
|
|
|
borderRadius: {
|
|
|
"DEFAULT": "0.5rem",
|
|
|
"lg": "1rem",
|
|
|
"xl": "1.5rem",
|
|
|
"2xl": "2rem",
|
|
|
"3xl": "3rem",
|
|
|
"full": "9999px"
|
|
|
},
|
|
|
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: {
|
|
|
// 将光效统一映射为 primary 颜色 (13eca4 的 RGBA)
|
|
|
'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: {
|
|
|
fadeIn: {
|
|
|
'0%': { opacity: '0', transform: 'translateY(10px)' },
|
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
|
},
|
|
|
scan: {
|
|
|
'0%': { top: '-10%', opacity: '0' },
|
|
|
'10%': { opacity: '1' },
|
|
|
'90%': { opacity: '1' },
|
|
|
'100%': { top: '110%', opacity: '0' },
|
|
|
},
|
|
|
rotateGlobe: {
|
|
|
'0%': { transform: 'rotate(0deg)' },
|
|
|
'100%': { transform: 'rotate(360deg)' },
|
|
|
},
|
|
|
dash: {
|
|
|
'0%': { strokeDashoffset: '1000' },
|
|
|
'100%': { strokeDashoffset: '0' },
|
|
|
},
|
|
|
globePulse: {
|
|
|
'0%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
|
|
|
'50%': { boxShadow: '0 0 50px rgba(19,236,164,0.4)', transform: 'scale(1.02)' },
|
|
|
'100%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
|
|
|
},
|
|
|
// 高级交互动画
|
|
|
pulseGlow: {
|
|
|
'0%': { textShadow: '0 0 10px rgba(19, 236, 164, 0.4)' },
|
|
|
'100%': { textShadow: '0 0 30px #ff6b00' }
|
|
|
},
|
|
|
sweep: { '100%': { left: '200%' } },
|
|
|
cardFlip: {
|
|
|
'0%': { opacity: '0', transform: 'rotateY(-90deg) translateZ(50px)' },
|
|
|
'100%': { opacity: '1', transform: 'rotateY(0deg) translateZ(0)' }
|
|
|
},
|
|
|
floatY: {
|
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
|
'50%': { transform: 'translateY(-15px)' }
|
|
|
},
|
|
|
textShimmer: {
|
|
|
'0%': { backgroundPosition: '0% 50%' },
|
|
|
'100%': { backgroundPosition: '100% 50%' },
|
|
|
},
|
|
|
blobSpin: {
|
|
|
'0%': { transform: 'rotate(0deg) scale(1)' },
|
|
|
'50%': { transform: 'rotate(180deg) scale(1.1)' },
|
|
|
'100%': { transform: 'rotate(360deg) scale(1)' },
|
|
|
}
|
|
|
},
|
|
|
animation: {
|
|
|
'fade-in': 'fadeIn 0.5s ease-out forwards',
|
|
|
'scan-slow': 'scan 6s linear infinite',
|
|
|
'spin-slow': 'rotateGlobe 60s linear infinite',
|
|
|
'dash-flow': 'dash 3s linear infinite',
|
|
|
'globe-select': 'globePulse 0.8s ease-out',
|
|
|
'pulse-glow': 'pulseGlow 2s infinite alternate',
|
|
|
'sweep': 'sweep 3s infinite',
|
|
|
'flip-in': 'cardFlip 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
|
'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',
|
|
|
'text-shimmer': 'textShimmer 3s ease-out infinite alternate',
|
|
|
'blob-spin': 'blobSpin 20s infinite cubic-bezier(0.4, 0, 0.2, 1)',
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body class="bg-background-light dark:bg-background-dark text-[#111318] dark:text-white font-sans transition-colors duration-200 overflow-x-hidden">
|
|
|
|
|
|
<!-- Top Navigation -->
|
|
|
|
|
|
|
|
|
<!-- Main Content Wrapper -->
|
|
|
<style>
|
|
|
/* Custom scrollbar for horizontal scrolling elements */
|
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
|
display: none;
|
|
|
}
|
|
|
.hide-scrollbar {
|
|
|
-ms-overflow-style: none;
|
|
|
scrollbar-width: none;
|
|
|
}
|
|
|
|
|
|
/* Smooth Scrolling */
|
|
|
html {
|
|
|
scroll-behavior: smooth;
|
|
|
}
|
|
|
|
|
|
/* Card Hover Effects */
|
|
|
.product-card {
|
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
position: relative; /* 确保 z-index 生效 */
|
|
|
z-index: 10;
|
|
|
}
|
|
|
.product-card:hover {
|
|
|
transform: translateY(-8px);
|
|
|
z-index: 30; /* 低于 filter 的 40 */
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<div class="bg-background-light dark:bg-background-dark text-[#111318] dark:text-white font-sans transition-colors duration-200 pt-[80px] hide-scrollbar">
|
|
|
<main class="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 py-8 flex flex-col flex-1 min-h-screen">
|
|
|
|
|
|
<!-- Page Heading & Intro (布局优化：垂直排列) -->
|
|
|
<div class="max-w-4xl mb-10" data-aos="fade-right" data-aos-delay="200">
|
|
|
<h1 class=" text-[#111318] dark:text-white text-4xl md:text-[2.66rem] leading-tight tracking-tight mb-4 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-400">
|
|
|
High-Performance Energy Storage
|
|
|
</h1>
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-400 text-[1rem] font-normal leading-relaxed max-w-2xl">
|
|
|
From residential backups to utility-scale grids. Explore our LFP and Solid-State battery solutions designed for maximum efficiency.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<!-- Filter Section (全新设计：支持多行展示 + 移动端滑动) -->
|
|
|
<div id="filter-sticky-wrapper" class="sticky top-[80px] z-40 mb-8 transition-all duration-300 -mx-4 px-4 sm:mx-0 sm:px-0 rounded-b-xl">
|
|
|
|
|
|
<!-- Visual Background Container (用于承载背景色和模糊) -->
|
|
|
<div class="absolute inset-0 bg-background-light/95 dark:bg-background-dark/95 backdrop-blur-md transition-opacity duration-300 opacity-90 border-b border-transparent" id="filter-bg"></div>
|
|
|
|
|
|
<!-- Content Container -->
|
|
|
<div class="relative max-w-[1280px] mx-auto py-3">
|
|
|
|
|
|
<!-- Filter Label & Controls -->
|
|
|
<div class="flex items-center justify-between mb-2 px-1">
|
|
|
<span class="text-[10px] font-extrabold tracking-widest text-gray-500 dark:text-gray-400 uppercase flex items-center gap-1">
|
|
|
<span class="material-symbols-outlined text-[14px]"></span>
|
|
|
Filter by Category
|
|
|
</span>
|
|
|
<div class="hidden sm:flex gap-2">
|
|
|
<span class="text-xs text-gray-400 font-mono" id="item-count-display">Showing 5 items</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Scroll/Wrap Container -->
|
|
|
<div class="relative group/filters">
|
|
|
<!-- Mobile Left Fade Mask -->
|
|
|
<div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-[#f8fcfa] dark:from-[#10221c] to-transparent z-10 pointer-events-none md:hidden transition-colors duration-300" id="mask-left"></div>
|
|
|
|
|
|
<!-- Buttons Grid -->
|
|
|
<!-- py-2 -my-2: 防止按钮放大被裁剪，同时保持紧凑 -->
|
|
|
<div class="flex overflow-x-auto md:flex-wrap gap-3 py-2 -my-2 px-2 -mx-2 hide-scrollbar scroll-smooth snap-x items-center">
|
|
|
|
|
|
<!-- Chip: All -->
|
|
|
<button onclick="filterSelection('all', this)" class="filter-btn active snap-start shrink-0 relative flex items-center gap-2 pl-4 pr-5 h-10 rounded-full border transition-all duration-300 group" data-filter="all">
|
|
|
<span class=" text-sm tracking-wide">All Systems</span>
|
|
|
<span class="count-badge flex items-center justify-center h-5 min-w-[20px] px-1.5 rounded-full text-[10px] ">5</span>
|
|
|
</button>
|
|
|
|
|
|
|
|
|
<button onclick="filterSelection('residential', this)" class="filter-btn snap-start shrink-0 flex items-center gap-2 pl-4 pr-4 h-10 rounded-full border border-[#e5e7eb] dark:border-[#374151] bg-white dark:bg-[#1f2937] text-[#5f6e8c] dark:text-gray-300 transition-all duration-300 hover:scale-105 active:scale-95 hover:shadow-lg hover:border-primary z-0 hover:z-10" data-filter="residential">
|
|
|
<span class="font-medium text-sm"> Smart Energy Storage Systems</span>
|
|
|
<!-- <span class="text-xs text-gray-400 group-hover:text-primary">5-20kWh</span> -->
|
|
|
</button>
|
|
|
|
|
|
<!--
|
|
|
<button onclick="filterSelection('commercial', this)" class="filter-btn snap-start shrink-0 flex items-center gap-2 pl-4 pr-4 h-10 rounded-full border border-[#e5e7eb] dark:border-[#374151] bg-white dark:bg-[#1f2937] text-[#5f6e8c] dark:text-gray-300 transition-all duration-300 hover:scale-105 active:scale-95 hover:shadow-lg hover:border-primary z-0 hover:z-10" data-filter="commercial">
|
|
|
<span class="font-medium text-sm">Commercial</span>
|
|
|
<span class="text-xs text-gray-400 group-hover:text-primary">50-200kWh</span>
|
|
|
</button>
|
|
|
|
|
|
|
|
|
<button onclick="filterSelection('industrial', this)" class="filter-btn snap-start shrink-0 flex items-center gap-2 pl-4 pr-4 h-10 rounded-full border border-[#e5e7eb] dark:border-[#374151] bg-white dark:bg-[#1f2937] text-[#5f6e8c] dark:text-gray-300 transition-all duration-300 hover:scale-105 active:scale-95 hover:shadow-lg hover:border-primary z-0 hover:z-10" data-filter="industrial">
|
|
|
<span class="font-medium text-sm">Industrial</span>
|
|
|
<span class="text-xs text-gray-400 group-hover:text-primary">MWh+</span>
|
|
|
</button>
|
|
|
|
|
|
|
|
|
<button onclick="filterSelection('portable', this)" class="filter-btn snap-start shrink-0 flex items-center gap-2 pl-4 pr-4 h-10 rounded-full border border-[#e5e7eb] dark:border-[#374151] bg-white dark:bg-[#1f2937] text-[#5f6e8c] dark:text-gray-300 transition-all duration-300 hover:scale-105 active:scale-95 hover:shadow-lg hover:border-primary z-0 hover:z-10" data-filter="portable">
|
|
|
<span class="material-symbols-outlined text-[18px]"></span>
|
|
|
<span class="font-medium text-sm">Portable</span>
|
|
|
</button> -->
|
|
|
</div>
|
|
|
|
|
|
<!-- Mobile Right Fade Mask -->
|
|
|
<div class="absolute right-0 top-0 bottom-0 w-12 bg-gradient-to-l from-[#f8fcfa] dark:from-[#10221c] to-transparent z-10 pointer-events-none md:hidden transition-colors duration-300" id="mask-right"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<!-- Waterfall Grid (Masonry Layout) - 保持原有代码，这里不再重复 -->
|
|
|
<div id="product-grid" class="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6 pb-12">
|
|
|
|
|
|
<!-- Card 1: Residential Standard
|
|
|
<div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="0">
|
|
|
<div class="relative h-64 w-full bg-gradient-to-b from-[#787878] to-white dark:bg-[#111318] flex items-center justify-center p-6 group-hover:bg-primary/5 transition-colors duration-500">
|
|
|
<div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-primary text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10">
|
|
|
≥93% Efficiency
|
|
|
</div>
|
|
|
<div class="w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500" data-alt="Modern white wall-mounted battery unit" style="background-image: url('https://nenghui.com/wp-content/uploads/2025/12/418372.jpg');"></div>
|
|
|
</div>
|
|
|
<div class="p-6">
|
|
|
<div class="flex justify-between items-start mb-2">
|
|
|
<h3 class="text-xl font-display text-[#111318] dark:text-white group-hover:text-primary transition-colors">NB418L</h3>
|
|
|
<button class="text-gray-400 hover:text-primary transition-colors">
|
|
|
<span class="material-symbols-outlined"></span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="grid grid-cols-2 gap-y-3 gap-x-4 mb-5 text-sm">
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">Rated Energy</p>
|
|
|
<p class=" dark:text-gray-200">418 kWh</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">Cycle Life</p>
|
|
|
<p class=" dark:text-gray-200">8,000 times</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">DoD</p>
|
|
|
<p class=" dark:text-gray-200">95%(25±2℃)，0.5P</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">Rated Voltage</p>
|
|
|
<p class=" dark:text-gray-200">1331.2Vdc</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-400 text-sm leading-relaxed mb-6 line-clamp-4">
|
|
|
Nenghui liquid-cooled battery cabinet adopts an advanced cabinet-level liquid cooling and temperature balancing strategy. The cell temperature difference is less than 3°C, which further improves the consistency of cell temperature and extends the battery life. The modular design makes the parallel solution more flexible and can be combined with the centralized PCS to form an ESS with higher energy density, which significantly improves the economy, safety and construction convenience of ESS projects.
|
|
|
</p>
|
|
|
<a href="https://nenghui.com/products/ne418l/">
|
|
|
<button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow">
|
|
|
<span>View Datasheet</span>
|
|
|
<span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform"></span>
|
|
|
</button>
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
-->
|
|
|
<div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="0">
|
|
|
<div class="skeleton-wrapper relative h-64 w-full bg-gradient-to-b from-[#787878] to-white dark:from-[#333] dark:to-[#111318] flex items-center justify-center p-6 transition-all duration-500 group-hover:from-[#666666] group-hover:to-[#e6fcf5]">
|
|
|
<div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-[#295ca8] text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10">
|
|
|
≥93% Efficiency
|
|
|
</div>
|
|
|
<div class="lazy-target w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500" data-alt="Liquid-cooled Battery Cabinet 418kWh"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/product-NB418L-scaled.jpg"></div>
|
|
|
</div>
|
|
|
<div class="p-5">
|
|
|
<div class="flex justify-between items-start mb-2">
|
|
|
<h3 class="text-3xl text-[#111318] dark:text-white group-hover:text-primary transition-colors">NB418L</h3>
|
|
|
<!-- <button class="text-gray-400 hover:text-primary transition-colors">
|
|
|
<span class="material-symbols-outlined">bookmark_border</span>
|
|
|
</button> -->
|
|
|
</div>
|
|
|
<div class="grid grid-cols-2 gap-y-3 gap-x-4 mb-5 text-sm">
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">System Energy</p>
|
|
|
<p class=" dark:text-gray-200">418 kWh</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">Cycle Life</p>
|
|
|
<p class=" dark:text-gray-200">8,000 times</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">Thermal Management</p>
|
|
|
<p class=" dark:text-gray-200">Liquid cooling</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">Ingress Rating</p>
|
|
|
<p class=" dark:text-gray-200">IP55/IP65</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-400 text-sm leading-relaxed mb-6 line-clamp-4">
|
|
|
Nenghui all-in-one liquid-cooled ESS cabinet adopts advanced cabinet-level liquid cooling and temperature balancing strategy. The cell temperature difference is less than 3°C, which further improves the consistency of cell temperature and extends the battery life. The modular design makes the parallel solution more flexible and has a higher energy density, which significantly improves the economy, safety and construction convenience of ESS projects.
|
|
|
</p>
|
|
|
<a href="/products/ne418l/">
|
|
|
<button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow">
|
|
|
<span>View Datasheet</span>
|
|
|
<span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform"></span>
|
|
|
</button>
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Card 2: Industrial High Capacity
|
|
|
<div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="100">
|
|
|
<div class="relative h-72 w-full bg-gradient-to-b from-[#787878] to-white dark:bg-[#111318] flex items-center justify-center p-6 group-hover:bg-primary/5 transition-colors duration-500">
|
|
|
<div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-primary text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10">
|
|
|
90% Efficiency
|
|
|
</div>
|
|
|
<div class="w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500" data-alt="Large industrial battery cabinet array" style="background-image: url('https://nenghui.com/wp-content/uploads/2026/02/product-NE233L-scaled.jpg');"></div>
|
|
|
</div>
|
|
|
<div class="p-6">
|
|
|
<h3 class="text-xl font-display text-[#111318] dark:text-white mb-3 group-hover:text-primary transition-colors">NE233L</h3>
|
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
|
<span class="inline-flex items-center px-2.5 py-1 rounded bg-blue-50 dark:bg-blue-900/30 text-xs font-medium text-blue-700 dark:text-blue-300 border border-blue-100 dark:border-blue-800">≤75dB</span>
|
|
|
<span class="inline-flex items-center px-2.5 py-1 rounded bg-blue-50 dark:bg-blue-900/30 text-xs font-medium text-blue-700 dark:text-blue-300 border border-blue-100 dark:border-blue-800"> Active liquid cooling</span>
|
|
|
</div>
|
|
|
<div class="space-y-3 mb-6 bg-gray-50 dark:bg-[#1f2937]/50 p-4 rounded-lg">
|
|
|
<div class="flex justify-between items-center border-b border-dashed border-gray-200 dark:border-gray-700 pb-2">
|
|
|
<span class="text-sm text-[#5f6e8c] dark:text-gray-400">Battery System</span>
|
|
|
<span class="text-sm font-mono dark:text-gray-200">232.96kWh/1P260S</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between items-center border-b border-dashed border-gray-200 dark:border-gray-700 pb-2 pt-1">
|
|
|
<span class="text-sm text-[#5f6e8c] dark:text-gray-400">DoD</span>
|
|
|
<span class="text-sm font-mono dark:text-gray-200">95% (25±2℃)</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between items-center pt-1">
|
|
|
<span class="text-sm text-[#5f6e8c] dark:text-gray-400">Cycle Life</span>
|
|
|
<span class="text-sm font-mono dark:text-gray-200">>8000 times</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-400 text-sm leading-relaxed mb-6 line-clamp-4">
|
|
|
Nenghui all-in-one liquid-cooled ESS cabinet adopts advanced cabinet-level liquid cooling and temperature balancing strategy. The cell temperature difference is less than 3°C, which further improves the consistency of cell temperature and extends the battery life. The modular design makes the parallel solution more flexible and has a higher energy density, which significantly improves the economy, safety and construction convenience of ESS projects.
|
|
|
</p>
|
|
|
<a href="https://nenghui.com/products/ne233l/">
|
|
|
<button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow">
|
|
|
<span>View Datasheet</span>
|
|
|
<span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform"></span>
|
|
|
</button>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>-->
|
|
|
<div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="0">
|
|
|
<div class=" skeleton-wrapper relative h-64 w-full bg-gradient-to-b from-[#787878] to-white dark:from-[#333] dark:to-[#111318] flex items-center justify-center p-6 transition-all duration-500 group-hover:from-[#666666] group-hover:to-[#e6fcf5]">
|
|
|
<div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-[#295ca8] text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10">
|
|
|
≥90% Efficiency
|
|
|
</div>
|
|
|
<div class="lazy-target w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500" data-alt="All-in-one Liquid-cooled ESS Cabinet 233kWh"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/product-NE233L-scaled.jpg"></div>
|
|
|
</div>
|
|
|
<div class="p-5">
|
|
|
<div class="flex justify-between items-start mb-2">
|
|
|
<h3 class="text-3xl text-[#111318] dark:text-white group-hover:text-primary transition-colors">NE233L</h3>
|
|
|
<!-- <button class="text-gray-400 hover:text-primary transition-colors">
|
|
|
<span class="material-symbols-outlined">bookmark_border</span>
|
|
|
</button> -->
|
|
|
</div>
|
|
|
<div class="grid grid-cols-2 gap-y-3 gap-x-4 mb-5 text-sm">
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">System Energy</p>
|
|
|
<p class=" dark:text-gray-200">233 kWh</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">Cycle Life</p>
|
|
|
<p class=" dark:text-gray-200">8,000 times</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">Thermal Management</p>
|
|
|
<p class=" dark:text-gray-200">Liquid cooling</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">Ingress Rating</p>
|
|
|
<p class=" dark:text-gray-200">IP55/IP65</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-400 text-sm leading-relaxed mb-6 line-clamp-4">
|
|
|
Nenghui all-in-one liquid-cooled ESS cabinet adopts advanced cabinet-level liquid cooling and temperature balancing strategy. The cell temperature difference is less than 3°C, which further improves the consistency of cell temperature and extends the battery life. The modular design makes the parallel solution more flexible and has a higher energy density, which significantly improves the economy, safety and construction convenience of ESS projects.
|
|
|
</p>
|
|
|
<a href="/products/ne233l/">
|
|
|
<button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow">
|
|
|
<span>View Datasheet</span>
|
|
|
<span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform"></span>
|
|
|
</button>
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Card 3: Commercial Mid-Range
|
|
|
<div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="200">
|
|
|
<div class="relative h-56 w-full bg-gradient-to-b from-[#787878] to-white dark:bg-[#111318] flex items-center justify-center p-6 group-hover:bg-primary/5 transition-colors duration-500">
|
|
|
<div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-primary text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10">
|
|
|
90% Efficiency
|
|
|
</div>
|
|
|
<div class="w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500" data-alt="Grey commercial battery cabinet" style="background-image: url('https://nenghui.com/wp-content/uploads/2026/01/261.jpg');"></div>
|
|
|
</div>
|
|
|
<div class="p-6">
|
|
|
<h3 class="text-xl font-display text-[#111318] dark:text-white mb-4 group-hover:text-primary transition-colors">NE261L</h3>
|
|
|
<div class="grid grid-cols-2 gap-y-2 gap-x-4 mb-5 text-sm">
|
|
|
<div class="border-l-2 border-primary/30 pl-3">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-xs">Battery System</p>
|
|
|
<p class=" dark:text-gray-200">261.25kWh/1P260S</p>
|
|
|
</div>
|
|
|
<div class="border-l-2 border-primary/30 pl-3">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-xs">Cycle Life</p>
|
|
|
<p class=" dark:text-gray-200">8.000 times</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-400 text-sm leading-relaxed mb-6 line-clamp-4">
|
|
|
Nenghui all-in-one liquid-cooled ESS cabinet adopts advanced cabinet-level liquid cooling and temperature balancing strategy. The cell temperature difference is less than 3°C, which further improves the consistency of cell temperature and extends the battery life. The modular design makes the parallel solution more flexible and has a higher energy density, which significantly improves the economy, safety and construction convenience of ESS projects.
|
|
|
</p>
|
|
|
<a href="https://nenghui.com/products/ne261l/">
|
|
|
<button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow">
|
|
|
<span>View Datasheet</span>
|
|
|
<span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform"></span>
|
|
|
</button>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
-->
|
|
|
<div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="0">
|
|
|
<div class=" skeleton-wrapper relative h-64 w-full bg-gradient-to-b from-[#787878] to-white dark:from-[#333] dark:to-[#111318] flex items-center justify-center p-6 transition-all duration-500 group-hover:from-[#666666] group-hover:to-[#e6fcf5]">
|
|
|
<div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-[#295ca8] text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10">
|
|
|
≥90% Efficiency
|
|
|
</div>
|
|
|
<div class="lazy-target w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500"
|
|
|
data-alt="All-in-one Liquid-cooled ESS Cabinet 261kWh"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/product-NE261L-scaled.jpg"></div>
|
|
|
</div>
|
|
|
<div class="p-5">
|
|
|
<div class="flex justify-between items-start mb-2">
|
|
|
<h3 class="text-3xl text-[#111318] dark:text-white group-hover:text-primary transition-colors">NE261L</h3>
|
|
|
<!-- <button class="text-gray-400 hover:text-primary transition-colors">
|
|
|
<span class="material-symbols-outlined">bookmark_border</span>
|
|
|
</button> -->
|
|
|
</div>
|
|
|
<div class="grid grid-cols-2 gap-y-3 gap-x-4 mb-5 text-sm">
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">System Energy</p>
|
|
|
<p class=" dark:text-gray-200">261.25kWh</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">Cycle Life</p>
|
|
|
<p class=" dark:text-gray-200">8,000 times</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">Thermal Management</p>
|
|
|
<p class=" dark:text-gray-200">Liquid cooling</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">Ingress Rating</p>
|
|
|
<p class=" dark:text-gray-200">IP55/IP67</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-400 text-sm leading-relaxed mb-6 line-clamp-4">
|
|
|
Nenghui all-in-one liquid-cooled ESS cabinet adopts advanced cabinet-level liquid cooling and temperature balancing strategy. The cell temperature difference is less than 3°C, which further improves the consistency of cell temperature and extends the battery life. The modular design makes the parallel solution more flexible and has a higher energy density, which significantly improves the economy, safety and construction convenience of ESS projects.
|
|
|
|
|
|
</p>
|
|
|
<a href="/products/ne261l/">
|
|
|
<button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow">
|
|
|
<span>View Datasheet</span>
|
|
|
<span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform"></span>
|
|
|
</button>
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Card 4: Portable/Modular
|
|
|
<div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="0">
|
|
|
<div class="relative h-48 w-full bg-gradient-to-b from-[#787878] to-white dark:bg-[#111318] flex items-center justify-center p-6 group-hover:bg-primary/5 transition-colors duration-500">
|
|
|
<div class="w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500" data-alt="Small modular battery block" style="background-image: url('https://nenghui.com/wp-content/uploads/2026/01/upload_1768961014.jpg');"></div>
|
|
|
</div>
|
|
|
<div class="p-6">
|
|
|
<div class="flex items-center gap-2 mb-3">
|
|
|
<h3 class="text-xl font-display text-[#111318] dark:text-white group-hover:text-primary transition-colors">N20HC5000</h3>
|
|
|
<span class="bg-primary/10 text-primary text-[10px] px-2 py-0.5 rounded-full border border-primary/20 animate-pulse">NEW</span>
|
|
|
</div>
|
|
|
<div class="flex items-center gap-4 text-sm mb-4">
|
|
|
<div class="flex items-center gap-1 text-gray-600 dark:text-gray-400">
|
|
|
<span class="material-symbols-outlined text-[18px] text-primary"></span>
|
|
|
<span class="font-medium">5015.96kWh</span>
|
|
|
</div>
|
|
|
<div class="flex items-center gap-1 text-gray-600 dark:text-gray-400">
|
|
|
<span class="material-symbols-outlined text-[18px] text-primary"></span>
|
|
|
<span class="font-medium">≥93%@25±3℃, 0.5C</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-400 text-sm leading-relaxed mb-6 line-clamp-4">
|
|
|
Nenghui’s N20HC5000 factory-assembled DC battery storage container ships with 12 battery racks on the 5.015MWh 20ft container, power distribution cabinet, fire suppression system and advanced liquid-cooling system. And the module is made up of 1P104S LFP prismatic cells. Each cell undergoes strict quality inspections to ensure high energy density, wide operating temperature range, extended battery life, as well as the highest protection and safety features.
|
|
|
</p>
|
|
|
<a href="https://nenghui.com/products/n20hc5000/">
|
|
|
<button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow">
|
|
|
<span>View Datasheet</span>
|
|
|
</button>
|
|
|
</a>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>-->
|
|
|
<div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="0">
|
|
|
<div class="skeleton-wrapper relative h-64 w-full bg-gradient-to-b from-[#787878] to-white dark:from-[#333] dark:to-[#111318] flex items-center justify-center p-6 transition-all duration-500 group-hover:from-[#666666] group-hover:to-[#e6fcf5]">
|
|
|
<div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-[#295ca8] text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10">
|
|
|
≥93% Efficiency
|
|
|
</div>
|
|
|
<div class="lazy-target w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500"
|
|
|
data-alt="Liquid-cooled ESS Container 5MWh"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/02/product-N20HC5000-scaled.jpg"></div>
|
|
|
</div>
|
|
|
<div class="p-5">
|
|
|
<div class="flex justify-between items-start mb-2">
|
|
|
<h3 class="text-3xl text-[#111318] dark:text-white group-hover:text-primary transition-colors">N20HC5000</h3>
|
|
|
<!-- <button class="text-gray-400 hover:text-primary transition-colors">
|
|
|
<span class="material-symbols-outlined">bookmark_border</span>
|
|
|
</button> -->
|
|
|
</div>
|
|
|
<div class="grid grid-cols-2 gap-y-3 gap-x-4 mb-5 text-sm">
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">System Energy</p>
|
|
|
<p class=" dark:text-gray-200">5 MWh</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">Cycle Life</p>
|
|
|
<p class=" dark:text-gray-200">8,000 times</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">Thermal Management</p>
|
|
|
<p class=" dark:text-gray-200">Liquid cooling</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase tracking-wider">Ingress Rating</p>
|
|
|
<p class=" dark:text-gray-200">IP55/IP67</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-400 text-sm leading-relaxed mb-6 line-clamp-4">
|
|
|
Nenghui’s N20HC5000 factory-assembled DC battery storage container ships with 12 battery racks on the 5.015MWh 20ft container, power distribution cabinet, fire suppression system and advanced liquid-cooling system. And the module is made up of 1P104S LFP prismatic cells. Each cell undergoes strict quality inspections to ensure high energy density, wide operating temperature range, extended battery life, as well as the highest protection and safety features.
|
|
|
</p>
|
|
|
<a href="/products/n20hc5000/">
|
|
|
<button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow">
|
|
|
<span>View Datasheet</span>
|
|
|
<span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform"></span>
|
|
|
</button>
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Card 5: High Performance Residential -->
|
|
|
<div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="100">
|
|
|
<div class="skeleton-wrapper relative h-64 w-full bg-gradient-to-b from-[#787878] to-white dark:from-[#333] dark:to-[#111318] flex items-center justify-center p-6 transition-all duration-500 group-hover:from-[#666666] group-hover:to-[#e6fcf5]">
|
|
|
<div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-[#295ca8] text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10">
|
|
|
≥95% Efficiency
|
|
|
</div>
|
|
|
<div class="lazy-target w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500"
|
|
|
data-alt="Max EV Charging Power: 180kW ESS: 261kWh"
|
|
|
data-bg="https://nenghui.com/wp-content/uploads/2026/03/NH-ICS180-261-2-1.jpg"></div>
|
|
|
</div>
|
|
|
<div class="p-5">
|
|
|
<div class="flex items-center gap-2 mb-3">
|
|
|
<h3 class="text-3xl text-[#111318] dark:text-white group-hover:text-primary transition-colors">NH-ICS180-261</h3>
|
|
|
<span class="bg-primary/10 text-primary text-[10px] px-2 py-0.5 rounded-full border border-primary/20 animate-pulse">NEW</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="grid grid-cols-2 gap-y-3 gap-x-4 mb-5 text-sm">
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded border-l-2 border-primary">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase">Max Charging Power</p>
|
|
|
<p class=" dark:text-gray-200">180 kW</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded border-l-2 border-primary">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase">Battery Energy</p>
|
|
|
<p class=" dark:text-gray-200">261.25 kWh</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded border-l-2 border-primary">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase">Grid Integration</p>
|
|
|
<p class=" dark:text-gray-200">Peak Shaving & Load Shifting</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 dark:bg-[#1f2937] p-2 rounded border-l-2 border-primary">
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-500 text-[10px] uppercase">Reliability & Safety</p>
|
|
|
<p class=" dark:text-gray-200">IP55 / Pack-level Fire Suppression</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-400 text-sm leading-relaxed mb-6 line-clamp-4">
|
|
|
<!-- Our premium solid-state solution offering higher energy density and improved safety profile in a slimmer form factor. -->
|
|
|
Nenghui ESS-Charger integrated charging and storage solution combines DC fast charging with a built-in 261 kWh battery. It enables peak shaving and load shifting to reduce grid impact and enhances operational flexibility. It delivers efficient and reliable fast charging (1*180kw or 2*90kw) while maintaining compatibility with multiple global charging standards. An intelligent operation platform supports OCPP integration, real-time load balancing, and remote monitoring, ensuring optimized asset utilization and seamless coordination with the overall power system.
|
|
|
</p>
|
|
|
<a href="/products/nh-ics180-261/">
|
|
|
<button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow">
|
|
|
<span>View Datasheet</span>
|
|
|
</button>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Card 6: Containerized Solution
|
|
|
<div data-category="industrial" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="200">
|
|
|
<div class="relative h-60 w-full bg-gradient-to-b from-[#787878] to-white dark:bg-[#111318] flex items-center justify-center p-6 group-hover:bg-primary/5 transition-colors duration-500">
|
|
|
<div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-primary text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10">
|
|
|
98.8% Efficiency
|
|
|
</div>
|
|
|
<div class="w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500" data-alt="Large containerized battery storage unit" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAwajVWtqZGN-Iy3zMuc5cgi5QmTCusR3tJKi3-TUU3KyVWshtIWyQq9SAcyl649TG4HCD1B-6mu94RKdIOoEJ9yw7WPsRr55702m2_UCQ1dpxnzjo5M_Kpj_Agqpq64T2mHWJT9pH0fSKDp3He51zUqY5KKve-tPXY3qFPbbmr6sBfcQL52sgERLQbWsykn0TvizQqZ3_Xq0nrnbb6vIQG26Z6q7zJJYRvFqwaUdS1fGBn95-1WPVY_ry1j4J7wZWsI0mvcb7M2-g');"></div>
|
|
|
</div>
|
|
|
<div class="p-6">
|
|
|
<h3 class="text-xl font-display text-[#111318] dark:text-white mb-3 group-hover:text-primary transition-colors">MegaContainer 20ft</h3>
|
|
|
<div class="space-y-3 mb-6 bg-gray-50 dark:bg-[#1f2937]/50 p-4 rounded-lg">
|
|
|
<div class="flex justify-between items-center border-b border-dashed border-gray-200 dark:border-gray-700 pb-2">
|
|
|
<span class="text-sm text-[#5f6e8c] dark:text-gray-400">Total Capacity</span>
|
|
|
<span class="text-sm font-mono dark:text-gray-200">2.4 MWh</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between items-center border-b border-dashed border-gray-200 dark:border-gray-700 pb-2 pt-1">
|
|
|
<span class="text-sm text-[#5f6e8c] dark:text-gray-400">Dimensions</span>
|
|
|
<span class="text-sm font-mono dark:text-gray-200">20' x 8' x 8.6'</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p class="text-[#5f6e8c] dark:text-gray-400 text-sm leading-relaxed mb-6">
|
|
|
Turnkey energy storage in a standard shipping container footprint. Pre-assembled and tested for rapid deployment.
|
|
|
</p>
|
|
|
<button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow">
|
|
|
<span>View Datasheet</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>-->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Load More Section
|
|
|
<div class="flex justify-center pt-8 pb-16" data-aos="zoom-in" data-aos-offset="50">
|
|
|
<button class="relative group flex items-center justify-center px-8 py-3 rounded-full bg-primary/10 hover:bg-primary/20 dark:bg-primary/20 dark:hover:bg-primary/30 transition-all duration-300 active:scale-95">
|
|
|
<div class="absolute inset-0 rounded-full border border-primary opacity-20 animate-pulse group-hover:opacity-40"></div>
|
|
|
<span class="text-primary text-sm tracking-wide group-hover:scale-105 transition-transform">LOAD MORE PRODUCTS</span>
|
|
|
</button>
|
|
|
</div>-->
|
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
// --- Core Filtering Logic ---
|
|
|
function filterSelection(category, clickedBtn) {
|
|
|
// 1. Update Button Visuals
|
|
|
// 1. Update Button Visuals
|
|
|
updateButtonStyles(clickedBtn);
|
|
|
|
|
|
// 2. Scroll to Top Logic (新增核心代码)
|
|
|
const grid = document.getElementById('product-grid');
|
|
|
const stickyWrapper = document.getElementById('filter-sticky-wrapper');
|
|
|
|
|
|
// 计算偏移量：导航栏高度(64px) + 筛选栏当前高度 + 一点缓冲(20px)
|
|
|
// 这里的 64 对应 tailwind 的 h-16
|
|
|
const headerOffset = 64 + (stickyWrapper ? stickyWrapper.offsetHeight : 60);
|
|
|
const targetPosition = grid.getBoundingClientRect().top + window.scrollY - headerOffset - 20;
|
|
|
|
|
|
// 只有当用户当前滚动位置 大于 目标位置时（即在列表下方），才向上滚动
|
|
|
if (window.scrollY > targetPosition) {
|
|
|
window.scrollTo({
|
|
|
top: targetPosition,
|
|
|
behavior: 'smooth'
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 3. Filter Cards (保持原有逻辑，增加一点延时让滚动先开始，视觉更流畅)
|
|
|
let visibleCount = 0;
|
|
|
|
|
|
// 使用 setTimeout 稍微延后一点 DOM 操作，防止滚动时的掉帧
|
|
|
setTimeout(() => {
|
|
|
productCards.forEach(card => {
|
|
|
const cardCategory = card.getAttribute('data-category');
|
|
|
const isMatch = (category === 'all' || cardCategory === category);
|
|
|
|
|
|
if (isMatch) {
|
|
|
card.classList.remove('hidden');
|
|
|
// 强制重绘动画：移除 class 再添加
|
|
|
card.classList.remove('aos-animate');
|
|
|
setTimeout(() => card.classList.add('aos-animate'), 50); // 重新触发上浮动画
|
|
|
visibleCount++;
|
|
|
} else {
|
|
|
card.classList.add('hidden');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 4. Update UI & AOS
|
|
|
updateItemCount(visibleCount);
|
|
|
|
|
|
// 这一点很重要：内容高度变了，必须刷新 AOS 定位
|
|
|
setTimeout(() => {
|
|
|
AOS.refresh();
|
|
|
}, 300); // 稍微长一点的延时，确保 CSS transition 完成
|
|
|
}, 100);
|
|
|
}
|
|
|
// Helper: Update Button Styles
|
|
|
function updateButtonStyles(activeBtn) {
|
|
|
filterBtns.forEach(btn => {
|
|
|
// Reset all to inactive
|
|
|
btn.className = btn.className.replace(activeClass, "").replace(inactiveClass, ""); // Clean up
|
|
|
btn.classList.add(...inactiveClass.split(" ")); // Add inactive base
|
|
|
|
|
|
// Reset badge styles
|
|
|
const badge = btn.querySelector('.count-badge');
|
|
|
if(badge) {
|
|
|
badge.className = "count-badge hidden"; // Hide badge on inactive
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// Set active button
|
|
|
activeBtn.classList.remove(...inactiveClass.split(" "));
|
|
|
activeBtn.classList.add(...activeClass.split(" "));
|
|
|
|
|
|
// Show badge on active
|
|
|
const activeBadge = activeBtn.querySelector('.count-badge');
|
|
|
if(activeBadge) {
|
|
|
activeBadge.className = "count-badge flex items-center justify-center h-5 min-w-[20px] px-1.5 rounded-full bg-white/20 dark:bg-black/10 text-[10px] ml-auto";
|
|
|
}
|
|
|
}
|
|
|
// --- Configuration ---
|
|
|
const activeClass = "bg-[#111318] dark:bg-white text-white dark:text-[#111318] border-transparent shadow-lg shadow-gray-200 dark:shadow-none ring-2 ring-offset-2 ring-transparent";
|
|
|
const inactiveClass = "bg-white dark:bg-[#1f2937] text-[#5f6e8c] dark:text-gray-300 border-[#e5e7eb] dark:border-[#374151]";
|
|
|
|
|
|
// Select DOM elements
|
|
|
const filterBtns = document.querySelectorAll('.filter-btn');
|
|
|
const productCards = document.querySelectorAll('.product-card');
|
|
|
const searchInput = document.querySelector('input[type="text"]');
|
|
|
const itemCountDisplay = document.getElementById('item-count-display');
|
|
|
const loadMoreBtn = document.querySelector('.load-more-btn');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Helper: Update Count Text
|
|
|
function updateItemCount(count) {
|
|
|
if(itemCountDisplay) {
|
|
|
itemCountDisplay.textContent = `Showing ${count} items`;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// --- Search Logic ---
|
|
|
if(searchInput) {
|
|
|
searchInput.addEventListener('keyup', (e) => {
|
|
|
const searchTerm = e.target.value.toLowerCase();
|
|
|
let visibleCount = 0;
|
|
|
|
|
|
// When searching, we reset the category filter visually to 'All' usually,
|
|
|
// but for simplicity, we search within the currently visible items or global.
|
|
|
// Here let's search globally.
|
|
|
|
|
|
productCards.forEach(card => {
|
|
|
const title = card.querySelector('h3').textContent.toLowerCase();
|
|
|
const specs = card.textContent.toLowerCase();
|
|
|
|
|
|
if (title.includes(searchTerm) || specs.includes(searchTerm)) {
|
|
|
card.classList.remove('hidden');
|
|
|
visibleCount++;
|
|
|
} else {
|
|
|
card.classList.add('hidden');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
updateItemCount(visibleCount);
|
|
|
AOS.refresh();
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// --- Load More Logic (Simulation) ---
|
|
|
// Note: Add class 'load-more-btn' to your "Load More" button in HTML
|
|
|
const loadBtn = document.querySelector('button.group'); // Selecting the load more button
|
|
|
|
|
|
if(loadBtn) {
|
|
|
// loadBtn.addEventListener('click', function() {
|
|
|
// const btnContent = this.innerHTML;
|
|
|
|
|
|
// // 1. Loading State
|
|
|
// this.innerHTML = `<span class="material-symbols-outlined animate-spin mr-2">progress_activity</span> Loading...`;
|
|
|
// this.disabled = true;
|
|
|
|
|
|
// // 2. Simulate Network Delay
|
|
|
// setTimeout(() => {
|
|
|
// // 3. Clone the first 2 visible cards to simulate new data
|
|
|
// const container = document.querySelector('.columns-1');
|
|
|
// const visibleCards = Array.from(productCards).filter(c => !c.classList.contains('hidden'));
|
|
|
|
|
|
// if(visibleCards.length > 0) {
|
|
|
// // Clone first two found
|
|
|
// for(let i=0; i < Math.min(2, visibleCards.length); i++) {
|
|
|
// const clone = visibleCards[i].cloneNode(true);
|
|
|
// // Update AOS delay for staggering
|
|
|
// clone.setAttribute('data-aos-delay', (i * 100).toString());
|
|
|
// container.appendChild(clone);
|
|
|
// }
|
|
|
|
|
|
// // Re-query cards so future filters work on new items
|
|
|
// // Note: In a real app you'd append to the 'productCards' NodeList or use an array
|
|
|
// // For this static demo, new items won't be filterable unless we re-query DOM.
|
|
|
// }
|
|
|
|
|
|
// // 4. Reset Button
|
|
|
// this.innerHTML = btnContent;
|
|
|
// this.disabled = false;
|
|
|
|
|
|
// // 5. Refresh Animations
|
|
|
// AOS.refresh();
|
|
|
|
|
|
// }, 1500);
|
|
|
// });
|
|
|
}
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
AOS.init({
|
|
|
duration: 800, // 动画持续时间
|
|
|
once: true, // 动画只触发一次，防止回滚时重复触发
|
|
|
offset: 100, // 触发偏移量
|
|
|
easing: 'ease-out-cubic', // 缓动函数
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const stickyEl = document.getElementById('filter-sticky-wrapper');
|
|
|
const filterBg = document.getElementById('filter-bg');
|
|
|
|
|
|
// 1. 创建 Sentinel (哨兵元素)
|
|
|
const sentinel = document.createElement('div');
|
|
|
sentinel.setAttribute('id', 'sticky-sentinel');
|
|
|
// 把它插入到 sticky 元素的前面
|
|
|
stickyEl.parentNode.insertBefore(sentinel, stickyEl);
|
|
|
|
|
|
// 2. 配置 Observer
|
|
|
// rootMargin: -70px (对应 top-16 的 64px 加上一点缓冲)
|
|
|
// 意思是：当哨兵元素触碰到顶部以下 70px 的位置时触发
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
|
entries.forEach(entry => {
|
|
|
// 如果哨兵看不见了 (entry.isIntersecting === false)，说明 sticky 元素已经吸顶
|
|
|
if (!entry.isIntersecting && entry.boundingClientRect.top < 0) {
|
|
|
// 吸顶状态样式
|
|
|
filterBg.classList.add('border-gray-200', 'dark:border-gray-800', 'shadow-sm');
|
|
|
filterBg.classList.remove('border-transparent');
|
|
|
} else {
|
|
|
// 非吸顶状态样式
|
|
|
filterBg.classList.remove('border-gray-200', 'dark:border-gray-800', 'shadow-sm');
|
|
|
filterBg.classList.add('border-transparent');
|
|
|
}
|
|
|
});
|
|
|
}, {
|
|
|
threshold: 0,
|
|
|
rootMargin: '-72px 0px 0px 0px' // 64px header + 8px buffer
|
|
|
});
|
|
|
|
|
|
observer.observe(sentinel);
|
|
|
|
|
|
|
|
|
updateButtonStyles(document.querySelector('[data-filter="all"]'));
|
|
|
updateItemCount(productCards.length);
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
|
|
|
